@thorprovider/blocks 3.0.2 → 4.0.0

package/dist/blocks/e-commerce/checkout-forms/checkout-review-step.mjs

@@ -1,37 +1,188 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { formatMoney, isAvailableMoney } from "../../../lib/money.mjs";
+function resolveGroupMembership(groups, lines) {
+  if (!lines?.length || groups.some((group) => !group.items?.length)) return null;
+  const linesById = new Map(lines.map((line) => [String(line.id), line]));
+  const assigned = /* @__PURE__ */ new Map();
+  const itemsByGroup = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const groupItems = [];
+    for (const item of group.items ?? []) {
+      const line = linesById.get(item.lineId);
+      if (!line) return null;
+      const quantity = item.quantity ?? line.quantity;
+      if (!Number.isInteger(quantity) || quantity <= 0 || quantity > line.quantity) {
+        return null;
+      }
+      assigned.set(item.lineId, (assigned.get(item.lineId) ?? 0) + quantity);
+      groupItems.push({
+        line,
+        quantity,
+        showLineTotal: quantity === line.quantity
+      });
+    }
+    itemsByGroup.set(group.id, groupItems);
+  }
+  for (const line of lines) {
+    if ((assigned.get(String(line.id)) ?? 0) !== line.quantity) return null;
+  }
+  return itemsByGroup;
+}
+function formatAddress(address) {
+  return [
+    [address.firstName, address.lastName].filter(Boolean).join(" "),
+    address.company,
+    address.address1,
+    address.address2,
+    [address.city, address.province, address.postalCode].filter(Boolean).join(" "),
+    address.countryCode,
+    address.phone
+  ].filter(Boolean).join(", ");
+}
+function groupHeading(labels, group, index, total) {
+  const sequence = labels.reviewGroupLabel.replace("{n}", String(index + 1)).replace("{total}", String(total));
+  return group.label ? `${sequence} \xB7 ${group.label}` : sequence;
+}
+function deliveryText(group, labels, formatMoneyProp) {
+  const selected = group.options.find((option) => option.id === group.selectedOptionId);
+  if (!selected) return "";
+  const details = [selected.name];
+  if (selected.estimatedDays) details.push(selected.estimatedDays);
+  if (isAvailableMoney(selected.price)) {
+    const price = formatMoney(selected.price, formatMoneyProp);
+    if (price) details.push(price);
+  }
+  return group.label ? `${group.label}: ${details.join(" \xB7 ")}` : details.join(" \xB7 ");
+}
 function CheckoutReviewStep({
-  values,
+  contact,
+  shippingAddress,
+  billingAddress,
+  sameAsShipping,
+  shippingGroups,
+  paymentMethod,
+  paymentMethods,
+  adjustmentPayments,
+  orderSummary,
   labels,
-  selectedShippingOptionId,
-  shippingOptions,
-  paymentMethods
+  formatMoney: formatMoneyProp
 }) {
-  const shippingName = shippingOptions?.find(
-    (method) => method.id === selectedShippingOptionId
-  )?.name;
-  const paymentName = paymentMethods?.find((method) => method.id === values.paymentMethod)?.name;
-  const shipTo = [
-    [values.firstName, values.lastName].filter(Boolean).join(" "),
-    values.address,
-    [values.city, values.state, values.zipCode].filter(Boolean).join(" "),
-    values.country
-  ].filter(Boolean).join(", ");
-  const rows = [
-    { label: labels.reviewContactLabel, value: values.email },
-    { label: labels.reviewShipToLabel, value: shipTo },
-    { label: labels.reviewPaymentLabel, value: paymentName ?? "" },
-    { label: labels.reviewShippingLabel, value: shippingName ?? "" }
+  const groups = shippingGroups ?? [];
+  const multiGroup = groups.length > 1;
+  const membership = multiGroup ? resolveGroupMembership(groups, orderSummary?.items) : null;
+  const showFlatLines = !multiGroup || !membership;
+  const paymentName = paymentMethods?.find((method) => method.id === paymentMethod)?.name;
+  const contactName = [contact.firstName, contact.lastName].filter(Boolean).join(" ");
+  const singleDelivery = !multiGroup && groups[0] ? deliveryText(groups[0], labels, formatMoneyProp) : "";
+  const identityRows = [
+    {
+      label: labels.reviewContactLabel,
+      value: [contactName, contact.email, contact.phone].filter(Boolean).join(", ")
+    },
+    { label: labels.reviewShipToLabel, value: formatAddress(shippingAddress) },
+    {
+      label: labels.reviewBillingLabel,
+      value: sameAsShipping ? labels.reviewSameAsShippingLabel : billingAddress ? formatAddress(billingAddress) : ""
+    }
   ].filter((row) => row.value.trim() !== "");
-  return /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 rounded-lg p-6", children: [
-    /* @__PURE__ */ jsx("h3", { className: "mb-4 font-medium", children: labels.reviewHeading }),
-    rows.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: labels.reviewEmptyLabel }) : /* @__PURE__ */ jsx("dl", { className: "flex flex-col gap-4 text-sm", children: rows.map((row) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("dt", { className: "inline font-medium", children: [
-        row.label,
-        ": "
-      ] }),
-      /* @__PURE__ */ jsx("dd", { className: "inline", children: row.value })
-    ] }, row.label)) })
+  const paymentRows = [{ label: labels.reviewPaymentLabel, value: paymentName ?? "" }].filter(
+    (row) => row.value.trim() !== ""
+  );
+  const adjustments = (adjustmentPayments ?? []).filter(
+    (adjustment) => isAvailableMoney(adjustment.amount)
+  );
+  const hasSummary = identityRows.length > 0 || paymentRows.length > 0 || Boolean(singleDelivery) || multiGroup;
+  return /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 flex flex-col gap-6 rounded-lg p-6", children: [
+    /* @__PURE__ */ jsx("div", { children: !hasSummary ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: labels.reviewEmptyLabel }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      identityRows.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "mt-4 flex flex-col gap-4 text-sm", children: identityRows.map((row) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("dt", { className: "inline font-medium", children: [
+          row.label,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx("dd", { className: "inline", children: row.value })
+      ] }, row.label)) }) : null,
+      multiGroup ? /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium", children: labels.reviewDeliveryGroupsLabel }),
+        /* @__PURE__ */ jsx("ol", { className: "mt-3 flex flex-col gap-3", children: groups.map((group, index) => {
+          const selected = group.options.find(
+            (option) => option.id === group.selectedOptionId
+          );
+          const groupItems = membership?.get(group.id) ?? [];
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "bg-background/60 rounded-md border p-4 text-sm",
+              "data-checkout-review-group": group.id,
+              children: [
+                /* @__PURE__ */ jsx("h4", { className: "font-medium", children: groupHeading(labels, group, index, groups.length) }),
+                selected ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-baseline justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { children: selected.name }),
+                  selected.estimatedDays ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: selected.estimatedDays }) : null,
+                  isAvailableMoney(selected.price) ? /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatMoney(selected.price, formatMoneyProp) }) : null
+                ] }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: group.unavailableReason ?? labels.groupUnavailableLabel }),
+                membership && groupItems.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+                  /* @__PURE__ */ jsx("h5", { className: "text-muted-foreground text-xs font-medium", children: labels.reviewGroupItemsLabel }),
+                  /* @__PURE__ */ jsx("ul", { className: "mt-1 flex flex-col gap-1", children: groupItems.map(({ line, quantity, showLineTotal }, itemIndex) => /* @__PURE__ */ jsxs(
+                    "li",
+                    {
+                      className: "flex items-center justify-between gap-3",
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { children: [
+                          line.name,
+                          " \xD7 ",
+                          quantity
+                        ] }),
+                        showLineTotal && isAvailableMoney(line.lineTotal) ? /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formatMoney(line.lineTotal, formatMoneyProp) }) : null
+                      ]
+                    },
+                    `${group.id}-${String(line.id)}-${itemIndex}`
+                  )) })
+                ] }) : null
+              ]
+            },
+            group.id
+          );
+        }) })
+      ] }) : singleDelivery ? /* @__PURE__ */ jsx("dl", { className: "mt-4 flex flex-col gap-4 text-sm", children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("dt", { className: "inline font-medium", children: [
+          labels.reviewShippingLabel,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx("dd", { className: "inline", children: singleDelivery })
+      ] }) }) : null,
+      paymentRows.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "mt-4 flex flex-col gap-4 text-sm", children: paymentRows.map((row) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("dt", { className: "inline font-medium", children: [
+          row.label,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx("dd", { className: "inline", children: row.value })
+      ] }, row.label)) }) : null
+    ] }) }),
+    adjustments.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-medium", children: labels.reviewAdjustmentsLabel }),
+      /* @__PURE__ */ jsx("dl", { className: "mt-2 flex flex-col gap-2 text-sm", children: adjustments.map((adjustment) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("dt", { children: adjustment.label }),
+        /* @__PURE__ */ jsx("dd", { className: "tabular-nums", children: formatMoney(adjustment.amount, formatMoneyProp) })
+      ] }, adjustment.id)) })
+    ] }) : null,
+    orderSummary?.items.length ? /* @__PURE__ */ jsxs("div", { children: [
+      showFlatLines ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium", children: labels.reviewLinesLabel }),
+        /* @__PURE__ */ jsx("dl", { className: "mt-2 flex flex-col gap-2 text-sm", children: orderSummary.items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("dt", { children: [
+            item.name,
+            " \xD7 ",
+            item.quantity
+          ] }),
+          /* @__PURE__ */ jsx("dd", { className: "tabular-nums", children: isAvailableMoney(item.lineTotal) ? formatMoney(item.lineTotal, formatMoneyProp) : labels.amountUnavailableLabel })
+        ] }, String(item.id))) })
+      ] }) : null,
+      isAvailableMoney(orderSummary.totals?.total) ? /* @__PURE__ */ jsxs("dl", { className: "mt-2 flex items-center justify-between gap-3 border-t pt-2 text-sm font-medium", children: [
+        /* @__PURE__ */ jsx("dt", { children: labels.totalLabel }),
+        /* @__PURE__ */ jsx("dd", { className: "tabular-nums", children: formatMoney(orderSummary.totals.total, formatMoneyProp) })
+      ] }) : null
+    ] }) : null
   ] });
 }
 export {

package/dist/blocks/e-commerce/checkout-forms/checkout-review-step.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-review-step.tsx"],"sourcesContent":["'use client'\n\nimport type { PaymentMethod } from '@thorprovider/types'\nimport type { CheckoutLabels, CheckoutShippingOption, CheckoutValues } from './checkout'\n\nexport interface CheckoutReviewStepProps {\n  values: CheckoutValues\n  labels: CheckoutLabels\n  selectedShippingOptionId?: string\n  shippingOptions?: CheckoutShippingOption[]\n  paymentMethods?: PaymentMethod[]\n}\n\nexport function CheckoutReviewStep({\n  values,\n  labels,\n  selectedShippingOptionId,\n  shippingOptions,\n  paymentMethods,\n}: CheckoutReviewStepProps) {\n  const shippingName = shippingOptions?.find(\n    (method) => method.id === selectedShippingOptionId,\n  )?.name\n  const paymentName = paymentMethods?.find((method) => method.id === values.paymentMethod)?.name\n\n  const shipTo = [\n    [values.firstName, values.lastName].filter(Boolean).join(' '),\n    values.address,\n    [values.city, values.state, values.zipCode].filter(Boolean).join(' '),\n    values.country,\n  ]\n    .filter(Boolean)\n    .join(', ')\n\n  const rows = [\n    { label: labels.reviewContactLabel, value: values.email },\n    { label: labels.reviewShipToLabel, value: shipTo },\n    { label: labels.reviewPaymentLabel, value: paymentName ?? '' },\n    { label: labels.reviewShippingLabel, value: shippingName ?? '' },\n  ].filter((row) => row.value.trim() !== '')\n\n  return (\n    <div className=\"bg-muted/50 rounded-lg p-6\">\n      <h3 className=\"mb-4 font-medium\">{labels.reviewHeading}</h3>\n      {rows.length === 0 ? (\n        <p className=\"text-muted-foreground text-sm\">{labels.reviewEmptyLabel}</p>\n      ) : (\n        <dl className=\"flex flex-col gap-4 text-sm\">\n          {rows.map((row) => (\n            <div key={row.label}>\n              <dt className=\"inline font-medium\">{row.label}: </dt>\n              <dd className=\"inline\">{row.value}</dd>\n            </div>\n          ))}\n        </dl>\n      )}\n    </div>\n  )\n}\n"],"mappings":";AA2CM,cAOQ,YAPR;AA9BC,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,eAAe,iBAAiB;AAAA,IACpC,CAAC,WAAW,OAAO,OAAO;AAAA,EAC5B,GAAG;AACH,QAAM,cAAc,gBAAgB,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,aAAa,GAAG;AAE1F,QAAM,SAAS;AAAA,IACb,CAAC,OAAO,WAAW,OAAO,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IAC5D,OAAO;AAAA,IACP,CAAC,OAAO,MAAM,OAAO,OAAO,OAAO,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpE,OAAO;AAAA,EACT,EACG,OAAO,OAAO,EACd,KAAK,IAAI;AAEZ,QAAM,OAAO;AAAA,IACX,EAAE,OAAO,OAAO,oBAAoB,OAAO,OAAO,MAAM;AAAA,IACxD,EAAE,OAAO,OAAO,mBAAmB,OAAO,OAAO;AAAA,IACjD,EAAE,OAAO,OAAO,oBAAoB,OAAO,eAAe,GAAG;AAAA,IAC7D,EAAE,OAAO,OAAO,qBAAqB,OAAO,gBAAgB,GAAG;AAAA,EACjE,EAAE,OAAO,CAAC,QAAQ,IAAI,MAAM,KAAK,MAAM,EAAE;AAEzC,SACE,qBAAC,SAAI,WAAU,8BACb;AAAA,wBAAC,QAAG,WAAU,oBAAoB,iBAAO,eAAc;AAAA,IACtD,KAAK,WAAW,IACf,oBAAC,OAAE,WAAU,iCAAiC,iBAAO,kBAAiB,IAEtE,oBAAC,QAAG,WAAU,+BACX,eAAK,IAAI,CAAC,QACT,qBAAC,SACC;AAAA,2BAAC,QAAG,WAAU,sBAAsB;AAAA,YAAI;AAAA,QAAM;AAAA,SAAE;AAAA,MAChD,oBAAC,QAAG,WAAU,UAAU,cAAI,OAAM;AAAA,SAF1B,IAAI,KAGd,CACD,GACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-review-step.tsx"],"sourcesContent":["'use client'\n\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type {\n  CheckoutAddressValues,\n  CheckoutAdjustmentPayment,\n  CheckoutContactValues,\n  CheckoutShippingGroup,\n  Money,\n  PaymentMethod,\n} from '@thorprovider/types'\nimport type {\n  CheckoutLabels,\n  CheckoutOrderLine,\n  CheckoutOrderSummary,\n} from './checkout'\n\nexport interface CheckoutReviewStepProps {\n  contact: CheckoutContactValues\n  shippingAddress: CheckoutAddressValues\n  billingAddress?: CheckoutAddressValues\n  sameAsShipping: boolean\n  shippingGroups?: CheckoutShippingGroup[]\n  paymentMethod: string\n  paymentMethods?: PaymentMethod[]\n  adjustmentPayments?: CheckoutAdjustmentPayment[]\n  orderSummary?: CheckoutOrderSummary\n  labels: CheckoutLabels\n  formatMoney?: (money: Money) => string\n}\n\ninterface ResolvedGroupItem {\n  line: CheckoutOrderLine\n  quantity: number\n  showLineTotal: boolean\n}\n\nfunction resolveGroupMembership(\n  groups: CheckoutShippingGroup[],\n  lines: CheckoutOrderLine[] | undefined,\n): Map<string, ResolvedGroupItem[]> | null {\n  if (!lines?.length || groups.some((group) => !group.items?.length)) return null\n\n\n  const linesById = new Map(lines.map((line) => [String(line.id), line]))\n  const assigned = new Map<string, number>()\n  const itemsByGroup = new Map<string, ResolvedGroupItem[]>()\n\n  for (const group of groups) {\n    const groupItems: ResolvedGroupItem[] = []\n    for (const item of group.items ?? []) {\n      const line = linesById.get(item.lineId)\n      if (!line) return null\n\n      const quantity = item.quantity ?? line.quantity\n      if (!Number.isInteger(quantity) || quantity <= 0 || quantity > line.quantity) {\n        return null\n      }\n\n      assigned.set(item.lineId, (assigned.get(item.lineId) ?? 0) + quantity)\n      groupItems.push({\n        line,\n        quantity,\n        showLineTotal: quantity === line.quantity,\n      })\n    }\n    itemsByGroup.set(group.id, groupItems)\n  }\n\n  for (const line of lines) {\n    if ((assigned.get(String(line.id)) ?? 0) !== line.quantity) return null\n  }\n\n  return itemsByGroup\n}\n\nfunction formatAddress(address: CheckoutAddressValues): string {\n  return [\n    [address.firstName, address.lastName].filter(Boolean).join(' '),\n    address.company,\n    address.address1,\n    address.address2,\n    [address.city, address.province, address.postalCode].filter(Boolean).join(' '),\n    address.countryCode,\n    address.phone,\n  ]\n    .filter(Boolean)\n    .join(', ')\n}\n\nfunction groupHeading(\n  labels: CheckoutLabels,\n  group: CheckoutShippingGroup,\n  index: number,\n  total: number,\n): string {\n  const sequence = labels.reviewGroupLabel\n    .replace('{n}', String(index + 1))\n    .replace('{total}', String(total))\n\n  return group.label ? `${sequence} · ${group.label}` : sequence\n}\n\nfunction deliveryText(\n  group: CheckoutShippingGroup,\n  labels: CheckoutLabels,\n  formatMoneyProp?: (money: Money) => string,\n): string {\n  const selected = group.options.find((option) => option.id === group.selectedOptionId)\n  if (!selected) return ''\n\n  const details = [selected.name]\n  if (selected.estimatedDays) details.push(selected.estimatedDays)\n  if (isAvailableMoney(selected.price)) {\n    const price = formatMoney(selected.price, formatMoneyProp)\n    if (price) details.push(price)\n  }\n\n  return group.label ? `${group.label}: ${details.join(' · ')}` : details.join(' · ')\n}\n\nexport function CheckoutReviewStep({\n  contact,\n  shippingAddress,\n  billingAddress,\n  sameAsShipping,\n  shippingGroups,\n  paymentMethod,\n  paymentMethods,\n  adjustmentPayments,\n  orderSummary,\n  labels,\n  formatMoney: formatMoneyProp,\n}: CheckoutReviewStepProps) {\n  const groups = shippingGroups ?? []\n  const multiGroup = groups.length > 1\n  const membership = multiGroup ? resolveGroupMembership(groups, orderSummary?.items) : null\n  const showFlatLines = !multiGroup || !membership\n  const paymentName = paymentMethods?.find((method) => method.id === paymentMethod)?.name\n  const contactName = [contact.firstName, contact.lastName].filter(Boolean).join(' ')\n  const singleDelivery = !multiGroup && groups[0]\n    ? deliveryText(groups[0], labels, formatMoneyProp)\n    : ''\n\n  const identityRows = [\n    {\n      label: labels.reviewContactLabel,\n      value: [contactName, contact.email, contact.phone].filter(Boolean).join(', '),\n    },\n    { label: labels.reviewShipToLabel, value: formatAddress(shippingAddress) },\n    {\n      label: labels.reviewBillingLabel,\n      value: sameAsShipping\n        ? labels.reviewSameAsShippingLabel\n        : billingAddress\n          ? formatAddress(billingAddress)\n          : '',\n    },\n  ].filter((row) => row.value.trim() !== '')\n\n  const paymentRows = [{ label: labels.reviewPaymentLabel, value: paymentName ?? '' }].filter(\n    (row) => row.value.trim() !== '',\n  )\n\n  const adjustments = (adjustmentPayments ?? []).filter((adjustment) =>\n    isAvailableMoney(adjustment.amount),\n  )\n\n  const hasSummary =\n    identityRows.length > 0 || paymentRows.length > 0 || Boolean(singleDelivery) || multiGroup\n\n  return (\n    <div className=\"bg-muted/50 flex flex-col gap-6 rounded-lg p-6\">\n      <div>\n        {!hasSummary ? (\n          <p className=\"text-muted-foreground mt-2 text-sm\">{labels.reviewEmptyLabel}</p>\n        ) : (\n          <>\n            {identityRows.length > 0 ? (\n              <dl className=\"mt-4 flex flex-col gap-4 text-sm\">\n                {identityRows.map((row) => (\n                  <div key={row.label}>\n                    <dt className=\"inline font-medium\">{row.label}: </dt>\n                    <dd className=\"inline\">{row.value}</dd>\n                  </div>\n                ))}\n              </dl>\n            ) : null}\n\n            {multiGroup ? (\n              <div className=\"mt-4\">\n                <h3 className=\"font-medium\">{labels.reviewDeliveryGroupsLabel}</h3>\n                <ol className=\"mt-3 flex flex-col gap-3\">\n                  {groups.map((group, index) => {\n                    const selected = group.options.find(\n                      (option) => option.id === group.selectedOptionId,\n                    )\n                    const groupItems = membership?.get(group.id) ?? []\n\n                    return (\n                      <li\n                        key={group.id}\n                        className=\"bg-background/60 rounded-md border p-4 text-sm\"\n                        data-checkout-review-group={group.id}\n                      >\n                        <h4 className=\"font-medium\">\n                          {groupHeading(labels, group, index, groups.length)}\n                        </h4>\n\n                        {selected ? (\n                          <div className=\"mt-2 flex flex-wrap items-baseline justify-between gap-2\">\n                            <span>{selected.name}</span>\n                            {selected.estimatedDays ? (\n                              <span className=\"text-muted-foreground text-xs\">\n                                {selected.estimatedDays}\n                              </span>\n                            ) : null}\n                            {isAvailableMoney(selected.price) ? (\n                              <span className=\"tabular-nums\">\n                                {formatMoney(selected.price, formatMoneyProp)}\n                              </span>\n                            ) : null}\n                          </div>\n                        ) : (\n                          <p className=\"text-muted-foreground mt-2 text-sm\">\n                            {group.unavailableReason ?? labels.groupUnavailableLabel}\n                          </p>\n                        )}\n\n                        {membership && groupItems.length > 0 ? (\n                          <div className=\"mt-3\">\n                            <h5 className=\"text-muted-foreground text-xs font-medium\">\n                              {labels.reviewGroupItemsLabel}\n                            </h5>\n                            <ul className=\"mt-1 flex flex-col gap-1\">\n                              {groupItems.map(({ line, quantity, showLineTotal }, itemIndex) => (\n                                <li\n                                  key={`${group.id}-${String(line.id)}-${itemIndex}`}\n                                  className=\"flex items-center justify-between gap-3\"\n                                >\n                                  <span>\n                                    {line.name} × {quantity}\n                                  </span>\n                                  {showLineTotal && isAvailableMoney(line.lineTotal) ? (\n                                    <span className=\"tabular-nums\">\n                                      {formatMoney(line.lineTotal, formatMoneyProp)}\n                                    </span>\n                                  ) : null}\n                                </li>\n                              ))}\n                            </ul>\n                          </div>\n                        ) : null}\n                      </li>\n                    )\n                  })}\n                </ol>\n              </div>\n            ) : singleDelivery ? (\n              <dl className=\"mt-4 flex flex-col gap-4 text-sm\">\n                <div>\n                  <dt className=\"inline font-medium\">{labels.reviewShippingLabel}: </dt>\n                  <dd className=\"inline\">{singleDelivery}</dd>\n                </div>\n              </dl>\n            ) : null}\n\n            {paymentRows.length > 0 ? (\n              <dl className=\"mt-4 flex flex-col gap-4 text-sm\">\n                {paymentRows.map((row) => (\n                  <div key={row.label}>\n                    <dt className=\"inline font-medium\">{row.label}: </dt>\n                    <dd className=\"inline\">{row.value}</dd>\n                  </div>\n                ))}\n              </dl>\n            ) : null}\n          </>\n        )}\n      </div>\n\n      {adjustments.length > 0 ? (\n        <div>\n          <h3 className=\"font-medium\">{labels.reviewAdjustmentsLabel}</h3>\n          <dl className=\"mt-2 flex flex-col gap-2 text-sm\">\n            {adjustments.map((adjustment) => (\n              <div key={adjustment.id} className=\"flex items-center justify-between gap-3\">\n                <dt>{adjustment.label}</dt>\n                <dd className=\"tabular-nums\">\n                  {formatMoney(adjustment.amount, formatMoneyProp)}\n                </dd>\n              </div>\n            ))}\n          </dl>\n        </div>\n      ) : null}\n\n      {orderSummary?.items.length ? (\n        <div>\n          {showFlatLines ? (\n            <>\n              <h3 className=\"font-medium\">{labels.reviewLinesLabel}</h3>\n              <dl className=\"mt-2 flex flex-col gap-2 text-sm\">\n                {orderSummary.items.map((item) => (\n                  <div key={String(item.id)} className=\"flex items-center justify-between gap-3\">\n                    <dt>\n                      {item.name} × {item.quantity}\n                    </dt>\n                    <dd className=\"tabular-nums\">\n                      {isAvailableMoney(item.lineTotal)\n                        ? formatMoney(item.lineTotal, formatMoneyProp)\n                        : labels.amountUnavailableLabel}\n                    </dd>\n                  </div>\n                ))}\n              </dl>\n            </>\n          ) : null}\n          {isAvailableMoney(orderSummary.totals?.total) ? (\n            <dl className=\"mt-2 flex items-center justify-between gap-3 border-t pt-2 text-sm font-medium\">\n              <dt>{labels.totalLabel}</dt>\n              <dd className=\"tabular-nums\">\n                {formatMoney(orderSummary.totals.total, formatMoneyProp)}\n              </dd>\n            </dl>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.d.ts

@@ -0,0 +1,20 @@
+import type { CheckoutSavedAddress } from '@thorprovider/types';
+import type { CheckoutLabels, CheckoutSavedAddressState } from './checkout';
+export interface CheckoutSavedAddressesProps {
+    savedAddresses: CheckoutSavedAddress[];
+    selectedId?: string;
+    state?: CheckoutSavedAddressState;
+    labels: CheckoutLabels;
+    countryLabel: (countryCode: string) => string;
+    onSelect: (id: string) => void;
+    onDelete?: (id: string) => void;
+}
+/**
+ * The saved-address book as selectable cards. The radio and the two actions are
+ * siblings: the label contains only the address summary, so activating Use or
+ * Delete never selects the address as a side effect. Delete is a two-step
+ * inline confirmation; the host owns the mutation and the refreshed list, so
+ * the card is never removed optimistically.
+ */
+export declare function CheckoutSavedAddresses({ savedAddresses, selectedId, state, labels, countryLabel, onSelect, onDelete, }: CheckoutSavedAddressesProps): import("react").JSX.Element | null;
+//# sourceMappingURL=checkout-saved-addresses.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-saved-addresses.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-saved-addresses.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAyB,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAA;AAE3E,MAAM,WAAW,2BAA2B;IAC1C,cAAc,EAAE,oBAAoB,EAAE,CAAA;IACtC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,yBAAyB,CAAA;IACjC,MAAM,EAAE,cAAc,CAAA;IACtB,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAA;IAC7C,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAcD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,cAAc,EACd,UAAU,EACV,KAAK,EACL,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,2BAA2B,sCAsK7B"}

package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.js

@@ -0,0 +1,199 @@
+"use strict";
+"use client";
+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 checkout_saved_addresses_exports = {};
+__export(checkout_saved_addresses_exports, {
+  CheckoutSavedAddresses: () => CheckoutSavedAddresses
+});
+module.exports = __toCommonJS(checkout_saved_addresses_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_badge = require("../../../ui/badge.js");
+var import_button = require("../../../ui/button.js");
+var import_field = require("../../../ui/field.js");
+var import_radio_group = require("../../../ui/radio-group.js");
+var import_checkout_id_context = require("./checkout-id-context.js");
+function recipientName(address) {
+  return [address.firstName, address.lastName].filter(Boolean).join(" ");
+}
+function addressLocality(address) {
+  return [address.city, address.province, address.postalCode].filter(Boolean).join(", ");
+}
+function focusEntry(id) {
+  document.getElementById(id)?.focus();
+}
+function CheckoutSavedAddresses({
+  savedAddresses,
+  selectedId,
+  state,
+  labels,
+  countryLabel,
+  onSelect,
+  onDelete
+}) {
+  const checkoutId = (0, import_checkout_id_context.useCheckoutIds)();
+  const [confirmingId, setConfirmingId] = (0, import_react.useState)(null);
+  const pendingDelete = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const pending = pendingDelete.current;
+    if (!pending) return;
+    const stillPresent = savedAddresses.some((entry) => entry.id === pending.deletedId);
+    if (stillPresent) {
+      if (state?.error?.id === pending.deletedId) {
+        focusEntry(checkoutId(`checkout-saved-address-${pending.deletedId}`));
+        pendingDelete.current = null;
+      }
+      return;
+    }
+    if (pending.nextId) {
+      focusEntry(checkoutId(`checkout-saved-address-${pending.nextId}`));
+    } else {
+      document.getElementById(checkoutId("checkout-add-address"))?.focus();
+    }
+    pendingDelete.current = null;
+  }, [checkoutId, savedAddresses, state?.error?.id]);
+  if (savedAddresses.length === 0) return null;
+  const confirmDelete = (id) => {
+    const index = savedAddresses.findIndex((entry) => entry.id === id);
+    const next = savedAddresses[index + 1] ?? savedAddresses[index - 1];
+    pendingDelete.current = { deletedId: id, nextId: next?.id };
+    setConfirmingId(null);
+    onDelete?.(id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.FieldSet, { "aria-labelledby": checkoutId("checkout-saved-addresses-heading"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLegend, { id: checkoutId("checkout-saved-addresses-heading"), children: labels.savedAddressesLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_radio_group.RadioGroup,
+      {
+        value: selectedId ?? "",
+        onValueChange: (value) => value && onSelect(String(value)),
+        className: "grid grid-cols-1 gap-3",
+        children: savedAddresses.map((saved) => {
+          const inputId = checkoutId(`checkout-saved-address-${saved.id}`);
+          const pending = state?.pendingId === saved.id;
+          const error = state?.error?.id === saved.id ? state.error : void 0;
+          const confirming = confirmingId === saved.id;
+          const name = recipientName(saved.address);
+          const locality = addressLocality(saved.address);
+          const title = saved.label?.trim() || name || saved.address.address1 || labels.savedAddressesLabel;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              className: "flex flex-col gap-2",
+              "data-checkout-saved-address": saved.id,
+              "aria-busy": pending || void 0,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-start sm:justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "label",
+                    {
+                      htmlFor: inputId,
+                      className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left text-sm font-medium",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex flex-wrap items-center gap-2", children: [
+                          title,
+                          saved.label && name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-xs font-normal", children: name }) : null,
+                          saved.isDefaultShipping ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "secondary", className: "text-xs", children: labels.defaultAddressLabel }) : null
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm font-normal", children: saved.address.address1 }),
+                        saved.address.address2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm font-normal", children: saved.address.address2 }) : null,
+                        locality ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm font-normal", children: locality }) : null,
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-sm font-normal", children: countryLabel(saved.address.countryCode) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-2 sm:shrink-0", children: [
+                    selectedId !== saved.id ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_button.Button,
+                      {
+                        type: "button",
+                        variant: "outline",
+                        size: "sm",
+                        disabled: pending,
+                        "aria-label": `${labels.useAddressLabel}: ${title}`,
+                        onClick: () => onSelect(saved.id),
+                        children: labels.useAddressLabel
+                      }
+                    ) : null,
+                    onDelete ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_button.Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "sm",
+                        disabled: pending,
+                        "aria-label": `${labels.deleteAddressLabel}: ${title}`,
+                        onClick: () => setConfirmingId(saved.id),
+                        children: pending ? labels.deletingAddressLabel : labels.deleteAddressLabel
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radio_group.RadioGroupItem, { value: saved.id, id: inputId, disabled: pending })
+                  ] })
+                ] }),
+                confirming ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    className: "flex flex-col gap-2 rounded-md border border-destructive/40 p-3",
+                    role: "group",
+                    "aria-label": labels.deleteAddressConfirmLabel,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium", children: labels.deleteAddressConfirmLabel }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-xs", children: labels.deleteAddressHintLabel }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_button.Button,
+                          {
+                            type: "button",
+                            variant: "destructive",
+                            size: "sm",
+                            disabled: pending,
+                            onClick: () => confirmDelete(saved.id),
+                            children: pending ? labels.deletingAddressLabel : labels.deleteAddressLabel
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_button.Button,
+                          {
+                            type: "button",
+                            variant: "outline",
+                            size: "sm",
+                            disabled: pending,
+                            onClick: () => setConfirmingId(null),
+                            children: labels.cancelAddressLabel
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ) : null,
+                error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-destructive text-sm", role: "alert", children: error.message || labels.addressDeleteErrorLabel }) : null
+              ]
+            },
+            saved.id
+          );
+        })
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckoutSavedAddresses
+});
+//# sourceMappingURL=checkout-saved-addresses.js.map

package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-saved-addresses.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { FieldLegend, FieldSet } from '../../../ui/field'\nimport { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'\nimport { useCheckoutIds } from './checkout-id-context'\nimport type { CheckoutAddressValues, CheckoutSavedAddress } from '@thorprovider/types'\nimport type { CheckoutLabels, CheckoutSavedAddressState } from './checkout'\n\nexport interface CheckoutSavedAddressesProps {\n  savedAddresses: CheckoutSavedAddress[]\n  selectedId?: string\n  state?: CheckoutSavedAddressState\n  labels: CheckoutLabels\n  countryLabel: (countryCode: string) => string\n  onSelect: (id: string) => void\n  onDelete?: (id: string) => void\n}\n\nfunction recipientName(address: CheckoutAddressValues): string {\n  return [address.firstName, address.lastName].filter(Boolean).join(' ')\n}\n\nfunction addressLocality(address: CheckoutAddressValues): string {\n  return [address.city, address.province, address.postalCode].filter(Boolean).join(', ')\n}\n\nfunction focusEntry(id: string): void {\n  document.getElementById(id)?.focus()\n}\n\n/**\n * The saved-address book as selectable cards. The radio and the two actions are\n * siblings: the label contains only the address summary, so activating Use or\n * Delete never selects the address as a side effect. Delete is a two-step\n * inline confirmation; the host owns the mutation and the refreshed list, so\n * the card is never removed optimistically.\n */\nexport function CheckoutSavedAddresses({\n  savedAddresses,\n  selectedId,\n  state,\n  labels,\n  countryLabel,\n  onSelect,\n  onDelete,\n}: CheckoutSavedAddressesProps) {\n  const checkoutId = useCheckoutIds()\n  const [confirmingId, setConfirmingId] = useState<string | null>(null)\n  const pendingDelete = useRef<{ deletedId: string; nextId?: string } | null>(null)\n\n  useEffect(() => {\n    const pending = pendingDelete.current\n    if (!pending) return\n\n    const stillPresent = savedAddresses.some((entry) => entry.id === pending.deletedId)\n    if (stillPresent) {\n      if (state?.error?.id === pending.deletedId) {\n        focusEntry(checkoutId(`checkout-saved-address-${pending.deletedId}`))\n        pendingDelete.current = null\n      }\n      return\n    }\n\n    if (pending.nextId) {\n      focusEntry(checkoutId(`checkout-saved-address-${pending.nextId}`))\n    } else {\n      document.getElementById(checkoutId('checkout-add-address'))?.focus()\n    }\n    pendingDelete.current = null\n  }, [checkoutId, savedAddresses, state?.error?.id])\n\n  if (savedAddresses.length === 0) return null\n\n  const confirmDelete = (id: string) => {\n    const index = savedAddresses.findIndex((entry) => entry.id === id)\n    const next = savedAddresses[index + 1] ?? savedAddresses[index - 1]\n    pendingDelete.current = { deletedId: id, nextId: next?.id }\n    setConfirmingId(null)\n    onDelete?.(id)\n  }\n\n  return (\n    <FieldSet aria-labelledby={checkoutId('checkout-saved-addresses-heading')}>\n      <FieldLegend id={checkoutId('checkout-saved-addresses-heading')}>\n        {labels.savedAddressesLabel}\n      </FieldLegend>\n      <RadioGroup\n        value={selectedId ?? ''}\n        onValueChange={(value) => value && onSelect(String(value))}\n        className=\"grid grid-cols-1 gap-3\"\n      >\n        {savedAddresses.map((saved) => {\n          const inputId = checkoutId(`checkout-saved-address-${saved.id}`)\n          const pending = state?.pendingId === saved.id\n          const error = state?.error?.id === saved.id ? state.error : undefined\n          const confirming = confirmingId === saved.id\n          const name = recipientName(saved.address)\n          const locality = addressLocality(saved.address)\n          const title =\n            saved.label?.trim() || name || saved.address.address1 || labels.savedAddressesLabel\n\n          return (\n            <div\n              key={saved.id}\n              className=\"flex flex-col gap-2\"\n              data-checkout-saved-address={saved.id}\n              aria-busy={pending || undefined}\n            >\n              <div className=\"flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-start sm:justify-between\">\n                <label\n                  htmlFor={inputId}\n                  className=\"flex min-w-0 flex-1 flex-col gap-0.5 text-left text-sm font-medium\"\n                >\n                  <span className=\"flex flex-wrap items-center gap-2\">\n                    {title}\n                    {saved.label && name ? (\n                      <span className=\"text-muted-foreground text-xs font-normal\">{name}</span>\n                    ) : null}\n                    {saved.isDefaultShipping ? (\n                      <Badge variant=\"secondary\" className=\"text-xs\">\n                        {labels.defaultAddressLabel}\n                      </Badge>\n                    ) : null}\n                  </span>\n                  <span className=\"text-muted-foreground text-sm font-normal\">\n                    {saved.address.address1}\n                  </span>\n                  {saved.address.address2 ? (\n                    <span className=\"text-muted-foreground text-sm font-normal\">\n                      {saved.address.address2}\n                    </span>\n                  ) : null}\n                  {locality ? (\n                    <span className=\"text-muted-foreground text-sm font-normal\">{locality}</span>\n                  ) : null}\n                  <span className=\"text-muted-foreground text-sm font-normal\">\n                    {countryLabel(saved.address.countryCode)}\n                  </span>\n                </label>\n\n                <div className=\"flex flex-wrap items-center gap-2 sm:shrink-0\">\n                  {selectedId !== saved.id ? (\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      size=\"sm\"\n                      disabled={pending}\n                      aria-label={`${labels.useAddressLabel}: ${title}`}\n                      onClick={() => onSelect(saved.id)}\n                    >\n                      {labels.useAddressLabel}\n                    </Button>\n                  ) : null}\n                  {onDelete ? (\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      disabled={pending}\n                      aria-label={`${labels.deleteAddressLabel}: ${title}`}\n                      onClick={() => setConfirmingId(saved.id)}\n                    >\n                      {pending ? labels.deletingAddressLabel : labels.deleteAddressLabel}\n                    </Button>\n                  ) : null}\n                  <RadioGroupItem value={saved.id} id={inputId} disabled={pending} />\n                </div>\n              </div>\n\n              {confirming ? (\n                <div\n                  className=\"flex flex-col gap-2 rounded-md border border-destructive/40 p-3\"\n                  role=\"group\"\n                  aria-label={labels.deleteAddressConfirmLabel}\n                >\n                  <p className=\"text-sm font-medium\">{labels.deleteAddressConfirmLabel}</p>\n                  <p className=\"text-muted-foreground text-xs\">{labels.deleteAddressHintLabel}</p>\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button\n                      type=\"button\"\n                      variant=\"destructive\"\n                      size=\"sm\"\n                      disabled={pending}\n                      onClick={() => confirmDelete(saved.id)}\n                    >\n                      {pending ? labels.deletingAddressLabel : labels.deleteAddressLabel}\n                    </Button>\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      size=\"sm\"\n                      disabled={pending}\n                      onClick={() => setConfirmingId(null)}\n                    >\n                      {labels.cancelAddressLabel}\n                    </Button>\n                  </div>\n                </div>\n              ) : null}\n\n              {error ? (\n                <p className=\"text-destructive text-sm\" role=\"alert\">\n                  {error.message || labels.addressDeleteErrorLabel}\n                </p>\n              ) : null}\n            </div>\n          )\n        })}\n      </RadioGroup>\n    </FieldSet>\n  )\n}\n"],"mappings":"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","names":[]}