@fayz-ai/pos 0.23.0 → 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, Loader2, 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 ") })
         ] }),
@@ -7730,6 +7749,10 @@ function PosScreen({
         return;
       }
       if (event.key === "Escape") {
+        if (activeKindRef.current === "delivery") {
+          closeDetailsRef.current();
+          return;
+        }
         commandRef.current?.focus();
         return;
       }
@@ -7782,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 },
@@ -7805,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;
@@ -7905,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);
@@ -8341,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) }),
@@ -8649,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(
@@ -8975,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: [
@@ -10212,7 +10258,6 @@ function MarketplaceCancelSheet({ provider, orderLabel, loadReasons, onConfirm,
   const [chosen, setChosen] = useState(null);
   const [sending, setSending] = useState(false);
   const [attempt, setAttempt] = useState(0);
-  const list = useRef(null);
   useEffect(() => {
     let alive = true;
     setFailed(false);
@@ -10227,72 +10272,44 @@ function MarketplaceCancelSheet({ provider, orderLabel, loadReasons, onConfirm,
     };
   }, [loadReasons, attempt]);
   const reason = reasons?.find((r) => r.code === chosen);
-  const onKey = (e) => {
-    if (!reasons?.length || !["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(e.key)) return;
-    e.preventDefault();
-    const at = Math.max(0, reasons.findIndex((r) => r.code === chosen));
-    const step = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
-    const next = reasons[(at + step + reasons.length) % reasons.length];
-    setChosen(next.code);
-    list.current?.querySelector(`[data-code="${CSS.escape(next.code)}"]`)?.focus();
-  };
   return /* @__PURE__ */ jsxs(PosSheet, { label: "Cancelar pedido", onDismiss: onCancel, children: [
     /* @__PURE__ */ jsxs("div", { className: "pos-sheet__head", children: [
-      /* @__PURE__ */ jsxs("div", { className: "pos-mcs__headtext", children: [
-        /* @__PURE__ */ jsxs("h2", { className: "pos-sheet__title", children: [
-          /* @__PURE__ */ jsx(Ban, { size: 18, strokeWidth: 2.2, "aria-hidden": true }),
-          " Cancelar ",
-          orderLabel
-        ] }),
-        /* @__PURE__ */ jsxs("p", { className: "pos-sheet__sub", children: [
-          "O ",
-          provider,
-          " decide o cancelamento. Escolha um dos motivos que ele aceita para este pedido."
-        ] })
+      /* @__PURE__ */ jsxs("h2", { className: "pos-sheet__title", children: [
+        /* @__PURE__ */ jsx(Ban, { size: 18, strokeWidth: 2.2, "aria-hidden": true }),
+        " Cancelar ",
+        orderLabel
       ] }),
       /* @__PURE__ */ jsx(PosButton, { className: "pos-sheet__x", onClick: onCancel, "aria-label": "Fechar", children: /* @__PURE__ */ jsx(X, { size: 20 }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "pos-sheet__body pos-mcs__body", children: failed ? /* @__PURE__ */ jsxs("div", { className: "pos-mcs__state", role: "alert", children: [
-      /* @__PURE__ */ jsxs("p", { children: [
-        "N\xE3o foi poss\xEDvel buscar os motivos no ",
-        provider,
-        "."
-      ] }),
-      /* @__PURE__ */ jsx(PosButton, { className: "pos-mcs__btn", onClick: () => setAttempt((n) => n + 1), children: "Tentar de novo" })
-    ] }) : reasons === null ? /* @__PURE__ */ jsxs("div", { className: "pos-mcs__state", "aria-live": "polite", children: [
-      /* @__PURE__ */ jsx(Loader2, { size: 18, className: "pos-mcs__spin", "aria-hidden": true }),
-      " Buscando os motivos no ",
-      provider,
-      "\u2026"
-    ] }) : reasons.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "pos-mcs__state", children: [
+    /* @__PURE__ */ jsxs("p", { className: "pos-sheet__sub", children: [
       "O ",
       provider,
-      " n\xE3o aceita cancelar este pedido agora."
-    ] }) : /* @__PURE__ */ jsx("div", { ref: list, className: "pos-mcs__list", role: "radiogroup", "aria-label": `Motivos do ${provider}`, onKeyDown: onKey, children: reasons.map((r, i) => {
-      const on = chosen === r.code;
-      return /* @__PURE__ */ jsxs(
-        PosButton,
-        {
-          "data-code": r.code,
-          role: "radio",
-          "aria-checked": on,
-          tabIndex: on || !chosen && i === 0 ? 0 : -1,
-          className: `pos-mcs__opt${on ? " is-on" : ""}`,
-          onClick: () => setChosen(r.code),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "pos-mcs__dot", "aria-hidden": true }),
-            /* @__PURE__ */ jsx("span", { children: r.description })
-          ]
-        },
-        r.code
-      );
-    }) }) }),
-    /* @__PURE__ */ jsxs("div", { className: "pos-mcs__foot", children: [
-      /* @__PURE__ */ jsx(PosButton, { className: "pos-mcs__btn", onClick: onCancel, disabled: sending, children: "Voltar" }),
-      /* @__PURE__ */ jsxs(
+      " decide o cancelamento. Escolha um dos motivos que ele aceita para este pedido."
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "pos-sheet__body", children: failed ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        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, disabled: sending, children: "Voltar" }),
+      /* @__PURE__ */ jsx(
         PosButton,
         {
-          className: "pos-mcs__btn pos-mcs__btn--danger",
+          className: "pos-btn pos-btn--danger",
           disabled: !reason || sending,
           "aria-busy": sending,
           onClick: async () => {
@@ -10304,10 +10321,7 @@ function MarketplaceCancelSheet({ provider, orderLabel, loadReasons, onConfirm,
               setSending(false);
             }
           },
-          children: [
-            sending && /* @__PURE__ */ jsx(Loader2, { size: 16, className: "pos-mcs__spin", "aria-hidden": true }),
-            sending ? "Enviando\u2026" : `Pedir cancelamento ao ${provider}`
-          ]
+          children: sending ? "Enviando\u2026" : `Pedir cancelamento ao ${provider}`
         }
       )
     ] })