@thorprovider/blocks 2.0.0 → 3.0.1

package/src/blocks/e-commerce/checkout-forms/checkbox-check.tsx

@@ -1,74 +0,0 @@
-'use client'
-
-import { useLayoutEffect, useRef, useState } from 'react'
-import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
-
-import { cn } from '../../../lib/utils'
-
-const BOX_MS = 150
-const DRAW_MS = 350
-const UNCHECK_MS = 150
-const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'
-
-export function CheckboxCheck({ className, indeterminate, ...props }: CheckboxPrimitive.Root.Props) {
-  const pathRef = useRef<SVGPathElement>(null)
-  const [length, setLength] = useState(15)
-
-  useLayoutEffect(() => {
-    const path = pathRef.current
-    if (path) {
-      setLength(Math.ceil(path.getTotalLength()))
-    }
-  }, [])
-
-  const mark = indeterminate ? 'M2.12 5.08H8.47' : 'M1.69 5.08L3.81 7.2L8.47 2.54'
-
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
-        'motion-reduce:transition-none',
-        className
-      )}
-      style={{ transition: `background-color ${BOX_MS}ms ${EASE}, border-color ${BOX_MS}ms ${EASE}` }}
-      indeterminate={indeterminate}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        keepMounted
-        data-slot="checkbox-indicator"
-        className={cn(
-          'grid size-3.5 place-content-center text-current',
-          '[&_path]:[transition:stroke-dashoffset_var(--check-uncheck)_var(--check-ease)]',
-          '[&_path]:[stroke-dashoffset:var(--check-len)]',
-          'data-checked:[&_path]:[stroke-dashoffset:0]',
-          'data-checked:[&_path]:[transition-duration:var(--check-draw)]',
-          'motion-reduce:[&_path]:transition-none'
-        )}
-        style={
-          {
-            '--check-len': length,
-            '--check-draw': `${DRAW_MS}ms`,
-            '--check-uncheck': `${UNCHECK_MS}ms`,
-            '--check-ease': EASE,
-          } as React.CSSProperties
-        }
-      >
-        <svg viewBox="0 0 10.1668 10.1668" fill="none" aria-hidden className="size-full overflow-visible">
-          <path
-            ref={pathRef}
-            d={mark}
-            stroke="currentColor"
-            strokeWidth={0.9}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            style={{ strokeDasharray: length }}
-          />
-        </svg>
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export default CheckboxCheck

package/src/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.tsx

@@ -1,195 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Check, Clock, MapPin, Truck } from 'lucide-react'
-import { Button } from '../../../ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../ui/tabs'
-import { cn } from '../../../lib/utils'
-import type { FulfilmentStage, FulfilmentStageDetail } from './checkout-confirmation'
-
-const longDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'long' })
-const stampDate = new Intl.DateTimeFormat('en-US', {
-  dateStyle: 'medium',
-  timeStyle: 'short',
-})
-
-const STAGE_LABELS: Record<FulfilmentStage, string> = {
-  Confirmed: 'Confirmado',
-  Packed: 'Empaquetado',
-  Shipped: 'Enviado',
-  Delivered: 'Entregado',
-}
-
-interface CheckoutConfirmationFulfilmentProgressProps {
-  order: {
-    currentStage?: FulfilmentStage
-    estimatedDelivery?: string | null
-    trackingHref?: string
-  }
-  /** Ordered by `Object.keys(fulfilmentDetails)` from the orchestrator. */
-  stages: FulfilmentStageDetail[]
-  progressLabel?: string
-  estimatedDeliveryLabel?: string
-  currentStageLabel?: string
-  inProgressLabel?: string
-  expectedByLabel?: string
-  completedLabel?: string
-  statusLabel?: string
-  locationLabel?: string
-  trackOrderLabel?: string
-  /** Kept for API symmetry with the orchestrator; the fulfilment card renders no prices. */
-  formatPrice?: (value: number) => string
-}
-
-/**
- * The four fulfilment stages, as tabs that actually open.
- *
- * This was a static `<ol>` that looked exactly like a tab strip — four labels with an underline
- * under each — and did nothing when pressed. A control that looks pressable and is not is worse
- * than no control: the reader tries it, nothing happens, and they conclude the page is broken
- * rather than that the row was decoration.
- *
- * So it is a real `Tabs`, and each stage opens the one thing a reader on this screen wants that
- * the label alone cannot give them: when it happened, where, and what it means. Radix Tabs
- * supplies roving focus, arrow-key movement and the tab/panel wiring; a row of buttons with a
- * `useState` would have to fake all three.
- *
- * Every stage is reachable, including ones still ahead — a reader is entitled to look at what
- * "Delivered" will mean before it happens. What a future stage does not get is a fabricated
- * timestamp; it says what it is waiting for instead.
- */
-export function CheckoutConfirmationFulfilmentProgress({
-  order,
-  stages,
-  progressLabel = 'Progreso',
-  estimatedDeliveryLabel = 'Entrega estimada',
-  currentStageLabel = 'Etapa actual',
-  inProgressLabel = 'En curso',
-  expectedByLabel = 'Se espera para',
-  completedLabel = 'Completada',
-  statusLabel = 'Estado',
-  locationLabel = 'Ubicación',
-  trackOrderLabel = 'Seguir este pedido',
-}: CheckoutConfirmationFulfilmentProgressProps) {
-  const currentIndex = order.currentStage
-    ? stages.findIndex(stage => stage.stage === order.currentStage)
-    : -1
-  const [selected, setSelected] = useState<string>(order.currentStage ?? stages[0]?.stage ?? '')
-
-  return (
-    <Card className='mt-10'>
-      <CardHeader>
-        <CardTitle className='flex flex-wrap items-center justify-between gap-2 text-base'>
-          {progressLabel}
-          {order.estimatedDelivery ? (
-            <span className='text-muted-foreground text-sm font-normal'>
-              {`${estimatedDeliveryLabel} ${longDate.format(new Date(order.estimatedDelivery))}`}
-            </span>
-          ) : null}
-        </CardTitle>
-      </CardHeader>
-
-      <CardContent>
-        <Tabs value={selected} onValueChange={value => setSelected(String(value))}>
-          {/*
-            `variant='line'` because these are stages along a route, not a segmented control —
-            the underline reads as progress in a way a filled pill does not.
-
-            `h-auto!` because `TabsList` pins itself to `h-8` through a
-            `group-data-horizontal/tabs:` variant, which a plain `h-auto` cannot outrank and
-            tailwind-merge does not treat as the same utility. Left alone it clipped the 24px
-            stage markers. The list scrolls rather than wrapping on a narrow screen, so the four
-            stages stay in one order.
-
-            `pb-2` is load-bearing, not spacing. `TabsTrigger` draws its active underline at
-            `bottom-[-5px]`, i.e. outside its own box, and CSS forces an axis to `auto` when the
-            other one is not `visible` — so asking for `overflow-x-auto` silently made the
-            vertical axis scrollable too, and those 7px of underline became a stray vertical
-            scrollbar beside the tabs at every width. The padding puts the underline back inside
-            the box, which leaves nothing to scroll.
-          */}
-          <TabsList variant='line' className='h-auto! w-full justify-start gap-2 overflow-x-auto p-0 pb-2'>
-            {stages.map((stage, index) => {
-              const done = index <= currentIndex
-
-              return (
-                <TabsTrigger key={stage.stage} value={stage.stage} className='h-auto flex-1 justify-start gap-2 px-1 py-2'>
-                  <span
-                    aria-hidden='true'
-                    className={cn(
-                      'flex size-6 shrink-0 items-center justify-center rounded-full text-xs',
-                      done ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
-                    )}
-                  >
-                    {done ? <Check className='size-3.5' /> : index + 1}
-                  </span>
-                  {STAGE_LABELS[stage.stage]}
-                  {/*
-                    The stage the order is actually at, marked on the strip itself. Without it
-                    the only sign of "where we are" would be whichever tab happens to be open,
-                    which changes the moment the reader looks at another one.
-                  */}
-                  {index === currentIndex ? <span className='sr-only'>{currentStageLabel}</span> : null}
-                  {index === currentIndex ? (
-                    <span aria-hidden='true' className='bg-primary size-1.5 shrink-0 rounded-full' />
-                  ) : null}
-                </TabsTrigger>
-              )
-            })}
-          </TabsList>
-
-          {stages.map((detail, index) => {
-            const done = index <= currentIndex
-
-            return (
-              <TabsContent key={detail.stage} value={detail.stage} className='pt-4'>
-                {index === currentIndex ? (
-                  <p className='text-primary mb-2 text-xs font-medium tracking-[0.12em] uppercase'>
-                    {currentStageLabel}
-                  </p>
-                ) : null}
-                <p className='text-sm'>{detail.summary}</p>
-
-                <dl className='text-muted-foreground mt-3 flex flex-col gap-1.5 text-sm sm:flex-row sm:gap-6'>
-                  <div className='flex items-center gap-2'>
-                    <dt className='sr-only'>{detail.at ? completedLabel : statusLabel}</dt>
-                    <Clock className='size-4 shrink-0' aria-hidden='true' />
-                    <dd className='tabular-nums'>
-                      {detail.at
-                        ? stampDate.format(new Date(detail.at))
-                        : done
-                          ? inProgressLabel
-                          : order.estimatedDelivery
-                            ? `${expectedByLabel} ${longDate.format(new Date(order.estimatedDelivery))}`
-                            : null}
-                    </dd>
-                  </div>
-
-                  <div className='flex items-center gap-2'>
-                    <dt className='sr-only'>{locationLabel}</dt>
-                    <MapPin className='size-4 shrink-0' aria-hidden='true' />
-                    <dd>{detail.location}</dd>
-                  </div>
-                </dl>
-              </TabsContent>
-            )
-          })}
-        </Tabs>
-
-        {/*
-          Render as an anchor through Radix `asChild` when a real tracking URL exists; with no
-          href the button is omitted rather than pointing at a fabricated destination.
-        */}
-        {order.trackingHref ? (
-          <Button className='mt-6 w-full sm:w-auto' asChild>
-            <a href={order.trackingHref}>
-              <Truck />
-              {trackOrderLabel}
-            </a>
-          </Button>
-        ) : null}
-      </CardContent>
-    </Card>
-  )
-}

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

@@ -1,136 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import { CheckoutConfirmation, type Order, type OrderLine } from './checkout-confirmation'
-
-const order: Order = {
-  number: '1001',
-  placedAt: '2026-10-06T00:00:00.000Z',
-  totals: {},
-}
-
-const orderLines: OrderLine[] = [
-  { id: 'l1', name: 'Taladro', quantity: 1, lineTotal: { amount: '45.00', currencyCode: 'USD' } },
-  {
-    id: 'l2',
-    name: 'Batería',
-    quantity: 2,
-    lineTotal: { amount: '40.00', currencyCode: 'USD' },
-    image: '',
-  },
-]
-
-describe('CheckoutConfirmation — truthful optional data', () => {
-  it('omits email, ETA, progress, addresses, and totals when the backend supplies none', () => {
-    const html = renderToStaticMarkup(<CheckoutConfirmation order={order} orderLines={orderLines} />)
-    expect(html).toContain('Pedido 1001 realizado')
-    expect(html).not.toContain('Enviamos la confirmación')
-    expect(html).not.toContain('Entrega estimada')
-    expect(html).not.toContain('Progreso')
-    expect(html).not.toContain('Subtotal')
-    expect(html).not.toContain('Total')
-    expect(html).not.toContain('Gratis')
-    expect(html).not.toContain('Facturación')
-  })
-
-  it('renders supplied email, totals, and a zero-shipping free label', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutConfirmation
-        order={{
-          ...order,
-          email: 'ana@example.com',
-          totals: {
-            subtotal: { amount: '85.00', currencyCode: 'USD' },
-            shipping: { amount: '0', currencyCode: 'USD' },
-            tax: { amount: '6.80', currencyCode: 'USD' },
-            total: { amount: '91.80', currencyCode: 'USD' },
-          },
-        }}
-        orderLines={orderLines}
-        formatPrice={money => `${money.currencyCode} ${money.amount}`}
-      />,
-    )
-    expect(html).toContain('ana@example.com')
-    expect(html).toContain('USD 85.00')
-    expect(html).toContain('Gratis')
-    expect(html).toContain('USD 91.80')
-  })
-
-  it('renders the fulfilment progress only when stages and a current stage are supplied', () => {
-    const withProgress = renderToStaticMarkup(
-      <CheckoutConfirmation
-        order={{ ...order, currentStage: 'Confirmed', estimatedDelivery: '2026-10-10T00:00:00.000Z' }}
-        orderLines={orderLines}
-        fulfilmentDetails={{
-          Confirmed: { stage: 'Confirmed', summary: 'Confirmado', location: 'Bodega', at: '2026-10-06T00:00:00.000Z' },
-          Packed: { stage: 'Packed', summary: 'Empaquetado', location: 'Bodega', at: null },
-          Shipped: { stage: 'Shipped', summary: 'Enviado', location: 'Bodega', at: null },
-          Delivered: { stage: 'Delivered', summary: 'Entregado', location: 'Bodega', at: null },
-        }}
-      />,
-    )
-    expect(withProgress).toContain('Progreso')
-    expect(withProgress).toContain('Entrega estimada')
-
-    const withoutProgress = renderToStaticMarkup(
-      <CheckoutConfirmation order={order} orderLines={orderLines} />,
-    )
-    expect(withoutProgress).not.toContain('Progreso')
-  })
-
-  it('omits an absent line image without emitting an empty src', () => {
-    const html = renderToStaticMarkup(<CheckoutConfirmation order={order} orderLines={orderLines} />)
-    expect(html).not.toMatch(/src=""/)
-  })
-
-  it('renders duplicate address lines without colliding keys', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutConfirmation
-        order={{
-          ...order,
-          shipping: { name: 'Ana', lines: ['Calle 1', 'Calle 1'] },
-        }}
-        orderLines={orderLines}
-      />,
-    )
-    expect((html.match(/Calle 1/g) ?? []).length).toBe(2)
-  })
-
-  it('never renders a fake zero for absent or malformed line/total amounts', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutConfirmation
-        order={{
-          ...order,
-          totals: {
-            subtotal: { amount: '', currencyCode: 'USD' },
-            total: { amount: 'abc', currencyCode: 'USD' },
-          },
-        }}
-        orderLines={[
-          { id: 'l1', name: 'Pieza', quantity: 1, lineTotal: { amount: '', currencyCode: 'USD' } },
-        ]}
-        formatPrice={money => `${money.currencyCode} ${money.amount}`}
-      />,
-    )
-    expect(html).not.toContain('USD 0')
-    expect(html).toContain('—')
-  })
-
-  it('preserves a legitimate zero shipping and total', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutConfirmation
-        order={{
-          ...order,
-          totals: {
-            subtotal: { amount: '0', currencyCode: 'USD' },
-            shipping: { amount: '0', currencyCode: 'USD' },
-            total: { amount: '0', currencyCode: 'USD' },
-          },
-        }}
-        orderLines={orderLines}
-        formatPrice={money => `${money.currencyCode} ${money.amount}`}
-      />,
-    )
-    expect(html).toContain('USD 0')
-    expect(html).toContain('Gratis')
-  })
-})