@classytic/pos-ui 0.1.0

package/dist/screens/PaymentScreen.js

@@ -0,0 +1,397 @@
+"use client";
+
+import { usePosAuth } from "../runtime/auth-port.js";
+import { usePosBranch } from "../runtime/branch-port.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 { paymentNeedsReference, usePosPayment } from "../hooks/usePosPayment.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 { 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 { Input } from "@/components/ui/input";
+import { Numpad } from "@classytic/fluid/numpad";
+
+//#region src/screens/PaymentScreen.tsx
+/**
+* PaymentScreen — Dedicated full-screen payment.
+*
+* Left: Order summary (items, totals, customer)
+* Right: Payment method selection + numpad for cash + reference inputs
+*/
+const CASH_SUGGESTIONS = [
+	50,
+	100,
+	200,
+	500,
+	1e3,
+	2e3
+];
+function PaymentScreen() {
+	const token = usePosAuth().getToken() || "";
+	const selectedBranch = usePosBranch();
+	const { dispatch } = usePosContext();
+	const branchId = selectedBranch?.id;
+	const cart = usePosCart(branchId);
+	const customer = usePosCustomer(token);
+	const { membershipConfig: membership } = useMembershipConfig();
+	const orderTotals = useMemo(() => calculateOrderTotals({
+		items: cart.cart,
+		manualDiscountInput: cart.discountInput,
+		membershipConfig: membership,
+		customer: customer.selectedCustomer,
+		pointsToRedeemInput: cart.pointsToRedeemInput
+	}), [
+		cart.cart,
+		cart.discountInput,
+		membership,
+		customer.selectedCustomer,
+		cart.pointsToRedeemInput
+	]);
+	const payment = usePosPayment(token, orderTotals.total);
+	const { createOrder, isCreatingOrder } = usePosOrders();
+	const [cashInput, setCashInput] = useState("");
+	useKeyboardShortcut("escape", () => dispatch({ type: "GO_BACK" }), {
+		disableInInputs: false,
+		description: "Back to cart",
+		category: "Payment"
+	});
+	useKeyboardShortcut("f8", () => {
+		payment.setMode(payment.state.mode === "split" ? "single" : "split");
+	}, {
+		description: "Toggle split-payment mode",
+		category: "Payment"
+	});
+	useKeyboardShortcut("f1", () => {
+		if (payment.state.mode !== "single") return;
+		const cashOption = payment.options.find((o) => o.posMethod === "cash");
+		if (cashOption) payment.selectPayment(cashOption.key);
+	}, {
+		description: "Select cash payment",
+		category: "Payment"
+	});
+	const handleCashSuggestion = useCallback((amount) => {
+		setCashInput(String(amount));
+		payment.setCashReceived(String(amount));
+	}, [payment]);
+	const handleCheckout = useCallback(async () => {
+		if (!branchId) return;
+		let paymentPayload = {};
+		if (payment.state.mode === "split") {
+			if (!payment.validateAllSplits()) {
+				toast.error("Please fix split payment errors");
+				return;
+			}
+			const payments = payment.state.splitEntries.map((entry) => ({
+				method: entry.posMethod,
+				amount: parsePositiveNumber(entry.amount),
+				...entry.reference.trim() && { reference: entry.reference.trim() }
+			}));
+			const splitTotal = payments.reduce((sum, p) => sum + p.amount, 0);
+			if (Math.abs(splitTotal - orderTotals.total) > .01) {
+				toast.error("Split payment total must match order total");
+				return;
+			}
+			paymentPayload = { payments };
+		} else {
+			if (paymentNeedsReference(payment.state.selectedMethod)) {
+				if (!payment.state.reference.trim()) {
+					toast.error("Payment reference is required");
+					return;
+				}
+			} else {
+				if (!payment.state.cashReceived.trim()) {
+					toast.error("Enter cash received");
+					return;
+				}
+				if (payment.state.amountDue > 0) {
+					toast.error("Insufficient cash received");
+					return;
+				}
+			}
+			paymentPayload = { payments: [{
+				method: payment.state.selectedMethod,
+				amount: orderTotals.total,
+				...paymentNeedsReference(payment.state.selectedMethod) && { reference: payment.state.reference.trim() }
+			}] };
+		}
+		try {
+			const orderData = {
+				items: cart.cart.map((item) => {
+					if (item.kind === "service-fee") return {
+						kind: "service-fee",
+						label: item.productName,
+						quantity: item.quantity,
+						price: item.unitPrice
+					};
+					return {
+						productId: item.productId,
+						variantSku: item.variantSku,
+						quantity: item.quantity,
+						price: item.unitPrice
+					};
+				}),
+				branchId,
+				deliveryMethod: "pickup",
+				...cart.membershipCardId.trim() && { membershipCardId: cart.membershipCardId.trim() },
+				customer: {
+					name: customer.customerName.trim() || "Walk-in Customer",
+					...customer.customerPhone.trim() && isValidBDPhone(customer.customerPhone.trim()) && { phone: customer.customerPhone.trim() },
+					...customer.selectedCustomer?._id && { id: customer.selectedCustomer._id }
+				},
+				...paymentPayload,
+				...orderTotals.manualDiscount > 0 && { discount: orderTotals.manualDiscount },
+				...orderTotals.pointsRedeemed > 0 && { pointsToRedeem: orderTotals.pointsRedeemed },
+				idempotencyKey: generateIdempotencyKey()
+			};
+			const receipt = transformOrderToReceipt(await createOrder(orderData), {
+				name: selectedBranch?.name || "Store",
+				phone: selectedBranch?.phone
+			});
+			cart.resetCart();
+			payment.reset();
+			customer.resetCustomer();
+			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);
+		}
+	}, [
+		branchId,
+		selectedBranch,
+		cart,
+		customer,
+		payment,
+		orderTotals,
+		createOrder,
+		dispatch
+	]);
+	const isCash = !paymentNeedsReference(payment.state.selectedMethod);
+	return /* @__PURE__ */ jsx(ResponsiveSplitLayout, {
+		className: "h-full",
+		defaultLayout: [50, 50],
+		minSizes: [30, 30],
+		persistLayoutKey: "pos-payment-split",
+		mobileVariant: "tabs",
+		mobileTabsPreset: "line",
+		leftPanel: {
+			title: "Summary",
+			icon: /* @__PURE__ */ jsx(ReceiptText, { className: "h-4 w-4" }),
+			content: /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full flex-col min-w-0",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3 px-6 py-4 border-b",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => dispatch({ type: "GO_BACK" }),
+							children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4 mr-1" }), "Back"]
+						}), /* @__PURE__ */ jsx("h2", {
+							className: "font-semibold text-lg",
+							children: "Order Summary"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex-1 overflow-y-auto px-6 py-4 space-y-3",
+						children: cart.cart.map((item, i) => /* @__PURE__ */ jsxs("div", {
+							className: "flex justify-between text-sm",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "min-w-0",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "font-medium",
+										children: item.productName
+									}),
+									item.variantLabel && /* @__PURE__ */ jsxs("span", {
+										className: "text-muted-foreground ml-1",
+										children: [
+											"(",
+											item.variantLabel,
+											")"
+										]
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "text-muted-foreground ml-2",
+										children: ["x", item.quantity]
+									})
+								]
+							}), /* @__PURE__ */ jsx("span", {
+								className: "font-medium tabular-nums shrink-0 ml-4",
+								children: formatBdt(item.lineTotal)
+							})]
+						}, `${item.productId}-${item.variantSku || ""}`))
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "px-6 py-4 border-t space-y-2",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex justify-between text-sm",
+								children: [/* @__PURE__ */ jsx("span", { children: "Subtotal" }), /* @__PURE__ */ jsx("span", {
+									className: "tabular-nums",
+									children: formatBdt(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)]
+								})]
+							}),
+							orderTotals.tierDiscount > 0 && /* @__PURE__ */ jsxs("div", {
+								className: "flex justify-between text-sm text-blue-600",
+								children: [/* @__PURE__ */ jsxs("span", { children: [
+									"Tier Discount (",
+									orderTotals.tierName,
+									")"
+								] }), /* @__PURE__ */ jsxs("span", {
+									className: "tabular-nums",
+									children: ["-", formatBdt(orderTotals.tierDiscount)]
+								})]
+							}),
+							/* @__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)
+								})]
+							})
+						]
+					})
+				]
+			})
+		},
+		rightPanel: {
+			title: "Payment",
+			icon: /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
+			content: /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full flex-col min-w-0",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "px-6 py-4 border-b",
+						children: /* @__PURE__ */ jsxs("h2", {
+							className: "font-semibold text-lg flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(CreditCard, { className: "h-5 w-5" }), "Payment"]
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex-1 overflow-y-auto px-6 py-4 space-y-4",
+						children: [
+							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]
+								}, opt.key))
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsx(Button, {
+									variant: payment.state.mode === "single" ? "default" : "outline",
+									size: "sm",
+									onClick: () => payment.setMode("single"),
+									children: "Single"
+								}), /* @__PURE__ */ jsx(Button, {
+									variant: payment.state.mode === "split" ? "default" : "outline",
+									size: "sm",
+									onClick: () => payment.setMode("split"),
+									children: "Split (F8)"
+								})]
+							}),
+							payment.state.mode === "split" ? /* @__PURE__ */ jsx(SplitPaymentPanel, {
+								entries: payment.state.splitEntries,
+								options: payment.options,
+								total: orderTotals.total,
+								remaining: payment.state.splitRemaining,
+								onAdd: payment.addSplit,
+								onUpdate: payment.updateSplit,
+								onRemove: payment.removeSplit
+							}) : isCash ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "grid grid-cols-3 gap-2",
+									children: [/* @__PURE__ */ jsx(Button, {
+										variant: "outline",
+										size: "sm",
+										onClick: () => handleCashSuggestion(Math.ceil(orderTotals.total)),
+										children: "Exact"
+									}), CASH_SUGGESTIONS.filter((s) => s >= orderTotals.total).slice(0, 5).map((amount) => /* @__PURE__ */ jsx(Button, {
+										variant: "outline",
+										size: "sm",
+										onClick: () => handleCashSuggestion(amount),
+										children: amount
+									}, amount))]
+								}),
+								/* @__PURE__ */ jsx(Numpad, {
+									value: cashInput,
+									onChange: (v) => {
+										setCashInput(v);
+										payment.setCashReceived(v);
+									},
+									onSubmit: isCreatingOrder ? void 0 : handleCheckout,
+									submitLabel: `Pay ${formatBdt(orderTotals.total)}`,
+									quickAdd: [
+										100,
+										200,
+										500,
+										1e3
+									],
+									density: "touch",
+									decimal: true
+								}),
+								payment.state.changeAmount > 0 && /* @__PURE__ */ jsxs("div", {
+									className: "bg-green-50 dark:bg-green-950 rounded-lg p-4 text-center",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Change"
+									}), /* @__PURE__ */ jsx("p", {
+										className: "text-2xl font-bold text-green-600 tabular-nums",
+										children: formatBdt(payment.state.changeAmount)
+									})]
+								})
+							] }) : /* @__PURE__ */ jsxs("div", {
+								className: "space-y-3",
+								children: [/* @__PURE__ */ jsx(Input, {
+									placeholder: `Enter ${payment.selectedOption?.label || "payment"} reference`,
+									value: payment.state.reference,
+									onChange: (e) => payment.setReference(e.target.value),
+									autoFocus: true
+								}), payment.selectedOption?.walletNumber && /* @__PURE__ */ jsxs("p", {
+									className: "text-xs text-muted-foreground",
+									children: ["Send to: ", payment.selectedOption.walletNumber]
+								})]
+							})
+						]
+					}),
+					(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)}`
+						})
+					})
+				]
+			})
+		}
+	});
+}
+
+//#endregion
+export { PaymentScreen };