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