@thorprovider/blocks 0.1.0 → 0.1.2

package/src/blocks/e-commerce/checkout-forms/checkout-form-1.test.tsx

@@ -0,0 +1,216 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import type { PaymentMethod } from '@thorprovider/types'
+import { CheckoutForm1PaymentStep } from './checkout-form-1-payment-step'
+import { CheckoutForm1ShippingStep } from './checkout-form-1-shipping-step'
+import { CheckoutForm1OrderSummary } from './checkout-form-1-order-summary'
+import type { CheckoutForm1FormData } from './checkout-form-1'
+
+const formData: CheckoutForm1FormData = {
+  email: '',
+  firstName: '',
+  lastName: '',
+  phone: '',
+  address: '',
+  city: '',
+  state: '',
+  zipCode: '',
+  country: 'US',
+  paymentMethod: 'pp_card',
+  cardNumber: '',
+  expiryDate: '',
+  cvv: '',
+  cardName: '',
+  saveInfo: false,
+  sameAsBilling: true,
+  newsletter: false,
+  promoCode: '',
+}
+
+const cardMethod: PaymentMethod = {
+  id: 'pp_card',
+  name: 'Tarjeta',
+  type: 'card',
+  isEnabled: true,
+  requiresSetup: true,
+  description: 'Paga con tarjeta',
+}
+
+const manualMethod: PaymentMethod = {
+  id: 'pp_system_default',
+  name: 'Pago manual TEST',
+  type: 'cash_on_delivery',
+  isEnabled: true,
+  requiresSetup: false,
+  description: 'Pago de prueba, sin tarjeta',
+}
+
+const noop = () => {}
+
+const formatMoney = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+describe('CheckoutForm1 payment step — launch flow collects no raw card data', () => {
+  it('renders no card fields by default even for a card-type method', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1PaymentStep
+        formData={formData}
+        onChange={noop}
+        onCardNumberChange={noop}
+        onExpiryChange={noop}
+        paymentMethods={[cardMethod]}
+      />,
+    )
+    expect(html).not.toContain('checkout-card-number')
+    expect(html).not.toContain('checkout-cvv')
+    expect(html).toContain('Paga con tarjeta')
+  })
+
+  it('renders the approved manual TEST provider label only', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1PaymentStep
+        formData={{ ...formData, paymentMethod: 'pp_system_default' }}
+        onChange={noop}
+        onCardNumberChange={noop}
+        onExpiryChange={noop}
+        paymentMethods={[manualMethod]}
+      />,
+    )
+    expect(html).toContain('Pago manual TEST')
+    expect(html).toContain('Pago de prueba, sin tarjeta')
+    expect(html).not.toContain('checkout-card-number')
+  })
+
+  it('renders card fields only in the explicit legacy mode', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1PaymentStep
+        formData={formData}
+        onChange={noop}
+        onCardNumberChange={noop}
+        onExpiryChange={noop}
+        paymentMethods={[cardMethod]}
+        collectCardFields
+      />,
+    )
+    expect(html).toContain('checkout-card-number')
+    expect(html).toContain('checkout-cvv')
+  })
+})
+
+describe('CheckoutForm1 shipping step — controlled eligible options', () => {
+  it('renders only the supplied eligible shipping options with their prices', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1ShippingStep
+        formData={formData}
+        onChange={noop}
+        countries={[{ value: 'US', label: 'Estados Unidos' }]}
+        shippingOptions={[
+          { id: 'sm_std', name: 'Estándar', price: { amount: '5.00', currencyCode: 'USD' } },
+          { id: 'sm_exp', name: 'Exprés', price: { amount: '15.00', currencyCode: 'USD' } },
+        ]}
+        selectedShippingOptionId='sm_exp'
+        onSelectShippingOption={noop}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).toContain('Estándar')
+    expect(html).toContain('Exprés')
+    expect(html).toContain('USD 5.00')
+    expect(html).toContain('USD 15.00')
+  })
+
+  it('renders no shipping section when no options are supplied', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1ShippingStep formData={formData} onChange={noop} />,
+    )
+    expect(html).not.toContain('Shipping method')
+  })
+})
+
+describe('CheckoutForm1 order summary — authoritative totals and states', () => {
+  const items = [
+    {
+      id: 'line_1',
+      name: 'Taladro',
+      variant: 'Rojo',
+      quantity: 2,
+      lineTotal: { amount: '90.00', currencyCode: 'USD' },
+    },
+  ]
+
+  it('renders backend-authoritative totals verbatim', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1OrderSummary
+        orderSummary={{
+          items,
+          totals: {
+            subtotal: { amount: '90.00', currencyCode: 'USD' },
+            tax: { amount: '7.20', currencyCode: 'USD' },
+            shipping: { amount: '5.00', currencyCode: 'USD' },
+            total: { amount: '102.20', currencyCode: 'USD' },
+          },
+        }}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).toContain('USD 90.00')
+    expect(html).toContain('USD 7.20')
+    expect(html).toContain('USD 5.00')
+    expect(html).toContain('USD 102.20')
+    expect(html).not.toContain('Free shipping on orders over')
+  })
+
+  it('renders a controlled pending state without inventing amounts', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1OrderSummary orderSummary={{ items }} totalsState='pending' />,
+    )
+    expect(html).toContain('Actualizando totales')
+    expect(html).not.toContain('Total')
+  })
+
+  it('never renders a fake zero for absent or malformed required totals', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1OrderSummary
+        orderSummary={{
+          items,
+          totals: {
+            subtotal: { amount: '', currencyCode: 'USD' },
+            total: { amount: 'abc', currencyCode: 'USD' },
+          },
+        }}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).not.toContain('USD 0')
+    expect(html).toContain('Totales no disponibles')
+  })
+
+  it('preserves a legitimate zero total', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1OrderSummary
+        orderSummary={{
+          items,
+          totals: {
+            subtotal: { amount: '0', currencyCode: 'USD' },
+            total: { amount: '0', currencyCode: 'USD' },
+          },
+        }}
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('Totales no disponibles')
+  })
+
+  it('renders a controlled error state with a recovery action', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutForm1OrderSummary
+        orderSummary={{ items }}
+        totalsState='error'
+        onRetryTotals={noop}
+      />,
+    )
+    expect(html).toContain('No se pudieron actualizar los totales')
+    expect(html).toContain('Reintentar')
+  })
+})

package/src/blocks/e-commerce/checkout-forms/checkout-form-1.tsx

@@ -11,7 +11,7 @@ import { CheckoutForm1PaymentStep } from './checkout-form-1-payment-step'
 import { CheckoutForm1OrderSummary } from './checkout-form-1-order-summary'
 import { CheckoutForm1Progress } from './checkout-form-1-progress'
 import { formatCardNumber, formatExpiryDate } from './card-formatting'
-import type { PaymentMethod } from '@thorprovider/types'
+import type { Money, PaymentMethod } from '@thorprovider/types'
 import type { CheckoutFieldErrors } from './checkout-form-types'
 
 export interface CheckoutForm1FormData {
@@ -44,17 +44,37 @@ export type CheckoutForm1FieldDescriptions = Partial<
 export interface CheckoutForm1OrderSummaryItem {
   id: string | number
   name: string
-  variant: string
-  price: number
+  variant?: string
   quantity: number
-  image: string
+  /** Canonical backend line total; preferred over `price * quantity`. */
+  lineTotal?: Money
+  /** @deprecated legacy numeric price, used only when `lineTotal` is absent. */
+  price?: number
+  /** Optional; an absent image is omitted rather than serialized as `""`. */
+  image?: string
 }
 
+export interface CheckoutForm1Totals {
+  subtotal: Money
+  discount?: Money
+  tax?: Money
+  shipping?: Money
+  total: Money
+}
+
+export type CheckoutForm1TotalsState = 'idle' | 'pending' | 'error'
+
 export interface CheckoutForm1OrderSummary {
   items: CheckoutForm1OrderSummaryItem[]
-  shipping: number
-  tax: number
+  /** Backend-authoritative totals; rendered verbatim when present. */
+  totals?: CheckoutForm1Totals
+  /** @deprecated legacy numeric amounts, used only when `totals` is absent. */
+  shipping?: number
+  /** @deprecated */
+  tax?: number
+  /** @deprecated */
   discount?: number
+  /** @deprecated */
   promoDiscount?: number
 }
 
@@ -63,6 +83,15 @@ export interface CheckoutForm1CountryOption {
   label: string
 }
 
+export interface CheckoutForm1ShippingOption {
+  /** Backend shipping method id — the controlled selection identity. */
+  id: string
+  name: string
+  price?: Money
+  description?: string
+  estimatedDays?: string
+}
+
 export type CheckoutForm1ChangeHandler = (
   field: keyof CheckoutForm1FormData,
   value: string | boolean
@@ -78,11 +107,35 @@ export interface CheckoutForm1Props {
   title?: string
   description?: string
   orderSummary?: CheckoutForm1OrderSummary
+  /** Controlled state of the totals fetch/mutation. */
+  totalsState?: CheckoutForm1TotalsState
+  totalsErrorLabel?: string
+  retryLabel?: string
+  onRetryTotals?: () => void
   countries?: CheckoutForm1CountryOption[]
+  /** Eligible shipping options for the cart's region/address. */
+  shippingOptions?: CheckoutForm1ShippingOption[]
+  /** Controlled selection of a shipping option id. */
+  selectedShippingOptionId?: string
+  onSelectShippingOption?: (id: string) => void
   paymentMethods?: PaymentMethod[]
   noPaymentMethodsLabel?: string
+  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
+  formatMoney?: (money: Money) => string
+  /**
+   * Raw card fields are legacy-only and never collected in the launch flow.
+   * Defaults to `false`: the curated surface renders no card inputs.
+   */
+  collectCardFields?: boolean
+  onApplyPromo?: (code: string) => void
+  promoPending?: boolean
+  promoApplyLabel?: string
+  promoPlaceholder?: string
+  /** Optional trust copy; rendered only when supplied (never fabricated). */
+  trustNotes?: string[]
   backLabel?: string
   completeOrderLabel?: string
+  processingLabel?: string
   continueLabel?: string
   values: CheckoutForm1FormData
   onChange: CheckoutForm1ChangeHandler
@@ -94,17 +147,35 @@ export interface CheckoutForm1Props {
   submitting?: boolean
   /** Order-level error surfaced above the footer actions. */
   submitError?: string
+  /** Optional recovery action for a failed submission. */
+  onRetrySubmit?: () => void
+  submitErrorActionLabel?: string
 }
 
 export default function CheckoutForm1({
   title,
   description,
   orderSummary,
+  totalsState = 'idle',
+  totalsErrorLabel,
+  retryLabel,
+  onRetryTotals,
   countries,
+  shippingOptions,
+  selectedShippingOptionId,
+  onSelectShippingOption,
   paymentMethods,
   noPaymentMethodsLabel,
+  formatMoney,
+  collectCardFields = false,
+  onApplyPromo,
+  promoPending = false,
+  promoApplyLabel,
+  promoPlaceholder,
+  trustNotes,
   backLabel = 'Atrás',
   completeOrderLabel = 'Completar pedido',
+  processingLabel = 'Procesando pedido…',
   continueLabel = 'Continuar',
   values,
   onChange,
@@ -114,6 +185,8 @@ export default function CheckoutForm1({
   onSubmit,
   submitting = false,
   submitError,
+  onRetrySubmit,
+  submitErrorActionLabel = 'Reintentar',
 }: CheckoutForm1Props) {
   const [step, setStep] = useState(1)
 
@@ -175,6 +248,10 @@ export default function CheckoutForm1({
                 formData={values}
                 onChange={onChange}
                 countries={countries}
+                shippingOptions={shippingOptions}
+                selectedShippingOptionId={selectedShippingOptionId}
+                onSelectShippingOption={onSelectShippingOption}
+                formatMoney={formatMoney}
                 fieldErrors={fieldErrors}
                 fieldDescriptions={fieldDescriptions}
               />
@@ -187,6 +264,7 @@ export default function CheckoutForm1({
                 onExpiryChange={handleExpiryChange}
                 paymentMethods={paymentMethods}
                 noPaymentMethodsLabel={noPaymentMethodsLabel}
+                collectCardFields={collectCardFields}
                 fieldErrors={fieldErrors}
                 fieldDescriptions={fieldDescriptions}
               />
@@ -195,9 +273,20 @@ export default function CheckoutForm1({
             {submitError && (
               <div
                 role="alert"
-                className="mt-6 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive"
+                className="mt-6 flex flex-wrap items-center justify-between gap-3 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive"
               >
-                {submitError}
+                <span>{submitError}</span>
+                {onRetrySubmit ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={onRetrySubmit}
+                    disabled={submitting}
+                  >
+                    {submitErrorActionLabel}
+                  </Button>
+                ) : null}
               </div>
             )}
 
@@ -213,7 +302,7 @@ export default function CheckoutForm1({
               {isLastStep ? (
                 <Button type="button" onClick={handleSubmit} disabled={submitting}>
                   <Lock className="size-4" />
-                  {submitting ? 'Procesando pedido…' : completeOrderLabel}
+                  {submitting ? processingLabel : completeOrderLabel}
                 </Button>
               ) : (
                 <Button type="button" onClick={handleContinue} disabled={submitting}>
@@ -226,10 +315,24 @@ export default function CheckoutForm1({
 
         {orderSummary && (
           <div className="lg:col-span-1">
-            <CheckoutForm1OrderSummary orderSummary={orderSummary} />
+            <CheckoutForm1OrderSummary
+              orderSummary={orderSummary}
+              totalsState={totalsState}
+              totalsErrorLabel={totalsErrorLabel}
+              retryLabel={retryLabel}
+              onRetryTotals={onRetryTotals}
+              promoCode={values.promoCode}
+              onPromoCodeChange={(value) => onChange('promoCode', value)}
+              onApplyPromo={onApplyPromo}
+              promoPending={promoPending}
+              promoApplyLabel={promoApplyLabel}
+              promoPlaceholder={promoPlaceholder}
+              trustNotes={trustNotes}
+              formatMoney={formatMoney}
+            />
           </div>
         )}
       </div>
     </div>
   )
-}
+}

package/src/blocks/e-commerce/navigation/mobile-category-drawer.test.tsx

@@ -102,8 +102,6 @@ describe('MobileCategoryDrawer', () => {
     expect(html).toContain('Ofertas')
     expect(html).toContain('Novedades')
     expect(html).toContain('href="/colecciones/ofertas"')
-    expect(html).toContain('href="/colecciones"')
-    expect(html).toContain('Ver todas')
     expect(html).toContain('grid grid-cols-2')
   })
 
@@ -149,4 +147,46 @@ describe('MobileCategoryDrawer', () => {
       }),
     ).toThrow()
   })
+})
+
+describe('MobileCategoryDrawer — view-all link requires a served href', () => {
+  const base = { categories, collections, open: true, onClose: () => {} }
+
+  it('omits the link and never emits an empty href when viewAllHref is omitted', () => {
+    const html = renderToStaticMarkup(<MobileCategoryDrawer {...base} />)
+    expect(html).not.toContain('Ver todas')
+    expect(html).not.toContain('href=""')
+  })
+
+  it('omits the link when viewAllHref is an empty string', () => {
+    const html = renderToStaticMarkup(<MobileCategoryDrawer {...base} viewAllHref="" />)
+    expect(html).not.toContain('Ver todas')
+    expect(html).not.toContain('href=""')
+  })
+
+  it('omits the link when viewAllHref is whitespace only', () => {
+    const html = renderToStaticMarkup(<MobileCategoryDrawer {...base} viewAllHref="   " />)
+    expect(html).not.toContain('Ver todas')
+    expect(html).not.toContain('href=""')
+  })
+
+  it('renders the link when a served path is supplied', () => {
+    const html = renderToStaticMarkup(
+      <MobileCategoryDrawer {...base} viewAllHref="/tienda/todas" />,
+    )
+    expect(html).toContain('href="/tienda/todas"')
+    expect(html).toContain('Ver todas')
+  })
+
+  it('renders a custom label with the served path', () => {
+    const html = renderToStaticMarkup(
+      <MobileCategoryDrawer
+        {...base}
+        viewAllHref="/tienda/todas"
+        viewAllLabel="Explorar todo"
+      />,
+    )
+    expect(html).toContain('href="/tienda/todas"')
+    expect(html).toContain('Explorar todo')
+  })
 })

package/src/blocks/e-commerce/navigation/mobile-category-drawer.tsx

@@ -59,7 +59,7 @@ export function MobileCategoryDrawer({
   rootTitle = 'Categorías',
   collectionsTitle = 'Colecciones',
   viewAllLabel = 'Ver todas',
-  viewAllHref = '/colecciones',
+  viewAllHref,
   closeAriaLabel = 'Cerrar menú',
   backAriaLabel = 'Volver',
   menuAriaLabel = 'Menú de categorías',
@@ -235,13 +235,15 @@ export function MobileCategoryDrawer({
                 >
                   {collectionsTitle}
                 </h2>
-                <a
-                  href={viewAllHref}
-                  onClick={handleClose}
-                  className="text-xs font-bold text-primary"
-                >
-                  {viewAllLabel}
-                </a>
+                {viewAllHref && viewAllHref.trim() ? (
+                  <a
+                    href={viewAllHref}
+                    onClick={handleClose}
+                    className="text-xs font-bold text-primary"
+                  >
+                    {viewAllLabel}
+                  </a>
+                ) : null}
               </div>
               <div className="grid grid-cols-2 gap-3">
                 {collections.map((collection) => (

package/src/blocks/e-commerce/product-categories/product-category-2.test.tsx

@@ -0,0 +1,51 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import {
+  ProductCategory2,
+  type ProductCategory2Category,
+} from './product-category-2'
+
+const base: ProductCategory2Category = {
+  id: 'cat-1',
+  name: 'Herramientas',
+  description: 'Taladros y accesorios',
+  image: '/products/drill.png',
+  trending: false,
+}
+
+const render = (category: ProductCategory2Category) =>
+  renderToStaticMarkup(<ProductCategory2 categories={[category]} />)
+
+// The count is the only text node that ends in "items" inside a span (the
+// `items-center` utility lives in a class attribute and is never followed by
+// `</span>`).
+const hasItemCount = (html: string) => html.includes('items</span>')
+
+describe('ProductCategory2 — optional itemCount', () => {
+  it('renders no count when itemCount is omitted (unknown projection)', () => {
+    const html = render(base)
+    expect(hasItemCount(html)).toBe(false)
+    // The tile itself still renders.
+    expect(html).toContain('Herramientas')
+    expect(html).toContain('Browse')
+  })
+
+  it('preserves a real zero count', () => {
+    const html = render({ ...base, itemCount: 0 })
+    expect(html).toContain('0 items</span>')
+  })
+
+  it('renders a positive count', () => {
+    const html = render({ ...base, itemCount: 7 })
+    expect(html).toContain('7 items</span>')
+  })
+
+  it('omits a negative count', () => {
+    expect(hasItemCount(render({ ...base, itemCount: -1 }))).toBe(false)
+  })
+
+  it('omits a non-finite count', () => {
+    expect(hasItemCount(render({ ...base, itemCount: Number.NaN }))).toBe(false)
+    expect(hasItemCount(render({ ...base, itemCount: Number.POSITIVE_INFINITY }))).toBe(false)
+  })
+})