@gem-sdk/plugin-cart-drawer 1.14.0-dev.284 → 1.22.0

package/dist/esm/components/CartOrderNote.js

@@ -1 +1,68 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useCartData as t,useCartId as o,useCartNoteUpdate as l}from"@gem-sdk/core";import{useRef as n,useCallback as a}from"react";let CartOrderNote=({triggerUpdate:u,debounce:c,placeholder:d})=>{let i=n(null),m=n(null),s=n(new AbortController),{data:b}=t(),{cartId:f}=o(),{trigger:p}=l(),N=a(e=>{f&&b?.note!==e&&p({cartId:f,note:e})},[b?.note,f,p]),g=e=>{s.current.signal.aborted&&(s.current=new AbortController),N(e.target.value)},x=()=>{m.current&&(s.current.signal.aborted||s.current.abort(),clearTimeout(m.current)),m.current=setTimeout(()=>{s.current=new AbortController,N(i.current?.value??"")},c??1e3)},C="blur"===u?{onBlur:g}:{onChange:x};return e("div",{className:"flex flex-col",children:[r("div",{className:"mb-4 border-b border-b-[#F1F3F4] pb-3",children:r("span",{className:"font-semibold text-[#424242]",children:"Order Note"})}),r("textarea",{defaultValue:b?.note,placeholder:d,ref:i,className:"w-full rounded border p-4 outline-none",...C})]})};export{CartOrderNote as default};
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCartData, useCartId, useCartNoteUpdate } from '@gem-sdk/core';
+import { useRef, useCallback } from 'react';
+
+const CartOrderNote = ({ triggerUpdate, debounce, placeholder })=>{
+    const textRef = useRef(null);
+    const timeout = useRef(null);
+    const abortControllerRef = useRef(new AbortController());
+    const { data: cart } = useCartData();
+    const { cartId } = useCartId();
+    const { trigger: updateCartNote } = useCartNoteUpdate();
+    const updateNote = useCallback((note)=>{
+        if (cartId && cart?.note !== note) {
+            updateCartNote({
+                cartId,
+                note
+            });
+        }
+    }, [
+        cart?.note,
+        cartId,
+        updateCartNote
+    ]);
+    const onBlur = (e)=>{
+        if (abortControllerRef.current.signal.aborted) {
+            abortControllerRef.current = new AbortController();
+        }
+        updateNote(e.target.value);
+    };
+    const onChange = ()=>{
+        if (timeout.current) {
+            if (!abortControllerRef.current.signal.aborted) {
+                abortControllerRef.current.abort();
+            }
+            clearTimeout(timeout.current);
+        }
+        timeout.current = setTimeout(()=>{
+            abortControllerRef.current = new AbortController();
+            updateNote(textRef.current?.value ?? '');
+        }, debounce ?? 1000);
+    };
+    const inputProps = triggerUpdate === 'blur' ? {
+        onBlur
+    } : {
+        onChange
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "mb-4 border-b border-b-[#F1F3F4] pb-3",
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "font-semibold text-[#424242]",
+                    children: "Order Note"
+                })
+            }),
+            /*#__PURE__*/ jsx("textarea", {
+                defaultValue: cart?.note,
+                placeholder: placeholder,
+                ref: textRef,
+                className: "w-full rounded border p-4 outline-none",
+                ...inputProps
+            })
+        ]
+    });
+};
+
+export { CartOrderNote as default };

package/dist/esm/components/DiscountCodeItem.js

@@ -1 +1,118 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import{useCartId as t,useCartDiscountCodesUpdate as o,useCartData as a,isDefined as r,cls as s}from"@gem-sdk/core";import{openConfirm as n}from"@gem-sdk/components";import{useMemo as c,useCallback as i}from"react";import d from"./icons/Trash.js";import m from"./LoadingIcon.js";let DiscountCodeItem=({item:p})=>{let{cartId:u}=t(),{trigger:f,isMutating:g}=o(),{data:x}=a(),b=c(()=>x?.discounts?.map(e=>e.code).filter(r)??[],[x?.discounts]),h=i(t=>{n({title:e("div",{className:"flex w-full flex-col items-center gap-4",children:[l(d,{}),l("p",{className:"font-g-body text-xl font-semibold",children:"Are you sure ?"})]}),content:l("div",{className:"text-center",children:l("p",{children:"Do you really want to delete this code?"})}),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:()=>{u&&f({cartId:u,discountCodes:b.filter(e=>e!==t)})}}]})},[u,f,b]);return e("div",{className:"flex h-8 items-center gap-2 rounded-sm border pl-2",children:[l("span",{className:s("flex-1",{"text-g-error line-through":!p.applicable,"text-g-success":p.applicable}),children:p.code}),l("button",{disabled:g,onClick:()=>h(p.code),className:"flex aspect-square h-full items-center justify-center",children:g?l(m,{className:"text-g-brand"}):l("svg",{className:"w-4",fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",fill:"currentColor"})})})]},p.code)};export{DiscountCodeItem as default};
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCartId, useCartDiscountCodesUpdate, useCartData, isDefined, cls } from '@gem-sdk/core';
+import { openConfirm } from '@gem-sdk/components';
+import { useMemo, useCallback } from 'react';
+import Trash from './icons/Trash.js';
+import LoadingIcon from './LoadingIcon.js';
+
+const DiscountCodeItem = ({ item })=>{
+    const { cartId } = useCartId();
+    const { trigger: updateCartDiscountCode, isMutating } = useCartDiscountCodesUpdate();
+    const { data: cart } = useCartData();
+    const currentCode = useMemo(()=>cart?.discounts?.map((v)=>v.code).filter(isDefined) ?? [], [
+        cart?.discounts
+    ]);
+    const removeCode = useCallback((code)=>{
+        openConfirm({
+            title: /*#__PURE__*/ jsxs("div", {
+                className: "flex w-full flex-col items-center gap-4",
+                children: [
+                    /*#__PURE__*/ jsx(Trash, {}),
+                    /*#__PURE__*/ jsx("p", {
+                        className: "font-g-body text-xl font-semibold",
+                        children: "Are you sure ?"
+                    })
+                ]
+            }),
+            content: /*#__PURE__*/ jsx("div", {
+                className: "text-center",
+                children: /*#__PURE__*/ jsx("p", {
+                    children: "Do you really want to delete this code?"
+                })
+            }),
+            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: ()=>{
+                        if (cartId) {
+                            updateCartDiscountCode({
+                                cartId,
+                                discountCodes: currentCode.filter((v)=>v !== code)
+                            });
+                        }
+                    }
+                }
+            ]
+        });
+    }, [
+        cartId,
+        updateCartDiscountCode,
+        currentCode
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex h-8 items-center gap-2 rounded-sm border pl-2",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: cls('flex-1', {
+                    'text-g-error line-through': !item.applicable,
+                    'text-g-success': item.applicable
+                }),
+                children: item.code
+            }),
+            /*#__PURE__*/ jsx("button", {
+                disabled: isMutating,
+                onClick: ()=>removeCode(item.code),
+                className: "flex aspect-square h-full items-center justify-center",
+                children: isMutating ? /*#__PURE__*/ jsx(LoadingIcon, {
+                    className: "text-g-brand"
+                }) : /*#__PURE__*/ jsx("svg", {
+                    className: "w-4",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",
+                        fill: "currentColor"
+                    })
+                })
+            })
+        ]
+    }, item.code);
+};
+
+export { DiscountCodeItem as default };

package/dist/esm/components/LoadingIcon.js

@@ -1 +1,26 @@
-import{jsxs as o,jsx as r}from"react/jsx-runtime";import{cls as e}from"@gem-sdk/core";let LoadingIcon=({className:t})=>o("svg",{className:e("w-4 animate-spin",t),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[r("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),r("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]});export{LoadingIcon as default};
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cls } from '@gem-sdk/core';
+
+const LoadingIcon = ({ className })=>/*#__PURE__*/ jsxs("svg", {
+        className: cls('w-4 animate-spin', className),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        children: [
+            /*#__PURE__*/ jsx("circle", {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            })
+        ]
+    });
+
+export { LoadingIcon as default };

package/dist/esm/components/icons/Trash.js

@@ -1 +1,24 @@
-import{jsxs as C,jsx as e}from"react/jsx-runtime";let Trash=()=>C("svg",{className:"text-g-warning",width:"58",height:"66",viewBox:"0 0 58 66",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("path",{d:"M18.0625 24.0625C18.6427 24.0625 19.1991 24.293 19.6093 24.7032C20.0195 25.1134 20.25 25.6698 20.25 26.25V52.5C20.25 53.0802 20.0195 53.6366 19.6093 54.0468C19.1991 54.457 18.6427 54.6875 18.0625 54.6875C17.4823 54.6875 16.9259 54.457 16.5157 54.0468C16.1055 53.6366 15.875 53.0802 15.875 52.5V26.25C15.875 25.6698 16.1055 25.1134 16.5157 24.7032C16.9259 24.293 17.4823 24.0625 18.0625 24.0625ZM29 24.0625C29.5802 24.0625 30.1366 24.293 30.5468 24.7032C30.957 25.1134 31.1875 25.6698 31.1875 26.25V52.5C31.1875 53.0802 30.957 53.6366 30.5468 54.0468C30.1366 54.457 29.5802 54.6875 29 54.6875C28.4198 54.6875 27.8634 54.457 27.4532 54.0468C27.043 53.6366 26.8125 53.0802 26.8125 52.5V26.25C26.8125 25.6698 27.043 25.1134 27.4532 24.7032C27.8634 24.293 28.4198 24.0625 29 24.0625ZM42.125 26.25C42.125 25.6698 41.8945 25.1134 41.4843 24.7032C41.0741 24.293 40.5177 24.0625 39.9375 24.0625C39.3573 24.0625 38.8009 24.293 38.3907 24.7032C37.9805 25.1134 37.75 25.6698 37.75 26.25V52.5C37.75 53.0802 37.9805 53.6366 38.3907 54.0468C38.8009 54.457 39.3573 54.6875 39.9375 54.6875C40.5177 54.6875 41.0741 54.457 41.4843 54.0468C41.8945 53.6366 42.125 53.0802 42.125 52.5V26.25Z",fill:"currentColor"}),e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M57.4375 13.125C57.4375 14.2853 56.9766 15.3981 56.1561 16.2186C55.3356 17.0391 54.2228 17.5 53.0625 17.5H50.875V56.875C50.875 59.1956 49.9531 61.4212 48.3122 63.0622C46.6712 64.7031 44.4456 65.625 42.125 65.625H15.875C13.5544 65.625 11.3288 64.7031 9.68782 63.0622C8.04687 61.4212 7.125 59.1956 7.125 56.875V17.5H4.9375C3.77718 17.5 2.66438 17.0391 1.84391 16.2186C1.02344 15.3981 0.5625 14.2853 0.5625 13.125V8.75C0.5625 7.58968 1.02344 6.47688 1.84391 5.65641C2.66438 4.83594 3.77718 4.375 4.9375 4.375H20.25C20.25 3.21468 20.7109 2.10188 21.5314 1.28141C22.3519 0.460936 23.4647 0 24.625 0H33.375C34.5353 0 35.6481 0.460936 36.4686 1.28141C37.2891 2.10188 37.75 3.21468 37.75 4.375H53.0625C54.2228 4.375 55.3356 4.83594 56.1561 5.65641C56.9766 6.47688 57.4375 7.58968 57.4375 8.75V13.125ZM12.0163 17.5L11.5 17.7581V56.875C11.5 58.0353 11.9609 59.1481 12.7814 59.9686C13.6019 60.7891 14.7147 61.25 15.875 61.25H42.125C43.2853 61.25 44.3981 60.7891 45.2186 59.9686C46.0391 59.1481 46.5 58.0353 46.5 56.875V17.7581L45.9837 17.5H12.0163ZM4.9375 13.125V8.75H53.0625V13.125H4.9375Z",fill:"currentColor"})]});export{Trash as default};
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Trash = ()=>/*#__PURE__*/ jsxs("svg", {
+        className: "text-g-warning",
+        width: "58",
+        height: "66",
+        viewBox: "0 0 58 66",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M18.0625 24.0625C18.6427 24.0625 19.1991 24.293 19.6093 24.7032C20.0195 25.1134 20.25 25.6698 20.25 26.25V52.5C20.25 53.0802 20.0195 53.6366 19.6093 54.0468C19.1991 54.457 18.6427 54.6875 18.0625 54.6875C17.4823 54.6875 16.9259 54.457 16.5157 54.0468C16.1055 53.6366 15.875 53.0802 15.875 52.5V26.25C15.875 25.6698 16.1055 25.1134 16.5157 24.7032C16.9259 24.293 17.4823 24.0625 18.0625 24.0625ZM29 24.0625C29.5802 24.0625 30.1366 24.293 30.5468 24.7032C30.957 25.1134 31.1875 25.6698 31.1875 26.25V52.5C31.1875 53.0802 30.957 53.6366 30.5468 54.0468C30.1366 54.457 29.5802 54.6875 29 54.6875C28.4198 54.6875 27.8634 54.457 27.4532 54.0468C27.043 53.6366 26.8125 53.0802 26.8125 52.5V26.25C26.8125 25.6698 27.043 25.1134 27.4532 24.7032C27.8634 24.293 28.4198 24.0625 29 24.0625ZM42.125 26.25C42.125 25.6698 41.8945 25.1134 41.4843 24.7032C41.0741 24.293 40.5177 24.0625 39.9375 24.0625C39.3573 24.0625 38.8009 24.293 38.3907 24.7032C37.9805 25.1134 37.75 25.6698 37.75 26.25V52.5C37.75 53.0802 37.9805 53.6366 38.3907 54.0468C38.8009 54.457 39.3573 54.6875 39.9375 54.6875C40.5177 54.6875 41.0741 54.457 41.4843 54.0468C41.8945 53.6366 42.125 53.0802 42.125 52.5V26.25Z",
+                fill: "currentColor"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M57.4375 13.125C57.4375 14.2853 56.9766 15.3981 56.1561 16.2186C55.3356 17.0391 54.2228 17.5 53.0625 17.5H50.875V56.875C50.875 59.1956 49.9531 61.4212 48.3122 63.0622C46.6712 64.7031 44.4456 65.625 42.125 65.625H15.875C13.5544 65.625 11.3288 64.7031 9.68782 63.0622C8.04687 61.4212 7.125 59.1956 7.125 56.875V17.5H4.9375C3.77718 17.5 2.66438 17.0391 1.84391 16.2186C1.02344 15.3981 0.5625 14.2853 0.5625 13.125V8.75C0.5625 7.58968 1.02344 6.47688 1.84391 5.65641C2.66438 4.83594 3.77718 4.375 4.9375 4.375H20.25C20.25 3.21468 20.7109 2.10188 21.5314 1.28141C22.3519 0.460936 23.4647 0 24.625 0H33.375C34.5353 0 35.6481 0.460936 36.4686 1.28141C37.2891 2.10188 37.75 3.21468 37.75 4.375H53.0625C54.2228 4.375 55.3356 4.83594 56.1561 5.65641C56.9766 6.47688 57.4375 7.58968 57.4375 8.75V13.125ZM12.0163 17.5L11.5 17.7581V56.875C11.5 58.0353 11.9609 59.1481 12.7814 59.9686C13.6019 60.7891 14.7147 61.25 15.875 61.25H42.125C43.2853 61.25 44.3981 60.7891 45.2186 59.9686C46.0391 59.1481 46.5 58.0353 46.5 56.875V17.7581L45.9837 17.5H12.0163ZM4.9375 13.125V8.75H53.0625V13.125H4.9375Z",
+                fill: "currentColor"
+            })
+        ]
+    });
+
+export { Trash as default };

package/dist/esm/index.js

@@ -1 +1,5 @@
-import r from"./components/CartDrawer.js";export{r as default};
+import CartDrawer from './components/CartDrawer.js';
+
+
+
+export { CartDrawer as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/plugin-cart-drawer",
-  "version": "1.14.0-dev.284",
+  "version": "1.22.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -19,9 +19,9 @@
     "test": "jest -c ./../../helpers/jest.config.ts"
   },
   "devDependencies": {
-    "@gem-sdk/components": "1.14.0-dev.284",
-    "@gem-sdk/core": "1.14.0-dev.284",
-    "@gem-sdk/styles": "1.14.0-dev.284"
+    "@gem-sdk/components": "1.22.0",
+    "@gem-sdk/core": "1.22.0",
+    "@gem-sdk/styles": "1.22.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",