@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/checkout-commerce-v1/view/confirmation-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/confirmation-view.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { Badge } from '../../../../ui/badge';\nimport { Button } from '../../../../ui/button';\nimport { PRODUCT_IMAGE_FALLBACK } from '../../../../lib/contracts';\nimport {\n  addressSummary,\n  amountText,\n  countLabel,\n  fill,\n  isFiniteAmount,\n  money,\n  taxLabel,\n} from './format';\nimport { SummaryRow } from './summary-row';\nimport type { CheckoutConfirmation, CheckoutCopy } from './types';\n\nexport type CheckoutConfirmationViewProps = {\n  confirmation: CheckoutConfirmation;\n  labels: CheckoutCopy;\n  locale: string;\n  currencyCode: string;\n  onContinueShopping?: () => void;\n};\n\n/**\n * The designer's confirmed-order screen, extracted unchanged from\n * CheckoutView. It is driven only by host data: no fixtures, no money\n * computation, no success claim beyond the confirmed order it receives.\n */\nexport function CheckoutConfirmationView({\n  confirmation,\n  labels,\n  locale,\n  currencyCode,\n  onContinueShopping,\n}: CheckoutConfirmationViewProps) {\n  const uid = useId();\n  const currency = { locale, currencyCode };\n  const itemsLabel = isFiniteAmount(confirmation.unitCount)\n    ? countLabel(\n        confirmation.unitCount,\n        labels.summaryItemOne,\n        fill(labels.summaryItems, { count: confirmation.unitCount }),\n      )\n    : '';\n  const deliveriesLabel = countLabel(\n    confirmation.groups.length,\n    labels.deliveriesOne,\n    fill(labels.deliveriesMany, { count: confirmation.groups.length }),\n  );\n  const purchaseBreakdown = itemsLabel\n    ? fill(labels.purchaseBreakdown, { items: itemsLabel, deliveries: deliveriesLabel })\n    : deliveriesLabel;\n  const orderSteps = [\n    {\n      title: labels.confirmationNextOneTitle,\n      body: labels.confirmationNextOneBody,\n    },\n    {\n      title: labels.confirmationNextTwoTitle,\n      body: labels.confirmationNextTwoBody,\n    },\n    {\n      title: labels.confirmationNextThreeTitle,\n      body: labels.confirmationNextThreeBody,\n    },\n  ];\n  return (\n    <div className=\"mx-auto flex w-full max-w-2xl flex-col gap-4\">\n      <section\n        aria-labelledby={`${uid}-confirmed`}\n        className=\"rounded-xl border border-success/40 bg-card p-5 sm:p-6\"\n      >\n        <div className=\"flex items-start gap-3\">\n          <span\n            aria-hidden=\"true\"\n            className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-success/10 text-base font-semibold text-success\"\n          >\n            {labels.checkSymbol}\n          </span>\n          <div className=\"min-w-0\">\n            <Badge variant={'secondary'}>{labels.confirmationBadge}</Badge>\n            <h2 id={`${uid}-confirmed`} className=\"mt-2 text-xl font-semibold tracking-tight\">\n              {labels.confirmationTitle}\n            </h2>\n            <p className=\"mt-1 text-sm text-muted-foreground\">\n              {fill(labels.confirmationBody, { name: confirmation.customerName })}\n            </p>\n            <p className=\"mt-1 text-xs text-muted-foreground\">\n              {fill(labels.confirmationEmailNote, { email: confirmation.customerEmail })}\n            </p>\n          </div>\n        </div>\n        <dl className=\"mt-4 grid gap-2 rounded-lg bg-muted/40 px-3 py-2 sm:grid-cols-2\">\n          <div>\n            <dt className=\"text-xs text-muted-foreground\">{labels.confirmationReference}</dt>\n            <dd className=\"text-sm font-medium tabular-nums\">{confirmation.reference}</dd>\n          </div>\n          <div className=\"sm:text-right\">\n            <dt className=\"text-xs text-muted-foreground\">{labels.confirmationTotal}</dt>\n            <dd className=\"text-sm font-semibold tabular-nums\">\n              {money(confirmation.totalCents, currency)}\n            </dd>\n          </div>\n        </dl>\n        <p className=\"mt-2 text-xs text-muted-foreground\">{labels.confirmationReferenceNote}</p>\n      </section>\n\n      <section\n        aria-labelledby={`${uid}-next`}\n        className=\"rounded-xl border border-border bg-card p-5\"\n      >\n        <h3 id={`${uid}-next`} className=\"text-sm font-semibold\">\n          {labels.confirmationNextTitle}\n        </h3>\n        <ol className=\"mt-3 space-y-3\">\n          {orderSteps.map((step, index) => (\n            <li key={step.title} className=\"flex gap-3\">\n              <span\n                aria-hidden=\"true\"\n                className={\n                  index === 0\n                    ? 'flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-success/10 text-xs font-semibold text-success'\n                    : 'flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground'\n                }\n              >\n                {index + 1}\n              </span>\n              <div>\n                <p className=\"text-sm font-medium\">{step.title}</p>\n                <p className=\"text-xs text-muted-foreground\">{step.body}</p>\n              </div>\n            </li>\n          ))}\n        </ol>\n      </section>\n\n      <section aria-labelledby={`${uid}-order`} className=\"rounded-xl border border-border bg-card\">\n        <div className=\"flex flex-wrap items-baseline justify-between gap-2 border-b border-border px-4 py-3\">\n          <h3 id={`${uid}-order`} className=\"text-sm font-semibold\">\n            {labels.confirmationOrderTitle}\n          </h3>\n          <p className=\"text-xs text-muted-foreground\">{purchaseBreakdown}</p>\n        </div>\n        <div className=\"divide-y divide-border\">\n          {confirmation.groups.map((group) => {\n            const methodLine = [group.modeLabel, group.methodLabel, group.detailLabel]\n              .filter(Boolean)\n              .join(' · ');\n            return (\n              <div key={group.id} className=\"px-4 py-3\">\n                <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm font-medium\">{group.title}</p>\n                    <p className=\"text-xs text-muted-foreground\">{methodLine}</p>\n                  </div>\n                  <p className=\"text-xs tabular-nums text-muted-foreground\">\n                    {group.feeCents === 0 ? labels.groupFree : money(group.feeCents, currency)}\n                  </p>\n                </div>\n                <ul className=\"mt-2 space-y-2\">\n                  {group.lines.map((line) => {\n                    const unitPrice = line.currentUnitCents ?? line.unitCents;\n                    return (\n                      <li\n                        key={line.lineId}\n                        className={line.isAssociate ? 'border-l border-border pl-3' : ''}\n                      >\n                        <div className=\"flex items-start gap-2.5\">\n                          <img\n                            src={line.image || PRODUCT_IMAGE_FALLBACK}\n                            alt={line.title}\n                            width={40}\n                            height={40}\n                            className=\"h-10 w-10 shrink-0 rounded-md border border-border object-cover\"\n                          />\n                          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                            <p className=\"text-sm font-medium\">\n                              {line.title}\n                              {line.isAssociate ? (\n                                <span className=\"ml-1.5 text-xs font-normal text-muted-foreground\">\n                                  {labels.confirmationAssociateTag}\n                                </span>\n                              ) : null}\n                            </p>\n                            {line.variant ? (\n                              <p className=\"text-xs text-muted-foreground\">{line.variant}</p>\n                            ) : null}\n                            {isFiniteAmount(unitPrice) ? (\n                              <p className=\"text-xs text-muted-foreground\">\n                                {fill(labels.confirmationQuantity, {\n                                  count: line.quantity,\n                                  price: money(unitPrice, currency),\n                                })}\n                              </p>\n                            ) : null}\n                            {(line.lineDiscountCents ?? 0) > 0 ? (\n                              <p className=\"text-xs text-success\">\n                                {fill(labels.lineDiscount, {\n                                  label: line.lineDiscountLabel ?? '',\n                                  amount: money(line.lineDiscountCents ?? 0, currency),\n                                })}\n                              </p>\n                            ) : null}\n                          </div>\n                          {isFiniteAmount(line.netTotalCents) ? (\n                            <p className=\"shrink-0 text-sm font-medium tabular-nums\">\n                              {money(line.netTotalCents, currency)}\n                            </p>\n                          ) : null}\n                        </div>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </div>\n            );\n          })}\n        </div>\n      </section>\n\n      {confirmation.address || confirmation.paymentLabel || confirmation.billingLabel ? (\n        <section\n          aria-labelledby={`${uid}-details`}\n          className=\"rounded-xl border border-border bg-card p-4\"\n        >\n          <h3 id={`${uid}-details`} className=\"text-sm font-semibold\">\n            {labels.confirmationDetailsTitle}\n          </h3>\n          <div className=\"mt-3 divide-y divide-border\">\n            {confirmation.address ? (\n              <div className=\"py-3 first:pt-0 last:pb-0\">\n                <p className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                  {labels.addressDelivery}\n                </p>\n                <p className=\"mt-1 text-sm font-medium\">{confirmation.address.label}</p>\n                <p className=\"text-xs text-muted-foreground\">\n                  {addressSummary(confirmation.address)}\n                </p>\n                <p className=\"text-xs text-muted-foreground\">\n                  {[confirmation.address.recipient, confirmation.address.phone]\n                    .filter(Boolean)\n                    .join(' · ')}\n                </p>\n              </div>\n            ) : null}\n            {confirmation.paymentLabel ? (\n              <div className=\"py-3 first:pt-0 last:pb-0\">\n                <p className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                  {labels.paymentTitle}\n                </p>\n                <p className=\"mt-1 text-sm font-medium\">{confirmation.paymentLabel}</p>\n                {confirmation.paymentDetail ? (\n                  <p className=\"text-xs text-muted-foreground\">{confirmation.paymentDetail}</p>\n                ) : null}\n              </div>\n            ) : null}\n            {confirmation.billingLabel ? (\n              <div className=\"py-3 first:pt-0 last:pb-0\">\n                <p className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                  {labels.billingTitle}\n                </p>\n                <p className=\"mt-1 text-sm font-medium\">{confirmation.billingLabel}</p>\n                {confirmation.billingDetail ? (\n                  <p className=\"text-xs text-muted-foreground\">{confirmation.billingDetail}</p>\n                ) : null}\n              </div>\n            ) : null}\n          </div>\n        </section>\n      ) : null}\n\n      <section\n        aria-labelledby={`${uid}-totals`}\n        className=\"rounded-xl border border-border bg-card p-4\"\n      >\n        <h3 id={`${uid}-totals`} className=\"text-sm font-semibold\">\n          {labels.summaryTitle}\n        </h3>\n        <dl className=\"mt-3 space-y-2\">\n          <SummaryRow\n            label={labels.subtotal}\n            value={amountText(confirmation.subtotalCents, currency)}\n            emphasis={false}\n          />\n          {(confirmation.promotions ?? []).map((promotion) => (\n            <SummaryRow\n              key={promotion.id}\n              label={promotion.label}\n              value={`- ${money(promotion.amountCents, currency)}`}\n              emphasis={false}\n            />\n          ))}\n          {isFiniteAmount(confirmation.taxCents) ? (\n            <SummaryRow\n              label={taxLabel(labels.tax, confirmation.taxRateBps)}\n              value={money(confirmation.taxCents, currency)}\n              emphasis={false}\n            />\n          ) : null}\n          {isFiniteAmount(confirmation.shippingCents) && confirmation.shippingCents > 0 ? (\n            <SummaryRow\n              label={labels.shippingCost}\n              value={money(confirmation.shippingCents, currency)}\n              emphasis={false}\n            />\n          ) : null}\n          {isFiniteAmount(confirmation.pickupCents) && confirmation.pickupCents > 0 ? (\n            <SummaryRow\n              label={labels.pickupCost}\n              value={money(confirmation.pickupCents, currency)}\n              emphasis={false}\n            />\n          ) : null}\n          {isFiniteAmount(confirmation.extraCents) && confirmation.extraCents > 0 ? (\n            <SummaryRow\n              label={confirmation.extraLabel || labels.extraCost}\n              value={money(confirmation.extraCents, currency)}\n              emphasis={false}\n            />\n          ) : null}\n        </dl>\n        <dl className=\"mt-2 border-t border-border pt-2\">\n          <SummaryRow\n            label={labels.total}\n            value={amountText(confirmation.totalCents, currency)}\n            emphasis\n          />\n        </dl>\n        {labels.totalDemoNote ? (\n          <p className=\"mt-2 text-xs text-muted-foreground\">{labels.totalDemoNote}</p>\n        ) : null}\n      </section>\n\n      <div className=\"flex justify-end\">\n        <Button type=\"button\" size=\"lg\" className=\"w-full sm:w-auto\" onClick={onContinueShopping}>\n          {labels.confirmationCta}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/checkout-commerce-v1/view/confirmation-view.mjs

@@ -0,0 +1,272 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Badge } from "../../../../ui/badge.mjs";
+import { Button } from "../../../../ui/button.mjs";
+import { PRODUCT_IMAGE_FALLBACK } from "../../../../lib/contracts.mjs";
+import {
+  addressSummary,
+  amountText,
+  countLabel,
+  fill,
+  isFiniteAmount,
+  money,
+  taxLabel
+} from "./format.mjs";
+import { SummaryRow } from "./summary-row.mjs";
+function CheckoutConfirmationView({
+  confirmation,
+  labels,
+  locale,
+  currencyCode,
+  onContinueShopping
+}) {
+  const uid = useId();
+  const currency = { locale, currencyCode };
+  const itemsLabel = isFiniteAmount(confirmation.unitCount) ? countLabel(
+    confirmation.unitCount,
+    labels.summaryItemOne,
+    fill(labels.summaryItems, { count: confirmation.unitCount })
+  ) : "";
+  const deliveriesLabel = countLabel(
+    confirmation.groups.length,
+    labels.deliveriesOne,
+    fill(labels.deliveriesMany, { count: confirmation.groups.length })
+  );
+  const purchaseBreakdown = itemsLabel ? fill(labels.purchaseBreakdown, { items: itemsLabel, deliveries: deliveriesLabel }) : deliveriesLabel;
+  const orderSteps = [
+    {
+      title: labels.confirmationNextOneTitle,
+      body: labels.confirmationNextOneBody
+    },
+    {
+      title: labels.confirmationNextTwoTitle,
+      body: labels.confirmationNextTwoBody
+    },
+    {
+      title: labels.confirmationNextThreeTitle,
+      body: labels.confirmationNextThreeBody
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-2xl flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-labelledby": `${uid}-confirmed`,
+        className: "rounded-xl border border-success/40 bg-card p-5 sm:p-6",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-success/10 text-base font-semibold text-success",
+                children: labels.checkSymbol
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: labels.confirmationBadge }),
+              /* @__PURE__ */ jsx("h2", { id: `${uid}-confirmed`, className: "mt-2 text-xl font-semibold tracking-tight", children: labels.confirmationTitle }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: fill(labels.confirmationBody, { name: confirmation.customerName }) }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: fill(labels.confirmationEmailNote, { email: confirmation.customerEmail }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("dl", { className: "mt-4 grid gap-2 rounded-lg bg-muted/40 px-3 py-2 sm:grid-cols-2", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: labels.confirmationReference }),
+              /* @__PURE__ */ jsx("dd", { className: "text-sm font-medium tabular-nums", children: confirmation.reference })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "sm:text-right", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: labels.confirmationTotal }),
+              /* @__PURE__ */ jsx("dd", { className: "text-sm font-semibold tabular-nums", children: money(confirmation.totalCents, currency) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.confirmationReferenceNote })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-labelledby": `${uid}-next`,
+        className: "rounded-xl border border-border bg-card p-5",
+        children: [
+          /* @__PURE__ */ jsx("h3", { id: `${uid}-next`, className: "text-sm font-semibold", children: labels.confirmationNextTitle }),
+          /* @__PURE__ */ jsx("ol", { className: "mt-3 space-y-3", children: orderSteps.map((step, index) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: index === 0 ? "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-success/10 text-xs font-semibold text-success" : "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground",
+                children: index + 1
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: step.title }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: step.body })
+            ] })
+          ] }, step.title)) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-order`, className: "rounded-xl border border-border bg-card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2 border-b border-border px-4 py-3", children: [
+        /* @__PURE__ */ jsx("h3", { id: `${uid}-order`, className: "text-sm font-semibold", children: labels.confirmationOrderTitle }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: purchaseBreakdown })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: confirmation.groups.map((group) => {
+        const methodLine = [group.modeLabel, group.methodLabel, group.detailLabel].filter(Boolean).join(" \xB7 ");
+        return /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: group.title }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: methodLine })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs tabular-nums text-muted-foreground", children: group.feeCents === 0 ? labels.groupFree : money(group.feeCents, currency) })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-2", children: group.lines.map((line) => {
+            const unitPrice = line.currentUnitCents ?? line.unitCents;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: line.isAssociate ? "border-l border-border pl-3" : "",
+                children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: line.image || PRODUCT_IMAGE_FALLBACK,
+                      alt: line.title,
+                      width: 40,
+                      height: 40,
+                      className: "h-10 w-10 shrink-0 rounded-md border border-border object-cover"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
+                      line.title,
+                      line.isAssociate ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs font-normal text-muted-foreground", children: labels.confirmationAssociateTag }) : null
+                    ] }),
+                    line.variant ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: line.variant }) : null,
+                    isFiniteAmount(unitPrice) ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fill(labels.confirmationQuantity, {
+                      count: line.quantity,
+                      price: money(unitPrice, currency)
+                    }) }) : null,
+                    (line.lineDiscountCents ?? 0) > 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: fill(labels.lineDiscount, {
+                      label: line.lineDiscountLabel ?? "",
+                      amount: money(line.lineDiscountCents ?? 0, currency)
+                    }) }) : null
+                  ] }),
+                  isFiniteAmount(line.netTotalCents) ? /* @__PURE__ */ jsx("p", { className: "shrink-0 text-sm font-medium tabular-nums", children: money(line.netTotalCents, currency) }) : null
+                ] })
+              },
+              line.lineId
+            );
+          }) })
+        ] }, group.id);
+      }) })
+    ] }),
+    confirmation.address || confirmation.paymentLabel || confirmation.billingLabel ? /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-labelledby": `${uid}-details`,
+        className: "rounded-xl border border-border bg-card p-4",
+        children: [
+          /* @__PURE__ */ jsx("h3", { id: `${uid}-details`, className: "text-sm font-semibold", children: labels.confirmationDetailsTitle }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 divide-y divide-border", children: [
+            confirmation.address ? /* @__PURE__ */ jsxs("div", { className: "py-3 first:pt-0 last:pb-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.addressDelivery }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: confirmation.address.label }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: addressSummary(confirmation.address) }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [confirmation.address.recipient, confirmation.address.phone].filter(Boolean).join(" \xB7 ") })
+            ] }) : null,
+            confirmation.paymentLabel ? /* @__PURE__ */ jsxs("div", { className: "py-3 first:pt-0 last:pb-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.paymentTitle }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: confirmation.paymentLabel }),
+              confirmation.paymentDetail ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: confirmation.paymentDetail }) : null
+            ] }) : null,
+            confirmation.billingLabel ? /* @__PURE__ */ jsxs("div", { className: "py-3 first:pt-0 last:pb-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.billingTitle }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: confirmation.billingLabel }),
+              confirmation.billingDetail ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: confirmation.billingDetail }) : null
+            ] }) : null
+          ] })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-labelledby": `${uid}-totals`,
+        className: "rounded-xl border border-border bg-card p-4",
+        children: [
+          /* @__PURE__ */ jsx("h3", { id: `${uid}-totals`, className: "text-sm font-semibold", children: labels.summaryTitle }),
+          /* @__PURE__ */ jsxs("dl", { className: "mt-3 space-y-2", children: [
+            /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: labels.subtotal,
+                value: amountText(confirmation.subtotalCents, currency),
+                emphasis: false
+              }
+            ),
+            (confirmation.promotions ?? []).map((promotion) => /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: promotion.label,
+                value: `- ${money(promotion.amountCents, currency)}`,
+                emphasis: false
+              },
+              promotion.id
+            )),
+            isFiniteAmount(confirmation.taxCents) ? /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: taxLabel(labels.tax, confirmation.taxRateBps),
+                value: money(confirmation.taxCents, currency),
+                emphasis: false
+              }
+            ) : null,
+            isFiniteAmount(confirmation.shippingCents) && confirmation.shippingCents > 0 ? /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: labels.shippingCost,
+                value: money(confirmation.shippingCents, currency),
+                emphasis: false
+              }
+            ) : null,
+            isFiniteAmount(confirmation.pickupCents) && confirmation.pickupCents > 0 ? /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: labels.pickupCost,
+                value: money(confirmation.pickupCents, currency),
+                emphasis: false
+              }
+            ) : null,
+            isFiniteAmount(confirmation.extraCents) && confirmation.extraCents > 0 ? /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: confirmation.extraLabel || labels.extraCost,
+                value: money(confirmation.extraCents, currency),
+                emphasis: false
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx("dl", { className: "mt-2 border-t border-border pt-2", children: /* @__PURE__ */ jsx(
+            SummaryRow,
+            {
+              label: labels.total,
+              value: amountText(confirmation.totalCents, currency),
+              emphasis: true
+            }
+          ) }),
+          labels.totalDemoNote ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.totalDemoNote }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "button", size: "lg", className: "w-full sm:w-auto", onClick: onContinueShopping, children: labels.confirmationCta }) })
+  ] });
+}
+export {
+  CheckoutConfirmationView
+};
+//# sourceMappingURL=confirmation-view.mjs.map

package/dist/blocks/designs/checkout-commerce-v1/view/confirmation-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/confirmation-view.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { Badge } from '../../../../ui/badge';\nimport { Button } from '../../../../ui/button';\nimport { PRODUCT_IMAGE_FALLBACK } from '../../../../lib/contracts';\nimport {\n  addressSummary,\n  amountText,\n  countLabel,\n  fill,\n  isFiniteAmount,\n  money,\n  taxLabel,\n} from './format';\nimport { SummaryRow } from './summary-row';\nimport type { CheckoutConfirmation, CheckoutCopy } from './types';\n\nexport type CheckoutConfirmationViewProps = {\n  confirmation: CheckoutConfirmation;\n  labels: CheckoutCopy;\n  locale: string;\n  currencyCode: string;\n  onContinueShopping?: () => void;\n};\n\n/**\n * The designer's confirmed-order screen, extracted unchanged from\n * CheckoutView. It is driven only by host data: no fixtures, no money\n * computation, no success claim beyond the confirmed order it receives.\n */\nexport function CheckoutConfirmationView({\n  confirmation,\n  labels,\n  locale,\n  currencyCode,\n  onContinueShopping,\n}: CheckoutConfirmationViewProps) {\n  const uid = useId();\n  const currency = { locale, currencyCode };\n  const itemsLabel = isFiniteAmount(confirmation.unitCount)\n    ? countLabel(\n        confirmation.unitCount,\n        labels.summaryItemOne,\n        fill(labels.summaryItems, { count: confirmation.unitCount }),\n      )\n    : '';\n  const deliveriesLabel = countLabel(\n    confirmation.groups.length,\n    labels.deliveriesOne,\n    fill(labels.deliveriesMany, { count: confirmation.groups.length }),\n  );\n  const purchaseBreakdown = itemsLabel\n    ? fill(labels.purchaseBreakdown, { items: itemsLabel, deliveries: deliveriesLabel })\n    : deliveriesLabel;\n  const orderSteps = [\n    {\n      title: labels.confirmationNextOneTitle,\n      body: labels.confirmationNextOneBody,\n    },\n    {\n      title: labels.confirmationNextTwoTitle,\n      body: labels.confirmationNextTwoBody,\n    },\n    {\n      title: labels.confirmationNextThreeTitle,\n      body: labels.confirmationNextThreeBody,\n    },\n  ];\n  return (\n    <div className=\"mx-auto flex w-full max-w-2xl flex-col gap-4\">\n      <section\n        aria-labelledby={`${uid}-confirmed`}\n        className=\"rounded-xl border border-success/40 bg-card p-5 sm:p-6\"\n      >\n        <div className=\"flex items-start gap-3\">\n          <span\n            aria-hidden=\"true\"\n            className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-success/10 text-base font-semibold text-success\"\n          >\n            {labels.checkSymbol}\n          </span>\n          <div className=\"min-w-0\">\n            <Badge variant={'secondary'}>{labels.confirmationBadge}</Badge>\n            <h2 id={`${uid}-confirmed`} className=\"mt-2 text-xl font-semibold tracking-tight\">\n              {labels.confirmationTitle}\n            </h2>\n            <p className=\"mt-1 text-sm text-muted-foreground\">\n              {fill(labels.confirmationBody, { name: confirmation.customerName })}\n            </p>\n            <p className=\"mt-1 text-xs text-muted-foreground\">\n              {fill(labels.confirmationEmailNote, { email: confirmation.customerEmail })}\n            </p>\n          </div>\n        </div>\n        <dl className=\"mt-4 grid gap-2 rounded-lg bg-muted/40 px-3 py-2 sm:grid-cols-2\">\n          <div>\n            <dt className=\"text-xs text-muted-foreground\">{labels.confirmationReference}</dt>\n            <dd className=\"text-sm font-medium tabular-nums\">{confirmation.reference}</dd>\n          </div>\n          <div className=\"sm:text-right\">\n            <dt className=\"text-xs text-muted-foreground\">{labels.confirmationTotal}</dt>\n            <dd className=\"text-sm font-semibold tabular-nums\">\n              {money(confirmation.totalCents, currency)}\n            </dd>\n          </div>\n        </dl>\n        <p className=\"mt-2 text-xs text-muted-foreground\">{labels.confirmationReferenceNote}</p>\n      </section>\n\n      <section\n        aria-labelledby={`${uid}-next`}\n        className=\"rounded-xl border border-border bg-card p-5\"\n      >\n        <h3 id={`${uid}-next`} className=\"text-sm font-semibold\">\n          {labels.confirmationNextTitle}\n        </h3>\n        <ol className=\"mt-3 space-y-3\">\n          {orderSteps.map((step, index) => (\n            <li key={step.title} className=\"flex gap-3\">\n              <span\n                aria-hidden=\"true\"\n                className={\n                  index === 0\n                    ? 'flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-success/10 text-xs font-semibold text-success'\n                    : 'flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground'\n                }\n              >\n                {index + 1}\n              </span>\n              <div>\n                <p className=\"text-sm font-medium\">{step.title}</p>\n                <p className=\"text-xs text-muted-foreground\">{step.body}</p>\n              </div>\n            </li>\n          ))}\n        </ol>\n      </section>\n\n      <section aria-labelledby={`${uid}-order`} className=\"rounded-xl border border-border bg-card\">\n        <div className=\"flex flex-wrap items-baseline justify-between gap-2 border-b border-border px-4 py-3\">\n          <h3 id={`${uid}-order`} className=\"text-sm font-semibold\">\n            {labels.confirmationOrderTitle}\n          </h3>\n          <p className=\"text-xs text-muted-foreground\">{purchaseBreakdown}</p>\n        </div>\n        <div className=\"divide-y divide-border\">\n          {confirmation.groups.map((group) => {\n            const methodLine = [group.modeLabel, group.methodLabel, group.detailLabel]\n              .filter(Boolean)\n              .join(' · ');\n            return (\n              <div key={group.id} className=\"px-4 py-3\">\n                <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm font-medium\">{group.title}</p>\n                    <p className=\"text-xs text-muted-foreground\">{methodLine}</p>\n                  </div>\n                  <p className=\"text-xs tabular-nums text-muted-foreground\">\n                    {group.feeCents === 0 ? labels.groupFree : money(group.feeCents, currency)}\n                  </p>\n                </div>\n                <ul className=\"mt-2 space-y-2\">\n                  {group.lines.map((line) => {\n                    const unitPrice = line.currentUnitCents ?? line.unitCents;\n                    return (\n                      <li\n                        key={line.lineId}\n                        className={line.isAssociate ? 'border-l border-border pl-3' : ''}\n                      >\n                        <div className=\"flex items-start gap-2.5\">\n                          <img\n                            src={line.image || PRODUCT_IMAGE_FALLBACK}\n                            alt={line.title}\n                            width={40}\n                            height={40}\n                            className=\"h-10 w-10 shrink-0 rounded-md border border-border object-cover\"\n                          />\n                          <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                            <p className=\"text-sm font-medium\">\n                              {line.title}\n                              {line.isAssociate ? (\n                                <span className=\"ml-1.5 text-xs font-normal text-muted-foreground\">\n                                  {labels.confirmationAssociateTag}\n                                </span>\n                              ) : null}\n                            </p>\n                            {line.variant ? (\n                              <p className=\"text-xs text-muted-foreground\">{line.variant}</p>\n                            ) : null}\n                            {isFiniteAmount(unitPrice) ? (\n                              <p className=\"text-xs text-muted-foreground\">\n                                {fill(labels.confirmationQuantity, {\n                                  count: line.quantity,\n                                  price: money(unitPrice, currency),\n                                })}\n                              </p>\n                            ) : null}\n                            {(line.lineDiscountCents ?? 0) > 0 ? (\n                              <p className=\"text-xs text-success\">\n                                {fill(labels.lineDiscount, {\n                                  label: line.lineDiscountLabel ?? '',\n                                  amount: money(line.lineDiscountCents ?? 0, currency),\n                                })}\n                              </p>\n                            ) : null}\n                          </div>\n                          {isFiniteAmount(line.netTotalCents) ? (\n                            <p className=\"shrink-0 text-sm font-medium tabular-nums\">\n                              {money(line.netTotalCents, currency)}\n                            </p>\n                          ) : null}\n                        </div>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </div>\n            );\n          })}\n        </div>\n      </section>\n\n      {confirmation.address || confirmation.paymentLabel || confirmation.billingLabel ? (\n        <section\n          aria-labelledby={`${uid}-details`}\n          className=\"rounded-xl border border-border bg-card p-4\"\n        >\n          <h3 id={`${uid}-details`} className=\"text-sm font-semibold\">\n            {labels.confirmationDetailsTitle}\n          </h3>\n          <div className=\"mt-3 divide-y divide-border\">\n            {confirmation.address ? (\n              <div className=\"py-3 first:pt-0 last:pb-0\">\n                <p className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                  {labels.addressDelivery}\n                </p>\n                <p className=\"mt-1 text-sm font-medium\">{confirmation.address.label}</p>\n                <p className=\"text-xs text-muted-foreground\">\n                  {addressSummary(confirmation.address)}\n                </p>\n                <p className=\"text-xs text-muted-foreground\">\n                  {[confirmation.address.recipient, confirmation.address.phone]\n                    .filter(Boolean)\n                    .join(' · ')}\n                </p>\n              </div>\n            ) : null}\n            {confirmation.paymentLabel ? (\n              <div className=\"py-3 first:pt-0 last:pb-0\">\n                <p className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                  {labels.paymentTitle}\n                </p>\n                <p className=\"mt-1 text-sm font-medium\">{confirmation.paymentLabel}</p>\n                {confirmation.paymentDetail ? (\n                  <p className=\"text-xs text-muted-foreground\">{confirmation.paymentDetail}</p>\n                ) : null}\n              </div>\n            ) : null}\n            {confirmation.billingLabel ? (\n              <div className=\"py-3 first:pt-0 last:pb-0\">\n                <p className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                  {labels.billingTitle}\n                </p>\n                <p className=\"mt-1 text-sm font-medium\">{confirmation.billingLabel}</p>\n                {confirmation.billingDetail ? (\n                  <p className=\"text-xs text-muted-foreground\">{confirmation.billingDetail}</p>\n                ) : null}\n              </div>\n            ) : null}\n          </div>\n        </section>\n      ) : null}\n\n      <section\n        aria-labelledby={`${uid}-totals`}\n        className=\"rounded-xl border border-border bg-card p-4\"\n      >\n        <h3 id={`${uid}-totals`} className=\"text-sm font-semibold\">\n          {labels.summaryTitle}\n        </h3>\n        <dl className=\"mt-3 space-y-2\">\n          <SummaryRow\n            label={labels.subtotal}\n            value={amountText(confirmation.subtotalCents, currency)}\n            emphasis={false}\n          />\n          {(confirmation.promotions ?? []).map((promotion) => (\n            <SummaryRow\n              key={promotion.id}\n              label={promotion.label}\n              value={`- ${money(promotion.amountCents, currency)}`}\n              emphasis={false}\n            />\n          ))}\n          {isFiniteAmount(confirmation.taxCents) ? (\n            <SummaryRow\n              label={taxLabel(labels.tax, confirmation.taxRateBps)}\n              value={money(confirmation.taxCents, currency)}\n              emphasis={false}\n            />\n          ) : null}\n          {isFiniteAmount(confirmation.shippingCents) && confirmation.shippingCents > 0 ? (\n            <SummaryRow\n              label={labels.shippingCost}\n              value={money(confirmation.shippingCents, currency)}\n              emphasis={false}\n            />\n          ) : null}\n          {isFiniteAmount(confirmation.pickupCents) && confirmation.pickupCents > 0 ? (\n            <SummaryRow\n              label={labels.pickupCost}\n              value={money(confirmation.pickupCents, currency)}\n              emphasis={false}\n            />\n          ) : null}\n          {isFiniteAmount(confirmation.extraCents) && confirmation.extraCents > 0 ? (\n            <SummaryRow\n              label={confirmation.extraLabel || labels.extraCost}\n              value={money(confirmation.extraCents, currency)}\n              emphasis={false}\n            />\n          ) : null}\n        </dl>\n        <dl className=\"mt-2 border-t border-border pt-2\">\n          <SummaryRow\n            label={labels.total}\n            value={amountText(confirmation.totalCents, currency)}\n            emphasis\n          />\n        </dl>\n        {labels.totalDemoNote ? (\n          <p className=\"mt-2 text-xs text-muted-foreground\">{labels.totalDemoNote}</p>\n        ) : null}\n      </section>\n\n      <div className=\"flex justify-end\">\n        <Button type=\"button\" size=\"lg\" className=\"w-full sm:w-auto\" onClick={onContinueShopping}>\n          {labels.confirmationCta}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/checkout-commerce-v1/view/format.d.ts

@@ -0,0 +1,35 @@
+import type { CheckoutPickupPoint } from './types';
+export type AddressData = {
+    id: string;
+    label: string;
+    recipient: string;
+    line1: string;
+    line2?: string;
+    company?: string;
+    city: string;
+    province?: string;
+    countryCode?: string;
+    postalCode?: string;
+    phone?: string;
+    isDefault: boolean;
+};
+export declare function money(cents: number, currency: {
+    locale: string;
+    currencyCode: string;
+}): string;
+export declare function isFiniteAmount(value: unknown): value is number;
+export declare function amountText(value: number | undefined, currency: {
+    locale: string;
+    currencyCode: string;
+}): string;
+export declare function taxLabel(template: string, rateBps: number | undefined): string;
+export declare function fill(template: string, values: Record<string, string | number>): string;
+export declare function tierRangeLabel(tier: {
+    minQuantity: number;
+    maxQuantity: number;
+}, labels: Readonly<Record<string, string>>): string;
+export declare function countLabel(count: number, one: string, many: string): string;
+export declare function addressHeadline(address: AddressData): string;
+export declare function addressSummary(address: AddressData): string;
+export declare function pickupDetail(point: CheckoutPickupPoint): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/blocks/designs/checkout-commerce-v1/view/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/format.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,UAOtF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAE9D;AAED,wBAAgB,UAAU,CACxB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,QAAQ,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,UAGnD;AAED,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,UAIrE;AAED,wBAAgB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,UAK7E;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,EAClD,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,UAKzC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAElE;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,UAEnD;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,UAElD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,mBAAmB,UAEtD"}

package/dist/blocks/designs/checkout-commerce-v1/view/format.js

@@ -0,0 +1,84 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var format_exports = {};
+__export(format_exports, {
+  addressHeadline: () => addressHeadline,
+  addressSummary: () => addressSummary,
+  amountText: () => amountText,
+  countLabel: () => countLabel,
+  fill: () => fill,
+  isFiniteAmount: () => isFiniteAmount,
+  money: () => money,
+  pickupDetail: () => pickupDetail,
+  taxLabel: () => taxLabel,
+  tierRangeLabel: () => tierRangeLabel
+});
+module.exports = __toCommonJS(format_exports);
+function money(cents, currency) {
+  const currencyFormatter = new Intl.NumberFormat(currency.locale, {
+    style: "currency",
+    currency: currency.currencyCode,
+    minimumFractionDigits: 2
+  });
+  return currencyFormatter.format(cents / 100);
+}
+function isFiniteAmount(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function amountText(value, currency) {
+  return isFiniteAmount(value) ? money(value, currency) : "";
+}
+function taxLabel(template, rateBps) {
+  return isFiniteAmount(rateBps) ? fill(template, { rate: String(rateBps / 100) }) : template.replace(/\(?\s*\{rate\}\s*%?\s*\)?/g, "").trim();
+}
+function fill(template, values) {
+  return Object.keys(values).reduce(
+    (text, key) => text.split(`{${key}}`).join(String(values[key])),
+    template
+  );
+}
+function tierRangeLabel(tier, labels) {
+  return tier.maxQuantity > 0 ? fill(labels.tierRange, { min: tier.minQuantity, max: tier.maxQuantity }) : fill(labels.tierRangeFrom, { min: tier.minQuantity });
+}
+function countLabel(count, one, many) {
+  return count === 1 ? one : fill(many, { count });
+}
+function addressHeadline(address) {
+  return [address.label, address.province].filter(Boolean).join(" \xB7 ");
+}
+function addressSummary(address) {
+  return [address.line1, address.line2, address.city].filter(Boolean).join(", ");
+}
+function pickupDetail(point) {
+  return [point.address, point.hours].filter(Boolean).join(" \xB7 ");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addressHeadline,
+  addressSummary,
+  amountText,
+  countLabel,
+  fill,
+  isFiniteAmount,
+  money,
+  pickupDetail,
+  taxLabel,
+  tierRangeLabel
+});
+//# sourceMappingURL=format.js.map

package/dist/blocks/designs/checkout-commerce-v1/view/format.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/format.ts"],"sourcesContent":["import type { CheckoutPickupPoint } from './types';\n\nexport type AddressData = {\n  id: string;\n  label: string;\n  recipient: string;\n  line1: string;\n  line2?: string;\n  company?: string;\n  city: string;\n  province?: string;\n  countryCode?: string;\n  postalCode?: string;\n  phone?: string;\n  isDefault: boolean;\n};\n\nexport function money(cents: number, currency: { locale: string; currencyCode: string }) {\n  const currencyFormatter = new Intl.NumberFormat(currency.locale, {\n    style: 'currency',\n    currency: currency.currencyCode,\n    minimumFractionDigits: 2,\n  });\n  return currencyFormatter.format(cents / 100);\n}\n\nexport function isFiniteAmount(value: unknown): value is number {\n  return typeof value === 'number' && Number.isFinite(value);\n}\n\nexport function amountText(\n  value: number | undefined,\n  currency: { locale: string; currencyCode: string },\n) {\n  return isFiniteAmount(value) ? money(value, currency) : '';\n}\n\nexport function taxLabel(template: string, rateBps: number | undefined) {\n  return isFiniteAmount(rateBps)\n    ? fill(template, { rate: String(rateBps / 100) })\n    : template.replace(/\\(?\\s*\\{rate\\}\\s*%?\\s*\\)?/g, '').trim();\n}\n\nexport function fill(template: string, values: Record<string, string | number>) {\n  return Object.keys(values).reduce(\n    (text, key) => text.split(`{${key}}`).join(String(values[key])),\n    template,\n  );\n}\n\nexport function tierRangeLabel(\n  tier: { minQuantity: number; maxQuantity: number },\n  labels: Readonly<Record<string, string>>,\n) {\n  return tier.maxQuantity > 0\n    ? fill(labels.tierRange, { min: tier.minQuantity, max: tier.maxQuantity })\n    : fill(labels.tierRangeFrom, { min: tier.minQuantity });\n}\n\nexport function countLabel(count: number, one: string, many: string) {\n  return count === 1 ? one : fill(many, { count });\n}\n\nexport function addressHeadline(address: AddressData) {\n  return [address.label, address.province].filter(Boolean).join(' · ');\n}\n\nexport function addressSummary(address: AddressData) {\n  return [address.line1, address.line2, address.city].filter(Boolean).join(', ');\n}\n\nexport function pickupDetail(point: CheckoutPickupPoint) {\n  return [point.address, point.hours].filter(Boolean).join(' · ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBO,SAAS,MAAM,OAAe,UAAoD;AACvF,QAAM,oBAAoB,IAAI,KAAK,aAAa,SAAS,QAAQ;AAAA,IAC/D,OAAO;AAAA,IACP,UAAU,SAAS;AAAA,IACnB,uBAAuB;AAAA,EACzB,CAAC;AACD,SAAO,kBAAkB,OAAO,QAAQ,GAAG;AAC7C;AAEO,SAAS,eAAe,OAAiC;AAC9D,SAAO,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK;AAC3D;AAEO,SAAS,WACd,OACA,UACA;AACA,SAAO,eAAe,KAAK,IAAI,MAAM,OAAO,QAAQ,IAAI;AAC1D;AAEO,SAAS,SAAS,UAAkB,SAA6B;AACtE,SAAO,eAAe,OAAO,IACzB,KAAK,UAAU,EAAE,MAAM,OAAO,UAAU,GAAG,EAAE,CAAC,IAC9C,SAAS,QAAQ,8BAA8B,EAAE,EAAE,KAAK;AAC9D;AAEO,SAAS,KAAK,UAAkB,QAAyC;AAC9E,SAAO,OAAO,KAAK,MAAM,EAAE;AAAA,IACzB,CAAC,MAAM,QAAQ,KAAK,MAAM,IAAI,GAAG,GAAG,EAAE,KAAK,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA,IAC9D;AAAA,EACF;AACF;AAEO,SAAS,eACd,MACA,QACA;AACA,SAAO,KAAK,cAAc,IACtB,KAAK,OAAO,WAAW,EAAE,KAAK,KAAK,aAAa,KAAK,KAAK,YAAY,CAAC,IACvE,KAAK,OAAO,eAAe,EAAE,KAAK,KAAK,YAAY,CAAC;AAC1D;AAEO,SAAS,WAAW,OAAe,KAAa,MAAc;AACnE,SAAO,UAAU,IAAI,MAAM,KAAK,MAAM,EAAE,MAAM,CAAC;AACjD;AAEO,SAAS,gBAAgB,SAAsB;AACpD,SAAO,CAAC,QAAQ,OAAO,QAAQ,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,QAAK;AACrE;AAEO,SAAS,eAAe,SAAsB;AACnD,SAAO,CAAC,QAAQ,OAAO,QAAQ,OAAO,QAAQ,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI;AAC/E;AAEO,SAAS,aAAa,OAA4B;AACvD,SAAO,CAAC,MAAM,SAAS,MAAM,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,QAAK;AAChE;","names":[]}

package/dist/blocks/designs/checkout-commerce-v1/view/format.mjs

@@ -0,0 +1,51 @@
+function money(cents, currency) {
+  const currencyFormatter = new Intl.NumberFormat(currency.locale, {
+    style: "currency",
+    currency: currency.currencyCode,
+    minimumFractionDigits: 2
+  });
+  return currencyFormatter.format(cents / 100);
+}
+function isFiniteAmount(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function amountText(value, currency) {
+  return isFiniteAmount(value) ? money(value, currency) : "";
+}
+function taxLabel(template, rateBps) {
+  return isFiniteAmount(rateBps) ? fill(template, { rate: String(rateBps / 100) }) : template.replace(/\(?\s*\{rate\}\s*%?\s*\)?/g, "").trim();
+}
+function fill(template, values) {
+  return Object.keys(values).reduce(
+    (text, key) => text.split(`{${key}}`).join(String(values[key])),
+    template
+  );
+}
+function tierRangeLabel(tier, labels) {
+  return tier.maxQuantity > 0 ? fill(labels.tierRange, { min: tier.minQuantity, max: tier.maxQuantity }) : fill(labels.tierRangeFrom, { min: tier.minQuantity });
+}
+function countLabel(count, one, many) {
+  return count === 1 ? one : fill(many, { count });
+}
+function addressHeadline(address) {
+  return [address.label, address.province].filter(Boolean).join(" \xB7 ");
+}
+function addressSummary(address) {
+  return [address.line1, address.line2, address.city].filter(Boolean).join(", ");
+}
+function pickupDetail(point) {
+  return [point.address, point.hours].filter(Boolean).join(" \xB7 ");
+}
+export {
+  addressHeadline,
+  addressSummary,
+  amountText,
+  countLabel,
+  fill,
+  isFiniteAmount,
+  money,
+  pickupDetail,
+  taxLabel,
+  tierRangeLabel
+};
+//# sourceMappingURL=format.mjs.map

package/dist/blocks/designs/checkout-commerce-v1/view/format.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/format.ts"],"sourcesContent":["import type { CheckoutPickupPoint } from './types';\n\nexport type AddressData = {\n  id: string;\n  label: string;\n  recipient: string;\n  line1: string;\n  line2?: string;\n  company?: string;\n  city: string;\n  province?: string;\n  countryCode?: string;\n  postalCode?: string;\n  phone?: string;\n  isDefault: boolean;\n};\n\nexport function money(cents: number, currency: { locale: string; currencyCode: string }) {\n  const currencyFormatter = new Intl.NumberFormat(currency.locale, {\n    style: 'currency',\n    currency: currency.currencyCode,\n    minimumFractionDigits: 2,\n  });\n  return currencyFormatter.format(cents / 100);\n}\n\nexport function isFiniteAmount(value: unknown): value is number {\n  return typeof value === 'number' && Number.isFinite(value);\n}\n\nexport function amountText(\n  value: number | undefined,\n  currency: { locale: string; currencyCode: string },\n) {\n  return isFiniteAmount(value) ? money(value, currency) : '';\n}\n\nexport function taxLabel(template: string, rateBps: number | undefined) {\n  return isFiniteAmount(rateBps)\n    ? fill(template, { rate: String(rateBps / 100) })\n    : template.replace(/\\(?\\s*\\{rate\\}\\s*%?\\s*\\)?/g, '').trim();\n}\n\nexport function fill(template: string, values: Record<string, string | number>) {\n  return Object.keys(values).reduce(\n    (text, key) => text.split(`{${key}}`).join(String(values[key])),\n    template,\n  );\n}\n\nexport function tierRangeLabel(\n  tier: { minQuantity: number; maxQuantity: number },\n  labels: Readonly<Record<string, string>>,\n) {\n  return tier.maxQuantity > 0\n    ? fill(labels.tierRange, { min: tier.minQuantity, max: tier.maxQuantity })\n    : fill(labels.tierRangeFrom, { min: tier.minQuantity });\n}\n\nexport function countLabel(count: number, one: string, many: string) {\n  return count === 1 ? one : fill(many, { count });\n}\n\nexport function addressHeadline(address: AddressData) {\n  return [address.label, address.province].filter(Boolean).join(' · ');\n}\n\nexport function addressSummary(address: AddressData) {\n  return [address.line1, address.line2, address.city].filter(Boolean).join(', ');\n}\n\nexport function pickupDetail(point: CheckoutPickupPoint) {\n  return [point.address, point.hours].filter(Boolean).join(' · ');\n}\n"],"mappings":"AAiBO,SAAS,MAAM,OAAe,UAAoD;AACvF,QAAM,oBAAoB,IAAI,KAAK,aAAa,SAAS,QAAQ;AAAA,IAC/D,OAAO;AAAA,IACP,UAAU,SAAS;AAAA,IACnB,uBAAuB;AAAA,EACzB,CAAC;AACD,SAAO,kBAAkB,OAAO,QAAQ,GAAG;AAC7C;AAEO,SAAS,eAAe,OAAiC;AAC9D,SAAO,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK;AAC3D;AAEO,SAAS,WACd,OACA,UACA;AACA,SAAO,eAAe,KAAK,IAAI,MAAM,OAAO,QAAQ,IAAI;AAC1D;AAEO,SAAS,SAAS,UAAkB,SAA6B;AACtE,SAAO,eAAe,OAAO,IACzB,KAAK,UAAU,EAAE,MAAM,OAAO,UAAU,GAAG,EAAE,CAAC,IAC9C,SAAS,QAAQ,8BAA8B,EAAE,EAAE,KAAK;AAC9D;AAEO,SAAS,KAAK,UAAkB,QAAyC;AAC9E,SAAO,OAAO,KAAK,MAAM,EAAE;AAAA,IACzB,CAAC,MAAM,QAAQ,KAAK,MAAM,IAAI,GAAG,GAAG,EAAE,KAAK,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA,IAC9D;AAAA,EACF;AACF;AAEO,SAAS,eACd,MACA,QACA;AACA,SAAO,KAAK,cAAc,IACtB,KAAK,OAAO,WAAW,EAAE,KAAK,KAAK,aAAa,KAAK,KAAK,YAAY,CAAC,IACvE,KAAK,OAAO,eAAe,EAAE,KAAK,KAAK,YAAY,CAAC;AAC1D;AAEO,SAAS,WAAW,OAAe,KAAa,MAAc;AACnE,SAAO,UAAU,IAAI,MAAM,KAAK,MAAM,EAAE,MAAM,CAAC;AACjD;AAEO,SAAS,gBAAgB,SAAsB;AACpD,SAAO,CAAC,QAAQ,OAAO,QAAQ,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,QAAK;AACrE;AAEO,SAAS,eAAe,SAAsB;AACnD,SAAO,CAAC,QAAQ,OAAO,QAAQ,OAAO,QAAQ,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI;AAC/E;AAEO,SAAS,aAAa,OAA4B;AACvD,SAAO,CAAC,MAAM,SAAS,MAAM,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,QAAK;AAChE;","names":[]}

package/dist/blocks/designs/checkout-commerce-v1/view/option-group.d.ts

@@ -0,0 +1,17 @@
+export type OptionItem = {
+    id: string;
+    title: string;
+    detail?: string;
+    meta?: string;
+    previousMeta?: string;
+    disabled: boolean;
+    reason?: string;
+};
+export declare function OptionGroup({ legend, options, selectedId, onSelect, className, }: {
+    legend: string;
+    options: OptionItem[];
+    selectedId: string;
+    onSelect: (id: string) => void;
+    className: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=option-group.d.ts.map

package/dist/blocks/designs/checkout-commerce-v1/view/option-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-group.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/option-group.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAuBF,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,OAAO,EACP,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;CACnB,+BAgDA"}