@fayz-ai/storefront 0.8.0 → 0.8.2

package/dist/index.js

@@ -1,13 +1,14 @@
-import { setShopProvider, getShopProvider } from '@fayz-ai/shop/runtime';
+import { getShopProvider, setShopProvider } from '@fayz-ai/shop/runtime';
 import { createMockShopProvider } from '@fayz-ai/shop/mock';
 import { createAuthRuntime, createMockAuthAdapter } from '@fayz-ai/plugin-auth';
+import { setShopAccessTokenResolver } from '@fayz-ai/sdk/shop';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import React6, { createContext, useState, useRef, useEffect, useMemo, useContext, useCallback } from 'react';
-import { hashRouterAdapter, registerScaffold, registerBlock, renderBlocks, defineApp } from '@fayz-ai/core';
+import React7, { createContext, useState, useRef, useEffect, useMemo, useContext, useCallback } from 'react';
+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, Info, AlertCircle, Check, Send, MessageCircle, MapPin, PackageCheck, QrCode, XCircle, RotateCcw, Clock } 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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { validateDiscount } from '@fayz-ai/shop';
 
@@ -53,10 +54,23 @@ function resolveAuthAdapter(configured, fallback) {
     }
   }).adapter;
 }
+var _accessToken = null;
+var _hadAuthUser = false;
+async function syncAccessToken(adapter2) {
+  try {
+    const existing = await adapter2.getSession();
+    _accessToken = existing?.session.accessToken ?? null;
+  } catch {
+    _accessToken = null;
+  }
+}
 function initCustomerAuth(adapter2) {
   _adapter = adapter2;
+  setShopAccessTokenResolver(() => _accessToken);
   adapter2.getSession().then((existing) => {
+    _accessToken = existing?.session.accessToken ?? null;
     if (!existing) return;
+    _hadAuthUser = true;
     const store = useSessionStore.getState();
     if (store.email !== existing.user.email) {
       void linkCustomer(existing.user);
@@ -64,7 +78,16 @@ function initCustomerAuth(adapter2) {
   }).catch(() => {
   });
   adapter2.onAuthStateChange((user) => {
-    if (!user) useSessionStore.getState().signOut();
+    if (!user) {
+      _accessToken = null;
+      if (_hadAuthUser) {
+        _hadAuthUser = false;
+        useSessionStore.getState().signOut();
+      }
+      return;
+    }
+    _hadAuthUser = true;
+    void syncAccessToken(adapter2);
   });
 }
 function getCustomerAuthAdapter() {
@@ -100,6 +123,8 @@ async function establishCustomerSession(email, opts) {
   if (opts?.password) {
     const adapter2 = getCustomerAuthAdapter();
     const session = await adapter2.signIn(normalized, opts.password);
+    _accessToken = session.accessToken ?? null;
+    _hadAuthUser = true;
     return linkCustomer(session.user.email ? session.user : { ...session.user, email: normalized }, opts.name);
   }
   return linkCustomer({ email: normalized }, opts?.name);
@@ -111,12 +136,16 @@ async function signUpCustomer(email, password, name) {
   const adapter2 = getCustomerAuthAdapter();
   const normalized = email.trim().toLowerCase();
   const session = await adapter2.signUp(normalized, password, name);
+  _accessToken = session.accessToken ?? null;
+  _hadAuthUser = true;
   return linkCustomer(session.user.email ? session.user : { ...session.user, email: normalized }, name);
 }
 async function signOutCustomer() {
   try {
     await getCustomerAuthAdapter().signOut();
   } finally {
+    _accessToken = null;
+    _hadAuthUser = false;
     useSessionStore.getState().signOut();
   }
 }
@@ -129,7 +158,10 @@ function resolveConfig(config) {
     currency: config.currency ?? "BRL",
     locale: config.locale ?? "pt-BR",
     shipping: { flatRate: config.shipping?.flatRate ?? 0, freeAbove: config.shipping?.freeAbove },
-    payments: { mode: config.payments?.mode ?? "mock" },
+    payments: {
+      mode: config.payments?.mode ?? "mock",
+      methods: config.payments?.methods?.length ? config.payments.methods : ["pix", "credit_card", "cash"]
+    },
     commerceMode,
     enquiry: {
       label: config.enquiry?.label ?? "Contact me",
@@ -204,7 +236,7 @@ function matchPath(pattern, path) {
   return params;
 }
 function Link({ to, children, ...rest }) {
-  return React6.createElement("a", { href: `#${to}`, ...rest }, children);
+  return React7.createElement("a", { href: `#${to}`, ...rest }, children);
 }
 
 // src/format.ts
@@ -214,6 +246,87 @@ function formatMoney(value, currency = "BRL", locale = "pt-BR") {
 function roundCents(value) {
   return Math.round(value * 100) / 100;
 }
+var EMPTY = {
+  postalCode: "",
+  address: null,
+  options: [],
+  selectedZoneId: null,
+  status: "idle",
+  error: null
+};
+var useDeliveryStore = create()(
+  persist(
+    (set, get) => ({
+      ...EMPTY,
+      async resolve(postalCode, subtotal) {
+        const code = normalizePostalCode(postalCode);
+        if (code.length !== 8) {
+          set({ ...EMPTY, postalCode, status: "error", error: "Digite os 8 d\xEDgitos do CEP." });
+          return;
+        }
+        set({ postalCode: code, status: "loading", error: null });
+        let options = [];
+        try {
+          options = await getShopProvider().quoteShipping?.(code, subtotal) ?? [];
+        } catch {
+          set({
+            ...EMPTY,
+            postalCode: code,
+            status: "error",
+            error: "N\xE3o foi poss\xEDvel calcular o frete agora. Tente de novo."
+          });
+          return;
+        }
+        let address = null;
+        let notFound = false;
+        try {
+          address = await lookupPostalCode(code);
+          notFound = address === null;
+        } catch {
+          address = null;
+        }
+        set({
+          postalCode: code,
+          address,
+          options,
+          selectedZoneId: options[0]?.zoneId ?? null,
+          // A store with no zones configured quotes nothing, and that must NOT
+          // read as "we don't deliver here" — it falls back to the store-wide
+          // flat rate, which the cart already knows how to show.
+          status: options.length > 0 ? "served" : "unserved",
+          // Reported alongside the price, not instead of it: the CEP may be
+          // mistyped even though its range is covered.
+          error: notFound ? "CEP n\xE3o encontrado. Confira os n\xFAmeros." : null
+        });
+      },
+      selectZone(zoneId) {
+        if (get().options.some((option) => option.zoneId === zoneId)) set({ selectedZoneId: zoneId });
+      },
+      clear() {
+        set({ ...EMPTY });
+      }
+    }),
+    {
+      name: "fayz.storefront.delivery.v1",
+      // Deliberately NOT persisting `options`: a rehydrated
+      // price would be shown as current without anything having quoted it. The
+      // address survives, the money is asked for again.
+      partialize: (state) => ({ postalCode: state.postalCode, address: state.address }),
+      onRehydrateStorage: () => (state) => {
+        if (state?.address) state.status = "idle";
+      }
+    }
+  )
+);
+function resolveOptionRate(option, subtotal) {
+  if (option.freeAbove != null && subtotal >= option.freeAbove) return 0;
+  return option.baseRate;
+}
+var selectQuotedShipping = (state, subtotal) => {
+  if (state.status !== "served") return null;
+  const option = state.options.find((o) => o.zoneId === state.selectedZoneId) ?? state.options[0];
+  return option ? resolveOptionRate(option, subtotal) : null;
+};
 
 // src/product-options.ts
 function cleanValues(value) {
@@ -337,6 +450,8 @@ var selectDiscountTotal = (s) => roundCents(selectSubtotal(s) * (s.discountPerce
 var selectShipping = (s, cfg) => {
   if (s.lines.length === 0) return 0;
   const subtotal = selectSubtotal(s);
+  const quoted = selectQuotedShipping(useDeliveryStore.getState(), subtotal);
+  if (quoted != null) return quoted;
   if (cfg.shipping.freeAbove != null && subtotal >= cfg.shipping.freeAbove) return 0;
   return cfg.shipping.flatRate;
 };
@@ -435,7 +550,7 @@ function StorefrontThemeStyle({ theme }) {
     }
     link.href = fontsHref;
   }, [fontsHref]);
-  return React6.createElement("style", { "data-sf-theme": theme.name }, themeToCss(theme));
+  return React7.createElement("style", { "data-sf-theme": theme.name }, themeToCss(theme));
 }
 var initial = {
   search: "",
@@ -601,6 +716,9 @@ var TID = {
   pdpAddToCart: "pdp-add-to-cart",
   pdpRoot: "pdp-root",
   pdpGallery: "pdp-gallery",
+  pdpGalleryImage: "pdp-gallery-image",
+  pdpGalleryThumbs: "pdp-gallery-thumbs",
+  pdpGalleryThumb: "pdp-gallery-thumb",
   pdpActions: "pdp-actions",
   pdpEnquiryButton: "pdp-enquiry-button",
   enquiryForm: "enquiry-form",
@@ -629,6 +747,15 @@ var TID = {
   cartTotal: "cart-total",
   goCheckout: "go-checkout",
   cartEmpty: "cart-empty",
+  // delivery estimate (product page + cart)
+  deliveryEstimator: "delivery-estimator",
+  deliveryCepInput: "delivery-cep-input",
+  deliveryCepSubmit: "delivery-cep-submit",
+  deliveryOption: "delivery-option",
+  deliveryUnserved: "delivery-unserved",
+  deliveryError: "delivery-error",
+  deliveryAddress: "delivery-address",
+  deliveryClear: "delivery-clear",
   // checkout
   checkoutEmail: "checkout-email",
   checkoutName: "checkout-name",
@@ -1147,6 +1274,113 @@ function QuantityInput({ value, onChange, min = 1, max, testId, incTestId, decTe
     )
   ] });
 }
+function DeliveryEstimator({ compact = false }) {
+  const config = useStorefrontConfig();
+  const cart = useCartStore();
+  const delivery = useDeliveryStore();
+  const [draft, setDraft] = useState(() => formatPostalCode(delivery.postalCode));
+  const subtotal = selectSubtotal(cart);
+  const money = (value) => formatMoney(value, config.currency, config.locale);
+  const loading = delivery.status === "loading";
+  async function submit(event) {
+    event.preventDefault();
+    await delivery.resolve(draft, subtotal);
+  }
+  function eta(option) {
+    const { etaMinDays: min, etaMaxDays: max } = option;
+    if (min == null && max == null) return null;
+    if (min === 0 && (max === 0 || max === 1)) return "hoje ou amanh\xE3";
+    if (min != null && max != null && min !== max) return `${min} a ${max} dias \xFAteis`;
+    return `${max ?? min} dia(s) \xFAtil(eis)`;
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-testid": TID.deliveryEstimator,
+      className: compact ? "rounded-lg border p-3" : "mt-6 rounded-lg border p-4",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold", children: [
+          /* @__PURE__ */ jsx(Truck, { className: "h-4 w-4 text-primary" }),
+          "Calcular entrega"
+        ] }),
+        /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "mt-3 flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "data-testid": TID.deliveryCepInput,
+              "aria-label": "CEP",
+              inputMode: "numeric",
+              autoComplete: "postal-code",
+              placeholder: "00000-000",
+              value: draft,
+              onChange: (event) => setDraft(formatPostalCode(event.target.value)),
+              className: "min-w-0 flex-1 rounded-lg border bg-background px-3 py-2 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              "data-testid": TID.deliveryCepSubmit,
+              disabled: loading,
+              className: "shrink-0 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:opacity-90 disabled:opacity-50",
+              children: loading ? "..." : "Calcular"
+            }
+          )
+        ] }),
+        delivery.error && /* @__PURE__ */ jsx("p", { "data-testid": TID.deliveryError, className: "mt-3 text-sm text-destructive", children: delivery.error }),
+        delivery.address && /* @__PURE__ */ jsxs("p", { "data-testid": TID.deliveryAddress, className: "mt-3 flex items-start gap-1.5 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(MapPin, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            [delivery.address.street, delivery.address.district].filter(Boolean).join(", "),
+            delivery.address.street || delivery.address.district ? " \u2014 " : "",
+            delivery.address.city,
+            "/",
+            delivery.address.state
+          ] })
+        ] }),
+        delivery.status === "served" && /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-2", children: delivery.options.map((option) => {
+          const selected = delivery.selectedZoneId === option.zoneId;
+          const label = eta(option);
+          const rate = resolveOptionRate(option, subtotal);
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-testid": TID.deliveryOption,
+              "data-zone": option.zoneId,
+              "data-rate": rate.toFixed(2),
+              "aria-pressed": selected,
+              onClick: () => delivery.selectZone(option.zoneId),
+              className: `flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left text-sm transition ${selected ? "border-primary bg-primary/5" : "border-border hover:bg-muted/40"}`,
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: option.carrier ? `${option.carrier} \xB7 ${option.name}` : option.name }),
+                  label && /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: label })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 font-semibold", children: rate === 0 ? "Gr\xE1tis" : money(rate) })
+              ]
+            }
+          ) }, option.zoneId);
+        }) }),
+        delivery.status === "unserved" && /* @__PURE__ */ jsx("p", { "data-testid": TID.deliveryUnserved, className: "mt-3 text-sm text-destructive", children: "Ainda n\xE3o entregamos nesse CEP." }),
+        delivery.postalCode && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": TID.deliveryClear,
+            onClick: () => {
+              delivery.clear();
+              setDraft("");
+            },
+            className: "mt-3 text-xs text-muted-foreground underline-offset-2 hover:underline",
+            children: "Trocar CEP"
+          }
+        )
+      ]
+    }
+  );
+}
 function SmoothImage({
   imageLoading,
   loading = "lazy",
@@ -1164,9 +1398,9 @@ function SmoothImage({
   const durationMs = resolved.durationMs ?? 420;
   const easing = resolved.easing ?? "cubic-bezier(0.22, 1, 0.36, 1)";
   const blur = resolved.blur ?? true;
-  const ref = React6.useRef(null);
-  const [loaded, setLoaded] = React6.useState(mode === "none");
-  React6.useEffect(() => {
+  const ref = React7.useRef(null);
+  const [loaded, setLoaded] = React7.useState(mode === "none");
+  React7.useEffect(() => {
     if (mode === "none") {
       setLoaded(true);
       return;
@@ -1209,6 +1443,7 @@ function CartDrawer() {
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [cart.isOpen, cart.closeDrawer]);
+  const delivery = useDeliveryStore();
   const subtotal = selectSubtotal(cart);
   const discountTotal = selectDiscountTotal(cart);
   const shipping = selectShipping(cart, config);
@@ -1365,6 +1600,7 @@ function CartDrawer() {
                 ] }),
                 discountError && /* @__PURE__ */ jsx("p", { "data-testid": TID.discountError, className: "text-xs text-destructive", children: discountError })
               ] }),
+              /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(DeliveryEstimator, { compact: true }) }),
               /* @__PURE__ */ jsxs("dl", { className: "space-y-1.5 text-sm", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Subtotal" }),
@@ -1394,7 +1630,13 @@ function CartDrawer() {
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-                  /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Frete" }),
+                  /* @__PURE__ */ jsxs("dt", { className: "text-muted-foreground", children: [
+                    "Frete",
+                    delivery.status === "served" && delivery.postalCode && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-xs", children: [
+                      "\xB7 ",
+                      formatPostalCode(delivery.postalCode)
+                    ] })
+                  ] }),
                   /* @__PURE__ */ jsx("dd", { "data-testid": TID.cartShipping, "data-price": shipping.toFixed(2), children: shipping === 0 ? "Gr\xE1tis" : money(shipping) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "flex justify-between border-t pt-2 text-base font-semibold", children: [
@@ -2737,6 +2979,128 @@ function ProductEnquiryForm({ product, onSuccess }) {
     }
   );
 }
+function ProductGallery({ product, images, primaryImage }) {
+  const ordered = orderImages(images, primaryImage);
+  const [index, setIndex] = useState(0);
+  const [zoom, setZoom] = useState(null);
+  const frameRef = useRef(null);
+  const canHover = useCanHover();
+  useEffect(() => {
+    setIndex(0);
+    setZoom(null);
+  }, [product.id]);
+  const current = ordered[Math.min(index, ordered.length - 1)];
+  function trackPointer(event) {
+    if (!canHover) return;
+    const frame = frameRef.current;
+    if (!frame) return;
+    const rect = frame.getBoundingClientRect();
+    setZoom({
+      x: (event.clientX - rect.left) / rect.width * 100,
+      y: (event.clientY - rect.top) / rect.height * 100
+    });
+  }
+  function step(delta) {
+    if (ordered.length < 2) return;
+    setIndex((current2) => (current2 + delta + ordered.length) % ordered.length);
+    setZoom(null);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 self-start", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...storefrontComponentContracts.productDetail.gallery,
+        ref: frameRef,
+        className: "group relative aspect-square w-full overflow-hidden border bg-muted",
+        style: { borderRadius: "var(--sf-radius-card)" },
+        onMouseMove: trackPointer,
+        onMouseLeave: () => setZoom(null),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowRight") step(1);
+          if (event.key === "ArrowLeft") step(-1);
+        },
+        tabIndex: ordered.length > 1 ? 0 : -1,
+        role: ordered.length > 1 ? "group" : void 0,
+        "aria-label": ordered.length > 1 ? `Imagens de ${product.name}` : void 0,
+        children: [
+          current && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full w-full transition-transform duration-150 ease-out",
+              style: zoom ? { transform: "scale(2)", transformOrigin: `${zoom.x}% ${zoom.y}%` } : { transform: "scale(1)" },
+              children: /* @__PURE__ */ jsx(
+                SmoothImage,
+                {
+                  src: current.url,
+                  alt: current.altText ?? product.name,
+                  "data-testid": TID.pdpGalleryImage,
+                  className: "h-full w-full object-cover"
+                },
+                current.id
+              )
+            }
+          ),
+          ordered.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(GalleryArrow, { side: "left", onClick: () => step(-1) }),
+            /* @__PURE__ */ jsx(GalleryArrow, { side: "right", onClick: () => step(1) }),
+            /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute bottom-3 right-3 rounded-full bg-black/60 px-2 py-0.5 text-[11px] font-medium text-white", children: [
+              index + 1,
+              "/",
+              ordered.length
+            ] })
+          ] })
+        ]
+      }
+    ),
+    ordered.length > 1 && /* @__PURE__ */ jsx("ul", { "data-testid": TID.pdpGalleryThumbs, className: "flex gap-2 overflow-x-auto pb-1", children: ordered.map((image, position) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-testid": TID.pdpGalleryThumb,
+        "data-index": position,
+        "aria-label": `Imagem ${position + 1} de ${ordered.length}`,
+        "aria-current": position === index,
+        onClick: () => {
+          setIndex(position);
+          setZoom(null);
+        },
+        className: `h-16 w-16 shrink-0 overflow-hidden rounded-lg border transition ${position === index ? "border-primary ring-2 ring-primary/20" : "border-border opacity-70 hover:opacity-100"}`,
+        children: /* @__PURE__ */ jsx("img", { src: image.url, alt: "", className: "h-full w-full object-cover", loading: "lazy" })
+      }
+    ) }, image.id)) })
+  ] });
+}
+function orderImages(images, primary) {
+  const all = images.length > 0 ? images : primary ? [primary] : [];
+  return [...all].sort((a, b) => {
+    if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
+    return (a.sortOrder ?? 0) - (b.sortOrder ?? 0);
+  });
+}
+function useCanHover() {
+  const [canHover, setCanHover] = useState(false);
+  useEffect(() => {
+    const query = window.matchMedia?.("(hover: hover) and (pointer: fine)");
+    if (!query) return;
+    setCanHover(query.matches);
+    const onChange = (event) => setCanHover(event.matches);
+    query.addEventListener?.("change", onChange);
+    return () => query.removeEventListener?.("change", onChange);
+  }, []);
+  return canHover;
+}
+function GalleryArrow({ side, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": side === "left" ? "Imagem anterior" : "Pr\xF3xima imagem",
+      className: `absolute top-1/2 z-10 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-background/80 opacity-0 shadow-md backdrop-blur transition hover:bg-background focus:opacity-100 group-hover:opacity-100 ${side === "left" ? "left-3" : "right-3"}`,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-lg leading-none", children: side === "left" ? "\u2039" : "\u203A" })
+    }
+  );
+}
 function ProductDetailPage({ slug: slug2 }) {
   const config = useStorefrontConfig();
   const actions = useStorefrontActions();
@@ -2777,6 +3141,7 @@ function ProductDetailPage({ slug: slug2 }) {
   const image = product.images.find((i) => i.isPrimary) ?? product.images[0];
   const components = getStorefrontComponents(config);
   const ProductDetailComponent = components.ProductDetail;
+  const GalleryComponent = components.ProductGallery ?? ProductGallery;
   const addToCart = () => addItem(product, qty, selectedOptions);
   const openEnquiry = () => {
     document.getElementById("storefront-product-enquiry")?.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -2810,19 +3175,13 @@ function ProductDetailPage({ slug: slug2 }) {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid animate-fade-up gap-10 md:grid-cols-2", children: [
       /* @__PURE__ */ jsx(
-        "div",
+        GalleryComponent,
         {
-          ...storefrontComponentContracts.productDetail.gallery,
-          className: "group overflow-hidden border bg-muted",
-          style: { borderRadius: "var(--sf-radius-card)" },
-          children: image && /* @__PURE__ */ jsx(
-            SmoothImage,
-            {
-              src: image.url,
-              alt: image.altText ?? product.name,
-              className: "aspect-square w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
-            }
-          )
+          product,
+          images: product.images,
+          primaryImage: image,
+          config,
+          commerceMode: config.commerceMode
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col py-2 lg:sticky lg:top-24 lg:self-start", children: [
@@ -2920,6 +3279,7 @@ function ProductDetailPage({ slug: slug2 }) {
             children: "Voltar ao cat\xE1logo"
           }
         ) }),
+        config.commerceMode === "checkout" && /* @__PURE__ */ jsx(DeliveryEstimator, {}),
         config.commerceMode === "checkout" && /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-3 gap-3 border-t pt-6 text-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [
             /* @__PURE__ */ jsx(Truck, { className: "h-5 w-5 text-primary" }),
@@ -2945,9 +3305,10 @@ function ProductDetailPage({ slug: slug2 }) {
     /* @__PURE__ */ jsx(RelatedProducts, { product })
   ] });
 }
-function formatDeliveryNotes(address) {
+function formatDeliveryNotes(address, shippingAddress) {
+  if (address?.notes?.trim()) return address.notes.trim();
+  if (shippingAddress) return void 0;
   if (!address) return void 0;
-  if (address.notes?.trim()) return address.notes.trim();
   const parts = [address.street, address.city, address.zip].map((part) => part?.trim()).filter(Boolean);
   return parts.length > 0 ? `Entrega: ${parts.join(", ")}` : void 0;
 }
@@ -2957,6 +3318,8 @@ async function placeStorefrontOrder({
   session,
   customer,
   address,
+  shippingAddress,
+  paymentMethod,
   markPaid = false
 }) {
   const email = customer.email.trim().toLowerCase();
@@ -2971,9 +3334,14 @@ async function placeStorefrontOrder({
     customerId: customerId ?? void 0,
     customer: { name, email },
     currency: config.currency,
-    notes: formatDeliveryNotes(address),
+    notes: formatDeliveryNotes(address, shippingAddress),
     discountCode: cart.discountCode ?? void 0,
     shippingTotal: selectShipping(cart, config),
+    // Structured address + method are what populate public.addresses and the
+    // transactions ledger. `notes` stays for backwards compatibility with
+    // checkouts that have not been updated yet.
+    shippingAddress,
+    paymentMethod,
     items: cart.lines.map((line) => ({
       productId: line.productId,
       quantity: line.quantity,
@@ -3096,19 +3464,18 @@ function SignInModal({ defaultEmail = "", onClose, onSignedIn }) {
     }
   );
 }
-var SAVED_ADDRESSES = [
-  { id: "home", label: "Casa", street: "Rua das Flores, 123", city: "S\xE3o Paulo", zip: "01310-100" }
-];
-var SAVED_PAYMENT_METHODS = [
-  { id: "visa", label: "Visa final 4242", card: "4242 4242 4242 4242", expiry: "12/29", cvc: "123" }
-];
+var PAYMENT_LABELS = {
+  pix: { label: "Pix", hint: "Voc\xEA recebe a chave para pagar ap\xF3s confirmar o pedido" },
+  credit_card: { label: "Cart\xE3o de cr\xE9dito", hint: "Maquininha na entrega" },
+  debit_card: { label: "Cart\xE3o de d\xE9bito", hint: "Maquininha na entrega" },
+  boleto: { label: "Boleto", hint: "Enviado por e-mail ap\xF3s a confirma\xE7\xE3o" },
+  cash: { label: "Dinheiro", hint: "Pagamento na entrega" },
+  other: { label: "Combinar com a loja", hint: "A loja entra em contato para acertar o pagamento" }
+};
 var PROCESSING_STEPS = [
   { icon: Lock, label: "Validando seus dados..." },
-  { icon: CreditCard, label: "Processando pagamento..." },
-  { icon: PackageCheck, label: "Confirmando seu pedido..." }
+  { icon: PackageCheck, label: "Registrando seu pedido..." }
 ];
-var DEFAULT_ADDRESS = SAVED_ADDRESSES[0];
-var DEFAULT_PAYMENT = SAVED_PAYMENT_METHODS[0];
 var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 function ProcessingOverlay({ step }) {
   const current = PROCESSING_STEPS[Math.min(step, PROCESSING_STEPS.length - 1)];
@@ -3151,23 +3518,24 @@ function CheckoutPage() {
   const config = useStorefrontConfig();
   const cart = useCartStore();
   const session = useSessionStore();
+  const delivery = useDeliveryStore();
   const validateDiscount2 = useDiscountValidator();
   useStorefrontHead({ title: `Checkout \u2014 ${config.name}` });
-  const [selectedAddressId, setSelectedAddressId] = useState(DEFAULT_ADDRESS.id);
-  const [selectedPaymentId, setSelectedPaymentId] = useState(DEFAULT_PAYMENT.id);
-  const [savedAddresses, setSavedAddresses] = useState(SAVED_ADDRESSES);
-  const [savedPaymentMethods, setSavedPaymentMethods] = useState(SAVED_PAYMENT_METHODS);
-  const [addressMode, setAddressMode] = useState("saved");
-  const [paymentMode, setPaymentMode] = useState("saved");
+  const paymentMethods = config.payments.methods;
+  const [selectedAddressId, setSelectedAddressId] = useState("new");
+  const [savedAddresses, setSavedAddresses] = useState([]);
+  const [addressMode, setAddressMode] = useState("new");
+  const [paymentMethod, setPaymentMethod] = useState(paymentMethods[0] ?? "pix");
   const [form, setForm] = useState({
     email: session.email ?? "",
     name: session.name ?? "",
-    street: DEFAULT_ADDRESS.street,
-    city: DEFAULT_ADDRESS.city,
-    zip: DEFAULT_ADDRESS.zip,
-    card: DEFAULT_PAYMENT.card,
-    expiry: DEFAULT_PAYMENT.expiry,
-    cvc: DEFAULT_PAYMENT.cvc
+    street: "",
+    city: "",
+    zip: "",
+    number: "",
+    complement: "",
+    district: "",
+    state: ""
   });
   const [error, setError] = useState(null);
   const [discountCode, setDiscountCode] = useState("");
@@ -3177,6 +3545,7 @@ function CheckoutPage() {
   const [placing, setPlacing] = useState(false);
   const [processingStep, setProcessingStep] = useState(0);
   const [showSignin, setShowSignin] = useState(false);
+  const [zipLookup, setZipLookup] = useState("idle");
   const subtotal = selectSubtotal(cart);
   const discountTotal = selectDiscountTotal(cart);
   const shipping = selectShipping(cart, config);
@@ -3186,6 +3555,32 @@ function CheckoutPage() {
     if (cart.lines.length === 0 && !placing) navigateTo(config.catalogPath);
   }, [cart.lines.length, config.catalogPath, placing]);
   const set = (key) => (value) => setForm((current) => ({ ...current, [key]: value }));
+  async function setZip(value) {
+    const masked = formatPostalCode(value);
+    setForm((current) => ({ ...current, zip: masked }));
+    if (normalizePostalCode(masked).length !== 8) {
+      setZipLookup("idle");
+      return;
+    }
+    setZipLookup("loading");
+    try {
+      const found = await lookupPostalCode(masked);
+      if (!found) {
+        setZipLookup("not-found");
+        return;
+      }
+      setZipLookup("found");
+      setForm((current) => ({
+        ...current,
+        street: found.street || current.street,
+        district: found.district || current.district,
+        city: found.city,
+        state: found.state
+      }));
+    } catch {
+      setZipLookup("idle");
+    }
+  }
   async function applyDiscountCode() {
     setApplyingDiscount(true);
     setDiscountError(null);
@@ -3212,10 +3607,54 @@ function CheckoutPage() {
     setDiscountSuccess(null);
     setDiscountError(null);
   }
+  useEffect(() => {
+    const customerId = session.customerId;
+    if (!customerId) {
+      setSavedAddresses([]);
+      setAddressMode("new");
+      return;
+    }
+    let cancelled = false;
+    const provider = getShopProvider();
+    void provider.listCustomerAddresses?.(customerId).then((addresses) => {
+      if (cancelled || addresses.length === 0) return;
+      setSavedAddresses(addresses);
+      applySavedAddress(addresses[0]);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [session.customerId]);
+  useEffect(() => {
+    if (addressMode !== "new") return;
+    const looked = delivery.address;
+    if (!looked) return;
+    setForm((current) => {
+      if (current.zip.trim() || current.street.trim()) return current;
+      return {
+        ...current,
+        zip: formatPostalCode(looked.postalCode),
+        street: looked.street,
+        district: looked.district,
+        city: looked.city,
+        state: looked.state
+      };
+    });
+  }, [delivery.address, addressMode]);
   function applySavedAddress(address) {
     setAddressMode("saved");
     setSelectedAddressId(address.id);
-    setForm((current) => ({ ...current, street: address.street, city: address.city, zip: address.zip }));
+    setForm((current) => ({
+      ...current,
+      street: address.street,
+      city: address.city,
+      zip: address.postalCode,
+      number: address.number ?? "",
+      complement: address.complement ?? "",
+      district: address.district ?? "",
+      state: address.state
+    }));
   }
   function selectAddress(addressId) {
     const address = savedAddresses.find((item) => item.id === addressId);
@@ -3224,37 +3663,7 @@ function CheckoutPage() {
   function addNewAddress() {
     setAddressMode("new");
     setSelectedAddressId("new");
-    setForm((current) => ({ ...current, street: "", city: "", zip: "" }));
-  }
-  function removeAddress(addressId) {
-    const nextAddresses = savedAddresses.filter((item) => item.id !== addressId);
-    setSavedAddresses(nextAddresses);
-    if (selectedAddressId !== addressId) return;
-    const fallback = nextAddresses[0];
-    if (fallback) applySavedAddress(fallback);
-    else addNewAddress();
-  }
-  function applySavedPayment(method) {
-    setPaymentMode("saved");
-    setSelectedPaymentId(method.id);
-    setForm((current) => ({ ...current, card: method.card, expiry: method.expiry, cvc: method.cvc }));
-  }
-  function selectPayment(paymentId) {
-    const method = savedPaymentMethods.find((item) => item.id === paymentId);
-    if (method) applySavedPayment(method);
-  }
-  function addNewPayment() {
-    setPaymentMode("new");
-    setSelectedPaymentId("new");
-    setForm((current) => ({ ...current, card: "", expiry: "", cvc: "" }));
-  }
-  function removePayment(paymentId) {
-    const nextMethods = savedPaymentMethods.filter((item) => item.id !== paymentId);
-    setSavedPaymentMethods(nextMethods);
-    if (selectedPaymentId !== paymentId) return;
-    const fallback = nextMethods[0];
-    if (fallback) applySavedPayment(fallback);
-    else addNewPayment();
+    setForm((current) => ({ ...current, street: "", city: "", zip: "", number: "", complement: "", district: "", state: "" }));
   }
   function validate() {
     setError(null);
@@ -3266,12 +3675,20 @@ function CheckoutPage() {
       setError("Informe seu nome completo.");
       return false;
     }
-    if (!form.street.trim() || !form.city.trim() || !form.zip.trim()) {
+    if (!form.street.trim() || !form.city.trim() || !form.zip.trim() || !form.district.trim()) {
       setError("Preencha ou selecione o endere\xE7o de entrega.");
       return false;
     }
-    if (!/^\d{16}$/.test(form.card.replace(/\s+/g, "")) || !form.expiry.trim() || !form.cvc.trim()) {
-      setError("Selecione ou preencha um m\xE9todo de pagamento v\xE1lido.");
+    if (!form.number.trim()) {
+      setError("Falta o n\xFAmero do endere\xE7o.");
+      return false;
+    }
+    if (form.state.trim().length !== 2) {
+      setError("Informe a UF com duas letras (ex.: RJ).");
+      return false;
+    }
+    if (delivery.status === "unserved" && delivery.postalCode === normalizePostalCode(form.zip)) {
+      setError("Ainda n\xE3o entregamos nesse CEP. Tente outro endere\xE7o.");
       return false;
     }
     return true;
@@ -3293,9 +3710,22 @@ function CheckoutPage() {
         session,
         customer: { email: form.email, name: form.name },
         address: { street: form.street, city: form.city, zip: form.zip },
-        // Demo only: mock mode instantly approves. Real Pix/Mercado Pago (M4)
-        // leaves the order pending until the payment webhook confirms.
-        markPaid: config.payments.mode === "mock"
+        shippingAddress: {
+          postalCode: form.zip.trim(),
+          street: form.street.trim(),
+          number: form.number.trim() || void 0,
+          complement: form.complement.trim() || void 0,
+          district: form.district.trim() || void 0,
+          city: form.city.trim(),
+          state: form.state.trim().toUpperCase()
+        },
+        // The method the buyer actually chose, which opens the ledger row in
+        // public.transactions with the right kind.
+        paymentMethod
+        // Never marked paid from the browser. It used to be, through an RPC that
+        // was granted to anon — so any buyer holding their own order id could
+        // declare it settled. The order is now born `pending` and only the
+        // merchant (or a PSP webhook) can confirm the money arrived.
       });
       await minDuration;
       cart.clear();
@@ -3368,35 +3798,25 @@ function CheckoutPage() {
           /* @__PURE__ */ jsxs("section", { children: [
             /* @__PURE__ */ jsx("h2", { className: "mb-3 text-xl font-semibold tracking-tight", children: "Endere\xE7o de entrega" }),
             /* @__PURE__ */ jsxs("div", { className: "mb-3 grid gap-3", children: [
-              savedAddresses.map((address) => /* @__PURE__ */ jsxs(
+              savedAddresses.map((address) => /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: `group relative rounded-lg border p-3 pr-11 text-left text-sm transition hover:bg-muted/40 ${selectedAddressId === address.id ? "border-primary bg-primary/5" : "border-border bg-background"}`,
-                  children: [
-                    /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => selectAddress(address.id), className: "block w-full text-left", children: [
-                      /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-3 font-semibold", children: [
-                        address.label,
-                        addressMode === "saved" && selectedAddressId === address.id && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-bold text-primary", children: "Selecionado" })
-                      ] }),
-                      /* @__PURE__ */ jsx("span", { className: "mt-1 block text-muted-foreground", children: address.street }),
-                      /* @__PURE__ */ jsxs("span", { className: "block text-muted-foreground", children: [
-                        address.city,
-                        " - ",
-                        address.zip
-                      ] })
+                  children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => selectAddress(address.id), className: "block w-full text-left", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-3 font-semibold", children: [
+                      address.label,
+                      addressMode === "saved" && selectedAddressId === address.id && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-bold text-primary", children: "Selecionado" })
                     ] }),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => removeAddress(address.id),
-                        className: "absolute right-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground opacity-0 transition hover:bg-destructive/10 hover:text-destructive focus:opacity-100 group-hover:opacity-100",
-                        "aria-label": `Remover endere\xE7o ${address.label}`,
-                        title: "Remover endere\xE7o",
-                        children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
-                      }
-                    )
-                  ]
+                    /* @__PURE__ */ jsxs("span", { className: "mt-1 block text-muted-foreground", children: [
+                      [address.street, address.number].filter(Boolean).join(", "),
+                      address.complement ? ` \u2014 ${address.complement}` : ""
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "block text-muted-foreground", children: [
+                      [address.district, address.city, address.state].filter(Boolean).join(" \xB7 "),
+                      " \u2014 ",
+                      address.postalCode
+                    ] })
+                  ] })
                 },
                 address.id
               )),
@@ -3407,83 +3827,62 @@ function CheckoutPage() {
                   onClick: addNewAddress,
                   className: `rounded-lg border border-dashed p-3 text-left text-sm transition hover:bg-muted/40 ${addressMode === "new" ? "border-primary bg-primary/5" : "border-border bg-muted/20"}`,
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "block font-semibold text-primary", children: "+ Adicionar novo endere\xE7o" }),
+                    /* @__PURE__ */ jsx("span", { className: "block font-semibold text-primary", children: savedAddresses.length > 0 ? "+ Adicionar novo endere\xE7o" : "Informe o endere\xE7o de entrega" }),
                     /* @__PURE__ */ jsx("span", { className: "mt-1 block text-muted-foreground", children: "Preencher outro endere\xE7o para esta compra" })
                   ]
                 }
               )
             ] }),
             addressMode === "new" && /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-              field("Endere\xE7o", TID.checkoutStreet, form.street, set("street"), { placeholder: "Endere\xE7o" }),
-              /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-[1fr_160px]", children: [
-                field("Cidade", TID.checkoutCity, form.city, set("city"), { placeholder: "Cidade" }),
-                field("CEP", TID.checkoutZip, form.zip, set("zip"), { placeholder: "CEP" })
-              ] })
+              /* @__PURE__ */ jsxs("div", { className: "grid gap-1 sm:grid-cols-[200px_1fr] sm:items-center", children: [
+                field("CEP", TID.checkoutZip, form.zip, setZip, {
+                  placeholder: "CEP",
+                  inputMode: "numeric",
+                  autoComplete: "postal-code"
+                }),
+                /* @__PURE__ */ jsx("p", { className: "px-1 text-xs text-muted-foreground", children: zipLookup === "loading" ? "Buscando endere\xE7o\u2026" : zipLookup === "not-found" ? "CEP n\xE3o encontrado \u2014 preencha o endere\xE7o \xE0 m\xE3o." : "Preenchemos o endere\xE7o para voc\xEA." })
+              ] }),
+              field("Endere\xE7o", TID.checkoutStreet, form.street, set("street"), { placeholder: "Rua, avenida\u2026" }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+                field("N\xFAmero", "checkout-number", form.number, set("number"), { placeholder: "N\xFAmero" }),
+                field("Complemento", "checkout-complement", form.complement, set("complement"), { placeholder: "Apto, bloco (opcional)" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+                field("Bairro", "checkout-district", form.district, set("district"), { placeholder: "Bairro" }),
+                field("UF", "checkout-state", form.state, set("state"), { placeholder: "UF" })
+              ] }),
+              field("Cidade", TID.checkoutCity, form.city, set("city"), { placeholder: "Cidade" })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("section", { children: [
             /* @__PURE__ */ jsx("h2", { className: "mb-3 text-xl font-semibold tracking-tight", children: "Pagamento" }),
-            /* @__PURE__ */ jsxs("div", { className: "mb-3 grid gap-3", children: [
-              savedPaymentMethods.map((method) => /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: `group relative rounded-lg border p-3 pr-11 text-left text-sm transition hover:bg-muted/40 ${selectedPaymentId === method.id ? "border-primary bg-primary/5" : "border-border bg-background"}`,
-                  children: [
-                    /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => selectPayment(method.id), className: "block w-full text-left", children: [
-                      /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-3 font-semibold", children: [
-                        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                          /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
-                          method.label
-                        ] }),
-                        paymentMode === "saved" && selectedPaymentId === method.id && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-bold text-primary", children: "Selecionado" })
-                      ] }),
-                      /* @__PURE__ */ jsxs("span", { className: "mt-1 block text-muted-foreground", children: [
-                        "Expira em ",
-                        method.expiry
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => removePayment(method.id),
-                        className: "absolute right-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground opacity-0 transition hover:bg-destructive/10 hover:text-destructive focus:opacity-100 group-hover:opacity-100",
-                        "aria-label": `Remover cart\xE3o ${method.label}`,
-                        title: "Remover cart\xE3o",
-                        children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
-                      }
-                    )
-                  ]
-                },
-                method.id
-              )),
-              /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("div", { className: "mb-3 grid gap-3", role: "radiogroup", "aria-label": "Forma de pagamento", children: paymentMethods.map((method) => {
+              const copy = PAYMENT_LABELS[method];
+              const selected = paymentMethod === method;
+              return /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: addNewPayment,
-                  className: `rounded-lg border border-dashed p-3 text-left text-sm transition hover:bg-muted/40 ${paymentMode === "new" ? "border-primary bg-primary/5" : "border-border bg-muted/20"}`,
+                  role: "radio",
+                  "aria-checked": selected,
+                  "data-testid": `checkout-payment-${method}`,
+                  onClick: () => setPaymentMethod(method),
+                  className: `rounded-lg border p-3 text-left text-sm transition hover:bg-muted/40 ${selected ? "border-primary bg-primary/5" : "border-border bg-background"}`,
                   children: [
-                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 font-semibold text-primary", children: [
-                      /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
-                      "+ Adicionar novo cart\xE3o"
+                    /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-3 font-semibold", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
+                        copy.label
+                      ] }),
+                      selected && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-bold text-primary", children: "Selecionado" })
                     ] }),
-                    /* @__PURE__ */ jsx("span", { className: "mt-1 block text-muted-foreground", children: "Usar outro cart\xE3o nesta compra" })
+                    /* @__PURE__ */ jsx("span", { className: "mt-1 block text-muted-foreground", children: copy.hint })
                   ]
-                }
-              )
-            ] }),
-            paymentMode === "new" && /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-              field("N\xFAmero do cart\xE3o", TID.checkoutCard, form.card, set("card"), {
-                placeholder: "N\xFAmero do cart\xE3o",
-                inputMode: "numeric"
-              }),
-              /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
-                field("Validade", TID.checkoutExpiry, form.expiry, set("expiry"), { placeholder: "MM/AA" }),
-                field("CVC", TID.checkoutCvc, form.cvc, set("cvc"), { placeholder: "CVC", inputMode: "numeric" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Pagamento de demonstra\xE7\xE3o - nenhuma cobran\xE7a \xE9 feita." })
+                },
+                method
+              );
+            }) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Nenhuma cobran\xE7a \xE9 feita agora. Seu pedido \xE9 registrado e a loja confirma o pagamento." })
           ] }),
           error && /* @__PURE__ */ jsx("p", { "data-testid": TID.checkoutError, className: "rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive", children: error })
         ] }),
@@ -4307,7 +4706,7 @@ function PolicyPage({ kind }) {
     ] }) })
   ] });
 }
-var StorefrontErrorBoundary = class extends React6.Component {
+var StorefrontErrorBoundary = class extends React7.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -4602,9 +5001,9 @@ function manifestToStorefrontConfig(manifest, surfaceName) {
   };
 }
 function StorefrontScaffold({ manifest, surface }) {
-  const config = React6.useMemo(() => manifestToStorefrontConfig(manifest, surface), [manifest, surface]);
-  const resolved = React6.useMemo(() => resolveConfig(config), [config]);
-  const inited = React6.useRef(false);
+  const config = React7.useMemo(() => manifestToStorefrontConfig(manifest, surface), [manifest, surface]);
+  const resolved = React7.useMemo(() => resolveConfig(config), [config]);
+  const inited = React7.useRef(false);
   if (!inited.current) {
     initStorefrontRuntime(config);
     inited.current = true;