@thorprovider/blocks 3.0.1 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +61 -21
- package/dist/blocks/designs/marketplace-product-card/block.d.ts +12 -0
- package/dist/blocks/designs/marketplace-product-card/block.d.ts.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/block.js +243 -0
- package/dist/blocks/designs/marketplace-product-card/block.js.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/block.mjs +233 -0
- package/dist/blocks/designs/marketplace-product-card/block.mjs.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/index.d.ts +3 -0
- package/dist/blocks/designs/marketplace-product-card/index.d.ts.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/index.js +36 -0
- package/dist/blocks/designs/marketplace-product-card/index.js.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/index.mjs +6 -0
- package/dist/blocks/designs/marketplace-product-card/index.mjs.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/normalize.d.ts +13 -0
- package/dist/blocks/designs/marketplace-product-card/normalize.d.ts.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/normalize.js +36 -0
- package/dist/blocks/designs/marketplace-product-card/normalize.js.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/normalize.mjs +12 -0
- package/dist/blocks/designs/marketplace-product-card/normalize.mjs.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/variants.d.ts +72 -0
- package/dist/blocks/designs/marketplace-product-card/variants.d.ts.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/variants.js +123 -0
- package/dist/blocks/designs/marketplace-product-card/variants.js.map +1 -0
- package/dist/blocks/designs/marketplace-product-card/variants.mjs +89 -0
- package/dist/blocks/designs/marketplace-product-card/variants.mjs.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkbox-check.js +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkbox-check.js.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkbox-check.mjs +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkbox-check.mjs.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-equality.d.ts +11 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-equality.d.ts.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-equality.js +46 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-equality.js.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-equality.mjs +22 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-equality.mjs.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-fields.d.ts +28 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-fields.d.ts.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-fields.js +278 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-fields.js.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-fields.mjs +260 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-address-fields.mjs.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-contact-step.d.ts +12 -9
- package/dist/blocks/e-commerce/checkout-forms/checkout-contact-step.d.ts.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-contact-step.js +49 -71
- package/dist/blocks/e-commerce/checkout-forms/checkout-contact-step.js.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-contact-step.mjs +50 -72
- package/dist/blocks/e-commerce/checkout-forms/checkout-contact-step.mjs.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.d.ts.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.js +6 -3
- package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.js.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.mjs +6 -3
- package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.mjs.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.d.ts +7 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.d.ts.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.js +41 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.js.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.mjs +16 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.mjs.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.d.ts +24 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.d.ts.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.js +75 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.js.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.mjs +58 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.mjs.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.d.ts +3 -2
- package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.d.ts.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.js +9 -2
- package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.js.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.mjs +9 -2
- package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.mjs.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.d.ts +23 -8
- package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.d.ts.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.js +136 -31
- package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.js.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.mjs +143 -32
- package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.mjs.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-review-step.d.ts +13 -7
- package/dist/blocks/e-commerce/checkout-forms/checkout-review-step.d.ts.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-review-step.js +179 -28
- package/dist/blocks/e-commerce/checkout-forms/checkout-review-step.js.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-review-step.mjs +180 -29
- package/dist/blocks/e-commerce/checkout-forms/checkout-review-step.mjs.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.d.ts +20 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.d.ts.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.js +199 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.js.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.mjs +175 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.mjs.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.d.ts +14 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.d.ts.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.js +136 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.js.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.mjs +109 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.mjs.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-shipping-step.d.ts +32 -10
- package/dist/blocks/e-commerce/checkout-forms/checkout-shipping-step.d.ts.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-shipping-step.js +265 -147
- package/dist/blocks/e-commerce/checkout-forms/checkout-shipping-step.js.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-shipping-step.mjs +272 -148
- package/dist/blocks/e-commerce/checkout-forms/checkout-shipping-step.mjs.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-header.d.ts +13 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-header.d.ts.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-header.js +74 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-header.js.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-header.mjs +50 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-header.mjs.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-summary.d.ts +7 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-summary.d.ts.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-summary.js +91 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-summary.js.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-summary.mjs +65 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout-step-summary.mjs.map +1 -0
- package/dist/blocks/e-commerce/checkout-forms/checkout.d.ts +174 -44
- package/dist/blocks/e-commerce/checkout-forms/checkout.d.ts.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout.js +532 -108
- package/dist/blocks/e-commerce/checkout-forms/checkout.js.map +1 -1
- package/dist/blocks/e-commerce/checkout-forms/checkout.mjs +542 -109
- package/dist/blocks/e-commerce/checkout-forms/checkout.mjs.map +1 -1
- package/dist/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.d.ts.map +1 -1
- package/dist/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.js +44 -20
- package/dist/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.js.map +1 -1
- package/dist/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.mjs +44 -20
- package/dist/blocks/e-commerce/navigation/storefront-navbar-cart-sheet.mjs.map +1 -1
- package/dist/blocks/e-commerce/navigation/storefront-navbar.d.ts.map +1 -1
- package/dist/blocks/e-commerce/navigation/storefront-navbar.js +21 -10
- package/dist/blocks/e-commerce/navigation/storefront-navbar.js.map +1 -1
- package/dist/blocks/e-commerce/navigation/storefront-navbar.mjs +21 -10
- package/dist/blocks/e-commerce/navigation/storefront-navbar.mjs.map +1 -1
- package/dist/blocks/e-commerce/product-list/product-card.d.ts.map +1 -1
- package/dist/blocks/e-commerce/product-list/product-card.js +36 -9
- package/dist/blocks/e-commerce/product-list/product-card.js.map +1 -1
- package/dist/blocks/e-commerce/product-list/product-card.mjs +36 -9
- package/dist/blocks/e-commerce/product-list/product-card.mjs.map +1 -1
- package/dist/blocks/e-commerce/product-list/product-showcase-1.d.ts.map +1 -1
- package/dist/blocks/e-commerce/product-list/product-showcase-1.js +7 -2
- package/dist/blocks/e-commerce/product-list/product-showcase-1.js.map +1 -1
- package/dist/blocks/e-commerce/product-list/product-showcase-1.mjs +7 -2
- package/dist/blocks/e-commerce/product-list/product-showcase-1.mjs.map +1 -1
- package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.d.ts.map +1 -1
- package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.js +5 -1
- package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.js.map +1 -1
- package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.mjs +5 -1
- package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.mjs.map +1 -1
- package/dist/blocks/e-commerce/storefront-hero/storefront-hero.d.ts.map +1 -1
- package/dist/blocks/e-commerce/storefront-hero/storefront-hero.js +71 -51
- package/dist/blocks/e-commerce/storefront-hero/storefront-hero.js.map +1 -1
- package/dist/blocks/e-commerce/storefront-hero/storefront-hero.mjs +71 -51
- package/dist/blocks/e-commerce/storefront-hero/storefront-hero.mjs.map +1 -1
- package/dist/blocks/marketing/banners/banner-1.d.ts.map +1 -1
- package/dist/blocks/marketing/banners/banner-1.js +15 -27
- package/dist/blocks/marketing/banners/banner-1.js.map +1 -1
- package/dist/blocks/marketing/banners/banner-1.mjs +16 -28
- package/dist/blocks/marketing/banners/banner-1.mjs.map +1 -1
- package/dist/index.d.ts +6 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -0
- package/dist/index.mjs.map +1 -1
- package/dist/lib/contracts/marketplace-product-card.d.ts +324 -0
- package/dist/lib/contracts/marketplace-product-card.d.ts.map +1 -0
- package/dist/lib/contracts/marketplace-product-card.js +85 -0
- package/dist/lib/contracts/marketplace-product-card.js.map +1 -0
- package/dist/lib/contracts/marketplace-product-card.mjs +61 -0
- package/dist/lib/contracts/marketplace-product-card.mjs.map +1 -0
- package/dist/lib/contracts.d.ts +1861 -88
- package/dist/lib/contracts.d.ts.map +1 -1
- package/dist/lib/contracts.js +252 -25
- package/dist/lib/contracts.js.map +1 -1
- package/dist/lib/contracts.mjs +208 -5
- package/dist/lib/contracts.mjs.map +1 -1
- package/dist/lib/money-schema.d.ts +19 -0
- package/dist/lib/money-schema.d.ts.map +1 -0
- package/dist/lib/money-schema.js +33 -0
- package/dist/lib/money-schema.js.map +1 -0
- package/dist/lib/money-schema.mjs +9 -0
- package/dist/lib/money-schema.mjs.map +1 -0
- package/dist/lib/motion.d.ts +29 -0
- package/dist/lib/motion.d.ts.map +1 -0
- package/dist/lib/motion.js +65 -0
- package/dist/lib/motion.js.map +1 -0
- package/dist/lib/motion.mjs +41 -0
- package/dist/lib/motion.mjs.map +1 -0
- package/dist/ui/accordion.d.ts +3 -1
- package/dist/ui/accordion.d.ts.map +1 -1
- package/dist/ui/accordion.js +21 -5
- package/dist/ui/accordion.js.map +1 -1
- package/dist/ui/accordion.mjs +21 -5
- package/dist/ui/accordion.mjs.map +1 -1
- package/dist/ui/input-group.d.ts +1 -1
- package/package.json +19 -5
- package/dist/.tsbuildinfo +0 -1
|
@@ -1,174 +1,298 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { useEffect, useRef, useState } from "react";
|
|
4
|
+
import { Button } from "../../../ui/button.mjs";
|
|
5
|
+
import {
|
|
6
|
+
Field,
|
|
7
|
+
FieldContent,
|
|
8
|
+
FieldLabel,
|
|
9
|
+
FieldLegend,
|
|
10
|
+
FieldSet
|
|
11
|
+
} from "../../../ui/field.mjs";
|
|
5
12
|
import { RadioGroup, RadioGroupItem } from "../../../ui/radio-group.mjs";
|
|
6
13
|
import { formatMoney, isAvailableMoney } from "../../../lib/money.mjs";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
14
|
+
import { CheckboxCheck } from "./checkbox-check.mjs";
|
|
15
|
+
import { CheckoutAddressFields } from "./checkout-address-fields.mjs";
|
|
16
|
+
import { useCheckoutIds } from "./checkout-id-context.mjs";
|
|
17
|
+
import { addressesEqual } from "./checkout-address-equality.mjs";
|
|
18
|
+
import { CheckoutSavedAddresses } from "./checkout-saved-addresses.mjs";
|
|
9
19
|
function CheckoutShippingStep({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
20
|
+
shippingAddress,
|
|
21
|
+
billingAddress,
|
|
22
|
+
sameAsShipping,
|
|
23
|
+
onShippingAddressChange,
|
|
24
|
+
onBillingAddressChange,
|
|
25
|
+
onSameAsShippingChange,
|
|
26
|
+
shippingLocations,
|
|
27
|
+
billingLocations,
|
|
28
|
+
onRetryLocations,
|
|
29
|
+
savedAddresses,
|
|
30
|
+
onSelectSavedAddress,
|
|
31
|
+
onCreateSavedAddress,
|
|
32
|
+
onUpdateSavedAddress,
|
|
33
|
+
onDeleteSavedAddress,
|
|
34
|
+
onStartNewAddress,
|
|
35
|
+
onCancelNewAddress,
|
|
36
|
+
savedAddressState,
|
|
37
|
+
shippingGroups,
|
|
38
|
+
shippingState = "idle",
|
|
16
39
|
onSelectShippingOption,
|
|
40
|
+
onRetryShipping,
|
|
41
|
+
labels,
|
|
17
42
|
formatMoney: formatMoneyProp,
|
|
18
43
|
fieldErrors,
|
|
19
|
-
fieldDescriptions
|
|
44
|
+
fieldDescriptions,
|
|
45
|
+
requireShippingPhone = false
|
|
20
46
|
}) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
47
|
+
const checkoutId = useCheckoutIds();
|
|
48
|
+
const showSavedAddresses = !!onSelectSavedAddress;
|
|
49
|
+
const showAddAddress = !!(onCreateSavedAddress && onStartNewAddress && onCancelNewAddress);
|
|
50
|
+
const isMutating = !!savedAddressState?.pendingId;
|
|
51
|
+
const saveError = savedAddressState?.error && !savedAddressState.error.id ? savedAddressState.error : void 0;
|
|
52
|
+
const [creating, setCreating] = useState(false);
|
|
53
|
+
const [lastMatchedId, setLastMatchedId] = useState(
|
|
54
|
+
() => savedAddresses?.find((entry) => addressesEqual(entry.address, shippingAddress))?.id
|
|
55
|
+
);
|
|
56
|
+
const lastMatchedBeforeNew = useRef(void 0);
|
|
57
|
+
const matchedId = savedAddresses?.find(
|
|
58
|
+
(entry) => addressesEqual(entry.address, shippingAddress)
|
|
59
|
+
)?.id;
|
|
60
|
+
const activeLastMatchedId = lastMatchedId && savedAddresses?.some((entry) => entry.id === lastMatchedId) ? lastMatchedId : void 0;
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
if (creating && matchedId) setCreating(false);
|
|
63
|
+
}, [creating, matchedId]);
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
if (matchedId) setLastMatchedId(matchedId);
|
|
66
|
+
}, [matchedId]);
|
|
67
|
+
const handleSelect = (id) => {
|
|
68
|
+
setLastMatchedId(id);
|
|
69
|
+
setCreating(false);
|
|
70
|
+
onSelectSavedAddress?.(id);
|
|
71
|
+
};
|
|
72
|
+
const handleStartNew = () => {
|
|
73
|
+
lastMatchedBeforeNew.current = activeLastMatchedId;
|
|
74
|
+
setLastMatchedId(void 0);
|
|
75
|
+
setCreating(true);
|
|
76
|
+
onStartNewAddress?.();
|
|
77
|
+
};
|
|
78
|
+
const handleCancelNew = () => {
|
|
79
|
+
setCreating(false);
|
|
80
|
+
setLastMatchedId(lastMatchedBeforeNew.current);
|
|
81
|
+
onCancelNewAddress?.();
|
|
82
|
+
};
|
|
83
|
+
const countryLabel = (countryCode) => shippingLocations?.countries.find((country) => country.value === countryCode)?.label ?? countryCode;
|
|
84
|
+
const showSaveRow = !matchedId && (!!onCreateSavedAddress || !!activeLastMatchedId && !!onUpdateSavedAddress);
|
|
85
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
|
|
86
|
+
/* @__PURE__ */ jsx("p", { className: "sr-only", role: "status", "aria-live": "polite", children: savedAddressState?.lastSavedId ? savedAddressState.lastAction === "deleted" ? labels.addressDeletedLabel : labels.addressSavedLabel : "" }),
|
|
87
|
+
showSavedAddresses ? /* @__PURE__ */ jsx(
|
|
88
|
+
CheckoutSavedAddresses,
|
|
89
|
+
{
|
|
90
|
+
savedAddresses: savedAddresses ?? [],
|
|
91
|
+
selectedId: matchedId,
|
|
92
|
+
state: savedAddressState,
|
|
93
|
+
labels,
|
|
94
|
+
countryLabel,
|
|
95
|
+
onSelect: handleSelect,
|
|
96
|
+
onDelete: onDeleteSavedAddress
|
|
97
|
+
}
|
|
98
|
+
) : null,
|
|
99
|
+
showAddAddress ? creating ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed p-3", children: [
|
|
100
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: labels.newAddressLabel }),
|
|
24
101
|
/* @__PURE__ */ jsx(
|
|
25
|
-
|
|
102
|
+
Button,
|
|
26
103
|
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
104
|
+
type: "button",
|
|
105
|
+
variant: "outline",
|
|
106
|
+
size: "sm",
|
|
107
|
+
disabled: isMutating,
|
|
108
|
+
onClick: handleCancelNew,
|
|
109
|
+
children: labels.cancelAddressLabel
|
|
32
110
|
}
|
|
33
|
-
)
|
|
111
|
+
)
|
|
112
|
+
] }) : /* @__PURE__ */ jsx(
|
|
113
|
+
Button,
|
|
114
|
+
{
|
|
115
|
+
id: checkoutId("checkout-add-address"),
|
|
116
|
+
type: "button",
|
|
117
|
+
variant: "outline",
|
|
118
|
+
size: "sm",
|
|
119
|
+
className: "w-fit",
|
|
120
|
+
disabled: isMutating,
|
|
121
|
+
onClick: handleStartNew,
|
|
122
|
+
children: labels.addAddressLabel
|
|
123
|
+
}
|
|
124
|
+
) : null,
|
|
125
|
+
/* @__PURE__ */ jsx(
|
|
126
|
+
CheckoutAddressFields,
|
|
127
|
+
{
|
|
128
|
+
prefix: "shipping",
|
|
129
|
+
values: shippingAddress,
|
|
130
|
+
onChange: onShippingAddressChange,
|
|
131
|
+
locations: shippingLocations,
|
|
132
|
+
onRetryLocation: onRetryLocations ? (level) => onRetryLocations("shipping", level) : void 0,
|
|
133
|
+
labels,
|
|
134
|
+
errors: fieldErrors?.shippingAddress,
|
|
135
|
+
descriptions: fieldDescriptions?.shippingAddress,
|
|
136
|
+
heading: labels.recipientHeading,
|
|
137
|
+
description: labels.recipientDescription,
|
|
138
|
+
requiredPhone: requireShippingPhone
|
|
139
|
+
}
|
|
140
|
+
),
|
|
141
|
+
showSaveRow ? /* @__PURE__ */ jsxs(
|
|
142
|
+
"div",
|
|
143
|
+
{
|
|
144
|
+
className: "flex flex-col gap-2 rounded-lg border p-4",
|
|
145
|
+
"aria-busy": isMutating || void 0,
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
|
|
148
|
+
activeLastMatchedId && onUpdateSavedAddress ? /* @__PURE__ */ jsx(
|
|
149
|
+
Button,
|
|
150
|
+
{
|
|
151
|
+
type: "button",
|
|
152
|
+
variant: "outline",
|
|
153
|
+
size: "sm",
|
|
154
|
+
disabled: isMutating,
|
|
155
|
+
onClick: () => onUpdateSavedAddress(activeLastMatchedId, shippingAddress),
|
|
156
|
+
children: isMutating ? labels.savingAddressLabel : labels.updateSavedAddressLabel
|
|
157
|
+
}
|
|
158
|
+
) : null,
|
|
159
|
+
onCreateSavedAddress ? /* @__PURE__ */ jsx(
|
|
160
|
+
Button,
|
|
161
|
+
{
|
|
162
|
+
type: "button",
|
|
163
|
+
size: "sm",
|
|
164
|
+
disabled: isMutating,
|
|
165
|
+
onClick: () => onCreateSavedAddress(shippingAddress),
|
|
166
|
+
children: isMutating ? labels.savingAddressLabel : activeLastMatchedId ? labels.saveAsNewAddressLabel : labels.saveAddressLabel
|
|
167
|
+
}
|
|
168
|
+
) : null
|
|
169
|
+
] }),
|
|
170
|
+
saveError ? /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", role: "alert", children: saveError.message || labels.addressSaveErrorLabel }) : null
|
|
171
|
+
]
|
|
172
|
+
}
|
|
173
|
+
) : null,
|
|
174
|
+
saveError && !showSaveRow ? /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", role: "alert", children: saveError.message || labels.addressSaveErrorLabel }) : null,
|
|
175
|
+
/* @__PURE__ */ jsxs(Field, { orientation: "horizontal", className: "gap-2", children: [
|
|
34
176
|
/* @__PURE__ */ jsx(
|
|
35
|
-
|
|
177
|
+
CheckboxCheck,
|
|
36
178
|
{
|
|
37
|
-
id: "checkout-
|
|
38
|
-
|
|
39
|
-
|
|
179
|
+
id: checkoutId("checkout-billing-same-as-shipping"),
|
|
180
|
+
checked: sameAsShipping,
|
|
181
|
+
onCheckedChange: (checked) => onSameAsShippingChange(checked === true)
|
|
40
182
|
}
|
|
41
|
-
)
|
|
42
|
-
|
|
43
|
-
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
|
|
44
|
-
/* @__PURE__ */ jsxs(Field, { "data-invalid": !!fieldErrors?.city?.length, children: [
|
|
45
|
-
/* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-city", children: labels.cityLabel }),
|
|
46
|
-
/* @__PURE__ */ jsx(
|
|
47
|
-
Input,
|
|
48
|
-
{
|
|
49
|
-
id: "checkout-city",
|
|
50
|
-
autoComplete: "address-level2",
|
|
51
|
-
value: values.city,
|
|
52
|
-
onChange: (e) => onChange("city", e.target.value),
|
|
53
|
-
...checkoutFieldAria("checkout-city", fieldErrors?.city)
|
|
54
|
-
}
|
|
55
|
-
),
|
|
56
|
-
/* @__PURE__ */ jsx(
|
|
57
|
-
CheckoutFieldFeedback,
|
|
58
|
-
{
|
|
59
|
-
id: "checkout-city",
|
|
60
|
-
errors: fieldErrors?.city,
|
|
61
|
-
description: fieldDescriptions?.city
|
|
62
|
-
}
|
|
63
|
-
)
|
|
64
|
-
] }),
|
|
65
|
-
/* @__PURE__ */ jsxs(Field, { "data-invalid": !!fieldErrors?.state?.length, children: [
|
|
66
|
-
/* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-state", children: labels.stateLabel }),
|
|
67
|
-
/* @__PURE__ */ jsx(
|
|
68
|
-
Input,
|
|
69
|
-
{
|
|
70
|
-
id: "checkout-state",
|
|
71
|
-
autoComplete: "address-level1",
|
|
72
|
-
value: values.state,
|
|
73
|
-
onChange: (e) => onChange("state", e.target.value),
|
|
74
|
-
...checkoutFieldAria("checkout-state", fieldErrors?.state)
|
|
75
|
-
}
|
|
76
|
-
),
|
|
77
|
-
/* @__PURE__ */ jsx(
|
|
78
|
-
CheckoutFieldFeedback,
|
|
79
|
-
{
|
|
80
|
-
id: "checkout-state",
|
|
81
|
-
errors: fieldErrors?.state,
|
|
82
|
-
description: fieldDescriptions?.state
|
|
83
|
-
}
|
|
84
|
-
)
|
|
85
|
-
] })
|
|
183
|
+
),
|
|
184
|
+
/* @__PURE__ */ jsx(FieldLabel, { htmlFor: checkoutId("checkout-billing-same-as-shipping"), className: "text-sm font-normal", children: labels.billingSameAsShippingLabel })
|
|
86
185
|
] }),
|
|
87
|
-
/* @__PURE__ */ jsxs("
|
|
88
|
-
/* @__PURE__ */ jsxs(
|
|
89
|
-
/* @__PURE__ */ jsx(
|
|
90
|
-
/* @__PURE__ */ jsx(
|
|
91
|
-
Input,
|
|
92
|
-
{
|
|
93
|
-
id: "checkout-zip",
|
|
94
|
-
autoComplete: "postal-code",
|
|
95
|
-
value: values.zipCode,
|
|
96
|
-
onChange: (e) => onChange("zipCode", e.target.value),
|
|
97
|
-
...checkoutFieldAria("checkout-zip", fieldErrors?.zipCode)
|
|
98
|
-
}
|
|
99
|
-
),
|
|
100
|
-
/* @__PURE__ */ jsx(
|
|
101
|
-
CheckoutFieldFeedback,
|
|
102
|
-
{
|
|
103
|
-
id: "checkout-zip",
|
|
104
|
-
errors: fieldErrors?.zipCode,
|
|
105
|
-
description: fieldDescriptions?.zipCode
|
|
106
|
-
}
|
|
107
|
-
)
|
|
186
|
+
!sameAsShipping && billingAddress ? /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-4 rounded-lg border p-4", children: [
|
|
187
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
188
|
+
/* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", children: labels.billingHeading }),
|
|
189
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: labels.billingDescription })
|
|
108
190
|
] }),
|
|
109
|
-
countries && countries.length > 0 ? /* @__PURE__ */ jsx(
|
|
110
|
-
CheckoutCountryField,
|
|
111
|
-
{
|
|
112
|
-
labels,
|
|
113
|
-
countries,
|
|
114
|
-
value: values.country,
|
|
115
|
-
onValueChange: (value) => onChange("country", value),
|
|
116
|
-
errors: fieldErrors?.country,
|
|
117
|
-
description: fieldDescriptions?.country
|
|
118
|
-
}
|
|
119
|
-
) : /* @__PURE__ */ jsxs(Field, { "data-invalid": !!fieldErrors?.country?.length, children: [
|
|
120
|
-
/* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-country-input", children: labels.countryLabel }),
|
|
121
|
-
/* @__PURE__ */ jsx(
|
|
122
|
-
Input,
|
|
123
|
-
{
|
|
124
|
-
id: "checkout-country-input",
|
|
125
|
-
autoComplete: "country-name",
|
|
126
|
-
value: values.country,
|
|
127
|
-
onChange: (e) => onChange("country", e.target.value),
|
|
128
|
-
...checkoutFieldAria("checkout-country-input", fieldErrors?.country)
|
|
129
|
-
}
|
|
130
|
-
),
|
|
131
|
-
/* @__PURE__ */ jsx(
|
|
132
|
-
CheckoutFieldFeedback,
|
|
133
|
-
{
|
|
134
|
-
id: "checkout-country-input",
|
|
135
|
-
errors: fieldErrors?.country,
|
|
136
|
-
description: fieldDescriptions?.country
|
|
137
|
-
}
|
|
138
|
-
)
|
|
139
|
-
] })
|
|
140
|
-
] }),
|
|
141
|
-
shippingOptions && shippingOptions.length > 0 ? /* @__PURE__ */ jsxs(FieldSet, { children: [
|
|
142
|
-
/* @__PURE__ */ jsx(FieldLegend, { children: labels.shippingMethodLegend }),
|
|
143
191
|
/* @__PURE__ */ jsx(
|
|
144
|
-
|
|
192
|
+
CheckoutAddressFields,
|
|
145
193
|
{
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
/* @__PURE__ */ jsx(FieldContent, { className: "min-w-0", children: /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: `shipping-${option.id}`, className: "flex flex-col gap-0.5", children: [
|
|
156
|
-
/* @__PURE__ */ jsx("span", { children: option.name }),
|
|
157
|
-
option.description ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-normal", children: option.description }) : null
|
|
158
|
-
] }) }),
|
|
159
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
160
|
-
isAvailableMoney(option.price) ? /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums", children: formatMoney(option.price, formatMoneyProp) }) : null,
|
|
161
|
-
/* @__PURE__ */ jsx(RadioGroupItem, { value: option.id, id: `shipping-${option.id}` })
|
|
162
|
-
] })
|
|
163
|
-
]
|
|
164
|
-
},
|
|
165
|
-
option.id
|
|
166
|
-
))
|
|
194
|
+
prefix: "billing",
|
|
195
|
+
values: billingAddress,
|
|
196
|
+
onChange: onBillingAddressChange ?? (() => {
|
|
197
|
+
}),
|
|
198
|
+
locations: billingLocations,
|
|
199
|
+
onRetryLocation: onRetryLocations ? (level) => onRetryLocations("billing", level) : void 0,
|
|
200
|
+
labels,
|
|
201
|
+
errors: fieldErrors?.billingAddress,
|
|
202
|
+
descriptions: fieldDescriptions?.billingAddress
|
|
167
203
|
}
|
|
168
204
|
)
|
|
169
|
-
] }) : null
|
|
205
|
+
] }) : null,
|
|
206
|
+
/* @__PURE__ */ jsx(
|
|
207
|
+
DeliveryGroups,
|
|
208
|
+
{
|
|
209
|
+
groups: shippingGroups,
|
|
210
|
+
state: shippingState,
|
|
211
|
+
onSelectShippingOption,
|
|
212
|
+
onRetry: onRetryShipping,
|
|
213
|
+
labels,
|
|
214
|
+
formatMoney: formatMoneyProp
|
|
215
|
+
}
|
|
216
|
+
)
|
|
170
217
|
] });
|
|
171
218
|
}
|
|
219
|
+
function DeliveryGroups({
|
|
220
|
+
groups,
|
|
221
|
+
state,
|
|
222
|
+
onSelectShippingOption,
|
|
223
|
+
onRetry,
|
|
224
|
+
labels,
|
|
225
|
+
formatMoney: formatMoneyProp
|
|
226
|
+
}) {
|
|
227
|
+
const checkoutId = useCheckoutIds();
|
|
228
|
+
if (state === "pending") {
|
|
229
|
+
return /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", role: "status", children: labels.deliveryLoadingLabel });
|
|
230
|
+
}
|
|
231
|
+
if (state === "error") {
|
|
232
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", role: "alert", children: [
|
|
233
|
+
/* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: labels.deliveryErrorLabel }),
|
|
234
|
+
onRetry ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetry, children: labels.retryLabel }) : null
|
|
235
|
+
] });
|
|
236
|
+
}
|
|
237
|
+
if (state === "unavailable") {
|
|
238
|
+
return /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", role: "status", children: labels.deliveryUnavailableLabel });
|
|
239
|
+
}
|
|
240
|
+
if (!groups) return null;
|
|
241
|
+
if (groups.length === 0) {
|
|
242
|
+
return /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", role: "status", children: labels.noShippingOptionsLabel });
|
|
243
|
+
}
|
|
244
|
+
return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: groups.map((group) => /* @__PURE__ */ jsxs(FieldSet, { className: "gap-3", children: [
|
|
245
|
+
/* @__PURE__ */ jsxs(FieldLegend, { className: "mb-0", children: [
|
|
246
|
+
group.label ?? labels.shippingMethodLegend,
|
|
247
|
+
typeof group.itemCount === "number" ? ` (${group.itemCount})` : ""
|
|
248
|
+
] }),
|
|
249
|
+
group.unavailableReason || group.options.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", role: "status", children: group.unavailableReason ?? labels.groupUnavailableLabel }) : /* @__PURE__ */ jsx(
|
|
250
|
+
RadioGroup,
|
|
251
|
+
{
|
|
252
|
+
value: group.selectedOptionId ?? "",
|
|
253
|
+
onValueChange: (value) => value && onSelectShippingOption?.(group.id, String(value)),
|
|
254
|
+
className: "grid grid-cols-1 gap-3",
|
|
255
|
+
children: group.options.map((option) => /* @__PURE__ */ jsxs(
|
|
256
|
+
Field,
|
|
257
|
+
{
|
|
258
|
+
orientation: "horizontal",
|
|
259
|
+
className: "flex-wrap items-start justify-between gap-3 rounded-lg border p-4",
|
|
260
|
+
"data-disabled": option.disabled || void 0,
|
|
261
|
+
children: [
|
|
262
|
+
/* @__PURE__ */ jsx(FieldContent, { className: "min-w-0", children: /* @__PURE__ */ jsxs(
|
|
263
|
+
FieldLabel,
|
|
264
|
+
{
|
|
265
|
+
htmlFor: checkoutId(`shipping-${group.id}-${option.id}`),
|
|
266
|
+
className: "flex flex-col items-start gap-0.5 text-left",
|
|
267
|
+
children: [
|
|
268
|
+
/* @__PURE__ */ jsx("span", { children: option.name }),
|
|
269
|
+
option.description ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-normal", children: option.description }) : null,
|
|
270
|
+
option.estimatedDays ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-normal", children: option.estimatedDays }) : null,
|
|
271
|
+
option.locationName ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-normal", children: option.locationName }) : null,
|
|
272
|
+
option.disabled && option.disabledReason ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-normal", children: option.disabledReason }) : null
|
|
273
|
+
]
|
|
274
|
+
}
|
|
275
|
+
) }),
|
|
276
|
+
/* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
|
|
277
|
+
isAvailableMoney(option.price) ? /* @__PURE__ */ jsx("span", { className: "text-sm tabular-nums", children: formatMoney(option.price, formatMoneyProp) }) : null,
|
|
278
|
+
/* @__PURE__ */ jsx(
|
|
279
|
+
RadioGroupItem,
|
|
280
|
+
{
|
|
281
|
+
value: option.id,
|
|
282
|
+
id: checkoutId(`shipping-${group.id}-${option.id}`),
|
|
283
|
+
"data-checkout-shipping-option": option.id,
|
|
284
|
+
disabled: option.disabled
|
|
285
|
+
}
|
|
286
|
+
)
|
|
287
|
+
] })
|
|
288
|
+
]
|
|
289
|
+
},
|
|
290
|
+
option.id
|
|
291
|
+
))
|
|
292
|
+
}
|
|
293
|
+
)
|
|
294
|
+
] }, group.id)) });
|
|
295
|
+
}
|
|
172
296
|
export {
|
|
173
297
|
CheckoutShippingStep
|
|
174
298
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-shipping-step.tsx"],"sourcesContent":["'use client'\n\nimport { Field, FieldContent, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type { Money } from '@thorprovider/types'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport { CheckoutCountryField } from './checkout-country-field'\nimport type {\n CheckoutChangeHandler,\n CheckoutCountryOption,\n CheckoutFieldDescriptions,\n CheckoutValuesFieldErrors,\n CheckoutLabels,\n CheckoutShippingOption,\n CheckoutValues,\n} from './checkout'\n\nexport interface CheckoutShippingStepProps {\n values: CheckoutValues\n onChange: CheckoutChangeHandler\n labels: CheckoutLabels\n countries?: CheckoutCountryOption[]\n shippingOptions?: CheckoutShippingOption[]\n selectedShippingOptionId?: string\n onSelectShippingOption?: (id: string) => void\n /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */\n formatMoney?: (money: Money) => string\n fieldErrors?: CheckoutValuesFieldErrors\n fieldDescriptions?: CheckoutFieldDescriptions\n}\n\nexport function CheckoutShippingStep({\n values,\n onChange,\n labels,\n countries,\n shippingOptions,\n selectedShippingOptionId,\n onSelectShippingOption,\n formatMoney: formatMoneyProp,\n fieldErrors,\n fieldDescriptions,\n}: CheckoutShippingStepProps) {\n return (\n <FieldGroup className=\"grid grid-cols-1 gap-4\">\n <Field data-invalid={!!fieldErrors?.address?.length}>\n <FieldLabel htmlFor=\"checkout-address\">{labels.addressLabel}</FieldLabel>\n <Input\n id=\"checkout-address\"\n autoComplete=\"street-address\"\n value={values.address}\n onChange={(e) => onChange('address', e.target.value)}\n {...checkoutFieldAria('checkout-address', fieldErrors?.address)}\n />\n <CheckoutFieldFeedback\n id=\"checkout-address\"\n errors={fieldErrors?.address}\n description={fieldDescriptions?.address}\n />\n </Field>\n\n <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n <Field data-invalid={!!fieldErrors?.city?.length}>\n <FieldLabel htmlFor=\"checkout-city\">{labels.cityLabel}</FieldLabel>\n <Input\n id=\"checkout-city\"\n autoComplete=\"address-level2\"\n value={values.city}\n onChange={(e) => onChange('city', e.target.value)}\n {...checkoutFieldAria('checkout-city', fieldErrors?.city)}\n />\n <CheckoutFieldFeedback\n id=\"checkout-city\"\n errors={fieldErrors?.city}\n description={fieldDescriptions?.city}\n />\n </Field>\n <Field data-invalid={!!fieldErrors?.state?.length}>\n <FieldLabel htmlFor=\"checkout-state\">{labels.stateLabel}</FieldLabel>\n <Input\n id=\"checkout-state\"\n autoComplete=\"address-level1\"\n value={values.state}\n onChange={(e) => onChange('state', e.target.value)}\n {...checkoutFieldAria('checkout-state', fieldErrors?.state)}\n />\n <CheckoutFieldFeedback\n id=\"checkout-state\"\n errors={fieldErrors?.state}\n description={fieldDescriptions?.state}\n />\n </Field>\n </div>\n\n <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n <Field data-invalid={!!fieldErrors?.zipCode?.length}>\n <FieldLabel htmlFor=\"checkout-zip\">{labels.zipCodeLabel}</FieldLabel>\n <Input\n id=\"checkout-zip\"\n autoComplete=\"postal-code\"\n value={values.zipCode}\n onChange={(e) => onChange('zipCode', e.target.value)}\n {...checkoutFieldAria('checkout-zip', fieldErrors?.zipCode)}\n />\n <CheckoutFieldFeedback\n id=\"checkout-zip\"\n errors={fieldErrors?.zipCode}\n description={fieldDescriptions?.zipCode}\n />\n </Field>\n {countries && countries.length > 0 ? (\n <CheckoutCountryField\n labels={labels}\n countries={countries}\n value={values.country}\n onValueChange={(value) => onChange('country', value)}\n errors={fieldErrors?.country}\n description={fieldDescriptions?.country}\n />\n ) : (\n <Field data-invalid={!!fieldErrors?.country?.length}>\n <FieldLabel htmlFor=\"checkout-country-input\">{labels.countryLabel}</FieldLabel>\n <Input\n id=\"checkout-country-input\"\n autoComplete=\"country-name\"\n value={values.country}\n onChange={(e) => onChange('country', e.target.value)}\n {...checkoutFieldAria('checkout-country-input', fieldErrors?.country)}\n />\n <CheckoutFieldFeedback\n id=\"checkout-country-input\"\n errors={fieldErrors?.country}\n description={fieldDescriptions?.country}\n />\n </Field>\n )}\n </div>\n\n {shippingOptions && shippingOptions.length > 0 ? (\n <FieldSet>\n <FieldLegend>{labels.shippingMethodLegend}</FieldLegend>\n <RadioGroup\n value={selectedShippingOptionId ?? ''}\n onValueChange={(value) => value && onSelectShippingOption?.(String(value))}\n className=\"grid grid-cols-1 gap-3\"\n >\n {shippingOptions.map((option) => (\n <Field\n key={option.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={`shipping-${option.id}`} className=\"flex flex-col gap-0.5\">\n <span>{option.name}</span>\n {option.description ? (\n <span className=\"text-muted-foreground text-xs font-normal\">\n {option.description}\n </span>\n ) : null}\n </FieldLabel>\n </FieldContent>\n <div className=\"flex items-center gap-3\">\n {isAvailableMoney(option.price) ? (\n <span className=\"text-sm tabular-nums\">\n {formatMoney(option.price, formatMoneyProp)}\n </span>\n ) : null}\n <RadioGroupItem value={option.id} id={`shipping-${option.id}`} />\n </div>\n </Field>\n ))}\n </RadioGroup>\n </FieldSet>\n ) : null}\n </FieldGroup>\n )\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-shipping-step.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { Button } from '../../../ui/button'\nimport {\n Field,\n FieldContent,\n FieldLabel,\n FieldLegend,\n FieldSet,\n} from '../../../ui/field'\nimport { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type {\n CheckoutAddressLevel,\n CheckoutAddressValues,\n CheckoutLocationOptions,\n CheckoutSavedAddress,\n CheckoutShippingGroup,\n Money,\n} from '@thorprovider/types'\nimport { CheckboxCheck } from './checkbox-check'\nimport { CheckoutAddressFields } from './checkout-address-fields'\nimport { useCheckoutIds } from './checkout-id-context'\nimport { addressesEqual } from './checkout-address-equality'\nimport { CheckoutSavedAddresses } from './checkout-saved-addresses'\nimport type {\n CheckoutAddressChangeHandler,\n CheckoutFieldDescriptions,\n CheckoutFieldErrors,\n CheckoutLabels,\n CheckoutSavedAddressState,\n} from './checkout'\n\nexport interface CheckoutShippingStepProps {\n shippingAddress: CheckoutAddressValues\n billingAddress?: CheckoutAddressValues\n sameAsShipping: boolean\n onShippingAddressChange: CheckoutAddressChangeHandler\n onBillingAddressChange?: CheckoutAddressChangeHandler\n onSameAsShippingChange: (same: boolean) => void\n shippingLocations?: CheckoutLocationOptions\n billingLocations?: CheckoutLocationOptions\n onRetryLocations?: (kind: 'shipping' | 'billing', level: CheckoutAddressLevel) => void\n savedAddresses?: CheckoutSavedAddress[]\n onSelectSavedAddress?: (id: string) => void\n onCreateSavedAddress?: (address: CheckoutAddressValues) => void\n onUpdateSavedAddress?: (id: string, address: CheckoutAddressValues) => void\n onDeleteSavedAddress?: (id: string) => void\n onStartNewAddress?: () => void\n onCancelNewAddress?: () => void\n savedAddressState?: CheckoutSavedAddressState\n shippingGroups?: CheckoutShippingGroup[]\n shippingState?: 'idle' | 'pending' | 'error' | 'unavailable'\n onSelectShippingOption?: (groupId: string, optionId: string) => void\n onRetryShipping?: () => void\n labels: CheckoutLabels\n /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */\n formatMoney?: (money: Money) => string\n fieldErrors?: CheckoutFieldErrors\n fieldDescriptions?: CheckoutFieldDescriptions\n requireShippingPhone?: boolean\n}\n\n/**\n * Shipping and billing addresses, the saved-address book, and the contextual\n * save/update/create actions. The block is controlled: it reports intentions\n * and renders the host's refreshed list and mutation state; it never mutates\n * the address book itself.\n */\nexport function CheckoutShippingStep({\n shippingAddress,\n billingAddress,\n sameAsShipping,\n onShippingAddressChange,\n onBillingAddressChange,\n onSameAsShippingChange,\n shippingLocations,\n billingLocations,\n onRetryLocations,\n savedAddresses,\n onSelectSavedAddress,\n onCreateSavedAddress,\n onUpdateSavedAddress,\n onDeleteSavedAddress,\n onStartNewAddress,\n onCancelNewAddress,\n savedAddressState,\n shippingGroups,\n shippingState = 'idle',\n onSelectShippingOption,\n onRetryShipping,\n labels,\n formatMoney: formatMoneyProp,\n fieldErrors,\n fieldDescriptions,\n requireShippingPhone = false,\n}: CheckoutShippingStepProps) {\n const checkoutId = useCheckoutIds()\n const showSavedAddresses = !!onSelectSavedAddress\n const showAddAddress = !!(\n onCreateSavedAddress &&\n onStartNewAddress &&\n onCancelNewAddress\n )\n const isMutating = !!savedAddressState?.pendingId\n const saveError =\n savedAddressState?.error && !savedAddressState.error.id\n ? savedAddressState.error\n : undefined\n\n const [creating, setCreating] = useState(false)\n const [lastMatchedId, setLastMatchedId] = useState<string | undefined>(() =>\n savedAddresses?.find((entry) => addressesEqual(entry.address, shippingAddress))?.id,\n )\n const lastMatchedBeforeNew = useRef<string | undefined>(undefined)\n\n const matchedId = savedAddresses?.find((entry) =>\n addressesEqual(entry.address, shippingAddress),\n )?.id\n const activeLastMatchedId =\n lastMatchedId && savedAddresses?.some((entry) => entry.id === lastMatchedId)\n ? lastMatchedId\n : undefined\n\n useEffect(() => {\n if (creating && matchedId) setCreating(false)\n }, [creating, matchedId])\n\n useEffect(() => {\n if (matchedId) setLastMatchedId(matchedId)\n }, [matchedId])\n\n const handleSelect = (id: string) => {\n setLastMatchedId(id)\n setCreating(false)\n onSelectSavedAddress?.(id)\n }\n\n const handleStartNew = () => {\n lastMatchedBeforeNew.current = activeLastMatchedId\n setLastMatchedId(undefined)\n setCreating(true)\n onStartNewAddress?.()\n }\n\n const handleCancelNew = () => {\n setCreating(false)\n setLastMatchedId(lastMatchedBeforeNew.current)\n onCancelNewAddress?.()\n }\n\n const countryLabel = (countryCode: string) =>\n shippingLocations?.countries.find((country) => country.value === countryCode)?.label ??\n countryCode\n\n const showSaveRow =\n !matchedId && (!!onCreateSavedAddress || (!!activeLastMatchedId && !!onUpdateSavedAddress))\n\n return (\n <div className=\"flex flex-col gap-6\">\n <p className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n {savedAddressState?.lastSavedId\n ? savedAddressState.lastAction === 'deleted'\n ? labels.addressDeletedLabel\n : labels.addressSavedLabel\n : ''}\n </p>\n\n {showSavedAddresses ? (\n <CheckoutSavedAddresses\n savedAddresses={savedAddresses ?? []}\n selectedId={matchedId}\n state={savedAddressState}\n labels={labels}\n countryLabel={countryLabel}\n onSelect={handleSelect}\n onDelete={onDeleteSavedAddress}\n />\n ) : null}\n\n {showAddAddress ? (\n creating ? (\n <div className=\"flex flex-wrap items-center justify-between gap-2 rounded-lg border border-dashed p-3\">\n <p className=\"text-sm font-medium\">{labels.newAddressLabel}</p>\n <Button\n type=\"button\"\n variant=\"outline\"\n size=\"sm\"\n disabled={isMutating}\n onClick={handleCancelNew}\n >\n {labels.cancelAddressLabel}\n </Button>\n </div>\n ) : (\n <Button\n id={checkoutId('checkout-add-address')}\n type=\"button\"\n variant=\"outline\"\n size=\"sm\"\n className=\"w-fit\"\n disabled={isMutating}\n onClick={handleStartNew}\n >\n {labels.addAddressLabel}\n </Button>\n )\n ) : null}\n\n <CheckoutAddressFields\n prefix=\"shipping\"\n values={shippingAddress}\n onChange={onShippingAddressChange}\n locations={shippingLocations}\n onRetryLocation={\n onRetryLocations ? (level) => onRetryLocations('shipping', level) : undefined\n }\n labels={labels}\n errors={fieldErrors?.shippingAddress}\n descriptions={fieldDescriptions?.shippingAddress}\n heading={labels.recipientHeading}\n description={labels.recipientDescription}\n requiredPhone={requireShippingPhone}\n />\n\n {showSaveRow ? (\n <div\n className=\"flex flex-col gap-2 rounded-lg border p-4\"\n aria-busy={isMutating || undefined}\n >\n <div className=\"flex flex-wrap gap-2\">\n {activeLastMatchedId && onUpdateSavedAddress ? (\n <Button\n type=\"button\"\n variant=\"outline\"\n size=\"sm\"\n disabled={isMutating}\n onClick={() => onUpdateSavedAddress(activeLastMatchedId, shippingAddress)}\n >\n {isMutating\n ? labels.savingAddressLabel\n : labels.updateSavedAddressLabel}\n </Button>\n ) : null}\n {onCreateSavedAddress ? (\n <Button\n type=\"button\"\n size=\"sm\"\n disabled={isMutating}\n onClick={() => onCreateSavedAddress(shippingAddress)}\n >\n {isMutating\n ? labels.savingAddressLabel\n : activeLastMatchedId\n ? labels.saveAsNewAddressLabel\n : labels.saveAddressLabel}\n </Button>\n ) : null}\n </div>\n {saveError ? (\n <p className=\"text-destructive text-sm\" role=\"alert\">\n {saveError.message || labels.addressSaveErrorLabel}\n </p>\n ) : null}\n </div>\n ) : null}\n\n {saveError && !showSaveRow ? (\n <p className=\"text-destructive text-sm\" role=\"alert\">\n {saveError.message || labels.addressSaveErrorLabel}\n </p>\n ) : null}\n\n <Field orientation=\"horizontal\" className=\"gap-2\">\n <CheckboxCheck\n id={checkoutId('checkout-billing-same-as-shipping')}\n checked={sameAsShipping}\n onCheckedChange={(checked) => onSameAsShippingChange(checked === true)}\n />\n <FieldLabel htmlFor={checkoutId('checkout-billing-same-as-shipping')} className=\"text-sm font-normal\">\n {labels.billingSameAsShippingLabel}\n </FieldLabel>\n </Field>\n\n {!sameAsShipping && billingAddress ? (\n <section className=\"flex flex-col gap-4 rounded-lg border p-4\">\n <div>\n <h3 className=\"text-base font-semibold\">{labels.billingHeading}</h3>\n <p className=\"text-sm text-muted-foreground\">{labels.billingDescription}</p>\n </div>\n <CheckoutAddressFields\n prefix=\"billing\"\n values={billingAddress}\n onChange={onBillingAddressChange ?? (() => {})}\n locations={billingLocations}\n onRetryLocation={\n onRetryLocations ? (level) => onRetryLocations('billing', level) : undefined\n }\n labels={labels}\n errors={fieldErrors?.billingAddress}\n descriptions={fieldDescriptions?.billingAddress}\n />\n </section>\n ) : null}\n\n <DeliveryGroups\n groups={shippingGroups}\n state={shippingState}\n onSelectShippingOption={onSelectShippingOption}\n onRetry={onRetryShipping}\n labels={labels}\n formatMoney={formatMoneyProp}\n />\n </div>\n )\n}\n\nfunction DeliveryGroups({\n groups,\n state,\n onSelectShippingOption,\n onRetry,\n labels,\n formatMoney: formatMoneyProp,\n}: {\n groups?: CheckoutShippingGroup[]\n state: 'idle' | 'pending' | 'error' | 'unavailable'\n onSelectShippingOption?: (groupId: string, optionId: string) => void\n onRetry?: () => void\n labels: CheckoutLabels\n formatMoney?: (money: Money) => string\n}) {\n const checkoutId = useCheckoutIds()\n if (state === 'pending') {\n return (\n <p className=\"text-muted-foreground text-sm\" role=\"status\">\n {labels.deliveryLoadingLabel}\n </p>\n )\n }\n\n if (state === 'error') {\n return (\n <div className=\"flex flex-col gap-2\" role=\"alert\">\n <p className=\"text-destructive text-sm\">{labels.deliveryErrorLabel}</p>\n {onRetry ? (\n <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetry}>\n {labels.retryLabel}\n </Button>\n ) : null}\n </div>\n )\n }\n\n if (state === 'unavailable') {\n return (\n <p className=\"text-muted-foreground text-sm\" role=\"status\">\n {labels.deliveryUnavailableLabel}\n </p>\n )\n }\n\n if (!groups) return null\n\n if (groups.length === 0) {\n return (\n <p className=\"text-muted-foreground text-sm\" role=\"status\">\n {labels.noShippingOptionsLabel}\n </p>\n )\n }\n\n return (\n <div className=\"flex flex-col gap-6\">\n {groups.map((group) => (\n <FieldSet key={group.id} className=\"gap-3\">\n <FieldLegend className=\"mb-0\">\n {group.label ?? labels.shippingMethodLegend}\n {typeof group.itemCount === 'number' ? ` (${group.itemCount})` : ''}\n </FieldLegend>\n {group.unavailableReason || group.options.length === 0 ? (\n <p className=\"text-muted-foreground text-sm\" role=\"status\">\n {group.unavailableReason ?? labels.groupUnavailableLabel}\n </p>\n ) : (\n <RadioGroup\n value={group.selectedOptionId ?? ''}\n onValueChange={(value) =>\n value && onSelectShippingOption?.(group.id, String(value))\n }\n className=\"grid grid-cols-1 gap-3\"\n >\n {group.options.map((option) => (\n <Field\n key={option.id}\n orientation=\"horizontal\"\n className=\"flex-wrap items-start justify-between gap-3 rounded-lg border p-4\"\n data-disabled={option.disabled || undefined}\n >\n <FieldContent className=\"min-w-0\">\n <FieldLabel\n htmlFor={checkoutId(`shipping-${group.id}-${option.id}`)}\n className=\"flex flex-col items-start gap-0.5 text-left\"\n >\n <span>{option.name}</span>\n {option.description ? (\n <span className=\"text-muted-foreground text-xs font-normal\">\n {option.description}\n </span>\n ) : null}\n {option.estimatedDays ? (\n <span className=\"text-muted-foreground text-xs font-normal\">\n {option.estimatedDays}\n </span>\n ) : null}\n {option.locationName ? (\n <span className=\"text-muted-foreground text-xs font-normal\">\n {option.locationName}\n </span>\n ) : null}\n {option.disabled && option.disabledReason ? (\n <span className=\"text-muted-foreground text-xs font-normal\">\n {option.disabledReason}\n </span>\n ) : null}\n </FieldLabel>\n </FieldContent>\n <div className=\"flex shrink-0 items-center gap-3\">\n {isAvailableMoney(option.price) ? (\n <span className=\"text-sm tabular-nums\">\n {formatMoney(option.price, formatMoneyProp)}\n </span>\n ) : null}\n <RadioGroupItem\n value={option.id}\n id={checkoutId(`shipping-${group.id}-${option.id}`)}\n data-checkout-shipping-option={option.id}\n disabled={option.disabled}\n />\n </div>\n </Field>\n ))}\n </RadioGroup>\n )}\n </FieldSet>\n ))}\n </div>\n )\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
interface CheckoutStepHeaderProps {
|
|
2
|
+
index: number;
|
|
3
|
+
heading: string;
|
|
4
|
+
description: string;
|
|
5
|
+
headingAs?: 'h2' | 'span';
|
|
6
|
+
headingId?: string;
|
|
7
|
+
headingTabIndex?: number;
|
|
8
|
+
errorMessage?: string;
|
|
9
|
+
summary?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare function CheckoutStepHeader({ index, heading, description, headingAs, headingId, headingTabIndex, errorMessage, summary, }: CheckoutStepHeaderProps): import("react").JSX.Element;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=checkout-step-header.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkout-step-header.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-step-header.tsx"],"names":[],"mappings":"AAEA,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,OAAO,EACP,WAAW,EACX,SAAgB,EAChB,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,GACR,EAAE,uBAAuB,+BAuCzB"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var checkout_step_header_exports = {};
|
|
20
|
+
__export(checkout_step_header_exports, {
|
|
21
|
+
CheckoutStepHeader: () => CheckoutStepHeader
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(checkout_step_header_exports);
|
|
24
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_lucide_react = require("lucide-react");
|
|
26
|
+
function CheckoutStepHeader({
|
|
27
|
+
index,
|
|
28
|
+
heading,
|
|
29
|
+
description,
|
|
30
|
+
headingAs = "h2",
|
|
31
|
+
headingId,
|
|
32
|
+
headingTabIndex,
|
|
33
|
+
errorMessage,
|
|
34
|
+
summary
|
|
35
|
+
}) {
|
|
36
|
+
const Heading = headingAs;
|
|
37
|
+
const Layout = headingAs === "span" ? "span" : "div";
|
|
38
|
+
const Content = headingAs === "span" ? "span" : "div";
|
|
39
|
+
const TitleRow = headingAs === "span" ? "span" : "div";
|
|
40
|
+
const Description = headingAs === "span" ? "span" : "p";
|
|
41
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Layout, { className: "grid grid-cols-1 gap-x-4 sm:grid-cols-[2rem_minmax(0,1fr)]", children: [
|
|
42
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
43
|
+
"span",
|
|
44
|
+
{
|
|
45
|
+
"aria-hidden": "true",
|
|
46
|
+
className: "text-muted-foreground text-xs font-semibold tabular-nums tracking-widest sm:pt-1",
|
|
47
|
+
children: String(index + 1).padStart(2, "0")
|
|
48
|
+
}
|
|
49
|
+
),
|
|
50
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, { className: "min-w-0", "data-checkout-step-error": errorMessage ? "true" : void 0, children: [
|
|
51
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TitleRow, { className: "flex items-center gap-2", children: [
|
|
52
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
|
+
Heading,
|
|
54
|
+
{
|
|
55
|
+
id: headingId,
|
|
56
|
+
tabIndex: headingTabIndex,
|
|
57
|
+
className: "scroll-mt-24 text-lg font-semibold tracking-tight",
|
|
58
|
+
children: heading
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CircleAlert, { className: "text-destructive size-4 shrink-0", "aria-hidden": "true" }),
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: errorMessage })
|
|
64
|
+
] }) : null
|
|
65
|
+
] }),
|
|
66
|
+
summary ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block text-sm text-muted-foreground", children: summary }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Description, { className: "block text-sm text-muted-foreground", children: description })
|
|
67
|
+
] })
|
|
68
|
+
] });
|
|
69
|
+
}
|
|
70
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
71
|
+
0 && (module.exports = {
|
|
72
|
+
CheckoutStepHeader
|
|
73
|
+
});
|
|
74
|
+
//# sourceMappingURL=checkout-step-header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-step-header.tsx"],"sourcesContent":["import { CircleAlert } from 'lucide-react'\n\ninterface CheckoutStepHeaderProps {\n index: number\n heading: string\n description: string\n headingAs?: 'h2' | 'span'\n headingId?: string\n headingTabIndex?: number\n errorMessage?: string\n summary?: string\n}\n\nexport function CheckoutStepHeader({\n index,\n heading,\n description,\n headingAs = 'h2',\n headingId,\n headingTabIndex,\n errorMessage,\n summary,\n}: CheckoutStepHeaderProps) {\n const Heading = headingAs\n const Layout = headingAs === 'span' ? 'span' : 'div'\n const Content = headingAs === 'span' ? 'span' : 'div'\n const TitleRow = headingAs === 'span' ? 'span' : 'div'\n const Description = headingAs === 'span' ? 'span' : 'p'\n\n return (\n <Layout className=\"grid grid-cols-1 gap-x-4 sm:grid-cols-[2rem_minmax(0,1fr)]\">\n <span\n aria-hidden=\"true\"\n className=\"text-muted-foreground text-xs font-semibold tabular-nums tracking-widest sm:pt-1\"\n >\n {String(index + 1).padStart(2, '0')}\n </span>\n <Content className=\"min-w-0\" data-checkout-step-error={errorMessage ? 'true' : undefined}>\n <TitleRow className=\"flex items-center gap-2\">\n <Heading\n id={headingId}\n tabIndex={headingTabIndex}\n className=\"scroll-mt-24 text-lg font-semibold tracking-tight\"\n >\n {heading}\n </Heading>\n {errorMessage ? (\n <>\n <CircleAlert className=\"text-destructive size-4 shrink-0\" aria-hidden=\"true\" />\n <span className=\"sr-only\">{errorMessage}</span>\n </>\n ) : null}\n </TitleRow>\n {summary ? (\n <span className=\"block text-sm text-muted-foreground\">{summary}</span>\n ) : (\n <Description className=\"block text-sm text-muted-foreground\">{description}</Description>\n )}\n </Content>\n </Layout>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BM;AA/BN,0BAA4B;AAarB,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,UAAU;AAChB,QAAM,SAAS,cAAc,SAAS,SAAS;AAC/C,QAAM,UAAU,cAAc,SAAS,SAAS;AAChD,QAAM,WAAW,cAAc,SAAS,SAAS;AACjD,QAAM,cAAc,cAAc,SAAS,SAAS;AAEpD,SACE,6CAAC,UAAO,WAAU,8DAChB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QAET,iBAAO,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;AAAA;AAAA,IACpC;AAAA,IACA,6CAAC,WAAQ,WAAU,WAAU,4BAA0B,eAAe,SAAS,QAC7E;AAAA,mDAAC,YAAS,WAAU,2BAClB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,UAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QACC,eACC,4EACE;AAAA,sDAAC,mCAAY,WAAU,oCAAmC,eAAY,QAAO;AAAA,UAC7E,4CAAC,UAAK,WAAU,WAAW,wBAAa;AAAA,WAC1C,IACE;AAAA,SACN;AAAA,MACC,UACC,4CAAC,UAAK,WAAU,uCAAuC,mBAAQ,IAE/D,4CAAC,eAAY,WAAU,uCAAuC,uBAAY;AAAA,OAE9E;AAAA,KACF;AAEJ;","names":[]}
|