@thorprovider/blocks 3.0.2 → 4.1.0

package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-location-select.tsx"],"sourcesContent":["'use client'\n\nimport { Button } from '../../../ui/button'\nimport { Field, FieldLabel } from '../../../ui/field'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../../../ui/select'\nimport type { CheckoutAddressOption, CheckoutReadState } from '@thorprovider/types'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport type { CheckoutFieldError } from './checkout-form-types'\nimport type { CheckoutLabels } from './checkout'\n\nexport interface CheckoutLocationSelectProps {\n  id: string\n  label: string\n  placeholder: string\n  value: string\n  options: CheckoutAddressOption[]\n  state?: CheckoutReadState\n  error?: string\n  disabled?: boolean\n  onChange: (value: string) => void\n  onRetry?: () => void\n  labels: CheckoutLabels\n  errors?: CheckoutFieldError[]\n  description?: string\n}\n\n/**\n * One country/province/city selector. The block renders the supplied options\n * and states; it never fetches, filters, clears, or cascades them.\n */\nexport function CheckoutLocationSelect({\n  id,\n  label,\n  placeholder,\n  value,\n  options,\n  state = 'idle',\n  error,\n  disabled = false,\n  onChange,\n  onRetry,\n  labels,\n  errors,\n  description,\n}: CheckoutLocationSelectProps) {\n  const pending = state === 'pending'\n  const failed = state === 'error'\n  const unavailable = state === 'unavailable'\n  const noOptions = options.length === 0\n  const isDisabled = disabled || pending || failed || unavailable || noOptions\n  const locationErrors: CheckoutFieldError[] = error ? [{ message: error }] : []\n  const allErrors = [...(errors ?? []), ...locationErrors]\n\n  return (\n    <Field data-invalid={!!allErrors.length}>\n      <FieldLabel htmlFor={id}>{label}</FieldLabel>\n      <Select value={value} onValueChange={onChange} disabled={isDisabled}>\n        <SelectTrigger id={id} data-checkout-location={id} {...checkoutFieldAria(id, allErrors)}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      {pending ? (\n        <p className=\"text-muted-foreground text-sm\" role=\"status\">\n          {labels.locationLoadingLabel}\n        </p>\n      ) : null}\n      {unavailable || (!pending && !failed && noOptions) ? (\n        <p className=\"text-muted-foreground text-sm\" role=\"status\">\n          {labels.locationUnavailableLabel}\n        </p>\n      ) : null}\n      {failed && onRetry ? (\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetry}>\n          {labels.retryLabel}\n        </Button>\n      ) : null}\n      <CheckoutFieldFeedback\n        id={id}\n        errors={allErrors}\n        description={description}\n      />\n    </Field>\n  )\n}\n"],"mappings":";AA8DM,cACA,YADA;AA5DN,SAAS,cAAc;AACvB,SAAS,OAAO,kBAAkB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,uBAAuB,yBAAyB;AAwBlD,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,UAAU,UAAU;AAC1B,QAAM,SAAS,UAAU;AACzB,QAAM,cAAc,UAAU;AAC9B,QAAM,YAAY,QAAQ,WAAW;AACrC,QAAM,aAAa,YAAY,WAAW,UAAU,eAAe;AACnE,QAAM,iBAAuC,QAAQ,CAAC,EAAE,SAAS,MAAM,CAAC,IAAI,CAAC;AAC7E,QAAM,YAAY,CAAC,GAAI,UAAU,CAAC,GAAI,GAAG,cAAc;AAEvD,SACE,qBAAC,SAAM,gBAAc,CAAC,CAAC,UAAU,QAC/B;AAAA,wBAAC,cAAW,SAAS,IAAK,iBAAM;AAAA,IAChC,qBAAC,UAAO,OAAc,eAAe,UAAU,UAAU,YACvD;AAAA,0BAAC,iBAAc,IAAQ,0BAAwB,IAAK,GAAG,kBAAkB,IAAI,SAAS,GACpF,8BAAC,eAAY,aAA0B,GACzC;AAAA,MACA,oBAAC,iBACC,8BAAC,eACE,kBAAQ,IAAI,CAAC,WACZ,oBAAC,cAA8B,OAAO,OAAO,OAC1C,iBAAO,SADO,OAAO,KAExB,CACD,GACH,GACF;AAAA,OACF;AAAA,IACC,UACC,oBAAC,OAAE,WAAU,iCAAgC,MAAK,UAC/C,iBAAO,sBACV,IACE;AAAA,IACH,eAAgB,CAAC,WAAW,CAAC,UAAU,YACtC,oBAAC,OAAE,WAAU,iCAAgC,MAAK,UAC/C,iBAAO,0BACV,IACE;AAAA,IACH,UAAU,UACT,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAAK,WAAU,SAAQ,SAAS,SAC1E,iBAAO,YACV,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.d.ts

@@ -1,5 +1,5 @@
 import type { Money } from '@thorprovider/types';
-import type { CheckoutLabels, CheckoutOrderSummary, CheckoutTotalsState } from './checkout';
+import type { CheckoutAdjustmentPayment, CheckoutLabels, CheckoutOrderSummary, CheckoutTotalsState } from './checkout';
 export interface CheckoutOrderSummaryPanelProps {
     summary: CheckoutOrderSummary;
     labels: CheckoutLabels;
@@ -10,11 +10,12 @@ export interface CheckoutOrderSummaryPanelProps {
     onPromoCodeChange: (value: string) => void;
     onApplyPromo?: (code: string) => void;
     promoPending?: boolean;
+    adjustmentPayments?: CheckoutAdjustmentPayment[];
     trustNotes?: string[];
 }
 /**
  * Internal projection of the checkout's own cart. It is not a public block: the
  * amount contract is `Money` only and every total is rendered verbatim.
  */
-export declare function CheckoutOrderSummaryPanel({ summary, labels, formatMoney: formatMoneyProp, totalsState, onRetryTotals, promoCode, onPromoCodeChange, onApplyPromo, promoPending, trustNotes, }: CheckoutOrderSummaryPanelProps): import("react").JSX.Element;
+export declare function CheckoutOrderSummaryPanel({ summary, labels, formatMoney: formatMoneyProp, totalsState, onRetryTotals, promoCode, onPromoCodeChange, onApplyPromo, promoPending, adjustmentPayments, trustNotes, }: CheckoutOrderSummaryPanelProps): import("react").JSX.Element;
 //# sourceMappingURL=checkout-order-summary.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkout-order-summary.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-order-summary.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,KAAK,EACV,cAAc,EACd,oBAAoB,EAEpB,mBAAmB,EACpB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,oBAAoB,CAAA;IAC7B,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAA;IACtC,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,MAAM,EACN,WAAW,EAAE,eAAe,EAC5B,WAAoB,EACpB,aAAa,EACb,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,YAAoB,EACpB,UAAU,GACX,EAAE,8BAA8B,+BAuLhC"}
+{"version":3,"file":"checkout-order-summary.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-order-summary.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,KAAK,EACV,yBAAyB,EACzB,cAAc,EACd,oBAAoB,EAEpB,mBAAmB,EACpB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,oBAAoB,CAAA;IAC7B,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAA;IACtC,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,yBAAyB,EAAE,CAAA;IAChD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,MAAM,EACN,WAAW,EAAE,eAAe,EAC5B,WAAoB,EACpB,aAAa,EACb,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,YAAoB,EACpB,kBAAkB,EAClB,UAAU,GACX,EAAE,8BAA8B,+BAqMhC"}

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.js

@@ -28,6 +28,7 @@ var import_badge = require("../../../ui/badge.js");
 var import_button = require("../../../ui/button.js");
 var import_card = require("../../../ui/card.js");
 var import_field = require("../../../ui/field.js");
+var import_checkout_id_context = require("./checkout-id-context.js");
 var import_input = require("../../../ui/input.js");
 var import_separator = require("../../../ui/separator.js");
 var import_money = require("../../../lib/money.js");
@@ -41,8 +42,10 @@ function CheckoutOrderSummaryPanel({
   onPromoCodeChange,
   onApplyPromo,
   promoPending = false,
+  adjustmentPayments,
   trustNotes
 }) {
+  const checkoutId = (0, import_checkout_id_context.useCheckoutIds)();
   const format = (value) => (0, import_money.formatMoney)(value, formatMoneyProp);
   const lineAmount = (item) => (0, import_money.isAvailableMoney)(item.lineTotal) ? format(item.lineTotal) : null;
   const renderTotals = () => {
@@ -137,12 +140,12 @@ function CheckoutOrderSummaryPanel({
     onApplyPromo ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.Field, { className: "gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLabel, { htmlFor: "checkout-promo-code", children: labels.promoCodeLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLabel, { htmlFor: checkoutId("checkout-promo-code"), children: labels.promoCodeLabel }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_input.Input,
             {
-              id: "checkout-promo-code",
+              id: checkoutId("checkout-promo-code"),
               placeholder: labels.promoPlaceholder,
               value: promoCode,
               onChange: (e) => onPromoCodeChange(e.target.value)
@@ -161,6 +164,10 @@ function CheckoutOrderSummaryPanel({
         ] })
       ] })
     ] }) : null,
+    adjustmentPayments && adjustmentPayments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2 text-sm", children: adjustmentPayments.map((adjustment) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: adjustment.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium tabular-nums", children: format(adjustment.amount) })
+    ] }, adjustment.id)) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, {}),
     renderTotals(),
     trustNotes && trustNotes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground flex flex-col gap-2 text-sm", children: trustNotes.map((note, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2", children: [

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-order-summary.tsx"],"sourcesContent":["'use client'\n\nimport { Shield, Truck } from 'lucide-react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardTitle } from '../../../ui/card'\nimport { Field, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { Separator } from '../../../ui/separator'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type { Money } from '@thorprovider/types'\nimport type {\n  CheckoutLabels,\n  CheckoutOrderSummary,\n  CheckoutOrderLine,\n  CheckoutTotalsState,\n} from './checkout'\n\nexport interface CheckoutOrderSummaryPanelProps {\n  summary: CheckoutOrderSummary\n  labels: CheckoutLabels\n  formatMoney?: (money: Money) => string\n  totalsState?: CheckoutTotalsState\n  onRetryTotals?: () => void\n  promoCode: string\n  onPromoCodeChange: (value: string) => void\n  onApplyPromo?: (code: string) => void\n  promoPending?: boolean\n  trustNotes?: string[]\n}\n\n/**\n * Internal projection of the checkout's own cart. It is not a public block: the\n * amount contract is `Money` only and every total is rendered verbatim.\n */\nexport function CheckoutOrderSummaryPanel({\n  summary,\n  labels,\n  formatMoney: formatMoneyProp,\n  totalsState = 'idle',\n  onRetryTotals,\n  promoCode,\n  onPromoCodeChange,\n  onApplyPromo,\n  promoPending = false,\n  trustNotes,\n}: CheckoutOrderSummaryPanelProps) {\n  const format = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)\n  const lineAmount = (item: CheckoutOrderLine): string | null =>\n    isAvailableMoney(item.lineTotal) ? format(item.lineTotal) : null\n\n  const renderTotals = () => {\n    if (totalsState === 'pending') {\n      return (\n        <p className=\"text-muted-foreground text-sm\" aria-live=\"polite\">\n          {labels.totalsPendingLabel}\n        </p>\n      )\n    }\n    if (totalsState === 'error') {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"alert\">\n          <p className=\"text-destructive text-sm\">{labels.totalsErrorLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const totals = summary.totals\n    if (!totals) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const subtotalText = format(totals.subtotal)\n    const totalText = format(totals.total)\n    // Required totals: an absent/malformed amount is unavailable, never a\n    // fabricated zero.\n    if (subtotalText === null || totalText === null) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"flex flex-col gap-2 text-sm\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-muted-foreground\">{labels.subtotalLabel}</span>\n          <span className=\"font-medium tabular-nums\">{subtotalText}</span>\n        </div>\n        {isAvailableMoney(totals.discount) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.discountLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.discount)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.tax) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.taxLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.tax)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.shipping) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"flex items-center gap-1.5 text-muted-foreground\">\n              <Truck aria-hidden=\"true\" className=\"size-4\" />\n              {labels.shippingLabel}\n            </span>\n            <span className=\"font-medium tabular-nums\">{format(totals.shipping)}</span>\n          </div>\n        ) : null}\n        <Separator />\n        <div className=\"flex items-center justify-between\">\n          <span className=\"font-semibold\">{labels.totalLabel}</span>\n          <span className=\"font-semibold tabular-nums\">{totalText}</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <Card className=\"lg:sticky lg:top-8\">\n      <CardContent className=\"flex flex-col gap-4 p-6\">\n        <CardTitle>{labels.orderSummaryTitle}</CardTitle>\n\n        <div className=\"flex flex-col gap-4\">\n          {summary.items.map((item) => {\n            const amount = lineAmount(item)\n            return (\n              <div key={String(item.id)} className=\"flex items-center gap-3\">\n                <div className=\"relative\">\n                  {item.image ? (\n                    <img\n                      src={item.image}\n                      alt={item.name}\n                      width={64}\n                      height={64}\n                      className=\"bg-muted size-16 rounded-lg object-cover\"\n                    />\n                  ) : (\n                    <div aria-hidden=\"true\" className=\"bg-muted size-16 rounded-lg\" />\n                  )}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs\"\n                  >\n                    {item.quantity}\n                  </Badge>\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-sm font-medium\">{item.name}</p>\n                  {item.variant ? (\n                    <p className=\"text-sm text-muted-foreground\">{item.variant}</p>\n                  ) : null}\n                  {item.quantity > 1 && isAvailableMoney(item.unitPrice) ? (\n                    <p className=\"text-muted-foreground text-xs\">\n                      {format(item.unitPrice)} {labels.eachLabel}\n                    </p>\n                  ) : null}\n                </div>\n                <p className=\"text-sm font-medium tabular-nums\">\n                  {amount ?? labels.amountUnavailableLabel}\n                </p>\n              </div>\n            )\n          })}\n        </div>\n\n        {onApplyPromo ? (\n          <>\n            <Separator />\n            <Field className=\"gap-2\">\n              <FieldLabel htmlFor=\"checkout-promo-code\">{labels.promoCodeLabel}</FieldLabel>\n              <div className=\"flex gap-2\">\n                <Input\n                  id=\"checkout-promo-code\"\n                  placeholder={labels.promoPlaceholder}\n                  value={promoCode}\n                  onChange={(e) => onPromoCodeChange(e.target.value)}\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  disabled={promoPending}\n                  onClick={() => onApplyPromo(promoCode)}\n                >\n                  {labels.promoApplyLabel}\n                </Button>\n              </div>\n            </Field>\n          </>\n        ) : null}\n\n        <Separator />\n\n        {renderTotals()}\n\n        {trustNotes && trustNotes.length > 0 ? (\n          <div className=\"text-muted-foreground flex flex-col gap-2 text-sm\">\n            {trustNotes.map((note, index) => (\n              <span key={`${index}:${note}`} className=\"flex items-center gap-2\">\n                <Shield aria-hidden=\"true\" className=\"size-4\" />\n                {note}\n              </span>\n            ))}\n          </div>\n        ) : null}\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-order-summary.tsx"],"sourcesContent":["'use client'\n\nimport { Shield, Truck } from 'lucide-react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardTitle } from '../../../ui/card'\nimport { Field, FieldLabel } from '../../../ui/field'\nimport { useCheckoutIds } from './checkout-id-context'\nimport { Input } from '../../../ui/input'\nimport { Separator } from '../../../ui/separator'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type { Money } from '@thorprovider/types'\nimport type {\n  CheckoutAdjustmentPayment,\n  CheckoutLabels,\n  CheckoutOrderSummary,\n  CheckoutOrderLine,\n  CheckoutTotalsState,\n} from './checkout'\n\nexport interface CheckoutOrderSummaryPanelProps {\n  summary: CheckoutOrderSummary\n  labels: CheckoutLabels\n  formatMoney?: (money: Money) => string\n  totalsState?: CheckoutTotalsState\n  onRetryTotals?: () => void\n  promoCode: string\n  onPromoCodeChange: (value: string) => void\n  onApplyPromo?: (code: string) => void\n  promoPending?: boolean\n  adjustmentPayments?: CheckoutAdjustmentPayment[]\n  trustNotes?: string[]\n}\n\n/**\n * Internal projection of the checkout's own cart. It is not a public block: the\n * amount contract is `Money` only and every total is rendered verbatim.\n */\nexport function CheckoutOrderSummaryPanel({\n  summary,\n  labels,\n  formatMoney: formatMoneyProp,\n  totalsState = 'idle',\n  onRetryTotals,\n  promoCode,\n  onPromoCodeChange,\n  onApplyPromo,\n  promoPending = false,\n  adjustmentPayments,\n  trustNotes,\n}: CheckoutOrderSummaryPanelProps) {\n  const checkoutId = useCheckoutIds()\n  const format = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)\n  const lineAmount = (item: CheckoutOrderLine): string | null =>\n    isAvailableMoney(item.lineTotal) ? format(item.lineTotal) : null\n\n  const renderTotals = () => {\n    if (totalsState === 'pending') {\n      return (\n        <p className=\"text-muted-foreground text-sm\" aria-live=\"polite\">\n          {labels.totalsPendingLabel}\n        </p>\n      )\n    }\n    if (totalsState === 'error') {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"alert\">\n          <p className=\"text-destructive text-sm\">{labels.totalsErrorLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const totals = summary.totals\n    if (!totals) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const subtotalText = format(totals.subtotal)\n    const totalText = format(totals.total)\n    // Required totals: an absent/malformed amount is unavailable, never a\n    // fabricated zero.\n    if (subtotalText === null || totalText === null) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"flex flex-col gap-2 text-sm\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-muted-foreground\">{labels.subtotalLabel}</span>\n          <span className=\"font-medium tabular-nums\">{subtotalText}</span>\n        </div>\n        {isAvailableMoney(totals.discount) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.discountLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.discount)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.tax) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.taxLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.tax)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.shipping) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"flex items-center gap-1.5 text-muted-foreground\">\n              <Truck aria-hidden=\"true\" className=\"size-4\" />\n              {labels.shippingLabel}\n            </span>\n            <span className=\"font-medium tabular-nums\">{format(totals.shipping)}</span>\n          </div>\n        ) : null}\n        <Separator />\n        <div className=\"flex items-center justify-between\">\n          <span className=\"font-semibold\">{labels.totalLabel}</span>\n          <span className=\"font-semibold tabular-nums\">{totalText}</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <Card className=\"lg:sticky lg:top-8\">\n      <CardContent className=\"flex flex-col gap-4 p-6\">\n        <CardTitle>{labels.orderSummaryTitle}</CardTitle>\n\n        <div className=\"flex flex-col gap-4\">\n          {summary.items.map((item) => {\n            const amount = lineAmount(item)\n            return (\n              <div key={String(item.id)} className=\"flex items-center gap-3\">\n                <div className=\"relative\">\n                  {item.image ? (\n                    <img\n                      src={item.image}\n                      alt={item.name}\n                      width={64}\n                      height={64}\n                      className=\"bg-muted size-16 rounded-lg object-cover\"\n                    />\n                  ) : (\n                    <div aria-hidden=\"true\" className=\"bg-muted size-16 rounded-lg\" />\n                  )}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs\"\n                  >\n                    {item.quantity}\n                  </Badge>\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-sm font-medium\">{item.name}</p>\n                  {item.variant ? (\n                    <p className=\"text-sm text-muted-foreground\">{item.variant}</p>\n                  ) : null}\n                  {item.quantity > 1 && isAvailableMoney(item.unitPrice) ? (\n                    <p className=\"text-muted-foreground text-xs\">\n                      {format(item.unitPrice)} {labels.eachLabel}\n                    </p>\n                  ) : null}\n                </div>\n                <p className=\"text-sm font-medium tabular-nums\">\n                  {amount ?? labels.amountUnavailableLabel}\n                </p>\n              </div>\n            )\n          })}\n        </div>\n\n        {onApplyPromo ? (\n          <>\n            <Separator />\n            <Field className=\"gap-2\">\n              <FieldLabel htmlFor={checkoutId('checkout-promo-code')}>{labels.promoCodeLabel}</FieldLabel>\n              <div className=\"flex gap-2\">\n                <Input\n                  id={checkoutId('checkout-promo-code')}\n                  placeholder={labels.promoPlaceholder}\n                  value={promoCode}\n                  onChange={(e) => onPromoCodeChange(e.target.value)}\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  disabled={promoPending}\n                  onClick={() => onApplyPromo(promoCode)}\n                >\n                  {labels.promoApplyLabel}\n                </Button>\n              </div>\n            </Field>\n          </>\n        ) : null}\n\n        {adjustmentPayments && adjustmentPayments.length > 0 ? (\n          <div className=\"flex flex-col gap-2 text-sm\">\n            {adjustmentPayments.map((adjustment) => (\n              <div key={adjustment.id} className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground\">{adjustment.label}</span>\n                <span className=\"font-medium tabular-nums\">\n                  {format(adjustment.amount)}\n                </span>\n              </div>\n            ))}\n          </div>\n        ) : null}\n\n        <Separator />\n\n        {renderTotals()}\n\n        {trustNotes && trustNotes.length > 0 ? (\n          <div className=\"text-muted-foreground flex flex-col gap-2 text-sm\">\n            {trustNotes.map((note, index) => (\n              <span key={`${index}:${note}`} className=\"flex items-center gap-2\">\n                <Shield aria-hidden=\"true\" className=\"size-4\" />\n                {note}\n              </span>\n            ))}\n          </div>\n        ) : null}\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.mjs

@@ -5,6 +5,7 @@ import { Badge } from "../../../ui/badge.mjs";
 import { Button } from "../../../ui/button.mjs";
 import { Card, CardContent, CardTitle } from "../../../ui/card.mjs";
 import { Field, FieldLabel } from "../../../ui/field.mjs";
+import { useCheckoutIds } from "./checkout-id-context.mjs";
 import { Input } from "../../../ui/input.mjs";
 import { Separator } from "../../../ui/separator.mjs";
 import { formatMoney, isAvailableMoney } from "../../../lib/money.mjs";
@@ -18,8 +19,10 @@ function CheckoutOrderSummaryPanel({
   onPromoCodeChange,
   onApplyPromo,
   promoPending = false,
+  adjustmentPayments,
   trustNotes
 }) {
+  const checkoutId = useCheckoutIds();
   const format = (value) => formatMoney(value, formatMoneyProp);
   const lineAmount = (item) => isAvailableMoney(item.lineTotal) ? format(item.lineTotal) : null;
   const renderTotals = () => {
@@ -114,12 +117,12 @@ function CheckoutOrderSummaryPanel({
     onApplyPromo ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Separator, {}),
       /* @__PURE__ */ jsxs(Field, { className: "gap-2", children: [
-        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-promo-code", children: labels.promoCodeLabel }),
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: checkoutId("checkout-promo-code"), children: labels.promoCodeLabel }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ jsx(
             Input,
             {
-              id: "checkout-promo-code",
+              id: checkoutId("checkout-promo-code"),
               placeholder: labels.promoPlaceholder,
               value: promoCode,
               onChange: (e) => onPromoCodeChange(e.target.value)
@@ -138,6 +141,10 @@ function CheckoutOrderSummaryPanel({
         ] })
       ] })
     ] }) : null,
+    adjustmentPayments && adjustmentPayments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 text-sm", children: adjustmentPayments.map((adjustment) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: adjustment.label }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: format(adjustment.amount) })
+    ] }, adjustment.id)) }) : null,
     /* @__PURE__ */ jsx(Separator, {}),
     renderTotals(),
     trustNotes && trustNotes.length > 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex flex-col gap-2 text-sm", children: trustNotes.map((note, index) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-order-summary.tsx"],"sourcesContent":["'use client'\n\nimport { Shield, Truck } from 'lucide-react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardTitle } from '../../../ui/card'\nimport { Field, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { Separator } from '../../../ui/separator'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type { Money } from '@thorprovider/types'\nimport type {\n  CheckoutLabels,\n  CheckoutOrderSummary,\n  CheckoutOrderLine,\n  CheckoutTotalsState,\n} from './checkout'\n\nexport interface CheckoutOrderSummaryPanelProps {\n  summary: CheckoutOrderSummary\n  labels: CheckoutLabels\n  formatMoney?: (money: Money) => string\n  totalsState?: CheckoutTotalsState\n  onRetryTotals?: () => void\n  promoCode: string\n  onPromoCodeChange: (value: string) => void\n  onApplyPromo?: (code: string) => void\n  promoPending?: boolean\n  trustNotes?: string[]\n}\n\n/**\n * Internal projection of the checkout's own cart. It is not a public block: the\n * amount contract is `Money` only and every total is rendered verbatim.\n */\nexport function CheckoutOrderSummaryPanel({\n  summary,\n  labels,\n  formatMoney: formatMoneyProp,\n  totalsState = 'idle',\n  onRetryTotals,\n  promoCode,\n  onPromoCodeChange,\n  onApplyPromo,\n  promoPending = false,\n  trustNotes,\n}: CheckoutOrderSummaryPanelProps) {\n  const format = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)\n  const lineAmount = (item: CheckoutOrderLine): string | null =>\n    isAvailableMoney(item.lineTotal) ? format(item.lineTotal) : null\n\n  const renderTotals = () => {\n    if (totalsState === 'pending') {\n      return (\n        <p className=\"text-muted-foreground text-sm\" aria-live=\"polite\">\n          {labels.totalsPendingLabel}\n        </p>\n      )\n    }\n    if (totalsState === 'error') {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"alert\">\n          <p className=\"text-destructive text-sm\">{labels.totalsErrorLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const totals = summary.totals\n    if (!totals) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const subtotalText = format(totals.subtotal)\n    const totalText = format(totals.total)\n    // Required totals: an absent/malformed amount is unavailable, never a\n    // fabricated zero.\n    if (subtotalText === null || totalText === null) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"flex flex-col gap-2 text-sm\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-muted-foreground\">{labels.subtotalLabel}</span>\n          <span className=\"font-medium tabular-nums\">{subtotalText}</span>\n        </div>\n        {isAvailableMoney(totals.discount) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.discountLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.discount)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.tax) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.taxLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.tax)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.shipping) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"flex items-center gap-1.5 text-muted-foreground\">\n              <Truck aria-hidden=\"true\" className=\"size-4\" />\n              {labels.shippingLabel}\n            </span>\n            <span className=\"font-medium tabular-nums\">{format(totals.shipping)}</span>\n          </div>\n        ) : null}\n        <Separator />\n        <div className=\"flex items-center justify-between\">\n          <span className=\"font-semibold\">{labels.totalLabel}</span>\n          <span className=\"font-semibold tabular-nums\">{totalText}</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <Card className=\"lg:sticky lg:top-8\">\n      <CardContent className=\"flex flex-col gap-4 p-6\">\n        <CardTitle>{labels.orderSummaryTitle}</CardTitle>\n\n        <div className=\"flex flex-col gap-4\">\n          {summary.items.map((item) => {\n            const amount = lineAmount(item)\n            return (\n              <div key={String(item.id)} className=\"flex items-center gap-3\">\n                <div className=\"relative\">\n                  {item.image ? (\n                    <img\n                      src={item.image}\n                      alt={item.name}\n                      width={64}\n                      height={64}\n                      className=\"bg-muted size-16 rounded-lg object-cover\"\n                    />\n                  ) : (\n                    <div aria-hidden=\"true\" className=\"bg-muted size-16 rounded-lg\" />\n                  )}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs\"\n                  >\n                    {item.quantity}\n                  </Badge>\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-sm font-medium\">{item.name}</p>\n                  {item.variant ? (\n                    <p className=\"text-sm text-muted-foreground\">{item.variant}</p>\n                  ) : null}\n                  {item.quantity > 1 && isAvailableMoney(item.unitPrice) ? (\n                    <p className=\"text-muted-foreground text-xs\">\n                      {format(item.unitPrice)} {labels.eachLabel}\n                    </p>\n                  ) : null}\n                </div>\n                <p className=\"text-sm font-medium tabular-nums\">\n                  {amount ?? labels.amountUnavailableLabel}\n                </p>\n              </div>\n            )\n          })}\n        </div>\n\n        {onApplyPromo ? (\n          <>\n            <Separator />\n            <Field className=\"gap-2\">\n              <FieldLabel htmlFor=\"checkout-promo-code\">{labels.promoCodeLabel}</FieldLabel>\n              <div className=\"flex gap-2\">\n                <Input\n                  id=\"checkout-promo-code\"\n                  placeholder={labels.promoPlaceholder}\n                  value={promoCode}\n                  onChange={(e) => onPromoCodeChange(e.target.value)}\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  disabled={promoPending}\n                  onClick={() => onApplyPromo(promoCode)}\n                >\n                  {labels.promoApplyLabel}\n                </Button>\n              </div>\n            </Field>\n          </>\n        ) : null}\n\n        <Separator />\n\n        {renderTotals()}\n\n        {trustNotes && trustNotes.length > 0 ? (\n          <div className=\"text-muted-foreground flex flex-col gap-2 text-sm\">\n            {trustNotes.map((note, index) => (\n              <span key={`${index}:${note}`} className=\"flex items-center gap-2\">\n                <Shield aria-hidden=\"true\" className=\"size-4\" />\n                {note}\n              </span>\n            ))}\n          </div>\n        ) : null}\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-order-summary.tsx"],"sourcesContent":["'use client'\n\nimport { Shield, Truck } from 'lucide-react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardTitle } from '../../../ui/card'\nimport { Field, FieldLabel } from '../../../ui/field'\nimport { useCheckoutIds } from './checkout-id-context'\nimport { Input } from '../../../ui/input'\nimport { Separator } from '../../../ui/separator'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type { Money } from '@thorprovider/types'\nimport type {\n  CheckoutAdjustmentPayment,\n  CheckoutLabels,\n  CheckoutOrderSummary,\n  CheckoutOrderLine,\n  CheckoutTotalsState,\n} from './checkout'\n\nexport interface CheckoutOrderSummaryPanelProps {\n  summary: CheckoutOrderSummary\n  labels: CheckoutLabels\n  formatMoney?: (money: Money) => string\n  totalsState?: CheckoutTotalsState\n  onRetryTotals?: () => void\n  promoCode: string\n  onPromoCodeChange: (value: string) => void\n  onApplyPromo?: (code: string) => void\n  promoPending?: boolean\n  adjustmentPayments?: CheckoutAdjustmentPayment[]\n  trustNotes?: string[]\n}\n\n/**\n * Internal projection of the checkout's own cart. It is not a public block: the\n * amount contract is `Money` only and every total is rendered verbatim.\n */\nexport function CheckoutOrderSummaryPanel({\n  summary,\n  labels,\n  formatMoney: formatMoneyProp,\n  totalsState = 'idle',\n  onRetryTotals,\n  promoCode,\n  onPromoCodeChange,\n  onApplyPromo,\n  promoPending = false,\n  adjustmentPayments,\n  trustNotes,\n}: CheckoutOrderSummaryPanelProps) {\n  const checkoutId = useCheckoutIds()\n  const format = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)\n  const lineAmount = (item: CheckoutOrderLine): string | null =>\n    isAvailableMoney(item.lineTotal) ? format(item.lineTotal) : null\n\n  const renderTotals = () => {\n    if (totalsState === 'pending') {\n      return (\n        <p className=\"text-muted-foreground text-sm\" aria-live=\"polite\">\n          {labels.totalsPendingLabel}\n        </p>\n      )\n    }\n    if (totalsState === 'error') {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"alert\">\n          <p className=\"text-destructive text-sm\">{labels.totalsErrorLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const totals = summary.totals\n    if (!totals) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const subtotalText = format(totals.subtotal)\n    const totalText = format(totals.total)\n    // Required totals: an absent/malformed amount is unavailable, never a\n    // fabricated zero.\n    if (subtotalText === null || totalText === null) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"flex flex-col gap-2 text-sm\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-muted-foreground\">{labels.subtotalLabel}</span>\n          <span className=\"font-medium tabular-nums\">{subtotalText}</span>\n        </div>\n        {isAvailableMoney(totals.discount) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.discountLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.discount)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.tax) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.taxLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.tax)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.shipping) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"flex items-center gap-1.5 text-muted-foreground\">\n              <Truck aria-hidden=\"true\" className=\"size-4\" />\n              {labels.shippingLabel}\n            </span>\n            <span className=\"font-medium tabular-nums\">{format(totals.shipping)}</span>\n          </div>\n        ) : null}\n        <Separator />\n        <div className=\"flex items-center justify-between\">\n          <span className=\"font-semibold\">{labels.totalLabel}</span>\n          <span className=\"font-semibold tabular-nums\">{totalText}</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <Card className=\"lg:sticky lg:top-8\">\n      <CardContent className=\"flex flex-col gap-4 p-6\">\n        <CardTitle>{labels.orderSummaryTitle}</CardTitle>\n\n        <div className=\"flex flex-col gap-4\">\n          {summary.items.map((item) => {\n            const amount = lineAmount(item)\n            return (\n              <div key={String(item.id)} className=\"flex items-center gap-3\">\n                <div className=\"relative\">\n                  {item.image ? (\n                    <img\n                      src={item.image}\n                      alt={item.name}\n                      width={64}\n                      height={64}\n                      className=\"bg-muted size-16 rounded-lg object-cover\"\n                    />\n                  ) : (\n                    <div aria-hidden=\"true\" className=\"bg-muted size-16 rounded-lg\" />\n                  )}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs\"\n                  >\n                    {item.quantity}\n                  </Badge>\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-sm font-medium\">{item.name}</p>\n                  {item.variant ? (\n                    <p className=\"text-sm text-muted-foreground\">{item.variant}</p>\n                  ) : null}\n                  {item.quantity > 1 && isAvailableMoney(item.unitPrice) ? (\n                    <p className=\"text-muted-foreground text-xs\">\n                      {format(item.unitPrice)} {labels.eachLabel}\n                    </p>\n                  ) : null}\n                </div>\n                <p className=\"text-sm font-medium tabular-nums\">\n                  {amount ?? labels.amountUnavailableLabel}\n                </p>\n              </div>\n            )\n          })}\n        </div>\n\n        {onApplyPromo ? (\n          <>\n            <Separator />\n            <Field className=\"gap-2\">\n              <FieldLabel htmlFor={checkoutId('checkout-promo-code')}>{labels.promoCodeLabel}</FieldLabel>\n              <div className=\"flex gap-2\">\n                <Input\n                  id={checkoutId('checkout-promo-code')}\n                  placeholder={labels.promoPlaceholder}\n                  value={promoCode}\n                  onChange={(e) => onPromoCodeChange(e.target.value)}\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  disabled={promoPending}\n                  onClick={() => onApplyPromo(promoCode)}\n                >\n                  {labels.promoApplyLabel}\n                </Button>\n              </div>\n            </Field>\n          </>\n        ) : null}\n\n        {adjustmentPayments && adjustmentPayments.length > 0 ? (\n          <div className=\"flex flex-col gap-2 text-sm\">\n            {adjustmentPayments.map((adjustment) => (\n              <div key={adjustment.id} className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground\">{adjustment.label}</span>\n                <span className=\"font-medium tabular-nums\">\n                  {format(adjustment.amount)}\n                </span>\n              </div>\n            ))}\n          </div>\n        ) : null}\n\n        <Separator />\n\n        {renderTotals()}\n\n        {trustNotes && trustNotes.length > 0 ? (\n          <div className=\"text-muted-foreground flex flex-col gap-2 text-sm\">\n            {trustNotes.map((note, index) => (\n              <span key={`${index}:${note}`} className=\"flex items-center gap-2\">\n                <Shield aria-hidden=\"true\" className=\"size-4\" />\n                {note}\n              </span>\n            ))}\n          </div>\n        ) : null}\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.d.ts

@@ -1,12 +1,27 @@
-import type { PaymentMethod } from '@thorprovider/types';
-import type { CheckoutChangeHandler, CheckoutFieldDescriptions, CheckoutValuesFieldErrors, CheckoutLabels, CheckoutValues } from './checkout';
+import type { CheckoutAdjustmentPayment, Money, PaymentMethod } from '@thorprovider/types';
+import type { CheckoutFieldError } from './checkout-form-types';
+import type { CheckoutLabels } from './checkout';
 export interface CheckoutPaymentStepProps {
-    values: CheckoutValues;
-    onChange: CheckoutChangeHandler;
-    labels: CheckoutLabels;
     paymentMethods?: PaymentMethod[];
-    fieldErrors?: CheckoutValuesFieldErrors;
-    fieldDescriptions?: CheckoutFieldDescriptions;
+    paymentState?: 'idle' | 'pending' | 'error' | 'unavailable';
+    paymentMethod: string;
+    onSelectPaymentMethod: (id: string) => void;
+    onRetryPayment?: () => void;
+    adjustmentPayments?: CheckoutAdjustmentPayment[];
+    onApplyGiftCard?: (code: string) => void;
+    giftCardState?: 'idle' | 'pending' | 'valid' | 'invalid';
+    giftCardMessage?: string;
+    onRemoveAdjustment?: (id: string) => void;
+    storeCredit?: {
+        available: Money;
+        applied?: Money;
+        onApply?: () => void;
+        onRemove?: () => void;
+    };
+    labels: CheckoutLabels;
+    formatMoney?: (money: Money) => string;
+    fieldErrors?: CheckoutFieldError[];
+    description?: string;
 }
-export declare function CheckoutPaymentStep({ values, onChange, labels, paymentMethods, fieldErrors, fieldDescriptions, }: CheckoutPaymentStepProps): import("react").JSX.Element;
+export declare function CheckoutPaymentStep({ paymentMethods, paymentState, paymentMethod, onSelectPaymentMethod, onRetryPayment, adjustmentPayments, onApplyGiftCard, giftCardState, giftCardMessage, onRemoveAdjustment, storeCredit, labels, formatMoney: formatMoneyProp, fieldErrors, description, }: CheckoutPaymentStepProps): import("react").JSX.Element;
 //# sourceMappingURL=checkout-payment-step.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkout-payment-step.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-payment-step.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,KAAK,EACV,qBAAqB,EACrB,yBAAyB,EACzB,yBAAyB,EACzB,cAAc,EACd,cAAc,EACf,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,yBAAyB,CAAA;IACvC,iBAAiB,CAAC,EAAE,yBAAyB,CAAA;CAC9C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,cAAmB,EACnB,WAAW,EACX,iBAAiB,GAClB,EAAE,wBAAwB,+BAqE1B"}
+{"version":3,"file":"checkout-payment-step.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-payment-step.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,yBAAyB,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAG1F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEhD,MAAM,WAAW,wBAAwB;IACvC,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAA;IAC3D,aAAa,EAAE,MAAM,CAAA;IACrB,qBAAqB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,kBAAkB,CAAC,EAAE,yBAAyB,EAAE,CAAA;IAChD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;IACxD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,WAAW,CAAC,EAAE;QACZ,SAAS,EAAE,KAAK,CAAA;QAChB,OAAO,CAAC,EAAE,KAAK,CAAA;QACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;QACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;KACtB,CAAA;IACD,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAA;IACtC,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,cAAmB,EACnB,YAAqB,EACrB,aAAa,EACb,qBAAqB,EACrB,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,aAAsB,EACtB,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,WAAW,EAAE,eAAe,EAC5B,WAAW,EACX,WAAW,GACZ,EAAE,wBAAwB,+BAuL1B"}

package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.js

@@ -23,45 +23,75 @@ __export(checkout_payment_step_exports, {
 });
 module.exports = __toCommonJS(checkout_payment_step_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_button = require("../../../ui/button.js");
 var import_field = require("../../../ui/field.js");
+var import_input = require("../../../ui/input.js");
 var import_radio_group = require("../../../ui/radio-group.js");
+var import_money = require("../../../lib/money.js");
 var import_checkout_field_feedback = require("./checkout-field-feedback.js");
+var import_checkout_id_context = require("./checkout-id-context.js");
 function CheckoutPaymentStep({
-  values,
-  onChange,
-  labels,
   paymentMethods = [],
+  paymentState = "idle",
+  paymentMethod,
+  onSelectPaymentMethod,
+  onRetryPayment,
+  adjustmentPayments,
+  onApplyGiftCard,
+  giftCardState = "idle",
+  giftCardMessage,
+  onRemoveAdjustment,
+  storeCredit,
+  labels,
+  formatMoney: formatMoneyProp,
   fieldErrors,
-  fieldDescriptions
+  description
 }) {
-  const selectedMethod = paymentMethods.find((method) => method.id === values.paymentMethod);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.FieldSet, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLegend, { children: labels.paymentMethodLegend }),
-    paymentMethods.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.noPaymentMethodsLabel }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const checkoutId = (0, import_checkout_id_context.useCheckoutIds)();
+  const [giftCardCode, setGiftCardCode] = (0, import_react.useState)("");
+  const selectedMethod = paymentMethods.find((method) => method.id === paymentMethod);
+  const pending = paymentState === "pending";
+  const failed = paymentState === "error";
+  const unavailable = paymentState === "unavailable";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.FieldSet, { className: "gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLegend, { className: "mb-0", children: labels.paymentMethodLegend }),
+    pending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", role: "status", children: labels.paymentLoadingLabel }) : failed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", role: "alert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-destructive text-sm", children: labels.paymentErrorLabel }),
+      onRetryPayment ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetryPayment, children: labels.retryLabel }) : null
+    ] }) : unavailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", role: "status", children: labels.paymentUnavailableLabel }) : paymentMethods.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.noPaymentMethodsLabel }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_radio_group.RadioGroup,
       {
-        value: values.paymentMethod,
-        onValueChange: (value) => value && onChange("paymentMethod", String(value)),
+        value: paymentMethod,
+        onValueChange: (value) => value && onSelectPaymentMethod(String(value)),
         className: "grid grid-cols-1 gap-3",
         children: paymentMethods.map((method) => {
-          const unavailable = method.isEnabled === false;
+          const disabled = method.isEnabled === false;
           return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             import_field.Field,
             {
               orientation: "horizontal",
               className: "flex-wrap items-start justify-between gap-3 rounded-lg border p-4",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldContent, { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.FieldLabel, { htmlFor: `payment-${method.id}`, className: "flex flex-col gap-0.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: method.name }),
-                  method.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-xs font-normal", children: method.description }) : null,
-                  unavailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-xs font-normal", children: labels.unavailableMethodLabel }) : null
-                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldContent, { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  import_field.FieldLabel,
+                  {
+                    htmlFor: checkoutId(`payment-${method.id}`),
+                    className: "flex flex-col items-start gap-0.5 text-left",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: method.name }),
+                      method.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-xs font-normal", children: method.description }) : null,
+                      disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-xs font-normal", children: labels.unavailableMethodLabel }) : null
+                    ]
+                  }
+                ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_radio_group.RadioGroupItem,
                   {
                     value: method.id,
-                    id: `payment-${method.id}`,
-                    disabled: unavailable
+                    id: checkoutId(`payment-${method.id}`),
+                    "data-checkout-payment-method": method.id,
+                    disabled
                   }
                 )
               ]
@@ -71,19 +101,94 @@ function CheckoutPaymentStep({
         })
       }
     ),
-    selectedMethod ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-muted/50 rounded-lg p-4 text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-medium", children: selectedMethod.name }),
-      selectedMethod.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1", children: selectedMethod.description }) : null,
-      selectedMethod.requiresSetup ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1 text-xs", children: labels.requiresSetupLabel }) : null
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.Field, { "data-invalid": !!fieldErrors?.paymentMethod?.length, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_checkout_field_feedback.CheckoutFieldFeedback,
-      {
-        id: "checkout-payment-method",
-        errors: fieldErrors?.paymentMethod,
-        description: fieldDescriptions?.paymentMethod
-      }
-    ) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-6", children: [
+      selectedMethod ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-muted/50 rounded-lg p-4 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-medium", children: selectedMethod.name }),
+        selectedMethod.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1", children: selectedMethod.description }) : null,
+        selectedMethod.requiresSetup ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1 text-xs", children: labels.requiresSetupLabel }) : null
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.Field, { "data-invalid": !!fieldErrors?.length, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_checkout_field_feedback.CheckoutFieldFeedback,
+        {
+          id: checkoutId("checkout-payment-method"),
+          errors: fieldErrors,
+          description
+        }
+      ) }),
+      onApplyGiftCard ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 rounded-lg border p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium", children: labels.giftCardLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input.Input,
+            {
+              id: checkoutId("checkout-gift-card"),
+              value: giftCardCode,
+              placeholder: labels.giftCardPlaceholder,
+              onChange: (e) => setGiftCardCode(e.target.value),
+              className: "min-w-0 flex-1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.Button,
+            {
+              type: "button",
+              variant: "outline",
+              disabled: giftCardState === "pending" || giftCardCode.trim() === "",
+              onClick: () => onApplyGiftCard(giftCardCode.trim()),
+              children: labels.applyLabel
+            }
+          )
+        ] }),
+        giftCardMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "p",
+          {
+            className: giftCardState === "invalid" ? "text-destructive text-sm" : "text-muted-foreground text-sm",
+            role: giftCardState === "invalid" ? "alert" : "status",
+            children: giftCardMessage
+          }
+        ) : null
+      ] }) : null,
+      adjustmentPayments && adjustmentPayments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2", children: adjustmentPayments.map((adjustment) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "flex flex-wrap items-center justify-between gap-2 rounded-lg border px-4 py-3 text-sm",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: adjustment.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tabular-nums", children: (0, import_money.formatMoney)(adjustment.amount, formatMoneyProp) }),
+              onRemoveAdjustment ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_button.Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => onRemoveAdjustment(adjustment.id),
+                  children: labels.removeLabel
+                }
+              ) : null
+            ] })
+          ]
+        },
+        adjustment.id
+      )) }) : null,
+      storeCredit ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 rounded-lg border p-4 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-medium", children: labels.storeCreditLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-muted-foreground", children: [
+          labels.availableCreditLabel,
+          ": ",
+          (0, import_money.formatMoney)(storeCredit.available, formatMoneyProp)
+        ] }),
+        (0, import_money.isAvailableMoney)(storeCredit.applied) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+          labels.applyLabel,
+          ": ",
+          (0, import_money.formatMoney)(storeCredit.applied, formatMoneyProp)
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+          storeCredit.onApply ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "outline", size: "sm", onClick: storeCredit.onApply, children: labels.applyLabel }) : null,
+          storeCredit.onRemove ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "ghost", size: "sm", onClick: storeCredit.onRemove, children: labels.removeLabel }) : null
+        ] })
+      ] }) : null
+    ] })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-payment-step.tsx"],"sourcesContent":["'use client'\n\nimport { Field, FieldContent, FieldLabel, FieldLegend, FieldSet } from '../../../ui/field'\nimport { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport type { PaymentMethod } from '@thorprovider/types'\nimport type {\n  CheckoutChangeHandler,\n  CheckoutFieldDescriptions,\n  CheckoutValuesFieldErrors,\n  CheckoutLabels,\n  CheckoutValues,\n} from './checkout'\n\nexport interface CheckoutPaymentStepProps {\n  values: CheckoutValues\n  onChange: CheckoutChangeHandler\n  labels: CheckoutLabels\n  paymentMethods?: PaymentMethod[]\n  fieldErrors?: CheckoutValuesFieldErrors\n  fieldDescriptions?: CheckoutFieldDescriptions\n}\n\nexport function CheckoutPaymentStep({\n  values,\n  onChange,\n  labels,\n  paymentMethods = [],\n  fieldErrors,\n  fieldDescriptions,\n}: CheckoutPaymentStepProps) {\n  const selectedMethod = paymentMethods.find((method) => method.id === values.paymentMethod)\n\n  return (\n    <FieldSet>\n      <FieldLegend>{labels.paymentMethodLegend}</FieldLegend>\n      {paymentMethods.length === 0 ? (\n        <p className=\"text-muted-foreground text-sm\">{labels.noPaymentMethodsLabel}</p>\n      ) : (\n        <RadioGroup\n          value={values.paymentMethod}\n          onValueChange={(value) => value && onChange('paymentMethod', String(value))}\n          className=\"grid grid-cols-1 gap-3\"\n        >\n          {paymentMethods.map((method) => {\n            const unavailable = method.isEnabled === false\n            return (\n              <Field\n                key={method.id}\n                orientation=\"horizontal\"\n                className=\"flex-wrap items-start justify-between gap-3 rounded-lg border p-4\"\n              >\n                <FieldContent className=\"min-w-0\">\n                  <FieldLabel htmlFor={`payment-${method.id}`} className=\"flex flex-col gap-0.5\">\n                    <span>{method.name}</span>\n                    {method.description ? (\n                      <span className=\"text-muted-foreground text-xs font-normal\">\n                        {method.description}\n                      </span>\n                    ) : null}\n                    {unavailable ? (\n                      <span className=\"text-muted-foreground text-xs font-normal\">\n                        {labels.unavailableMethodLabel}\n                      </span>\n                    ) : null}\n                  </FieldLabel>\n                </FieldContent>\n                <RadioGroupItem\n                  value={method.id}\n                  id={`payment-${method.id}`}\n                  disabled={unavailable}\n                />\n              </Field>\n            )\n          })}\n        </RadioGroup>\n      )}\n\n      {selectedMethod ? (\n        <div className=\"bg-muted/50 rounded-lg p-4 text-sm\">\n          <p className=\"font-medium\">{selectedMethod.name}</p>\n          {selectedMethod.description ? (\n            <p className=\"text-muted-foreground mt-1\">{selectedMethod.description}</p>\n          ) : null}\n          {selectedMethod.requiresSetup ? (\n            <p className=\"text-muted-foreground mt-1 text-xs\">{labels.requiresSetupLabel}</p>\n          ) : null}\n        </div>\n      ) : null}\n\n      <Field data-invalid={!!fieldErrors?.paymentMethod?.length}>\n        <CheckoutFieldFeedback\n          id=\"checkout-payment-method\"\n          errors={fieldErrors?.paymentMethod}\n          description={fieldDescriptions?.paymentMethod}\n        />\n      </Field>\n    </FieldSet>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCM;AAjCN,mBAAuE;AACvE,yBAA2C;AAC3C,qCAAyD;AAmBlD,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,iBAAiB,eAAe,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,aAAa;AAEzF,SACE,6CAAC,yBACC;AAAA,gDAAC,4BAAa,iBAAO,qBAAoB;AAAA,IACxC,eAAe,WAAW,IACzB,4CAAC,OAAE,WAAU,iCAAiC,iBAAO,uBAAsB,IAE3E;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,OAAO;AAAA,QACd,eAAe,CAAC,UAAU,SAAS,SAAS,iBAAiB,OAAO,KAAK,CAAC;AAAA,QAC1E,WAAU;AAAA,QAET,yBAAe,IAAI,CAAC,WAAW;AAC9B,gBAAM,cAAc,OAAO,cAAc;AACzC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,aAAY;AAAA,cACZ,WAAU;AAAA,cAEV;AAAA,4DAAC,6BAAa,WAAU,WACtB,uDAAC,2BAAW,SAAS,WAAW,OAAO,EAAE,IAAI,WAAU,yBACrD;AAAA,8DAAC,UAAM,iBAAO,MAAK;AAAA,kBAClB,OAAO,cACN,4CAAC,UAAK,WAAU,6CACb,iBAAO,aACV,IACE;AAAA,kBACH,cACC,4CAAC,UAAK,WAAU,6CACb,iBAAO,wBACV,IACE;AAAA,mBACN,GACF;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,OAAO;AAAA,oBACd,IAAI,WAAW,OAAO,EAAE;AAAA,oBACxB,UAAU;AAAA;AAAA,gBACZ;AAAA;AAAA;AAAA,YAvBK,OAAO;AAAA,UAwBd;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,IAGD,iBACC,6CAAC,SAAI,WAAU,sCACb;AAAA,kDAAC,OAAE,WAAU,eAAe,yBAAe,MAAK;AAAA,MAC/C,eAAe,cACd,4CAAC,OAAE,WAAU,8BAA8B,yBAAe,aAAY,IACpE;AAAA,MACH,eAAe,gBACd,4CAAC,OAAE,WAAU,sCAAsC,iBAAO,oBAAmB,IAC3E;AAAA,OACN,IACE;AAAA,IAEJ,4CAAC,sBAAM,gBAAc,CAAC,CAAC,aAAa,eAAe,QACjD;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,QAAQ,aAAa;AAAA,QACrB,aAAa,mBAAmB;AAAA;AAAA,IAClC,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-payment-step.tsx"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\nimport { Button } from '../../../ui/button'\nimport {\n  Field,\n  FieldContent,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type { CheckoutAdjustmentPayment, Money, PaymentMethod } from '@thorprovider/types'\nimport { CheckoutFieldFeedback } from './checkout-field-feedback'\nimport { useCheckoutIds } from './checkout-id-context'\nimport type { CheckoutFieldError } from './checkout-form-types'\nimport type { CheckoutLabels } from './checkout'\n\nexport interface CheckoutPaymentStepProps {\n  paymentMethods?: PaymentMethod[]\n  paymentState?: 'idle' | 'pending' | 'error' | 'unavailable'\n  paymentMethod: string\n  onSelectPaymentMethod: (id: string) => void\n  onRetryPayment?: () => void\n  adjustmentPayments?: CheckoutAdjustmentPayment[]\n  onApplyGiftCard?: (code: string) => void\n  giftCardState?: 'idle' | 'pending' | 'valid' | 'invalid'\n  giftCardMessage?: string\n  onRemoveAdjustment?: (id: string) => void\n  storeCredit?: {\n    available: Money\n    applied?: Money\n    onApply?: () => void\n    onRemove?: () => void\n  }\n  labels: CheckoutLabels\n  formatMoney?: (money: Money) => string\n  fieldErrors?: CheckoutFieldError[]\n  description?: string\n}\n\nexport function CheckoutPaymentStep({\n  paymentMethods = [],\n  paymentState = 'idle',\n  paymentMethod,\n  onSelectPaymentMethod,\n  onRetryPayment,\n  adjustmentPayments,\n  onApplyGiftCard,\n  giftCardState = 'idle',\n  giftCardMessage,\n  onRemoveAdjustment,\n  storeCredit,\n  labels,\n  formatMoney: formatMoneyProp,\n  fieldErrors,\n  description,\n}: CheckoutPaymentStepProps) {\n  const checkoutId = useCheckoutIds()\n  const [giftCardCode, setGiftCardCode] = useState('')\n  const selectedMethod = paymentMethods.find((method) => method.id === paymentMethod)\n  const pending = paymentState === 'pending'\n  const failed = paymentState === 'error'\n  const unavailable = paymentState === 'unavailable'\n\n  return (\n    <FieldSet className=\"gap-3\">\n      <FieldLegend className=\"mb-0\">{labels.paymentMethodLegend}</FieldLegend>\n\n      {pending ? (\n        <p className=\"text-muted-foreground text-sm\" role=\"status\">\n          {labels.paymentLoadingLabel}\n        </p>\n      ) : failed ? (\n        <div className=\"flex flex-col gap-2\" role=\"alert\">\n          <p className=\"text-destructive text-sm\">{labels.paymentErrorLabel}</p>\n          {onRetryPayment ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryPayment}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      ) : unavailable ? (\n        <p className=\"text-muted-foreground text-sm\" role=\"status\">\n          {labels.paymentUnavailableLabel}\n        </p>\n      ) : paymentMethods.length === 0 ? (\n        <p className=\"text-muted-foreground text-sm\">{labels.noPaymentMethodsLabel}</p>\n      ) : (\n        <RadioGroup\n          value={paymentMethod}\n          onValueChange={(value) => value && onSelectPaymentMethod(String(value))}\n          className=\"grid grid-cols-1 gap-3\"\n        >\n          {paymentMethods.map((method) => {\n            const disabled = method.isEnabled === false\n            return (\n              <Field\n                key={method.id}\n                orientation=\"horizontal\"\n                className=\"flex-wrap items-start justify-between gap-3 rounded-lg border p-4\"\n              >\n                <FieldContent className=\"min-w-0\">\n                  <FieldLabel\n                    htmlFor={checkoutId(`payment-${method.id}`)}\n                    className=\"flex flex-col items-start gap-0.5 text-left\"\n                  >\n                    <span>{method.name}</span>\n                    {method.description ? (\n                      <span className=\"text-muted-foreground text-xs font-normal\">\n                        {method.description}\n                      </span>\n                    ) : null}\n                    {disabled ? (\n                      <span className=\"text-muted-foreground text-xs font-normal\">\n                        {labels.unavailableMethodLabel}\n                      </span>\n                    ) : null}\n                  </FieldLabel>\n                </FieldContent>\n                <RadioGroupItem\n                  value={method.id}\n                  id={checkoutId(`payment-${method.id}`)}\n                  data-checkout-payment-method={method.id}\n                  disabled={disabled}\n                />\n              </Field>\n            )\n          })}\n        </RadioGroup>\n      )}\n\n      <div className=\"flex flex-col gap-6\">\n        {selectedMethod ? (\n          <div className=\"bg-muted/50 rounded-lg p-4 text-sm\">\n            <p className=\"font-medium\">{selectedMethod.name}</p>\n            {selectedMethod.description ? (\n              <p className=\"text-muted-foreground mt-1\">{selectedMethod.description}</p>\n            ) : null}\n            {selectedMethod.requiresSetup ? (\n              <p className=\"text-muted-foreground mt-1 text-xs\">{labels.requiresSetupLabel}</p>\n            ) : null}\n          </div>\n        ) : null}\n\n        <Field data-invalid={!!fieldErrors?.length}>\n          <CheckoutFieldFeedback\n            id={checkoutId('checkout-payment-method')}\n            errors={fieldErrors}\n            description={description}\n          />\n        </Field>\n\n        {onApplyGiftCard ? (\n          <div className=\"flex flex-col gap-2 rounded-lg border p-4\">\n            <p className=\"text-sm font-medium\">{labels.giftCardLabel}</p>\n            <div className=\"flex flex-wrap gap-2\">\n              <Input\n                id={checkoutId('checkout-gift-card')}\n                value={giftCardCode}\n                placeholder={labels.giftCardPlaceholder}\n                onChange={(e) => setGiftCardCode(e.target.value)}\n                className=\"min-w-0 flex-1\"\n              />\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                disabled={giftCardState === 'pending' || giftCardCode.trim() === ''}\n                onClick={() => onApplyGiftCard(giftCardCode.trim())}\n              >\n                {labels.applyLabel}\n              </Button>\n            </div>\n            {giftCardMessage ? (\n              <p\n                className={giftCardState === 'invalid' ? 'text-destructive text-sm' : 'text-muted-foreground text-sm'}\n                role={giftCardState === 'invalid' ? 'alert' : 'status'}\n              >\n                {giftCardMessage}\n              </p>\n            ) : null}\n          </div>\n        ) : null}\n\n        {adjustmentPayments && adjustmentPayments.length > 0 ? (\n          <div className=\"flex flex-col gap-2\">\n            {adjustmentPayments.map((adjustment) => (\n              <div\n                key={adjustment.id}\n                className=\"flex flex-wrap items-center justify-between gap-2 rounded-lg border px-4 py-3 text-sm\"\n              >\n                <span>{adjustment.label}</span>\n                <span className=\"flex items-center gap-3\">\n                  <span className=\"tabular-nums\">\n                    {formatMoney(adjustment.amount, formatMoneyProp)}\n                  </span>\n                  {onRemoveAdjustment ? (\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      onClick={() => onRemoveAdjustment(adjustment.id)}\n                    >\n                      {labels.removeLabel}\n                    </Button>\n                  ) : null}\n                </span>\n              </div>\n            ))}\n          </div>\n        ) : null}\n\n        {storeCredit ? (\n          <div className=\"flex flex-col gap-2 rounded-lg border p-4 text-sm\">\n            <p className=\"font-medium\">{labels.storeCreditLabel}</p>\n            <p className=\"text-muted-foreground\">\n              {labels.availableCreditLabel}: {formatMoney(storeCredit.available, formatMoneyProp)}\n            </p>\n            {isAvailableMoney(storeCredit.applied) ? (\n              <p>\n                {labels.applyLabel}: {formatMoney(storeCredit.applied, formatMoneyProp)}\n              </p>\n            ) : null}\n            <div className=\"flex flex-wrap gap-2\">\n              {storeCredit.onApply ? (\n                <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={storeCredit.onApply}>\n                  {labels.applyLabel}\n                </Button>\n              ) : null}\n              {storeCredit.onRemove ? (\n                <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={storeCredit.onRemove}>\n                  {labels.removeLabel}\n                </Button>\n              ) : null}\n            </div>\n          </div>\n        ) : null}\n      </div>\n    </FieldSet>\n  )\n}\n"],"mappings":"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","names":[]}