@gem-sdk/core 3.0.0-pre-production.14 → 3.0.0

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

@@ -1,250 +1,2 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { AIIcon } from './icons/AIIcon.js';
-import { CloseIcon } from './icons/CloseIcon.js';
-import { ShowMoreIcon } from './icons/ShowMoreIcon.js';
-import { WarningIcon } from './icons/WarningIcon.js';
-import { UpgradeIcon } from './icons/UpgradeIcon.js';
-import { PickProduct } from './components/PickProduct.js';
-import { ToneAndVoice } from './components/ToneAndVoice.js';
-import classNames from 'classnames';
-import { useListenEventGenerate } from './hooks/useListenEventGenerate.js';
-import { useGettingGenerateRequest } from './hooks/useGettingGenerateRequest.js';
-import { useFlipPopup } from './hooks/useFlipPopup.js';
-import { useCheckingProductInside } from './hooks/useCheckingProductInside.js';
-import 'zustand';
-import 'react-transition-group';
-import '@gem-sdk/core';
-import { useShopStore } from '../../contexts/ShopContext.js';
-import dayjs from 'dayjs';
-import 'swr';
-import '../../helpers/convert.js';
-import '@gem-sdk/adapter-shopify';
-import 'swr/mutation';
-import 'swr/infinite';
-import 'vanilla-lazyload';
-import '../../hooks/useCartUI.js';
-
-const AIContentGenerator = ({ ...props })=>{
-    const [isShowPopup, setIsShowPopup] = useState(false);
-    const [isShowMore, setIsShowMore] = useState(false);
-    const genTool = useRef(null);
-    const genPopup = useRef(null);
-    const genPopupHeader = useRef(null);
-    const genButtonWrapper = useRef(null);
-    const nextMonth = dayjs().add(1, 'month').startOf('month').format('DD MMM');
-    const { popupPositionX, popupPositionY, isValidating: isValidatingFlipPopup, bodyMaxHeight: popupBodyMaxHeight } = useFlipPopup(isShowPopup, {
-        genTool,
-        genPopup,
-        genPopupHeader,
-        genButtonWrapper
-    });
-    const { isGenerating, onGenerate, onOpenProductElementSettings, goToPricing } = useListenEventGenerate({
-        uid: props.uid,
-        tag: String(props.tag)
-    });
-    const { getRequestBody, prompt, changeProductName, changePrompt, changeTone } = useGettingGenerateRequest();
-    const { productElement, checkSectionHasProduct } = useCheckingProductInside(genTool);
-    const generateLimitation = useShopStore((s)=>s.generateContentLimitation);
-    const togglePopup = ()=>{
-        setIsShowPopup(!isShowPopup);
-    };
-    const hidePopup = ()=>{
-        setIsShowPopup(false);
-    };
-    const onChangePrompt = (e)=>{
-        changePrompt(e.target.value);
-    };
-    const onActiveComponent = 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 ?? '');
-    };
-    useEffect(()=>{
-        if (!isGenerating) {
-            hidePopup();
-        }
-    }, [
-        isGenerating
-    ]);
-    useEffect(()=>{
-        if (productElement.productId) {
-            setIsShowMore(false);
-            return;
-        }
-        setIsShowMore(true);
-    }, [
-        productElement
-    ]);
-    useEffect(()=>{
-        window.addEventListener('editor:active-component', onActiveComponent);
-        return ()=>{
-            window.removeEventListener('editor:active-component', onActiveComponent);
-        };
-    }, [
-        onActiveComponent
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: "gp-gen-content-toolbar-wrapper gp-relative",
-        ref: genTool,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: "gp-gen-content-btn gp-border-r gp-pr-1 gp-mr-1",
-                children: /*#__PURE__*/ 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__*/ jsx(AIIcon, {}),
-                        "AI Content"
-                    ]
-                })
-            }),
-            /*#__PURE__*/ 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__*/ jsxs("div", {
-                        className: "gp-flex gp-items-center gp-justify-between gp-px-4 gp-py-[10px]",
-                        ref: genPopupHeader,
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: "gp-font-medium gp-text-sm",
-                                children: "Write with GemAI"
-                            }),
-                            /*#__PURE__*/ jsx("button", {
-                                className: "gp-p-2 gp-cursor-pointer hover:gp-bg-[#3B3B3B] gp-rounded-md",
-                                onClick: hidePopup,
-                                children: /*#__PURE__*/ jsx(CloseIcon, {})
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ 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__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "gp-mb-4",
-                                    children: /*#__PURE__*/ jsx("span", {
-                                        className: "gp-text-xs",
-                                        children: "What would you like to describe here?"
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "gp-mb-4 gp-flex",
-                                    children: /*#__PURE__*/ 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__*/ jsxs("div", {
-                                    className: classNames({
-                                        'gp-hidden': !isShowMore
-                                    }, 'gp-mb-4 gp-gap-4 gp-flex gp-flex-col'),
-                                    children: [
-                                        /*#__PURE__*/ jsx(ToneAndVoice, {
-                                            changeToneAndVoice: changeTone
-                                        }),
-                                        /*#__PURE__*/ jsx(PickProduct, {
-                                            changeProductName: changeProductName,
-                                            openProductSetting: handleOpenProductSetting,
-                                            productId: productElement.productId
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsx("div", {
-                                    children: /*#__PURE__*/ 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__*/ jsx("span", {
-                                                className: classNames({
-                                                    'gp-rotate-180': isShowMore
-                                                }),
-                                                children: /*#__PURE__*/ jsx(ShowMoreIcon, {})
-                                            })
-                                        ]
-                                    })
-                                })
-                            ]
-                        }) : /*#__PURE__*/ jsxs("div", {
-                            className: "gp-flex gp-gap-2 gp-p-3 gp-rounded-xl gp-bg-[#FDB913] gp-bg-opacity-20",
-                            children: [
-                                /*#__PURE__*/ 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__*/ jsx(WarningIcon, {})
-                                }),
-                                /*#__PURE__*/ 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__*/ jsx("br", {}),
-                                        "Resets on ",
-                                        nextMonth,
-                                        "."
-                                    ]
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: "gp-p-4",
-                        ref: genButtonWrapper,
-                        children: generateLimitation?.isAllow ? /*#__PURE__*/ 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__*/ 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__*/ jsx(UpgradeIcon, {}),
-                                generateLimitation?.nextQuota ? `Upgrade to generate ${generateLimitation?.nextQuota} rewrites` : 'You have reached limit this month'
-                            ]
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-};
-
-export { AIContentGenerator };
+'use client';
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useState as p,useRef as r,useCallback as n,useEffect as i}from"react";import{AIIcon as g}from"./icons/AIIcon.js";import{CloseIcon as s}from"./icons/CloseIcon.js";import{ShowMoreIcon as a}from"./icons/ShowMoreIcon.js";import{WarningIcon as l}from"./icons/WarningIcon.js";import{UpgradeIcon as m}from"./icons/UpgradeIcon.js";import{PickProduct as c}from"./components/PickProduct.js";import{ToneAndVoice as d}from"./components/ToneAndVoice.js";import u from"classnames";import{useListenEventGenerate as h}from"./hooks/useListenEventGenerate.js";import{useGettingGenerateRequest as f}from"./hooks/useGettingGenerateRequest.js";import{useFlipPopup as x}from"./hooks/useFlipPopup.js";import{useCheckingProductInside as b}from"./hooks/useCheckingProductInside.js";import"zustand";import{useI18nStore as v}from"../../contexts/I18nContext.js";import"react-transition-group";import"@gem-sdk/core";import{useShopStore as w}from"../../contexts/ShopContext.js";import j from"dayjs";import"swr";import"../../helpers/convert.js";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"swr/infinite";import"vanilla-lazyload";import"../../hooks/useCartUI.js";import"../../hooks/useStickyStore.js";let AIContentGenerator=({...N})=>{let[C,k]=p(!1),[y,I]=p(!1),A=r(null),G=r(null),S=r(null),B=r(null),F=j().add(1,"month").startOf("month").format("DD MMM"),{t:P}=v(),{popupPositionX:D,popupPositionY:E,isValidating:M,bodyMaxHeight:L}=x(C,{genTool:A,genPopup:G,genPopupHeader:S,genButtonWrapper:B}),{isGenerating:U,onGenerate:z,onOpenProductElementSettings:V,goToPricing:W}=h({uid:N.uid,tag:String(N.tag)}),{getRequestBody:H,prompt:Q,changeProductName:R,changePrompt:T,changeTone:Y}=f(),{productElement:$,checkSectionHasProduct:q}=b(A),O=w(e=>e.generateContentLimitation),J=()=>{k(!C)},K=()=>{k(!1)},X=e=>{T(e.target.value)},Z=n(e=>{let t=e.detail;if(t?.componentUid!==N.uid){K();return}q()},[N.uid,q]),_=()=>{I(!y)},ee=()=>{let e=H();z(e),K()},et=()=>{V($.uid??"")};return i(()=>{U||K()},[U]),i(()=>{if($.productId){I(!1);return}I(!0)},[$]),i(()=>(window.addEventListener("editor:active-component",Z),()=>{window.removeEventListener("editor:active-component",Z)}),[Z]),e("div",{className:"gp-gen-content-toolbar-wrapper gp-relative",ref:A,children:[t("div",{className:"gp-gen-content-btn gp-border-r gp-pr-1 gp-mr-1",children:e("button",{className:u({"gp-toolbar-ai-active":C},"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:J,children:[t(g,{}),P("AI Content")]})}),e("div",{className:u({"gp-hidden":!C,"gp-right-0":"Section"===N.tag||"right"===D,"gp-left-0":"left"===D&&"Section"!==N.tag,"gp-top-8":"top"===E,"gp-bottom-8":"bottom"===E,"!gp-visible":!M},"gp-absolute gp-invisible gp-rounded-lg gp-bg-[#151515] gp-w-[312px] !gp-max-w-[312px] !gp-cursor-default"),ref:G,children:[e("div",{className:"gp-flex gp-items-center gp-justify-between gp-px-4 gp-py-[10px]",ref:S,children:[t("span",{className:"gp-font-medium gp-text-sm",children:"Write with GemAI"}),t("button",{className:"gp-p-2 gp-cursor-pointer hover:gp-bg-[#3B3B3B] gp-rounded-md",onClick:K,children:t(s,{})})]}),t("div",{className:u({"gp-overflow-auto":null!==L},"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:null!==L?`${L}px`:"auto"},children:O?.isAllow?e(o,{children:[t("div",{className:"gp-mb-4",children:t("span",{className:"gp-text-xs",children:"What would you like to describe here?"})}),t("div",{className:"gp-mb-4 gp-flex",children:t("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:Q,onChange:X})}),e("div",{className:u({"gp-hidden":!y},"gp-mb-4 gp-gap-4 gp-flex gp-flex-col"),children:[t(d,{changeToneAndVoice:Y}),t(c,{changeProductName:R,openProductSetting:et,productId:$.productId})]}),t("div",{children:e("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:_,children:["Show more",t("span",{className:u({"gp-rotate-180":y}),children:t(a,{})})]})})]}):e("div",{className:"gp-flex gp-gap-2 gp-p-3 gp-rounded-xl gp-bg-[#FDB913] gp-bg-opacity-20",children:[t("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:t(l,{})}),e("p",{className:"gp-text-xs gp-whitespace-normal",children:["You've reached ",O?.maxGenerateCount,"/",O?.maxGenerateCount," rewrites of your AI generative this month.",t("br",{}),"Resets on ",F,"."]})]})}),t("div",{className:"gp-p-4",ref:B,children:O?.isAllow?t("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:ee,children:U?"Generating...":"Generate"}):e("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:W,children:[t(m,{}),O?.nextQuota?`Upgrade to generate ${O?.nextQuota} rewrites`:"You have reached limit this month"]})})]})]})};export{AIContentGenerator};

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

@@ -1,83 +1,2 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { AIIcon } from './icons/AIIcon.js';
-
-function getRandomArbitrary(min, max) {
-    const randomNum = Math.random();
-    return randomNum * (max - min) + min;
-}
-const AIGenContentLoading = ({ ...props })=>{
-    const [isGenerating, setIsGenerating] = useState(false);
-    const [time, setTime] = useState(0);
-    const interval = useRef(null);
-    const onGenerateContentStatus = 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
-    ]);
-    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);
-    };
-    useEffect(()=>{
-        window.addEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
-        return ()=>{
-            window.removeEventListener('editor:ai-generate-content-status', onGenerateContentStatus);
-        };
-    }, [
-        onGenerateContentStatus
-    ]);
-    return isGenerating ? /*#__PURE__*/ 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__*/ jsx("div", {
-                className: "gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full",
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: `gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md`,
-                    children: [
-                        /*#__PURE__*/ jsx("div", {
-                            className: "gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"
-                        }),
-                        /*#__PURE__*/ 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__*/ jsx(AIIcon, {})
-        ]
-    }) : null;
-};
-
-export { AIGenContentLoading };
+'use client';
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useRef as n,useCallback as l,useEffect as g}from"react";import{AIIcon as a}from"./icons/AIIcon.js";function getRandomArbitrary(e,t){return Math.random()*(t-e)+e}let AIGenContentLoading=({...i})=>{let[p,o]=r(!1),[s,d]=r(0),u=n(null),c=l(e=>{let t=e.detail;if(t?.generatingUid===i.uid){if("loading"===t.status){o(!0);return}if("success"===t.status){o(!1);return}}},[i.uid]);g(()=>(p?f():d(0),()=>{u.current&&clearInterval(u.current)}),[p]);let f=()=>{d(0),u.current=setInterval(()=>{d(e=>{let t=getRandomArbitrary(0,6);return e>=580?e:e+t})},50)};return g(()=>(window.addEventListener("editor:ai-generate-content-status",c),()=>{window.removeEventListener("editor:ai-generate-content-status",c)}),[c]),p?e("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:[t("div",{className:"gp-absolute gp-left-0 gp-top-0 gp-z-2 gp-flex gp-h-full gp-w-full",children:e("div",{className:"gp-relative gp-h-[2px] gp-w-full gp-overflow-hidden gp-rounded-md",children:[t("div",{className:"gp-absolute gp-h-full gp-w-full gp-rounded-md gp-bg-[#F4F4F4]"}),t("div",{className:"gps-image-to-layout-progress-bar gp-absolute gp-h-full gp-rounded-md gp-transition-all",style:{width:`${s/600*100}%`}})]})}),t(a,{})]}):null};export{AIGenContentLoading};

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

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

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

@@ -1,75 +1,2 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { DropdownIcon, TickIcon } from '../icons/DropdownIcon.js';
-import classNames from 'classnames';
-
-const ToneAndVoice = (props)=>{
-    const listToneAndVoice = [
-        'Persuasive',
-        'Friendly',
-        'Professional',
-        'Casual'
-    ];
-    const [tone, setTone] = useState(listToneAndVoice[0]);
-    const [isShow, setIsShow] = useState(false);
-    const toggle = ()=>{
-        setIsShow(!isShow);
-    };
-    const setValue = (value)=>{
-        setTone(value);
-        setIsShow(false);
-    };
-    useEffect(()=>{
-        tone && props.changeToneAndVoice(tone);
-    }, [
-        tone,
-        props
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        children: /*#__PURE__*/ jsxs("div", {
-            className: "gp-flex gp-flex-col gp-gap-2",
-            children: [
-                /*#__PURE__*/ jsx("p", {
-                    className: "gp-py-2 gp-text-xs",
-                    children: "Tone and Voice"
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    className: "gp-relative",
-                    children: [
-                        /*#__PURE__*/ 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__*/ jsx(DropdownIcon, {})
-                            ]
-                        }),
-                        isShow ? /*#__PURE__*/ 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__*/ 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__*/ jsx("div", {
-                                            className: classNames({
-                                                'gp-invisible': tone !== item
-                                            }),
-                                            children: /*#__PURE__*/ jsx(TickIcon, {})
-                                        }),
-                                        /*#__PURE__*/ jsx("span", {
-                                            className: "gp-text-xs",
-                                            children: item
-                                        })
-                                    ]
-                                }, item);
-                            })
-                        }) : null
-                    ]
-                })
-            ]
-        })
-    });
-};
-
-export { ToneAndVoice };
+'use client';
+import{jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as l,useEffect as g}from"react";import{DropdownIcon as n,TickIcon as i}from"../icons/DropdownIcon.js";import o from"classnames";let ToneAndVoice=r=>{let s=["Persuasive","Friendly","Professional","Casual"],[c,a]=l(s[0]),[t,d]=l(!1),m=()=>{d(!t)},f=e=>{a(e),d(!1)};return g(()=>{c&&r.changeToneAndVoice(c)},[c,r]),e("div",{children:p("div",{className:"gp-flex gp-flex-col gp-gap-2",children:[e("p",{className:"gp-py-2 gp-text-xs",children:"Tone and Voice"}),p("div",{className:"gp-relative",children:[p("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:m,children:[c,e(n,{})]}),t?e("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(l=>p("button",{className:"gp-flex gp-p-2 hover:gp-bg-[#3B3B3B] gp-rounded-lg gp-cursor-pointer gp-gap-3 gp-items-center",onClick:()=>f(l),children:[e("div",{className:o({"gp-invisible":c!==l}),children:e(i,{})}),e("span",{className:"gp-text-xs",children:l})]},l))}):null]})]})})};export{ToneAndVoice};