@fayz-ai/storefront 0.7.0 → 0.8.2

package/src/components/ProductGallery.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useRef, useState } from 'react'
+import type { ProductImage } from '@fayz-ai/shop/types'
+import type { ProductGalleryProps } from '../component-contracts'
+import { SmoothImage } from './SmoothImage'
+import { TID } from '../testids'
+import { storefrontComponentContracts } from '../component-selectors'
+
+/**
+ * Product gallery: one framed image, hover-to-zoom, and a thumbnail strip when
+ * the product has more than one photo.
+ *
+ * It replaces a bare <img> that rendered only the primary image. Three things
+ * were wrong with that:
+ *
+ *   · the frame was a grid child with the default `stretch`, so it grew to the
+ *     height of the (much taller) details column and left a slab of empty dark
+ *     box under a square photo;
+ *   · `plg_shop_product_images` has always been a collection with sort_order and
+ *     is_primary, and every extra photo a merchant uploaded was invisible;
+ *   · zooming is table stakes for anything sold by its looks — food especially.
+ *
+ * Zoom is pointer-driven: the transform origin follows the cursor, so the part
+ * under the pointer is the part magnified. Disabled on coarse pointers, where
+ * there is no hover and a stuck 2× would just be a broken image.
+ */
+export function ProductGallery({ product, images, primaryImage }: ProductGalleryProps) {
+  const ordered = orderImages(images, primaryImage)
+  const [index, setIndex] = useState(0)
+  const [zoom, setZoom] = useState<{ x: number; y: number } | null>(null)
+  const frameRef = useRef<HTMLDivElement>(null)
+  const canHover = useCanHover()
+
+  // A different product (client-side navigation) must not keep the previous
+  // product's selected slide.
+  useEffect(() => { setIndex(0); setZoom(null) }, [product.id])
+
+  const current = ordered[Math.min(index, ordered.length - 1)]
+
+  function trackPointer(event: React.MouseEvent<HTMLDivElement>) {
+    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: number) {
+    if (ordered.length < 2) return
+    setIndex((current) => (current + delta + ordered.length) % ordered.length)
+    setZoom(null)
+  }
+
+  return (
+    <div className="flex flex-col gap-3 self-start">
+      <div
+        {...storefrontComponentContracts.productDetail.gallery}
+        ref={frameRef}
+        // `self-start` above and a fixed aspect here: the frame is sized by the
+        // image, never by whatever the column beside it happens to contain.
+        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' : undefined}
+        aria-label={ordered.length > 1 ? `Imagens de ${product.name}` : undefined}
+      >
+        {/*
+          The transform lives on a wrapper, not on the image: SmoothImage writes
+          its own inline `transition` for the load fade (SmoothImage.tsx:52,
+          spread AFTER any style passed in), which would have stretched the zoom
+          to 420ms and left it visibly lagging the cursor.
+        */}
+        {current && (
+          <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)' }}
+          >
+            <SmoothImage
+              key={current.id}
+              src={current.url}
+              alt={current.altText ?? product.name}
+              data-testid={TID.pdpGalleryImage}
+              className="h-full w-full object-cover"
+            />
+          </div>
+        )}
+
+        {ordered.length > 1 && (
+          <>
+            <GalleryArrow side="left" onClick={() => step(-1)} />
+            <GalleryArrow side="right" onClick={() => step(1)} />
+            <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">
+              {index + 1}/{ordered.length}
+            </span>
+          </>
+        )}
+      </div>
+
+      {ordered.length > 1 && (
+        <ul data-testid={TID.pdpGalleryThumbs} className="flex gap-2 overflow-x-auto pb-1">
+          {ordered.map((image, position) => (
+            <li key={image.id}>
+              <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'
+                }`}
+              >
+                <img src={image.url} alt="" className="h-full w-full object-cover" loading="lazy" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+/** Primary first, then sort_order — the order the merchant set in the admin. */
+function orderImages(images: ProductImage[], primary?: ProductImage): ProductImage[] {
+  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)
+  })
+}
+
+/**
+ * Whether the device actually has a hover-capable pointer. On a phone every
+ * element is permanently "hovered" by some emulations, which would leave the
+ * photo stuck at 2× with no way back.
+ */
+function useCanHover(): boolean {
+  const [canHover, setCanHover] = useState(false)
+  useEffect(() => {
+    const query = window.matchMedia?.('(hover: hover) and (pointer: fine)')
+    if (!query) return
+    setCanHover(query.matches)
+    const onChange = (event: MediaQueryListEvent) => setCanHover(event.matches)
+    query.addEventListener?.('change', onChange)
+    return () => query.removeEventListener?.('change', onChange)
+  }, [])
+  return canHover
+}
+
+function GalleryArrow({ side, onClick }: { side: 'left' | 'right'; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={side === 'left' ? 'Imagem anterior' : 'Próxima 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'
+      }`}
+    >
+      <span aria-hidden className="text-lg leading-none">{side === 'left' ? '‹' : '›'}</span>
+    </button>
+  )
+}

package/src/components/StorefrontHeader.tsx

@@ -99,24 +99,48 @@ function UtilityBar() {
   )
 }
 
-function SearchInput({ className }: { className?: string }) {
+function SearchInput({ className, iconOnly = false }: { className?: string; iconOnly?: boolean }) {
   const config = useStorefrontConfig()
   const search = useCatalogStore((s) => s.search)
   const setSearch = useCatalogStore((s) => s.setSearch)
   const path = useHashPath()
+  const [open, setOpen] = useState(false)
+
+  // Icon-only: a compact search button that expands into the input on click and
+  // collapses again on Escape / blur-when-empty.
+  if (iconOnly && !open) {
+    return (
+      <button
+        type="button"
+        aria-label="Buscar produtos"
+        data-testid={TID.headerSearchToggle}
+        onClick={() => setOpen(true)}
+        className="rounded-full p-2.5 transition-opacity hover:opacity-70"
+      >
+        <Search className="h-5 w-5" />
+      </button>
+    )
+  }
 
   return (
-    <div className={`relative ${className ?? ''}`}>
+    <div className={`relative ${iconOnly ? 'w-full max-w-xs' : (className ?? '')}`}>
       <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-60" />
       <input
         data-testid={TID.headerSearch}
         type="search"
         placeholder="Buscar produtos..."
         value={search}
+        autoFocus={iconOnly}
         onChange={(e) => {
           setSearch(e.target.value)
           if (path !== config.catalogPath) navigateTo(config.catalogPath)
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape' && iconOnly) setOpen(false)
+        }}
+        onBlur={() => {
+          if (iconOnly && !search) setOpen(false)
+        }}
         className="w-full border bg-white/10 py-2 pl-9 pr-4 text-sm outline-none transition-colors placeholder:opacity-60 focus:border-primary focus:bg-white focus:text-gray-900"
         style={{
           borderRadius: 'var(--sf-radius-input)',
@@ -277,6 +301,7 @@ export function StorefrontHeader() {
   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 logo = (
     <Link to="/" className="sf-heading shrink-0 text-xl font-bold tracking-tight">
       {config.logo ?? config.name}
@@ -295,7 +320,7 @@ export function StorefrontHeader() {
         // Rio/Flex pattern: centered logo row, nav row below
         <>
           <div className="mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6">
-            {showSearch ? <SearchInput className="hidden w-full max-w-xs sm:block" /> : <div />}
+            {showSearch ? <SearchInput iconOnly={iconSearch} className="hidden w-full max-w-xs sm:block" /> : <div />}
             <div className="text-center">{logo}</div>
             <div className="justify-self-end">
               <HeaderActions />
@@ -309,7 +334,7 @@ export function StorefrontHeader() {
         // Brasília pattern: prominent search left, logo center, actions right; nav row below
         <>
           <div className="mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center gap-6 px-4 sm:px-6">
-            {showSearch ? <SearchInput className="hidden w-full max-w-sm sm:block" /> : <div />}
+            {showSearch ? <SearchInput iconOnly={iconSearch} className="hidden w-full max-w-sm sm:block" /> : <div />}
             <div className="text-center">{logo}</div>
             <div className="justify-self-end">
               <HeaderActions />
@@ -329,17 +354,19 @@ export function StorefrontHeader() {
           </div>
           <div className="text-center">{logo}</div>
           <div className="flex items-center justify-end gap-3">
-            {showSearch && <SearchInput className="hidden w-44 lg:block" />}
+            {showSearch && <SearchInput iconOnly={iconSearch} className="hidden w-44 lg:block" />}
             <HeaderActions />
           </div>
         </div>
       ) : (
-        // classic: logo left, search center-right, actions right (original layout)
+        // classic: logo left, nav, then a right-aligned search + actions cluster
         <div className="mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6">
           {logo}
           <NavLinks className="hidden md:flex" />
-          {showSearch && <SearchInput className="ml-auto hidden w-full max-w-sm sm:block" />}
-          <HeaderActions />
+          <div className="ml-auto flex items-center gap-2 sm:gap-3">
+            {showSearch && <SearchInput iconOnly={iconSearch} className={iconSearch ? '' : 'hidden w-full max-w-sm sm:block'} />}
+            <HeaderActions />
+          </div>
         </div>
       )}
     </header>

package/src/config.ts

@@ -1,6 +1,7 @@
 import React, { createContext, useContext } from 'react'
 import type { ShopProvider } from '@fayz-ai/shop/provider'
 import type { MockShopSeed } from '@fayz-ai/shop/mock'
+import type { PaymentMethodKind } from '@fayz-ai/shop/types'
 import type { StorefrontTheme } from './theme'
 import type { HomeConfig, NavLink, FooterConfig } from './sections'
 import type { StorefrontAuthConfig } from './auth'
@@ -122,7 +123,15 @@ export interface StorefrontConfig {
    * real charge (demo). M4 sets 'pix-mercadopago' so orders stay pending until
    * a real payment webhook confirms settlement.
    */
-  payments?: { mode?: 'mock' | 'pix-mercadopago' }
+  payments?: {
+    mode?: 'mock' | 'pix-mercadopago'
+    /**
+     * Which methods the checkout offers. Declaring them is what lets the order
+     * record how the buyer intends to pay instead of assuming 'credit_card',
+     * which is what it did while the card form was a simulation.
+     */
+    methods?: readonly PaymentMethodKind[]
+  }
   /** Product enquiry behavior for catalog/enquiry stores. */
   enquiry?: StorefrontEnquiryConfig
   /** Feature toggles — defaults depend on commerceMode. */
@@ -139,7 +148,7 @@ export interface ResolvedStorefrontConfig extends StorefrontConfig {
   currency: string
   locale: string
   shipping: { flatRate: number; freeAbove?: number }
-  payments: { mode: 'mock' | 'pix-mercadopago' }
+  payments: { mode: 'mock' | 'pix-mercadopago'; methods: readonly PaymentMethodKind[] }
   commerceMode: StorefrontCommerceMode
   enquiry: Required<Pick<StorefrontEnquiryConfig, 'label' | 'successMessage' | 'subjectPrefix'>> &
     Omit<StorefrontEnquiryConfig, 'label' | 'successMessage' | 'subjectPrefix'>
@@ -159,7 +168,10 @@ export function resolveConfig(config: StorefrontConfig): ResolvedStorefrontConfi
     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',

package/src/createStorefrontApp.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { setShopProvider } from '@fayz-ai/shop/runtime'
+import { setShopProvider, getShopProvider } from '@fayz-ai/shop/runtime'
 import { createMockShopProvider } from '@fayz-ai/shop/mock'
 import type { MockShopSeed } from '@fayz-ai/shop/mock'
 import type { Discount } from '@fayz-ai/shop/types'
@@ -10,6 +10,7 @@ import type { StorefrontConfig, StorefrontDiscountConfig } from './config'
 import type { StorefrontComponents } from './component-contracts'
 import type { StorefrontSection } from './sections'
 import { useHashPath, matchPath } from './router'
+import { useCartStore } from './stores/cart.store'
 import { StorefrontThemeStyle } from './theme'
 import { StorefrontHeader } from './components/StorefrontHeader'
 import { StorefrontFooter } from './components/StorefrontFooter'
@@ -128,6 +129,22 @@ export function initStorefrontRuntime(config: StorefrontConfig): void {
     setShopProvider(createMockShopProvider(buildMockSeed(config)))
   }
 
+  // Drop any persisted cart line the active backend can't resolve (e.g. a cart
+  // built in an earlier mock-mode session, whose ids don't exist live) so stale
+  // ids never reach checkout and 400 the order. Keeps a line on any error so a
+  // transient failure never discards a valid item. Runs AFTER the persisted cart
+  // has hydrated — zustand/persist rehydrates asynchronously, so reconciling at
+  // init would see an empty cart and no-op.
+  const reconcileCart = () => {
+    const provider = getShopProvider()
+    void useCartStore.getState().reconcile(async (line) => {
+      const product = await provider.getProduct(line.productId)
+      return product != null
+    })
+  }
+  if (useCartStore.persist.hasHydrated()) reconcileCart()
+  else useCartStore.persist.onFinishHydration(reconcileCart)
+
   if (config.supabaseUrl || config.supabaseAnonKey) {
     console.warn(
       '@fayz-ai/shop: supabaseUrl/supabaseAnonKey are legacy fields. Pass an explicit provider/adapter or use the Fayz SDK broker path.',

package/src/index.ts

@@ -144,6 +144,7 @@ export {
   sertaoTemplate,
   voltTemplate,
   atelierTemplate,
+  foodTemplate,
 } from './presets'
 export type { StorefrontTemplate, StorefrontTemplateId } from './presets'