@gem-sdk/plugin-cart-drawer 1.11.0 → 1.11.1-experimental-8f483e48

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 +25 -69
  2. package/dist/cjs/components/CartDrawer.js +23 -114
  3. package/dist/cjs/components/CartFooter.js +18 -41
  4. package/dist/cjs/components/CartLineItem.js +24 -122
  5. package/dist/cjs/components/CartLineItemQuantity.js +5 -41
  6. package/dist/cjs/components/CartLineQuantityAdjustButton.js +50 -106
  7. package/dist/cjs/components/CartOrderNote.js +12 -38
  8. package/dist/cjs/components/DiscountCodeItem.js +29 -74
  9. package/dist/cjs/components/LoadingIcon.js +1 -21
  10. package/dist/cjs/components/icons/Trash.js +1 -20
  11. package/dist/esm/components/CartDiscountCode.js +25 -69
  12. package/dist/esm/components/CartDrawer.js +23 -114
  13. package/dist/esm/components/CartFooter.js +18 -41
  14. package/dist/esm/components/CartLineItem.js +24 -122
  15. package/dist/esm/components/CartLineItemQuantity.js +5 -41
  16. package/dist/esm/components/CartLineQuantityAdjustButton.js +50 -106
  17. package/dist/esm/components/CartOrderNote.js +12 -38
  18. package/dist/esm/components/DiscountCodeItem.js +29 -74
  19. package/dist/esm/components/LoadingIcon.js +1 -21
  20. package/dist/esm/components/icons/Trash.js +1 -20
  21. package/package.json +4 -4
package/dist/esm/components/CartDiscountCode.js CHANGED
@@ -4,89 +4,45 @@ import { useRef, useMemo, useCallback } from 'react';
4
4
  import DiscountCodeItem from './DiscountCodeItem.js';
5
5
  import LoadingIcon from './LoadingIcon.js';
6
6
 
7
- const CartDiscountCode = ()=>{
7
+ const CartDiscountCode = () => {
8
8
  const inputRef = useRef(null);
9
- const { cartId } = useCartId();
10
- const { trigger: updateCartDiscountCode , isMutating } = useCartDiscountCodesUpdate({
11
- onSuccess: ()=>{
9
+ const { cartId } = useCartId();
10
+ const { trigger: updateCartDiscountCode, isMutating } = useCartDiscountCodesUpdate({
11
+ onSuccess: () => {
12
12
  if (inputRef.current) {
13
13
  inputRef.current.value = '';
14
14
  }
15
- }
15
+ },
16
16
  });
17
- const { data: cart } = useCartData();
18
- const currentCode = useMemo(()=>cart?.discounts?.map((v)=>v.code).filter(isDefined) ?? [], [
19
- cart?.discounts
20
- ]);
21
- const addCode = useCallback(()=>{
22
- if (cartId && inputRef.current?.value && !currentCode.some((code)=>code.toLowerCase() === inputRef.current?.value.trim().toLowerCase())) {
17
+ const { data: cart } = useCartData();
18
+ const currentCode = useMemo(() => cart?.discounts?.map((v) => v.code).filter(isDefined) ?? [], [cart?.discounts]);
19
+ const addCode = useCallback(() => {
20
+ if (cartId &&
21
+ inputRef.current?.value &&
22
+ !currentCode.some((code) => code.toLowerCase() === inputRef.current?.value.trim().toLowerCase())) {
23
23
  updateCartDiscountCode({
24
24
  cartId,
25
- discountCodes: [
26
- inputRef.current.value,
27
- ...currentCode
28
- ]
25
+ discountCodes: [inputRef.current.value, ...currentCode],
29
26
  });
30
27
  }
31
- }, [
32
- cartId,
33
- updateCartDiscountCode,
34
- currentCode
35
- ]);
36
- return /*#__PURE__*/ jsxs("div", {
37
- className: "flex flex-col gap-2 border-t p-4 ",
38
- children: [
39
- /*#__PURE__*/ jsxs("div", {
40
- className: "flex gap-4",
41
- children: [
42
- /*#__PURE__*/ jsx("input", {
43
- className: "flex-1 border p-2 outline-none",
44
- placeholder: "Discount Code",
45
- style: {
28
+ }, [cartId, updateCartDiscountCode, currentCode]);
29
+ return (jsxs("div", { className: "flex flex-col gap-2 border-t p-4 ", children: [jsxs("div", { className: "flex gap-4", children: [jsx("input", { className: "flex-1 border p-2 outline-none", placeholder: "Discount Code", style: {
46
30
  ...composeRadius({
47
31
  normal: {
48
- radiusType: 'small'
49
- }
50
- })
51
- },
52
- ref: inputRef
53
- }),
54
- /*#__PURE__*/ jsxs("button", {
55
- disabled: isMutating,
56
- onClick: addCode,
57
- className: "relative whitespace-nowrap bg-g-brand px-2 text-g-text-3 disabled:opacity-80",
58
- style: {
32
+ radiusType: 'small',
33
+ },
34
+ }),
35
+ }, ref: inputRef }), jsxs("button", { disabled: isMutating, onClick: addCode, className: "relative whitespace-nowrap bg-g-brand px-2 text-g-text-3 disabled:opacity-80", style: {
59
36
  ...composeRadius({
60
37
  normal: {
61
- radiusType: 'small'
62
- }
63
- })
64
- },
65
- children: [
66
- /*#__PURE__*/ jsx("div", {
67
- className: cls('absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2', {
68
- hidden: !isMutating
69
- }),
70
- children: /*#__PURE__*/ jsx(LoadingIcon, {})
38
+ radiusType: 'small',
39
+ },
71
40
  }),
72
- /*#__PURE__*/ jsx("span", {
73
- className: cls('g-paragraph-1', {
74
- invisible: isMutating
75
- }),
76
- children: "Apply Code"
77
- })
78
- ]
79
- })
80
- ]
81
- }),
82
- /*#__PURE__*/ jsx("div", {
83
- className: "inline-flex flex-wrap gap-2",
84
- children: cart?.discounts?.map((code)=>/*#__PURE__*/ jsx(DiscountCodeItem, {
85
- item: code
86
- }, code.code))
87
- })
88
- ]
89
- });
41
+ }, children: [jsx("div", { className: cls('absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2', {
42
+ hidden: !isMutating,
43
+ }), children: jsx(LoadingIcon, {}) }), jsx("span", { className: cls('g-paragraph-1', {
44
+ invisible: isMutating,
45
+ }), children: "Apply Code" })] })] }), jsx("div", { className: "inline-flex flex-wrap gap-2", children: cart?.discounts?.map((code) => (jsx(DiscountCodeItem, { item: code }, code.code))) })] }));
90
46
  };
91
47
 
92
48
  export { CartDiscountCode as default };
package/dist/esm/components/CartDrawer.js CHANGED
@@ -10,129 +10,38 @@ import CartOrderNote from './CartOrderNote.js';
10
10
  const duration = 300;
11
11
  const defaultStyle = {
12
12
  transition: `opacity ${duration}ms ease-in-out`,
13
- opacity: 0
13
+ opacity: 0,
14
14
  };
15
15
  const transitionStyles = {
16
- entering: {
17
- opacity: 1
18
- },
19
- entered: {
20
- opacity: 1
21
- },
22
- exiting: {
23
- opacity: 0
24
- },
25
- exited: {
26
- opacity: 0
27
- },
28
- unmounted: {
29
- opacity: 0
30
- }
16
+ entering: { opacity: 1 },
17
+ entered: { opacity: 1 },
18
+ exiting: { opacity: 0 },
19
+ exited: { opacity: 0 },
20
+ unmounted: { opacity: 0 },
31
21
  };
32
- const CartDrawer = ({ className , style , setting })=>{
33
- const { data , isLoading: loading , error } = useCartData();
34
- const { closeCart , isCartOpen } = useCartUI();
22
+ const CartDrawer = ({ className, style, setting }) => {
23
+ const { data, isLoading: loading, error } = useCartData();
24
+ const { closeCart, isCartOpen } = useCartUI();
35
25
  const nodeRef = useRef(null);
36
- return /*#__PURE__*/ jsx(Transition, {
37
- in: isCartOpen,
38
- timeout: duration,
39
- nodeRef: nodeRef,
40
- children: (state)=>/*#__PURE__*/ jsxs("div", {
41
- ref: nodeRef,
42
- className: cls('fixed inset-0 z-90', className, {
43
- invisible: !isCartOpen,
44
- visible: isCartOpen
45
- }),
46
- style: {
47
- ...style,
48
- ...defaultStyle,
49
- ...transitionStyles[state]
50
- },
51
- children: [
52
- /*#__PURE__*/ jsx("div", {
53
- "aria-hidden": true,
54
- onClick: ()=>closeCart(),
55
- className: "fixed inset-0 z-80 bg-slate-600/40"
56
- }),
57
- /*#__PURE__*/ jsx("div", {
58
- 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",
59
- children: loading ? /*#__PURE__*/ jsx("div", {
60
- className: "w-full pt-10 text-center",
61
- children: "Loading..."
62
- }) : error ? /*#__PURE__*/ jsxs("div", {
63
- className: "w-full pt-10 text-center text-g-error",
64
- children: [
65
- "Error: ",
66
- error?.[0]?.message
67
- ]
68
- }) : /*#__PURE__*/ jsxs(Fragment, {
69
- children: [
70
- /*#__PURE__*/ jsxs("div", {
71
- className: "flex items-center justify-between border-b border-b-g-line-3 px-6 py-3",
72
- children: [
73
- /*#__PURE__*/ jsx("span", {
74
- className: "font-g-heading text-xl font-semibold",
75
- children: setting?.title
76
- }),
77
- /*#__PURE__*/ jsx("button", {
78
- onClick: closeCart,
79
- title: "Close cart drawer",
80
- children: /*#__PURE__*/ jsx("svg", {
81
- className: "w-5",
82
- fill: "currentColor",
83
- viewBox: "0 0 24 24",
84
- xmlns: "http://www.w3.org/2000/svg",
85
- children: /*#__PURE__*/ jsx("path", {
86
- 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"
87
- })
88
- })
89
- })
90
- ]
91
- }),
92
- /*#__PURE__*/ jsx("div", {
93
- 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",
94
- children: !data || !data.lineItems.length ? /*#__PURE__*/ jsx("div", {
95
- className: "w-full pt-10 text-center",
96
- children: setting?.emptyLabel
97
- }) : /*#__PURE__*/ jsxs(Fragment, {
98
- children: [
99
- /*#__PURE__*/ jsx("div", {
100
- className: "flex flex-col",
101
- children: data.lineItems.map((line)=>{
102
- if (!line) return null;
103
- return /*#__PURE__*/ jsx(CartLineProvider, {
104
- line: line,
105
- children: /*#__PURE__*/ jsx(CartLineItem, {})
106
- }, line.id);
107
- })
108
- }),
109
- /*#__PURE__*/ jsx(CartOrderNote, {
110
- placeholder: "Leave your order note here...",
111
- triggerUpdate: "blur"
112
- })
113
- ]
114
- })
115
- }),
116
- /*#__PURE__*/ jsx(CartDiscountCode, {}),
117
- !!data && !!data.lineItems.length && /*#__PURE__*/ jsx(CartFooter, {
118
- openMode: setting?.openMode,
119
- checkoutUrl: data.checkoutUrl,
120
- price: data?.totalPrice,
121
- currencyCode: data?.currency.code
122
- })
123
- ]
124
- })
125
- })
126
- ]
127
- })
128
- });
26
+ return (jsx(Transition, { in: isCartOpen, timeout: duration, nodeRef: nodeRef, children: (state) => (jsxs("div", { ref: nodeRef, className: cls('fixed inset-0 z-90', className, {
27
+ invisible: !isCartOpen,
28
+ visible: isCartOpen,
29
+ }), style: {
30
+ ...style,
31
+ ...defaultStyle,
32
+ ...transitionStyles[state],
33
+ }, children: [jsx("div", { "aria-hidden": true, onClick: () => closeCart(), className: "fixed inset-0 z-80 bg-slate-600/40" }), jsx("div", { 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", children: loading ? (jsx("div", { className: "w-full pt-10 text-center", children: "Loading..." })) : error ? (jsxs("div", { className: "w-full pt-10 text-center text-g-error", children: ["Error: ", error?.[0]?.message] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "flex items-center justify-between border-b border-b-g-line-3 px-6 py-3", children: [jsx("span", { className: "font-g-heading text-xl font-semibold", children: setting?.title }), jsx("button", { onClick: closeCart, title: "Close cart drawer", children: jsx("svg", { className: "w-5", fill: "currentColor", 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" }) }) })] }), jsx("div", { 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", children: !data || !data.lineItems.length ? (jsx("div", { className: "w-full pt-10 text-center", children: setting?.emptyLabel })) : (jsxs(Fragment, { children: [jsx("div", { className: "flex flex-col", children: data.lineItems.map((line) => {
34
+ if (!line)
35
+ return null;
36
+ return (jsx(CartLineProvider, { line: line, children: jsx(CartLineItem, {}) }, line.id));
37
+ }) }), jsx(CartOrderNote, { placeholder: "Leave your order note here...", triggerUpdate: "blur" })] })) }), jsx(CartDiscountCode, {}), !!data && !!data.lineItems.length && (jsx(CartFooter, { openMode: setting?.openMode, checkoutUrl: data.checkoutUrl, price: data?.totalPrice, currencyCode: data?.currency.code }))] })) })] })) }));
129
38
  };
130
39
  CartDrawer.defaultProps = {
131
40
  setting: {
132
41
  title: 'Your Cart',
133
42
  emptyLabel: 'Your cart is empty',
134
- openMode: 'page'
135
- }
43
+ openMode: 'page',
44
+ },
136
45
  };
137
46
 
138
47
  export { CartDrawer as default };
package/dist/esm/components/CartFooter.js CHANGED
@@ -2,64 +2,41 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { useCheckoutUrl, useMoney, composeRadius } from '@gem-sdk/core';
3
3
  import { useRef } from 'react';
4
4
 
5
- const CartFooter = ({ checkoutUrl , price , openMode })=>{
5
+ const CartFooter = ({ checkoutUrl, price, openMode }) => {
6
6
  const urlCheckout = useCheckoutUrl(checkoutUrl);
7
7
  const checkoutPopup = useRef(null);
8
8
  const money = useMoney(price ?? 0);
9
- const openCheckout = (w, h)=>{
9
+ const openCheckout = (w, h) => {
10
10
  if (openMode === 'popup') {
11
11
  const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
12
12
  const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
13
- const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
14
- const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
13
+ const width = window.innerWidth
14
+ ? window.innerWidth
15
+ : document.documentElement.clientWidth
16
+ ? document.documentElement.clientWidth
17
+ : screen.width;
18
+ const height = window.innerHeight
19
+ ? window.innerHeight
20
+ : document.documentElement.clientHeight
21
+ ? document.documentElement.clientHeight
22
+ : screen.height;
15
23
  const systemZoom = width / window.screen.availWidth;
16
24
  const left = (width - w) / 2 / systemZoom + dualScreenLeft;
17
25
  const top = (height - h) / 2 / systemZoom + dualScreenTop;
18
26
  checkoutPopup.current = window.open(urlCheckout, 'checkout', `scrollbars=yes, width=${w / systemZoom}, height=${h / systemZoom}, top=${top}, left=${left}`);
19
27
  checkoutPopup.current?.focus();
20
- } else {
28
+ }
29
+ else {
21
30
  window.open(urlCheckout);
22
31
  }
23
32
  };
24
- return /*#__PURE__*/ jsxs("div", {
25
- className: "flex flex-col gap-4 border-t border-t-g-line-3 bg-g-bg-2 px-6 pb-8 pt-4",
26
- children: [
27
- /*#__PURE__*/ jsxs("div", {
28
- className: "g-paragraph-1 flex justify-between font-semibold",
29
- children: [
30
- /*#__PURE__*/ jsx("span", {
31
- children: "Subtotal:"
32
- }),
33
- /*#__PURE__*/ jsx("span", {
34
- "aria-label": "Total price",
35
- children: money.localizedString
36
- })
37
- ]
38
- }),
39
- /*#__PURE__*/ jsxs("div", {
40
- "aria-label": "Checkout",
41
- role: "button",
42
- "aria-hidden": "true",
43
- className: "g-paragraph-1 flex justify-between bg-g-brand px-4 py-3 font-semibold text-g-text-3",
44
- onClick: ()=>openCheckout(600, 600),
45
- style: {
33
+ return (jsxs("div", { className: "flex flex-col gap-4 border-t border-t-g-line-3 bg-g-bg-2 px-6 pb-8 pt-4", children: [jsxs("div", { className: "g-paragraph-1 flex justify-between font-semibold", children: [jsx("span", { children: "Subtotal:" }), jsx("span", { "aria-label": "Total price", children: money.localizedString })] }), jsxs("div", { "aria-label": "Checkout", role: "button", "aria-hidden": "true", className: "g-paragraph-1 flex justify-between bg-g-brand px-4 py-3 font-semibold text-g-text-3", onClick: () => openCheckout(600, 600), style: {
46
34
  ...composeRadius({
47
35
  normal: {
48
- radiusType: 'small'
49
- }
50
- })
51
- },
52
- children: [
53
- /*#__PURE__*/ jsx("span", {
54
- children: money.localizedString
36
+ radiusType: 'small',
37
+ },
55
38
  }),
56
- /*#__PURE__*/ jsx("span", {
57
- children: "Checkout"
58
- })
59
- ]
60
- })
61
- ]
62
- });
39
+ }, children: [jsx("span", { children: money.localizedString }), jsx("span", { children: "Checkout" })] })] }));
63
40
  };
64
41
 
65
42
  export { CartFooter as default };
package/dist/esm/components/CartLineItem.js CHANGED
@@ -5,89 +5,16 @@ import CartLineItemQuantity from './CartLineItemQuantity.js';
5
5
  import Trash from './icons/Trash.js';
6
6
  import LoadingIcon from './LoadingIcon.js';
7
7
 
8
- const CartLineItem = ()=>{
8
+ const CartLineItem = () => {
9
9
  const line = useCartLine();
10
- const { cartId } = useCartId();
11
- const { isMutating: loading , trigger: removeCartLine } = useRemoveCartItem();
10
+ const { cartId } = useCartId();
11
+ const { isMutating: loading, trigger: removeCartLine } = useRemoveCartItem();
12
12
  const money = useMoney(line.variant?.price ? line.variant?.price : 0);
13
13
  const compareAtPrice = useMoney(line.variant?.listPrice ? line.variant?.listPrice : 0);
14
- return /*#__PURE__*/ jsxs("div", {
15
- className: "flex items-center gap-4 border-b border-b-g-line-2 py-4 last:border-b-transparent",
16
- children: [
17
- /*#__PURE__*/ jsx("div", {
18
- className: "aspect-square w-16",
19
- children: line.variant?.image?.url && /*#__PURE__*/ jsx("img", {
20
- className: "h-full w-full object-cover",
21
- src: line.variant.image.url,
22
- alt: line.variant?.image?.altText ?? ''
23
- })
24
- }),
25
- /*#__PURE__*/ jsxs("div", {
26
- className: "flex-1",
27
- children: [
28
- /*#__PURE__*/ jsxs("p", {
29
- className: "line-clamp-2",
30
- children: [
31
- line.productTitle,
32
- " ",
33
- line.variant.name !== 'Default Title' && ` - ${line.variant.name}`
34
- ]
35
- }),
36
- /*#__PURE__*/ jsxs("div", {
37
- className: "flex flex-col gap-1 text-sm",
38
- children: [
39
- /*#__PURE__*/ jsxs("div", {
40
- className: "flex gap-2",
41
- children: [
42
- /*#__PURE__*/ jsx("span", {
43
- className: "font-semibold",
44
- children: money.localizedString
45
- }),
46
- line.variant?.listPrice > 0 && /*#__PURE__*/ jsx("span", {
47
- className: "text-[#B4B4B4] line-through",
48
- children: compareAtPrice.localizedString
49
- })
50
- ]
51
- }),
52
- line.attributes?.map((attribute)=>/*#__PURE__*/ jsxs("div", {
53
- children: [
54
- attribute.key,
55
- ": ",
56
- attribute.value
57
- ]
58
- }, attribute.key))
59
- ]
60
- }),
61
- /*#__PURE__*/ jsxs("div", {
62
- className: "flex items-center justify-between",
63
- children: [
64
- /*#__PURE__*/ jsx(CartLineItemQuantity, {
65
- size: "medium"
66
- }),
67
- /*#__PURE__*/ jsx("button", {
68
- onClick: ()=>{
14
+ return (jsxs("div", { className: "flex items-center gap-4 border-b border-b-g-line-2 py-4 last:border-b-transparent", children: [jsx("div", { className: "aspect-square w-16", children: line.variant?.image?.url && (jsx("img", { className: "h-full w-full object-cover", src: line.variant.image.url, alt: line.variant?.image?.altText ?? '' })) }), jsxs("div", { className: "flex-1", children: [jsxs("p", { className: "line-clamp-2", children: [line.productTitle, " ", line.variant.name !== 'Default Title' && ` - ${line.variant.name}`] }), jsxs("div", { className: "flex flex-col gap-1 text-sm", children: [jsxs("div", { className: "flex gap-2", children: [jsx("span", { className: "font-semibold", children: money.localizedString }), line.variant?.listPrice > 0 && (jsx("span", { className: "text-[#B4B4B4] line-through", children: compareAtPrice.localizedString }))] }), line.attributes?.map((attribute) => (jsxs("div", { children: [attribute.key, ": ", attribute.value] }, attribute.key)))] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx(CartLineItemQuantity, { size: "medium" }), jsx("button", { onClick: () => {
69
15
  openConfirm({
70
- title: /*#__PURE__*/ jsxs("div", {
71
- className: "flex w-full flex-col items-center gap-4",
72
- children: [
73
- /*#__PURE__*/ jsx(Trash, {}),
74
- /*#__PURE__*/ jsx("p", {
75
- className: "font-g-body text-xl font-semibold",
76
- children: "Are you sure ?"
77
- })
78
- ]
79
- }),
80
- content: /*#__PURE__*/ jsxs("div", {
81
- className: "text-center",
82
- children: [
83
- /*#__PURE__*/ jsx("p", {
84
- children: "Do you really want to delete these items?"
85
- }),
86
- /*#__PURE__*/ jsx("p", {
87
- children: "This process cannot be undone."
88
- })
89
- ]
90
- }),
16
+ 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 ?" })] })),
17
+ content: (jsxs("div", { className: "text-center", children: [jsx("p", { children: "Do you really want to delete these items?" }), jsx("p", { children: "This process cannot be undone." })] })),
91
18
  className: 'w-full max-w-[572px] gap-4 rounded',
92
19
  buttons: [
93
20
  {
@@ -95,74 +22,49 @@ const CartLineItem = ()=>{
95
22
  className: 'w-[130px]',
96
23
  styles: {
97
24
  backgroundColor: {
98
- normal: 'bg-1'
25
+ normal: 'bg-1',
99
26
  },
100
27
  roundedBtn: {
101
28
  normal: {
102
- radiusType: 'small'
103
- }
29
+ radiusType: 'small',
30
+ },
104
31
  },
105
32
  btnSpacing: {
106
- type: 'small'
107
- }
108
- }
33
+ type: 'small',
34
+ },
35
+ },
109
36
  },
110
37
  {
111
38
  label: 'Delete',
112
39
  className: 'w-[130px]',
113
40
  styles: {
114
41
  textColor: {
115
- normal: 'text-3'
42
+ normal: 'text-3',
116
43
  },
117
44
  backgroundColor: {
118
- normal: 'error'
45
+ normal: 'error',
119
46
  },
120
47
  roundedBtn: {
121
48
  normal: {
122
- radiusType: 'small'
123
- }
49
+ radiusType: 'small',
50
+ },
124
51
  },
125
52
  btnSpacing: {
126
- type: 'small'
127
- }
53
+ type: 'small',
54
+ },
128
55
  },
129
- onClick: ()=>{
56
+ onClick: () => {
130
57
  if (cartId && line.id) {
131
58
  removeCartLine({
132
59
  cartId,
133
- lineId: line.id
60
+ lineId: line.id,
134
61
  });
135
62
  }
136
- }
137
- }
138
- ]
63
+ },
64
+ },
65
+ ],
139
66
  });
140
- },
141
- "aria-label": "Remove item from cart",
142
- title: "Remove item from cart",
143
- type: "button",
144
- children: loading ? /*#__PURE__*/ jsx(LoadingIcon, {
145
- className: "text-g-brand"
146
- }) : /*#__PURE__*/ jsx("svg", {
147
- xmlns: "http://www.w3.org/2000/svg",
148
- className: "w-4 text-gray-400",
149
- fill: "none",
150
- viewBox: "0 0 24 24",
151
- stroke: "currentColor",
152
- strokeWidth: 2,
153
- children: /*#__PURE__*/ jsx("path", {
154
- strokeLinecap: "round",
155
- strokeLinejoin: "round",
156
- 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"
157
- })
158
- })
159
- })
160
- ]
161
- })
162
- ]
163
- })
164
- ]
165
- });
67
+ }, "aria-label": "Remove item from cart", title: "Remove item from cart", type: "button", children: loading ? (jsx(LoadingIcon, { className: "text-g-brand" })) : (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: 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" }) })) })] })] })] }));
166
68
  };
167
69
 
168
70
  export { CartLineItem as default };
package/dist/esm/components/CartLineItemQuantity.js CHANGED
@@ -2,52 +2,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { useCartLine, cls } from '@gem-sdk/core';
3
3
  import CartLineQuantityAdjustButton from './CartLineQuantityAdjustButton.js';
4
4
 
5
- const CartLineItemQuantity = ({ size })=>{
5
+ const CartLineItemQuantity = ({ size }) => {
6
6
  const line = useCartLine();
7
- return /*#__PURE__*/ jsxs("div", {
8
- className: cls('mt-2 inline-flex items-center overflow-auto rounded border border-g-line-3 text-g-text-1', {
7
+ return (jsxs("div", { className: cls('mt-2 inline-flex items-center overflow-auto rounded border border-g-line-3 text-g-text-1', {
9
8
  'h-12': size === 'large',
10
9
  'h-10': size === 'medium',
11
- 'h-8': size === 'small'
12
- }),
13
- children: [
14
- /*#__PURE__*/ jsx(CartLineQuantityAdjustButton, {
15
- adjust: "decrease",
16
- "aria-label": "Decrease quantity",
17
- className: "flex aspect-square h-full items-center justify-center",
18
- children: /*#__PURE__*/ jsx("svg", {
19
- className: "h-4",
20
- fill: "currentColor",
21
- viewBox: "0 0 24 24",
22
- xmlns: "http://www.w3.org/2000/svg",
23
- children: /*#__PURE__*/ jsx("path", {
24
- d: "M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z"
25
- })
26
- })
27
- }),
28
- /*#__PURE__*/ jsx("div", {
29
- 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",
30
- children: line.quantity
31
- }),
32
- /*#__PURE__*/ jsx(CartLineQuantityAdjustButton, {
33
- adjust: "increase",
34
- "aria-label": "Increase quantity",
35
- className: "flex aspect-square h-full items-center justify-center",
36
- children: /*#__PURE__*/ jsx("svg", {
37
- className: "h-4",
38
- fill: "currentColor",
39
- viewBox: "0 0 24 24",
40
- xmlns: "http://www.w3.org/2000/svg",
41
- children: /*#__PURE__*/ jsx("path", {
42
- 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"
43
- })
44
- })
45
- })
46
- ]
47
- });
10
+ 'h-8': size === 'small',
11
+ }), children: [jsx(CartLineQuantityAdjustButton, { adjust: "decrease", "aria-label": "Decrease quantity", className: "flex\taspect-square h-full items-center justify-center", children: jsx("svg", { className: "h-4", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }) }), 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 }), jsx(CartLineQuantityAdjustButton, { adjust: "increase", "aria-label": "Increase quantity", className: "flex aspect-square h-full items-center justify-center", children: jsx("svg", { className: "h-4", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }) })] }));
48
12
  };
49
13
  CartLineItemQuantity.defaultProps = {
50
- size: 'medium'
14
+ size: 'medium',
51
15
  };
52
16
 
53
17
  export { CartLineItemQuantity as default };