@thorprovider/storefront 0.3.1 → 0.4.0-mvp.2

package/assets/templates/views/checkout/index.tsx

@@ -0,0 +1,111 @@
+// Thor Commerce view module: checkout
+// Server Component module: elements + catalog entries + route + loader only.
+// The client-side component mappings live in ./registry.tsx ('use client'); this
+// module imports them as data so the RSC graph never evaluates @json-render/react
+// on the server. Registered by importing it in ../index.ts. Recipe: recipes.json -> "checkout".
+//
+// The initial render does NOT read cookies here (this module is part of the
+// client catalog graph). The catch-all page injects the read-only cart state;
+// `CheckoutBoot` then loads the checkout data or reconciles a completed receipt
+// through Server Actions.
+
+import { getDataSource } from '../../store-context'
+import { pageRoot } from '../../spec/page-root'
+import type { StorefrontElement } from '../../spec/types'
+import type { ViewModule } from '../types'
+import { registry } from './registry'
+import { checkoutConfirmationProps, checkoutViewProps } from './props'
+import {
+  checkoutConfirmationPropsSchema,
+  checkoutEmptyPropsSchema,
+  checkoutPropsSchema,
+} from './schema'
+
+// The element tree is derived wiring; the rendered props and validation rules
+// come from the user-owned ./props.ts module so they survive sync and removal.
+// Four states: bootstrap (headless), confirmation (order), empty cart, or form.
+const elements: Record<string, StorefrontElement> = {
+  'checkout.boot': {
+    type: 'CheckoutBoot',
+    props: {},
+  },
+  'checkout.confirmation': {
+    type: 'CheckoutConfirmation',
+    visible: { $state: '/lastReceipt' },
+    props: checkoutConfirmationProps,
+    on: { continueShopping: { action: 'continueShopping' } },
+  },
+  'checkout.empty': {
+    type: 'CheckoutEmpty',
+    visible: {
+      $and: [
+        { $state: '/lastReceipt', not: true },
+        { $state: '/cartQuantity', eq: 0 },
+        // Show the empty state when there is no active cart and no receipt to
+        // recover, or when an active cart exists (even empty). A signed receipt
+        // with no active cart is reconciled by the boot, not shown as empty.
+        {
+          $or: [{ $state: '/receiptAvailable', not: true }, { $state: '/cartId' }],
+        },
+      ],
+    },
+    props: {},
+    on: { continueShopping: { action: 'continueShopping' } },
+  },
+  'checkout.view': {
+    type: 'Checkout',
+    visible: {
+      $and: [{ $state: '/lastReceipt', not: true }, { $state: '/cartQuantity', gt: 0 }],
+    },
+    props: checkoutViewProps,
+    on: {
+      placeOrder: { action: 'placeOrder' },
+      reconcileOrder: { action: 'reconcileOrder' },
+      syncCheckoutAddress: { action: 'syncCheckoutAddress' },
+      selectShippingMethod: { action: 'selectShippingMethod' },
+    },
+  },
+}
+
+const catalog = {
+  CheckoutBoot: {
+    props: checkoutEmptyPropsSchema,
+    description: 'Headless checkout bootstrap: loads form data or reconciles a receipt.',
+  },
+  Checkout: {
+    props: checkoutPropsSchema,
+    description: 'Checkout form with order summary, shipping and payment steps.',
+  },
+  CheckoutEmpty: {
+    props: checkoutEmptyPropsSchema,
+    description: 'Empty-cart state for the checkout route.',
+  },
+  CheckoutConfirmation: {
+    props: checkoutConfirmationPropsSchema,
+    description: 'Order confirmation with fulfilment progress.',
+  },
+}
+
+export const checkout: ViewModule = {
+  name: 'checkout',
+  elements,
+  catalog,
+  registry,
+  route: {
+    path: '/checkout',
+    loaderName: 'checkout',
+    layout: 'default',
+    metadata: {
+      title: 'Finalizar compra',
+      description: 'Completa tus datos de envío y pago para recibir tu pedido.',
+    },
+    entry: pageRoot(
+      'checkout',
+      ['checkout.boot', 'checkout.confirmation', 'checkout.empty', 'checkout.view'],
+      elements,
+    ),
+  },
+  loader: {
+    checkout: async () => ({ dataSource: getDataSource(), dataError: null }),
+  },
+}

package/assets/templates/views/checkout/props.ts

@@ -0,0 +1,49 @@
+// Thor Commerce view props: checkout
+// User-owned element props for the checkout view. Reconcile seeds this file once
+// and never rewrites it; the derived view module (./index.tsx) imports these
+// objects and binds them into the element tree, so edits here survive
+// `storefront sync` and unit removal. Plain data only: no React and no server
+// imports.
+
+import { checkoutContent, confirmationContent } from './content'
+
+export const checkoutViewProps = {
+  ...checkoutContent,
+  // Backend-authoritative summary: line totals and cart totals come from the
+  // backend cart state, never computed here.
+  orderSummary: {
+    items: { $state: '/cart' },
+    totals: { $state: '/cartTotals' },
+  },
+  countries: { $state: '/checkoutCountries' },
+  shippingOptions: { $state: '/checkoutShippingOptions' },
+  selectedShippingOptionId: { $state: '/checkoutSelectedShippingOptionId' },
+  paymentMethods: { $state: '/checkoutPaymentMethods' },
+  fieldErrors: { $state: '/checkoutFieldErrors' },
+  values: {
+    email: { $state: '/checkout/email' },
+    firstName: { $state: '/checkout/firstName' },
+    lastName: { $state: '/checkout/lastName' },
+    phone: { $state: '/checkout/phone' },
+    address: { $state: '/checkout/address' },
+    city: { $state: '/checkout/city' },
+    state: { $state: '/checkout/state' },
+    zipCode: { $state: '/checkout/zipCode' },
+    country: { $state: '/checkout/country' },
+    paymentMethod: { $state: '/checkout/paymentMethod' },
+    cardNumber: { $state: '/checkout/cardNumber' },
+    expiryDate: { $state: '/checkout/expiryDate' },
+    cvv: { $state: '/checkout/cvv' },
+    cardName: { $state: '/checkout/cardName' },
+    saveInfo: { $state: '/checkout/saveInfo' },
+    sameAsBilling: { $state: '/checkout/sameAsBilling' },
+    newsletter: { $state: '/checkout/newsletter' },
+    promoCode: { $state: '/checkout/promoCode' },
+  },
+}
+
+export const checkoutConfirmationProps = {
+  // One atomic state path carries the order and its backend lines together.
+  receipt: { $state: '/lastReceipt' },
+  ...confirmationContent,
+}

package/assets/templates/views/checkout/registry.tsx

@@ -0,0 +1,217 @@
+'use client'
+
+// Thor Commerce view registry fragment: checkout
+// Client boundary for the checkout view. Imports value bindings from
+// @json-render/react and components from @thorprovider/blocks — both must stay
+// on the client side of the RSC graph. Kept separate from index.tsx so the view
+// spec (elements/catalog/route/loader) stays a pure Server Component module.
+
+import { useEffect, useRef } from 'react'
+import {
+  Button,
+  CheckoutForm1 as CheckoutBlock,
+  CheckoutConfirmation as CheckoutConfirmationBlock,
+} from '@thorprovider/blocks'
+import { useStateStore } from '@json-render/react'
+import { loadCheckoutAction, reconcileReceiptAction } from '../../actions'
+import type { CartStatePatch, PlaceOrderResult } from '../../commerce'
+import type { ViewRegistry } from '../types'
+import { checkoutConfirmationPropsSchema, checkoutPropsSchema } from './schema'
+
+// Address fields whose change can complete the address; when the full address
+// is present the handler syncs it to the backend and loads eligible shipping.
+const ADDRESS_FIELDS = new Set([
+  'email',
+  'firstName',
+  'lastName',
+  'phone',
+  'address',
+  'city',
+  'state',
+  'zipCode',
+  'country',
+])
+
+export const registry: ViewRegistry = {
+  /**
+   * Headless bootstrap rendered on the checkout route. It loads the checkout
+   * data (countries/payment methods/cart) for an active cart, or reconciles a
+   * completed receipt through the cookie-authorized Server Action. It never
+   * reads a bare order/cart id.
+   */
+  CheckoutBoot: () => {
+    const { state, set } = useStateStore()
+    const booted = useRef(false)
+    useEffect(() => {
+      if (booted.current) return
+      booted.current = true
+
+      const applyResult = (result: PlaceOrderResult) => {
+        set('/checkoutPending', false)
+        if (result.status === 'order') {
+          // ONE atomic write carries the order and its backend lines, so an SSR
+          // refresh cannot drop the lines.
+          set('/lastReceipt', { order: result.order, lines: result.lines })
+          set('/orderStatus', 'complete')
+          set('/checkoutError', null)
+          set('/checkoutErrorKind', null)
+          set('/cart', [])
+          set('/cartTotals', null)
+          set('/cartId', null)
+          set('/cartQuantity', 0)
+          set('/cartCompleted', true)
+          set('/checkoutSelectedShippingOptionId', null)
+          return
+        }
+        set('/orderStatus', result.status === 'cart-error' ? 'error' : result.status)
+        set('/checkoutErrorKind', result.status)
+        set('/checkoutError', result.message)
+      }
+
+      const bootError = (scope: string) => (error: unknown) => {
+        // Never swallow: log a non-secret context line and surface a message.
+        console.error(
+          `[storefront/checkout] ${scope} failed`,
+          error instanceof Error ? error.message : error,
+        )
+        set('/checkoutPending', false)
+        set('/checkoutError', 'No se pudo cargar el checkout. Inténtalo de nuevo.')
+        set('/checkoutErrorKind', 'error')
+      }
+
+      // 1. An active cart the backend already committed is an unresolved
+      //    completion: reconcile IT first (never a blind retry).
+      // 2. Otherwise ANY active cart (even empty) loads the checkout form; the
+      //    signed receipt is NOT auto-recovered while an active cart exists.
+      // 3. Only with no active cart does a signed receipt proof recover the
+      //    completed order.
+      if (state.cartId && state.cartCompleted) {
+        set('/checkoutPending', true)
+        void reconcileReceiptAction().then(applyResult).catch(bootError('reconcileReceipt'))
+        return
+      }
+      if (state.cartId) {
+        set('/checkoutPending', true)
+        void loadCheckoutAction()
+          .then((result) => {
+            set('/checkoutPending', false)
+            if (!result.ok) {
+              set('/checkoutError', result.error)
+              set('/checkoutErrorKind', 'error')
+              return
+            }
+            const cart = result.cart as CartStatePatch
+            set('/cart', cart.cart)
+            set('/cartTotals', cart.cartTotals)
+            set('/cartId', cart.cartId)
+            set('/cartQuantity', cart.cartQuantity)
+            set('/cartSelectedShippingOptionId', cart.cartSelectedShippingOptionId)
+            set('/checkoutSelectedShippingOptionId', cart.cartSelectedShippingOptionId)
+            if (result.countries) set('/checkoutCountries', result.countries)
+            if (result.paymentMethods) set('/checkoutPaymentMethods', result.paymentMethods)
+            if (result.shippingOptions) set('/checkoutShippingOptions', result.shippingOptions)
+            set('/checkoutError', null)
+          })
+          .catch(bootError('loadCheckout'))
+        return
+      }
+      if (state.receiptAvailable) {
+        set('/checkoutPending', true)
+        void reconcileReceiptAction().then(applyResult).catch(bootError('reconcileReceipt'))
+      }
+    }, [])
+    return null
+  },
+  Checkout: ({ props, emit }) => {
+    const { state, set } = useStateStore()
+    const parsed = checkoutPropsSchema.parse(props)
+    const unresolved = state.checkoutErrorKind === 'unresolved'
+    const cartError = typeof state.cartError === 'string' ? state.cartError : undefined
+    const checkoutError = typeof state.checkoutError === 'string' ? state.checkoutError : undefined
+    return (
+      <CheckoutBlock
+        title={parsed.title}
+        description={parsed.description}
+        orderSummary={parsed.orderSummary}
+        totalsState={state.cartPending ? 'pending' : cartError ? 'error' : 'idle'}
+        totalsErrorLabel={cartError}
+        onRetryTotals={() => emit('syncCheckoutAddress')}
+        countries={parsed.countries}
+        shippingOptions={parsed.shippingOptions}
+        selectedShippingOptionId={parsed.selectedShippingOptionId ?? undefined}
+        onSelectShippingOption={(id) => {
+          set('/checkoutSelectedShippingOptionId', id)
+          emit('selectShippingMethod')
+        }}
+        paymentMethods={parsed.paymentMethods}
+        values={parsed.values}
+        fieldErrors={parsed.fieldErrors}
+        fieldDescriptions={parsed.fieldDescriptions}
+        collectCardFields={false}
+        onChange={(field, value) => {
+          set(`/checkout/${field}`, value)
+          if (ADDRESS_FIELDS.has(field)) emit('syncCheckoutAddress')
+        }}
+        onSubmit={() => emit('placeOrder')}
+        submitting={Boolean(state.checkoutPending)}
+        submitError={checkoutError}
+        // An ambiguous completion offers RECONCILE only; a definite failure
+        // (cart-with-error or pre-completion error) offers a controlled retry.
+        onRetrySubmit={unresolved ? () => emit('reconcileOrder') : () => emit('placeOrder')}
+        submitErrorActionLabel={unresolved ? 'Reconciliar' : 'Reintentar'}
+      />
+    )
+  },
+  CheckoutEmpty: ({ emit }) => (
+    <div className="mx-auto max-w-md px-4 py-16 text-center">
+      <h1 className="text-2xl font-bold">Tu carrito está vacío</h1>
+      <p className="text-muted-foreground mt-2 text-sm">
+        Agrega productos para finalizar la compra.
+      </p>
+      <Button className="mt-6" onClick={() => emit('continueShopping')}>
+        Seguir comprando
+      </Button>
+    </div>
+  ),
+  CheckoutConfirmation: ({ props, emit }) => {
+    const parsed = checkoutConfirmationPropsSchema.parse(props)
+    // Forward every neutral label from user-owned content to the block, so the
+    // curated flow never falls back to the block's non-neutral defaults.
+    return (
+      <CheckoutConfirmationBlock
+        order={parsed.receipt.order}
+        orderLines={parsed.receipt.lines}
+        fulfilmentDetails={parsed.fulfilmentDetails}
+        titleLabel={parsed.titleLabel}
+        orderPlacedLabel={parsed.orderPlacedLabel}
+        orderPlacedNoEmailLabel={parsed.orderPlacedNoEmailLabel}
+        itemsLabel={parsed.itemsLabel}
+        quantityLabel={parsed.quantityLabel}
+        subtotalLabel={parsed.subtotalLabel}
+        discountLabel={parsed.discountLabel}
+        shippingLabel={parsed.shippingLabel}
+        taxLabel={parsed.taxLabel}
+        totalLabel={parsed.totalLabel}
+        freeLabel={parsed.freeLabel}
+        amountUnavailableLabel={parsed.amountUnavailableLabel}
+        shippingAddressLabel={parsed.shippingAddressLabel}
+        billingAddressLabel={parsed.billingAddressLabel}
+        continueShoppingLabel={parsed.continueShoppingLabel}
+        contactSupportLabel={parsed.contactSupportLabel}
+        supportLabel={parsed.supportLabel}
+        progressLabel={parsed.progressLabel}
+        estimatedDeliveryLabel={parsed.estimatedDeliveryLabel}
+        currentStageLabel={parsed.currentStageLabel}
+        inProgressLabel={parsed.inProgressLabel}
+        expectedByLabel={parsed.expectedByLabel}
+        completedLabel={parsed.completedLabel}
+        statusLabel={parsed.statusLabel}
+        locationLabel={parsed.locationLabel}
+        trackOrderLabel={parsed.trackOrderLabel}
+        continueShoppingHref={parsed.continueShoppingHref ?? '#'}
+        supportHref={parsed.supportHref}
+        onContinueShopping={() => emit('continueShopping')}
+      />
+    )
+  },
+}

package/assets/templates/views/checkout/schema.ts

@@ -0,0 +1,229 @@
+// Thor Commerce view schema fragment: checkout
+// Zod mirrors of the block contracts for this view — the single source for the
+// catalog entries and the client-side registry parsing (json-render does not
+// validate props against the catalog itself, so the registry parses here).
+// Kept free of React and server imports so the Server Component module and the
+// 'use client' registry can share one contract. Block zod contracts are
+// mirrored, not imported: @thorprovider/blocks ships zod v3 while the scaffold
+// runs zod v4 and cross-major schema assignment breaks the catalog contract.
+
+import { z } from 'zod'
+
+// Canonical Money: a decimal string in major units, never cents.
+const moneySchema = z.object({
+  amount: z.string(),
+  currencyCode: z.string(),
+})
+
+// Mirrors the CheckoutForm1FormData block contract. Card fields stay in the
+// shape (the block requires every key) but are never collected at launch.
+export const checkoutFormDataSchema = z.object({
+  email: z.string(),
+  firstName: z.string(),
+  lastName: z.string(),
+  phone: z.string(),
+  address: z.string(),
+  city: z.string(),
+  state: z.string(),
+  zipCode: z.string(),
+  country: z.string(),
+  paymentMethod: z.string(),
+  cardNumber: z.string(),
+  expiryDate: z.string(),
+  cvv: z.string(),
+  cardName: z.string(),
+  saveInfo: z.boolean(),
+  sameAsBilling: z.boolean(),
+  newsletter: z.boolean(),
+  promoCode: z.string(),
+})
+
+// Mirrors CheckoutForm1OrderSummaryItem: backend line total preferred, legacy
+// numeric price accepted only as a fallback; optional image omitted when absent.
+export const orderSummaryItemSchema = z.object({
+  id: z.union([z.string(), z.number()]),
+  name: z.string(),
+  variant: z.string().optional(),
+  quantity: z.number(),
+  lineTotal: moneySchema.optional(),
+  price: z.number().optional(),
+  image: z.string().optional(),
+})
+
+// Mirrors CheckoutForm1Totals (backend-authoritative).
+export const checkoutTotalsSchema = z.object({
+  subtotal: moneySchema,
+  discount: moneySchema.optional(),
+  tax: moneySchema.optional(),
+  shipping: moneySchema.optional(),
+  total: moneySchema,
+})
+
+export const orderSummarySchema = z.object({
+  items: z.array(orderSummaryItemSchema),
+  totals: checkoutTotalsSchema.optional(),
+  shipping: z.number().optional(),
+  tax: z.number().optional(),
+  discount: z.number().optional(),
+  promoDiscount: z.number().optional(),
+})
+
+export const countryOptionSchema = z.object({
+  value: z.string(),
+  label: z.string(),
+})
+
+// Mirrors CheckoutForm1ShippingOption (backend shipping method id).
+export const shippingOptionSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  price: moneySchema.optional(),
+  description: z.string().optional(),
+  estimatedDays: z.string().optional(),
+})
+
+// Mirrors CheckoutFieldErrors: per-field structured messages.
+export const checkoutFieldErrorsSchema = z.record(
+  z.string(),
+  z.array(z.object({ message: z.string().optional() })),
+)
+
+// Mirrors the PaymentMethod contract from @thorprovider/types.
+export const paymentMethodSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  type: z.enum([
+    'card',
+    'wallet',
+    'bank_transfer',
+    'buy_now_pay_later',
+    'cash_on_delivery',
+    'crypto',
+    'other',
+  ]),
+  isEnabled: z.boolean(),
+  requiresSetup: z.boolean(),
+  description: z.string().optional(),
+  metadata: z.record(z.string(), z.unknown()).optional(),
+  features: z
+    .object({
+      saveForLater: z.boolean().optional(),
+      installmentPayment: z.boolean().optional(),
+      recurring: z.boolean().optional(),
+    })
+    .optional(),
+})
+
+export const checkoutPropsSchema = z.object({
+  title: z.string().optional(),
+  description: z.string().optional(),
+  orderSummary: orderSummarySchema.optional(),
+  countries: z.array(countryOptionSchema).optional(),
+  shippingOptions: z.array(shippingOptionSchema).optional(),
+  // Nullable: the state initializes to `null` and the block prop is optional.
+  selectedShippingOptionId: z.string().nullable().optional(),
+  paymentMethods: z.array(paymentMethodSchema).optional(),
+  values: checkoutFormDataSchema,
+  fieldErrors: checkoutFieldErrorsSchema.optional(),
+  fieldDescriptions: z.record(z.string(), z.string()).optional(),
+})
+
+// The empty-cart surface has no props; declared so the catalog is complete.
+export const checkoutEmptyPropsSchema = z.object({})
+
+export const fulfilmentStageSchema = z.enum(['Confirmed', 'Packed', 'Shipped', 'Delivered'])
+
+const orderAddressSchema = z.object({
+  name: z.string(),
+  lines: z.array(z.string()),
+  method: z.string().optional(),
+})
+
+const orderTotalsSchema = z.object({
+  subtotal: moneySchema.optional(),
+  discount: moneySchema.optional(),
+  shipping: moneySchema.optional(),
+  tax: moneySchema.optional(),
+  total: moneySchema.optional(),
+})
+
+// Mirrors the CheckoutConfirmation Order block contract: backend Money totals,
+// optional fields rendered only when the backend supplies them (no fabricated
+// estimate or stage).
+export const storefrontOrderSchema = z.object({
+  number: z.string(),
+  placedAt: z.string(),
+  email: z.string().optional(),
+  currentStage: fulfilmentStageSchema.optional(),
+  estimatedDelivery: z.string().nullable().optional(),
+  trackingHref: z.string().optional(),
+  shipping: orderAddressSchema.optional(),
+  billing: orderAddressSchema.optional(),
+  totals: orderTotalsSchema,
+})
+
+export const orderLineSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  variant: z.string().optional(),
+  quantity: z.number(),
+  lineTotal: moneySchema,
+  unitPrice: moneySchema.optional(),
+  image: z.string().optional(),
+})
+
+export const fulfilmentStageDetailSchema = z.object({
+  stage: fulfilmentStageSchema,
+  summary: z.string(),
+  location: z.string(),
+  at: z.string().nullable(),
+})
+
+// The atomic receipt: the order and its backend lines arrive together.
+export const receiptSchema = z.object({
+  order: storefrontOrderSchema,
+  lines: z.array(orderLineSchema),
+})
+
+// Mirrors the CheckoutConfirmation props, including every neutral label the
+// host forwards. Labels are declared here so `z.object` does not strip them;
+// the registry forwards them to the block instead of relying on its defaults.
+export const checkoutConfirmationPropsSchema = z.object({
+  receipt: receiptSchema,
+  fulfilmentDetails: z.record(z.string(), fulfilmentStageDetailSchema).optional(),
+  titleLabel: z.string().optional(),
+  orderPlacedLabel: z.string().optional(),
+  orderPlacedNoEmailLabel: z.string().optional(),
+  itemsLabel: z.string().optional(),
+  quantityLabel: z.string().optional(),
+  subtotalLabel: z.string().optional(),
+  discountLabel: z.string().optional(),
+  shippingLabel: z.string().optional(),
+  taxLabel: z.string().optional(),
+  totalLabel: z.string().optional(),
+  freeLabel: z.string().optional(),
+  amountUnavailableLabel: z.string().optional(),
+  shippingAddressLabel: z.string().optional(),
+  billingAddressLabel: z.string().optional(),
+  continueShoppingLabel: z.string().optional(),
+  contactSupportLabel: z.string().optional(),
+  supportLabel: z.string().optional(),
+  progressLabel: z.string().optional(),
+  estimatedDeliveryLabel: z.string().optional(),
+  currentStageLabel: z.string().optional(),
+  inProgressLabel: z.string().optional(),
+  expectedByLabel: z.string().optional(),
+  completedLabel: z.string().optional(),
+  statusLabel: z.string().optional(),
+  locationLabel: z.string().optional(),
+  trackOrderLabel: z.string().optional(),
+  continueShoppingHref: z.string().optional(),
+  supportHref: z.string().optional(),
+})
+
+export type CheckoutFormData = z.infer<typeof checkoutFormDataSchema>
+export type OrderSummary = z.infer<typeof orderSummarySchema>
+export type CheckoutProps = z.infer<typeof checkoutPropsSchema>
+export type StorefrontOrder = z.infer<typeof storefrontOrderSchema>
+export type OrderLine = z.infer<typeof orderLineSchema>
+export type CheckoutConfirmationProps = z.infer<typeof checkoutConfirmationPropsSchema>

package/assets/templates/views/home/assembly/assembly.json

@@ -0,0 +1,33 @@
+{
+  "view": "home",
+  "slots": [
+    { "id": "home.hero", "slot": "hero", "default": "StorefrontHero1" },
+    { "id": "home.benefits", "slot": "benefits", "default": "Feature1" },
+    { "id": "home.categories", "slot": "categories", "default": "ProductCategory2" }
+  ],
+  "sections": {
+    "faq": {
+      "elementType": "Faq",
+      "registryModule": "../sections/faq.client",
+      "registryExport": "faqRegistry",
+      "propsModule": "./content",
+      "defaultProps": "{ items: [] }"
+    },
+    "cta": {
+      "elementType": "Cta",
+      "registryModule": "../sections/cta.client",
+      "registryExport": "ctaRegistry",
+      "propsModule": "./content",
+      "defaultProps": "{}"
+    },
+    "products": {
+      "elementType": "Products",
+      "registryModule": "../sections/products.client",
+      "registryExport": "productsRegistry",
+      "propsModule": "./content",
+      "defaultProps": "{}",
+      "dataBound": true,
+      "defaultVariant": "ProductCard1"
+    }
+  }
+}