@gem-sdk/plugin-cart-drawer 1.11.1 → 1.14.0-dev.619

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 (23) hide show
  1. package/dist/cjs/components/CartDiscountCode.js +1 -96
  2. package/dist/cjs/components/CartDrawer.js +1 -142
  3. package/dist/cjs/components/CartFooter.js +1 -69
  4. package/dist/cjs/components/CartLineItem.js +1 -172
  5. package/dist/cjs/components/CartLineItemQuantity.js +1 -57
  6. package/dist/cjs/components/CartLineQuantityAdjustButton.js +1 -207
  7. package/dist/cjs/components/CartOrderNote.js +1 -72
  8. package/dist/cjs/components/DiscountCodeItem.js +1 -122
  9. package/dist/cjs/components/LoadingIcon.js +1 -30
  10. package/dist/cjs/components/icons/Trash.js +1 -28
  11. package/dist/cjs/index.js +1 -9
  12. package/dist/esm/components/CartDiscountCode.js +1 -92
  13. package/dist/esm/components/CartDrawer.js +1 -138
  14. package/dist/esm/components/CartFooter.js +1 -65
  15. package/dist/esm/components/CartLineItem.js +1 -168
  16. package/dist/esm/components/CartLineItemQuantity.js +1 -53
  17. package/dist/esm/components/CartLineQuantityAdjustButton.js +1 -203
  18. package/dist/esm/components/CartOrderNote.js +1 -68
  19. package/dist/esm/components/DiscountCodeItem.js +1 -118
  20. package/dist/esm/components/LoadingIcon.js +1 -26
  21. package/dist/esm/components/icons/Trash.js +1 -24
  22. package/dist/esm/index.js +1 -5
  23. package/package.json +4 -4
package/dist/cjs/components/CartDiscountCode.js CHANGED
@@ -1,96 +1 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@gem-sdk/core');
7
- var react = require('react');
8
- var DiscountCodeItem = require('./DiscountCodeItem.js');
9
- var LoadingIcon = require('./LoadingIcon.js');
10
-
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 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, {})
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
- });
94
- };
95
-
96
- exports.default = CartDiscountCode;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),react=require("react"),DiscountCodeItem=require("./DiscountCodeItem.js"),LoadingIcon=require("./LoadingIcon.js");const CartDiscountCode=()=>{let e=react.useRef(null),{cartId:s}=core.useCartId(),{trigger:t,isMutating:r}=core.useCartDiscountCodesUpdate({onSuccess:()=>{e.current&&(e.current.value="")}}),{data:a}=core.useCartData(),o=react.useMemo(()=>a?.discounts?.map(e=>e.code).filter(core.isDefined)??[],[a?.discounts]),i=react.useCallback(()=>{s&&e.current?.value&&!o.some(s=>s.toLowerCase()===e.current?.value.trim().toLowerCase())&&t({cartId:s,discountCodes:[e.current.value,...o]})},[s,t,o]);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:{...core.composeRadius({normal:{radiusType:"small"}})},ref:e}),jsxRuntime.jsxs("button",{disabled:r,onClick:i,className:"relative whitespace-nowrap bg-g-brand px-2 text-g-text-3 disabled:opacity-80",style:{...core.composeRadius({normal:{radiusType:"small"}})},children:[jsxRuntime.jsx("div",{className:core.cls("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",{hidden:!r}),children:jsxRuntime.jsx(LoadingIcon.default,{})}),jsxRuntime.jsx("span",{className:core.cls("g-paragraph-1",{invisible:r}),children:"Apply Code"})]})]}),jsxRuntime.jsx("div",{className:"inline-flex flex-wrap gap-2",children:a?.discounts?.map(e=>jsxRuntime.jsx(DiscountCodeItem.default,{item:e},e.code))})]})};exports.default=CartDiscountCode;
package/dist/cjs/components/CartDrawer.js CHANGED
@@ -1,142 +1 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@gem-sdk/core');
7
- var react = require('react');
8
- var reactTransitionGroup = require('react-transition-group');
9
- var CartDiscountCode = require('./CartDiscountCode.js');
10
- var CartFooter = require('./CartFooter.js');
11
- var CartLineItem = require('./CartLineItem.js');
12
- var CartOrderNote = require('./CartOrderNote.js');
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
- 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
- }
140
- };
141
-
142
- exports.default = CartDrawer;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),react=require("react"),reactTransitionGroup=require("react-transition-group"),CartDiscountCode=require("./CartDiscountCode.js"),CartFooter=require("./CartFooter.js"),CartLineItem=require("./CartLineItem.js"),CartOrderNote=require("./CartOrderNote.js");const duration=300,defaultStyle={transition:"opacity 300ms ease-in-out",opacity:0},transitionStyles={entering:{opacity:1},entered:{opacity:1},exiting:{opacity:0},exited:{opacity:0},unmounted:{opacity:0}},CartDrawer=({className:e,style:t,setting:r})=>{let{data:i,isLoading:s,error:a}=core.useCartData(),{closeCart:l,isCartOpen:n}=core.useCartUI(),o=react.useRef(null);return jsxRuntime.jsx(reactTransitionGroup.Transition,{in:n,timeout:300,nodeRef:o,children:c=>jsxRuntime.jsxs("div",{ref:o,className:core.cls("fixed inset-0 z-90",e,{invisible:!n,visible:n}),style:{...t,...defaultStyle,...transitionStyles[c]},children:[jsxRuntime.jsx("div",{"aria-hidden":!0,onClick:()=>l(),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:s?jsxRuntime.jsx("div",{className:"w-full pt-10 text-center",children:"Loading..."}):a?jsxRuntime.jsxs("div",{className:"w-full pt-10 text-center text-g-error",children:["Error: ",a?.[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:r?.title}),jsxRuntime.jsx("button",{onClick:l,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:i&&i.lineItems.length?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"flex flex-col",children:i.lineItems.map(e=>e?jsxRuntime.jsx(core.CartLineProvider,{line:e,children:jsxRuntime.jsx(CartLineItem.default,{})},e.id):null)}),jsxRuntime.jsx(CartOrderNote.default,{placeholder:"Leave your order note here...",triggerUpdate:"blur"})]}):jsxRuntime.jsx("div",{className:"w-full pt-10 text-center",children:r?.emptyLabel})}),jsxRuntime.jsx(CartDiscountCode.default,{}),!!i&&!!i.lineItems.length&&jsxRuntime.jsx(CartFooter.default,{openMode:r?.openMode,checkoutUrl:i.checkoutUrl,price:i?.totalPrice,currencyCode:i?.currency.code})]})})]})})};CartDrawer.defaultProps={setting:{title:"Your Cart",emptyLabel:"Your cart is empty",openMode:"page"}},exports.default=CartDrawer;
package/dist/cjs/components/CartFooter.js CHANGED
@@ -1,69 +1 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@gem-sdk/core');
7
- var react = require('react');
8
-
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 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: {
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
- });
67
- };
68
-
69
- exports.default = CartFooter;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),react=require("react");const CartFooter=({checkoutUrl:e,price:t,openMode:n})=>{let i=core.useCheckoutUrl(e),r=react.useRef(null),o=core.useMoney(t??0),s=(e,t)=>{if("popup"===n){let n=void 0!==window.screenLeft?window.screenLeft:window.screenX,o=void 0!==window.screenTop?window.screenTop:window.screenY,s=window.innerWidth?window.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,c=window.innerHeight?window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,d=s/window.screen.availWidth,l=(s-e)/2/d+n,a=(c-t)/2/d+o;r.current=window.open(i,"checkout",`scrollbars=yes, width=${e/d}, height=${t/d}, top=${a}, left=${l}`),r.current?.focus()}else window.open(i)};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:o.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:()=>s(600,600),style:{...core.composeRadius({normal:{radiusType:"small"}})},children:[jsxRuntime.jsx("span",{children:o.localizedString}),jsxRuntime.jsx("span",{children:"Checkout"})]})]})};exports.default=CartFooter;
package/dist/cjs/components/CartLineItem.js CHANGED
@@ -1,172 +1 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@gem-sdk/core');
7
- var components = require('@gem-sdk/components');
8
- var CartLineItemQuantity = require('./CartLineItemQuantity.js');
9
- var Trash = require('./icons/Trash.js');
10
- var LoadingIcon = require('./LoadingIcon.js');
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 /*#__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
- });
170
- };
171
-
172
- exports.default = CartLineItem;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),components=require("@gem-sdk/components"),CartLineItemQuantity=require("./CartLineItemQuantity.js"),Trash=require("./icons/Trash.js"),LoadingIcon=require("./LoadingIcon.js");const CartLineItem=()=>{let e=core.useCartLine(),{cartId:t}=core.useCartId(),{isMutating:s,trigger:a}=core.useRemoveCartItem(),n=core.useMoney(e.variant?.price?e.variant?.price:0),i=core.useMoney(e.variant?.listPrice?e.variant?.listPrice:0);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:e.variant?.image?.url&&jsxRuntime.jsx("img",{className:"h-full w-full object-cover",src:e.variant.image.url,alt:e.variant?.image?.altText??""})}),jsxRuntime.jsxs("div",{className:"flex-1",children:[jsxRuntime.jsxs("p",{className:"line-clamp-2",children:[e.productTitle," ","Default Title"!==e.variant.name&&` - ${e.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:n.localizedString}),e.variant?.listPrice>0&&jsxRuntime.jsx("span",{className:"text-[#B4B4B4] line-through",children:i.localizedString})]}),e.attributes?.map(e=>jsxRuntime.jsxs("div",{children:[e.key,": ",e.value]},e.key))]}),jsxRuntime.jsxs("div",{className:"flex items-center justify-between",children:[jsxRuntime.jsx(CartLineItemQuantity.default,{size:"medium"}),jsxRuntime.jsx("button",{onClick:()=>{components.openConfirm({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 ?"})]}),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."})]}),className:"w-full max-w-[572px] gap-4 rounded",buttons:[{label:"Cancel",className:"w-[130px]",styles:{backgroundColor:{normal:"bg-1"},roundedBtn:{normal:{radiusType:"small"}},btnSpacing:{type:"small"}}},{label:"Delete",className:"w-[130px]",styles:{textColor:{normal:"text-3"},backgroundColor:{normal:"error"},roundedBtn:{normal:{radiusType:"small"}},btnSpacing:{type:"small"}},onClick:()=>{t&&e.id&&a({cartId:t,lineId:e.id})}}]})},"aria-label":"Remove item from cart",title:"Remove item from cart",type:"button",children:s?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"})})})]})]})]})};exports.default=CartLineItem;
package/dist/cjs/components/CartLineItemQuantity.js CHANGED
@@ -1,57 +1 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@gem-sdk/core');
7
- var CartLineQuantityAdjustButton = require('./CartLineQuantityAdjustButton.js');
8
-
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'
55
- };
56
-
57
- exports.default = CartLineItemQuantity;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),CartLineQuantityAdjustButton=require("./CartLineQuantityAdjustButton.js");const CartLineItemQuantity=({size:e})=>{let t=core.useCartLine();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",{"h-12":"large"===e,"h-10":"medium"===e,"h-8":"small"===e}),children:[jsxRuntime.jsx(CartLineQuantityAdjustButton.default,{adjust:"decrease","aria-label":"Decrease 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:"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:t.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"})})})]})};CartLineItemQuantity.defaultProps={size:"medium"},exports.default=CartLineItemQuantity;