@gem-sdk/plugin-cart-drawer 1.0.5 → 1.5.43
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/cjs/components/CartDiscountCode.js +83 -39
- package/dist/cjs/components/CartDrawer.js +126 -35
- package/dist/cjs/components/CartFooter.js +58 -34
- package/dist/cjs/components/CartLineItem.js +158 -64
- package/dist/cjs/components/CartLineItemQuantity.js +46 -10
- package/dist/cjs/components/CartLineQuantityAdjustButton.js +195 -147
- package/dist/cjs/components/CartOrderNote.js +61 -35
- package/dist/cjs/components/DiscountCodeItem.js +108 -67
- package/dist/cjs/components/LoadingIcon.js +21 -1
- package/dist/cjs/components/icons/Trash.js +20 -1
- package/dist/esm/components/CartDiscountCode.js +83 -39
- package/dist/esm/components/CartDrawer.js +126 -35
- package/dist/esm/components/CartFooter.js +59 -35
- package/dist/esm/components/CartLineItem.js +158 -64
- package/dist/esm/components/CartLineItemQuantity.js +46 -10
- package/dist/esm/components/CartLineQuantityAdjustButton.js +195 -147
- package/dist/esm/components/CartOrderNote.js +61 -35
- package/dist/esm/components/DiscountCodeItem.js +108 -67
- package/dist/esm/components/LoadingIcon.js +21 -1
- package/dist/esm/components/icons/Trash.js +20 -1
- package/package.json +1 -1
|
@@ -8,45 +8,89 @@ var react = require('react');
|
|
|
8
8
|
var DiscountCodeItem = require('./DiscountCodeItem.js');
|
|
9
9
|
var LoadingIcon = require('./LoadingIcon.js');
|
|
10
10
|
|
|
11
|
-
const CartDiscountCode = ()
|
|
12
|
-
const inputRef = react.useRef(null);
|
|
13
|
-
const { cartId
|
|
14
|
-
const { trigger: updateCartDiscountCode, isMutating
|
|
15
|
-
onSuccess: ()
|
|
16
|
-
if (inputRef.current) {
|
|
17
|
-
inputRef.current.value = '';
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
const { data: cart
|
|
22
|
-
const currentCode = react.useMemo(()
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
updateCartDiscountCode({
|
|
28
|
-
cartId,
|
|
29
|
-
discountCodes: [
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
11
|
+
const CartDiscountCode = ()=>{
|
|
12
|
+
const inputRef = react.useRef(null);
|
|
13
|
+
const { cartId } = core.useCartId();
|
|
14
|
+
const { trigger: updateCartDiscountCode , isMutating } = core.useCartDiscountCodesUpdate({
|
|
15
|
+
onSuccess: ()=>{
|
|
16
|
+
if (inputRef.current) {
|
|
17
|
+
inputRef.current.value = '';
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
const { data: cart } = core.useCartData();
|
|
22
|
+
const currentCode = react.useMemo(()=>cart?.discounts?.map((v)=>v.code).filter(core.isDefined) ?? [], [
|
|
23
|
+
cart?.discounts
|
|
24
|
+
]);
|
|
25
|
+
const addCode = react.useCallback(()=>{
|
|
26
|
+
if (cartId && inputRef.current?.value && !currentCode.some((code)=>code.toLowerCase() === inputRef.current?.value.trim().toLowerCase())) {
|
|
27
|
+
updateCartDiscountCode({
|
|
28
|
+
cartId,
|
|
29
|
+
discountCodes: [
|
|
30
|
+
inputRef.current.value,
|
|
31
|
+
...currentCode
|
|
32
|
+
]
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
}, [
|
|
36
|
+
cartId,
|
|
37
|
+
updateCartDiscountCode,
|
|
38
|
+
currentCode
|
|
39
|
+
]);
|
|
40
|
+
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
41
|
+
className: "flex flex-col gap-2 border-t p-4 ",
|
|
42
|
+
children: [
|
|
43
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
44
|
+
className: "flex gap-4",
|
|
45
|
+
children: [
|
|
46
|
+
/*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
47
|
+
className: "flex-1 border p-2 outline-none",
|
|
48
|
+
placeholder: "Discount Code",
|
|
49
|
+
style: {
|
|
50
|
+
...core.composeRadius({
|
|
51
|
+
normal: {
|
|
52
|
+
radiusType: 'small'
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
},
|
|
56
|
+
ref: inputRef
|
|
57
|
+
}),
|
|
58
|
+
/*#__PURE__*/ jsxRuntime.jsxs("button", {
|
|
59
|
+
disabled: isMutating,
|
|
60
|
+
onClick: addCode,
|
|
61
|
+
className: "relative whitespace-nowrap bg-g-brand px-2 text-g-text-3 disabled:opacity-80",
|
|
62
|
+
style: {
|
|
63
|
+
...core.composeRadius({
|
|
64
|
+
normal: {
|
|
65
|
+
radiusType: 'small'
|
|
66
|
+
}
|
|
67
|
+
})
|
|
68
|
+
},
|
|
69
|
+
children: [
|
|
70
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
71
|
+
className: core.cls('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', {
|
|
72
|
+
hidden: !isMutating
|
|
73
|
+
}),
|
|
74
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(LoadingIcon.default, {})
|
|
75
|
+
}),
|
|
76
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
77
|
+
className: core.cls('g-paragraph-1', {
|
|
78
|
+
invisible: isMutating
|
|
79
|
+
}),
|
|
80
|
+
children: "Apply Code"
|
|
81
|
+
})
|
|
82
|
+
]
|
|
83
|
+
})
|
|
84
|
+
]
|
|
85
|
+
}),
|
|
86
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
87
|
+
className: "inline-flex flex-wrap gap-2",
|
|
88
|
+
children: cart?.discounts?.map((code)=>/*#__PURE__*/ jsxRuntime.jsx(DiscountCodeItem.default, {
|
|
89
|
+
item: code
|
|
90
|
+
}, code.code))
|
|
91
|
+
})
|
|
92
|
+
]
|
|
93
|
+
});
|
|
50
94
|
};
|
|
51
95
|
|
|
52
96
|
exports.default = CartDiscountCode;
|
|
@@ -11,41 +11,132 @@ var CartFooter = require('./CartFooter.js');
|
|
|
11
11
|
var CartLineItem = require('./CartLineItem.js');
|
|
12
12
|
var CartOrderNote = require('./CartOrderNote.js');
|
|
13
13
|
|
|
14
|
-
const duration = 300;
|
|
15
|
-
const defaultStyle = {
|
|
16
|
-
transition: `opacity ${duration}ms ease-in-out`,
|
|
17
|
-
opacity: 0
|
|
18
|
-
};
|
|
19
|
-
const transitionStyles = {
|
|
20
|
-
entering: {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
14
|
+
const duration = 300;
|
|
15
|
+
const defaultStyle = {
|
|
16
|
+
transition: `opacity ${duration}ms ease-in-out`,
|
|
17
|
+
opacity: 0
|
|
18
|
+
};
|
|
19
|
+
const transitionStyles = {
|
|
20
|
+
entering: {
|
|
21
|
+
opacity: 1
|
|
22
|
+
},
|
|
23
|
+
entered: {
|
|
24
|
+
opacity: 1
|
|
25
|
+
},
|
|
26
|
+
exiting: {
|
|
27
|
+
opacity: 0
|
|
28
|
+
},
|
|
29
|
+
exited: {
|
|
30
|
+
opacity: 0
|
|
31
|
+
},
|
|
32
|
+
unmounted: {
|
|
33
|
+
opacity: 0
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
const CartDrawer = ({ className , style , setting })=>{
|
|
37
|
+
const { data , isLoading: loading , error } = core.useCartData();
|
|
38
|
+
const { closeCart , isCartOpen } = core.useCartUI();
|
|
39
|
+
const nodeRef = react.useRef(null);
|
|
40
|
+
return /*#__PURE__*/ jsxRuntime.jsx(reactTransitionGroup.Transition, {
|
|
41
|
+
in: isCartOpen,
|
|
42
|
+
timeout: duration,
|
|
43
|
+
nodeRef: nodeRef,
|
|
44
|
+
children: (state)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
45
|
+
ref: nodeRef,
|
|
46
|
+
className: core.cls('fixed inset-0 z-90', className, {
|
|
47
|
+
invisible: !isCartOpen,
|
|
48
|
+
visible: isCartOpen
|
|
49
|
+
}),
|
|
50
|
+
style: {
|
|
51
|
+
...style,
|
|
52
|
+
...defaultStyle,
|
|
53
|
+
...transitionStyles[state]
|
|
54
|
+
},
|
|
55
|
+
children: [
|
|
56
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
57
|
+
"aria-hidden": true,
|
|
58
|
+
onClick: ()=>closeCart(),
|
|
59
|
+
className: "fixed inset-0 z-80 bg-slate-600/40"
|
|
60
|
+
}),
|
|
61
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
62
|
+
className: "fixed inset-y-0 right-0 z-90 flex w-full max-w-[400px] flex-col bg-white text-g-text-1 shadow-2xl mobile:w-full",
|
|
63
|
+
children: loading ? /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
64
|
+
className: "w-full pt-10 text-center",
|
|
65
|
+
children: "Loading..."
|
|
66
|
+
}) : error ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
67
|
+
className: "w-full pt-10 text-center text-g-error",
|
|
68
|
+
children: [
|
|
69
|
+
"Error: ",
|
|
70
|
+
error?.[0]?.message
|
|
71
|
+
]
|
|
72
|
+
}) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
73
|
+
children: [
|
|
74
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
75
|
+
className: "flex items-center justify-between border-b border-b-g-line-3 px-6 py-3",
|
|
76
|
+
children: [
|
|
77
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
78
|
+
className: "font-g-heading text-xl font-semibold",
|
|
79
|
+
children: setting?.title
|
|
80
|
+
}),
|
|
81
|
+
/*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
82
|
+
onClick: closeCart,
|
|
83
|
+
title: "Close cart drawer",
|
|
84
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
|
|
85
|
+
className: "w-5",
|
|
86
|
+
fill: "currentColor",
|
|
87
|
+
viewBox: "0 0 24 24",
|
|
88
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
89
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
90
|
+
d: "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z"
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
})
|
|
94
|
+
]
|
|
95
|
+
}),
|
|
96
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
97
|
+
className: "group h-full overflow-y-auto px-6 pb-4 scrollbar:!h-1.5 scrollbar:!w-1.5 scrollbar:bg-transparent scrollbar-track:!rounded scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300",
|
|
98
|
+
children: !data || !data.lineItems.length ? /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
99
|
+
className: "w-full pt-10 text-center",
|
|
100
|
+
children: setting?.emptyLabel
|
|
101
|
+
}) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
102
|
+
children: [
|
|
103
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
104
|
+
className: "flex flex-col",
|
|
105
|
+
children: data.lineItems.map((line)=>{
|
|
106
|
+
if (!line) return null;
|
|
107
|
+
return /*#__PURE__*/ jsxRuntime.jsx(core.CartLineProvider, {
|
|
108
|
+
line: line,
|
|
109
|
+
children: /*#__PURE__*/ jsxRuntime.jsx(CartLineItem.default, {})
|
|
110
|
+
}, line.id);
|
|
111
|
+
})
|
|
112
|
+
}),
|
|
113
|
+
/*#__PURE__*/ jsxRuntime.jsx(CartOrderNote.default, {
|
|
114
|
+
placeholder: "Leave your order note here...",
|
|
115
|
+
triggerUpdate: "blur"
|
|
116
|
+
})
|
|
117
|
+
]
|
|
118
|
+
})
|
|
119
|
+
}),
|
|
120
|
+
/*#__PURE__*/ jsxRuntime.jsx(CartDiscountCode.default, {}),
|
|
121
|
+
!!data && !!data.lineItems.length && /*#__PURE__*/ jsxRuntime.jsx(CartFooter.default, {
|
|
122
|
+
openMode: setting?.openMode,
|
|
123
|
+
checkoutUrl: data.checkoutUrl,
|
|
124
|
+
price: data?.totalPrice,
|
|
125
|
+
currencyCode: data?.currency.code
|
|
126
|
+
})
|
|
127
|
+
]
|
|
128
|
+
})
|
|
129
|
+
})
|
|
130
|
+
]
|
|
131
|
+
})
|
|
132
|
+
});
|
|
133
|
+
};
|
|
134
|
+
CartDrawer.defaultProps = {
|
|
135
|
+
setting: {
|
|
136
|
+
title: 'Your Cart',
|
|
137
|
+
emptyLabel: 'Your cart is empty',
|
|
138
|
+
openMode: 'page'
|
|
139
|
+
}
|
|
49
140
|
};
|
|
50
141
|
|
|
51
142
|
exports.default = CartDrawer;
|
|
@@ -6,40 +6,64 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
6
6
|
var core = require('@gem-sdk/core');
|
|
7
7
|
var react = require('react');
|
|
8
8
|
|
|
9
|
-
const CartFooter = ({ checkoutUrl, price, openMode
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
9
|
+
const CartFooter = ({ checkoutUrl , price , openMode })=>{
|
|
10
|
+
const urlCheckout = core.useCheckoutUrl(checkoutUrl);
|
|
11
|
+
const checkoutPopup = react.useRef(null);
|
|
12
|
+
const money = core.useMoney(price ?? 0);
|
|
13
|
+
const openCheckout = (w, h)=>{
|
|
14
|
+
if (openMode === 'popup') {
|
|
15
|
+
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
|
|
16
|
+
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
|
|
17
|
+
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
|
|
18
|
+
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
|
|
19
|
+
const systemZoom = width / window.screen.availWidth;
|
|
20
|
+
const left = (width - w) / 2 / systemZoom + dualScreenLeft;
|
|
21
|
+
const top = (height - h) / 2 / systemZoom + dualScreenTop;
|
|
22
|
+
checkoutPopup.current = window.open(urlCheckout, 'checkout', `scrollbars=yes, width=${w / systemZoom}, height=${h / systemZoom}, top=${top}, left=${left}`);
|
|
23
|
+
checkoutPopup.current?.focus();
|
|
24
|
+
} else {
|
|
25
|
+
window.open(urlCheckout);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
29
|
+
className: "flex flex-col gap-4 border-t border-t-g-line-3 bg-g-bg-2 px-6 pt-4 pb-8",
|
|
30
|
+
children: [
|
|
31
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
32
|
+
className: "g-paragraph-1 flex justify-between font-semibold",
|
|
33
|
+
children: [
|
|
34
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
35
|
+
children: "Subtotal:"
|
|
36
|
+
}),
|
|
37
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
38
|
+
"aria-label": "Total price",
|
|
39
|
+
children: money.localizedString
|
|
40
|
+
})
|
|
41
|
+
]
|
|
42
|
+
}),
|
|
43
|
+
/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
44
|
+
"aria-label": "Checkout",
|
|
45
|
+
role: "button",
|
|
46
|
+
"aria-hidden": "true",
|
|
47
|
+
className: "g-paragraph-1 flex justify-between bg-g-brand py-3 px-4 font-semibold text-g-text-3",
|
|
48
|
+
onClick: ()=>openCheckout(600, 600),
|
|
49
|
+
style: {
|
|
50
|
+
...core.composeRadius({
|
|
51
|
+
normal: {
|
|
52
|
+
radiusType: 'small'
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
},
|
|
56
|
+
children: [
|
|
57
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
58
|
+
children: money.localizedString
|
|
59
|
+
}),
|
|
60
|
+
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
61
|
+
children: "Checkout"
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
})
|
|
65
|
+
]
|
|
66
|
+
});
|
|
43
67
|
};
|
|
44
68
|
|
|
45
69
|
exports.default = CartFooter;
|