@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.
Files changed (21) hide show
  1. package/dist/cjs/components/CartDiscountCode.js +83 -39
  2. package/dist/cjs/components/CartDrawer.js +126 -35
  3. package/dist/cjs/components/CartFooter.js +58 -34
  4. package/dist/cjs/components/CartLineItem.js +158 -64
  5. package/dist/cjs/components/CartLineItemQuantity.js +46 -10
  6. package/dist/cjs/components/CartLineQuantityAdjustButton.js +195 -147
  7. package/dist/cjs/components/CartOrderNote.js +61 -35
  8. package/dist/cjs/components/DiscountCodeItem.js +108 -67
  9. package/dist/cjs/components/LoadingIcon.js +21 -1
  10. package/dist/cjs/components/icons/Trash.js +20 -1
  11. package/dist/esm/components/CartDiscountCode.js +83 -39
  12. package/dist/esm/components/CartDrawer.js +126 -35
  13. package/dist/esm/components/CartFooter.js +59 -35
  14. package/dist/esm/components/CartLineItem.js +158 -64
  15. package/dist/esm/components/CartLineItemQuantity.js +46 -10
  16. package/dist/esm/components/CartLineQuantityAdjustButton.js +195 -147
  17. package/dist/esm/components/CartOrderNote.js +61 -35
  18. package/dist/esm/components/DiscountCodeItem.js +108 -67
  19. package/dist/esm/components/LoadingIcon.js +21 -1
  20. package/dist/esm/components/icons/Trash.js +20 -1
  21. package/package.json +1 -1
package/dist/cjs/components/CartLineItem.js CHANGED
@@ -9,70 +9,164 @@ var CartLineItemQuantity = require('./CartLineItemQuantity.js');
9
9
  var Trash = require('./icons/Trash.js');
10
10
  var LoadingIcon = require('./LoadingIcon.js');
11
11
 
12
- const CartLineItem = () => {
13
- const line = core.useCartLine();
14
- const { cartId } = core.useCartId();
15
- const { isMutating: loading, trigger: removeCartLine } = core.useRemoveCartItem();
16
- const money = core.useMoney(line.variant?.price ? line.variant?.price : 0);
17
- const compareAtPrice = core.useMoney(line.variant?.listPrice ? line.variant?.listPrice : 0);
18
- return (jsxRuntime.jsxs("div", { className: "flex items-center gap-4 border-b border-b-g-line-2 py-4 last:border-b-transparent", children: [jsxRuntime.jsx("div", { className: "aspect-square w-16", children: line.variant?.image?.url && (jsxRuntime.jsx("img", { className: "h-full w-full object-cover", src: line.variant.image.url, alt: line.variant?.image?.altText ?? '' })) }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsxs("p", { className: "line-clamp-2", children: [line.productTitle, " ", line.variant.name !== 'Default Title' && ` - ${line.variant.name}`] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-sm", children: [jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("span", { className: "font-semibold", children: money.localizedString }), line.variant?.listPrice > 0 && (jsxRuntime.jsx("span", { className: "text-[#B4B4B4] line-through", children: compareAtPrice.localizedString }))] }), line.attributes?.map((attribute) => (jsxRuntime.jsxs("div", { children: [attribute.key, ": ", attribute.value] }, attribute.key)))] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsx(CartLineItemQuantity.default, { size: "medium" }), jsxRuntime.jsx("button", { onClick: () => {
19
- components.openConfirm({
20
- title: (jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsxRuntime.jsx(Trash.default, {}), jsxRuntime.jsx("p", { className: "font-g-body text-xl font-semibold", children: "Are you sure ?" })] })),
21
- content: (jsxRuntime.jsxs("div", { className: "text-center", children: [jsxRuntime.jsx("p", { children: "Do you really want to delete these items?" }), jsxRuntime.jsx("p", { children: "This process cannot be undone." })] })),
22
- className: 'w-full max-w-[572px] gap-4 rounded',
23
- buttons: [
24
- {
25
- label: 'Cancel',
26
- className: 'w-[130px]',
27
- styles: {
28
- backgroundColor: {
29
- normal: 'bg-1',
30
- },
31
- rounded: {
32
- desktop: {
33
- normal: {
34
- radiusType: 'small',
35
- },
36
- },
37
- },
38
- btnSpacing: {
39
- type: 'small',
40
- },
41
- },
42
- },
43
- {
44
- label: 'Delete',
45
- className: 'w-[130px]',
46
- styles: {
47
- textColor: {
48
- normal: 'text-3',
49
- },
50
- backgroundColor: {
51
- normal: 'error',
52
- },
53
- rounded: {
54
- desktop: {
55
- normal: {
56
- radiusType: 'small',
57
- },
58
- },
59
- },
60
- btnSpacing: {
61
- type: 'small',
62
- },
63
- },
64
- onClick: () => {
65
- if (cartId && line.id) {
66
- removeCartLine({
67
- cartId,
68
- lineId: line.id,
69
- });
70
- }
71
- },
72
- },
73
- ],
74
- });
75
- }, "aria-label": "Remove item from cart", title: "Remove item from cart", type: "button", children: loading ? (jsxRuntime.jsx(LoadingIcon.default, { className: "text-g-brand" })) : (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) })) })] })] })] }));
12
+ const CartLineItem = ()=>{
13
+ const line = core.useCartLine();
14
+ const { cartId } = core.useCartId();
15
+ const { isMutating: loading , trigger: removeCartLine } = core.useRemoveCartItem();
16
+ const money = core.useMoney(line.variant?.price ? line.variant?.price : 0);
17
+ const compareAtPrice = core.useMoney(line.variant?.listPrice ? line.variant?.listPrice : 0);
18
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
19
+ className: "flex items-center gap-4 border-b border-b-g-line-2 py-4 last:border-b-transparent",
20
+ children: [
21
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
22
+ className: "aspect-square w-16",
23
+ children: line.variant?.image?.url && /*#__PURE__*/ jsxRuntime.jsx("img", {
24
+ className: "h-full w-full object-cover",
25
+ src: line.variant.image.url,
26
+ alt: line.variant?.image?.altText ?? ''
27
+ })
28
+ }),
29
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
30
+ className: "flex-1",
31
+ children: [
32
+ /*#__PURE__*/ jsxRuntime.jsxs("p", {
33
+ className: "line-clamp-2",
34
+ children: [
35
+ line.productTitle,
36
+ " ",
37
+ line.variant.name !== 'Default Title' && ` - ${line.variant.name}`
38
+ ]
39
+ }),
40
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
41
+ className: "flex flex-col gap-1 text-sm",
42
+ children: [
43
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
44
+ className: "flex gap-2",
45
+ children: [
46
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
47
+ className: "font-semibold",
48
+ children: money.localizedString
49
+ }),
50
+ line.variant?.listPrice > 0 && /*#__PURE__*/ jsxRuntime.jsx("span", {
51
+ className: "text-[#B4B4B4] line-through",
52
+ children: compareAtPrice.localizedString
53
+ })
54
+ ]
55
+ }),
56
+ line.attributes?.map((attribute)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
57
+ children: [
58
+ attribute.key,
59
+ ": ",
60
+ attribute.value
61
+ ]
62
+ }, attribute.key))
63
+ ]
64
+ }),
65
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
66
+ className: "flex items-center justify-between",
67
+ children: [
68
+ /*#__PURE__*/ jsxRuntime.jsx(CartLineItemQuantity.default, {
69
+ size: "medium"
70
+ }),
71
+ /*#__PURE__*/ jsxRuntime.jsx("button", {
72
+ onClick: ()=>{
73
+ components.openConfirm({
74
+ title: /*#__PURE__*/ jsxRuntime.jsxs("div", {
75
+ className: "flex w-full flex-col items-center gap-4",
76
+ children: [
77
+ /*#__PURE__*/ jsxRuntime.jsx(Trash.default, {}),
78
+ /*#__PURE__*/ jsxRuntime.jsx("p", {
79
+ className: "font-g-body text-xl font-semibold",
80
+ children: "Are you sure ?"
81
+ })
82
+ ]
83
+ }),
84
+ content: /*#__PURE__*/ jsxRuntime.jsxs("div", {
85
+ className: "text-center",
86
+ children: [
87
+ /*#__PURE__*/ jsxRuntime.jsx("p", {
88
+ children: "Do you really want to delete these items?"
89
+ }),
90
+ /*#__PURE__*/ jsxRuntime.jsx("p", {
91
+ children: "This process cannot be undone."
92
+ })
93
+ ]
94
+ }),
95
+ className: 'w-full max-w-[572px] gap-4 rounded',
96
+ buttons: [
97
+ {
98
+ label: 'Cancel',
99
+ className: 'w-[130px]',
100
+ styles: {
101
+ backgroundColor: {
102
+ normal: 'bg-1'
103
+ },
104
+ roundedBtn: {
105
+ normal: {
106
+ radiusType: 'small'
107
+ }
108
+ },
109
+ btnSpacing: {
110
+ type: 'small'
111
+ }
112
+ }
113
+ },
114
+ {
115
+ label: 'Delete',
116
+ className: 'w-[130px]',
117
+ styles: {
118
+ textColor: {
119
+ normal: 'text-3'
120
+ },
121
+ backgroundColor: {
122
+ normal: 'error'
123
+ },
124
+ roundedBtn: {
125
+ normal: {
126
+ radiusType: 'small'
127
+ }
128
+ },
129
+ btnSpacing: {
130
+ type: 'small'
131
+ }
132
+ },
133
+ onClick: ()=>{
134
+ if (cartId && line.id) {
135
+ removeCartLine({
136
+ cartId,
137
+ lineId: line.id
138
+ });
139
+ }
140
+ }
141
+ }
142
+ ]
143
+ });
144
+ },
145
+ "aria-label": "Remove item from cart",
146
+ title: "Remove item from cart",
147
+ type: "button",
148
+ children: loading ? /*#__PURE__*/ jsxRuntime.jsx(LoadingIcon.default, {
149
+ className: "text-g-brand"
150
+ }) : /*#__PURE__*/ jsxRuntime.jsx("svg", {
151
+ xmlns: "http://www.w3.org/2000/svg",
152
+ className: "w-4 text-gray-400",
153
+ fill: "none",
154
+ viewBox: "0 0 24 24",
155
+ stroke: "currentColor",
156
+ strokeWidth: 2,
157
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
158
+ strokeLinecap: "round",
159
+ strokeLinejoin: "round",
160
+ d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
161
+ })
162
+ })
163
+ })
164
+ ]
165
+ })
166
+ ]
167
+ })
168
+ ]
169
+ });
76
170
  };
77
171
 
78
172
  exports.default = CartLineItem;
package/dist/cjs/components/CartLineItemQuantity.js CHANGED
@@ -6,16 +6,52 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var core = require('@gem-sdk/core');
7
7
  var CartLineQuantityAdjustButton = require('./CartLineQuantityAdjustButton.js');
8
8
 
9
- const CartLineItemQuantity = ({ size }) => {
10
- const line = core.useCartLine();
11
- return (jsxRuntime.jsxs("div", { className: core.cls('mt-2 inline-flex items-center overflow-auto rounded border border-g-line-3 text-g-text-1', {
12
- 'h-12': size === 'large',
13
- 'h-10': size === 'medium',
14
- 'h-8': size === 'small',
15
- }), children: [jsxRuntime.jsx(CartLineQuantityAdjustButton.default, { adjust: "decrease", "aria-label": "Decrease quantity", className: "flex\taspect-square h-full items-center justify-center", children: jsxRuntime.jsx("svg", { className: "h-4", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z" }) }) }), jsxRuntime.jsx("div", { className: "flex h-full min-w-[50px] select-none items-center justify-center border-x border-g-line-3 px-2 text-center text-base font-semibold", children: line.quantity }), jsxRuntime.jsx(CartLineQuantityAdjustButton.default, { adjust: "increase", "aria-label": "Increase quantity", className: "flex aspect-square h-full items-center justify-center", children: jsxRuntime.jsx("svg", { className: "h-4", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z" }) }) })] }));
16
- };
17
- CartLineItemQuantity.defaultProps = {
18
- size: 'medium',
9
+ const CartLineItemQuantity = ({ size })=>{
10
+ const line = core.useCartLine();
11
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
12
+ className: core.cls('mt-2 inline-flex items-center overflow-auto rounded border border-g-line-3 text-g-text-1', {
13
+ 'h-12': size === 'large',
14
+ 'h-10': size === 'medium',
15
+ 'h-8': size === 'small'
16
+ }),
17
+ children: [
18
+ /*#__PURE__*/ jsxRuntime.jsx(CartLineQuantityAdjustButton.default, {
19
+ adjust: "decrease",
20
+ "aria-label": "Decrease quantity",
21
+ className: "flex aspect-square h-full items-center justify-center",
22
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
23
+ className: "h-4",
24
+ fill: "currentColor",
25
+ viewBox: "0 0 24 24",
26
+ xmlns: "http://www.w3.org/2000/svg",
27
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
28
+ d: "M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z"
29
+ })
30
+ })
31
+ }),
32
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
33
+ className: "flex h-full min-w-[50px] select-none items-center justify-center border-x border-g-line-3 px-2 text-center text-base font-semibold",
34
+ children: line.quantity
35
+ }),
36
+ /*#__PURE__*/ jsxRuntime.jsx(CartLineQuantityAdjustButton.default, {
37
+ adjust: "increase",
38
+ "aria-label": "Increase quantity",
39
+ className: "flex aspect-square h-full items-center justify-center",
40
+ children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
41
+ className: "h-4",
42
+ fill: "currentColor",
43
+ viewBox: "0 0 24 24",
44
+ xmlns: "http://www.w3.org/2000/svg",
45
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
46
+ d: "M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z"
47
+ })
48
+ })
49
+ })
50
+ ]
51
+ });
52
+ };
53
+ CartLineItemQuantity.defaultProps = {
54
+ size: 'medium'
19
55
  };
20
56
 
21
57
  exports.default = CartLineItemQuantity;