@fayz-ai/storefront 0.8.3 → 0.8.4

package/dist/index.js

@@ -8,7 +8,7 @@ import React7, { createContext, useState, useRef, useEffect, useMemo, useContext
 import { hashRouterAdapter, normalizePostalCode, lookupPostalCode, registerScaffold, registerBlock, formatPostalCode, renderBlocks, defineApp } from '@fayz-ai/core';
 export { getSupabaseClientOptional, renderApp } from '@fayz-ai/core';
 import * as LucideIcons from 'lucide-react';
-import { ChevronLeft, ChevronRight, ShoppingBag, X, Trash2, Phone, Mail, Search, User, UserCircle, Package, CreditCard, LogOut, Truck, RefreshCcw, ShieldCheck, Lock, Minus, Plus, MapPin, Info, AlertCircle, Check, Send, MessageCircle, PackageCheck, QrCode, XCircle, RotateCcw, Clock } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ShoppingBag, X, Trash2, Phone, Mail, Search, User, UserCircle, Package, CreditCard, LogOut, Menu, Truck, RefreshCcw, ShieldCheck, Lock, Minus, Plus, MapPin, Info, AlertCircle, Check, Send, MessageCircle, PackageCheck, QrCode, XCircle, RotateCcw, Clock } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { validateDiscount } from '@fayz-ai/shop';
 
@@ -909,7 +909,7 @@ function SearchInput({ className, iconOnly = false }) {
     )
   ] });
 }
-function HeaderActions() {
+function HeaderActions({ onMenuClick }) {
   const config = useStorefrontConfig();
   const count = useCartStore(selectCount);
   const openDrawer = useCartStore((s) => s.openDrawer);
@@ -1007,6 +1007,16 @@ function HeaderActions() {
           )
         ]
       }
+    ),
+    onMenuClick && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Abrir menu",
+        onClick: onMenuClick,
+        className: "relative rounded-full p-2.5 transition-opacity hover:opacity-70 md:hidden",
+        children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+      }
     )
   ] });
 }
@@ -1047,12 +1057,94 @@ function NavLinks({ className }) {
     ))
   ] });
 }
+function MobileMenuDrawer({ open, onClose }) {
+  const config = useStorefrontConfig();
+  const { categories } = useCategories();
+  const setCategoryId = useCatalogStore((s) => s.setCategoryId);
+  const showCategories = config.theme?.header?.showCategories !== false;
+  const goCategory = (categoryId) => {
+    useCatalogStore.getState().reset();
+    setCategoryId(categoryId);
+    navigateTo(config.catalogPath);
+    onClose();
+  };
+  React7.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 md:hidden", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 animate-fade-in bg-black/40",
+        "aria-hidden": true,
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "mobile-menu-drawer",
+        role: "dialog",
+        "aria-label": "Menu Principal",
+        className: "absolute right-0 top-0 flex h-full w-full max-w-[280px] animate-slide-in-from-right flex-col bg-background shadow-2xl",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-5 py-4", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Menu" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Fechar menu",
+                onClick: onClose,
+                className: "rounded-full p-1.5 hover:bg-muted",
+                children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-5", children: /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-4", children: [
+            config.nav.map((link) => /* @__PURE__ */ jsx(
+              Link,
+              {
+                to: link.to,
+                onClick: onClose,
+                className: "text-base font-semibold transition-opacity hover:opacity-70",
+                children: link.label
+              },
+              link.to
+            )),
+            showCategories && categories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "my-2 border-t" }),
+              /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Categorias" }),
+              categories.map((c) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => goCategory(c.id),
+                  className: "text-left text-sm font-medium transition-opacity hover:opacity-80",
+                  children: c.name
+                },
+                c.id
+              ))
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
 function StorefrontHeader() {
   const config = useStorefrontConfig();
   const variant = config.theme?.header?.variant ?? "classic";
   const scrolled = useScrolled();
   const showSearch = config.theme?.header?.showSearch !== false;
   const iconSearch = config.theme?.header?.searchStyle === "icon";
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const logo = /* @__PURE__ */ jsx(Link, { to: "/", className: "sf-heading shrink-0 text-xl font-bold tracking-tight", children: config.logo ?? config.name });
   return /* @__PURE__ */ jsxs(
     "header",
@@ -1093,14 +1185,20 @@ function StorefrontHeader() {
             ] })
           ] })
         ) : (
-          // classic: logo left, nav, then a right-aligned search + actions cluster
-          /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6", children: [
-            logo,
-            /* @__PURE__ */ jsx(NavLinks, { className: "hidden md:flex" }),
-            /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 sm:gap-3", children: [
-              showSearch && /* @__PURE__ */ jsx(SearchInput, { iconOnly: iconSearch, className: iconSearch ? "" : "hidden w-full max-w-sm sm:block" }),
-              /* @__PURE__ */ jsx(HeaderActions, {})
-            ] })
+          // classic: logo left, nav, then a right-aligned search + actions cluster.
+          // NavLinks is hidden below md in the primary row (no room for it there) —
+          // below md a hamburger opens MobileMenuDrawer instead, otherwise mobile
+          // has no way to reach nav/category links at all.
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6", children: [
+              logo,
+              /* @__PURE__ */ jsx(NavLinks, { className: "hidden md:flex" }),
+              /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 sm:gap-3", children: [
+                showSearch && /* @__PURE__ */ jsx(SearchInput, { iconOnly: iconSearch, className: iconSearch ? "" : "hidden w-full max-w-sm sm:block" }),
+                /* @__PURE__ */ jsx(HeaderActions, { onMenuClick: () => setMobileMenuOpen(true) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(MobileMenuDrawer, { open: mobileMenuOpen, onClose: () => setMobileMenuOpen(false) })
           ] })
         )
       ]
@@ -3704,7 +3802,7 @@ function CheckoutPage() {
     ];
     const minDuration = sleep(stepMs * 2);
     try {
-      const { order } = await placeStorefrontOrder({
+      const { order, customerId } = await placeStorefrontOrder({
         config,
         cart,
         session,
@@ -3727,6 +3825,7 @@ function CheckoutPage() {
         // declare it settled. The order is now born `pending` and only the
         // merchant (or a PSP webhook) can confirm the money arrived.
       });
+      if (customerId) session.setSession({ customerId, email: form.email, name: form.name });
       await minDuration;
       cart.clear();
       navigateTo(`/order/${order.id}`);
@@ -4830,6 +4929,10 @@ function storefrontDiscountToSeed(discount) {
     value: discount.percent,
     usageLimit: null,
     oncePerCustomer: false,
+    minSubtotal: null,
+    appliesTo: "all",
+    productIds: [],
+    categoryIds: [],
     startsAt: ts,
     endsAt: null,
     status: "active",