@gem-sdk/plugin-cart-drawer 1.60.13 → 2.0.0-dev.1082

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.
@@ -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: "gp-flex gp-flex-col gp-gap-2 gp-border-t gp-p-4 ",
42
- children: [
43
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
44
- className: "gp-flex gp-gap-4",
45
- children: [
46
- /*#__PURE__*/ jsxRuntime.jsx("input", {
47
- className: "gp-flex-1 gp-border gp-p-2 gp-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: "gp-relative gp-whitespace-nowrap gp-bg-g-brand gp-px-2 gp-text-g-text-3 disabled:gp-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('gp-absolute gp-left-1/2 gp-top-1/2 -gp-translate-x-1/2 -gp-translate-y-1/2', {
72
- 'gp-hidden': !isMutating
73
- }),
74
- children: /*#__PURE__*/ jsxRuntime.jsx(LoadingIcon.default, {})
75
- }),
76
- /*#__PURE__*/ jsxRuntime.jsx("span", {
77
- className: core.cls('gp-g-paragraph-1', {
78
- invisible: isMutating
79
- }),
80
- children: "Apply Code"
81
- })
82
- ]
83
- })
84
- ]
85
- }),
86
- /*#__PURE__*/ jsxRuntime.jsx("div", {
87
- className: "gp-inline-flex gp-flex-wrap gp-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:"gp-flex gp-flex-col gp-gap-2 gp-border-t gp-p-4 ",children:[jsxRuntime.jsxs("div",{className:"gp-flex gp-gap-4",children:[jsxRuntime.jsx("input",{className:"gp-flex-1 gp-border gp-p-2 gp-outline-none",placeholder:"Discount Code",style:{...core.composeRadius({normal:{radiusType:"small"}})},ref:e}),jsxRuntime.jsxs("button",{disabled:r,onClick:i,className:"gp-relative gp-bg-g-brand gp-px-2 gp-text-g-text-3 disabled:gp-opacity-80",style:{...core.composeRadius({normal:{radiusType:"small"}})},children:[jsxRuntime.jsx("div",{className:core.cls("gp-absolute gp-left-1/2 gp-top-1/2 -gp-translate-x-1/2 -gp-translate-y-1/2",{"gp-hidden":!r}),children:jsxRuntime.jsx(LoadingIcon.default,{})}),jsxRuntime.jsx("span",{className:core.cls("gp-g-paragraph-1",{"gp-invisible":r}),children:"Apply Code"})]})]}),jsxRuntime.jsx("div",{className:"gp-inline-flex gp-flex-wrap gp-gap-2",children:a?.discounts?.map(e=>jsxRuntime.jsx(DiscountCodeItem.default,{item:e},e.code))})]})};exports.default=CartDiscountCode;
@@ -1,144 +1 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var react = require('react');
7
- var reactTransitionGroup = require('react-transition-group');
8
- var components = require('@gem-sdk/components');
9
- var core = require('@gem-sdk/core');
10
- var CartDiscountCode = require('./CartDiscountCode.js');
11
- var CartFooter = require('./CartFooter.js');
12
- var CartLineItem = require('./CartLineItem.js');
13
- var CartOrderNote = require('./CartOrderNote.js');
14
-
15
- const duration = 300;
16
- const defaultStyle = {
17
- transition: `opacity ${duration}ms ease-in-out`,
18
- opacity: 0
19
- };
20
- const transitionStyles = {
21
- entering: {
22
- opacity: 1
23
- },
24
- entered: {
25
- opacity: 1
26
- },
27
- exiting: {
28
- opacity: 0
29
- },
30
- exited: {
31
- opacity: 0
32
- },
33
- unmounted: {
34
- opacity: 0
35
- }
36
- };
37
- const CartDrawer = ({ className, style, setting })=>{
38
- const { data, isLoading: loading, error } = core.useCartData();
39
- const { closeCart, isCartOpen } = core.useCartUI();
40
- const nodeRef = react.useRef(null);
41
- return /*#__PURE__*/ jsxRuntime.jsx(reactTransitionGroup.Transition, {
42
- in: isCartOpen,
43
- timeout: duration,
44
- nodeRef: nodeRef,
45
- children: (state)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
46
- ref: nodeRef,
47
- className: core.cls('gp-fixed gp-inset-0 gp-z-90', className, {
48
- 'gp-invisible': !isCartOpen,
49
- 'gp-visible': isCartOpen
50
- }),
51
- style: {
52
- ...style,
53
- ...defaultStyle,
54
- ...transitionStyles[state],
55
- zIndex: components.ELEMENT_Z_INDEX.CART_DRAWER
56
- },
57
- children: [
58
- /*#__PURE__*/ jsxRuntime.jsx("div", {
59
- "aria-hidden": true,
60
- onClick: ()=>closeCart(),
61
- className: "gp-fixed gp-inset-0 gp-z-80 gp-bg-slate-600/40"
62
- }),
63
- /*#__PURE__*/ jsxRuntime.jsx("div", {
64
- className: "gp-fixed gp-inset-y-0 gp-right-0 gp-z-90 gp-flex gp-w-full gp-max-w-[400px] gp-flex-col gp-bg-white gp-text-g-text-1 gp-shadow-2xl mobile:gp-w-full",
65
- children: loading ? /*#__PURE__*/ jsxRuntime.jsx("div", {
66
- className: "gp-w-full gp-pt-10 gp-text-center",
67
- children: "Loading..."
68
- }) : error ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
69
- className: "gp-w-full gp-pt-10 gp-text-center gp-text-g-error",
70
- children: [
71
- "Error: ",
72
- error?.[0]?.message
73
- ]
74
- }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
75
- children: [
76
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
77
- className: "gp-flex gp-items-center gp-justify-between gp-border-b-g-line-3 gp-px-6 gp-py-3 border-b",
78
- children: [
79
- /*#__PURE__*/ jsxRuntime.jsx("span", {
80
- className: "gp-font-g-heading gp-text-xl gp-font-semibold",
81
- children: setting?.title
82
- }),
83
- /*#__PURE__*/ jsxRuntime.jsx("button", {
84
- onClick: closeCart,
85
- title: "Close cart drawer",
86
- children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
87
- className: "gp-w-5",
88
- fill: "currentColor",
89
- viewBox: "0 0 24 24",
90
- xmlns: "http://www.w3.org/2000/svg",
91
- children: /*#__PURE__*/ jsxRuntime.jsx("path", {
92
- 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"
93
- })
94
- })
95
- })
96
- ]
97
- }),
98
- /*#__PURE__*/ jsxRuntime.jsx("div", {
99
- className: "gp-group gp-h-full gp-overflow-y-auto gp-px-6 gp-pb-4 scrollbar:!gp-h-1.5 scrollbar:!gp-w-1.5 scrollbar:gp-bg-transparent scrollbar-track:!gp-rounded scrollbar-track:!gp-bg-slate-100 scrollbar-thumb:!gp-rounded scrollbar-thumb:!gp-bg-slate-300",
100
- children: !data || !data.lineItems.length ? /*#__PURE__*/ jsxRuntime.jsx("div", {
101
- className: "gp-w-full gp-pt-10 gp-text-center",
102
- children: setting?.emptyLabel
103
- }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
104
- children: [
105
- /*#__PURE__*/ jsxRuntime.jsx("div", {
106
- className: "gp-flex gp-flex-col",
107
- children: data.lineItems.map((line)=>{
108
- if (!line) return null;
109
- return /*#__PURE__*/ jsxRuntime.jsx(core.CartLineProvider, {
110
- line: line,
111
- children: /*#__PURE__*/ jsxRuntime.jsx(CartLineItem.default, {})
112
- }, line.id);
113
- })
114
- }),
115
- /*#__PURE__*/ jsxRuntime.jsx(CartOrderNote.default, {
116
- placeholder: "Leave your order note here...",
117
- triggerUpdate: "blur"
118
- })
119
- ]
120
- })
121
- }),
122
- /*#__PURE__*/ jsxRuntime.jsx(CartDiscountCode.default, {}),
123
- !!data && !!data.lineItems.length && /*#__PURE__*/ jsxRuntime.jsx(CartFooter.default, {
124
- openMode: setting?.openMode,
125
- checkoutUrl: data.checkoutUrl,
126
- price: data?.totalPrice,
127
- currencyCode: data?.currency.code
128
- })
129
- ]
130
- })
131
- })
132
- ]
133
- })
134
- });
135
- };
136
- CartDrawer.defaultProps = {
137
- setting: {
138
- title: 'Your Cart',
139
- emptyLabel: 'Your cart is empty',
140
- openMode: 'page'
141
- }
142
- };
143
-
144
- exports.default = CartDrawer;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),reactTransitionGroup=require("react-transition-group"),components=require("@gem-sdk/components"),core=require("@gem-sdk/core"),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:s,isLoading:i,error:n}=core.useCartData(),{closeCart:a,isCartOpen:l}=core.useCartUI(),o=react.useRef(null);return jsxRuntime.jsx(reactTransitionGroup.Transition,{in:l,timeout:300,nodeRef:o,children:p=>jsxRuntime.jsxs("div",{ref:o,className:core.cls("gp-fixed gp-inset-0 gp-z-90",e,{"gp-invisible":!l,"gp-visible":l}),style:{...t,...defaultStyle,...transitionStyles[p],zIndex:components.ELEMENT_Z_INDEX.CART_DRAWER},children:[jsxRuntime.jsx("div",{"aria-hidden":!0,onClick:()=>a(),className:"gp-fixed gp-inset-0 gp-z-80 gp-bg-slate-600/40"}),jsxRuntime.jsx("div",{className:"gp-fixed gp-inset-y-0 gp-right-0 gp-z-90 gp-flex gp-w-full gp-max-w-[400px] gp-flex-col gp-bg-white gp-text-g-text-1 gp-shadow-2xl mobile:gp-w-full",children:i?jsxRuntime.jsx("div",{className:"gp-w-full gp-pt-10 gp-text-center",children:"Loading..."}):n?jsxRuntime.jsxs("div",{className:"gp-w-full gp-pt-10 gp-text-center gp-text-g-error",children:["Error: ",n?.[0]?.message]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center gp-justify-between gp-border-b-g-line-3 gp-px-6 gp-py-3 border-b",children:[jsxRuntime.jsx("span",{className:"gp-font-g-heading gp-text-xl gp-font-semibold",children:r?.title}),jsxRuntime.jsx("button",{onClick:a,title:"Close cart drawer",children:jsxRuntime.jsx("svg",{className:"gp-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:"gp-group gp-h-full gp-overflow-y-auto gp-px-6 gp-pb-4 scrollbar:!gp-h-1.5 scrollbar:!gp-w-1.5 scrollbar:gp-bg-transparent scrollbar-track:!gp-rounded scrollbar-track:!gp-bg-slate-100 scrollbar-thumb:!gp-rounded scrollbar-thumb:!gp-bg-slate-300",children:s&&s.lineItems.length?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"gp-flex gp-flex-col",children:s.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:"gp-w-full gp-pt-10 gp-text-center",children:r?.emptyLabel})}),jsxRuntime.jsx(CartDiscountCode.default,{}),!!s&&!!s.lineItems.length&&jsxRuntime.jsx(CartFooter.default,{openMode:r?.openMode,checkoutUrl:s.checkoutUrl,price:s?.totalPrice,currencyCode:s?.currency.code})]})})]})})};CartDrawer.defaultProps={setting:{title:"Your Cart",emptyLabel:"Your cart is empty",openMode:"page"}},exports.default=CartDrawer;
@@ -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
- !!urlCheckout && window.open(urlCheckout);
26
- }
27
- };
28
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
29
- className: "gp-flex gp-flex-col gp-gap-4 gp-border-t gp-border-t-g-line-3 gp-bg-g-bg-2 gp-px-6 gp-pb-8 gp-pt-4",
30
- children: [
31
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
32
- className: "gp-g-paragraph-1 gp-flex gp-justify-between gp-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: "gp-g-paragraph-1 gp-flex gp-justify-between gp-bg-g-brand gp-px-4 gp-py-3 gp-font-semibold gp-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,p=(c-t)/2/d+o;r.current=window.open(i,"checkout",`scrollbars=yes, width=${e/d}, height=${t/d}, top=${p}, left=${l}`),r.current?.focus()}else i&&window.open(i)};return jsxRuntime.jsxs("div",{className:"gp-flex gp-flex-col gp-gap-4 gp-border-t gp-border-t-g-line-3 gp-bg-g-bg-2 gp-px-6 gp-pb-8 gp-pt-4",children:[jsxRuntime.jsxs("div",{className:"gp-g-paragraph-1 gp-flex gp-justify-between gp-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:"gp-g-paragraph-1 gp-flex gp-justify-between gp-bg-g-brand gp-px-4 gp-py-3 gp-font-semibold gp-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;
@@ -1,143 +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: "gp-flex gp-items-center gp-gap-4 gp-border-b gp-border-b-g-line-2 gp-py-4 last:gp-border-b-transparent",
20
- children: [
21
- /*#__PURE__*/ jsxRuntime.jsx("div", {
22
- className: "gp-aspect-square gp-w-16",
23
- children: line.variant?.image?.url && /*#__PURE__*/ jsxRuntime.jsx("img", {
24
- className: "gp-h-full gp-w-full gp-object-cover",
25
- src: line.variant.image.url,
26
- alt: line.variant?.image?.altText ?? ''
27
- })
28
- }),
29
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
30
- className: "gp-flex-1",
31
- children: [
32
- /*#__PURE__*/ jsxRuntime.jsxs("p", {
33
- className: "gp-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: "gp-flex gp-flex-col gp-gap-1 gp-text-sm",
42
- children: [
43
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
44
- className: "gp-flex gp-gap-2",
45
- children: [
46
- /*#__PURE__*/ jsxRuntime.jsx("span", {
47
- className: "gp-font-semibold",
48
- children: money.localizedString
49
- }),
50
- line.variant?.listPrice > 0 && /*#__PURE__*/ jsxRuntime.jsx("span", {
51
- className: "gp-text-[#B4B4B4] gp-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: "gp-flex gp-items-center gp-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: "gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",
76
- children: [
77
- /*#__PURE__*/ jsxRuntime.jsx(Trash.default, {}),
78
- /*#__PURE__*/ jsxRuntime.jsx("p", {
79
- className: "gp-font-g-body gp-text-xl gp-font-semibold",
80
- children: "Are you sure ?"
81
- })
82
- ]
83
- }),
84
- content: /*#__PURE__*/ jsxRuntime.jsxs("div", {
85
- className: "gp-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: 'gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded',
96
- buttons: [
97
- {
98
- label: 'Cancel',
99
- className: 'gp-w-[130px] !gp-bg-g-bg-1'
100
- },
101
- {
102
- label: 'Delete',
103
- className: '!gp-bg-g-error !gp-text-g-text-3 !font-g-body gp-w-[130px]',
104
- onClick: ()=>{
105
- if (cartId && line.id) {
106
- removeCartLine({
107
- cartId,
108
- lineId: line.id
109
- });
110
- }
111
- }
112
- }
113
- ]
114
- });
115
- },
116
- "aria-label": "Remove item from cart",
117
- title: "Remove item from cart",
118
- type: "button",
119
- children: loading ? /*#__PURE__*/ jsxRuntime.jsx(LoadingIcon.default, {
120
- className: "gp-text-g-brand"
121
- }) : /*#__PURE__*/ jsxRuntime.jsx("svg", {
122
- xmlns: "http://www.w3.org/2000/svg",
123
- className: "gp-w-4 gp-text-gray-400",
124
- fill: "none",
125
- viewBox: "0 0 24 24",
126
- stroke: "currentColor",
127
- strokeWidth: 2,
128
- children: /*#__PURE__*/ jsxRuntime.jsx("path", {
129
- strokeLinecap: "round",
130
- strokeLinejoin: "round",
131
- 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"
132
- })
133
- })
134
- })
135
- ]
136
- })
137
- ]
138
- })
139
- ]
140
- });
141
- };
142
-
143
- 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:i}=core.useRemoveCartItem(),a=core.useMoney(e.variant?.price?e.variant?.price:0),n=core.useMoney(e.variant?.listPrice?e.variant?.listPrice:0);return jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center gp-gap-4 gp-border-b gp-border-b-g-line-2 gp-py-4 last:gp-border-b-transparent",children:[jsxRuntime.jsx("div",{className:"gp-aspect-square gp-w-16",children:e.variant?.image?.url&&jsxRuntime.jsx("img",{className:"gp-h-full gp-w-full gp-object-cover",src:e.variant.image.url,alt:e.variant?.image?.altText??""})}),jsxRuntime.jsxs("div",{className:"gp-flex-1",children:[jsxRuntime.jsxs("p",{className:"gp-line-clamp-2",children:[e.productTitle," ","Default Title"!==e.variant.name&&` - ${e.variant.name}`]}),jsxRuntime.jsxs("div",{className:"gp-flex gp-flex-col gp-gap-1 gp-text-sm",children:[jsxRuntime.jsxs("div",{className:"gp-flex gp-gap-2",children:[jsxRuntime.jsx("span",{className:"gp-font-semibold",children:a.localizedString}),e.variant?.listPrice>0&&jsxRuntime.jsx("span",{className:"gp-text-[#B4B4B4] gp-line-through",children:n.localizedString})]}),e.attributes?.map(e=>jsxRuntime.jsxs("div",{children:[e.key,": ",e.value]},e.key))]}),jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center gp-justify-between",children:[jsxRuntime.jsx(CartLineItemQuantity.default,{size:"medium"}),jsxRuntime.jsx("button",{onClick:()=>{components.openConfirm({title:jsxRuntime.jsxs("div",{className:"gp-flex gp-w-full gp-flex-col gp-items-center gp-gap-4",children:[jsxRuntime.jsx(Trash.default,{}),jsxRuntime.jsx("p",{className:"gp-font-g-body gp-text-xl gp-font-semibold",children:"Are you sure ?"})]}),content:jsxRuntime.jsxs("div",{className:"gp-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:"gp-w-full gp-max-w-[572px] gp-gap-4 gp-rounded",buttons:[{label:"Cancel",className:"gp-w-[130px] !gp-bg-g-bg-1"},{label:"Delete",className:"!gp-bg-g-error !gp-text-g-text-3 !font-g-body gp-w-[130px]",onClick:()=>{t&&e.id&&i({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:"gp-text-g-brand"}):jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:"gp-w-4 gp-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;
@@ -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('gp-mt-2 gp-inline-flex gp-items-center gp-overflow-auto gp-rounded gp-border gp-border-g-line-3 gp-text-g-text-1', {
13
- 'gp-h-12': size === 'large',
14
- 'gp-h-10': size === 'medium',
15
- 'gp-h-8': size === 'small'
16
- }),
17
- children: [
18
- /*#__PURE__*/ jsxRuntime.jsx(CartLineQuantityAdjustButton.default, {
19
- adjust: "decrease",
20
- "aria-label": "Decrease quantity",
21
- className: "gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",
22
- children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
23
- className: "gp-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: "gp-flex gp-h-full gp-min-w-[50px] gp-select-none gp-items-center gp-justify-center gp-border-x gp-border-g-line-3 gp-px-2 gp-text-center gp-text-base gp-font-semibold",
34
- children: line.quantity
35
- }),
36
- /*#__PURE__*/ jsxRuntime.jsx(CartLineQuantityAdjustButton.default, {
37
- adjust: "increase",
38
- "aria-label": "Increase quantity",
39
- className: "gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",
40
- children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
41
- className: "gp-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("gp-mt-2 gp-inline-flex gp-items-center gp-overflow-auto gp-rounded gp-border gp-border-g-line-3 gp-text-g-text-1",{"gp-h-12":"large"===e,"gp-h-10":"medium"===e,"gp-h-8":"small"===e}),children:[jsxRuntime.jsx(CartLineQuantityAdjustButton.default,{adjust:"decrease","aria-label":"Decrease quantity",className:"gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",children:jsxRuntime.jsx("svg",{className:"gp-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:"gp-flex gp-h-full gp-min-w-[50px] gp-select-none gp-items-center gp-justify-center gp-border-x gp-border-g-line-3 gp-px-2 gp-text-center gp-text-base gp-font-semibold",children:t.quantity}),jsxRuntime.jsx(CartLineQuantityAdjustButton.default,{adjust:"increase","aria-label":"Increase quantity",className:"gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",children:jsxRuntime.jsx("svg",{className:"gp-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;