@fayz-ai/storefront 0.9.0-next.0 → 0.9.0

package/package.json

@@ -3,7 +3,7 @@
   "fayz": {
     "status": "beta"
   },
-  "version": "0.9.0-next.0",
+  "version": "0.9.0",
   "description": "Fayz SDK storefront kit — Shopify-style customer-facing ecommerce template components",
   "type": "module",
   "sideEffects": false,
@@ -37,17 +37,17 @@
     "src"
   ],
   "dependencies": {
-    "@fayz-ai/core": "^0.9.0-next.0",
-    "@fayz-ai/plugin-auth": "^0.9.0-next.0",
-    "@fayz-ai/auth": "^0.9.0-next.0",
-    "@fayz-ai/ui": "^0.9.0-next.0",
-    "@fayz-ai/sdk": "^0.9.0-next.0",
-    "@fayz-ai/shop": "^0.9.0-next.0"
+    "@fayz-ai/auth": "^0.9.0",
+    "@fayz-ai/core": "^0.9.0",
+    "@fayz-ai/plugin-auth": "^0.9.0",
+    "@fayz-ai/sdk": "^0.9.0",
+    "@fayz-ai/shop": "^0.9.0",
+    "@fayz-ai/ui": "^0.9.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "zustand": "^4.5.0",
+    "zustand": "^4.5.0 || ^5.0.0",
     "@supabase/supabase-js": "^2.45.0",
     "lucide-react": ">=0.400.0 <1.0.0"
   },

package/src/component-contracts.ts

@@ -3,6 +3,7 @@ import type { Category, CreateProductEnquiryInput, Product, ProductEnquiry, Prod
 import type { ProductOptionGroup, ProductOptionSelection } from './product-options'
 import type { ResolvedStorefrontConfig, StorefrontCommerceMode } from './config'
 import type { MediaCarouselItem } from './sections'
+import type { CartState } from './stores/cart.store'
 
 export interface StorefrontComponentBaseProps {
   config: ResolvedStorefrontConfig
@@ -118,6 +119,19 @@ export interface StorefrontStateProps extends StorefrontComponentBaseProps {
   children?: React.ReactNode
 }
 
+/**
+ * Extra content rendered inside CartDrawer's footer, right after the
+ * "Finalizar compra" button — e.g. an alternative checkout path like
+ * "Finalizar via WhatsApp". Unlike every other entry in
+ * StorefrontComponents, this isn't a whole-component replacement:
+ * CartDrawer is always the SDK's own, this only adds optional content
+ * inside it. Only rendered when the cart has lines (same condition as the
+ * checkout button itself).
+ */
+export interface CartDrawerFooterExtraProps extends StorefrontComponentBaseProps {
+  cart: CartState
+}
+
 export interface StorefrontComponents {
   ProductCard?: React.ComponentType<ProductCardProps>
   ProductDetail?: React.ComponentType<ProductDetailProps>
@@ -136,5 +150,5 @@ export interface StorefrontComponents {
   EmptyState?: React.ComponentType<StorefrontStateProps>
   LoadingState?: React.ComponentType<StorefrontStateProps>
   ErrorState?: React.ComponentType<StorefrontStateProps>
-
+  CartDrawerFooterExtra?: React.ComponentType<CartDrawerFooterExtraProps>
 }

package/src/components/CartDrawer.tsx

@@ -9,7 +9,7 @@ import {
 } from '../stores/cart.store'
 import { useDiscountValidator } from '../hooks/useDiscountValidator'
 import { toast } from '../stores/toast.store'
-import { useStorefrontConfig } from '../config'
+import { getStorefrontComponents, useStorefrontConfig } from '../config'
 import { navigateTo } from '../router'
 import { formatMoney } from '../format'
 import { QuantityInput } from './QuantityInput'
@@ -22,6 +22,8 @@ import { SmoothImage } from './SmoothImage'
 export function CartDrawer() {
   const config = useStorefrontConfig()
   const cart = useCartStore()
+  const components = getStorefrontComponents(config)
+  const FooterExtra = components.CartDrawerFooterExtra
   const validate = useDiscountValidator()
   const [code, setCode] = useState('')
   const [discountError, setDiscountError] = useState<string | null>(null)
@@ -264,6 +266,10 @@ export function CartDrawer() {
               >
                 Finalizar compra
               </button>
+
+              {FooterExtra && (
+                <FooterExtra cart={cart} config={config} commerceMode={config.commerceMode} />
+              )}
             </div>
           </>
         )}

package/src/pages/CheckoutPage.tsx

@@ -417,7 +417,7 @@ export function CheckoutPage() {
         </div>
       </header>
 
-      <div className="mx-auto grid max-w-6xl gap-8 px-4 py-8 sm:px-6 lg:grid-cols-5 lg:px-6">
+      <div className="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 py-8 sm:px-6 lg:grid-cols-5 lg:px-6">
         <section className="lg:col-span-3 lg:pr-10">
           <nav className="mb-8 flex flex-wrap items-center gap-2 text-sm text-muted-foreground" aria-label="Checkout steps">
             <span className="font-medium text-foreground">Informações</span>

package/src/pages/ProductDetailPage.tsx

@@ -109,7 +109,7 @@ export function ProductDetailPage({ slug }: { slug: string }) {
         <ChevronLeft className="h-4 w-4" /> Continuar comprando
       </Link>
 
-      <div className="grid animate-fade-up gap-10 md:grid-cols-2">
+      <div className="grid animate-fade-up grid-cols-1 gap-10 md:grid-cols-2">
         <GalleryComponent
           product={product}
           images={product.images}