@gem-sdk/core 2.0.0-dev.896 → 2.0.0

package/dist/cjs/components/ai-generator/AIContentGenerator.js

@@ -1 +1,252 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),AIIcon=require("./icons/AIIcon.js"),CloseIcon=require("./icons/CloseIcon.js"),ShowMoreIcon=require("./icons/ShowMoreIcon.js"),PickProduct=require("./components/PickProduct.js"),ToneAndVoice=require("./components/ToneAndVoice.js"),classNames=require("classnames"),useListenEventGenerate=require("./hooks/useListenEventGenerate.js"),useGettingGenerateRequest=require("./hooks/useGettingGenerateRequest.js");const AIContentGenerator=({...e})=>{let[t,s]=react.useState(!1),[n,i]=react.useState(!1),{isGenerating:r,onGenerate:o}=useListenEventGenerate.useListenEventGenerate({uid:e.uid,tag:String(e.tag)}),{getRequestBody:a,prompt:c,changeProductName:g,changePrompt:p,changeTone:u}=useGettingGenerateRequest.useGettingGenerateRequest(),l=()=>{s(!t)},m=()=>{s(!1)},d=e=>{p(e.target.value)},x=react.useCallback(t=>{let s=t.detail;s?.componentUid!==e.uid&&m()},[e.uid]),j=()=>{i(!n)},h=()=>{let e=a();o(e)};return react.useEffect(()=>{r||m()},[r]),react.useEffect(()=>(window.addEventListener("editor:active-component",x),()=>{window.removeEventListener("editor:active-component",x)}),[x]),jsxRuntime.jsxs("div",{className:"gp-relative",children:[jsxRuntime.jsx("div",{className:"gp-gen-content-toolbar gp-border-r-[#6a6a6a] gp-border-r gp-pr-1 gp-mr-1",children:jsxRuntime.jsxs("button",{className:"gp-p-1 gp-text-xs gp-flex gp-gap-1 gp-items-center gp-rounded-md hover:gp-bg-[#3B3B3B] gp-font-medium",onClick:l,children:[jsxRuntime.jsx(AIIcon.AIIcon,{}),"AI Content"]})}),jsxRuntime.jsxs("div",{className:classNames({"gp-hidden":!t,"gp-right-0":"Section"===e.tag,"gp-left-0":"Section"!==e.tag},"gp-absolute gp-top-8 gp-right-0 gp-rounded-lg gp-bg-[#151515] gp-p-4 gp-w-[312px] !gp-max-w-[312px] !gp-cursor-default"),children:[jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center gp-justify-between gp-mb-4",children:[jsxRuntime.jsx("span",{className:"gp-font-medium gp-text-sm",children:"Write with GemAI"}),jsxRuntime.jsx("button",{className:"gp-p-2 gp-cursor-pointer hover:gp-bg-[#3B3B3B] gp-rounded-md",onClick:m,children:jsxRuntime.jsx(CloseIcon.CloseIcon,{})})]}),jsxRuntime.jsxs("div",{className:"gp-mt-2",children:[jsxRuntime.jsx("div",{className:"gp-mb-4",children:jsxRuntime.jsx("span",{className:"gp-text-xs",children:"What would you like to describe here?"})}),jsxRuntime.jsx("div",{className:"gp-mb-4 gp-flex",children:jsxRuntime.jsx("textarea",{className:"gp-p-2 gp-bg-[#333333] gp-rounded-lg gp-w-full gp-text-xs gp-text-white placeholder:gp-text-[#AAAAAA] gp-resize-none focus-visible:gp-outline-none",placeholder:"e.g: Generate feature benefits",rows:4,value:c,onChange:d})}),jsxRuntime.jsx("div",{className:"gp-mb-4",children:jsxRuntime.jsxs("button",{className:"gp-flex gp-justify-center gp-items-center gp-w-full gp-bg-[#333333] gp-py-2 gp-rounded-lg gp-gap-2 gp-text-xs gp-font-medium",onClick:j,children:["Show more",jsxRuntime.jsx("span",{className:classNames({"gp-rotate-180":n}),children:jsxRuntime.jsx(ShowMoreIcon.ShowMoreIcon,{})})]})}),jsxRuntime.jsxs("div",{className:classNames({"gp-hidden":!n},"gp-mb-4 gp-gap-4 gp-flex gp-flex-col"),children:[jsxRuntime.jsx(ToneAndVoice.ToneAndVoice,{changeToneAndVoice:u}),jsxRuntime.jsx(PickProduct.PickProduct,{changeProductName:g})]}),jsxRuntime.jsx("button",{className:"gp-rounded-lg gp-w-full gp-text-xs gp-font-medium gp-bg-gradient-to-tl gp-from-[#3C38E1] gp-to-[#874CFD] gp-py-2",onClick:h,children:r?"Generating...":"Generate"})]})]})]})};exports.AIContentGenerator=AIContentGenerator;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var AIIcon = require('./icons/AIIcon.js');
+var CloseIcon = require('./icons/CloseIcon.js');
+var ShowMoreIcon = require('./icons/ShowMoreIcon.js');
+var WarningIcon = require('./icons/WarningIcon.js');
+var UpgradeIcon = require('./icons/UpgradeIcon.js');
+var PickProduct = require('./components/PickProduct.js');
+var ToneAndVoice = require('./components/ToneAndVoice.js');
+var classNames = require('classnames');
+var useListenEventGenerate = require('./hooks/useListenEventGenerate.js');
+var useGettingGenerateRequest = require('./hooks/useGettingGenerateRequest.js');
+var useFlipPopup = require('./hooks/useFlipPopup.js');
+var useCheckingProductInside = require('./hooks/useCheckingProductInside.js');
+require('zustand');
+require('react-transition-group');
+require('@gem-sdk/core');
+var ShopContext = require('../../contexts/ShopContext.js');
+var dayjs = require('dayjs');
+require('swr');
+require('../../helpers/convert.js');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('swr/infinite');
+require('vanilla-lazyload');
+require('../../hooks/useCartUI.js');
+
+const AIContentGenerator = ({ ...props })=>{
+    const [isShowPopup, setIsShowPopup] = react.useState(false);
+    const [isShowMore, setIsShowMore] = react.useState(false);
+    const genTool = react.useRef(null);
+    const genPopup = react.useRef(null);
+    const genPopupHeader = react.useRef(null);
+    const genButtonWrapper = react.useRef(null);
+    const nextMonth = dayjs().add(1, 'month').startOf('month').format('DD MMM');
+    const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, bodyMaxHeight: popupBodyMaxHeight } = useFlipPopup.useFlipPopup(isShowPopup, {
+        genTool,
+        genPopup,
+        genPopupHeader,
+        genButtonWrapper
+    });
+    const { isGenerating, onGenerate, onOpenProductElementSettings, goToPricing } = useListenEventGenerate.useListenEventGenerate({
+        uid: props.uid,
+        tag: String(props.tag)
+    });
+    const { getRequestBody, prompt, changeProductName, changePrompt, changeTone } = useGettingGenerateRequest.useGettingGenerateRequest();
+    const { productElement, checkSectionHasProduct } = useCheckingProductInside.useCheckingProductInside(genTool);
+    const generateLimitation = ShopContext.useShopStore((s)=>s.generateContentLimitation);
+    const togglePopup = ()=>{
+        setIsShowPopup(!isShowPopup);
+    };
+    const hidePopup = ()=>{
+        setIsShowPopup(false);
+    };
+    const onChangePrompt = (e)=>{
+        changePrompt(e.target.value);
+    };
+    const onActiveComponent = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.componentUid !== props.uid) {
+            hidePopup();
+            return;
+        }
+        checkSectionHasProduct();
+    }, [
+        props.uid,
+        checkSectionHasProduct
+    ]);
+    const toggleShowMore = ()=>{
+        setIsShowMore(!isShowMore);
+    };
+    const handleGenerateContent = ()=>{
+        const body = getRequestBody();
+        onGenerate(body);
+        hidePopup();
+    };
+    const handleOpenProductSetting = ()=>{
+        onOpenProductElementSettings(productElement.uid ?? '');
+    };
+    react.useEffect(()=>{
+        if (!isGenerating) {
+            hidePopup();
+        }
+    }, [
+        isGenerating
+    ]);
+    react.useEffect(()=>{
+        if (productElement.productId) {
+            setIsShowMore(false);
+            return;
+        }
+        setIsShowMore(true);
+    }, [
+        productElement
+    ]);
+    react.useEffect(()=>{
+        window.addEventListener('editor:active-component', onActiveComponent);
+        return ()=>{
+            window.removeEventListener('editor:active-component', onActiveComponent);
+        };
+    }, [
+        onActiveComponent
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "gp-gen-content-toolbar-wrapper gp-relative",
+        ref: genTool,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-gen-content-btn gp-border-r gp-pr-1 gp-mr-1",
+                children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                    className: classNames({
+                        'gp-toolbar-ai-active': isShowPopup
+                    }, 'gp-p-1 gp-text-xs gp-flex gp-gap-1 gp-items-center gp-rounded-md hover:gp-bg-[#3B3B3B] gp-font-medium'),
+                    onClick: togglePopup,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(AIIcon.AIIcon, {}),
+                        "AI Content"
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: classNames({
+                    'gp-hidden': !isShowPopup,
+                    'gp-right-0': props.tag === 'Section' || popupPositionX === 'right',
+                    'gp-left-0': popupPositionX === 'left' && props.tag !== 'Section',
+                    'gp-top-8': popupPositionY === 'top',
+                    'gp-bottom-8': popupPositionY === 'bottom',
+                    '!gp-visible': !isValidatingFlipPopup
+                }, 'gp-absolute gp-invisible gp-rounded-lg gp-bg-[#151515] gp-w-[312px] !gp-max-w-[312px] !gp-cursor-default'),
+                ref: genPopup,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "gp-flex gp-items-center gp-justify-between gp-px-4 gp-py-[10px]",
+                        ref: genPopupHeader,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                className: "gp-font-medium gp-text-sm",
+                                children: "Write with GemAI"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                className: "gp-p-2 gp-cursor-pointer hover:gp-bg-[#3B3B3B] gp-rounded-md",
+                                onClick: hidePopup,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(CloseIcon.CloseIcon, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: classNames({
+                            'gp-overflow-auto': popupBodyMaxHeight !== null
+                        }, 'gp-pt-2 gp-text-left gp-px-4 scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl'),
+                        style: {
+                            maxHeight: popupBodyMaxHeight !== null ? `${popupBodyMaxHeight}px` : 'auto'
+                        },
+                        children: generateLimitation?.isAllow ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "gp-mb-4",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                        className: "gp-text-xs",
+                                        children: "What would you like to describe here?"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "gp-mb-4 gp-flex",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("textarea", {
+                                        className: "gp-p-2 gp-bg-[#333333] gp-rounded-lg gp-w-full gp-text-xs gp-text-white placeholder:gp-text-[#AAAAAA] gp-resize-none focus-visible:gp-outline-none",
+                                        placeholder: "e.g: generate feature benefits",
+                                        rows: 4,
+                                        value: prompt,
+                                        onChange: onChangePrompt
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: classNames({
+                                        'gp-hidden': !isShowMore
+                                    }, 'gp-mb-4 gp-gap-4 gp-flex gp-flex-col'),
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(ToneAndVoice.ToneAndVoice, {
+                                            changeToneAndVoice: changeTone
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(PickProduct.PickProduct, {
+                                            changeProductName: changeProductName,
+                                            openProductSetting: handleOpenProductSetting,
+                                            productId: productElement.productId
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                                        className: "gp-flex gp-justify-center gp-items-center gp-w-full gp-bg-[#333333] gp-py-2 gp-rounded-lg gp-gap-2 gp-text-xs gp-font-medium",
+                                        onClick: toggleShowMore,
+                                        children: [
+                                            "Show more",
+                                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                className: classNames({
+                                                    'gp-rotate-180': isShowMore
+                                                }),
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(ShowMoreIcon.ShowMoreIcon, {})
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "gp-flex gp-gap-2 gp-p-3 gp-rounded-xl gp-bg-[#FDB913] gp-bg-opacity-20",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "gp-flex-none gp-w-7 gp-h-7 gp-rounded-lg gp-bg-[#FFB800] gp-flex gp-justify-center gp-items-center",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(WarningIcon.WarningIcon, {})
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs("p", {
+                                    className: "gp-text-xs gp-whitespace-normal",
+                                    children: [
+                                        "You've reached ",
+                                        generateLimitation?.maxGenerateCount,
+                                        "/",
+                                        generateLimitation?.maxGenerateCount,
+                                        " rewrites of your AI generative this month.",
+                                        /*#__PURE__*/ jsxRuntime.jsx("br", {}),
+                                        "Resets on ",
+                                        nextMonth,
+                                        "."
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "gp-p-4",
+                        ref: genButtonWrapper,
+                        children: generateLimitation?.isAllow ? /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            className: "gp-rounded-lg gp-w-full gp-text-xs gp-font-medium gp-bg-gradient-to-tl gp-from-[#3C38E1] gp-to-[#874CFD] gp-py-2",
+                            onClick: handleGenerateContent,
+                            children: isGenerating ? 'Generating...' : 'Generate'
+                        }) : /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                            className: "gp-flex gp-items-center gp-gap-2 gp-justify-center gp-rounded-lg gp-w-full gp-text-xs gp-font-medium gp-bg-gradient-to-tl gp-from-[#3C38E1] gp-to-[#874CFD] gp-py-2",
+                            onClick: goToPricing,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(UpgradeIcon.UpgradeIcon, {}),
+                                generateLimitation?.nextQuota ? `Upgrade to generate ${generateLimitation?.nextQuota} rewrites` : 'You have reached limit this month'
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.AIContentGenerator = AIContentGenerator;

package/dist/cjs/components/ai-generator/AIGenContentLoading.js

@@ -1 +1,85 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react");const AIGenContentLoading=({...e})=>{let[t,n]=react.useState(!1),[r,a]=react.useState(1),s=react.useRef(null),i=react.useCallback(t=>{let r=t.detail;if(r?.generatingUid===e.uid){if("loading"===r.status){n(!0);return}if("success"===r.status){n(!1);return}}},[e.uid]);return react.useEffect(()=>{if(t){s.current=setInterval(()=>{a(e=>3===e?1:e+1)},500);return}s.current&&clearInterval(s.current)},[t]),react.useEffect(()=>(window.addEventListener("editor:ai-generate-content-status",i),()=>{window.removeEventListener("editor:ai-generate-content-status",i)}),[i]),t?jsxRuntime.jsx("div",{className:"gp-absolute gp-top-0 gp-left-0 gp-w-full gp-h-full gp-bg-white gp-bg-opacity-70 gp-flex gp-justify-center gp-items-center",children:jsxRuntime.jsxs("span",{className:"gp-font-medium",children:["Generating Content",Array.from(Array(r).keys()).map(()=>".")]})}):null};exports.AIGenContentLoading=AIGenContentLoading;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var AIIcon = require('./icons/AIIcon.js');
+
+function getRandomArbitrary(min, max) {
+    const randomNum = Math.random();
+    return randomNum * (max - min) + min;
+}
+const AIGenContentLoading = ({ ...props })=>{
+    const [isGenerating, setIsGenerating] = react.useState(false);
+    const [time, setTime] = react.useState(0);
+    const interval = react.useRef(null);
+    const onGenerateContentStatus = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.generatingUid !== props.uid) {
+            return;
+        }
+        if (detail.status === 'loading') {
+            setIsGenerating(true);
+            return;
+        }
+        if (detail.status === 'success') {
+            setIsGenerating(false);
+            return;
+        }
+    }, [
+        props.uid
+    ]);
+    react.useEffect(()=>{
+        if (isGenerating) {
+            handleFakeLoading();
+        } else {
+            setTime(0);
+        }
+        return ()=>{
+            interval.current && clearInterval(interval.current);
+        };
+    }, [
+        isGenerating
+    ]);
+    const handleFakeLoading = ()=>{
+        setTime(0);
+        interval.current = setInterval(()=>{
+            setTime((time)=>{
+                const randomNum = getRandomArbitrary(0, 6);
+                return time >= 580 ? time : time + randomNum;
+            });
+        }, 50);
+    };
+    react.useEffect(()=>{
+        window.addEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
+        return ()=>{
+            window.removeEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
+        };
+    }, [
+        onGenerateContentStatus
+    ]);
+    return isGenerating ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "gp-absolute gp-top-0 gp-left-0 gp-w-full gp-h-full gp-bg-white gp-bg-opacity-70 gp-flex gp-justify-center gp-items-center gp-z-100 gp-gap-2",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full",
+                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: `gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md`,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",
+                            style: {
+                                width: `${time / 600 * 100}%`
+                            }
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(AIIcon.AIIcon, {})
+        ]
+    }) : null;
+};
+
+exports.AIGenContentLoading = AIGenContentLoading;

package/dist/cjs/components/ai-generator/components/PickProduct.js

@@ -1 +1,220 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),SearchIcon=require("../icons/SearchIcon.js"),useProductsQuery=require("../../../hooks/shop/use-products-query.js");const PickProduct=e=>{let[s,t]=react.useState({first:8}),{data:r,isLoading:a}=useProductsQuery.useListProductQuery(s),[c,p]=react.useState(),[g,n]=react.useState(!1),i=react.useRef(null),u=()=>{n(!g)},l=e=>{p(e),n(!1)},d=e=>{i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{let s=e.target.value??"";if(s){t({first:8,where:{titleContainsFold:s}});return}t({first:8})},200)};return react.useEffect(()=>{if(r?.products?.edges.length&&!c){let e=r.products.edges[0]?.node;e&&p({id:e?.id,name:e?.title,image:e.featuredImage?.src})}},[r,c]),react.useEffect(()=>{c&&c.name&&e.changeProductName(c.name)},[c,e]),jsxRuntime.jsxs("div",{className:"gp-flex gp-flex-col gp-gap-2",children:[jsxRuntime.jsx("p",{className:"gp-py-2 gp-text-xs",children:"Product"}),jsxRuntime.jsxs("div",{className:"gp-relative",children:[!a||c?jsxRuntime.jsxs("button",{className:"gp-flex gp-gap-2 gp-items-center gp-w-full gp-p-2 gp-rounded-lg gp-bg-[#333333] gp-text-xs",onClick:u,children:[jsxRuntime.jsx("img",{className:"gp-rounded-lg gp-w-10 gp-h-10",src:c?.image,alt:"product_image"}),jsxRuntime.jsx("span",{className:"gp-truncate gp-max-w-[210px]",children:c?.name})]}):jsxRuntime.jsx("div",{children:jsxRuntime.jsx("span",{className:"gp-text-xs",children:"Getting products..."})}),g&&jsxRuntime.jsxs("div",{className:"gp-absolute gp-w-full gp-top-16 gp-left-0 gp-rounded-lg gp-bg-[#333333] gp-p-2 gp-flex gp-flex-col gp-gap-2 gp-z-10",children:[jsxRuntime.jsxs("div",{className:"gp-flex gp-items-center gp-gap-2 gp-p-2",children:[jsxRuntime.jsx(SearchIcon.SearchIcon,{}),jsxRuntime.jsx("input",{className:"gp-bg-transparent gp-w-full focus-visible:!gp-outline-none gp-text-xs",placeholder:"Search product...",onChange:d})]}),jsxRuntime.jsx("div",{className:"gp-max-h-[168px] gp-overflow-auto scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl",children:a?jsxRuntime.jsx("div",{className:"gp-p-2",children:jsxRuntime.jsx("span",{className:"gp-text-xs",children:"Getting products..."})}):r?.products?.edges.map(e=>jsxRuntime.jsxs("button",{className:"gp-flex gp-p-2 hover:gp-bg-[#3B3B3B] gp-rounded-lg gp-cursor-pointer gp-gap-2 gp-items-center",onClick:()=>{l({id:e.node?.id,name:e.node?.title,image:e.node?.featuredImage?.src})},children:[jsxRuntime.jsx("img",{className:"gp-rounded-lg gp-w-10 gp-h-10",src:e.node?.featuredImage?.src,alt:"product_image"}),jsxRuntime.jsx("span",{className:"gp-truncate gp-max-w-[210px] gp-text-xs",children:e.node?.title})]},e.node?.id))})]})]})]})};exports.PickProduct=PickProduct;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var SearchIcon = require('../icons/SearchIcon.js');
+var useProductsQuery = require('../../../hooks/shop/use-products-query.js');
+var classNames = require('classnames');
+require('zustand');
+require('react-transition-group');
+require('@gem-sdk/core');
+require('swr');
+require('dayjs');
+require('../../../helpers/convert.js');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+var useProductQuery = require('../../../hooks/shop/use-product-query.js');
+require('vanilla-lazyload');
+require('../../../hooks/useCartUI.js');
+
+const PickProduct = (props)=>{
+    const LIMIT_PRODUCTS = 8;
+    const [productVariables, setProductVariables] = react.useState(!props.productId ? {
+        first: LIMIT_PRODUCTS
+    } : undefined);
+    const { data: productList, isLoading: isLoadingGetProducts, isValidating: isValidatingGetProducts, size: productsSize, setSize: setProductsSize } = useProductsQuery.useListProductQuery(productVariables, {
+        revalidateFirstPage: false
+    });
+    const { data: sectionProduct } = useProductQuery.useProductQuery(props.productId);
+    const [activeProduct, setActiveProduct] = react.useState();
+    const [isShowChooseProduct, setIsShowChooseProduct] = react.useState(false);
+    const debounceSearch = react.useRef(null);
+    const debounceScroll = react.useRef(null);
+    const toggleChooseProduct = ()=>{
+        if (props.productId) return;
+        setIsShowChooseProduct(!isShowChooseProduct);
+    };
+    const chooseProduct = (product)=>{
+        setActiveProduct(product);
+        setIsShowChooseProduct(false);
+    };
+    const searchProduct = (e)=>{
+        debounceSearch.current && clearTimeout(debounceSearch.current);
+        debounceSearch.current = setTimeout(()=>{
+            const searchValue = e.target.value ?? '';
+            if (searchValue) {
+                setProductVariables({
+                    first: LIMIT_PRODUCTS,
+                    where: {
+                        titleContainsFold: searchValue
+                    }
+                });
+                return;
+            }
+            setProductVariables({
+                first: LIMIT_PRODUCTS
+            });
+        }, 200);
+    };
+    const handleOpenProductElementSettings = ()=>{
+        props.openProductSetting();
+    };
+    const handleLoadMore = (e)=>{
+        const target = e.target;
+        if (target.scrollHeight - target.scrollTop === target.clientHeight) {
+            debounceScroll.current && clearTimeout(debounceScroll.current);
+            debounceScroll.current = setTimeout(()=>{
+                setProductsSize(productsSize + 1);
+            }, 50);
+        }
+    };
+    const products = react.useMemo(()=>{
+        return productList?.reduce((acc, curr)=>{
+            return [
+                ...acc,
+                ...curr.products?.edges ?? []
+            ];
+        }, []) ?? [];
+    }, [
+        productList
+    ]);
+    react.useEffect(()=>{
+        if (products.length && !activeProduct && !props.productId) {
+            const firstProduct = products[0]?.node;
+            if (!firstProduct) return;
+            setActiveProduct({
+                id: firstProduct?.id,
+                name: firstProduct?.title,
+                image: firstProduct.featuredImage?.src
+            });
+        }
+    }, [
+        products,
+        activeProduct,
+        props.productId
+    ]);
+    react.useEffect(()=>{
+        if (activeProduct && activeProduct.name) {
+            props.changeProductName(activeProduct.name);
+        }
+    }, [
+        activeProduct,
+        props
+    ]);
+    react.useEffect(()=>{
+        if (sectionProduct) {
+            setActiveProduct({
+                id: sectionProduct.id,
+                name: sectionProduct.title,
+                image: sectionProduct.featuredImage?.src
+            });
+        }
+    }, [
+        sectionProduct
+    ]);
+    const NO_IMAGE_SRC = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "gp-flex gp-flex-col gp-gap-2",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("p", {
+                className: "gp-py-2 gp-text-xs",
+                children: "Product"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "gp-relative",
+                children: [
+                    !isLoadingGetProducts || activeProduct ? /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                        className: classNames({
+                            'gp-cursor-default': props.productId
+                        }, 'gp-flex gp-gap-2 gp-items-center gp-w-full gp-p-2 gp-rounded-lg gp-bg-[#333333] gp-text-xs'),
+                        onClick: toggleChooseProduct,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("img", {
+                                className: "gp-rounded-lg gp-w-10 gp-h-10",
+                                src: activeProduct?.image || NO_IMAGE_SRC,
+                                alt: "product_image"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                className: "gp-truncate gp-max-w-[210px]",
+                                children: activeProduct?.name
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                            className: "gp-text-xs",
+                            children: "Getting products..."
+                        })
+                    }),
+                    props.productId && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "gp-mt-2 gp-text-xs",
+                        children: /*#__PURE__*/ jsxRuntime.jsxs("p", {
+                            children: [
+                                "You can manage it in",
+                                ' ',
+                                /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                    className: "gp-text-[#8AA4FF] gp-cursor-pointer hover:gp-underline",
+                                    onClick: handleOpenProductElementSettings,
+                                    children: "Product element"
+                                })
+                            ]
+                        })
+                    }),
+                    isShowChooseProduct && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "gp-absolute gp-w-full gp-top-16 gp-left-0 gp-rounded-lg gp-bg-[#333333] gp-p-2 gp-flex gp-flex-col gp-gap-2 gp-z-10",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: "gp-flex gp-items-center gp-gap-2 gp-p-2",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(SearchIcon.SearchIcon, {}),
+                                    /*#__PURE__*/ jsxRuntime.jsx("input", {
+                                        className: "gp-bg-transparent gp-w-full focus-visible:!gp-outline-none gp-text-xs",
+                                        placeholder: "Search product...",
+                                        onChange: searchProduct
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: "gp-max-h-[168px] gp-overflow-auto scrollbar:gp-w-1 scrollbar-thumb:gp-bg-[#999] scrollbar-thumb:gp-rounded-xl",
+                                onScroll: handleLoadMore,
+                                children: [
+                                    products?.map((item)=>{
+                                        return /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                                            className: "gp-flex gp-p-2 hover:gp-bg-[#3B3B3B] gp-rounded-lg gp-cursor-pointer gp-gap-2 gp-items-center",
+                                            onClick: ()=>{
+                                                chooseProduct({
+                                                    id: item.node?.id,
+                                                    name: item.node?.title,
+                                                    image: item.node?.featuredImage?.src
+                                                });
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx("img", {
+                                                    className: "gp-rounded-lg gp-w-10 gp-h-10",
+                                                    src: item.node?.featuredImage?.src || NO_IMAGE_SRC,
+                                                    alt: "product_image"
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                    className: "gp-truncate gp-max-w-[210px] gp-text-xs",
+                                                    children: item.node?.title
+                                                })
+                                            ]
+                                        }, item.node?.id);
+                                    }),
+                                    isLoadingGetProducts || isValidatingGetProducts && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        className: "gp-p-2",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                            className: "gp-text-xs",
+                                            children: "Getting products..."
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.PickProduct = PickProduct;

package/dist/cjs/components/ai-generator/components/ToneAndVoice.js

@@ -1 +1,77 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),DropdownIcon=require("../icons/DropdownIcon.js"),classNames=require("classnames");const ToneAndVoice=e=>{let s=["Persuasive","Friendly","Professional","Casual"],[n,i]=react.useState(s[0]),[p,t]=react.useState(!1),c=()=>{t(!p)},l=e=>{i(e),t(!1)};return react.useEffect(()=>{n&&e.changeToneAndVoice(n)},[n,e]),jsxRuntime.jsx("div",{children:jsxRuntime.jsxs("div",{className:"gp-flex gp-flex-col gp-gap-2",children:[jsxRuntime.jsx("p",{className:"gp-py-2 gp-text-xs",children:"Tone and Voice"}),jsxRuntime.jsxs("div",{className:"gp-relative",children:[jsxRuntime.jsxs("button",{className:"gp-flex gp-justify-between gp-items-center gp-w-full gp-p-2 gp-rounded-lg gp-bg-[#333333] gp-text-xs",onClick:c,children:[n,jsxRuntime.jsx(DropdownIcon.DropdownIcon,{})]}),p?jsxRuntime.jsx("div",{className:"gp-absolute gp-w-full gp-top-10 gp-left-0 gp-rounded-lg gp-bg-[#333333] gp-p-2 gp-flex gp-flex-col gp-gap-2 gp-z-10",children:s.map(e=>jsxRuntime.jsxs("button",{className:"gp-flex gp-p-2 hover:gp-bg-[#3B3B3B] gp-rounded-lg gp-cursor-pointer gp-gap-3 gp-items-center",onClick:()=>l(e),children:[jsxRuntime.jsx("div",{className:classNames({"gp-invisible":n!==e}),children:jsxRuntime.jsx(DropdownIcon.TickIcon,{})}),jsxRuntime.jsx("span",{className:"gp-text-xs",children:e})]},e))}):null]})]})})};exports.ToneAndVoice=ToneAndVoice;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var DropdownIcon = require('../icons/DropdownIcon.js');
+var classNames = require('classnames');
+
+const ToneAndVoice = (props)=>{
+    const listToneAndVoice = [
+        'Persuasive',
+        'Friendly',
+        'Professional',
+        'Casual'
+    ];
+    const [tone, setTone] = react.useState(listToneAndVoice[0]);
+    const [isShow, setIsShow] = react.useState(false);
+    const toggle = ()=>{
+        setIsShow(!isShow);
+    };
+    const setValue = (value)=>{
+        setTone(value);
+        setIsShow(false);
+    };
+    react.useEffect(()=>{
+        tone && props.changeToneAndVoice(tone);
+    }, [
+        tone,
+        props
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "gp-flex gp-flex-col gp-gap-2",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("p", {
+                    className: "gp-py-2 gp-text-xs",
+                    children: "Tone and Voice"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "gp-relative",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                            className: "gp-flex gp-justify-between gp-items-center gp-w-full gp-p-2 gp-rounded-lg gp-bg-[#333333] gp-text-xs",
+                            onClick: toggle,
+                            children: [
+                                tone,
+                                /*#__PURE__*/ jsxRuntime.jsx(DropdownIcon.DropdownIcon, {})
+                            ]
+                        }),
+                        isShow ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "gp-absolute gp-w-full gp-top-10 gp-left-0 gp-rounded-lg gp-bg-[#333333] gp-p-2 gp-flex gp-flex-col gp-gap-2 gp-z-10",
+                            children: listToneAndVoice.map((item)=>{
+                                return /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                                    className: "gp-flex gp-p-2 hover:gp-bg-[#3B3B3B] gp-rounded-lg gp-cursor-pointer gp-gap-3 gp-items-center",
+                                    onClick: ()=>setValue(item),
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: classNames({
+                                                'gp-invisible': tone !== item
+                                            }),
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(DropdownIcon.TickIcon, {})
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                            className: "gp-text-xs",
+                                            children: item
+                                        })
+                                    ]
+                                }, item);
+                            })
+                        }) : null
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+exports.ToneAndVoice = ToneAndVoice;