@shopbb/helium 0.6.4 → 0.7.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/dist/components/AddToCartButton.d.ts +17 -22
- package/dist/components/AddToCartButton.d.ts.map +1 -1
- package/dist/components/AddToCartButton.js +8 -45
- package/dist/components/AddToCartButton.js.map +1 -1
- package/dist/components/AddressForm.d.ts +42 -18
- package/dist/components/AddressForm.d.ts.map +1 -1
- package/dist/components/AddressForm.js +23 -20
- package/dist/components/AddressForm.js.map +1 -1
- package/dist/components/AddressList.d.ts +34 -17
- package/dist/components/AddressList.d.ts.map +1 -1
- package/dist/components/AddressList.js +7 -21
- package/dist/components/AddressList.js.map +1 -1
- package/dist/components/AddressPicker.d.ts +14 -16
- package/dist/components/AddressPicker.d.ts.map +1 -1
- package/dist/components/AddressPicker.js +10 -26
- package/dist/components/AddressPicker.js.map +1 -1
- package/dist/components/AnalyticsProvider.d.ts +5 -2
- package/dist/components/AnalyticsProvider.d.ts.map +1 -1
- package/dist/components/AnalyticsProvider.js +13 -11
- package/dist/components/AnalyticsProvider.js.map +1 -1
- package/dist/components/BuyNowButton.d.ts +7 -24
- package/dist/components/BuyNowButton.d.ts.map +1 -1
- package/dist/components/BuyNowButton.js +9 -43
- package/dist/components/BuyNowButton.js.map +1 -1
- package/dist/components/CartCheckoutButton.d.ts +10 -21
- package/dist/components/CartCheckoutButton.d.ts.map +1 -1
- package/dist/components/CartCheckoutButton.js +6 -11
- package/dist/components/CartCheckoutButton.js.map +1 -1
- package/dist/components/CartCost.d.ts +15 -23
- package/dist/components/CartCost.d.ts.map +1 -1
- package/dist/components/CartCost.js +1 -3
- package/dist/components/CartCost.js.map +1 -1
- package/dist/components/CartForm.d.ts +30 -102
- package/dist/components/CartForm.d.ts.map +1 -1
- package/dist/components/CartForm.js +32 -172
- package/dist/components/CartForm.js.map +1 -1
- package/dist/components/DiscountComponents.d.ts +67 -17
- package/dist/components/DiscountComponents.d.ts.map +1 -1
- package/dist/components/DiscountComponents.js +28 -74
- package/dist/components/DiscountComponents.js.map +1 -1
- package/dist/components/DiscountSelector.d.ts +50 -15
- package/dist/components/DiscountSelector.d.ts.map +1 -1
- package/dist/components/DiscountSelector.js +16 -44
- package/dist/components/DiscountSelector.js.map +1 -1
- package/dist/components/hooks/useOptimisticCart.d.ts +36 -37
- package/dist/components/hooks/useOptimisticCart.d.ts.map +1 -1
- package/dist/components/hooks/useOptimisticCart.js +95 -127
- package/dist/components/hooks/useOptimisticCart.js.map +1 -1
- package/dist/components/index.d.ts +24 -45
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +21 -37
- package/dist/components/index.js.map +1 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -10
- package/src/components/AddToCartButton.tsx +34 -92
- package/src/components/AddressForm.tsx +56 -26
- package/src/components/AddressList.tsx +42 -33
- package/src/components/AddressPicker.tsx +19 -29
- package/src/components/AnalyticsProvider.tsx +18 -13
- package/src/components/BuyNowButton.tsx +28 -93
- package/src/components/CartCheckoutButton.tsx +16 -33
- package/src/components/CartCost.tsx +16 -28
- package/src/components/CartForm.tsx +87 -231
- package/src/components/DiscountComponents.tsx +94 -100
- package/src/components/DiscountSelector.tsx +68 -49
- package/src/components/hooks/useOptimisticCart.ts +122 -156
- package/src/components/index.ts +51 -99
- package/src/index.ts +0 -2
- /package/src/components/{AddressBookProvider.tsx → AddressBookProvider.tsx.deleted-0.7} +0 -0
- /package/src/components/{CartLineQuantityAdjustButton.tsx → CartLineQuantityAdjustButton.tsx.deleted-0.7} +0 -0
- /package/src/components/{CartProvider.tsx → CartProvider.tsx.deleted-0.7} +0 -0
- /package/src/components/{DiscountProvider.tsx → DiscountProvider.tsx.deleted-0.7} +0 -0
- /package/src/components/hooks/{useMounted.ts → useMounted.ts.deleted-0.7} +0 -0
- /package/src/{handleCartFormAction.ts → handleCartFormAction.ts.deleted-0.7} +0 -0
|
@@ -1,32 +1,22 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
* <AddressPicker>
|
|
4
4
|
*
|
|
5
|
-
* Checkout
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* - 选 "新地址" 时展开新增表单
|
|
5
|
+
* Checkout 用的地址选择器。
|
|
6
|
+
*
|
|
7
|
+
* helium 0.7:addresses 通过 props 传入。
|
|
9
8
|
*
|
|
10
|
-
* 用法(受控):
|
|
11
9
|
* <AddressPicker
|
|
10
|
+
* addresses={addresses}
|
|
11
|
+
* defaultAddress={defaultAddress}
|
|
12
12
|
* value={selectedAddressId}
|
|
13
13
|
* onChange={(id, addr) => setSelectedAddressId(id)}
|
|
14
|
-
* allowNewAddress
|
|
15
|
-
* onUseNewAddress={(addr) => setInlineAddress(addr)}
|
|
16
14
|
* />
|
|
17
|
-
*
|
|
18
|
-
* 用法(非受控):
|
|
19
|
-
* <AddressPicker onSelect={(addr) => ...} />
|
|
20
|
-
* 组件内部 state;选择后回调商家拿值。
|
|
21
15
|
*/
|
|
22
16
|
import * as React from 'react';
|
|
23
|
-
import { useAddressBook } from './AddressBookProvider';
|
|
24
|
-
import { useMounted } from './hooks/useMounted';
|
|
25
17
|
import { AddressForm } from './AddressForm';
|
|
26
18
|
export function AddressPicker(props) {
|
|
27
|
-
const { value, onChange, onSelect, allowNewAddress = true, onUseNewAddress, emptyFallback, className, } = props;
|
|
28
|
-
const mounted = useMounted();
|
|
29
|
-
const { addresses, defaultAddress, status } = useAddressBook();
|
|
19
|
+
const { addresses = [], defaultAddress = null, value, onChange, onSelect, allowNewAddress = true, onUseNewAddress, emptyFallback, className, } = props;
|
|
30
20
|
// 非受控 fallback
|
|
31
21
|
const [internalId, setInternalId] = React.useState(null);
|
|
32
22
|
const selectedId = value !== undefined ? value : internalId;
|
|
@@ -46,29 +36,23 @@ export function AddressPicker(props) {
|
|
|
46
36
|
setSelectedId(addresses[0].id, addresses[0]);
|
|
47
37
|
}
|
|
48
38
|
}, [defaultAddress, addresses, selectedId, setSelectedId]);
|
|
49
|
-
if (!mounted) {
|
|
50
|
-
return _jsx("div", { "data-address-picker": true, "data-ssr-placeholder": true, className: className });
|
|
51
|
-
}
|
|
52
|
-
if (status === 'loading') {
|
|
53
|
-
return _jsx("div", { "data-address-picker": true, "data-loading": true, children: "\u52A0\u8F7D\u5730\u5740\u4E2D\u2026" });
|
|
54
|
-
}
|
|
55
39
|
// 0 个地址:直接展示一个新增表单
|
|
56
40
|
if (addresses.length === 0) {
|
|
57
41
|
if (emptyFallback)
|
|
58
42
|
return _jsx(_Fragment, { children: emptyFallback });
|
|
59
|
-
return (_jsxs("div", { "data-address-picker": true, "data-empty": true, className: className, children: [_jsx("div", { "data-picker-title": true, children: "\u586B\u5199\u6536\u8D27\u5730\u5740" }), _jsx(AddressForm, {
|
|
43
|
+
return (_jsxs("div", { "data-address-picker": true, "data-empty": true, className: className, children: [_jsx("div", { "data-picker-title": true, children: "\u586B\u5199\u6536\u8D27\u5730\u5740" }), _jsx(AddressForm, { onSaved: (addr) => {
|
|
60
44
|
if (addr) {
|
|
61
45
|
setSelectedId(addr.id, addr);
|
|
62
46
|
onUseNewAddress?.(addr);
|
|
63
47
|
}
|
|
64
48
|
} })] }));
|
|
65
49
|
}
|
|
66
|
-
return (_jsxs("div", { "data-address-picker": true, className: className, children: [_jsx("div", { "data-picker-title": true, children: "\u9009\u62E9\u6536\u8D27\u5730\u5740" }), _jsxs("div", { "data-picker-list": true, children: [addresses.map((a) => (_jsxs("label", { "data-picker-item": true, "data-active": selectedId === a.id ? '' : undefined, children: [_jsx("input", { type: "radio", name: "address-picker", checked: selectedId === a.id, onChange: () => { setSelectedId(a.id, a); setShowNewForm(false); } }), _jsxs("div", { children: [_jsxs("div", { "data-name": true, children: [a.firstName || '', a.lastName || '', a.isDefault && _jsx("span", { "data-default-tag": true, children: "\u9ED8\u8BA4" })] }), _jsxs("div", { "data-line": true, children: [a.phone, " \u00B7 ", a.province, a.city, a.district || '', a.address1 || ''] })] })] }, a.id))), allowNewAddress && (_jsxs("label", { "data-picker-item": true, "data-active": showNewForm ? '' : undefined, children: [_jsx("input", { type: "radio", name: "address-picker", checked: showNewForm, onChange: () => { setShowNewForm(true); setSelectedId(null, null); } }), _jsxs("div", { children: [_jsx("div", { "data-name": true, children: "+ \u4F7F\u7528\u65B0\u5730\u5740" }), _jsx("div", { "data-line": true, children: "\u586B\u5199\u4E00\u4E2A\u65B0\u5730\u5740
|
|
50
|
+
return (_jsxs("div", { "data-address-picker": true, className: className, children: [_jsx("div", { "data-picker-title": true, children: "\u9009\u62E9\u6536\u8D27\u5730\u5740" }), _jsxs("div", { "data-picker-list": true, children: [addresses.map((a) => (_jsxs("label", { "data-picker-item": true, "data-active": selectedId === a.id ? '' : undefined, children: [_jsx("input", { type: "radio", name: "address-picker", checked: selectedId === a.id, onChange: () => { setSelectedId(a.id, a); setShowNewForm(false); } }), _jsxs("div", { children: [_jsxs("div", { "data-name": true, children: [a.firstName || '', a.lastName || '', a.isDefault && _jsx("span", { "data-default-tag": true, children: "\u9ED8\u8BA4" })] }), _jsxs("div", { "data-line": true, children: [a.phone, " \u00B7 ", a.province, a.city, a.district || '', a.address1 || ''] })] })] }, a.id))), allowNewAddress && (_jsxs("label", { "data-picker-item": true, "data-active": showNewForm ? '' : undefined, children: [_jsx("input", { type: "radio", name: "address-picker", checked: showNewForm, onChange: () => { setShowNewForm(true); setSelectedId(null, null); } }), _jsxs("div", { children: [_jsx("div", { "data-name": true, children: "+ \u4F7F\u7528\u65B0\u5730\u5740" }), _jsx("div", { "data-line": true, children: "\u586B\u5199\u4E00\u4E2A\u65B0\u5730\u5740" })] })] }))] }), showNewForm && allowNewAddress && (_jsx("div", { "data-new-address-form": true, children: _jsx(AddressForm, { onCancel: () => {
|
|
67
51
|
setShowNewForm(false);
|
|
68
52
|
const fallback = defaultAddress || addresses[0];
|
|
69
53
|
if (fallback)
|
|
70
54
|
setSelectedId(fallback.id, fallback);
|
|
71
|
-
},
|
|
55
|
+
}, onSaved: (addr) => {
|
|
72
56
|
if (addr) {
|
|
73
57
|
setShowNewForm(false);
|
|
74
58
|
setSelectedId(addr.id, addr);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddressPicker.js","sourceRoot":"","sources":["../../src/components/AddressPicker.tsx"],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"AddressPicker.js","sourceRoot":"","sources":["../../src/components/AddressPicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -46,8 +46,11 @@ export interface AnalyticsProviderProps {
|
|
|
46
46
|
children: React.ReactNode;
|
|
47
47
|
/** 接收所有事件的回调 */
|
|
48
48
|
onEvent?: (event: AnalyticsEvent) => void;
|
|
49
|
-
/**
|
|
50
|
-
|
|
49
|
+
/**
|
|
50
|
+
* 商家可以传入当前 cart(从 loader 拿)。
|
|
51
|
+
* 每次 cart 变化(id 或 totalQuantity 变)自动触发 cart_updated 事件。
|
|
52
|
+
*/
|
|
53
|
+
cart?: any;
|
|
51
54
|
}
|
|
52
55
|
export declare function AnalyticsProvider(props: AnalyticsProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
53
56
|
export declare function useAnalytics(): AnalyticsContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnalyticsProvider.d.ts","sourceRoot":"","sources":["../../src/components/AnalyticsProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AnalyticsProvider.d.ts","sourceRoot":"","sources":["../../src/components/AnalyticsProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,cAAc;IAC7B,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,eAAe;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACpD,kBAAkB;IAClB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;CAC7D;AAID,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAqC9D;AAED,wBAAgB,YAAY,IAAI,qBAAqB,CAOpD;AAkBD,iBAAS,QAAQ,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,QAE7E;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,QAQ3G;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE;IAAE,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,QAOjG;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,QAE7D;AAED,iBAAS,SAAS,CAAC,KAAK,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,QAOrF;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,QAK9E;AAED,iBAAS,QAAQ,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,QAEpG;AAED,yCAAyC;AACzC,eAAO,MAAM,SAAS;;;;;;;;CAQrB,CAAC"}
|
|
@@ -27,13 +27,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
27
27
|
* emit('search', { query: 'wireless' });
|
|
28
28
|
*/
|
|
29
29
|
import * as React from 'react';
|
|
30
|
-
import { useCartOptional } from './CartProvider';
|
|
31
30
|
import { useShopOptional } from './ShopProvider';
|
|
32
31
|
const Ctx = React.createContext(null);
|
|
33
32
|
export function AnalyticsProvider(props) {
|
|
34
|
-
const { children, onEvent,
|
|
33
|
+
const { children, onEvent, cart } = props;
|
|
35
34
|
const shop = useShopOptional();
|
|
36
|
-
const cartCtx = useCartOptional();
|
|
37
35
|
const onEventRef = React.useRef(onEvent);
|
|
38
36
|
React.useEffect(() => {
|
|
39
37
|
onEventRef.current = onEvent;
|
|
@@ -46,18 +44,22 @@ export function AnalyticsProvider(props) {
|
|
|
46
44
|
payload,
|
|
47
45
|
});
|
|
48
46
|
}, [shop]);
|
|
49
|
-
// cart
|
|
47
|
+
// cart 自动追踪:通过 useEffect 比较 cart.id + totalQuantity 变化触发事件
|
|
48
|
+
const lastCartRef = React.useRef(null);
|
|
50
49
|
React.useEffect(() => {
|
|
51
|
-
if (!
|
|
50
|
+
if (!cart)
|
|
52
51
|
return;
|
|
53
|
-
|
|
52
|
+
const cur = { id: cart.id, qty: cart.totalQuantity };
|
|
53
|
+
const prev = lastCartRef.current;
|
|
54
|
+
if (!prev || prev.id !== cur.id || prev.qty !== cur.qty) {
|
|
55
|
+
lastCartRef.current = cur;
|
|
54
56
|
emit('cart_updated', {
|
|
55
|
-
cartId:
|
|
56
|
-
totalQuantity:
|
|
57
|
-
totalAmount:
|
|
57
|
+
cartId: cart.id,
|
|
58
|
+
totalQuantity: cart.totalQuantity,
|
|
59
|
+
totalAmount: cart.cost?.totalAmount,
|
|
58
60
|
});
|
|
59
|
-
}
|
|
60
|
-
}, [
|
|
61
|
+
}
|
|
62
|
+
}, [cart, emit]);
|
|
61
63
|
return _jsx(Ctx.Provider, { value: { emit }, children: children });
|
|
62
64
|
}
|
|
63
65
|
export function useAnalytics() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnalyticsProvider.js","sourceRoot":"","sources":["../../src/components/AnalyticsProvider.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"AnalyticsProvider.js","sourceRoot":"","sources":["../../src/components/AnalyticsProvider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,45 +1,28 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* <BuyNowButton> —
|
|
2
|
+
* <BuyNowButton> — "立即购买"按钮
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 实现:
|
|
7
|
-
* 1. 内部包 <CartForm action="LinesAdd" inputs={{lines, navigateOnSuccess: '/checkout'}}>
|
|
8
|
-
* 2. submit 成功后 client 自动 navigate 到 checkoutUrl(或 fallback /checkout)
|
|
9
|
-
* 3. 无 JS 时:浏览器走 form POST,服务端 303 跳 /checkout
|
|
4
|
+
* helium 0.7:本质是 <CartForm action=LinesAdd> + 隐藏 redirectTo 字段。
|
|
5
|
+
* shopflare cart.tsx action 收到 redirectTo 后会 303 跳转 checkout。
|
|
10
6
|
*
|
|
11
7
|
* 用法:
|
|
12
|
-
* <BuyNowButton variantId=
|
|
8
|
+
* <BuyNowButton variantId={variantId} quantity={1}>立即购买</BuyNowButton>
|
|
13
9
|
*/
|
|
14
10
|
import * as React from 'react';
|
|
15
11
|
export interface BuyNowButtonProps {
|
|
16
|
-
/** 必传 variant GID */
|
|
17
12
|
variantId: string;
|
|
18
|
-
/** 数量,默认 1 */
|
|
19
13
|
quantity?: number;
|
|
20
|
-
/** 行级 attributes */
|
|
21
14
|
attributes?: Array<{
|
|
22
15
|
key: string;
|
|
23
16
|
value: string;
|
|
24
17
|
}>;
|
|
25
|
-
|
|
18
|
+
selectedVariant?: any;
|
|
19
|
+
/** 加购成功后跳转的 URL;商家 action 内部需根据 redirectTo 触发 redirect */
|
|
26
20
|
redirectTo?: string;
|
|
27
|
-
/** 失败回调 */
|
|
28
|
-
onError?: (err: Error) => void;
|
|
29
|
-
/** Loading 文案 */
|
|
30
|
-
loadingText?: React.ReactNode;
|
|
31
|
-
/** Disabled 文案 */
|
|
32
21
|
unavailableText?: React.ReactNode;
|
|
33
|
-
/** disabled */
|
|
34
22
|
disabled?: boolean;
|
|
35
|
-
/** Form className */
|
|
36
23
|
className?: string;
|
|
37
|
-
/** 按钮 className */
|
|
38
|
-
buttonClassName?: string;
|
|
39
|
-
/** 按钮 content */
|
|
40
|
-
children?: React.ReactNode;
|
|
41
|
-
/** 提交 route,默认 /cart */
|
|
42
24
|
route?: string;
|
|
25
|
+
children?: React.ReactNode;
|
|
43
26
|
}
|
|
44
27
|
export declare function BuyNowButton(props: BuyNowButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
45
28
|
//# sourceMappingURL=BuyNowButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuyNowButton.d.ts","sourceRoot":"","sources":["../../src/components/BuyNowButton.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"BuyNowButton.d.ts","sourceRoot":"","sources":["../../src/components/BuyNowButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA0CpD"}
|
|
@@ -1,49 +1,15 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
* <BuyNowButton> — 对齐 Hydrogen React
|
|
4
|
-
*
|
|
5
|
-
* "立即购买" — 创建/添加 line + 跳 checkout,一步到位。
|
|
6
|
-
*
|
|
7
|
-
* 实现:
|
|
8
|
-
* 1. 内部包 <CartForm action="LinesAdd" inputs={{lines, navigateOnSuccess: '/checkout'}}>
|
|
9
|
-
* 2. submit 成功后 client 自动 navigate 到 checkoutUrl(或 fallback /checkout)
|
|
10
|
-
* 3. 无 JS 时:浏览器走 form POST,服务端 303 跳 /checkout
|
|
11
|
-
*
|
|
12
|
-
* 用法:
|
|
13
|
-
* <BuyNowButton variantId="gid://..." quantity={1}>立即购买</BuyNowButton>
|
|
14
|
-
*/
|
|
15
|
-
import * as React from 'react';
|
|
16
|
-
import { CartForm, useFetcher } from './CartForm';
|
|
17
|
-
import { useAnalytics } from './AnalyticsProvider';
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { CartForm } from './CartForm';
|
|
18
3
|
export function BuyNowButton(props) {
|
|
19
|
-
const { variantId, quantity = 1, attributes,
|
|
4
|
+
const { variantId, quantity = 1, attributes, selectedVariant, redirectTo = '/checkout', unavailableText = '暂不可购', disabled = false, className, route = '/cart', children = '立即购买', } = props;
|
|
20
5
|
const line = { merchandiseId: variantId, quantity };
|
|
21
6
|
if (attributes && attributes.length > 0)
|
|
22
7
|
line.attributes = attributes;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
React.useEffect(() => {
|
|
30
|
-
const wasNonIdle = prevState.current !== 'idle';
|
|
31
|
-
const isIdle = fetcher.state === 'idle';
|
|
32
|
-
if (wasNonIdle && isIdle) {
|
|
33
|
-
if (fetcher.error) {
|
|
34
|
-
onError?.(new Error(fetcher.error));
|
|
35
|
-
}
|
|
36
|
-
else if (fetcher.data?.cart) {
|
|
37
|
-
analytics.emit('buy_now', { variantId, quantity });
|
|
38
|
-
const target = redirectTo || fetcher.data.cart.checkoutUrl || '/checkout';
|
|
39
|
-
if (typeof window !== 'undefined') {
|
|
40
|
-
window.location.href = target;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
prevState.current = fetcher.state;
|
|
45
|
-
}, [fetcher.state, fetcher.error, fetcher.data, redirectTo, onError, analytics, variantId, quantity]);
|
|
46
|
-
const pending = fetcher.state !== 'idle';
|
|
47
|
-
return (_jsx("button", { type: "submit", className: buttonClassName, disabled: disabled || pending, "data-buy-now": true, "data-loading": pending ? '' : undefined, children: pending ? loadingText : disabled ? unavailableText : children }));
|
|
8
|
+
if (selectedVariant)
|
|
9
|
+
line.selectedVariant = selectedVariant;
|
|
10
|
+
return (_jsx(CartForm, { route: route, action: CartForm.ACTIONS.LinesAdd, inputs: { lines: [line] }, children: (fetcher) => {
|
|
11
|
+
const submitting = fetcher.state !== 'idle';
|
|
12
|
+
return (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: "redirectTo", value: redirectTo }), _jsx("button", { type: "submit", className: className, disabled: disabled || submitting, "data-buy-now": true, children: submitting ? '处理中...' : disabled ? unavailableText : children })] }));
|
|
13
|
+
} }));
|
|
48
14
|
}
|
|
49
15
|
//# sourceMappingURL=BuyNowButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuyNowButton.js","sourceRoot":"","sources":["../../src/components/BuyNowButton.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"BuyNowButton.js","sourceRoot":"","sources":["../../src/components/BuyNowButton.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAgB1D,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,SAAS,EACT,QAAQ,GAAG,CAAC,EACZ,UAAU,EACV,eAAe,EACf,UAAU,GAAG,WAAW,EACxB,eAAe,GAAG,MAAM,EACxB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,KAAK,GAAG,OAAO,EACf,QAAQ,GAAG,MAAM,GAClB,GAAG,KAAK,CAAC;IAEV,MAAM,IAAI,GAAkB,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;IACnE,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC;QAAE,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IACtE,IAAI,eAAe;QAAE,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;IAE5D,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,QAAQ,EACjC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,YAExB,CAAC,OAAO,EAAE,EAAE;YACX,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,KAAK,MAAM,CAAC;YAC5C,OAAO,CACL,8BACE,gBAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,UAAU,GAAI,EAC5D,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAAI,UAAU,kCAG/B,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,GACvD,IACR,CACJ,CAAC;QACJ,CAAC,GACQ,CACZ,CAAC;AACJ,CAAC"}
|
|
@@ -1,38 +1,27 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* <CartCheckoutButton> — 对齐 Hydrogen React
|
|
3
3
|
*
|
|
4
|
-
*
|
|
4
|
+
* 渲染跳转到 cart.checkoutUrl 的按钮 / 链接。
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
* - 取 cart.checkoutUrl,无 cart / 空 cart 时按钮 disabled
|
|
8
|
-
* - 默认 <a> 元素(无 JS 也能用),可改成 <button> + onClick
|
|
9
|
-
* - 渲染纯样式,行为非业务逻辑
|
|
6
|
+
* helium 0.7:从 props 接 checkoutUrl,不再 useCart()。
|
|
10
7
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* // 自定义渲染
|
|
15
|
-
* <CartCheckoutButton>
|
|
16
|
-
* {(href, disabled) => (
|
|
17
|
-
* <a href={href} className="my-cta" aria-disabled={disabled}>
|
|
18
|
-
* 结算 {cart.totalQuantity} 件
|
|
19
|
-
* </a>
|
|
20
|
-
* )}
|
|
8
|
+
* <CartCheckoutButton checkoutUrl={cart?.checkoutUrl} disabled={!cart?.totalQuantity}>
|
|
9
|
+
* 去结算
|
|
21
10
|
* </CartCheckoutButton>
|
|
22
11
|
*/
|
|
23
12
|
import * as React from 'react';
|
|
24
13
|
export interface CartCheckoutButtonProps {
|
|
25
|
-
/**
|
|
26
|
-
|
|
27
|
-
/** 强制 disabled
|
|
14
|
+
/** cart.checkoutUrl — 没有时按钮 disabled */
|
|
15
|
+
checkoutUrl?: string | null;
|
|
16
|
+
/** 强制 disabled */
|
|
28
17
|
disabled?: boolean;
|
|
29
18
|
/** 按钮内容;不传默认 "去结算" */
|
|
30
19
|
children?: React.ReactNode | ((href: string, disabled: boolean) => React.ReactNode);
|
|
31
|
-
/**
|
|
20
|
+
/** className */
|
|
21
|
+
className?: string;
|
|
22
|
+
/** 渲染元素:默认 a,可改 button */
|
|
32
23
|
as?: 'a' | 'button';
|
|
33
|
-
/** 点击回调(事件触发) */
|
|
34
24
|
onClick?: React.MouseEventHandler;
|
|
35
|
-
/** 透传其它 props 到根元素 */
|
|
36
25
|
[key: string]: any;
|
|
37
26
|
}
|
|
38
27
|
export declare function CartCheckoutButton(props: CartCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartCheckoutButton.d.ts","sourceRoot":"","sources":["../../src/components/CartCheckoutButton.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"CartCheckoutButton.d.ts","sourceRoot":"","sources":["../../src/components/CartCheckoutButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,kBAAkB;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACpF,gBAAgB;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAkDhE"}
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useCart } from './CartProvider';
|
|
3
2
|
export function CartCheckoutButton(props) {
|
|
4
|
-
const {
|
|
5
|
-
const
|
|
6
|
-
const href = cart?.checkoutUrl;
|
|
7
|
-
const noCart = !cart || cart.totalQuantity === 0 || !href;
|
|
8
|
-
const disabled = !!disabledProp || noCart;
|
|
3
|
+
const { checkoutUrl, disabled: disabledProp, children, className, as = 'a', onClick, ...rest } = props;
|
|
4
|
+
const disabled = !!disabledProp || !checkoutUrl;
|
|
9
5
|
if (typeof children === 'function') {
|
|
10
|
-
return _jsx(_Fragment, { children: children(
|
|
6
|
+
return _jsx(_Fragment, { children: children(checkoutUrl || '#', disabled) });
|
|
11
7
|
}
|
|
12
8
|
const label = children ?? '去结算';
|
|
13
9
|
if (as === 'button') {
|
|
@@ -15,13 +11,12 @@ export function CartCheckoutButton(props) {
|
|
|
15
11
|
if (disabled)
|
|
16
12
|
return;
|
|
17
13
|
onClick?.(e);
|
|
18
|
-
if (!e.defaultPrevented &&
|
|
19
|
-
window.location.href =
|
|
14
|
+
if (!e.defaultPrevented && checkoutUrl) {
|
|
15
|
+
window.location.href = checkoutUrl;
|
|
20
16
|
}
|
|
21
17
|
}, ...rest, children: label }));
|
|
22
18
|
}
|
|
23
|
-
|
|
24
|
-
return (_jsx("a", { href: disabled ? undefined : href, className: className, "aria-disabled": disabled || undefined, "data-cart-checkout-button": true, "data-disabled": disabled ? '' : undefined, onClick: (e) => {
|
|
19
|
+
return (_jsx("a", { href: disabled ? undefined : (checkoutUrl || undefined), className: className, "aria-disabled": disabled || undefined, "data-cart-checkout-button": true, "data-disabled": disabled ? '' : undefined, onClick: (e) => {
|
|
25
20
|
if (disabled) {
|
|
26
21
|
e.preventDefault();
|
|
27
22
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartCheckoutButton.js","sourceRoot":"","sources":["../../src/components/CartCheckoutButton.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"CartCheckoutButton.js","sourceRoot":"","sources":["../../src/components/CartCheckoutButton.tsx"],"names":[],"mappings":";AA6BA,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,GAAG,GAAG,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACvG,MAAM,QAAQ,GAAG,CAAC,CAAC,YAAY,IAAI,CAAC,WAAW,CAAC;IAEhD,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,OAAO,4BAAG,QAAQ,CAAC,WAAW,IAAI,GAAG,EAAE,QAAQ,CAAC,GAAI,CAAC;IACvD,CAAC;IAED,MAAM,KAAK,GAAG,QAAQ,IAAI,KAAK,CAAC;IAEhC,IAAI,EAAE,KAAK,QAAQ,EAAE,CAAC;QACpB,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,qCAElB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,IAAI,QAAQ;oBAAE,OAAO;gBACrB,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;gBACb,IAAI,CAAC,CAAC,CAAC,gBAAgB,IAAI,WAAW,EAAE,CAAC;oBACvC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,WAAW,CAAC;gBACrC,CAAC;YACH,CAAC,KACG,IAAI,YAEP,KAAK,GACC,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,YACE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,SAAS,CAAC,EACvD,SAAS,EAAE,SAAS,mBACL,QAAQ,IAAI,SAAS,sDAErB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,QAAQ,EAAE,CAAC;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACf,CAAC,KACG,IAAI,YAEP,KAAK,GACJ,CACL,CAAC;AACJ,CAAC"}
|
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* <CartCost> — 对齐 Hydrogen React
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* "total" → cost.totalAmount (默认)
|
|
6
|
-
* "subtotal" → cost.subtotalAmount
|
|
7
|
-
* "tax" → cost.totalTaxAmount
|
|
8
|
-
* "duty" → cost.totalDutyAmount
|
|
9
|
-
* "discount" → cost.totalDiscountAmount(shopbb-extension)
|
|
4
|
+
* 渲染 cart 上不同维度的金额。
|
|
10
5
|
*
|
|
11
|
-
*
|
|
6
|
+
* Hydrogen 0.7 改造:cart 通过 prop 接入(不再 useCart())。
|
|
7
|
+
* 商家从 loader 拿 cart 后传入。
|
|
12
8
|
*
|
|
13
|
-
*
|
|
14
|
-
* <CartCost amountType="
|
|
15
|
-
* <CartCost amountType="discount"
|
|
16
|
-
* <CartCost amountType="total" withoutTrailingZeros />
|
|
17
|
-
*
|
|
18
|
-
* 自定义渲染:
|
|
19
|
-
* <CartCost amountType="total">
|
|
20
|
-
* {(money) => <strong>{money.amount} {money.currencyCode}</strong>}
|
|
21
|
-
* </CartCost>
|
|
9
|
+
* <CartCost cart={cart} amountType="subtotal" />
|
|
10
|
+
* <CartCost cart={cart} amountType="total" as="strong" />
|
|
11
|
+
* <CartCost cart={cart} amountType="discount">{(money) => <strong>{money.amount}</strong>}</CartCost>
|
|
22
12
|
*/
|
|
23
13
|
import * as React from 'react';
|
|
24
14
|
import { type MoneyProps } from './Money';
|
|
@@ -27,16 +17,18 @@ export interface MoneyValue {
|
|
|
27
17
|
currencyCode: string;
|
|
28
18
|
}
|
|
29
19
|
export interface CartCostProps extends Omit<MoneyProps, 'data' | 'children'> {
|
|
20
|
+
/** cart 对象 — 必须包含 .cost 字段 */
|
|
21
|
+
cart: any;
|
|
30
22
|
/**
|
|
31
|
-
* 渲染哪一项 cost
|
|
32
|
-
* - "total" :
|
|
33
|
-
* - "subtotal" :
|
|
34
|
-
* - "tax" :
|
|
35
|
-
* - "duty" :
|
|
36
|
-
* - "discount" :
|
|
23
|
+
* 渲染哪一项 cost:
|
|
24
|
+
* - "total" : cart.cost.totalAmount(默认)
|
|
25
|
+
* - "subtotal" : cart.cost.subtotalAmount
|
|
26
|
+
* - "tax" : cart.cost.totalTaxAmount
|
|
27
|
+
* - "duty" : cart.cost.totalDutyAmount
|
|
28
|
+
* - "discount" : cart.cost.totalDiscountAmount(shopbb extension)
|
|
37
29
|
*/
|
|
38
30
|
amountType?: 'total' | 'subtotal' | 'tax' | 'duty' | 'discount';
|
|
39
|
-
/**
|
|
31
|
+
/** 自定义渲染 */
|
|
40
32
|
children?: (money: MoneyValue) => React.ReactNode;
|
|
41
33
|
}
|
|
42
34
|
export declare function CartCost(props: CartCostProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartCost.d.ts","sourceRoot":"","sources":["../../src/components/CartCost.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"CartCost.d.ts","sourceRoot":"","sources":["../../src/components/CartCost.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,CAAC;IAC1E,8BAA8B;IAC9B,IAAI,EAAE,GAAG,CAAC;IACV;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAChE,YAAY;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC;CACnD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,kDAe5C"}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useCart } from './CartProvider';
|
|
3
2
|
import { Money } from './Money';
|
|
4
3
|
export function CartCost(props) {
|
|
5
|
-
const { amountType = 'total', children, ...moneyProps } = props;
|
|
6
|
-
const { cart } = useCart();
|
|
4
|
+
const { cart, amountType = 'total', children, ...moneyProps } = props;
|
|
7
5
|
if (!cart?.cost)
|
|
8
6
|
return null;
|
|
9
7
|
const cost = cart.cost;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartCost.js","sourceRoot":"","sources":["../../src/components/CartCost.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"CartCost.js","sourceRoot":"","sources":["../../src/components/CartCost.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AAuBjD,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IACtE,IAAI,CAAC,IAAI,EAAE,IAAI;QAAE,OAAO,IAAI,CAAC;IAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAW,CAAC;IAC9B,IAAI,KAAK,GAAsB,IAAI,CAAC;IACpC,QAAQ,UAAU,EAAE,CAAC;QACnB,KAAK,OAAO;YAAE,KAAK,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC;YAAC,MAAM;QACtD,KAAK,UAAU;YAAE,KAAK,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC;YAAC,MAAM;QAC5D,KAAK,KAAK;YAAE,KAAK,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC;YAAC,MAAM;QACzE,KAAK,MAAM;YAAE,KAAK,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC;YAAC,MAAM;QAC5E,KAAK,UAAU;YAAE,KAAK,GAAG,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC;YAAC,MAAM;IACnE,CAAC;IACD,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,IAAI,QAAQ;QAAE,OAAO,4BAAG,QAAQ,CAAC,KAAK,CAAC,GAAI,CAAC;IAC5C,OAAO,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,KAAM,UAAU,GAAI,CAAC;AAChD,CAAC"}
|