@fayz-ai/storefront 0.9.0 → 0.10.0

package/src/components/ProductEnquiryForm.tsx

@@ -1,175 +0,0 @@
-import React, { useState } from 'react'
-import { Mail, MessageCircle, Send } from 'lucide-react'
-import { getShopProvider } from '@fayz-ai/shop/runtime'
-import type { Product } from '@fayz-ai/shop/types'
-import { useStorefrontConfig } from '../config'
-import { storefrontComponentContracts } from '../component-selectors'
-import { TID } from '../testids'
-
-export interface ProductEnquiryFormProps {
-  product: Product
-  onSuccess?: () => void
-}
-
-function defaultSubject(prefix: string, product: Product): string {
-  return `${prefix}: ${product.name}`
-}
-
-function buildWhatsAppHref(url: string, product: Product): string {
-  const text = encodeURIComponent(`Hello, I would like more information about ${product.name}.`)
-  const sep = url.includes('?') ? '&' : '?'
-  return `${url}${sep}text=${text}`
-}
-
-export function ProductEnquiryForm({ product, onSuccess }: ProductEnquiryFormProps) {
-  const config = useStorefrontConfig()
-  const [customerName, setCustomerName] = useState('')
-  const [customerEmail, setCustomerEmail] = useState('')
-  const [customerPhone, setCustomerPhone] = useState('')
-  const [subject, setSubject] = useState(defaultSubject(config.enquiry.subjectPrefix, product))
-  const [message, setMessage] = useState(`I would like more information about ${product.name}.`)
-  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle')
-  const [error, setError] = useState<string | null>(null)
-
-  const submit = async (event: React.FormEvent) => {
-    event.preventDefault()
-    setStatus('submitting')
-    setError(null)
-    try {
-      const provider = getShopProvider()
-      if (provider.createProductEnquiry) {
-        await provider.createProductEnquiry({
-          productId: product.id,
-          productName: product.name,
-          productSlug: product.slug,
-          customerName,
-          customerEmail,
-          customerPhone: customerPhone || undefined,
-          subject,
-          message,
-          sourceUrl: typeof window === 'undefined' ? undefined : window.location.href,
-          metadata: { sku: product.sku, categoryName: product.categoryName },
-        })
-      } else if (config.enquiry.email) {
-        window.location.href = `mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`
-      }
-      setStatus('success')
-      onSuccess?.()
-    } catch (e) {
-      setStatus('error')
-      setError(e instanceof Error ? e.message : String(e))
-    }
-  }
-
-  return (
-    <form
-      {...storefrontComponentContracts.productDetail.enquiryForm}
-      onSubmit={submit}
-      className="space-y-4"
-    >
-      <div className="grid gap-4 sm:grid-cols-2">
-        <label className="space-y-1.5 text-sm font-medium">
-          <span>Your name</span>
-          <input
-            data-testid={TID.enquiryName}
-            required
-            value={customerName}
-            onChange={(e) => setCustomerName(e.target.value)}
-            className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
-            style={{ borderRadius: 'var(--sf-radius-input)' }}
-          />
-        </label>
-        <label className="space-y-1.5 text-sm font-medium">
-          <span>Your email</span>
-          <input
-            data-testid={TID.enquiryEmail}
-            required
-            type="email"
-            value={customerEmail}
-            onChange={(e) => setCustomerEmail(e.target.value)}
-            className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
-            style={{ borderRadius: 'var(--sf-radius-input)' }}
-          />
-        </label>
-      </div>
-      <label className="block space-y-1.5 text-sm font-medium">
-        <span>Phone{config.enquiry.requirePhone ? '' : ' (optional)'}</span>
-        <input
-          data-testid={TID.enquiryPhone}
-          required={config.enquiry.requirePhone}
-          value={customerPhone}
-          onChange={(e) => setCustomerPhone(e.target.value)}
-          className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
-          style={{ borderRadius: 'var(--sf-radius-input)' }}
-        />
-      </label>
-      <label className="block space-y-1.5 text-sm font-medium">
-        <span>Subject</span>
-        <input
-          data-testid={TID.enquirySubject}
-          required
-          value={subject}
-          onChange={(e) => setSubject(e.target.value)}
-          className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
-          style={{ borderRadius: 'var(--sf-radius-input)' }}
-        />
-      </label>
-      <label className="block space-y-1.5 text-sm font-medium">
-        <span>Message</span>
-        <textarea
-          data-testid={TID.enquiryMessage}
-          required
-          rows={5}
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          className="w-full resize-none border bg-background px-3 py-2 outline-none focus:border-primary"
-          style={{ borderRadius: 'var(--sf-radius-input)' }}
-        />
-      </label>
-      <div className="flex flex-wrap items-center gap-3">
-        <button
-          data-testid={TID.enquirySubmit}
-          type="submit"
-          disabled={status === 'submitting'}
-          className="sf-cta inline-flex items-center gap-2 bg-primary px-5 py-3 font-semibold text-primary-foreground disabled:cursor-wait disabled:opacity-60"
-          style={{ borderRadius: 'var(--sf-radius-button)' }}
-        >
-          <Send className="h-4 w-4" />
-          {status === 'submitting' ? 'Sending...' : 'Send enquiry'}
-        </button>
-        {config.enquiry.whatsappUrl && (
-          <a
-            href={buildWhatsAppHref(config.enquiry.whatsappUrl, product)}
-            target="_blank"
-            rel="noreferrer"
-            className="inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted"
-            style={{ borderRadius: 'var(--sf-radius-button)' }}
-          >
-            <MessageCircle className="h-4 w-4" />
-            WhatsApp
-          </a>
-        )}
-        {config.enquiry.email && (
-          <a
-            href={`mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`}
-            className="inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted"
-            style={{ borderRadius: 'var(--sf-radius-button)' }}
-          >
-            <Mail className="h-4 w-4" />
-            Email
-          </a>
-        )}
-      </div>
-      {status === 'success' && (
-        <p data-testid={TID.enquirySuccess} className="text-sm font-medium text-emerald-600">
-          {config.enquiry.successMessage}
-        </p>
-      )}
-      {error && (
-        <p data-testid={TID.enquiryError} className="text-sm font-medium text-red-600">
-          {error}
-        </p>
-      )}
-    </form>
-  )
-}

package/src/components/ProductGallery.tsx

@@ -1,174 +0,0 @@
-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/ProductGrid.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import type { Product } from '@fayz-ai/shop/types'
-import { ProductCard } from './ProductCard'
-import { getStorefrontComponents, useStorefrontConfig } from '../config'
-import { useStorefrontActions } from '../hooks/useStorefront'
-import { TID } from '../testids'
-
-export function ProductGrid({ products, loading }: { products: Product[]; loading: boolean }) {
-  const config = useStorefrontConfig()
-  const actions = useStorefrontActions()
-  const components = getStorefrontComponents(config)
-  const ProductCardComponent = components.ProductCard ?? ProductCard
-
-  if (loading) {
-    return (
-      <div data-testid={TID.productGrid} className="grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4">
-        {Array.from({ length: 8 }, (_, i) => (
-          <div key={i} className="aspect-[3/4] animate-pulse rounded-xl bg-muted" />
-        ))}
-      </div>
-    )
-  }
-  if (products.length === 0) {
-    return (
-      <div data-testid={TID.productGrid} className="py-20 text-center text-muted-foreground">
-        Nenhum produto encontrado.
-      </div>
-    )
-  }
-  return (
-    <div data-testid={TID.productGrid} className="grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4">
-      {products.map((p) => (
-        <ProductCardComponent
-          key={p.id}
-          product={p}
-          config={config}
-          commerceMode={config.commerceMode}
-          actions={actions}
-        />
-      ))}
-    </div>
-  )
-}

package/src/components/ProductOptionSelector.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import type { ProductOptionGroup, ProductOptionSelection } from '../product-options'
-import { TID } from '../testids'
-
-export interface ProductOptionSelectorProps {
-  groups: ProductOptionGroup[]
-  value: ProductOptionSelection
-  onChange: (value: ProductOptionSelection) => void
-}
-
-export function ProductOptionSelector({ groups, value, onChange }: ProductOptionSelectorProps) {
-  if (groups.length === 0) return null
-
-  return (
-    <div className="mt-6 space-y-4">
-      {groups.map((group) => (
-        <div key={group.id} data-testid={TID.productOptionGroup(group.id)}>
-          <div className="mb-2 flex items-center justify-between gap-3">
-            <p className="text-sm font-medium">{group.label}</p>
-            {value[group.label] && (
-              <p className="truncate text-xs text-muted-foreground">{value[group.label]}</p>
-            )}
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {group.values.map((option) => {
-              const selected = value[group.label] === option
-              return (
-                <button
-                  key={option}
-                  type="button"
-                  data-testid={TID.productOptionValue(group.id, option)}
-                  aria-pressed={selected}
-                  onClick={() => onChange({ ...value, [group.label]: option })}
-                  className={[
-                    'min-h-10 rounded-full border px-4 text-sm font-medium transition-colors',
-                    selected
-                      ? 'border-primary bg-primary text-primary-foreground'
-                      : 'border-border bg-background text-foreground hover:border-primary/60',
-                  ].join(' ')}
-                >
-                  {option}
-                </button>
-              )
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/components/ProductSpecs.tsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import type { Product } from '@fayz-ai/shop/types'
-
-// Metadata keys that drive the option selector (size/color) are excluded here so
-// specs don't duplicate the picker; the rest are internal SDK/seed/overlay keys
-// that aren't customer-facing specs.
-const EXCLUDED_KEYS = new Set([
-  'options', 'sizes', 'colors',
-  'fayzStoreCategory', 'source', 'storeKey', 'storeName', 'tenantId', 'slug',
-])
-
-// Internal namespaced keys (fayz*, _*) are never shown as specs.
-function isInternalKey(key: string): boolean {
-  return EXCLUDED_KEYS.has(key) || key.startsWith('_') || key.startsWith('fayz')
-}
-
-// Friendly PT-BR labels for common metadata keys; unknown keys are humanized.
-const LABELS: Record<string, string> = {
-  colorway: 'Cor',
-  color: 'Cor',
-  fit: 'Caimento',
-  material: 'Material',
-  vintage: 'Safra',
-  region: 'Região',
-  grape: 'Uva',
-  pairing: 'Harmonização',
-  abv: 'Teor alcoólico',
-  volume: 'Volume',
-  brand: 'Marca',
-  origin: 'Origem',
-  warranty: 'Garantia',
-  dimensions: 'Dimensões',
-}
-
-function humanize(key: string): string {
-  if (LABELS[key]) return LABELS[key]
-  const spaced = key.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').trim()
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
-}
-
-function scalarToString(value: unknown): string | null {
-  if (typeof value === 'string') return value.trim() || null
-  if (typeof value === 'number') return String(value)
-  if (typeof value === 'boolean') return value ? 'Sim' : 'Não'
-  return null
-}
-
-/** Real product specs from standard fields + scalar metadata. Renders nothing
- *  when there's nothing to show. No invented data. */
-export function ProductSpecs({ product }: { product: Product }) {
-  const rows: Array<[string, string]> = []
-  if (product.sku) rows.push(['SKU', product.sku])
-  if (product.categoryName) rows.push(['Categoria', product.categoryName])
-  if (product.weight != null) rows.push(['Peso', `${product.weight} ${product.weightUnit}`])
-  for (const [key, value] of Object.entries(product.metadata ?? {})) {
-    if (isInternalKey(key)) continue
-    const str = scalarToString(value)
-    if (str) rows.push([humanize(key), str])
-  }
-  if (rows.length === 0) return null
-
-  return (
-    <section className="mt-14">
-      <h2 className="sf-heading text-xl font-semibold tracking-tight">Especificações</h2>
-      <dl className="mt-5 grid gap-x-12 sm:grid-cols-2">
-        {rows.map(([label, value]) => (
-          <div key={label} className="flex items-center justify-between gap-4 border-b py-3 text-sm">
-            <dt className="text-muted-foreground">{label}</dt>
-            <dd className="text-right font-medium">{value}</dd>
-          </div>
-        ))}
-      </dl>
-    </section>
-  )
-}

package/src/components/QuantityInput.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { Minus, Plus } from 'lucide-react'
-
-export interface QuantityInputProps {
-  value: number
-  onChange(next: number): void
-  min?: number
-  max?: number
-  testId?: string
-  incTestId?: string
-  decTestId?: string
-}
-
-export function QuantityInput({ value, onChange, min = 1, max, testId, incTestId, decTestId }: QuantityInputProps) {
-  const clamp = (n: number) => Math.max(min, max != null ? Math.min(n, max) : n)
-  return (
-    <div className="inline-flex items-center rounded-lg border">
-      <button
-        type="button"
-        data-testid={decTestId}
-        aria-label="Diminuir quantidade"
-        onClick={() => onChange(clamp(value - 1))}
-        className="px-2.5 py-1.5 text-muted-foreground hover:text-foreground disabled:opacity-40"
-        disabled={value <= min}
-      >
-        <Minus className="h-3.5 w-3.5" />
-      </button>
-      <input
-        data-testid={testId}
-        type="number"
-        value={value}
-        min={min}
-        max={max}
-        onChange={(e) => {
-          const n = parseInt(e.target.value, 10)
-          if (!isNaN(n)) onChange(clamp(n))
-        }}
-        className="w-12 border-x bg-transparent py-1.5 text-center text-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-      />
-      <button
-        type="button"
-        data-testid={incTestId}
-        aria-label="Aumentar quantidade"
-        onClick={() => onChange(clamp(value + 1))}
-        className="px-2.5 py-1.5 text-muted-foreground hover:text-foreground disabled:opacity-40"
-        disabled={max != null && value >= max}
-      >
-        <Plus className="h-3.5 w-3.5" />
-      </button>
-    </div>
-  )
-}

package/src/components/RelatedProducts.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import type { ListProductsOptions, Product } from '@fayz-ai/shop/types'
-import { useProducts } from '../hooks/useProducts'
-import { getStorefrontComponents, useStorefrontConfig } from '../config'
-import { useStorefrontActions } from '../hooks/useStorefront'
-import { ProductCard } from './ProductCard'
-
-/** "Você também pode gostar" — products from the same category, excluding the
- *  current one. Renders through the store's configured card component for visual
- *  consistency with the catalog. Hidden when there's nothing relevant. */
-export function RelatedProducts({ product }: { product: Product }) {
-  const config = useStorefrontConfig()
-  const actions = useStorefrontActions()
-  const components = getStorefrontComponents(config)
-  const Card = components.ProductCard ?? ProductCard
-  const opts: ListProductsOptions = product.categoryId
-    ? { categoryId: product.categoryId, status: 'active', limit: 5 }
-    : { status: 'active', limit: 5 }
-  const { products, loading } = useProducts(opts)
-  const related = products.filter((p) => p.id !== product.id).slice(0, 4)
-
-  if (loading || related.length === 0) return null
-
-  return (
-    <section className="mt-16">
-      <h2 className="sf-heading text-xl font-semibold tracking-tight">Você também pode gostar</h2>
-      <div className="mt-6 grid grid-cols-2 gap-5 md:grid-cols-4">
-        {related.map((p) => (
-          <Card
-            key={p.id}
-            product={p}
-            config={config}
-            commerceMode={config.commerceMode}
-            actions={actions}
-          />
-        ))}
-      </div>
-    </section>
-  )
-}