@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.
@@ -3,153 +3,201 @@ import { useUpdateCartItem, useRemoveCartItem, useCartId, useCartLine } from '@g
3
3
  import { openConfirm } from '@gem-sdk/components';
4
4
  import Trash from './icons/Trash.js';
5
5
 
6
- /**
7
- * The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
8
- * It must be a descendent of a `CartLineProvider` component.
9
- */
10
- const CartLineQuantityAdjustButton = ({ children, adjust, className, style }) => {
11
- const { isMutating: updateLoading, trigger: updateLines } = useUpdateCartItem();
12
- const { isMutating: removeLoading, trigger: removeLines } = useRemoveCartItem();
13
- const { cartId } = useCartId();
14
- const cartLine = useCartLine();
15
- const isLoading = updateLoading || removeLoading;
16
- return (jsx("button", { "aria-label": "Adjust quantity", ...{ className, style }, disabled: isLoading, onClick: () => {
17
- if (cartId && cartLine.id) {
18
- if (adjust === 'remove') {
19
- openConfirm({
20
- title: (jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsx(Trash, {}), jsx("p", { className: "font-g-body text-xl font-semibold", children: "Are you sure ?" })] })),
21
- content: (jsxs("div", { className: "text-center", children: [jsx("p", { children: "Do you really want to delete this item?" }), 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 (cartLine.id) {
66
- removeLines({
67
- cartId,
68
- lineId: cartLine.id,
69
- });
70
- }
71
- },
72
- },
73
- ],
74
- });
75
- return;
76
- }
77
- const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
78
- if (quantity <= 0) {
79
- openConfirm({
80
- title: (jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsx(Trash, {}), jsx("p", { className: "font-g-body text-xl font-semibold", children: "Are you sure ?" })] })),
81
- content: (jsxs("div", { className: "text-center", children: [jsx("p", { children: "Do you really want to delete this item?" }), jsx("p", { children: "This process cannot be undone." })] })),
82
- className: 'w-full max-w-[572px] gap-4 rounded',
83
- buttons: [
84
- {
85
- label: 'Cancel',
86
- className: 'w-[130px]',
87
- styles: {
88
- backgroundColor: {
89
- normal: 'bg-1',
90
- },
91
- rounded: {
92
- desktop: {
93
- normal: {
94
- radiusType: 'small',
95
- },
96
- },
97
- },
98
- btnSpacing: {
99
- type: 'small',
100
- },
101
- },
102
- },
103
- {
104
- label: 'Delete',
105
- className: 'w-[130px]',
106
- styles: {
107
- textColor: {
108
- normal: 'text-3',
109
- },
110
- backgroundColor: {
111
- normal: 'error',
112
- },
113
- rounded: {
114
- desktop: {
115
- normal: {
116
- radiusType: 'small',
117
- },
118
- },
119
- },
120
- btnSpacing: {
121
- type: 'small',
122
- },
123
- },
124
- onClick: () => {
125
- if (cartLine.id) {
126
- removeLines({
127
- cartId,
128
- lineId: cartLine.id,
129
- });
130
- }
131
- },
132
- },
133
- ],
134
- });
135
- return;
136
- }
137
- else {
138
- updateLines({
139
- cartId,
140
- line: {
141
- id: cartLine.id,
142
- variantId: cartLine.variant.id,
143
- quantity,
144
- productId: cartLine.productId,
145
- },
146
- });
147
- }
148
- }
149
- }, children: isLoading ? (jsxs("div", { className: "flex gap-1", children: [jsx("span", { className: "aspect-square h-1 animate-[flashing_500ms_infinite_alternate] rounded-full bg-g-brand" }), jsx("span", { className: "aspect-square h-1 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-g-brand" }), jsx("span", { className: "aspect-square h-1 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-g-brand" })] })) : (children) }));
150
- };
151
- CartLineQuantityAdjustButton.defaultProps = {
152
- adjust: 'increase',
6
+ /**
7
+ * The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
8
+ * It must be a descendent of a `CartLineProvider` component.
9
+ */ const CartLineQuantityAdjustButton = ({ children , adjust , className , style })=>{
10
+ const { isMutating: updateLoading , trigger: updateLines } = useUpdateCartItem();
11
+ const { isMutating: removeLoading , trigger: removeLines } = useRemoveCartItem();
12
+ const { cartId } = useCartId();
13
+ const cartLine = useCartLine();
14
+ const isLoading = updateLoading || removeLoading;
15
+ return /*#__PURE__*/ jsx("button", {
16
+ "aria-label": "Adjust quantity",
17
+ className,
18
+ style,
19
+ disabled: isLoading,
20
+ onClick: ()=>{
21
+ if (cartId && cartLine.id) {
22
+ if (adjust === 'remove') {
23
+ openConfirm({
24
+ title: /*#__PURE__*/ jsxs("div", {
25
+ className: "flex w-full flex-col items-center gap-4",
26
+ children: [
27
+ /*#__PURE__*/ jsx(Trash, {}),
28
+ /*#__PURE__*/ jsx("p", {
29
+ className: "font-g-body text-xl font-semibold",
30
+ children: "Are you sure ?"
31
+ })
32
+ ]
33
+ }),
34
+ content: /*#__PURE__*/ jsxs("div", {
35
+ className: "text-center",
36
+ children: [
37
+ /*#__PURE__*/ jsx("p", {
38
+ children: "Do you really want to delete this item?"
39
+ }),
40
+ /*#__PURE__*/ jsx("p", {
41
+ children: "This process cannot be undone."
42
+ })
43
+ ]
44
+ }),
45
+ className: 'w-full max-w-[572px] gap-4 rounded',
46
+ buttons: [
47
+ {
48
+ label: 'Cancel',
49
+ className: 'w-[130px]',
50
+ styles: {
51
+ backgroundColor: {
52
+ normal: 'bg-1'
53
+ },
54
+ roundedBtn: {
55
+ normal: {
56
+ radiusType: 'small'
57
+ }
58
+ },
59
+ btnSpacing: {
60
+ type: 'small'
61
+ }
62
+ }
63
+ },
64
+ {
65
+ label: 'Delete',
66
+ className: 'w-[130px]',
67
+ styles: {
68
+ textColor: {
69
+ normal: 'text-3'
70
+ },
71
+ backgroundColor: {
72
+ normal: 'error'
73
+ },
74
+ roundedBtn: {
75
+ normal: {
76
+ radiusType: 'small'
77
+ }
78
+ },
79
+ btnSpacing: {
80
+ type: 'small'
81
+ }
82
+ },
83
+ onClick: ()=>{
84
+ if (cartLine.id) {
85
+ removeLines({
86
+ cartId,
87
+ lineId: cartLine.id
88
+ });
89
+ }
90
+ }
91
+ }
92
+ ]
93
+ });
94
+ return;
95
+ }
96
+ const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
97
+ if (quantity <= 0) {
98
+ openConfirm({
99
+ title: /*#__PURE__*/ jsxs("div", {
100
+ className: "flex w-full flex-col items-center gap-4",
101
+ children: [
102
+ /*#__PURE__*/ jsx(Trash, {}),
103
+ /*#__PURE__*/ jsx("p", {
104
+ className: "font-g-body text-xl font-semibold",
105
+ children: "Are you sure ?"
106
+ })
107
+ ]
108
+ }),
109
+ content: /*#__PURE__*/ jsxs("div", {
110
+ className: "text-center",
111
+ children: [
112
+ /*#__PURE__*/ jsx("p", {
113
+ children: "Do you really want to delete this item?"
114
+ }),
115
+ /*#__PURE__*/ jsx("p", {
116
+ children: "This process cannot be undone."
117
+ })
118
+ ]
119
+ }),
120
+ className: 'w-full max-w-[572px] gap-4 rounded',
121
+ buttons: [
122
+ {
123
+ label: 'Cancel',
124
+ className: 'w-[130px]',
125
+ styles: {
126
+ backgroundColor: {
127
+ normal: 'bg-1'
128
+ },
129
+ roundedBtn: {
130
+ normal: {
131
+ radiusType: 'small'
132
+ }
133
+ },
134
+ btnSpacing: {
135
+ type: 'small'
136
+ }
137
+ }
138
+ },
139
+ {
140
+ label: 'Delete',
141
+ className: 'w-[130px]',
142
+ styles: {
143
+ textColor: {
144
+ normal: 'text-3'
145
+ },
146
+ backgroundColor: {
147
+ normal: 'error'
148
+ },
149
+ roundedBtn: {
150
+ normal: {
151
+ radiusType: 'small'
152
+ }
153
+ },
154
+ btnSpacing: {
155
+ type: 'small'
156
+ }
157
+ },
158
+ onClick: ()=>{
159
+ if (cartLine.id) {
160
+ removeLines({
161
+ cartId,
162
+ lineId: cartLine.id
163
+ });
164
+ }
165
+ }
166
+ }
167
+ ]
168
+ });
169
+ return;
170
+ } else {
171
+ updateLines({
172
+ cartId,
173
+ line: {
174
+ id: cartLine.id,
175
+ variantId: cartLine.variant.id,
176
+ quantity,
177
+ productId: cartLine.productId
178
+ }
179
+ });
180
+ }
181
+ }
182
+ },
183
+ children: isLoading ? /*#__PURE__*/ jsxs("div", {
184
+ className: "flex gap-1",
185
+ children: [
186
+ /*#__PURE__*/ jsx("span", {
187
+ className: "aspect-square h-1 animate-[flashing_500ms_infinite_alternate] rounded-full bg-g-brand"
188
+ }),
189
+ /*#__PURE__*/ jsx("span", {
190
+ className: "aspect-square h-1 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-g-brand"
191
+ }),
192
+ /*#__PURE__*/ jsx("span", {
193
+ className: "aspect-square h-1 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-g-brand"
194
+ })
195
+ ]
196
+ }) : children
197
+ });
198
+ };
199
+ CartLineQuantityAdjustButton.defaultProps = {
200
+ adjust: 'increase'
153
201
  };
154
202
 
155
203
  export { CartLineQuantityAdjustButton as default };
@@ -2,41 +2,67 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { useCartData, useCartId, useCartNoteUpdate } from '@gem-sdk/core';
3
3
  import { useRef, useCallback } from 'react';
4
4
 
5
- const CartOrderNote = ({ triggerUpdate, debounce, placeholder }) => {
6
- const textRef = useRef(null);
7
- const timeout = useRef(null);
8
- const abortControllerRef = useRef(new AbortController());
9
- const { data: cart } = useCartData();
10
- const { cartId } = useCartId();
11
- const { trigger: updateCartNote } = useCartNoteUpdate();
12
- const updateNote = useCallback((note) => {
13
- if (cartId && cart?.note !== note) {
14
- updateCartNote({
15
- cartId,
16
- note,
17
- });
18
- }
19
- }, [cart?.note, cartId, updateCartNote]);
20
- const onBlur = (e) => {
21
- if (abortControllerRef.current.signal.aborted) {
22
- abortControllerRef.current = new AbortController();
23
- }
24
- updateNote(e.target.value);
25
- };
26
- const onChange = () => {
27
- if (timeout.current) {
28
- if (!abortControllerRef.current.signal.aborted) {
29
- abortControllerRef.current.abort();
30
- }
31
- clearTimeout(timeout.current);
32
- }
33
- timeout.current = setTimeout(() => {
34
- abortControllerRef.current = new AbortController();
35
- updateNote(textRef.current?.value ?? '');
36
- }, debounce ?? 1000);
37
- };
38
- const inputProps = triggerUpdate === 'blur' ? { onBlur } : { onChange };
39
- return (jsxs("div", { className: "flex flex-col", children: [jsx("div", { className: "mb-4 border-b border-b-[#F1F3F4] pb-3", children: jsx("span", { className: "font-semibold text-[#424242]", children: "Order Note" }) }), jsx("textarea", { defaultValue: cart?.note, placeholder: placeholder, ref: textRef, className: "w-full rounded border p-4 outline-none", ...inputProps })] }));
5
+ const CartOrderNote = ({ triggerUpdate , debounce , placeholder })=>{
6
+ const textRef = useRef(null);
7
+ const timeout = useRef(null);
8
+ const abortControllerRef = useRef(new AbortController());
9
+ const { data: cart } = useCartData();
10
+ const { cartId } = useCartId();
11
+ const { trigger: updateCartNote } = useCartNoteUpdate();
12
+ const updateNote = useCallback((note)=>{
13
+ if (cartId && cart?.note !== note) {
14
+ updateCartNote({
15
+ cartId,
16
+ note
17
+ });
18
+ }
19
+ }, [
20
+ cart?.note,
21
+ cartId,
22
+ updateCartNote
23
+ ]);
24
+ const onBlur = (e)=>{
25
+ if (abortControllerRef.current.signal.aborted) {
26
+ abortControllerRef.current = new AbortController();
27
+ }
28
+ updateNote(e.target.value);
29
+ };
30
+ const onChange = ()=>{
31
+ if (timeout.current) {
32
+ if (!abortControllerRef.current.signal.aborted) {
33
+ abortControllerRef.current.abort();
34
+ }
35
+ clearTimeout(timeout.current);
36
+ }
37
+ timeout.current = setTimeout(()=>{
38
+ abortControllerRef.current = new AbortController();
39
+ updateNote(textRef.current?.value ?? '');
40
+ }, debounce ?? 1000);
41
+ };
42
+ const inputProps = triggerUpdate === 'blur' ? {
43
+ onBlur
44
+ } : {
45
+ onChange
46
+ };
47
+ return /*#__PURE__*/ jsxs("div", {
48
+ className: "flex flex-col",
49
+ children: [
50
+ /*#__PURE__*/ jsx("div", {
51
+ className: "mb-4 border-b border-b-[#F1F3F4] pb-3",
52
+ children: /*#__PURE__*/ jsx("span", {
53
+ className: "font-semibold text-[#424242]",
54
+ children: "Order Note"
55
+ })
56
+ }),
57
+ /*#__PURE__*/ jsx("textarea", {
58
+ defaultValue: cart?.note,
59
+ placeholder: placeholder,
60
+ ref: textRef,
61
+ className: "w-full rounded border p-4 outline-none",
62
+ ...inputProps
63
+ })
64
+ ]
65
+ });
40
66
  };
41
67
 
42
68
  export { CartOrderNote as default };
@@ -5,73 +5,114 @@ import { useMemo, useCallback } from 'react';
5
5
  import Trash from './icons/Trash.js';
6
6
  import LoadingIcon from './LoadingIcon.js';
7
7
 
8
- const DiscountCodeItem = ({ item }) => {
9
- const { cartId } = useCartId();
10
- const { trigger: updateCartDiscountCode, isMutating } = useCartDiscountCodesUpdate();
11
- const { data: cart } = useCartData();
12
- const currentCode = useMemo(() => cart?.discounts?.map((v) => v.code).filter(isDefined) ?? [], [cart?.discounts]);
13
- const removeCode = useCallback((code) => {
14
- openConfirm({
15
- title: (jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsx(Trash, {}), jsx("p", { className: "font-g-body text-xl font-semibold", children: "Are you sure ?" })] })),
16
- content: (jsx("div", { className: "text-center", children: jsx("p", { children: "Do you really want to delete this code?" }) })),
17
- className: 'w-full max-w-[572px] gap-4 rounded',
18
- buttons: [
19
- {
20
- label: 'Cancel',
21
- className: 'w-[130px]',
22
- styles: {
23
- backgroundColor: {
24
- normal: 'bg-1',
25
- },
26
- rounded: {
27
- desktop: {
28
- normal: {
29
- radiusType: 'small',
30
- },
31
- },
32
- },
33
- btnSpacing: {
34
- type: 'small',
35
- },
36
- },
37
- },
38
- {
39
- label: 'Delete',
40
- className: 'w-[130px]',
41
- styles: {
42
- textColor: {
43
- normal: 'text-3',
44
- },
45
- backgroundColor: {
46
- normal: 'error',
47
- },
48
- rounded: {
49
- desktop: {
50
- normal: {
51
- radiusType: 'small',
52
- },
53
- },
54
- },
55
- btnSpacing: {
56
- type: 'small',
57
- },
58
- },
59
- onClick: () => {
60
- if (cartId) {
61
- updateCartDiscountCode({
62
- cartId,
63
- discountCodes: currentCode.filter((v) => v !== code),
64
- });
65
- }
66
- },
67
- },
68
- ],
69
- });
70
- }, [cartId, updateCartDiscountCode, currentCode]);
71
- return (jsxs("div", { className: "flex h-8 items-center gap-2 rounded-sm border pl-2", children: [jsx("span", { className: cls('flex-1', {
72
- 'text-g-error line-through': !item.applicable,
73
- 'text-g-success': item.applicable,
74
- }), children: item.code }), jsx("button", { disabled: isMutating, onClick: () => removeCode(item.code), className: "flex aspect-square h-full items-center justify-center", children: isMutating ? (jsx(LoadingIcon, { className: "text-g-brand" })) : (jsx("svg", { className: "w-4", fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { 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", fill: "currentColor" }) })) })] }, item.code));
8
+ const DiscountCodeItem = ({ item })=>{
9
+ const { cartId } = useCartId();
10
+ const { trigger: updateCartDiscountCode , isMutating } = useCartDiscountCodesUpdate();
11
+ const { data: cart } = useCartData();
12
+ const currentCode = useMemo(()=>cart?.discounts?.map((v)=>v.code).filter(isDefined) ?? [], [
13
+ cart?.discounts
14
+ ]);
15
+ const removeCode = useCallback((code)=>{
16
+ openConfirm({
17
+ title: /*#__PURE__*/ jsxs("div", {
18
+ className: "flex w-full flex-col items-center gap-4",
19
+ children: [
20
+ /*#__PURE__*/ jsx(Trash, {}),
21
+ /*#__PURE__*/ jsx("p", {
22
+ className: "font-g-body text-xl font-semibold",
23
+ children: "Are you sure ?"
24
+ })
25
+ ]
26
+ }),
27
+ content: /*#__PURE__*/ jsx("div", {
28
+ className: "text-center",
29
+ children: /*#__PURE__*/ jsx("p", {
30
+ children: "Do you really want to delete this code?"
31
+ })
32
+ }),
33
+ className: 'w-full max-w-[572px] gap-4 rounded',
34
+ buttons: [
35
+ {
36
+ label: 'Cancel',
37
+ className: 'w-[130px]',
38
+ styles: {
39
+ backgroundColor: {
40
+ normal: 'bg-1'
41
+ },
42
+ roundedBtn: {
43
+ normal: {
44
+ radiusType: 'small'
45
+ }
46
+ },
47
+ btnSpacing: {
48
+ type: 'small'
49
+ }
50
+ }
51
+ },
52
+ {
53
+ label: 'Delete',
54
+ className: 'w-[130px]',
55
+ styles: {
56
+ textColor: {
57
+ normal: 'text-3'
58
+ },
59
+ backgroundColor: {
60
+ normal: 'error'
61
+ },
62
+ roundedBtn: {
63
+ normal: {
64
+ radiusType: 'small'
65
+ }
66
+ },
67
+ btnSpacing: {
68
+ type: 'small'
69
+ }
70
+ },
71
+ onClick: ()=>{
72
+ if (cartId) {
73
+ updateCartDiscountCode({
74
+ cartId,
75
+ discountCodes: currentCode.filter((v)=>v !== code)
76
+ });
77
+ }
78
+ }
79
+ }
80
+ ]
81
+ });
82
+ }, [
83
+ cartId,
84
+ updateCartDiscountCode,
85
+ currentCode
86
+ ]);
87
+ return /*#__PURE__*/ jsxs("div", {
88
+ className: "flex h-8 items-center gap-2 rounded-sm border pl-2",
89
+ children: [
90
+ /*#__PURE__*/ jsx("span", {
91
+ className: cls('flex-1', {
92
+ 'text-g-error line-through': !item.applicable,
93
+ 'text-g-success': item.applicable
94
+ }),
95
+ children: item.code
96
+ }),
97
+ /*#__PURE__*/ jsx("button", {
98
+ disabled: isMutating,
99
+ onClick: ()=>removeCode(item.code),
100
+ className: "flex aspect-square h-full items-center justify-center",
101
+ children: isMutating ? /*#__PURE__*/ jsx(LoadingIcon, {
102
+ className: "text-g-brand"
103
+ }) : /*#__PURE__*/ jsx("svg", {
104
+ className: "w-4",
105
+ fill: "none",
106
+ viewBox: "0 0 24 24",
107
+ xmlns: "http://www.w3.org/2000/svg",
108
+ children: /*#__PURE__*/ jsx("path", {
109
+ 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",
110
+ fill: "currentColor"
111
+ })
112
+ })
113
+ })
114
+ ]
115
+ }, item.code);
75
116
  };
76
117
 
77
118
  export { DiscountCodeItem as default };