@fayz-ai/pos 0.22.4 → 0.23.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { haptic, createKeymap, directionOf, moveFocus } from '@fayz-ai/core/interaction';
 export { comboOf, createKeymap, haptic, setHapticsEnabled } from '@fayz-ai/core/interaction';
 import { forwardRef, memo, useState, useRef, useCallback, useEffect, useMemo, useReducer, Fragment as Fragment$1 } from 'react';
-import { UserPlus, X, Check, Phone, User, Receipt, RotateCcw, FileCheck, FileWarning, ChevronDown, Pencil, ChevronLeft, ChevronRight, Plus, ChevronUp, ChefHat, AlertTriangle, Printer, Percent, QrCode, CreditCard, Banknote, Trash2, Clock, Minus, Bike, PackageCheck, CheckCheck, Package, MapPin, ShieldCheck, Keyboard, CalendarClock, Users, UserRound, Search, Utensils, BellRing, UserX, UserCheck, Delete, UtensilsCrossed, Info, ClipboardList, LayoutGrid, ShoppingBag, ConciergeBell, Map as Map$1, Settings2, Square, Circle, PenLine, MoreHorizontal, Store, Tag, Star, Ticket, Ban, ArrowLeftRight, Gift, UserMinus, CheckCircle2, Crosshair, Unlink, MousePointerClick, PencilRuler, MapPinOff, Eye, EyeOff, Undo2, TriangleAlert, ArrowRight, Pizza, Wheat, Sandwich, IceCreamCone, CakeSlice, Coffee, Croissant, CupSoda, Salad, Beef, Wine, GlassWater, Soup, Fish, Wrench, CalendarCheck } from 'lucide-react';
+import { UserPlus, X, Check, Phone, User, Receipt, RotateCcw, FileCheck, FileWarning, ChevronDown, Pencil, ChevronLeft, ChevronRight, Plus, ChevronUp, ChefHat, AlertTriangle, Printer, Percent, QrCode, CreditCard, Banknote, Trash2, Clock, Minus, Bike, History, PackageCheck, CheckCheck, Package, MapPin, ShieldCheck, Keyboard, CalendarClock, Users, UserRound, Search, Utensils, BellRing, UserX, UserCheck, Delete, UtensilsCrossed, Info, ClipboardList, LayoutGrid, ShoppingBag, ConciergeBell, Map as Map$1, Settings2, Square, Circle, PenLine, MoreHorizontal, Store, Tag, Star, Ticket, Ban, ArrowLeftRight, Gift, UserMinus, CheckCircle2, Crosshair, Unlink, MousePointerClick, PencilRuler, MapPinOff, Eye, EyeOff, Undo2, TriangleAlert, ArrowRight, Pizza, Wheat, Sandwich, IceCreamCone, CakeSlice, Coffee, Croissant, CupSoda, Salad, Beef, Wine, GlassWater, Soup, Fish, Wrench, CalendarCheck } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeError, channelOfOrder } from '@fayz-ai/core';
 import { createPortal } from 'react-dom';
@@ -4869,7 +4869,7 @@ function lateness(p, now) {
   return Math.floor((now - new Date(p.dueAt).getTime()) / 6e4);
 }
 var GHOST_MS = 300;
-function DeliveryBoard({ orders, activeId, onSelect, now, channelsConnected }) {
+function DeliveryBoard({ orders, activeId, onSelect, now, channelsConnected, historyOpen, onToggleHistory }) {
   const seen = useRef({});
   const [ghosts, setGhosts] = useState([]);
   useEffect(() => {
@@ -4897,7 +4897,14 @@ function DeliveryBoard({ orders, activeId, onSelect, now, channelsConnected }) {
         Icon: Bike
       }
     ),
-    /* @__PURE__ */ jsx("p", { className: "pos-board__note", children: DELIVERED_LINGER_NOTE }),
+    /* @__PURE__ */ jsxs("div", { className: "pos-board__bar", children: [
+      /* @__PURE__ */ jsx("p", { className: "pos-board__note", children: DELIVERED_LINGER_NOTE }),
+      onToggleHistory && /* @__PURE__ */ jsxs(PosButton, { className: "pos-pill", "aria-pressed": !!historyOpen, onClick: onToggleHistory, children: [
+        /* @__PURE__ */ jsx(History, { size: 14 }),
+        " ",
+        historyOpen ? "Ocultar hist\xF3rico" : "Hist\xF3rico do dia"
+      ] })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "pos-board", children: DELIVERY_COLUMNS.map(({ name, states, tone }) => {
       const Icon = ICONE[name] ?? Clock;
       const column = orders.filter((o) => stillOnBoard(o, now)).filter((o) => states.includes(deliveryStatus(o.dispatch)));
@@ -4997,6 +5004,7 @@ function DispatchRail({
   totals,
   onAdvance,
   onCancel,
+  onCloseDetails,
   now,
   open,
   containerRef,
@@ -5016,7 +5024,18 @@ function DispatchRail({
         /* @__PURE__ */ jsxs("header", { className: "pos-tkt", children: [
           /* @__PURE__ */ jsxs("div", { className: "pos-tkt__row", children: [
             /* @__PURE__ */ jsx("span", { className: "pos-t-xl", children: order.label }),
-            /* @__PURE__ */ jsx("span", { className: "pos-badge", "data-status": status === "out" || status === "dispatched" ? "bill_requested" : "occupied", children: DISPATCH_LABEL[status] })
+            /* @__PURE__ */ jsx("span", { className: "pos-badge", "data-status": status === "out" || status === "dispatched" ? "bill_requested" : "occupied", children: DISPATCH_LABEL[status] }),
+            onCloseDetails && /* @__PURE__ */ jsx(
+              PosButton,
+              {
+                className: "pos-icon-btn",
+                style: { marginLeft: "auto" },
+                onClick: onCloseDetails,
+                "aria-label": "Fechar detalhes",
+                title: "Fechar detalhes \xB7 Esc",
+                children: /* @__PURE__ */ jsx(X, { size: 18 })
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: "pos-tkt__sub", children: [order.channel, order.customerName].filter(Boolean).join(" \xB7 ") })
         ] }),
@@ -7490,6 +7509,8 @@ function PosScreen({
   onWaitlistLookupPhone,
   onReservationArrived,
   connection = "online",
+  initialMenuId,
+  onMenuChange,
   operatorId,
   onAction,
   onOpenPosition,
@@ -7565,7 +7586,12 @@ function PosScreen({
     }
     return seeded;
   });
-  const [menuId, setMenuId] = useState(config.menus[0]?.id);
+  const [menuId, setMenuId] = useState(() => config.menus.some((m) => m.id === initialMenuId && !m.hidden) ? initialMenuId : config.menus[0]?.id);
+  const onMenuChangeRef = useRef(onMenuChange);
+  onMenuChangeRef.current = onMenuChange;
+  useEffect(() => {
+    if (menuId) onMenuChangeRef.current?.(menuId);
+  }, [menuId]);
   useEffect(() => {
     if (!initialTickets) return;
     dispatchBook({ type: "hydrate", tickets: initialTickets, at: new Date(now).toISOString() });
@@ -7723,6 +7749,10 @@ function PosScreen({
         return;
       }
       if (event.key === "Escape") {
+        if (activeKindRef.current === "delivery") {
+          closeDetailsRef.current();
+          return;
+        }
         commandRef.current?.focus();
         return;
       }
@@ -7775,6 +7805,10 @@ function PosScreen({
     return { ...p, itemCount: counts[p.id] ?? p.itemCount, totalCents: totalCents || p.totalCents };
   }), [positions, opened, dispatched, settled, book, counts, config.serviceChargePercent, minhas]);
   const activePosition = livePositions.find((p) => p.id === activePositionId);
+  const activeIdRef = useRef(activePositionId);
+  activeIdRef.current = activePositionId;
+  const activeKindRef = useRef(activePosition?.kind);
+  activeKindRef.current = activePosition?.kind;
   const trocarCanal = useCallback((id) => {
     if (channelSwitchDropsPosition(
       { menuId, activeKind: activePosition?.kind },
@@ -7798,8 +7832,20 @@ function PosScreen({
     ),
     [closedTickets, canalMarcado, menu?.view]
   );
+  const [deliveryHistory, setDeliveryHistory] = useState(false);
+  const closeDetailsRef = useRef(() => {
+  });
+  closeDetailsRef.current = () => {
+    setActivePositionId(void 0);
+    setSelectedLineId(void 0);
+    setRailOpen(false);
+  };
   const escapeRef = useRef(() => false);
   escapeRef.current = () => {
+    if (activePosition?.kind === "delivery") {
+      closeDetailsRef.current();
+      return true;
+    }
     if (railOpen) {
       setRailOpen(false);
       return true;
@@ -7898,6 +7944,10 @@ function PosScreen({
       return;
     }
     if (seatingRef.current) return;
+    if (p.kind === "delivery" && p.id === activeIdRef.current) {
+      closeDetailsRef.current();
+      return;
+    }
     setActivePositionId(p.id);
     onActivatePosition?.(p.id);
     setRailOpen(true);
@@ -8334,7 +8384,7 @@ function PosScreen({
       style,
       "data-cart-open": railOpen || void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "pos-body", children: [
+        /* @__PURE__ */ jsxs("div", { className: "pos-body", "data-details": menu?.view === "list" && !activePosition && !deliveryHistory ? "closed" : void 0, children: [
           /* @__PURE__ */ jsxs("nav", { className: "pos-rail", "aria-label": "Navega\xE7\xE3o principal", children: [
             (brandMark || brandName || !railTop) && /* @__PURE__ */ jsxs("div", { className: "pos-brand", children: [
               /* @__PURE__ */ jsx("span", { className: "pos-brand__mark", children: brandMark ?? config.name.slice(0, 1) }),
@@ -8642,7 +8692,9 @@ function PosScreen({
                 orders: livePositions.filter((p) => p.kind === "delivery"),
                 activeId: activePositionId,
                 onSelect: selectPosition,
-                now
+                now,
+                historyOpen: deliveryHistory && !activePosition,
+                onToggleHistory: activePosition ? void 0 : () => setDeliveryHistory((v) => !v)
               }
             ),
             menu?.view === "reservations" && /* @__PURE__ */ jsx(
@@ -8968,6 +9020,7 @@ function PosScreen({
                 void onDispatch?.(activePosition.id, to);
               },
               onCancel: () => handleAction("cancel_order"),
+              onCloseDetails: () => closeDetailsRef.current(),
               extra: renderDispatchExtra?.(activePosition, ticket)
             }
           ) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -10204,8 +10257,11 @@ function MarketplaceCancelSheet({ provider, orderLabel, loadReasons, onConfirm,
   const [failed, setFailed] = useState(false);
   const [chosen, setChosen] = useState(null);
   const [sending, setSending] = useState(false);
+  const [attempt, setAttempt] = useState(0);
   useEffect(() => {
     let alive = true;
+    setFailed(false);
+    setReasons(null);
     loadReasons().then((r) => {
       if (alive) setReasons(r);
     }).catch(() => {
@@ -10214,7 +10270,7 @@ function MarketplaceCancelSheet({ provider, orderLabel, loadReasons, onConfirm,
     return () => {
       alive = false;
     };
-  }, [loadReasons]);
+  }, [loadReasons, attempt]);
   const reason = reasons?.find((r) => r.code === chosen);
   return /* @__PURE__ */ jsxs(PosSheet, { label: "Cancelar pedido", onDismiss: onCancel, children: [
     /* @__PURE__ */ jsxs("div", { className: "pos-sheet__head", children: [
@@ -10230,37 +10286,32 @@ function MarketplaceCancelSheet({ provider, orderLabel, loadReasons, onConfirm,
       provider,
       " decide o cancelamento. Escolha um dos motivos que ele aceita para este pedido."
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "pos-sheet__body", role: "radiogroup", "aria-label": `Motivos do ${provider}`, children: failed ? /* @__PURE__ */ jsxs("p", { className: "pos-empty__t", role: "alert", children: [
-      "N\xE3o foi poss\xEDvel buscar os motivos no ",
-      provider,
-      ". Tente de novo."
-    ] }) : reasons === null ? /* @__PURE__ */ jsxs("p", { className: "pos-empty__h", children: [
-      "Buscando os motivos no ",
-      provider,
-      "\u2026"
-    ] }) : reasons.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "pos-empty__t", children: [
-      "O ",
-      provider,
-      " n\xE3o aceita cancelar este pedido agora."
-    ] }) : reasons.map((r) => /* @__PURE__ */ jsx(
-      PosButton,
+    /* @__PURE__ */ jsx("div", { className: "pos-sheet__body", children: failed ? /* @__PURE__ */ jsx(
+      EmptyState,
       {
-        role: "radio",
-        "aria-checked": chosen === r.code,
-        className: `pos-btn pos-btn--ghost${chosen === r.code ? " is-active" : ""}`,
-        style: { width: "100%", justifyContent: "flex-start", marginBottom: "var(--pos-1x)" },
-        onClick: () => setChosen(r.code),
-        children: r.description
-      },
-      r.code
-    )) }),
+        title: `N\xE3o foi poss\xEDvel buscar os motivos no ${provider}.`,
+        Icon: Ban,
+        action: { label: "Tentar de novo", onClick: () => setAttempt((n) => n + 1) }
+      }
+    ) : reasons !== null && reasons.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { title: `O ${provider} n\xE3o aceita cancelar este pedido agora.`, Icon: Ban }) : (
+      // The same option rows the modifier and open-table sheets use: a box
+      // that checks and an accent edge on the one chosen.
+      /* @__PURE__ */ jsx("div", { className: "pos-mgroup__opts pos-mgroup__opts--stack", role: "group", "aria-label": `Motivos do ${provider}`, "aria-busy": reasons === null, children: reasons === null ? [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx("div", { className: "pos-mopt pos-skel", "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "pos-skel__b", style: { width: `${55 + i * 9}%`, height: 14 } }) }, i)) : reasons.map((r) => {
+        const on = chosen === r.code;
+        return /* @__PURE__ */ jsxs(PosButton, { className: "pos-mopt", "aria-pressed": on, onClick: () => setChosen(r.code), children: [
+          /* @__PURE__ */ jsx("span", { className: "pos-mopt__check", children: on && /* @__PURE__ */ jsx(Check, { size: 14, strokeWidth: 3 }) }),
+          /* @__PURE__ */ jsx("span", { className: "pos-mopt__label", children: r.description })
+        ] }, r.code);
+      }) })
+    ) }),
     /* @__PURE__ */ jsxs("div", { className: "pos-sheet__foot", children: [
-      /* @__PURE__ */ jsx(PosButton, { className: "pos-btn pos-btn--ghost", onClick: onCancel, children: "Voltar" }),
+      /* @__PURE__ */ jsx(PosButton, { className: "pos-btn pos-btn--ghost", onClick: onCancel, disabled: sending, children: "Voltar" }),
       /* @__PURE__ */ jsx(
         PosButton,
         {
-          className: "pos-btn",
+          className: "pos-btn pos-btn--danger",
           disabled: !reason || sending,
+          "aria-busy": sending,
           onClick: async () => {
             if (!reason) return;
             setSending(true);