@gem-sdk/core 1.42.7 → 1.43.0-dev.102

package/dist/esm/components/ComponentToolbarPreview.js

@@ -6,13 +6,17 @@ import { useShopStore } from '../contexts/ShopContext.js';
 import '@gem-sdk/adapter-shopify';
 import 'swr';
 import 'swr/mutation';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import '../hooks/useCartUI.js';
 import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
 import Tooltip from './toolbar/Tooltip.js';
-import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
+import { ThemeSectionStatusWrapper } from './theme-section/ThemeSectionStatus.js';
 import Resize from './resize/Resize.js';
 import { usePostPurchase } from '../hooks/useToolbarPostPurchase.js';
+import { ableGenerateContentElements } from './constant.js';
+import { AIContentGenerator } from './ai-generator/AIContentGenerator.js';
+import { AIGenContentLoading } from './ai-generator/AIGenContentLoading.js';
 import '../helpers/convert.js';
 
 const SECTION_LIMIT = 25;
@@ -26,6 +30,8 @@ const isSection = (el)=>{
 };
 const ComponentToolbarPreview = (props)=>{
     const isThemeSection = props.isThemeSection;
+    const isShopifySection = props.isShopifySection;
+    const storefrontUrl = useShopStore((s)=>s.storefrontUrl);
     const editingPageType = useShopStore((s)=>s.pageType);
     const getParents = useBuilderPreviewStore((s)=>s.getParents);
     const root = useBuilderPreviewStore((s)=>s.getItem('ROOT'));
@@ -36,6 +42,7 @@ const ComponentToolbarPreview = (props)=>{
     const [parents, setParents] = useState([]);
     const [deleteTooltipPosition, setDeleteTooltipPosition] = useState('top');
     const [isDisableDelete, setIsUnableDelete] = useState(false);
+    const [parentProductUid, setParentProductUid] = useState('');
     const [tooltipText, setTooltipText] = useState({
         width: '',
         text: ''
@@ -45,6 +52,11 @@ const ComponentToolbarPreview = (props)=>{
         editingPageType
     ]);
     const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = usePostPurchase(props.uid, props.tag || '');
+    const editProductElementList = [
+        'Product Title',
+        'Product Description',
+        'Product Price'
+    ];
     const isOverToolbarPosition = (el, parent)=>{
         const parentLength = parents.length;
         const rect = el.getBoundingClientRect();
@@ -75,6 +87,27 @@ const ComponentToolbarPreview = (props)=>{
     }, [
         props.tag
     ]);
+    const productId = useMemo(()=>{
+        const ele = document.querySelector(`[data-uid="${parentProductUid}"]`);
+        return ele?.getAttribute('data-product-id');
+    }, [
+        parentProductUid
+    ]);
+    const shopName = useMemo(()=>{
+        const pattern = /^(?:https?:\/\/)?([^/]+)\.myshopify\.com/;
+        if (storefrontUrl) {
+            return storefrontUrl.match(pattern)?.[1];
+        }
+        return '';
+    }, [
+        storefrontUrl
+    ]);
+    const shopifyEditLink = useMemo(()=>{
+        return productId ? `https://admin.shopify.com/store/${shopName}/products/${productId}` : '';
+    }, [
+        productId,
+        shopName
+    ]);
     // Get parents
     const onActiveComponent = useCallback((e)=>{
         const detail = e.detail;
@@ -93,6 +126,10 @@ const ComponentToolbarPreview = (props)=>{
                 return true;
             }).slice(0, 3);
             setParents(currentParents);
+            const parentFindUid = currentParents.find((item)=>item.tag === 'Product')?.uid;
+            if (parentFindUid) {
+                setParentProductUid(parentFindUid);
+            }
         } else {
             setParents([]);
             setIsShowParent(false);
@@ -164,6 +201,9 @@ const ComponentToolbarPreview = (props)=>{
         });
         window.dispatchEvent(event);
     };
+    const goToShopifyEditLink = ()=>{
+        window.open(shopifyEditLink, '_blank');
+    };
     const onDelete = (e)=>{
         e.preventDefault();
         e.stopPropagation();
@@ -171,7 +211,8 @@ const ComponentToolbarPreview = (props)=>{
             bubbles: true,
             detail: {
                 componentUid: props.uid,
-                isThemeSection: isThemeSection
+                isThemeSection,
+                isShopifySection
             }
         });
         window.dispatchEvent(event);
@@ -187,7 +228,8 @@ const ComponentToolbarPreview = (props)=>{
             bubbles: true,
             detail: {
                 componentUid: props.uid,
-                isThemeSection: isThemeSection
+                isThemeSection,
+                isShopifySection
             }
         });
         window.dispatchEvent(event);
@@ -236,6 +278,9 @@ const ComponentToolbarPreview = (props)=>{
         return false;
     };
     const getSectionName = ()=>{
+        if (isShopifySection) {
+            return props.name?.includes('Shopify section:') ? props.name : `Shopify section: ${props.name}`;
+        }
         const checkRenamedSection = props.name && props.name === `Section ${props.uid}`;
         if (getSectionNumber() >= SECTION_LIMIT - 5) {
             return `${checkRenamedSection ? 'Section' : props?.name} ${getIndexSection() + 1}/${SECTION_LIMIT}`;
@@ -252,6 +297,7 @@ const ComponentToolbarPreview = (props)=>{
                 "data-toolbar": true,
                 "data-toolbar-section": props.tag == 'Section',
                 "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
+                "data-toolbar-shopify-section": props.tag == 'Section' && !!isShopifySection,
                 "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
                 children: [
                     /*#__PURE__*/ jsxs("div", {
@@ -294,9 +340,39 @@ const ComponentToolbarPreview = (props)=>{
                                     ]
                                 })
                             }),
-                            props.tag == 'Section' ? /*#__PURE__*/ jsx("div", {
+                            props.tag == 'Section' ? /*#__PURE__*/ jsxs("div", {
                                 "data-toolbar-name": true,
-                                children: getSectionName()
+                                children: [
+                                    getSectionName(),
+                                    props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxs("svg", {
+                                        "data-toolbar-visibility": true,
+                                        width: "20",
+                                        height: "20",
+                                        viewBox: "0 0 20 20",
+                                        fill: "none",
+                                        xmlns: "http://www.w3.org/2000/svg",
+                                        children: [
+                                            /*#__PURE__*/ jsx("path", {
+                                                fillRule: "evenodd",
+                                                clipRule: "evenodd",
+                                                d: "M13.1252 9.99773C13.1243 8.27226 11.7248 6.87423 9.99935 6.87506C8.27386 6.87561 6.87518 8.27455 6.87518 10.0001C6.87518 11.7259 8.27429 13.1251 10.0002 13.1251C11.7257 13.1251 13.125 11.727 13.1252 10.0011V9.99773ZM9.99985 8.12506C11.035 8.12451 11.8746 8.96322 11.8752 9.99839V10.0004C11.8752 11.0357 11.0359 11.8751 10.0002 11.8751C8.96465 11.8751 8.12518 11.0356 8.12518 10.0001C8.12518 8.96472 8.96451 8.12533 9.99985 8.12506Z",
+                                                fill: "#F9F9F9"
+                                            }),
+                                            /*#__PURE__*/ jsx("path", {
+                                                fillRule: "evenodd",
+                                                clipRule: "evenodd",
+                                                d: "M9.99885 4.37593C5.66421 4.37604 2.80603 7.64523 1.79548 9.00983C1.35636 9.60279 1.35918 10.4 1.80012 10.9902C2.81706 12.3514 5.69374 15.6241 9.99886 15.6241C14.3806 15.6241 17.2194 12.3452 18.2168 10.9808C18.6473 10.392 18.6442 9.60472 18.211 9.01902C17.2056 7.65938 14.3429 4.37583 9.99885 4.37593ZM2.80002 9.75374C3.77049 8.44326 6.30207 5.62602 9.99888 5.62593C13.7041 5.62585 16.24 8.45598 17.206 9.76225C17.3146 9.9091 17.3149 10.0965 17.2077 10.2431C16.254 11.5477 13.7416 14.3741 9.99886 14.3741C6.33149 14.3741 3.78173 11.5541 2.80152 10.242C2.69021 10.0931 2.69001 9.90229 2.80002 9.75374Z",
+                                                fill: "#F9F9F9"
+                                            }),
+                                            /*#__PURE__*/ jsx("path", {
+                                                fillRule: "evenodd",
+                                                clipRule: "evenodd",
+                                                d: "M18.0763 3.26988C18.3415 3.58809 18.2985 4.06101 17.9803 4.32619L2.98032 16.8262C2.66211 17.0914 2.18919 17.0484 1.92402 16.7302C1.65884 16.412 1.70184 15.939 2.02004 15.6739L17.02 3.17385C17.3383 2.90868 17.8112 2.95167 18.0763 3.26988Z",
+                                                fill: "#F9F9F9"
+                                            })
+                                        ]
+                                    })
+                                ]
                             }) : /*#__PURE__*/ jsx("div", {
                                 "data-toolbar-name": true,
                                 children: toolbarName()
@@ -376,7 +452,10 @@ const ComponentToolbarPreview = (props)=>{
                             ]
                         }, parent.uid);
                     }),
-                    props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
+                    props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && !props.isShopifySection && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
+                        ...props
+                    }),
+                    !props.isShopifySection && ableGenerateContentElements.includes(props.tag) && /*#__PURE__*/ jsx(AIContentGenerator, {
                         ...props
                     }),
                     props.tag == 'Sticky' && /*#__PURE__*/ jsx("div", {
@@ -397,6 +476,42 @@ const ComponentToolbarPreview = (props)=>{
                             })
                         })
                     }),
+                    editProductElementList.includes(toolbarName() ?? '') && /*#__PURE__*/ jsx(Tooltip, {
+                        "data-toolbar-title": true,
+                        enable: true,
+                        "data-toolbar-disable": false,
+                        text: "Edit content in Shopify",
+                        position: "top",
+                        onClick: goToShopifyEditLink,
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxs("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ jsx("path", {
+                                    fillRule: "evenodd",
+                                    clipRule: "evenodd",
+                                    d: "M8.61129 2.47348C8.61129 2.47348 8.47099 2.51557 8.23248 2.59274C8.19039 2.46647 8.13427 2.30512 8.05009 2.15079C7.78352 1.6387 7.39068 1.37212 6.91366 1.36511C6.87858 1.36511 6.85052 1.36511 6.81545 1.37212C6.80843 1.36511 6.80142 1.35634 6.7944 1.34757C6.78739 1.3388 6.78037 1.33003 6.77336 1.32302C6.56992 1.09854 6.30335 0.993314 5.98768 1.00033C5.37737 1.02137 4.76706 1.46332 4.269 2.249C3.91825 2.80319 3.65869 3.49767 3.58153 4.03082C3.38823 4.09074 3.21092 4.14586 3.05516 4.19429C2.64595 4.32151 2.3851 4.40261 2.37494 4.40261C2.01718 4.51485 2.01016 4.52888 1.96106 4.85859C1.92598 5.11113 1 12.2945 1 12.2945L7.14764 13.3583C7.18955 13.118 7.30454 12.8953 7.47848 12.7214L8.70249 11.4974V2.45945C8.66741 2.45945 8.63234 2.46647 8.61129 2.47348ZM6.82948 3.02767L6.62554 3.09101C6.27515 3.19989 5.90094 3.31617 5.5317 3.42752C5.65797 2.94349 5.89648 2.46647 6.19111 2.15079C6.30335 2.03154 6.45067 1.90527 6.63306 1.8281C6.80142 2.18587 6.83649 2.68393 6.82948 3.02767ZM5.99469 1.4072C6.13499 1.4072 6.26126 1.43526 6.36649 1.50541C6.19813 1.58959 6.0438 1.71586 5.88947 1.87721C5.50364 2.29109 5.202 2.94349 5.08274 3.56783C4.74459 3.66991 4.41804 3.77199 4.10838 3.8688L4.01646 3.89753C4.22691 2.90841 5.05468 1.43526 5.99469 1.4072ZM4.80214 7.0122C4.81874 7.26957 5.09737 7.44833 5.43473 7.66478C5.95252 7.99699 6.60867 8.41798 6.66813 9.3482C6.7453 10.5548 6.02977 11.3826 4.99154 11.4457C3.7569 11.5229 3.06943 10.7933 3.06943 10.7933L3.32899 9.67791C3.32899 9.67791 4.01646 10.197 4.56363 10.1619C4.92139 10.1409 5.04767 9.84627 5.04065 9.64283C5.01607 9.26796 4.73308 9.06671 4.41569 8.84101C4.00848 8.55142 3.54465 8.22157 3.49735 7.4331C3.42018 6.24756 4.19885 5.05501 5.91051 4.94277C6.57694 4.90068 6.91366 5.06904 6.91366 5.06904L6.52082 6.53518C6.52082 6.53518 6.08589 6.33876 5.56678 6.36682C4.80915 6.41592 4.79512 6.89294 4.80214 7.0122ZM7.23635 2.9014C7.22934 2.59274 7.19426 2.15781 7.04695 1.78601C7.50994 1.87721 7.74143 2.39632 7.83964 2.71199C7.70008 2.75665 7.54275 2.80575 7.37118 2.8593L7.23635 2.9014Z",
+                                    fill: "currentColor"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M10.7719 3.44156C10.7757 3.47543 11.1733 6.16931 11.541 8.65883L8.95503 11.2448V2.57871C9.16548 2.78214 9.71265 3.31528 9.71265 3.31528C9.71265 3.31528 10.6106 3.32931 10.6597 3.33633C10.7088 3.34334 10.7649 3.37842 10.7719 3.44156Z",
+                                    fill: "currentColor"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M14.8056 8.644L14.0424 7.88088C13.7832 7.62163 13.3629 7.62163 13.1036 7.88088L12.1519 8.83258L13.8539 10.5345L14.8056 9.58282C15.0648 9.32357 15.0648 8.90325 14.8056 8.644Z",
+                                    fill: "currentColor"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M7.85018 13.0942L11.6419 9.30246L13.3438 11.0044L9.55212 14.7961C9.43782 14.9104 9.28573 14.9791 9.1244 14.9892L7.93427 15.0641C7.73484 15.0767 7.56961 14.9114 7.58216 14.712L7.65706 13.5219C7.66721 13.3606 7.73588 13.2085 7.85018 13.0942Z",
+                                    fill: "currentColor"
+                                })
+                            ]
+                        })
+                    }),
                     /*#__PURE__*/ jsx(Tooltip, {
                         enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
                         text: "Page has reached Shopify’s 25 section-limit",
@@ -443,13 +558,14 @@ const ComponentToolbarPreview = (props)=>{
                     })
                 ]
             }, props.uid),
-            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatus, {
+            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatusWrapper, {
                 ...props
             }),
             /*#__PURE__*/ jsx("div", {
                 "data-outline": true,
                 "data-outline-section": props.tag == 'Section',
                 "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
+                "data-outline-shopify-section": props.tag == 'Section' && !!isShopifySection,
                 "data-outline-limit": getIndexSection() >= SECTION_LIMIT
             }, 'outline-' + props.uid),
             props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxs(Fragment, {
@@ -496,12 +612,15 @@ const ComponentToolbarPreview = (props)=>{
                     })
                 ]
             }),
+            ableGenerateContentElements.includes(props.tag) && /*#__PURE__*/ jsx(AIGenContentLoading, {
+                ...props
+            }),
             /*#__PURE__*/ jsx(Resize, {
                 ...props
             })
         ]
     });
 };
-var ComponentToolbarPreview$1 = /*#__PURE__*/ memo(ComponentToolbarPreview);
+var ComponentToolbarPreview$1 = /*#__PURE__*/ memo(ComponentToolbarPreview); /* gem-lint/disallow-import-from-package-path */
 
 export { ComponentToolbarPreview$1 as default };

package/dist/esm/components/ComponentWrapperPreview.js

@@ -10,8 +10,10 @@ import 'swr';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
 import { usePageType } from '../hooks/shop.js';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import '../hooks/useCartUI.js';
+import { cls } from '../helpers/cls.js';
 import '../helpers/convert.js';
 
 const ComponentWrapperPreview = ({ children, ...props })=>{
@@ -37,6 +39,10 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     if (props.tag === 'Section' && props.isThemeSection) {
         customProps['data-theme-section'] = true;
     }
+    if (props.tag === 'Section' && props.isShopifySection) {
+        customProps['data-shopify-section'] = true;
+        customProps['data-toolbar-wrap'] = true;
+    }
     // Build editor configs
     if (props.editorConfigs) {
         const editorConfigs = props.editorConfigs;
@@ -91,6 +97,40 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         'data-component-label': props.label,
         'data-not-droppable': isNotDroppable(props.tag)
     };
+    const ShopifySection = ({ name, visibility })=>{
+        return /*#__PURE__*/ jsxs("div", {
+            className: cls('gp-flex gp-items-center gp-justify-center gp-gap-[8px] gp-bg-[#F4F4F4] gp-p-[16px] gp-border gp-border-[#D6D6D6]', {
+                'gp-opacity-60': !visibility
+            }),
+            children: [
+                /*#__PURE__*/ jsxs("svg", {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: [
+                        /*#__PURE__*/ jsx("path", {
+                            d: "M19.1475 5.16194C19.1416 5.1148 19.1197 5.0713 19.0857 5.03911C19.0516 5.00692 19.0076 4.9881 18.9614 4.98597C18.8835 4.98597 17.3469 4.95397 17.3469 4.95397C17.3469 4.95397 16.0588 3.67419 15.9342 3.5311C15.8104 3.40312 15.5619 3.43512 15.4684 3.46711L14.8166 3.67508C14.7361 3.40491 14.6323 3.14259 14.5067 2.89121C14.0566 1.99536 13.3727 1.51544 12.5659 1.51544C12.5044 1.51544 12.4577 1.51544 12.3954 1.53144C12.3642 1.49945 12.3486 1.46745 12.3175 1.45145C11.9608 1.06752 11.5107 0.875552 10.967 0.891549C9.92824 0.923543 8.88772 1.70741 8.03419 3.08318C7.44467 4.05901 6.99453 5.27392 6.8543 6.21776C5.65969 6.6017 4.82087 6.87365 4.79057 6.87365C4.18461 7.06562 4.16903 7.08161 4.09199 7.67351C4.06082 8.12144 2.47754 20.7415 2.47754 20.7415L15.7636 23.1091L21.522 21.6374C21.5064 21.6374 19.1631 5.27392 19.1475 5.16194ZM14.1492 3.89904C13.8062 4.00572 13.4648 4.11772 13.1251 4.23498C13.1251 3.69108 13.0472 2.92321 12.8143 2.28331C13.6064 2.41129 13.9942 3.33914 14.1492 3.89904ZM12.4265 4.44206C11.7279 4.66602 10.9679 4.90598 10.207 5.14594C10.4243 4.29808 10.8277 3.46623 11.3245 2.90632C11.533 2.66965 11.7863 2.47913 12.069 2.34641C12.3806 2.9712 12.4421 3.85105 12.4265 4.44206ZM10.9982 1.61143C11.2466 1.61143 11.4483 1.65942 11.6197 1.7874C11.3127 1.95192 11.0387 2.17444 10.8121 2.44329C10.1455 3.17916 9.63305 4.31408 9.43135 5.4179C8.79423 5.62586 8.17356 5.81783 7.61521 5.9938C7.98744 4.25009 9.39933 1.65942 10.9982 1.61143Z",
+                            fill: "#95BF47"
+                        }),
+                        /*#__PURE__*/ jsx("path", {
+                            d: "M18.9647 4.94709C18.8851 4.94709 17.3155 4.91503 17.3155 4.91503C17.3155 4.91503 15.9981 3.63242 15.8716 3.48812C15.8261 3.43951 15.7635 3.41074 15.6973 3.40796V23.1094L21.5828 21.6344L19.1709 5.12345C19.1399 5.01122 19.0444 4.94709 18.9647 4.94709Z",
+                            fill: "#5E8E3E"
+                        }),
+                        /*#__PURE__*/ jsx("path", {
+                            d: "M13.0575 8.51577L12.3029 10.8908C12.3029 10.8908 11.4602 10.5663 10.4599 10.6253C8.98595 10.6991 8.98595 11.4809 8.98595 11.6727C9.07404 12.7348 12.39 12.9709 12.5828 15.4631C12.7238 17.4251 11.3545 18.7675 9.35396 18.8708C6.96778 18.9733 5.65137 17.7939 5.65137 17.7939L6.16032 15.9794C6.16032 15.9794 7.49435 16.8203 8.5465 16.7613C9.23162 16.7318 9.4949 16.245 9.45967 15.9204C9.35396 14.5337 6.65165 14.6223 6.47645 12.3365C6.33551 10.4188 7.82712 8.48626 11.1265 8.30924C12.4076 8.23548 13.0575 8.51577 13.0575 8.51577Z",
+                            fill: "white"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "gp-text-[#212121] gp-text-[14px] gp-leading-[24px] gp-font-medium",
+                    children: name
+                })
+            ]
+        });
+    };
     if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
@@ -105,7 +145,10 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                     builderAttrs,
                     advanced,
                     children: [
-                        children.props['children'],
+                        props.isShopifySection ? /*#__PURE__*/ jsx(ShopifySection, {
+                            name: props.name ?? '',
+                            visibility: !!props.isShopifyVisibility
+                        }) : children.props['children'],
                         /*#__PURE__*/ jsx(ComponentToolbarPreview, {
                             ...props
                         })

package/dist/esm/components/Render.liquid.js

@@ -5,11 +5,14 @@ import 'zustand';
 import 'swr';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import '../hooks/useCartUI.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
 import { disableWrap, customRenderChildren } from './constant.js';
+import 'classnames';
+import 'dayjs';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { baseAssetURL, isLocalEnv } from '../helpers/convert.js';
 import { RenderIf, template } from '../helpers/render.js';

package/dist/esm/components/RenderCustomCode.js

@@ -7,10 +7,13 @@ import 'swr';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
 import { useEditorMode } from '../hooks/shop.js';
+import 'swr/infinite';
 import 'vanilla-lazyload';
 import '../hooks/useCartUI.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
+import 'classnames';
+import 'dayjs';
 import '../helpers/convert.js';
 
 const RenderCustomCode = ({ uid, advanced })=>{

package/dist/esm/components/RenderPreview.js

@@ -41,6 +41,7 @@ const RenderPreview = ({ uid, ...passProps })=>{
                     setting: item.settings,
                     ...passProps,
                     children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderPreviewMemo, {
+                            ...passProps,
                             uid: id
                         }, id))
                 }) : /*#__PURE__*/ jsx(Component, {

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

@@ -0,0 +1,250 @@
+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 { useShopStore } from '../../contexts/ShopContext.js';
+import '@gem-sdk/adapter-shopify';
+import 'swr';
+import 'swr/mutation';
+import 'swr/infinite';
+import 'vanilla-lazyload';
+import '../../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import dayjs from 'dayjs';
+import '../../helpers/convert.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-relative",
+        ref: genTool,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "gp-gen-content-toolbar gp-border-r-[#6a6a6a] gp-border-r gp-pr-1 gp-mr-1",
+                children: /*#__PURE__*/ jsxs("button", {
+                    className: classNames({
+                        'gp-bg-[#3B3B3B]': 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 };