@swift-food-services/catering-widget 0.2.0-beta.2 → 0.2.0-beta.3

package/dist/index.cjs

@@ -12518,7 +12518,15 @@ function useChatSession(options = {}) {
             };
             return [...historicMessages, newLive];
           }
-          return existingLive ? [...historicMessages, existingLive] : historicMessages;
+          if (!existingLive) return historicMessages;
+          const carriedParts = existingLive.parts.filter(
+            (p) => p.type !== "menu_preview" && p.type !== "restaurant_info"
+          );
+          if (carriedParts.length === 0) return historicMessages;
+          return [
+            ...historicMessages,
+            { ...existingLive, parts: carriedParts }
+          ];
         });
         if (markLive && newLiveParts.length > 0) {
           const previewIdx = finalLiveParts.findIndex(
@@ -12983,7 +12991,6 @@ function mergeAdaptedMealParts(data) {
   for (let i = 0; i < meals.length; i++) {
     const meal = meals[i];
     const blocks = meal.intentBlocks ?? [];
-    if (blocks.length === 0) continue;
     synthesized.push({
       type: "meal_session",
       mealSessionIndex: i,
@@ -13057,7 +13064,7 @@ function findLatestMealSessionParts(messages) {
     (a, b) => a.mealSessionIndex - b.mealSessionIndex
   );
 }
-var STORAGE_KEY_PREFIX = "swift-food-cart-v2-";
+var STORAGE_KEY_PREFIX = "swift-food-cart-v3-";
 var emptyIntent = () => ({
   selectedRestaurantId: null,
   qtyOverrides: {},
@@ -13595,7 +13602,7 @@ function DraftItemRow({
               marginTop: 8,
               alignItems: "center",
               flexWrap: "wrap",
-              paddingLeft: showCheckbox ? 102 : 68
+              paddingLeft: showCheckbox ? 168 : 132
             },
             children: [
               onSwap && /* @__PURE__ */ jsxRuntime.jsx(
@@ -13729,9 +13736,9 @@ function ItemPhoto({
     "div",
     {
       style: {
-        width: 56,
-        height: 56,
-        borderRadius: 10,
+        width: 120,
+        height: 120,
+        borderRadius: 14,
         background: src ? `url(${src}) center/cover` : PLACEHOLDER_BG,
         flexShrink: 0,
         position: "relative",
@@ -13749,7 +13756,7 @@ function ItemPhoto({
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            fontSize: "1.6rem",
+            fontSize: "2.2rem",
             color: "var(--ink-faint)"
           },
           children: initial
@@ -16663,8 +16670,25 @@ function readUnlocked() {
     return false;
   }
 }
+var unlockedValue = readUnlocked();
+var subscribers = /* @__PURE__ */ new Set();
+function setUnlocked(next) {
+  if (unlockedValue === next) return;
+  unlockedValue = next;
+  subscribers.forEach((cb) => cb());
+}
+function subscribe(cb) {
+  subscribers.add(cb);
+  return () => {
+    subscribers.delete(cb);
+  };
+}
 function useBetaUnlock() {
-  const [unlocked, setUnlocked] = react.useState(readUnlocked);
+  const unlocked = react.useSyncExternalStore(
+    subscribe,
+    () => unlockedValue,
+    () => false
+  );
   const tryUnlock = react.useCallback((code) => {
     if (code.trim() !== BETA_CODE) return false;
     setUnlocked(true);
@@ -18065,6 +18089,11 @@ function IntentStepper({
     () => checkMinOrders(orderedMeals, aiMealSessions, cart),
     [orderedMeals, aiMealSessions, cart]
   );
+  const myPos = orderedMeals.findIndex(
+    (m) => m.mealSessionIndex === activeMealSessionIndex
+  );
+  const isFirstMeal = myPos <= 0;
+  const isLastMeal = myPos >= 0 && myPos === orderedMeals.length - 1;
   if (!activeMeal) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -18085,6 +18114,23 @@ function IntentStepper({
     );
   }
   if (blocks.length === 0) {
+    const emptyPrevLabel = !isFirstMeal ? aiMealSessions[orderedMeals[myPos - 1].mealSessionIndex]?.sessionName ?? null : null;
+    const emptyNextLabel = !isLastMeal ? aiMealSessions[orderedMeals[myPos + 1].mealSessionIndex]?.sessionName ?? null : null;
+    const handleEmptyPrev = () => {
+      if (sending || isFirstMeal) return;
+      pendingReviewRef.current = true;
+      onPickMealSession(orderedMeals[myPos - 1].mealSessionIndex);
+    };
+    const handleEmptyNext = () => {
+      if (sending || isLastMeal) return;
+      onPickMealSession(orderedMeals[myPos + 1].mealSessionIndex);
+    };
+    const handleEmptyJumpTo = (targetMealSessionIndex, targetIntentIdx) => {
+      if (sending) return;
+      if (targetMealSessionIndex === activeMealSessionIndex) return;
+      pendingIntentIdxRef.current = targetIntentIdx;
+      onPickMealSession(targetMealSessionIndex);
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -18094,11 +18140,34 @@ function IntentStepper({
           flex: 1,
           minHeight: 0,
           marginBottom: 16,
+          // Cluster topSlot + empty card + NavBar as one block centred
+          // vertically — same trick the populated branch uses so the
+          // tabs / nav don't get pinned to the panel's top/bottom
+          // edges when the content above is short.
           justifyContent: "center"
         },
         children: [
           topSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 12, flexShrink: 0 }, children: topSlot }),
-          /* @__PURE__ */ jsxRuntime.jsx(EmptyStepperState, {})
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexShrink: 0, marginBottom: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyStepperState, { missingFields: activeMealMeta?.missingFields }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NavBar,
+            {
+              onPrev: handleEmptyPrev,
+              onNext: handleEmptyNext,
+              onJumpTo: handleEmptyJumpTo,
+              prevLabel: emptyPrevLabel,
+              nextLabel: emptyNextLabel,
+              atFinal: false,
+              sending,
+              showPrev: !isFirstMeal,
+              showNext: !isLastMeal,
+              mealSessions: orderedMeals,
+              aiMealSessions,
+              activeMealSessionIndex,
+              currentIntentIndex: 0,
+              cart
+            }
+          )
         ]
       }
     );
@@ -18106,13 +18175,8 @@ function IntentStepper({
   const pickedName = selected?.restaurant.name ?? "\u2014";
   const pickedId = selected?.restaurant.id ?? "";
   const alts = block ? block.restaurantPicks.filter((rp) => rp.restaurant.id !== pickedId) : [];
-  const myPos = orderedMeals.findIndex(
-    (m) => m.mealSessionIndex === activeMealSessionIndex
-  );
   const isFirstIntent = !isReview && safeIntentIdx === 0;
   const isLastIntent = !isReview && safeIntentIdx === blocks.length - 1;
-  const isFirstMeal = myPos <= 0;
-  const isLastMeal = myPos >= 0 && myPos === orderedMeals.length - 1;
   const atFinal = isReview && isLastMeal;
   const prevLabel = isReview ? capitalize(blocks[blocks.length - 1].intent.phrase) : !isFirstIntent ? capitalize(blocks[safeIntentIdx - 1].intent.phrase) : !isFirstMeal ? aiMealSessions[orderedMeals[myPos - 1].mealSessionIndex]?.sessionName ?? null : null;
   const nextLabel = isReview ? !isLastMeal ? aiMealSessions[orderedMeals[myPos + 1].mealSessionIndex]?.sessionName ?? null : null : !isLastIntent ? capitalize(blocks[safeIntentIdx + 1].intent.phrase) : "Review";
@@ -18579,6 +18643,7 @@ function NavBar({
   atFinal,
   sending,
   showPrev,
+  showNext = true,
   mealSessions,
   aiMealSessions,
   activeMealSessionIndex,
@@ -18665,7 +18730,7 @@ function NavBar({
                 {
                   type: "button",
                   onClick: onNext,
-                  disabled: sending,
+                  disabled: !showNext || sending,
                   className: "chip chip-brand",
                   style: {
                     height: 40,
@@ -18673,6 +18738,7 @@ function NavBar({
                     fontSize: atFinal ? "0.95rem" : "0.85rem",
                     fontWeight: 500,
                     justifyContent: "center",
+                    visibility: showNext ? "visible" : "hidden",
                     cursor: sending ? "default" : "pointer",
                     opacity: sending ? 0.7 : 1
                   },
@@ -18700,10 +18766,11 @@ function TimelinePill({
   const activeMeal = mealSessions[activeMealPos];
   if (!activeMeal) return null;
   const activeMealMeta = aiMealSessions[activeMeal.mealSessionIndex];
-  const isReviewStep = currentIntentIndex === activeMeal.intentBlocks.length;
+  const isEmptyMeal = activeMeal.intentBlocks.length === 0;
+  const isReviewStep = !isEmptyMeal && currentIntentIndex === activeMeal.intentBlocks.length;
   const currentIntent = activeMeal.intentBlocks[currentIntentIndex];
-  if (!isReviewStep && !currentIntent) return null;
-  const labelText = isReviewStep ? "Review" : currentIntent.intent.phrase;
+  if (!isEmptyMeal && !isReviewStep && !currentIntent) return null;
+  const labelText = isEmptyMeal ? null : isReviewStep ? "Review" : currentIntent.intent.phrase;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -18735,14 +18802,23 @@ function TimelinePill({
               opacity: hovered ? 1 : 0.85,
               transition: "opacity 150ms ease"
             },
-            "aria-label": `Step ${currentIntentIndex + 1} of ${activeMeal.intentBlocks.length + 1}: ${labelText}. Click to see the full itinerary.`,
+            "aria-label": isEmptyMeal ? `${activeMealMeta?.sessionName ?? "Meal"}. Click to see the full itinerary.` : `Step ${currentIntentIndex + 1} of ${activeMeal.intentBlocks.length + 1}: ${labelText}. Click to see the full itinerary.`,
             "aria-expanded": hovered,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--ink-faint)" }, children: [
-                activeMealMeta?.sessionName ?? `Meal ${activeMeal.mealSessionIndex + 1}`,
-                " \xB7 "
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  style: {
+                    color: isEmptyMeal ? "var(--ink)" : "var(--ink-faint)",
+                    fontWeight: isEmptyMeal ? 500 : 400
+                  },
+                  children: [
+                    activeMealMeta?.sessionName ?? `Meal ${activeMeal.mealSessionIndex + 1}`,
+                    !isEmptyMeal && " \xB7 "
+                  ]
+                }
+              ),
+              !isEmptyMeal && /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   style: {
@@ -19222,7 +19298,23 @@ function EmptyIntentState({ message }) {
     }
   );
 }
-function EmptyStepperState() {
+var MISSING_FIELD_LABELS = {
+  guestCount: "guest count",
+  sessionDate: "date",
+  eventTime: "time"
+};
+function formatMissingFieldList(fields) {
+  const labels = fields.map((f) => MISSING_FIELD_LABELS[f] ?? f);
+  if (labels.length === 0) return "";
+  if (labels.length === 1) return labels[0];
+  if (labels.length === 2) return `${labels[0]} and ${labels[1]}`;
+  return `${labels.slice(0, -1).join(", ")}, and ${labels[labels.length - 1]}`;
+}
+function EmptyStepperState({
+  missingFields
+}) {
+  const hasMissing = !!missingFields && missingFields.length > 0;
+  const label = hasMissing ? formatMissingFieldList(missingFields) : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -19234,7 +19326,11 @@ function EmptyStepperState() {
         textAlign: "center",
         color: "var(--ink-faint)"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "display-italic", style: { fontSize: "0.95rem" }, children: "No items yet for this meal \u2014 keep chatting on the right." })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "display-italic", style: { fontSize: "0.95rem" }, children: hasMissing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        "Tell me the ",
+        label,
+        " for this meal and I'll suggest a menu."
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No items yet for this meal \u2014 keep chatting on the right." }) })
     }
   );
 }
@@ -26049,17 +26145,8 @@ function useCateringTutorial({
   const [tutorialStep, setTutorialStep] = react.useState(null);
   const [tutorialPhase, setTutorialPhase] = react.useState("navigation");
   react.useEffect(() => {
-    const tutorialCompleted = localStorage.getItem(TUTORIAL_STORAGE_KEY);
-    if (tutorialCompleted) {
-      setTutorialPhase("completed");
-      setTutorialStep(null);
-    } else if (mealSessions.length === 1 && mealSessions[0].orderItems.length === 0) {
-      setTutorialPhase("navigation");
-      setTutorialStep(0);
-    } else {
-      setTutorialPhase("completed");
-      setTutorialStep(null);
-    }
+    setTutorialPhase("completed");
+    setTutorialStep(null);
   }, []);
   const getTutorialSteps = react.useCallback(() => {
     switch (tutorialPhase) {
@@ -26657,7 +26744,6 @@ function CateringOrderBuilder() {
     handleTutorialNext,
     handleSkipTutorial,
     triggerSessionCreated,
-    resetTutorial,
     getTutorialSteps
   } = useCateringTutorial({
     mealSessions,
@@ -26719,6 +26805,7 @@ function CateringOrderBuilder() {
     setExpandedItemId(item.id);
   };
   const { stickyTopOffset = 0, publishableKey, aiEnabled = false } = useCateringConfig();
+  const { unlocked: aiBetaUnlocked, tryUnlock: tryUnlockAiBeta } = useBetaUnlock();
   const effectiveRightPanelTab = aiEnabled ? rightPanelTab : "cart";
   const [overlayVisible, setOverlayVisible] = react.useState(false);
   const basketColumnRef = react.useRef(null);
@@ -27702,40 +27789,6 @@ function CateringOrderBuilder() {
                                   ]
                                 }
                               ),
-                              /* @__PURE__ */ jsxRuntime.jsxs(
-                                "button",
-                                {
-                                  onClick: () => {
-                                    setIsDesktopCartMenuOpen(false);
-                                    resetTutorial();
-                                    setNavMode("dates");
-                                    setSelectedDayDate(null);
-                                  },
-                                  className: "flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm text-gray-700 transition-colors hover:bg-base-100",
-                                  children: [
-                                    /* @__PURE__ */ jsxRuntime.jsx(
-                                      "svg",
-                                      {
-                                        xmlns: "http://www.w3.org/2000/svg",
-                                        className: "h-4 w-4",
-                                        fill: "none",
-                                        viewBox: "0 0 24 24",
-                                        stroke: "currentColor",
-                                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                                          "path",
-                                          {
-                                            strokeLinecap: "round",
-                                            strokeLinejoin: "round",
-                                            strokeWidth: 2,
-                                            d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                                          }
-                                        )
-                                      }
-                                    ),
-                                    "Tutorial"
-                                  ]
-                                }
-                              ),
                               /* @__PURE__ */ jsxRuntime.jsxs(
                                 "button",
                                 {
@@ -27783,16 +27836,16 @@ function CateringOrderBuilder() {
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "absolute inset-x-0 top-0 overflow-y-auto bg-white",
-              style: { bottom: keyboardOffset + 64 },
-              children: mobileChatView === "results" ? /* @__PURE__ */ jsxRuntime.jsx(MobileResultsView, { onBack: () => setMobileChatView("chat") }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pt-14 pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ChatMessagesView, {}) })
+              className: `absolute inset-x-0 top-0 overflow-y-auto ${aiBetaUnlocked ? "bg-white" : ""}`,
+              style: { bottom: keyboardOffset + (aiBetaUnlocked ? 64 : 0) },
+              children: !aiBetaUnlocked ? /* @__PURE__ */ jsxRuntime.jsx(AIChatBetaGate, { onUnlock: tryUnlockAiBeta }) : mobileChatView === "results" ? /* @__PURE__ */ jsxRuntime.jsx(MobileResultsView, { onBack: () => setMobileChatView("chat") }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pt-14 pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ChatMessagesView, {}) })
             }
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: `fixed left-0 right-0 md:hidden z-50 ${keyboardOffset > 100 && !isMobileAIChatOpen ? "hidden" : ""}`,
+            className: `fixed left-0 right-0 md:hidden z-50 ${keyboardOffset > 100 && !isMobileAIChatOpen || isMobileAIChatOpen && !aiBetaUnlocked ? "hidden" : ""}`,
             style: { bottom: keyboardOffset },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -27853,40 +27906,6 @@ function CateringOrderBuilder() {
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "button",
-                            {
-                              onClick: () => {
-                                setIsMobileCartMenuOpen(false);
-                                resetTutorial();
-                                setNavMode("dates");
-                                setSelectedDayDate(null);
-                              },
-                              className: "flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm text-gray-700 transition-colors hover:bg-base-100",
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(
-                                  "svg",
-                                  {
-                                    xmlns: "http://www.w3.org/2000/svg",
-                                    className: "h-4 w-4",
-                                    fill: "none",
-                                    viewBox: "0 0 24 24",
-                                    stroke: "currentColor",
-                                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                                      "path",
-                                      {
-                                        strokeLinecap: "round",
-                                        strokeLinejoin: "round",
-                                        strokeWidth: 2,
-                                        d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                                      }
-                                    )
-                                  }
-                                ),
-                                "Tutorial"
-                              ]
-                            }
-                          ),
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-3 border-t border-base-200" }),
                           /* @__PURE__ */ jsxRuntime.jsxs(
                             "button",
@@ -27910,15 +27929,21 @@ function CateringOrderBuilder() {
                         "button",
                         {
                           type: "button",
-                          onClick: () => setIsAIMobileUnavailableOpen(true),
-                          title: "Coming Soon",
+                          onClick: () => {
+                            if (aiEnabled) {
+                              setIsMobileAIChatOpen(true);
+                            } else {
+                              setIsAIMobileUnavailableOpen(true);
+                            }
+                          },
+                          title: aiEnabled ? void 0 : "Coming Soon",
                           className: `absolute inset-0 flex items-center justify-center gap-1.5 px-4 py-1 transition duration-[250ms] ease-out ${isMobileSearchOpen || isMobileAIChatOpen ? "pointer-events-none -translate-y-full opacity-0" : "translate-y-0 opacity-100"}`,
                           "aria-hidden": isMobileSearchOpen || isMobileAIChatOpen,
                           tabIndex: isMobileSearchOpen || isMobileAIChatOpen ? -1 : 0,
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-4 w-4 text-gray-400" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-400", children: "Ask AI" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 rounded-full bg-primary px-1.5 py-0.5 text-[8px] font-bold uppercase tracking-wider text-white shadow-sm whitespace-nowrap", children: "Coming Soon" })
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: `h-4 w-4 ${aiEnabled ? "text-primary" : "text-gray-400"}` }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm font-semibold ${aiEnabled ? "text-gray-800" : "text-gray-400"}`, children: "Ask AI" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 rounded-full bg-primary px-1.5 py-0.5 text-[8px] font-bold uppercase tracking-wider text-white shadow-sm whitespace-nowrap", children: aiEnabled ? "Beta" : "Soon" })
                           ]
                         }
                       ),
@@ -28146,13 +28171,12 @@ function CateringOrderBuilder() {
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-5 w-5 text-primary" }) }),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold text-gray-900", children: "Plan your menu with AI" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: "Not yet available on mobile" })
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: "Coming soon" })
                     ] })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 space-y-2 text-sm text-gray-600", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Chat with our AI to plan the perfect menu \u2014 tell it your guest count, dietary needs, and budget." }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "It's ready to use on the web. Open this page on a desktop or laptop to try it." }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: "Mobile support is coming soon." })
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: "We're putting the finishing touches on it. Check back soon." })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(
                     "button",