@fayz-ai/storefront 0.6.0 → 0.8.0

package/src/components/ProductCard.tsx

@@ -1,31 +1,31 @@
 import React from 'react'
 import { ShoppingBag } from 'lucide-react'
-import type { Product } from '@fayz-ai/shop/types'
-import { useCartStore } from '../stores/cart.store'
 import { useStorefrontConfig } from '../config'
 import { Link, navigateTo } from '../router'
 import { getProductOptionGroups } from '../product-options'
 import { Price } from './Price'
 import { TID } from '../testids'
-import { productCardSlotContract } from '../slot-contracts'
+import { productCardComponentContract } from '../component-selectors'
+import { useStorefrontActions } from '../hooks/useStorefront'
+import type { ProductCardProps } from '../component-contracts'
+import { SmoothImage } from './SmoothImage'
 
-export interface ProductCardProps {
-  product: Product
-}
-
-export function ProductCard({ product }: ProductCardProps) {
-  const config = useStorefrontConfig()
-  const addItem = useCartStore((s) => s.addItem)
+export function ProductCard({ product, config: providedConfig, actions: providedActions }: ProductCardProps) {
+  const runtimeConfig = useStorefrontConfig()
+  const runtimeActions = useStorefrontActions()
+  const config = providedConfig ?? runtimeConfig
+  const actions = providedActions ?? runtimeActions
   const hasOptions = getProductOptionGroups(product).length > 0
   const soldOut = product.inventoryCount <= 0
   const onSale = product.compareAtPrice != null && product.compareAtPrice > product.price
   const image = product.images.find((i) => i.isPrimary) ?? product.images[0]
   const cardStyle = config.theme?.productCard?.style ?? 'card'
   const aspect = config.theme?.productCard?.imageAspect === 'portrait' ? 'aspect-[3/4]' : 'aspect-square'
+  const purchaseMode = config.commerceMode === 'checkout'
 
   return (
     <div
-      {...productCardSlotContract.root}
+      {...productCardComponentContract.root}
       data-slug={product.slug}
       className={`group flex flex-col overflow-hidden transition-all duration-300 ${
         cardStyle === 'editorial'
@@ -36,7 +36,7 @@ export function ProductCard({ product }: ProductCardProps) {
     >
       <Link to={`/product/${product.slug}`} className={`relative block ${aspect} overflow-hidden bg-muted`} style={{ borderRadius: cardStyle === 'editorial' ? 'var(--sf-radius-card)' : undefined }}>
         {image && (
-          <img
+          <SmoothImage
             src={image.url}
             alt={image.altText ?? product.name}
             className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
@@ -67,23 +67,39 @@ export function ProductCard({ product }: ProductCardProps) {
         <span className="text-xs text-muted-foreground">{product.categoryName}</span>
         <Link
           to={`/product/${product.slug}`}
-          {...productCardSlotContract.name}
+          {...productCardComponentContract.name}
           className="font-medium leading-snug hover:underline"
         >
           {product.name}
         </Link>
-        <div className="mt-auto flex items-center justify-between pt-2">
-          <Price
-            value={product.price}
-            compareAt={product.compareAtPrice}
-            testId={productCardSlotContract.priceTestId}
-          />
+        <div className="mt-auto flex items-center justify-between gap-3 pt-2">
+          {purchaseMode ? (
+            <Price
+              value={product.price}
+              compareAt={product.compareAtPrice}
+              testId={productCardComponentContract.priceTestId}
+            />
+          ) : (
+            <span data-testid={productCardComponentContract.priceTestId} className="text-sm text-muted-foreground">
+              {config.commerceMode === 'enquiry' ? config.enquiry.label : 'Ver detalhes'}
+            </span>
+          )}
           <button
             type="button"
-            {...productCardSlotContract.addButton}
-            disabled={soldOut}
-            aria-label={hasOptions ? `Escolher opções de ${product.name}` : `Adicionar ${product.name} ao carrinho`}
+            {...productCardComponentContract.addButton}
+            disabled={purchaseMode && soldOut}
+            aria-label={
+              purchaseMode
+                ? hasOptions
+                  ? `Escolher opções de ${product.name}`
+                  : `Adicionar ${product.name} ao carrinho`
+                : `${config.enquiry.label} ${product.name}`
+            }
             onClick={() => {
+              if (!purchaseMode) {
+                navigateTo(`/product/${product.slug}`)
+                return
+              }
               // Products with variants (size/color) must pick an option on the PDP
               // — quick-adding would create an option-less line. Others add inline
               // (addItem auto-opens the cart drawer).
@@ -91,7 +107,7 @@ export function ProductCard({ product }: ProductCardProps) {
                 navigateTo(`/product/${product.slug}`)
                 return
               }
-              addItem(product)
+              actions.addToCart(product)
             }}
             className="rounded-full border bg-background/90 p-2.5 text-foreground shadow-sm transition-all duration-200 hover:scale-110 hover:bg-primary hover:text-primary-foreground hover:shadow disabled:cursor-not-allowed disabled:opacity-40 lg:translate-y-1 lg:opacity-0 lg:group-hover:translate-y-0 lg:group-hover:opacity-100 lg:disabled:opacity-0 lg:group-hover:disabled:opacity-40"
           >

package/src/components/ProductEnquiryForm.tsx

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

@@ -1,12 +1,15 @@
 import React from 'react'
 import type { Product } from '@fayz-ai/shop/types'
 import { ProductCard } from './ProductCard'
-import { useStorefrontConfig } from '../config'
+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 ProductCardComponent = config.slots?.ProductCard ?? ProductCard
+  const actions = useStorefrontActions()
+  const components = getStorefrontComponents(config)
+  const ProductCardComponent = components.ProductCard ?? ProductCard
 
   if (loading) {
     return (
@@ -27,7 +30,13 @@ export function ProductGrid({ products, loading }: { products: Product[]; loadin
   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} />
+        <ProductCardComponent
+          key={p.id}
+          product={p}
+          config={config}
+          commerceMode={config.commerceMode}
+          actions={actions}
+        />
       ))}
     </div>
   )

package/src/components/RelatedProducts.tsx

@@ -1,15 +1,18 @@
 import React from 'react'
 import type { ListProductsOptions, Product } from '@fayz-ai/shop/types'
 import { useProducts } from '../hooks/useProducts'
-import { useStorefrontConfig } from '../config'
+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 slot for visual
+ *  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 Card = config.slots?.ProductCard ?? ProductCard
+  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 }
@@ -23,7 +26,13 @@ export function RelatedProducts({ product }: { product: Product }) {
       <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} />
+          <Card
+            key={p.id}
+            product={p}
+            config={config}
+            commerceMode={config.commerceMode}
+            actions={actions}
+          />
         ))}
       </div>
     </section>

package/src/components/SmoothImage.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { useStorefrontConfigOptional, type StorefrontImageLoadingConfig } from '../config'
+
+export interface SmoothImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  imageLoading?: StorefrontImageLoadingConfig
+}
+
+export function SmoothImage({
+  imageLoading,
+  loading = 'lazy',
+  decoding = 'async',
+  onLoad,
+  style,
+  ...props
+}: SmoothImageProps) {
+  const config = useStorefrontConfigOptional()
+  const resolved = {
+    ...config?.imageLoading,
+    ...imageLoading,
+  }
+  const mode = resolved.mode ?? 'fade'
+  const durationMs = resolved.durationMs ?? 420
+  const easing = resolved.easing ?? 'cubic-bezier(0.22, 1, 0.36, 1)'
+  const blur = resolved.blur ?? true
+  const ref = React.useRef<HTMLImageElement | null>(null)
+  const [loaded, setLoaded] = React.useState(mode === 'none')
+
+  React.useEffect(() => {
+    if (mode === 'none') {
+      setLoaded(true)
+      return
+    }
+    if (ref.current?.complete && ref.current.naturalWidth > 0) setLoaded(true)
+  }, [mode, props.src])
+
+  const revealStyle: React.CSSProperties =
+    mode === 'none'
+      ? {}
+      : {
+          opacity: loaded ? 1 : 0,
+          filter: blur && !loaded ? 'blur(10px)' : 'blur(0px)',
+          transition: `opacity ${durationMs}ms ${easing}, filter ${durationMs}ms ${easing}, transform ${durationMs}ms ${easing}`,
+        }
+
+  return (
+    <img
+      {...props}
+      ref={ref}
+      loading={loading}
+      decoding={decoding}
+      data-sf-image-loaded={loaded ? 'true' : 'false'}
+      style={{ ...style, ...revealStyle }}
+      onLoad={(event) => {
+        setLoaded(true)
+        onLoad?.(event)
+      }}
+    />
+  )
+}

package/src/components/StorefrontFooter.tsx

@@ -9,6 +9,17 @@ export function StorefrontFooter() {
   const { categories } = useCategories()
   const visibleCategories = categories.slice(0, 8)
   const hiddenCategoryCount = Math.max(categories.length - visibleCategories.length, 0)
+  const labels = {
+    categories: 'Departamentos',
+    navigation: 'Navegação',
+    contact: 'Contato',
+    viewAll: 'Ver todos',
+    purchases: 'Minhas compras',
+    privacy: 'Privacidade',
+    terms: 'Termos',
+    returns: 'Trocas e devoluções',
+    ...config.footer?.labels,
+  }
 
   const goCategory = (categoryId: string) => {
     useCatalogStore.getState().reset()
@@ -27,7 +38,7 @@ export function StorefrontFooter() {
         </div>
 
         <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">Departamentos</h3>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">{labels.categories}</h3>
           <ul className="space-y-2 text-sm">
             {visibleCategories.map((c) => (
               <li key={c.id}>
@@ -43,7 +54,7 @@ export function StorefrontFooter() {
             {hiddenCategoryCount > 0 && (
               <li>
                 <Link to={config.catalogPath} className="font-medium underline-offset-2 transition-opacity hover:underline">
-                  Ver todos ({categories.length})
+                  {labels.viewAll} ({categories.length})
                 </Link>
               </li>
             )}
@@ -51,21 +62,23 @@ export function StorefrontFooter() {
         </div>
 
         <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">Navegação</h3>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">{labels.navigation}</h3>
           <ul className="space-y-2 text-sm">
             {config.nav.map((link) => (
               <li key={link.to}>
                 <Link to={link.to} className="transition-opacity hover:opacity-70">{link.label}</Link>
               </li>
             ))}
-            <li>
-              <Link to="/account" className="transition-opacity hover:opacity-70">Minhas compras</Link>
-            </li>
+            {config.features.accounts && (
+              <li>
+                <Link to="/account" className="transition-opacity hover:opacity-70">{labels.purchases}</Link>
+              </li>
+            )}
           </ul>
         </div>
 
         <div>
-          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">Contato</h3>
+          <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">{labels.contact}</h3>
           <ul className="space-y-2 text-sm text-muted-foreground">
             {config.footer?.contact?.phone && <li>{config.footer.contact.phone}</li>}
             {config.footer?.contact?.email && <li>{config.footer.contact.email}</li>}
@@ -83,15 +96,12 @@ export function StorefrontFooter() {
       <div className="border-t">
         <div className="mx-auto flex max-w-7xl flex-col items-center gap-3 px-4 py-5 text-xs text-muted-foreground sm:flex-row sm:justify-between sm:px-6">
           <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
-            <Link to="/privacy" className="transition-colors hover:text-foreground">Privacidade</Link>
-            <Link to="/terms" className="transition-colors hover:text-foreground">Termos</Link>
-            <Link to="/refunds" className="transition-colors hover:text-foreground">Trocas e devoluções</Link>
+            <Link to="/privacy" className="transition-colors hover:text-foreground">{labels.privacy}</Link>
+            <Link to="/terms" className="transition-colors hover:text-foreground">{labels.terms}</Link>
+            <Link to="/refunds" className="transition-colors hover:text-foreground">{labels.returns}</Link>
           </nav>
           <p className="text-center">
-            © {config.name} — powered by Fayz · Fotos:{' '}
-            <a href="https://unsplash.com" target="_blank" rel="noreferrer" className="underline-offset-2 hover:underline">
-              Unsplash
-            </a>
+            {config.footer?.credit ?? <>© {config.name} — powered by Fayz</>}
           </p>
         </div>
       </div>