@classytic/pos-ui 0.2.0 → 1.3.0

package/dist/screens/PaymentScreen.js

@@ -1,23 +1,28 @@
 "use client";
 
 import { usePosAuth } from "../runtime/auth-port.js";
+import { usePosSalesCapabilities } from "../runtime/config.js";
 import { usePosBranch } from "../runtime/branch-port.js";
+import { formatMajor } from "../lib/money.js";
 import { usePosContext } from "../state/pos-context.js";
 import { usePosCart } from "../hooks/usePosCart.js";
-import { formatBdt } from "../lib/money.js";
 import { calculateOrderTotals, isValidBDPhone, parsePositiveNumber, transformOrderToReceipt } from "../utils/pos-helpers.js";
 import { usePosCustomer } from "../hooks/usePosCustomer.js";
+import { deliveryBlocker, deliveryPayloadOf, isCollectOnDeliverySale, payableTotalOf } from "../lib/delivery-payload.js";
 import { paymentNeedsReference, usePosPayment } from "../hooks/usePosPayment.js";
+import { usePosDelivery } from "../hooks/usePosDelivery.js";
+import { DeliveryPanel } from "../dashboard/components/DeliveryPanel.js";
 import { SplitPaymentPanel } from "../dashboard/components/SplitPaymentPanel.js";
 import { useCallback, useMemo, useState } from "react";
 import { useKeyboardShortcut } from "@classytic/fluid/client/hooks";
 import { ResponsiveSplitLayout } from "@classytic/fluid/client/core";
-import { generateIdempotencyKey, usePosOrders } from "@classytic/commerce-sdk/sales";
+import { usePosOrders } from "@classytic/commerce-sdk/sales";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft, Banknote, CreditCard, Loader2, ReceiptText } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useMembershipConfig } from "@classytic/commerce-sdk/platform";
 import { toast } from "sonner";
+import { presentError } from "@classytic/fluid/error-contract";
 import { Input } from "@/components/ui/input";
 import { Numpad } from "@classytic/fluid/numpad";
 
@@ -36,11 +41,39 @@ const CASH_SUGGESTIONS = [
 	1e3,
 	2e3
 ];
+/**
+* Cashier-readable copy for the checkout refusals the till can actually cause.
+*
+* The server's own message is written for a developer reading a log. At a till
+* with a queue behind it, "Tender does not settle the sale: 4500 tendered
+* against 4700 due (underpaid by 200)" is unusable — the cashier needs the
+* ACTION.
+*
+* Only two codes are listed, and both are verified against their source
+* (`pos.tender.mismatch` in `@spinekit/pos`'s errors, `INSUFFICIENT_STOCK` in
+* `@classytic/flow`) — a mapping for a code nothing emits is decoration that
+* reads as coverage. Everything else falls through to the server's own message
+* rather than being flattened into one generic string, because hiding an
+* unexpected failure is worse than an ugly one.
+*/
+const CHECKOUT_ERRORS = {
+	"pos.tender.mismatch": {
+		title: "Payment doesn't match the total",
+		message: "Check the amount, or the split entries if you're splitting.",
+		retryable: false
+	},
+	INSUFFICIENT_STOCK: {
+		title: "An item is out of stock at this branch",
+		message: "Remove it from the cart, or lower the quantity.",
+		retryable: false
+	}
+};
 function PaymentScreen() {
 	const token = usePosAuth().getToken() || "";
 	const selectedBranch = usePosBranch();
-	const { dispatch } = usePosContext();
+	const { state, dispatch } = usePosContext();
 	const branchId = selectedBranch?.id;
+	const activeRegisterId = state.activeRegisterId;
 	const cart = usePosCart(branchId);
 	const customer = usePosCustomer(token);
 	const { membershipConfig: membership } = useMembershipConfig();
@@ -57,7 +90,31 @@ function PaymentScreen() {
 		customer.selectedCustomer,
 		cart.pointsToRedeemInput
 	]);
-	const payment = usePosPayment(token, orderTotals.total);
+	const sales = usePosSalesCapabilities();
+	const delivery = usePosDelivery(branchId);
+	/**
+	* WHAT THE CUSTOMER OWES — items minus discounts, PLUS the delivery charge.
+	*
+	* The server computes `dueMinor` the same way and validates the tender against it,
+	* so a screen that quoted only the cart total would collect too little and the sale
+	* would be refused at the end of checkout — after the cashier had counted cash.
+	* Every payable figure below reads this, not `orderTotals.total`: the numpad target,
+	* the split-total check, the single-payment amount, the cash suggestions and both
+	* button labels. Leaving any one of them on the cart total reintroduces the gap for
+	* exactly one code path, which is the hardest kind to notice.
+	*
+	* The cart's own total stays visible in the order summary — the customer should see
+	* goods and delivery as separate lines.
+	*/
+	const payableTotal = payableTotalOf(orderTotals.total, delivery);
+	/**
+	* Both conditions, not just the term. `usePosDelivery` already clears the term when
+	* the method flips back to carryout, so this is belt-and-braces — but it is read by
+	* the RENDER as well as by checkout, and a COD banner on a carryout sale would tell
+	* a cashier not to collect money that is owed right now.
+	*/
+	const isCollectOnDelivery = isCollectOnDeliverySale(delivery);
+	const payment = usePosPayment(token, payableTotal);
 	const { createOrder, isCreatingOrder } = usePosOrders();
 	const [cashInput, setCashInput] = useState("");
 	useKeyboardShortcut("escape", () => dispatch({ type: "GO_BACK" }), {
@@ -85,8 +142,44 @@ function PaymentScreen() {
 	}, [payment]);
 	const handleCheckout = useCallback(async () => {
 		if (!branchId) return;
+		/**
+		* The key for THIS sale attempt — minted once and persisted, so tapping
+		* "Complete Sale" again after a timeout resends the SAME key and the server
+		* replays the order it already created instead of ringing a second one.
+		*
+		* It is deliberately taken before any validation: an attempt that gets as
+		* far as the network must reuse whatever key the previous attempt used, and
+		* `beginSaleAttempt` only mints when there is nothing stored.
+		*/
+		const idempotencyKey = cart.beginSaleAttempt();
+		if (!idempotencyKey) {
+			toast.error("Branch not ready", { description: "The register is still resolving its branch. Try again in a moment." });
+			return;
+		}
+		/**
+		* A DELIVERY sale needs a dispatchable address, and the server refuses one that
+		* is missing or unusable (`DELIVERY_ADDRESS_UNUSABLE`) before it takes a tender
+		* or holds stock. Stopping here means the cashier fixes a field instead of
+		* watching a completed-looking checkout come back as an error.
+		*/
+		const blocker = deliveryBlocker(delivery);
+		if (blocker) {
+			toast.error(blocker);
+			return;
+		}
 		let paymentPayload = {};
-		if (payment.state.mode === "split") {
+		if (isCollectOnDelivery)
+ /**
+		* COD takes NO tender — and sends none.
+		*
+		* Not an empty `payments: []` either: the server refuses a collect-on-delivery
+		* sale that also carries a payment, because the two are contradictory and only
+		* the cashier knows which was meant. Skipping the whole payment block is also
+		* what keeps the cash/reference validation below from demanding money for a
+		* sale where none changes hands.
+		*/
+		paymentPayload = {};
+		else if (payment.state.mode === "split") {
 			if (!payment.validateAllSplits()) {
 				toast.error("Please fix split payment errors");
 				return;
@@ -97,7 +190,7 @@ function PaymentScreen() {
 				...entry.reference.trim() && { reference: entry.reference.trim() }
 			}));
 			const splitTotal = payments.reduce((sum, p) => sum + p.amount, 0);
-			if (Math.abs(splitTotal - orderTotals.total) > .01) {
+			if (Math.abs(splitTotal - payableTotal) > .01) {
 				toast.error("Split payment total must match order total");
 				return;
 			}
@@ -120,7 +213,7 @@ function PaymentScreen() {
 			}
 			paymentPayload = { payments: [{
 				method: payment.state.selectedMethod,
-				amount: orderTotals.total,
+				amount: payableTotal,
 				...paymentNeedsReference(payment.state.selectedMethod) && { reference: payment.state.reference.trim() }
 			}] };
 		}
@@ -141,7 +234,23 @@ function PaymentScreen() {
 					};
 				}),
 				branchId,
-				deliveryMethod: "pickup",
+				...activeRegisterId && { registerId: activeRegisterId },
+				/**
+				* The sale's own delivery + payment-term decisions, replacing a hardcoded
+				* `"pickup"` that made every till sale a carryout regardless of what the
+				* cashier had been told on the phone.
+				*
+				* `deliveryPrice` is sent only when a fee was actually entered: the server
+				* writes canonical `totals.shipping` from it, and an explicit zero would add
+				* a priced row for a delivery that costs nothing (a promotion, a loyalty
+				* perk) rather than leaving the sale byte-identical to a carryout.
+				*
+				* `paymentTerm` is sent ALWAYS, prepaid included. The till knows the answer,
+				* and a stated fact beats one every downstream reader has to infer from
+				* absence — absence is also what an order written before the field existed
+				* looks like, and those are different claims.
+				*/
+				...deliveryPayloadOf(delivery),
 				...cart.membershipCardId.trim() && { membershipCardId: cart.membershipCardId.trim() },
 				customer: {
 					name: customer.customerName.trim() || "Walk-in Customer",
@@ -151,30 +260,50 @@ function PaymentScreen() {
 				...paymentPayload,
 				...orderTotals.manualDiscount > 0 && { discount: orderTotals.manualDiscount },
 				...orderTotals.pointsRedeemed > 0 && { pointsToRedeem: orderTotals.pointsRedeemed },
-				idempotencyKey: generateIdempotencyKey()
+				idempotencyKey
 			};
-			const receipt = transformOrderToReceipt(await createOrder(orderData), {
+			const response = await createOrder(orderData);
+			const branchInfo = {
 				name: selectedBranch?.name || "Store",
 				phone: selectedBranch?.phone
-			});
+			};
+			const receipt = transformOrderToReceipt(response, branchInfo);
 			cart.resetCart();
 			payment.reset();
 			customer.resetCustomer();
+			/**
+			* Delivery too — it is PERSISTED (branch-scoped localStorage), so unlike
+			* per-instance state it survives the sale unless cleared.
+			*
+			* Leaving it would carry one customer's address, phone and delivery charge
+			* onto the next customer's sale. That fails in the worst possible direction:
+			* the next order looks complete, passes validation, and dispatches goods to
+			* the wrong person — and the sale it was copied from was correct, so nothing
+			* about either order reads as an error.
+			*/
+			delivery.reset();
 			dispatch({
 				type: "COMPLETE_SALE",
 				receipt
 			});
 			toast.success("Order completed!");
 		} catch (error) {
-			const message = error instanceof Error ? error.message : "Failed to create order";
-			toast.error(message);
+			const { title, message } = presentError(error, "The sale was not completed. Try again.", {
+				codeMap: CHECKOUT_ERRORS,
+				fallbackTitle: "Could not complete the sale"
+			});
+			toast.error(title, { description: message });
 		}
 	}, [
 		branchId,
+		activeRegisterId,
 		selectedBranch,
 		cart,
 		customer,
 		payment,
+		delivery,
+		isCollectOnDelivery,
+		payableTotal,
 		orderTotals,
 		createOrder,
 		dispatch
@@ -199,7 +328,7 @@ function PaymentScreen() {
 							variant: "ghost",
 							size: "sm",
 							onClick: () => dispatch({ type: "GO_BACK" }),
-							children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4 mr-1" }), "Back"]
+							children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4 me-1" }), "Back"]
 						}), /* @__PURE__ */ jsx("h2", {
 							className: "font-semibold text-lg",
 							children: "Order Summary"
@@ -217,7 +346,7 @@ function PaymentScreen() {
 										children: item.productName
 									}),
 									item.variantLabel && /* @__PURE__ */ jsxs("span", {
-										className: "text-muted-foreground ml-1",
+										className: "text-muted-foreground ms-1",
 										children: [
 											"(",
 											item.variantLabel,
@@ -225,13 +354,13 @@ function PaymentScreen() {
 										]
 									}),
 									/* @__PURE__ */ jsxs("span", {
-										className: "text-muted-foreground ml-2",
+										className: "text-muted-foreground ms-2",
 										children: ["x", item.quantity]
 									})
 								]
 							}), /* @__PURE__ */ jsx("span", {
-								className: "font-medium tabular-nums shrink-0 ml-4",
-								children: formatBdt(item.lineTotal)
+								className: "font-medium tabular-nums shrink-0 ms-4",
+								children: formatMajor(item.lineTotal)
 							})]
 						}, `${item.productId}-${item.variantSku || ""}`))
 					}),
@@ -242,14 +371,14 @@ function PaymentScreen() {
 								className: "flex justify-between text-sm",
 								children: [/* @__PURE__ */ jsx("span", { children: "Subtotal" }), /* @__PURE__ */ jsx("span", {
 									className: "tabular-nums",
-									children: formatBdt(orderTotals.subtotal)
+									children: formatMajor(orderTotals.subtotal)
 								})]
 							}),
 							orderTotals.manualDiscount > 0 && /* @__PURE__ */ jsxs("div", {
 								className: "flex justify-between text-sm text-destructive",
 								children: [/* @__PURE__ */ jsx("span", { children: "Discount" }), /* @__PURE__ */ jsxs("span", {
 									className: "tabular-nums",
-									children: ["-", formatBdt(orderTotals.manualDiscount)]
+									children: ["-", formatMajor(orderTotals.manualDiscount)]
 								})]
 							}),
 							orderTotals.tierDiscount > 0 && /* @__PURE__ */ jsxs("div", {
@@ -260,14 +389,28 @@ function PaymentScreen() {
 									")"
 								] }), /* @__PURE__ */ jsxs("span", {
 									className: "tabular-nums",
-									children: ["-", formatBdt(orderTotals.tierDiscount)]
+									children: ["-", formatMajor(orderTotals.tierDiscount)]
+								})]
+							}),
+							delivery.fee > 0 && /* @__PURE__ */ jsxs("div", {
+								className: "flex justify-between text-sm",
+								children: [/* @__PURE__ */ jsx("span", { children: "Delivery" }), /* @__PURE__ */ jsx("span", {
+									className: "tabular-nums",
+									children: formatMajor(delivery.fee)
 								})]
 							}),
 							/* @__PURE__ */ jsxs("div", {
 								className: "flex justify-between text-lg font-bold pt-2 border-t",
 								children: [/* @__PURE__ */ jsx("span", { children: "Total" }), /* @__PURE__ */ jsx("span", {
 									className: "tabular-nums",
-									children: formatBdt(orderTotals.total)
+									children: formatMajor(payableTotal)
+								})]
+							}),
+							isCollectOnDelivery && /* @__PURE__ */ jsxs("div", {
+								className: "flex justify-between text-sm font-medium text-amber-600",
+								children: [/* @__PURE__ */ jsx("span", { children: "Collect on delivery" }), /* @__PURE__ */ jsx("span", {
+									className: "tabular-nums",
+									children: formatMajor(payableTotal)
 								})]
 							})
 						]
@@ -291,16 +434,21 @@ function PaymentScreen() {
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex-1 overflow-y-auto px-6 py-4 space-y-4",
 						children: [
-							payment.state.mode !== "split" && /* @__PURE__ */ jsx("div", {
+							/* @__PURE__ */ jsx(DeliveryPanel, {
+								delivery,
+								collectOnDeliveryEnabled: sales.collectOnDelivery === true,
+								disabled: isCreatingOrder
+							}),
+							!isCollectOnDelivery && payment.state.mode !== "split" && /* @__PURE__ */ jsx("div", {
 								className: "grid grid-cols-2 gap-2",
 								children: payment.options.map((opt) => /* @__PURE__ */ jsxs(Button, {
 									variant: payment.state.selectedKey === opt.key ? "default" : "outline",
 									className: "h-12 text-sm",
 									onClick: () => payment.selectPayment(opt.key),
-									children: [opt.key === "cash" ? /* @__PURE__ */ jsx(Banknote, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4 mr-2" }), opt.label]
+									children: [opt.key === "cash" ? /* @__PURE__ */ jsx(Banknote, { className: "h-4 w-4 me-2" }) : /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4 me-2" }), opt.label]
 								}, opt.key))
 							}),
-							/* @__PURE__ */ jsxs("div", {
+							!isCollectOnDelivery && /* @__PURE__ */ jsxs("div", {
 								className: "flex gap-2",
 								children: [/* @__PURE__ */ jsx(Button, {
 									variant: payment.state.mode === "single" ? "default" : "outline",
@@ -314,10 +462,23 @@ function PaymentScreen() {
 									children: "Split (F8)"
 								})]
 							}),
-							payment.state.mode === "split" ? /* @__PURE__ */ jsx(SplitPaymentPanel, {
+							isCollectOnDelivery ? /* @__PURE__ */ jsxs("div", {
+								className: "rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm dark:border-amber-800 dark:bg-amber-950",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "font-medium",
+									children: "Cash on delivery"
+								}), /* @__PURE__ */ jsxs("p", {
+									className: "mt-1 text-muted-foreground",
+									children: [
+										"Nothing is collected at the till. The order records ",
+										formatMajor(payableTotal),
+										" as owed, and the courier collects it on delivery."
+									]
+								})]
+							}) : payment.state.mode === "split" ? /* @__PURE__ */ jsx(SplitPaymentPanel, {
 								entries: payment.state.splitEntries,
 								options: payment.options,
-								total: orderTotals.total,
+								total: payableTotal,
 								remaining: payment.state.splitRemaining,
 								onAdd: payment.addSplit,
 								onUpdate: payment.updateSplit,
@@ -328,9 +489,9 @@ function PaymentScreen() {
 									children: [/* @__PURE__ */ jsx(Button, {
 										variant: "outline",
 										size: "sm",
-										onClick: () => handleCashSuggestion(Math.ceil(orderTotals.total)),
+										onClick: () => handleCashSuggestion(Math.ceil(payableTotal)),
 										children: "Exact"
-									}), CASH_SUGGESTIONS.filter((s) => s >= orderTotals.total).slice(0, 5).map((amount) => /* @__PURE__ */ jsx(Button, {
+									}), CASH_SUGGESTIONS.filter((s) => s >= payableTotal).slice(0, 5).map((amount) => /* @__PURE__ */ jsx(Button, {
 										variant: "outline",
 										size: "sm",
 										onClick: () => handleCashSuggestion(amount),
@@ -344,7 +505,7 @@ function PaymentScreen() {
 										payment.setCashReceived(v);
 									},
 									onSubmit: isCreatingOrder ? void 0 : handleCheckout,
-									submitLabel: `Pay ${formatBdt(orderTotals.total)}`,
+									submitLabel: `Pay ${formatMajor(payableTotal)}`,
 									quickAdd: [
 										100,
 										200,
@@ -361,7 +522,7 @@ function PaymentScreen() {
 										children: "Change"
 									}), /* @__PURE__ */ jsx("p", {
 										className: "text-2xl font-bold text-green-600 tabular-nums",
-										children: formatBdt(payment.state.changeAmount)
+										children: formatMajor(payment.state.changeAmount)
 									})]
 								})
 							] }) : /* @__PURE__ */ jsxs("div", {
@@ -378,13 +539,13 @@ function PaymentScreen() {
 							})
 						]
 					}),
-					(payment.state.mode === "split" || !isCash) && /* @__PURE__ */ jsx("div", {
+					(isCollectOnDelivery || payment.state.mode === "split" || !isCash) && /* @__PURE__ */ jsx("div", {
 						className: "px-6 py-4 border-t",
 						children: /* @__PURE__ */ jsx(Button, {
 							className: "w-full h-12 text-base font-semibold",
 							onClick: handleCheckout,
 							disabled: isCreatingOrder,
-							children: isCreatingOrder ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 mr-2 animate-spin" }), "Processing..."] }) : `Complete Sale ${formatBdt(orderTotals.total)}`
+							children: isCreatingOrder ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 me-2 animate-spin" }), "Processing..."] }) : isCollectOnDelivery ? `Place COD order ${formatMajor(payableTotal)}` : `Complete Sale ${formatMajor(payableTotal)}`
 						})
 					})
 				]

package/dist/screens/ProductScreen.d.ts

@@ -0,0 +1,4 @@
+//#region src/screens/ProductScreen.d.ts
+declare function ProductScreen(): import("react").JSX.Element;
+//#endregion
+export { ProductScreen };

package/dist/screens/ProductScreen.js

@@ -50,6 +50,12 @@ function ProductScreen() {
 	const [discountAuthDialogOpen, setDiscountAuthDialogOpen] = useState(false);
 	const cart = usePosCart(branchId);
 	const customer = usePosCustomer(token);
+	/**
+	* What the cashier typed in the lookup dialog, handed over when they press
+	* "Add new". Held here only because two sibling dialogs need it — the lookup
+	* owns its own search state, so this is the ONE value that has to cross.
+	*/
+	const [quickAddPrefill, setQuickAddPrefill] = useState({});
 	const multiOrder = usePosMultiOrder(branchId);
 	const [parkedDrawerOpen, setParkedDrawerOpen] = useState(false);
 	const { membershipConfig: membership } = useMembershipConfig();
@@ -67,12 +73,13 @@ function ProductScreen() {
 		customer.selectedCustomer,
 		cart.pointsToRedeemInput
 	]);
-	const { products, isLoading: productsLoading, isFetching, refetch } = usePosProducts(branchId, useMemo(() => ({
+	const productFilters = useMemo(() => ({
 		search: appliedSearch.trim() || void 0,
 		category: selectedCategory !== "all" ? selectedCategory : void 0,
 		inStockOnly: true,
 		limit: 50
-	}), [appliedSearch, selectedCategory]), { enabled: !!branchId });
+	}), [appliedSearch, selectedCategory]);
+	const { products, isLoading: productsLoading, isFetching, refetch } = usePosProducts(branchId, productFilters, { enabled: !!branchId });
 	const lookupMutation = usePosLookupMutation();
 	const { items: categoryTree = [] } = useCategoryTree();
 	const categories = useMemo(() => categoryTree.map((cat) => ({
@@ -283,13 +290,9 @@ function ProductScreen() {
 			/* @__PURE__ */ jsx(CustomerLookupDialog, {
 				open: customer.lookupDialogOpen,
 				onOpenChange: customer.setLookupDialogOpen,
-				searchValue: customer.customerSearch,
-				onSearchValueChange: customer.setCustomerSearch,
-				onSearch: customer.triggerSearch,
-				results: customer.customerResults,
-				isLoading: customer.isSearching,
 				onSelect: customer.selectCustomer,
-				onCreate: () => {
+				onCreate: (prefill) => {
+					setQuickAddPrefill(prefill);
 					customer.setLookupDialogOpen(false);
 					customer.setCreateDialogOpen(true);
 				}
@@ -298,8 +301,8 @@ function ProductScreen() {
 				token,
 				open: customer.createDialogOpen,
 				onOpenChange: customer.setCreateDialogOpen,
-				defaultName: customer.customerName,
-				defaultPhone: isValidPhone(customer.customerSearch.trim()) ? customer.customerSearch.trim() : customer.customerPhone,
+				defaultName: quickAddPrefill.name || customer.customerName,
+				defaultPhone: quickAddPrefill.phone && isValidPhone(quickAddPrefill.phone) ? quickAddPrefill.phone : customer.customerPhone,
 				onCreated: customer.handleCustomerCreated
 			}),
 			/* @__PURE__ */ jsx(ManagerAuthDialog, {

package/dist/screens/ReceiptScreen.d.ts

@@ -0,0 +1,4 @@
+//#region src/screens/ReceiptScreen.d.ts
+declare function ReceiptScreen(): import("react").JSX.Element;
+//#endregion
+export { ReceiptScreen };