@fayz-ai/pos 0.22.4 → 0.23.0

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, 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeError, channelOfOrder } from '@fayz-ai/core';
 import { createPortal } from 'react-dom';
@@ -7490,6 +7490,8 @@ function PosScreen({
   onWaitlistLookupPhone,
   onReservationArrived,
   connection = "online",
+  initialMenuId,
+  onMenuChange,
   operatorId,
   onAction,
   onOpenPosition,
@@ -7565,7 +7567,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() });
@@ -10204,8 +10211,12 @@ 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);
+  const list = useRef(null);
   useEffect(() => {
     let alive = true;
+    setFailed(false);
+    setReasons(null);
     loadReasons().then((r) => {
       if (alive) setReasons(r);
     }).catch(() => {
@@ -10214,53 +10225,76 @@ function MarketplaceCancelSheet({ provider, orderLabel, loadReasons, onConfirm,
     return () => {
       alive = false;
     };
-  }, [loadReasons]);
+  }, [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("h2", { className: "pos-sheet__title", children: [
-        /* @__PURE__ */ jsx(Ban, { size: 18, strokeWidth: 2.2, "aria-hidden": true }),
-        " Cancelar ",
-        orderLabel
+      /* @__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__ */ jsx(PosButton, { className: "pos-sheet__x", onClick: onCancel, "aria-label": "Fechar", children: /* @__PURE__ */ jsx(X, { size: 20 }) })
     ] }),
-    /* @__PURE__ */ jsxs("p", { className: "pos-sheet__sub", children: [
-      "O ",
-      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 ",
+    /* @__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("p", { className: "pos-empty__t", children: [
+    ] }) : reasons.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "pos-mcs__state", children: [
       "O ",
       provider,
       " n\xE3o aceita cancelar este pedido agora."
-    ] }) : reasons.map((r) => /* @__PURE__ */ jsx(
-      PosButton,
-      {
-        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
-    )) }),
-    /* @__PURE__ */ jsxs("div", { className: "pos-sheet__foot", children: [
-      /* @__PURE__ */ jsx(PosButton, { className: "pos-btn pos-btn--ghost", onClick: onCancel, children: "Voltar" }),
-      /* @__PURE__ */ jsx(
+    ] }) : /* @__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,
         {
-          className: "pos-btn",
+          "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(
+        PosButton,
+        {
+          className: "pos-mcs__btn pos-mcs__btn--danger",
           disabled: !reason || sending,
+          "aria-busy": sending,
           onClick: async () => {
             if (!reason) return;
             setSending(true);
@@ -10270,7 +10304,10 @@ function MarketplaceCancelSheet({ provider, orderLabel, loadReasons, onConfirm,
               setSending(false);
             }
           },
-          children: sending ? "Enviando\u2026" : `Pedir cancelamento ao ${provider}`
+          children: [
+            sending && /* @__PURE__ */ jsx(Loader2, { size: 16, className: "pos-mcs__spin", "aria-hidden": true }),
+            sending ? "Enviando\u2026" : `Pedir cancelamento ao ${provider}`
+          ]
         }
       )
     ] })