Refactor frontend into pages and components
This commit is contained in:
Zeeshaun
+93
-701
@@ -8,24 +8,16 @@ import {
|
|||||||
resetMenu,
|
resetMenu,
|
||||||
updateOrderStatus
|
updateOrderStatus
|
||||||
} from "./api.js";
|
} from "./api.js";
|
||||||
import logo from "../../assets/ranaze-logo-transparent.png";
|
import AppHeader from "./components/AppHeader.jsx";
|
||||||
import heroCup from "../../assets/ranaze-bubble-tea-single-cup-transparent.png";
|
import MenuPage from "./pages/MenuPage.jsx";
|
||||||
|
import OrderPage from "./pages/OrderPage.jsx";
|
||||||
const queueStatuses = ["new", "making", "ready"];
|
import QueuePage from "./pages/QueuePage.jsx";
|
||||||
const orderIdleTimeoutMs = 90_000;
|
import {
|
||||||
const adminUnlockPressMs = 3_000;
|
ADMIN_PASSWORD,
|
||||||
const adminPassword = "admin";
|
ADMIN_UNLOCK_PRESS_MS,
|
||||||
const tabLabels = {
|
initialBuilder,
|
||||||
queue: "Order Status",
|
ORDER_IDLE_TIMEOUT_MS
|
||||||
menu: "Menu Admin"
|
} from "./lib/order.js";
|
||||||
};
|
|
||||||
const initialBuilder = (settings) => ({
|
|
||||||
size: settings.sizeOptions[0]?.name ?? "Regular",
|
|
||||||
sweetness: settings.sweetnessOptions[3] ?? settings.sweetnessOptions[0] ?? "100%",
|
|
||||||
ice: settings.iceOptions[2] ?? settings.iceOptions[0] ?? "Regular Ice",
|
|
||||||
toppings: [],
|
|
||||||
notes: ""
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const adminPressTimerRef = useRef(null);
|
const adminPressTimerRef = useRef(null);
|
||||||
@@ -73,13 +65,13 @@ export default function App() {
|
|||||||
|
|
||||||
let timeoutId = window.setTimeout(() => {
|
let timeoutId = window.setTimeout(() => {
|
||||||
setOrderMode(null);
|
setOrderMode(null);
|
||||||
}, orderIdleTimeoutMs);
|
}, ORDER_IDLE_TIMEOUT_MS);
|
||||||
|
|
||||||
function resetIdleTimer() {
|
function resetIdleTimer() {
|
||||||
window.clearTimeout(timeoutId);
|
window.clearTimeout(timeoutId);
|
||||||
timeoutId = window.setTimeout(() => {
|
timeoutId = window.setTimeout(() => {
|
||||||
setOrderMode(null);
|
setOrderMode(null);
|
||||||
}, orderIdleTimeoutMs);
|
}, ORDER_IDLE_TIMEOUT_MS);
|
||||||
}
|
}
|
||||||
|
|
||||||
const events = ["pointerdown", "keydown", "touchstart"];
|
const events = ["pointerdown", "keydown", "touchstart"];
|
||||||
@@ -138,6 +130,30 @@ export default function App() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function startAdminPress() {
|
||||||
|
window.clearTimeout(adminPressTimerRef.current);
|
||||||
|
setLogoPressing(true);
|
||||||
|
adminPressTimerRef.current = window.setTimeout(() => {
|
||||||
|
if (adminUnlocked) {
|
||||||
|
setAdminUnlocked(false);
|
||||||
|
setView("order");
|
||||||
|
} else {
|
||||||
|
const password = window.prompt("Enter admin password");
|
||||||
|
if (password === ADMIN_PASSWORD) {
|
||||||
|
setAdminUnlocked(true);
|
||||||
|
} else if (password !== null && password !== "") {
|
||||||
|
window.alert("Incorrect password");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setLogoPressing(false);
|
||||||
|
}, ADMIN_UNLOCK_PRESS_MS);
|
||||||
|
}
|
||||||
|
|
||||||
|
function cancelAdminPress() {
|
||||||
|
window.clearTimeout(adminPressTimerRef.current);
|
||||||
|
setLogoPressing(false);
|
||||||
|
}
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <div className="page-state">Loading POS...</div>;
|
return <div className="page-state">Loading POS...</div>;
|
||||||
}
|
}
|
||||||
@@ -151,698 +167,74 @@ export default function App() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const categories = ["All", ...new Set(menu.map((item) => item.category))];
|
|
||||||
const visibleMenu = menu.filter((item) => {
|
|
||||||
return selectedCategory === "All" || item.category === selectedCategory;
|
|
||||||
});
|
|
||||||
const selectedDrink = menu.find((item) => item._id === selectedDrinkId) || null;
|
|
||||||
const visibleTabs = adminUnlocked ? ["queue", "menu"] : [];
|
|
||||||
const modeDetails = {
|
|
||||||
premade: {
|
|
||||||
stepLabel: "House favorite",
|
|
||||||
title: selectedDrink?.name || "Pick a house favorite",
|
|
||||||
description: "Choose one of our ready-to-enjoy drinks and add it in one tap.",
|
|
||||||
buttonLabel: "Add to my order"
|
|
||||||
},
|
|
||||||
simple: {
|
|
||||||
stepLabel: "Quick customize",
|
|
||||||
title: selectedDrink?.name || "Choose your drink",
|
|
||||||
description: "Pick your drink, then make a few simple choices like size and sweetness.",
|
|
||||||
buttonLabel: "Add to my order"
|
|
||||||
},
|
|
||||||
detailed: {
|
|
||||||
stepLabel: "Build it your way",
|
|
||||||
title: selectedDrink?.name || "Build your drink",
|
|
||||||
description: "Customize every detail, including ice, toppings, and special requests.",
|
|
||||||
buttonLabel: "Add to my order"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const activeMode = orderMode ? modeDetails[orderMode] : null;
|
|
||||||
|
|
||||||
function startAdminPress() {
|
|
||||||
window.clearTimeout(adminPressTimerRef.current);
|
|
||||||
setLogoPressing(true);
|
|
||||||
adminPressTimerRef.current = window.setTimeout(() => {
|
|
||||||
if (adminUnlocked) {
|
|
||||||
setAdminUnlocked(false);
|
|
||||||
setView("order");
|
|
||||||
} else {
|
|
||||||
const password = window.prompt("Enter admin password");
|
|
||||||
if (password === adminPassword) {
|
|
||||||
setAdminUnlocked(true);
|
|
||||||
} else if (password !== null && password !== "") {
|
|
||||||
window.alert("Incorrect password");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setLogoPressing(false);
|
|
||||||
}, adminUnlockPressMs);
|
|
||||||
}
|
|
||||||
|
|
||||||
function cancelAdminPress() {
|
|
||||||
window.clearTimeout(adminPressTimerRef.current);
|
|
||||||
setLogoPressing(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addLineToTicket(drink, lineBuilder) {
|
|
||||||
setTicket((current) => [
|
|
||||||
...current,
|
|
||||||
{
|
|
||||||
menuItemId: drink._id,
|
|
||||||
name: drink.name,
|
|
||||||
basePrice: drink.basePrice,
|
|
||||||
...lineBuilder
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app-shell">
|
<div className="app-shell">
|
||||||
<header className="topbar">
|
<AppHeader
|
||||||
<div className="brand-lockup">
|
adminUnlocked={adminUnlocked}
|
||||||
<button
|
logoPressing={logoPressing}
|
||||||
className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
|
onLogoPointerDown={startAdminPress}
|
||||||
onPointerDown={startAdminPress}
|
onLogoPointerUp={cancelAdminPress}
|
||||||
onPointerUp={cancelAdminPress}
|
onLogoPointerLeave={cancelAdminPress}
|
||||||
onPointerLeave={cancelAdminPress}
|
onLogoPointerCancel={cancelAdminPress}
|
||||||
onPointerCancel={cancelAdminPress}
|
onHideAdmin={() => {
|
||||||
onContextMenu={(event) => event.preventDefault()}
|
setAdminUnlocked(false);
|
||||||
type="button"
|
setView("order");
|
||||||
>
|
}}
|
||||||
<img src={logo} alt="Ranaze Bubble Tea & Slush" />
|
view={view}
|
||||||
</button>
|
setView={setView}
|
||||||
<div className="brand-copy">
|
/>
|
||||||
<p className="eyebrow">Ranaze Bubble Tea & Slush</p>
|
|
||||||
<h1>Choose your drink</h1>
|
|
||||||
<p className="muted">
|
|
||||||
Fresh bubble tea, fruit slushes, and easy customizations made just the way you like them.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{adminUnlocked && (
|
|
||||||
<nav className="tabs">
|
|
||||||
{visibleTabs.map((tab) => (
|
|
||||||
<button
|
|
||||||
key={tab}
|
|
||||||
className={`tab ${view === tab ? "is-active" : ""}`}
|
|
||||||
onClick={() => setView(tab)}
|
|
||||||
>
|
|
||||||
{tabLabels[tab]}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
<button
|
|
||||||
className="tab admin-lock-btn"
|
|
||||||
onClick={() => {
|
|
||||||
setAdminUnlocked(false);
|
|
||||||
setView("order");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Hide Admin
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
)}
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{view === "order" && (
|
{view === "order" && (
|
||||||
<section className={`screen order-screen ${orderMode === "premade" || showCart ? "is-single" : ""}`}>
|
<OrderPage
|
||||||
{orderMode && (
|
menu={menu}
|
||||||
<div className="order-toolbar">
|
settings={settings}
|
||||||
<button className="text-btn" onClick={() => {
|
selectedCategory={selectedCategory}
|
||||||
setOrderMode(null);
|
setSelectedCategory={setSelectedCategory}
|
||||||
setShowCart(false);
|
selectedDrinkId={selectedDrinkId}
|
||||||
}}>
|
setSelectedDrinkId={setSelectedDrinkId}
|
||||||
Back to drink options
|
builder={builder}
|
||||||
</button>
|
setBuilder={setBuilder}
|
||||||
<div className="order-toolbar-actions">
|
ticket={ticket}
|
||||||
{ticket.length > 0 && (
|
setTicket={setTicket}
|
||||||
<button className="primary-btn subtle-btn" onClick={() => setShowCart(true)}>
|
orderMode={orderMode}
|
||||||
View Order ({ticket.length})
|
setOrderMode={setOrderMode}
|
||||||
</button>
|
showCart={showCart}
|
||||||
)}
|
setShowCart={setShowCart}
|
||||||
<p className="muted order-toolbar-note">
|
customerName={customerName}
|
||||||
This screen returns to the drink menu after 90 seconds of inactivity.
|
setCustomerName={setCustomerName}
|
||||||
</p>
|
paymentMethod={paymentMethod}
|
||||||
</div>
|
setPaymentMethod={setPaymentMethod}
|
||||||
</div>
|
createOrder={createOrder}
|
||||||
)}
|
setOrders={setOrders}
|
||||||
|
setError={setError}
|
||||||
{!orderMode && (
|
/>
|
||||||
<section className="panel mode-launcher">
|
|
||||||
<div className="mode-launcher-copy">
|
|
||||||
<p className="eyebrow">Welcome to Ranaze</p>
|
|
||||||
<h2>How would you like to choose your drink?</h2>
|
|
||||||
<p className="muted">
|
|
||||||
Start with a signature favorite, make a few quick changes, or fully customize your drink.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="mode-hero">
|
|
||||||
<div className="mode-hero-copy">
|
|
||||||
<p className="eyebrow">Freshly made for you</p>
|
|
||||||
<h3>Bubble tea, fruit tea, and slushes with easy customization.</h3>
|
|
||||||
</div>
|
|
||||||
<img src={heroCup} alt="Ranaze signature bubble tea" className="mode-hero-image" />
|
|
||||||
</div>
|
|
||||||
<div className="mode-grid">
|
|
||||||
<button className="mode-card" onClick={() => setOrderMode("premade")}>
|
|
||||||
<p className="eyebrow">Fastest</p>
|
|
||||||
<h3>House Favorites</h3>
|
|
||||||
<p className="muted">Perfect if you want one of our signature drinks with no extra steps.</p>
|
|
||||||
</button>
|
|
||||||
<button className="mode-card" onClick={() => setOrderMode("simple")}>
|
|
||||||
<p className="eyebrow">Easy</p>
|
|
||||||
<h3>Quick Customization</h3>
|
|
||||||
<p className="muted">Choose your drink, then adjust size and sweetness in just a few taps.</p>
|
|
||||||
</button>
|
|
||||||
<button className="mode-card" onClick={() => setOrderMode("detailed")}>
|
|
||||||
<p className="eyebrow">Flexible</p>
|
|
||||||
<h3>Build It Your Way</h3>
|
|
||||||
<p className="muted">Fine-tune ice, toppings, and special instructions for the exact drink you want.</p>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{orderMode && !showCart && (
|
|
||||||
<div className="panel">
|
|
||||||
<div className="panel-header">
|
|
||||||
<div>
|
|
||||||
<p className="eyebrow">{activeMode.stepLabel}</p>
|
|
||||||
<h2>Choose a drink</h2>
|
|
||||||
<p className="muted builder-intro">{activeMode.description}</p>
|
|
||||||
</div>
|
|
||||||
<div className="builder-header-actions">
|
|
||||||
<button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
|
|
||||||
{ticket.length > 0 && (
|
|
||||||
<button className="text-btn" onClick={() => setShowCart(true)}>Go to order</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="chip-row">
|
|
||||||
{categories.map((category) => (
|
|
||||||
<button
|
|
||||||
key={category}
|
|
||||||
className={`chip ${selectedCategory === category ? "is-active" : ""}`}
|
|
||||||
onClick={() => setSelectedCategory(category)}
|
|
||||||
>
|
|
||||||
{category}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="drink-grid">
|
|
||||||
{visibleMenu.map((drink) => (
|
|
||||||
<button
|
|
||||||
key={drink._id}
|
|
||||||
className={`drink-card ${selectedDrinkId === drink._id ? "is-selected" : ""}`}
|
|
||||||
onClick={() => {
|
|
||||||
if (orderMode === "premade") {
|
|
||||||
addLineToTicket(drink, initialBuilder(settings));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setSelectedDrinkId(drink._id);
|
|
||||||
setBuilder(initialBuilder(settings));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="drink-card-badge">
|
|
||||||
<span>{categoryMonogram(drink.category)}</span>
|
|
||||||
</div>
|
|
||||||
<div className="drink-card-copy">
|
|
||||||
<p className="eyebrow">{drink.category}</p>
|
|
||||||
<h3>{drink.name}</h3>
|
|
||||||
<p className="muted">{drink.description}</p>
|
|
||||||
</div>
|
|
||||||
<strong>{formatCurrency(drink.basePrice)}</strong>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{orderMode === "premade" && (
|
|
||||||
<div className="empty-state mode-note">
|
|
||||||
Tap any drink to add it to your order. Use the order button whenever you are ready to review.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{orderMode && !showCart && orderMode !== "premade" && (
|
|
||||||
<div className="panel">
|
|
||||||
{selectedDrink && builder ? (
|
|
||||||
<div className="inline-builder">
|
|
||||||
<div className="inline-builder-header">
|
|
||||||
<div>
|
|
||||||
<p className="eyebrow">Your drink</p>
|
|
||||||
<h3>{activeMode.title}</h3>
|
|
||||||
</div>
|
|
||||||
<div className="line-price">
|
|
||||||
{formatCurrency(lineTotal(selectedDrink, builder, settings))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{orderMode !== "premade" && (
|
|
||||||
<OptionGroup
|
|
||||||
label="Size"
|
|
||||||
choices={settings.sizeOptions.map((option) => option.name)}
|
|
||||||
value={builder.size}
|
|
||||||
onChange={(size) => setBuilder((current) => ({ ...current, size }))}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{orderMode !== "premade" && (
|
|
||||||
<OptionGroup
|
|
||||||
label="Sweetness"
|
|
||||||
choices={settings.sweetnessOptions}
|
|
||||||
value={builder.sweetness}
|
|
||||||
onChange={(sweetness) => setBuilder((current) => ({ ...current, sweetness }))}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{orderMode === "detailed" && (
|
|
||||||
<OptionGroup
|
|
||||||
label="Ice"
|
|
||||||
choices={settings.iceOptions}
|
|
||||||
value={builder.ice}
|
|
||||||
onChange={(ice) => setBuilder((current) => ({ ...current, ice }))}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{orderMode === "detailed" && (
|
|
||||||
<div className="field">
|
|
||||||
<span className="field-label">Toppings</span>
|
|
||||||
<div className="choice-grid">
|
|
||||||
{settings.toppings.map((topping) => {
|
|
||||||
const checked = builder.toppings.includes(topping.name);
|
|
||||||
return (
|
|
||||||
<label key={topping.name} className="checkbox-tile">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={checked}
|
|
||||||
onChange={() => {
|
|
||||||
setBuilder((current) => ({
|
|
||||||
...current,
|
|
||||||
toppings: checked
|
|
||||||
? current.toppings.filter((item) => item !== topping.name)
|
|
||||||
: [...current.toppings, topping.name]
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span>{topping.name} (+{formatCurrency(topping.price)})</span>
|
|
||||||
</label>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{orderMode === "detailed" && (
|
|
||||||
<label className="field">
|
|
||||||
<span className="field-label">Special instructions</span>
|
|
||||||
<textarea
|
|
||||||
value={builder.notes}
|
|
||||||
rows="3"
|
|
||||||
onChange={(event) => {
|
|
||||||
const notes = event.target.value;
|
|
||||||
setBuilder((current) => ({ ...current, notes }));
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
<div className="builder-actions">
|
|
||||||
<button
|
|
||||||
className="primary-btn"
|
|
||||||
onClick={() => {
|
|
||||||
addLineToTicket(selectedDrink, builder);
|
|
||||||
setBuilder(initialBuilder(settings));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{activeMode.buttonLabel}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="empty-state">Choose a drink to customize it before adding it to your order.</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{orderMode && showCart && (
|
|
||||||
<div className="panel cart-panel">
|
|
||||||
<section className="ticket">
|
|
||||||
<div className="ticket-header">
|
|
||||||
<div>
|
|
||||||
<p className="eyebrow">Your order</p>
|
|
||||||
<h3>Review your drinks</h3>
|
|
||||||
</div>
|
|
||||||
<div className="ticket-header-actions">
|
|
||||||
<button className="text-btn" onClick={() => setShowCart(false)}>Add more drinks</button>
|
|
||||||
<button className="text-btn" onClick={() => setTicket([])}>Clear all</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="ticket-lines">
|
|
||||||
{ticket.length === 0 && <div className="empty-state">Your order is empty.</div>}
|
|
||||||
{ticket.map((line, index) => (
|
|
||||||
<article key={`${line.menuItemId}-${index}`} className="ticket-line">
|
|
||||||
<header>
|
|
||||||
<strong>{line.name}</strong>
|
|
||||||
<button
|
|
||||||
className="text-btn"
|
|
||||||
onClick={() => {
|
|
||||||
setTicket((current) => current.filter((_, lineIndex) => lineIndex !== index));
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Remove
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
<p>{line.size} • {line.sweetness} • {line.ice}</p>
|
|
||||||
<p className="muted">{line.toppings.length ? line.toppings.join(", ") : "No extra toppings"}</p>
|
|
||||||
{line.notes && <p className="muted">Special request: {line.notes}</p>}
|
|
||||||
<div className="line-meta">
|
|
||||||
<span>Drink total</span>
|
|
||||||
<strong>{formatCurrency(lineTotal({ basePrice: line.basePrice }, line, settings))}</strong>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="checkout-form">
|
|
||||||
<label className="field">
|
|
||||||
<span className="field-label">Name for the order</span>
|
|
||||||
<input
|
|
||||||
placeholder="Optional"
|
|
||||||
value={customerName}
|
|
||||||
maxLength="40"
|
|
||||||
onChange={(event) => setCustomerName(event.target.value)}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="field">
|
|
||||||
<span className="field-label">How would you like to pay?</span>
|
|
||||||
<select
|
|
||||||
value={paymentMethod}
|
|
||||||
onChange={(event) => setPaymentMethod(event.target.value)}
|
|
||||||
>
|
|
||||||
<option value="cash">Cash</option>
|
|
||||||
<option value="tab">Store Tab</option>
|
|
||||||
<option value="unpaid">Pay Later</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<button
|
|
||||||
className="primary-btn"
|
|
||||||
disabled={ticket.length === 0}
|
|
||||||
onClick={async () => {
|
|
||||||
try {
|
|
||||||
const payload = {
|
|
||||||
customerName,
|
|
||||||
paymentMethod,
|
|
||||||
lines: ticket
|
|
||||||
};
|
|
||||||
const response = await createOrder(payload);
|
|
||||||
setOrders((current) => [response.order, ...current]);
|
|
||||||
setTicket([]);
|
|
||||||
setCustomerName("");
|
|
||||||
setPaymentMethod("cash");
|
|
||||||
setShowCart(false);
|
|
||||||
setOrderMode(null);
|
|
||||||
} catch (requestError) {
|
|
||||||
setError(requestError.message);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Place my order
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{view === "queue" && (
|
{view === "queue" && (
|
||||||
<section className="queue-screen">
|
<QueuePage
|
||||||
<div className="queue-summary">
|
orders={orders}
|
||||||
<SummaryCard label="Open orders" value={orders.filter((order) => order.status !== "completed").length} />
|
updateOrderStatus={updateOrderStatus}
|
||||||
<SummaryCard label="New" value={orders.filter((order) => order.status === "new").length} />
|
deleteOrder={deleteOrder}
|
||||||
<SummaryCard label="Making" value={orders.filter((order) => order.status === "making").length} />
|
setOrders={setOrders}
|
||||||
<SummaryCard label="Ready" value={orders.filter((order) => order.status === "ready").length} />
|
setError={setError}
|
||||||
</div>
|
/>
|
||||||
<div className="queue-columns">
|
|
||||||
{queueStatuses.map((status) => (
|
|
||||||
<section key={status} className="queue-column">
|
|
||||||
<div className="column-head">
|
|
||||||
<p className="eyebrow">{titleCase(status)}</p>
|
|
||||||
<h3>{orders.filter((order) => order.status === status).length} orders</h3>
|
|
||||||
</div>
|
|
||||||
{orders.filter((order) => order.status === status).map((order) => (
|
|
||||||
<article key={order._id} className="queue-card">
|
|
||||||
<header>
|
|
||||||
<div>
|
|
||||||
<p className="eyebrow">Order #{order.number}</p>
|
|
||||||
<h3>{order.customerName || "Walk-in"}</h3>
|
|
||||||
</div>
|
|
||||||
<strong>{formatCurrency(order.total)}</strong>
|
|
||||||
</header>
|
|
||||||
<p className="muted">{formatTime(order.createdAt)} • {titleCase(order.paymentMethod)}</p>
|
|
||||||
<div>
|
|
||||||
{order.lines.map((line, index) => (
|
|
||||||
<p key={`${order._id}-${index}`}>• {line.name} ({line.size})</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="status-actions">
|
|
||||||
{nextStatusButton(order, async (newStatus) => {
|
|
||||||
try {
|
|
||||||
const response = await updateOrderStatus(order._id, newStatus);
|
|
||||||
setOrders((current) => current.map((item) => {
|
|
||||||
return item._id === response.order._id ? response.order : item;
|
|
||||||
}));
|
|
||||||
} catch (requestError) {
|
|
||||||
setError(requestError.message);
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
<button
|
|
||||||
className="status-btn danger"
|
|
||||||
onClick={async () => {
|
|
||||||
try {
|
|
||||||
await deleteOrder(order._id);
|
|
||||||
setOrders((current) => current.filter((item) => item._id !== order._id));
|
|
||||||
} catch (requestError) {
|
|
||||||
setError(requestError.message);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
{orders.filter((order) => order.status === status).length === 0 && (
|
|
||||||
<div className="empty-state">No orders in {status}.</div>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{view === "menu" && (
|
{view === "menu" && (
|
||||||
<section className="menu-screen">
|
<MenuPage
|
||||||
<div className="panel">
|
menu={menu}
|
||||||
<div className="panel-header">
|
menuForm={menuForm}
|
||||||
<div>
|
setMenuForm={setMenuForm}
|
||||||
<p className="eyebrow">Menu management</p>
|
createMenuItem={createMenuItem}
|
||||||
<h2>Drinks and pricing</h2>
|
deleteMenuItem={deleteMenuItem}
|
||||||
</div>
|
resetMenu={resetMenu}
|
||||||
</div>
|
setMenu={setMenu}
|
||||||
<div className="menu-form">
|
setSelectedDrinkId={setSelectedDrinkId}
|
||||||
<label className="field">
|
settings={settings}
|
||||||
<span className="field-label">Drink name</span>
|
setBuilder={setBuilder}
|
||||||
<input
|
setError={setError}
|
||||||
value={menuForm.name}
|
/>
|
||||||
onChange={(event) => setMenuForm((current) => ({ ...current, name: event.target.value }))}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="field">
|
|
||||||
<span className="field-label">Category</span>
|
|
||||||
<input
|
|
||||||
value={menuForm.category}
|
|
||||||
onChange={(event) => setMenuForm((current) => ({ ...current, category: event.target.value }))}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="field">
|
|
||||||
<span className="field-label">Description</span>
|
|
||||||
<textarea
|
|
||||||
rows="3"
|
|
||||||
value={menuForm.description}
|
|
||||||
onChange={(event) => setMenuForm((current) => ({ ...current, description: event.target.value }))}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<label className="field">
|
|
||||||
<span className="field-label">Base price</span>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
min="0"
|
|
||||||
step="0.01"
|
|
||||||
value={menuForm.price}
|
|
||||||
onChange={(event) => setMenuForm((current) => ({ ...current, price: event.target.value }))}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<button
|
|
||||||
className="primary-btn"
|
|
||||||
onClick={async () => {
|
|
||||||
try {
|
|
||||||
const response = await createMenuItem({
|
|
||||||
name: menuForm.name,
|
|
||||||
category: menuForm.category,
|
|
||||||
description: menuForm.description,
|
|
||||||
basePrice: Number(menuForm.price)
|
|
||||||
});
|
|
||||||
setMenu((current) => [...current, response.menuItem]);
|
|
||||||
setMenuForm({ name: "", category: "", description: "", price: "" });
|
|
||||||
} catch (requestError) {
|
|
||||||
setError(requestError.message);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Add drink
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="panel">
|
|
||||||
<div className="panel-header">
|
|
||||||
<div>
|
|
||||||
<p className="eyebrow">Saved in Mongo</p>
|
|
||||||
<h2>Current menu</h2>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="text-btn"
|
|
||||||
onClick={async () => {
|
|
||||||
try {
|
|
||||||
const response = await resetMenu();
|
|
||||||
setMenu(response.menu);
|
|
||||||
setSelectedDrinkId(response.menu[0]?._id ?? null);
|
|
||||||
setBuilder(initialBuilder(settings));
|
|
||||||
} catch (requestError) {
|
|
||||||
setError(requestError.message);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Reset defaults
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="menu-list">
|
|
||||||
{menu.map((drink) => (
|
|
||||||
<article key={drink._id} className="menu-item">
|
|
||||||
<div>
|
|
||||||
<p className="eyebrow">{drink.category}</p>
|
|
||||||
<h3>{drink.name} <span className="muted">{formatCurrency(drink.basePrice)}</span></h3>
|
|
||||||
<p className="muted">{drink.description}</p>
|
|
||||||
</div>
|
|
||||||
<div className="menu-item-actions">
|
|
||||||
<button
|
|
||||||
className="text-btn"
|
|
||||||
onClick={async () => {
|
|
||||||
try {
|
|
||||||
await deleteMenuItem(drink._id);
|
|
||||||
setMenu((current) => current.filter((item) => item._id !== drink._id));
|
|
||||||
} catch (requestError) {
|
|
||||||
setError(requestError.message);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function OptionGroup({ label, choices, value, onChange }) {
|
|
||||||
return (
|
|
||||||
<div className="field">
|
|
||||||
<span className="field-label">{label}</span>
|
|
||||||
<div className="choice-row">
|
|
||||||
{choices.map((choice) => (
|
|
||||||
<button
|
|
||||||
key={choice}
|
|
||||||
className={`choice-btn ${choice === value ? "is-active" : ""}`}
|
|
||||||
onClick={() => onChange(choice)}
|
|
||||||
>
|
|
||||||
{choice}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SummaryCard({ label, value }) {
|
|
||||||
return (
|
|
||||||
<article className="summary-card">
|
|
||||||
<p className="eyebrow">{label}</p>
|
|
||||||
<strong>{value}</strong>
|
|
||||||
</article>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function categoryMonogram(category) {
|
|
||||||
const map = {
|
|
||||||
"Milk Tea": "MT",
|
|
||||||
"Fruit Tea": "FT",
|
|
||||||
Specialty: "SP"
|
|
||||||
};
|
|
||||||
|
|
||||||
return map[category] || category.slice(0, 2).toUpperCase();
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextStatusButton(order, onAdvance) {
|
|
||||||
const map = {
|
|
||||||
new: "making",
|
|
||||||
making: "ready",
|
|
||||||
ready: "completed"
|
|
||||||
};
|
|
||||||
const next = map[order.status];
|
|
||||||
if (!next) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button className="status-btn" onClick={() => onAdvance(next)}>
|
|
||||||
{next === "making" ? "Start making" : next === "ready" ? "Mark ready" : "Complete"}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function toppingTotal(toppings, settings) {
|
|
||||||
return toppings.reduce((sum, toppingName) => {
|
|
||||||
const topping = settings.toppings.find((item) => item.name === toppingName);
|
|
||||||
return sum + (topping?.price ?? 0);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function sizeDelta(size, settings) {
|
|
||||||
return settings.sizeOptions.find((option) => option.name === size)?.delta ?? 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
function lineTotal(drink, builder, settings) {
|
|
||||||
return drink.basePrice + sizeDelta(builder.size, settings) + toppingTotal(builder.toppings, settings);
|
|
||||||
}
|
|
||||||
|
|
||||||
function ticketTotal(ticket, settings) {
|
|
||||||
return ticket.reduce((sum, line) => sum + lineTotal({ basePrice: line.basePrice }, line, settings), 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatCurrency(value) {
|
|
||||||
return new Intl.NumberFormat("en-US", {
|
|
||||||
style: "currency",
|
|
||||||
currency: "USD"
|
|
||||||
}).format(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatTime(value) {
|
|
||||||
return new Intl.DateTimeFormat("en-US", {
|
|
||||||
hour: "numeric",
|
|
||||||
minute: "2-digit"
|
|
||||||
}).format(new Date(value));
|
|
||||||
}
|
|
||||||
|
|
||||||
function titleCase(value) {
|
|
||||||
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import logo from "../../../assets/ranaze-logo-transparent.png";
|
||||||
|
|
||||||
|
const tabLabels = {
|
||||||
|
queue: "Order Status",
|
||||||
|
menu: "Menu Admin"
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AppHeader({
|
||||||
|
adminUnlocked,
|
||||||
|
logoPressing,
|
||||||
|
onLogoPointerDown,
|
||||||
|
onLogoPointerUp,
|
||||||
|
onLogoPointerLeave,
|
||||||
|
onLogoPointerCancel,
|
||||||
|
onHideAdmin,
|
||||||
|
view,
|
||||||
|
setView
|
||||||
|
}) {
|
||||||
|
const visibleTabs = adminUnlocked ? ["queue", "menu"] : [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="topbar">
|
||||||
|
<div className="brand-lockup">
|
||||||
|
<button
|
||||||
|
className={`brand-mark ${logoPressing ? "is-pressing" : ""}`}
|
||||||
|
onPointerDown={onLogoPointerDown}
|
||||||
|
onPointerUp={onLogoPointerUp}
|
||||||
|
onPointerLeave={onLogoPointerLeave}
|
||||||
|
onPointerCancel={onLogoPointerCancel}
|
||||||
|
onContextMenu={(event) => event.preventDefault()}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<img src={logo} alt="Ranaze Bubble Tea & Slush" />
|
||||||
|
</button>
|
||||||
|
<div className="brand-copy">
|
||||||
|
<p className="eyebrow">Ranaze Bubble Tea & Slush</p>
|
||||||
|
<h1>Choose your drink</h1>
|
||||||
|
<p className="muted">
|
||||||
|
Fresh drinks.
|
||||||
|
Made your way.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{adminUnlocked && (
|
||||||
|
<nav className="tabs">
|
||||||
|
{visibleTabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab}
|
||||||
|
className={`tab ${view === tab ? "is-active" : ""}`}
|
||||||
|
onClick={() => setView(tab)}
|
||||||
|
>
|
||||||
|
{tabLabels[tab]}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
<button className="tab admin-lock-btn" onClick={onHideAdmin}>
|
||||||
|
Hide Admin
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
export default function OptionGroup({ label, choices, value, onChange }) {
|
||||||
|
return (
|
||||||
|
<div className="field">
|
||||||
|
<span className="field-label">{label}</span>
|
||||||
|
<div className="choice-row">
|
||||||
|
{choices.map((choice) => (
|
||||||
|
<button
|
||||||
|
key={choice}
|
||||||
|
className={`choice-btn ${choice === value ? "is-active" : ""}`}
|
||||||
|
onClick={() => onChange(choice)}
|
||||||
|
>
|
||||||
|
{choice}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
export default function SummaryCard({ label, value }) {
|
||||||
|
return (
|
||||||
|
<article className="summary-card">
|
||||||
|
<p className="eyebrow">{label}</p>
|
||||||
|
<strong>{value}</strong>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
export function formatCurrency(value) {
|
||||||
|
return new Intl.NumberFormat("en-US", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "USD"
|
||||||
|
}).format(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatTime(value) {
|
||||||
|
return new Intl.DateTimeFormat("en-US", {
|
||||||
|
hour: "numeric",
|
||||||
|
minute: "2-digit"
|
||||||
|
}).format(new Date(value));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function titleCase(value) {
|
||||||
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
export const ORDER_IDLE_TIMEOUT_MS = 90_000;
|
||||||
|
export const ADMIN_UNLOCK_PRESS_MS = 3_000;
|
||||||
|
export const ADMIN_PASSWORD = "admin";
|
||||||
|
|
||||||
|
export const HERO_CATEGORIES = [
|
||||||
|
{ label: "Milk Tea", asset: "milk-tea", displayLabel: "Milk Tea" },
|
||||||
|
{ label: "Fruit Tea", asset: "fruit-tea", displayLabel: "Fruit Tea" },
|
||||||
|
{ label: "Specialty", asset: "slush", displayLabel: "Slush" }
|
||||||
|
];
|
||||||
|
|
||||||
|
export function initialBuilder(settings) {
|
||||||
|
return {
|
||||||
|
size: settings.sizeOptions[0]?.name ?? "Regular",
|
||||||
|
sweetness: settings.sweetnessOptions[3] ?? settings.sweetnessOptions[0] ?? "100%",
|
||||||
|
ice: settings.iceOptions[2] ?? settings.iceOptions[0] ?? "Regular Ice",
|
||||||
|
toppings: [],
|
||||||
|
notes: ""
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toppingTotal(toppings, settings) {
|
||||||
|
return toppings.reduce((sum, toppingName) => {
|
||||||
|
const topping = settings.toppings.find((item) => item.name === toppingName);
|
||||||
|
return sum + (topping?.price ?? 0);
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function sizeDelta(size, settings) {
|
||||||
|
return settings.sizeOptions.find((option) => option.name === size)?.delta ?? 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function lineTotal(drink, builder, settings) {
|
||||||
|
return drink.basePrice + sizeDelta(builder.size, settings) + toppingTotal(builder.toppings, settings);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ticketTotal(ticket, settings) {
|
||||||
|
return ticket.reduce((sum, line) => sum + lineTotal({ basePrice: line.basePrice }, line, settings), 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function categoryMonogram(category) {
|
||||||
|
const map = {
|
||||||
|
"Milk Tea": "MT",
|
||||||
|
"Fruit Tea": "FT",
|
||||||
|
Specialty: "SP"
|
||||||
|
};
|
||||||
|
|
||||||
|
return map[category] || category.slice(0, 2).toUpperCase();
|
||||||
|
}
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
import { formatCurrency } from "../lib/formatters.js";
|
||||||
|
import { initialBuilder } from "../lib/order.js";
|
||||||
|
|
||||||
|
export default function MenuPage({
|
||||||
|
menu,
|
||||||
|
menuForm,
|
||||||
|
setMenuForm,
|
||||||
|
createMenuItem,
|
||||||
|
deleteMenuItem,
|
||||||
|
resetMenu,
|
||||||
|
setMenu,
|
||||||
|
setSelectedDrinkId,
|
||||||
|
settings,
|
||||||
|
setBuilder,
|
||||||
|
setError
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<section className="menu-screen">
|
||||||
|
<div className="panel">
|
||||||
|
<div className="panel-header">
|
||||||
|
<div>
|
||||||
|
<p className="eyebrow">Menu management</p>
|
||||||
|
<h2>Drinks and pricing</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="menu-form">
|
||||||
|
<label className="field">
|
||||||
|
<span className="field-label">Drink name</span>
|
||||||
|
<input
|
||||||
|
value={menuForm.name}
|
||||||
|
onChange={(event) => setMenuForm((current) => ({ ...current, name: event.target.value }))}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="field">
|
||||||
|
<span className="field-label">Category</span>
|
||||||
|
<input
|
||||||
|
value={menuForm.category}
|
||||||
|
onChange={(event) => setMenuForm((current) => ({ ...current, category: event.target.value }))}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="field">
|
||||||
|
<span className="field-label">Description</span>
|
||||||
|
<textarea
|
||||||
|
rows="3"
|
||||||
|
value={menuForm.description}
|
||||||
|
onChange={(event) => setMenuForm((current) => ({ ...current, description: event.target.value }))}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="field">
|
||||||
|
<span className="field-label">Base price</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
value={menuForm.price}
|
||||||
|
onChange={(event) => setMenuForm((current) => ({ ...current, price: event.target.value }))}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
className="primary-btn"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
const response = await createMenuItem({
|
||||||
|
name: menuForm.name,
|
||||||
|
category: menuForm.category,
|
||||||
|
description: menuForm.description,
|
||||||
|
basePrice: Number(menuForm.price)
|
||||||
|
});
|
||||||
|
setMenu((current) => [...current, response.menuItem]);
|
||||||
|
setMenuForm({ name: "", category: "", description: "", price: "" });
|
||||||
|
} catch (requestError) {
|
||||||
|
setError(requestError.message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add drink
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="panel">
|
||||||
|
<div className="panel-header">
|
||||||
|
<div>
|
||||||
|
<p className="eyebrow">Saved in Mongo</p>
|
||||||
|
<h2>Current menu</h2>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="text-btn"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
const response = await resetMenu();
|
||||||
|
setMenu(response.menu);
|
||||||
|
setSelectedDrinkId(response.menu[0]?._id ?? null);
|
||||||
|
setBuilder(initialBuilder(settings));
|
||||||
|
} catch (requestError) {
|
||||||
|
setError(requestError.message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Reset defaults
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="menu-list">
|
||||||
|
{menu.map((drink) => (
|
||||||
|
<article key={drink._id} className="menu-item">
|
||||||
|
<div>
|
||||||
|
<p className="eyebrow">{drink.category}</p>
|
||||||
|
<h3>{drink.name} <span className="muted">{formatCurrency(drink.basePrice)}</span></h3>
|
||||||
|
<p className="muted">{drink.description}</p>
|
||||||
|
</div>
|
||||||
|
<div className="menu-item-actions">
|
||||||
|
<button
|
||||||
|
className="text-btn"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await deleteMenuItem(drink._id);
|
||||||
|
setMenu((current) => current.filter((item) => item._id !== drink._id));
|
||||||
|
} catch (requestError) {
|
||||||
|
setError(requestError.message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,436 @@
|
|||||||
|
import heroCup from "../../../assets/ranaze-bubble-tea-single-cup-transparent.png";
|
||||||
|
import milkTeaBadge from "../../../assets/milk-tea-badge.png";
|
||||||
|
import fruitTeaBadge from "../../../assets/fruit-tea-badge-transparent.png";
|
||||||
|
import slushBadge from "../../../assets/slush-badge.png";
|
||||||
|
import OptionGroup from "../components/OptionGroup.jsx";
|
||||||
|
import {
|
||||||
|
categoryMonogram,
|
||||||
|
HERO_CATEGORIES,
|
||||||
|
initialBuilder,
|
||||||
|
lineTotal,
|
||||||
|
ticketTotal
|
||||||
|
} from "../lib/order.js";
|
||||||
|
import { formatCurrency } from "../lib/formatters.js";
|
||||||
|
|
||||||
|
const heroCategoryImages = {
|
||||||
|
"milk-tea": milkTeaBadge,
|
||||||
|
"fruit-tea": fruitTeaBadge,
|
||||||
|
slush: slushBadge
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function OrderPage({
|
||||||
|
menu,
|
||||||
|
settings,
|
||||||
|
selectedCategory,
|
||||||
|
setSelectedCategory,
|
||||||
|
selectedDrinkId,
|
||||||
|
setSelectedDrinkId,
|
||||||
|
builder,
|
||||||
|
setBuilder,
|
||||||
|
ticket,
|
||||||
|
setTicket,
|
||||||
|
orderMode,
|
||||||
|
setOrderMode,
|
||||||
|
showCart,
|
||||||
|
setShowCart,
|
||||||
|
customerName,
|
||||||
|
setCustomerName,
|
||||||
|
paymentMethod,
|
||||||
|
setPaymentMethod,
|
||||||
|
createOrder,
|
||||||
|
setOrders,
|
||||||
|
setError
|
||||||
|
}) {
|
||||||
|
const categories = ["All", ...new Set(menu.map((item) => item.category))];
|
||||||
|
const visibleMenu = menu.filter((item) => {
|
||||||
|
return selectedCategory === "All" || item.category === selectedCategory;
|
||||||
|
});
|
||||||
|
const selectedDrink = menu.find((item) => item._id === selectedDrinkId) || null;
|
||||||
|
const activeMode = getModeDetails(orderMode, selectedDrink);
|
||||||
|
|
||||||
|
function addLineToTicket(drink, lineBuilder) {
|
||||||
|
setTicket((current) => [
|
||||||
|
...current,
|
||||||
|
{
|
||||||
|
menuItemId: drink._id,
|
||||||
|
name: drink.name,
|
||||||
|
basePrice: drink.basePrice,
|
||||||
|
...lineBuilder
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={`screen order-screen ${orderMode === "premade" || showCart ? "is-single" : ""}`}>
|
||||||
|
{orderMode && (
|
||||||
|
<div className="order-toolbar">
|
||||||
|
<button className="text-btn" onClick={() => {
|
||||||
|
setOrderMode(null);
|
||||||
|
setShowCart(false);
|
||||||
|
}}>
|
||||||
|
Back to drink options
|
||||||
|
</button>
|
||||||
|
<div className="order-toolbar-actions">
|
||||||
|
{ticket.length > 0 && (
|
||||||
|
<button className="primary-btn subtle-btn" onClick={() => setShowCart(true)}>
|
||||||
|
View Order ({ticket.length})
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<p className="muted order-toolbar-note">
|
||||||
|
This screen returns to the drink menu after 90 seconds of inactivity.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!orderMode && (
|
||||||
|
<section className="panel mode-launcher">
|
||||||
|
<div className="mode-launcher-copy">
|
||||||
|
<p className="eyebrow">Welcome to Ranaze</p>
|
||||||
|
<h2>Choose your drink.</h2>
|
||||||
|
<div className="hero-copy-list muted">
|
||||||
|
<p>Start fast.</p>
|
||||||
|
<p>Customize if you want.</p>
|
||||||
|
</div>
|
||||||
|
<div className="hero-cta-row">
|
||||||
|
<button className="primary-btn hero-primary-btn" onClick={() => setOrderMode("premade")}>
|
||||||
|
Start Order
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="hero-category-row">
|
||||||
|
{HERO_CATEGORIES.map((category) => (
|
||||||
|
<button
|
||||||
|
key={category.label}
|
||||||
|
className="hero-category-btn"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedCategory(category.label);
|
||||||
|
setOrderMode("premade");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img src={heroCategoryImages[category.asset]} alt="" />
|
||||||
|
<span>{category.displayLabel}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mode-hero">
|
||||||
|
<div className="mode-hero-copy">
|
||||||
|
<p className="eyebrow">Freshly made for you</p>
|
||||||
|
<div className="hero-copy-list muted">
|
||||||
|
<p>Bubble tea.</p>
|
||||||
|
<p>Fruit tea.</p>
|
||||||
|
<p>Slushes.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src={heroCup} alt="Ranaze signature bubble tea" className="mode-hero-image" />
|
||||||
|
</div>
|
||||||
|
<div className="mode-grid">
|
||||||
|
<ModeCard
|
||||||
|
eyebrow="Fastest"
|
||||||
|
title="House Favorites"
|
||||||
|
lines={["Signature drinks.", "No extra steps."]}
|
||||||
|
cta="Choose favorites"
|
||||||
|
onClick={() => setOrderMode("premade")}
|
||||||
|
/>
|
||||||
|
<ModeCard
|
||||||
|
eyebrow="Easy"
|
||||||
|
title="Quick Customization"
|
||||||
|
lines={["Pick your drink.", "Adjust a few basics."]}
|
||||||
|
cta="Start customizing"
|
||||||
|
onClick={() => setOrderMode("simple")}
|
||||||
|
/>
|
||||||
|
<ModeCard
|
||||||
|
eyebrow="Flexible"
|
||||||
|
title="Build It Your Way"
|
||||||
|
lines={["Full control.", "Every detail matters."]}
|
||||||
|
cta="Build my drink"
|
||||||
|
onClick={() => setOrderMode("detailed")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{orderMode && !showCart && (
|
||||||
|
<div className="panel">
|
||||||
|
<div className="panel-header">
|
||||||
|
<div>
|
||||||
|
<p className="eyebrow">{activeMode.stepLabel}</p>
|
||||||
|
<h2>Choose a drink</h2>
|
||||||
|
<p className="muted builder-intro">{activeMode.description}</p>
|
||||||
|
</div>
|
||||||
|
<div className="builder-header-actions">
|
||||||
|
<button className="text-btn" onClick={() => setOrderMode(null)}>Change order style</button>
|
||||||
|
{ticket.length > 0 && (
|
||||||
|
<button className="text-btn" onClick={() => setShowCart(true)}>Go to order</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="chip-row">
|
||||||
|
{categories.map((category) => (
|
||||||
|
<button
|
||||||
|
key={category}
|
||||||
|
className={`chip ${selectedCategory === category ? "is-active" : ""}`}
|
||||||
|
onClick={() => setSelectedCategory(category)}
|
||||||
|
>
|
||||||
|
{category}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="drink-grid">
|
||||||
|
{visibleMenu.map((drink) => (
|
||||||
|
<button
|
||||||
|
key={drink._id}
|
||||||
|
className={`drink-card ${selectedDrinkId === drink._id ? "is-selected" : ""}`}
|
||||||
|
onClick={() => {
|
||||||
|
if (orderMode === "premade") {
|
||||||
|
addLineToTicket(drink, initialBuilder(settings));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSelectedDrinkId(drink._id);
|
||||||
|
setBuilder(initialBuilder(settings));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="drink-card-badge">
|
||||||
|
<span>{categoryMonogram(drink.category)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="drink-card-copy">
|
||||||
|
<p className="eyebrow">{drink.category}</p>
|
||||||
|
<h3>{drink.name}</h3>
|
||||||
|
<p className="muted">{drink.description}</p>
|
||||||
|
</div>
|
||||||
|
<strong>{formatCurrency(drink.basePrice)}</strong>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{orderMode === "premade" && (
|
||||||
|
<div className="empty-state mode-note">
|
||||||
|
Tap any drink to add it to your order. Use the order button whenever you are ready to review.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{orderMode && !showCart && orderMode !== "premade" && (
|
||||||
|
<div className="panel">
|
||||||
|
{selectedDrink && builder ? (
|
||||||
|
<div className="inline-builder">
|
||||||
|
<div className="inline-builder-header">
|
||||||
|
<div>
|
||||||
|
<p className="eyebrow">Your drink</p>
|
||||||
|
<h3>{activeMode.title}</h3>
|
||||||
|
</div>
|
||||||
|
<div className="line-price">
|
||||||
|
{formatCurrency(lineTotal(selectedDrink, builder, settings))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<OptionGroup
|
||||||
|
label="Size"
|
||||||
|
choices={settings.sizeOptions.map((option) => option.name)}
|
||||||
|
value={builder.size}
|
||||||
|
onChange={(size) => setBuilder((current) => ({ ...current, size }))}
|
||||||
|
/>
|
||||||
|
<OptionGroup
|
||||||
|
label="Sweetness"
|
||||||
|
choices={settings.sweetnessOptions}
|
||||||
|
value={builder.sweetness}
|
||||||
|
onChange={(sweetness) => setBuilder((current) => ({ ...current, sweetness }))}
|
||||||
|
/>
|
||||||
|
{orderMode === "detailed" && (
|
||||||
|
<OptionGroup
|
||||||
|
label="Ice"
|
||||||
|
choices={settings.iceOptions}
|
||||||
|
value={builder.ice}
|
||||||
|
onChange={(ice) => setBuilder((current) => ({ ...current, ice }))}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{orderMode === "detailed" && (
|
||||||
|
<div className="field">
|
||||||
|
<span className="field-label">Toppings</span>
|
||||||
|
<div className="choice-grid">
|
||||||
|
{settings.toppings.map((topping) => {
|
||||||
|
const checked = builder.toppings.includes(topping.name);
|
||||||
|
return (
|
||||||
|
<label key={topping.name} className="checkbox-tile">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={checked}
|
||||||
|
onChange={() => {
|
||||||
|
setBuilder((current) => ({
|
||||||
|
...current,
|
||||||
|
toppings: checked
|
||||||
|
? current.toppings.filter((item) => item !== topping.name)
|
||||||
|
: [...current.toppings, topping.name]
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span>{topping.name} (+{formatCurrency(topping.price)})</span>
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{orderMode === "detailed" && (
|
||||||
|
<label className="field">
|
||||||
|
<span className="field-label">Special instructions</span>
|
||||||
|
<textarea
|
||||||
|
value={builder.notes}
|
||||||
|
rows="3"
|
||||||
|
onChange={(event) => {
|
||||||
|
const notes = event.target.value;
|
||||||
|
setBuilder((current) => ({ ...current, notes }));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<div className="builder-actions">
|
||||||
|
<button
|
||||||
|
className="primary-btn"
|
||||||
|
onClick={() => {
|
||||||
|
addLineToTicket(selectedDrink, builder);
|
||||||
|
setBuilder(initialBuilder(settings));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{activeMode.buttonLabel}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="empty-state">Choose a drink to customize it before adding it to your order.</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{orderMode && showCart && (
|
||||||
|
<div className="panel cart-panel">
|
||||||
|
<section className="ticket">
|
||||||
|
<div className="ticket-header">
|
||||||
|
<div>
|
||||||
|
<p className="eyebrow">Your order</p>
|
||||||
|
<h3>Review your drinks</h3>
|
||||||
|
</div>
|
||||||
|
<div className="ticket-header-actions">
|
||||||
|
<button className="text-btn" onClick={() => setShowCart(false)}>Add more drinks</button>
|
||||||
|
<button className="text-btn" onClick={() => setTicket([])}>Clear all</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ticket-lines">
|
||||||
|
{ticket.length === 0 && <div className="empty-state">Your order is empty.</div>}
|
||||||
|
{ticket.map((line, index) => (
|
||||||
|
<article key={`${line.menuItemId}-${index}`} className="ticket-line">
|
||||||
|
<header>
|
||||||
|
<strong>{line.name}</strong>
|
||||||
|
<button
|
||||||
|
className="text-btn"
|
||||||
|
onClick={() => {
|
||||||
|
setTicket((current) => current.filter((_, lineIndex) => lineIndex !== index));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<p>{line.size} • {line.sweetness} • {line.ice}</p>
|
||||||
|
<p className="muted">{line.toppings.length ? line.toppings.join(", ") : "No extra toppings"}</p>
|
||||||
|
{line.notes && <p className="muted">Special request: {line.notes}</p>}
|
||||||
|
<div className="line-meta">
|
||||||
|
<span>Drink total</span>
|
||||||
|
<strong>{formatCurrency(lineTotal({ basePrice: line.basePrice }, line, settings))}</strong>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="checkout-form">
|
||||||
|
<label className="field">
|
||||||
|
<span className="field-label">Name for the order</span>
|
||||||
|
<input
|
||||||
|
placeholder="Optional"
|
||||||
|
value={customerName}
|
||||||
|
maxLength="40"
|
||||||
|
onChange={(event) => setCustomerName(event.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="field">
|
||||||
|
<span className="field-label">How would you like to pay?</span>
|
||||||
|
<select
|
||||||
|
value={paymentMethod}
|
||||||
|
onChange={(event) => setPaymentMethod(event.target.value)}
|
||||||
|
>
|
||||||
|
<option value="cash">Cash</option>
|
||||||
|
<option value="tab">Store Tab</option>
|
||||||
|
<option value="unpaid">Pay Later</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
className="primary-btn"
|
||||||
|
disabled={ticket.length === 0}
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
customerName,
|
||||||
|
paymentMethod,
|
||||||
|
lines: ticket
|
||||||
|
};
|
||||||
|
const response = await createOrder(payload);
|
||||||
|
setOrders((current) => [response.order, ...current]);
|
||||||
|
setTicket([]);
|
||||||
|
setCustomerName("");
|
||||||
|
setPaymentMethod("cash");
|
||||||
|
setShowCart(false);
|
||||||
|
setOrderMode(null);
|
||||||
|
} catch (requestError) {
|
||||||
|
setError(requestError.message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Place my order
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getModeDetails(orderMode, selectedDrink) {
|
||||||
|
const modeDetails = {
|
||||||
|
premade: {
|
||||||
|
stepLabel: "House favorite",
|
||||||
|
title: selectedDrink?.name || "Pick a house favorite",
|
||||||
|
description: "Ready to enjoy. One quick tap.",
|
||||||
|
buttonLabel: "Add to my order"
|
||||||
|
},
|
||||||
|
simple: {
|
||||||
|
stepLabel: "Quick customize",
|
||||||
|
title: selectedDrink?.name || "Choose your drink",
|
||||||
|
description: "Pick your drink. Choose size and sweetness.",
|
||||||
|
buttonLabel: "Add to my order"
|
||||||
|
},
|
||||||
|
detailed: {
|
||||||
|
stepLabel: "Build it your way",
|
||||||
|
title: selectedDrink?.name || "Build your drink",
|
||||||
|
description: "Customize it all. Ice, toppings, and special requests.",
|
||||||
|
buttonLabel: "Add to my order"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return modeDetails[orderMode];
|
||||||
|
}
|
||||||
|
|
||||||
|
function ModeCard({ eyebrow, title, lines, cta, onClick }) {
|
||||||
|
return (
|
||||||
|
<button className="mode-card" onClick={onClick}>
|
||||||
|
<p className="eyebrow">{eyebrow}</p>
|
||||||
|
<h3>{title}</h3>
|
||||||
|
<div className="mode-card-list muted">
|
||||||
|
{lines.map((line) => (
|
||||||
|
<p key={line}>{line}</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span className="mode-card-cta">{cta}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
import SummaryCard from "../components/SummaryCard.jsx";
|
||||||
|
import { formatCurrency, formatTime, titleCase } from "../lib/formatters.js";
|
||||||
|
|
||||||
|
const queueStatuses = ["new", "making", "ready"];
|
||||||
|
|
||||||
|
export default function QueuePage({
|
||||||
|
orders,
|
||||||
|
updateOrderStatus,
|
||||||
|
deleteOrder,
|
||||||
|
setOrders,
|
||||||
|
setError
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<section className="queue-screen">
|
||||||
|
<div className="queue-summary">
|
||||||
|
<SummaryCard label="Open orders" value={orders.filter((order) => order.status !== "completed").length} />
|
||||||
|
<SummaryCard label="New" value={orders.filter((order) => order.status === "new").length} />
|
||||||
|
<SummaryCard label="Making" value={orders.filter((order) => order.status === "making").length} />
|
||||||
|
<SummaryCard label="Ready" value={orders.filter((order) => order.status === "ready").length} />
|
||||||
|
</div>
|
||||||
|
<div className="queue-columns">
|
||||||
|
{queueStatuses.map((status) => (
|
||||||
|
<section key={status} className="queue-column">
|
||||||
|
<div className="column-head">
|
||||||
|
<p className="eyebrow">{titleCase(status)}</p>
|
||||||
|
<h3>{orders.filter((order) => order.status === status).length} orders</h3>
|
||||||
|
</div>
|
||||||
|
{orders.filter((order) => order.status === status).map((order) => (
|
||||||
|
<article key={order._id} className="queue-card">
|
||||||
|
<header>
|
||||||
|
<div>
|
||||||
|
<p className="eyebrow">Order #{order.number}</p>
|
||||||
|
<h3>{order.customerName || "Walk-in"}</h3>
|
||||||
|
</div>
|
||||||
|
<strong>{formatCurrency(order.total)}</strong>
|
||||||
|
</header>
|
||||||
|
<p className="muted">{formatTime(order.createdAt)} • {titleCase(order.paymentMethod)}</p>
|
||||||
|
<div>
|
||||||
|
{order.lines.map((line, index) => (
|
||||||
|
<p key={`${order._id}-${index}`}>• {line.name} ({line.size})</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="status-actions">
|
||||||
|
<NextStatusButton
|
||||||
|
order={order}
|
||||||
|
onAdvance={async (newStatus) => {
|
||||||
|
try {
|
||||||
|
const response = await updateOrderStatus(order._id, newStatus);
|
||||||
|
setOrders((current) => current.map((item) => {
|
||||||
|
return item._id === response.order._id ? response.order : item;
|
||||||
|
}));
|
||||||
|
} catch (requestError) {
|
||||||
|
setError(requestError.message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="status-btn danger"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await deleteOrder(order._id);
|
||||||
|
setOrders((current) => current.filter((item) => item._id !== order._id));
|
||||||
|
} catch (requestError) {
|
||||||
|
setError(requestError.message);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
{orders.filter((order) => order.status === status).length === 0 && (
|
||||||
|
<div className="empty-state">No orders in {status}.</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NextStatusButton({ order, onAdvance }) {
|
||||||
|
const map = {
|
||||||
|
new: "making",
|
||||||
|
making: "ready",
|
||||||
|
ready: "completed"
|
||||||
|
};
|
||||||
|
const next = map[order.status];
|
||||||
|
|
||||||
|
if (!next) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button className="status-btn" onClick={() => onAdvance(next)}>
|
||||||
|
{next === "making" ? "Start making" : next === "ready" ? "Mark ready" : "Complete"}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
+138
-34
@@ -2,8 +2,8 @@
|
|||||||
--bg: #f5eedf;
|
--bg: #f5eedf;
|
||||||
--panel: rgba(255, 251, 244, 0.92);
|
--panel: rgba(255, 251, 244, 0.92);
|
||||||
--panel-strong: #f8ecda;
|
--panel-strong: #f8ecda;
|
||||||
--ink: #171717;
|
--ink: #111111;
|
||||||
--muted: #6f6657;
|
--muted: #4f4f4f;
|
||||||
--accent: #101010;
|
--accent: #101010;
|
||||||
--accent-soft: #f4ddae;
|
--accent-soft: #f4ddae;
|
||||||
--warm: #f6b33e;
|
--warm: #f6b33e;
|
||||||
@@ -19,11 +19,13 @@ body::before {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background:
|
background:
|
||||||
linear-gradient(180deg, rgba(255, 249, 239, 0.88), rgba(245, 231, 208, 0.94)),
|
radial-gradient(circle at center, rgba(255, 252, 247, 0.82) 0%, rgba(255, 252, 247, 0.9) 32%, rgba(255, 252, 247, 0) 58%),
|
||||||
radial-gradient(circle at 10% 18%, rgba(246, 179, 62, 0.15), transparent 18%),
|
linear-gradient(180deg, rgba(255, 249, 239, 0.92), rgba(245, 231, 208, 0.95)),
|
||||||
radial-gradient(circle at 88% 16%, rgba(244, 221, 174, 0.22), transparent 20%),
|
radial-gradient(circle at 10% 18%, rgba(246, 179, 62, 0.09), transparent 20%),
|
||||||
radial-gradient(circle at 16% 82%, rgba(244, 221, 174, 0.16), transparent 18%),
|
radial-gradient(circle at 88% 16%, rgba(244, 221, 174, 0.13), transparent 22%),
|
||||||
radial-gradient(circle at 84% 86%, rgba(246, 179, 62, 0.12), transparent 18%);
|
radial-gradient(circle at 16% 82%, rgba(244, 221, 174, 0.1), transparent 20%),
|
||||||
|
radial-gradient(circle at 84% 86%, rgba(246, 179, 62, 0.07), transparent 20%);
|
||||||
|
filter: blur(10px);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
@@ -35,9 +37,10 @@ body::before {
|
|||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
|
line-height: 1.5;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at top left, rgba(246, 179, 62, 0.22), transparent 28%),
|
radial-gradient(circle at top left, rgba(246, 179, 62, 0.14), transparent 28%),
|
||||||
radial-gradient(circle at right center, rgba(244, 221, 174, 0.38), transparent 22%),
|
radial-gradient(circle at right center, rgba(244, 221, 174, 0.22), transparent 22%),
|
||||||
linear-gradient(180deg, #fbf6ee, #f3e7d4 52%, #eedcc1);
|
linear-gradient(180deg, #fbf6ee, #f3e7d4 52%, #eedcc1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -54,16 +57,16 @@ button {
|
|||||||
|
|
||||||
.app-shell {
|
.app-shell {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 1.25rem;
|
padding: 0.9rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar {
|
.topbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 1.5rem;
|
gap: 1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 0.85rem;
|
||||||
padding: 1.1rem 1.35rem;
|
padding: 0.85rem 1.05rem;
|
||||||
border: 1px solid rgba(16, 16, 16, 0.08);
|
border: 1px solid rgba(16, 16, 16, 0.08);
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
background:
|
background:
|
||||||
@@ -78,6 +81,23 @@ button {
|
|||||||
font-family: Georgia, "Times New Roman", serif;
|
font-family: Georgia, "Times New Roman", serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topbar h1 {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel h2 {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
label,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
button {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
.brand-lockup {
|
.brand-lockup {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -86,8 +106,8 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.brand-mark {
|
.brand-mark {
|
||||||
width: 120px;
|
width: 96px;
|
||||||
height: 120px;
|
height: 96px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
border-radius: 32px;
|
border-radius: 32px;
|
||||||
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 248, 232, 0.72));
|
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 248, 232, 0.72));
|
||||||
@@ -133,6 +153,17 @@ button {
|
|||||||
max-width: 30rem;
|
max-width: 30rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hero-copy-list,
|
||||||
|
.mode-card-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy-list p,
|
||||||
|
.mode-card-list p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
@@ -214,8 +245,8 @@ button {
|
|||||||
.mode-launcher {
|
.mode-launcher {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1.25rem;
|
gap: 0.85rem;
|
||||||
padding: 1.4rem;
|
padding: 1rem 1.05rem;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at top right, rgba(246, 179, 62, 0.17), transparent 24%),
|
radial-gradient(circle at top right, rgba(246, 179, 62, 0.17), transparent 24%),
|
||||||
linear-gradient(135deg, rgba(255, 251, 245, 0.98), rgba(249, 235, 205, 0.98));
|
linear-gradient(135deg, rgba(255, 251, 245, 0.98), rgba(249, 235, 205, 0.98));
|
||||||
@@ -224,26 +255,82 @@ button {
|
|||||||
.mode-launcher-copy {
|
.mode-launcher-copy {
|
||||||
max-width: 48rem;
|
max-width: 48rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.45rem;
|
gap: 0.3rem;
|
||||||
|
padding: 0.7rem 0.85rem;
|
||||||
|
border-radius: 22px;
|
||||||
|
background: rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-launcher-copy h2 {
|
.mode-launcher-copy h2 {
|
||||||
font-size: clamp(2rem, 3.4vw, 3.3rem);
|
font-size: clamp(1.65rem, 2.8vw, 2.45rem);
|
||||||
line-height: 0.96;
|
line-height: 0.98;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-cta-row {
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-primary-btn {
|
||||||
|
min-width: 220px;
|
||||||
|
padding: 18px 28px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: linear-gradient(135deg, #171311, #2a201a);
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 18px 34px rgba(23, 19, 17, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-category-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-category-btn {
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
align-content: center;
|
||||||
|
gap: 0.65rem;
|
||||||
|
min-height: 148px;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid rgba(17, 17, 17, 0.1);
|
||||||
|
border-radius: 22px;
|
||||||
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 235, 209, 0.96));
|
||||||
|
color: #111111;
|
||||||
|
box-shadow: 0 14px 28px rgba(83, 61, 24, 0.1);
|
||||||
|
text-align: center;
|
||||||
|
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-category-btn:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
border-color: rgba(23, 19, 17, 0.24);
|
||||||
|
box-shadow: 0 20px 34px rgba(83, 61, 24, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-category-btn img {
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-category-btn span {
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-grid {
|
.mode-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
gap: 1rem;
|
gap: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-hero {
|
.mode-hero {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 220px;
|
grid-template-columns: 1fr 150px;
|
||||||
gap: 1rem;
|
gap: 0.75rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1.1rem 1.25rem;
|
padding: 0.7rem 0.9rem;
|
||||||
border-radius: 26px;
|
border-radius: 26px;
|
||||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(247, 221, 161, 0.36));
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(247, 221, 161, 0.36));
|
||||||
border: 1px solid rgba(16, 16, 16, 0.06);
|
border: 1px solid rgba(16, 16, 16, 0.06);
|
||||||
@@ -252,17 +339,18 @@ button {
|
|||||||
.mode-hero-copy {
|
.mode-hero-copy {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.4rem;
|
gap: 0.4rem;
|
||||||
|
padding: 0.75rem 0.9rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-hero-copy h3 {
|
.mode-hero-copy p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: clamp(1.2rem, 2vw, 1.8rem);
|
|
||||||
line-height: 1.05;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-hero-image {
|
.mode-hero-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 220px;
|
max-height: 150px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
filter: drop-shadow(0 22px 24px rgba(83, 61, 24, 0.16));
|
filter: drop-shadow(0 22px 24px rgba(83, 61, 24, 0.16));
|
||||||
@@ -272,20 +360,21 @@ button {
|
|||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.65rem;
|
gap: 0.65rem;
|
||||||
align-content: start;
|
align-content: start;
|
||||||
padding: 1.25rem;
|
padding: 1rem;
|
||||||
min-height: 200px;
|
min-height: 150px;
|
||||||
border: 1px solid rgba(16, 16, 16, 0.08);
|
border: 1px solid rgba(16, 16, 16, 0.08);
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
background: rgba(255, 255, 255, 0.9);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
box-shadow: 0 12px 28px rgba(83, 61, 24, 0.08);
|
box-shadow: 0 12px 28px rgba(83, 61, 24, 0.08);
|
||||||
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
|
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-card:hover {
|
.mode-card:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-4px) scale(1.01);
|
||||||
border-color: rgba(246, 179, 62, 0.5);
|
border-color: rgba(246, 179, 62, 0.5);
|
||||||
box-shadow: 0 16px 32px rgba(83, 61, 24, 0.14);
|
box-shadow: 0 22px 38px rgba(83, 61, 24, 0.18);
|
||||||
|
background: rgba(255, 255, 255, 0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-card h3,
|
.mode-card h3,
|
||||||
@@ -293,6 +382,20 @@ button {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mode-card-cta {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: auto;
|
||||||
|
min-height: 46px;
|
||||||
|
padding: 0.8rem 1rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: linear-gradient(135deg, #171311, #2a201a);
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 12px 24px rgba(23, 19, 17, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
.panel-header,
|
.panel-header,
|
||||||
.queue-card header,
|
.queue-card header,
|
||||||
.menu-form,
|
.menu-form,
|
||||||
@@ -306,7 +409,7 @@ button {
|
|||||||
.panel-header {
|
.panel-header {
|
||||||
grid-template-columns: 1fr auto;
|
grid-template-columns: 1fr auto;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.builder-header-actions {
|
.builder-header-actions {
|
||||||
@@ -565,6 +668,7 @@ select {
|
|||||||
.topbar,
|
.topbar,
|
||||||
.screen,
|
.screen,
|
||||||
.mode-hero,
|
.mode-hero,
|
||||||
|
.hero-category-row,
|
||||||
.mode-grid,
|
.mode-grid,
|
||||||
.queue-columns,
|
.queue-columns,
|
||||||
.menu-item,
|
.menu-item,
|
||||||
|
|||||||
Reference in New Issue
Block a user