@gem-sdk/pages 1.57.0-staging.8 → 1.57.0

package/dist/cjs/components/builder/Body.js

@@ -9,12 +9,20 @@ var CollectionGlobalProvider = require('../../pages/CollectionGlobalProvider.js'
 
 const Body = ({ pageType, isThemeSectionEditor })=>{
     const interactionData = core.usePageStore((s)=>s.interactionData);
+    const sidebarMode = core.usePageStore((s)=>s.sidebarMode);
     const isInteractionSelectModeClass = react.useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
         interactionData?.isSelectOnPage
     ]);
+    const isInteractionMode = react.useMemo(()=>sidebarMode === 'interaction' && !interactionData?.isSelectOnPage, [
+        sidebarMode,
+        interactionData?.isSelectOnPage
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         id: "storefront",
-        className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
+        className: core.cls(isThemeSectionEditor ? 'theme-section-editor' : '', pageType === 'POST_PURCHASE' ? 'post-purchase-page' : '', isInteractionSelectModeClass),
+        style: {
+            pointerEvents: isInteractionMode ? 'none' : 'auto'
+        },
         children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
             children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
                 uid: "ROOT"

package/dist/cjs/components/builder/Header.js

@@ -22,7 +22,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate, openPageSetting } = props;
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
-    const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
+    const sidebarMode = core.usePageStore((s)=>s.sidebarMode);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -181,7 +181,7 @@ const Header = (props)=>{
                     ]
                 })
             }),
-            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
+            sidebarMode === 'interaction' && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
         ]
     });
 };

package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js

@@ -14,6 +14,7 @@ const InteractionSelectOnPageHeader = ()=>{
     const [hoverOption, setHoverOption] = react.useState(null);
     const [openDropdown, setOpenDropdown] = react.useState(false);
     const popupRef = react.useRef(null);
+    const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const handleSetInteraction = (type)=>{
         setOpenDropdown(false);
         setInteractionSelectType(type);
@@ -70,7 +71,7 @@ const InteractionSelectOnPageHeader = ()=>{
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx("header", {
+            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx("header", {
                 className: "gp-flex gp-text-[12px] gp-justify-center gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-[1000] gp-bg-[#151515] gp-text-white interaction-select-mode-header",
                 children: /*#__PURE__*/ jsxRuntime.jsxs("section", {
                     className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-2",
@@ -178,7 +179,9 @@ const InteractionSelectOnPageHeader = ()=>{
                 })
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999]  ${isShowOverlay ? 'gp-z-[999]  gp-bg-[#3c67ff]/[0.25]' : 'gp-pointer-events-none'}`,
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999]  ${isShowOverlay ? 'gp-z-[999]  gp-bg-[#3c67ff]/[0.25]' : ''}
+        ${isSelectOnPage ? 'gp-pointer-events-none' : 'gp-pointer-events-auto'}
+        `,
                 style: {
                     height: 'calc(100% - 40px)'
                 }

package/dist/cjs/components/builder/Toolbar.js

@@ -259,32 +259,6 @@ const Toolbar = ()=>{
         setFocusTextEditor(false);
         if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
     }, []);
-    const watchComponentReRender = ($el, callback)=>{
-        // editor:component:render
-        const onComponentReRender = (e)=>{
-            const detail = e.detail;
-            if (detail?.componentUid == currentComponentActive.current?.componentUid) {
-                callback();
-            }
-        };
-        window.removeEventListener('editor:component:render', onComponentReRender);
-        window.addEventListener('editor:component:render', onComponentReRender);
-        const componentTag = $el.getAttribute('data-component-tag');
-        // hotfix cho sale funnel release, nhưng cần tìm solution cho phần này
-        if (componentTag && !_const.COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(componentTag)) {
-            const $images = $el.querySelectorAll('img');
-            if ($images?.length) {
-                $images.forEach(($img)=>{
-                    $img.addEventListener('load', ()=>{
-                        callback();
-                    });
-                });
-            }
-        }
-        stopWatchReRenderComponent.current = ()=>{
-            window.removeEventListener('editor:component:render', onComponentReRender);
-        };
-    };
     const setActiveComponentSpacing = react.useCallback(({ $component })=>{
         if (!$component) return;
         const style = getComputedStyle($component);
@@ -375,16 +349,6 @@ const Toolbar = ()=>{
             $component
         });
         removeHoverComponent();
-        // Reactive when component re-render
-        watchComponentReRender($component, ()=>{
-            setActiveComponent({
-                componentUid,
-                productId,
-                articleId,
-                timeAwait: 2000,
-                forceReActive: true
-            });
-        });
     }, [
         removeActiveComponent,
         removeHoverComponent,
@@ -404,9 +368,10 @@ const Toolbar = ()=>{
             }
         } else {
             if (currentComponentActive.current?.componentUid) {
-                const componentUid = currentComponentActive.current?.componentUid;
-                const productId = currentComponentActive.current?.productId;
-                const $component = await waitForElementToExist.waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
+                const selector = getSelectorComponent({
+                    ...currentComponentActive.current
+                });
+                const $component = await waitForElementToExist.waitForElementToExist(selector, 500);
                 if ($component) {
                     const $toolbar = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-toolbar');
                     const $outline = getChildrenByAttrSelector.getChildrenByAttrSelector($component, 'data-outline');
@@ -442,10 +407,13 @@ const Toolbar = ()=>{
         }
     }, []);
     const setShowParents = async ({ value })=>{
-        if (!value) {
+        if (!value || !currentComponentActive.current) {
             return;
         }
-        const $component = await waitForElementToExist.waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
+        const selector = getSelectorComponent({
+            ...currentComponentActive.current
+        });
+        const $component = await waitForElementToExist.waitForElementToExist(selector, 500);
         if ($component) {
             const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
             if ($parents.length) {
@@ -685,6 +653,14 @@ const Toolbar = ()=>{
     }, [
         isDragging
     ]);
+    const onComponentReRender = (e)=>{
+        const detail = e.detail;
+        if (currentComponentActive.current?.componentUid && detail?.componentUid == currentComponentActive.current?.componentUid) {
+            setActiveComponent({
+                ...currentComponentActive.current
+            });
+        }
+    };
     /* Register event */ react.useEffect(()=>{
         document.addEventListener('mousemove', onMouseMove);
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -694,6 +670,7 @@ const Toolbar = ()=>{
         window.addEventListener('editor:toolbar:show-parents', onShowParents);
         window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
         window.addEventListener('editor:hover-component', onHoverComponent);
+        window.addEventListener('editor:component:render', onComponentReRender);
         return ()=>{
             document.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('editor:active-component', onActiveComponent);
@@ -703,6 +680,7 @@ const Toolbar = ()=>{
             window.removeEventListener('editor:toolbar:show-parents', onShowParents);
             window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
             window.removeEventListener('editor:hover-component', onHoverComponent);
+            window.removeEventListener('editor:component:render', onComponentReRender);
         };
     }, [
         onMouseMove,
@@ -712,7 +690,8 @@ const Toolbar = ()=>{
         onIsEditingTextEditor,
         onShowParents,
         onResizeSpacing,
-        onHoverComponent
+        onHoverComponent,
+        onComponentReRender
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };

package/dist/cjs/components/builder/Toolbox.js

@@ -41,6 +41,7 @@ const Toolbox = ()=>{
     const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
     const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
     const setInteractionSettingType = core.usePageStore((s)=>s.setInteractionSettingType);
+    const setSidebarMode = core.usePageStore((s)=>s.setSidebarMode);
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
@@ -359,6 +360,13 @@ const Toolbox = ()=>{
     }, [
         setInteractionSettingType
     ]);
+    const onChangeSidebarMode = react.useCallback((e)=>{
+        const mode = e.detail.mode;
+        console.log(mode);
+        setSidebarMode(mode);
+    }, [
+        setSidebarMode
+    ]);
     const onUpdateInteractionItem = react.useCallback((e)=>{
         const interactionItem = e.detail;
         setInteractionItem(interactionItem);
@@ -396,6 +404,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
         window.addEventListener('update-interaction-item', onUpdateInteractionItem);
         window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+        window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -443,7 +452,8 @@ const Toolbox = ()=>{
         onLimitCreateThemeSection,
         onUpdateInteractionItem,
         onUpdateInteractionIsSelectOnPage,
-        onUpdateInteractionSettingType
+        onUpdateInteractionSettingType,
+        onChangeSidebarMode
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/cjs/components/builder/toolbar/const.js

@@ -2,10 +2,6 @@
 
 const TOOLBAR_HOVER_HEIGHT = 24;
 const TOOLBAR_ACTIVE_HEIGHT = 32;
-const COMPONENTS_TAG_NOT_LOAD_IMAGES = [
-    'PostPurchaseProductImages'
-];
 
-exports.COMPONENTS_TAG_NOT_LOAD_IMAGES = COMPONENTS_TAG_NOT_LOAD_IMAGES;
 exports.TOOLBAR_ACTIVE_HEIGHT = TOOLBAR_ACTIVE_HEIGHT;
 exports.TOOLBAR_HOVER_HEIGHT = TOOLBAR_HOVER_HEIGHT;

package/dist/cjs/components/builder/toolbar/utils/waitForElementToExist.js

@@ -2,6 +2,8 @@
 
 const waitForElementToExist = (selector, timeout = 200)=>{
     return new Promise((resolve)=>{
+        let intervalID = null;
+        let timeoutID = null;
         const findEl = ()=>{
             const el = document.body.querySelector('#storefront')?.querySelector(selector);
             if (el) {
@@ -11,10 +13,10 @@ const waitForElementToExist = (selector, timeout = 200)=>{
             }
         };
         findEl();
-        const intervalID = setInterval(()=>{
+        intervalID = setInterval(()=>{
             findEl();
         }, 50);
-        const timeoutID = setTimeout(()=>{
+        timeoutID = setTimeout(()=>{
             if (intervalID) clearInterval(intervalID);
             if (timeoutID) clearTimeout(timeoutID);
             resolve(null);

package/dist/cjs/libs/api/get-static-page-props-preview.js

@@ -139,8 +139,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
                 tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
                 customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
-                customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
-                interaction: dataBuilder?.interaction
+                customCodeBody: dataBuilder.themePageCustomCode?.body ?? null
             });
         } catch (err) {
             nextjs.captureException(err);

package/dist/esm/components/builder/Body.js

@@ -1,16 +1,24 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { usePageStore, RenderPreview } from '@gem-sdk/core';
+import { usePageStore, cls, RenderPreview } from '@gem-sdk/core';
 import CollectionGlobalProvider from '../../pages/CollectionGlobalProvider.js';
 
 const Body = ({ pageType, isThemeSectionEditor })=>{
     const interactionData = usePageStore((s)=>s.interactionData);
+    const sidebarMode = usePageStore((s)=>s.sidebarMode);
     const isInteractionSelectModeClass = useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
         interactionData?.isSelectOnPage
     ]);
+    const isInteractionMode = useMemo(()=>sidebarMode === 'interaction' && !interactionData?.isSelectOnPage, [
+        sidebarMode,
+        interactionData?.isSelectOnPage
+    ]);
     return /*#__PURE__*/ jsx("div", {
         id: "storefront",
-        className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
+        className: cls(isThemeSectionEditor ? 'theme-section-editor' : '', pageType === 'POST_PURCHASE' ? 'post-purchase-page' : '', isInteractionSelectModeClass),
+        style: {
+            pointerEvents: isInteractionMode ? 'none' : 'auto'
+        },
         children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
             children: /*#__PURE__*/ jsx(RenderPreview, {
                 uid: "ROOT"

package/dist/esm/components/builder/Header.js

@@ -18,7 +18,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate, openPageSetting } = props;
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
-    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
+    const sidebarMode = usePageStore((s)=>s.sidebarMode);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -177,7 +177,7 @@ const Header = (props)=>{
                     ]
                 })
             }),
-            isSelectOnPage && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
+            sidebarMode === 'interaction' && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
         ]
     });
 };

package/dist/esm/components/builder/InteractionSelectOnPageHeader.js

@@ -10,6 +10,7 @@ const InteractionSelectOnPageHeader = ()=>{
     const [hoverOption, setHoverOption] = useState(null);
     const [openDropdown, setOpenDropdown] = useState(false);
     const popupRef = useRef(null);
+    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const handleSetInteraction = (type)=>{
         setOpenDropdown(false);
         setInteractionSelectType(type);
@@ -66,7 +67,7 @@ const InteractionSelectOnPageHeader = ()=>{
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx("header", {
+            isSelectOnPage && /*#__PURE__*/ jsx("header", {
                 className: "gp-flex gp-text-[12px] gp-justify-center gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-[1000] gp-bg-[#151515] gp-text-white interaction-select-mode-header",
                 children: /*#__PURE__*/ jsxs("section", {
                     className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-2",
@@ -174,7 +175,9 @@ const InteractionSelectOnPageHeader = ()=>{
                 })
             }),
             /*#__PURE__*/ jsx("div", {
-                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999]  ${isShowOverlay ? 'gp-z-[999]  gp-bg-[#3c67ff]/[0.25]' : 'gp-pointer-events-none'}`,
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999]  ${isShowOverlay ? 'gp-z-[999]  gp-bg-[#3c67ff]/[0.25]' : ''}
+        ${isSelectOnPage ? 'gp-pointer-events-none' : 'gp-pointer-events-auto'}
+        `,
                 style: {
                     height: 'calc(100% - 40px)'
                 }

package/dist/esm/components/builder/Toolbar.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { memo, useRef, useCallback, useEffect } from 'react';
 import { getDOMElementParents } from './toolbar/utils/getDOMElementParents.js';
-import { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT, COMPONENTS_TAG_NOT_LOAD_IMAGES } from './toolbar/const.js';
+import { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT } from './toolbar/const.js';
 import { getChildrenByAttrSelector } from './toolbar/utils/getChildrenByAttrSelector.js';
 import { findOverflowParent } from './toolbar/utils/findOverflowParent.js';
 import { waitForElementToExist } from './toolbar/utils/waitForElementToExist.js';
@@ -255,32 +255,6 @@ const Toolbar = ()=>{
         setFocusTextEditor(false);
         if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
     }, []);
-    const watchComponentReRender = ($el, callback)=>{
-        // editor:component:render
-        const onComponentReRender = (e)=>{
-            const detail = e.detail;
-            if (detail?.componentUid == currentComponentActive.current?.componentUid) {
-                callback();
-            }
-        };
-        window.removeEventListener('editor:component:render', onComponentReRender);
-        window.addEventListener('editor:component:render', onComponentReRender);
-        const componentTag = $el.getAttribute('data-component-tag');
-        // hotfix cho sale funnel release, nhưng cần tìm solution cho phần này
-        if (componentTag && !COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(componentTag)) {
-            const $images = $el.querySelectorAll('img');
-            if ($images?.length) {
-                $images.forEach(($img)=>{
-                    $img.addEventListener('load', ()=>{
-                        callback();
-                    });
-                });
-            }
-        }
-        stopWatchReRenderComponent.current = ()=>{
-            window.removeEventListener('editor:component:render', onComponentReRender);
-        };
-    };
     const setActiveComponentSpacing = useCallback(({ $component })=>{
         if (!$component) return;
         const style = getComputedStyle($component);
@@ -371,16 +345,6 @@ const Toolbar = ()=>{
             $component
         });
         removeHoverComponent();
-        // Reactive when component re-render
-        watchComponentReRender($component, ()=>{
-            setActiveComponent({
-                componentUid,
-                productId,
-                articleId,
-                timeAwait: 2000,
-                forceReActive: true
-            });
-        });
     }, [
         removeActiveComponent,
         removeHoverComponent,
@@ -400,9 +364,10 @@ const Toolbar = ()=>{
             }
         } else {
             if (currentComponentActive.current?.componentUid) {
-                const componentUid = currentComponentActive.current?.componentUid;
-                const productId = currentComponentActive.current?.productId;
-                const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
+                const selector = getSelectorComponent({
+                    ...currentComponentActive.current
+                });
+                const $component = await waitForElementToExist(selector, 500);
                 if ($component) {
                     const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
                     const $outline = getChildrenByAttrSelector($component, 'data-outline');
@@ -438,10 +403,13 @@ const Toolbar = ()=>{
         }
     }, []);
     const setShowParents = async ({ value })=>{
-        if (!value) {
+        if (!value || !currentComponentActive.current) {
             return;
         }
-        const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
+        const selector = getSelectorComponent({
+            ...currentComponentActive.current
+        });
+        const $component = await waitForElementToExist(selector, 500);
         if ($component) {
             const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
             if ($parents.length) {
@@ -681,6 +649,14 @@ const Toolbar = ()=>{
     }, [
         isDragging
     ]);
+    const onComponentReRender = (e)=>{
+        const detail = e.detail;
+        if (currentComponentActive.current?.componentUid && detail?.componentUid == currentComponentActive.current?.componentUid) {
+            setActiveComponent({
+                ...currentComponentActive.current
+            });
+        }
+    };
     /* Register event */ useEffect(()=>{
         document.addEventListener('mousemove', onMouseMove);
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -690,6 +666,7 @@ const Toolbar = ()=>{
         window.addEventListener('editor:toolbar:show-parents', onShowParents);
         window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
         window.addEventListener('editor:hover-component', onHoverComponent);
+        window.addEventListener('editor:component:render', onComponentReRender);
         return ()=>{
             document.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('editor:active-component', onActiveComponent);
@@ -699,6 +676,7 @@ const Toolbar = ()=>{
             window.removeEventListener('editor:toolbar:show-parents', onShowParents);
             window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
             window.removeEventListener('editor:hover-component', onHoverComponent);
+            window.removeEventListener('editor:component:render', onComponentReRender);
         };
     }, [
         onMouseMove,
@@ -708,7 +686,8 @@ const Toolbar = ()=>{
         onIsEditingTextEditor,
         onShowParents,
         onResizeSpacing,
-        onHoverComponent
+        onHoverComponent,
+        onComponentReRender
     ]);
     return /*#__PURE__*/ jsx(Fragment, {});
 };

package/dist/esm/components/builder/Toolbox.js

@@ -37,6 +37,7 @@ const Toolbox = ()=>{
     const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
     const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
     const setInteractionSettingType = usePageStore((s)=>s.setInteractionSettingType);
+    const setSidebarMode = usePageStore((s)=>s.setSidebarMode);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
@@ -355,6 +356,13 @@ const Toolbox = ()=>{
     }, [
         setInteractionSettingType
     ]);
+    const onChangeSidebarMode = useCallback((e)=>{
+        const mode = e.detail.mode;
+        console.log(mode);
+        setSidebarMode(mode);
+    }, [
+        setSidebarMode
+    ]);
     const onUpdateInteractionItem = useCallback((e)=>{
         const interactionItem = e.detail;
         setInteractionItem(interactionItem);
@@ -392,6 +400,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
         window.addEventListener('update-interaction-item', onUpdateInteractionItem);
         window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+        window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -439,7 +448,8 @@ const Toolbox = ()=>{
         onLimitCreateThemeSection,
         onUpdateInteractionItem,
         onUpdateInteractionIsSelectOnPage,
-        onUpdateInteractionSettingType
+        onUpdateInteractionSettingType,
+        onChangeSidebarMode
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

package/dist/esm/components/builder/toolbar/const.js

@@ -1,7 +1,4 @@
 const TOOLBAR_HOVER_HEIGHT = 24;
 const TOOLBAR_ACTIVE_HEIGHT = 32;
-const COMPONENTS_TAG_NOT_LOAD_IMAGES = [
-    'PostPurchaseProductImages'
-];
 
-export { COMPONENTS_TAG_NOT_LOAD_IMAGES, TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT };
+export { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT };

package/dist/esm/components/builder/toolbar/utils/waitForElementToExist.js

@@ -1,5 +1,7 @@
 const waitForElementToExist = (selector, timeout = 200)=>{
     return new Promise((resolve)=>{
+        let intervalID = null;
+        let timeoutID = null;
         const findEl = ()=>{
             const el = document.body.querySelector('#storefront')?.querySelector(selector);
             if (el) {
@@ -9,10 +11,10 @@ const waitForElementToExist = (selector, timeout = 200)=>{
             }
         };
         findEl();
-        const intervalID = setInterval(()=>{
+        intervalID = setInterval(()=>{
             findEl();
         }, 50);
-        const timeoutID = setTimeout(()=>{
+        timeoutID = setTimeout(()=>{
             if (intervalID) clearInterval(intervalID);
             if (timeoutID) clearTimeout(timeoutID);
             resolve(null);

package/dist/esm/libs/api/get-static-page-props-preview.js

@@ -137,8 +137,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
                 tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
                 customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
-                customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
-                interaction: dataBuilder?.interaction
+                customCodeBody: dataBuilder.themePageCustomCode?.body ?? null
             });
         } catch (err) {
             captureException(err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.57.0-staging.8",
+  "version": "1.57.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.57.0-staging.2",
-    "@gem-sdk/plugin-cookie-bar": "1.57.0-staging.2",
-    "@gem-sdk/plugin-quick-view": "1.57.0-staging.2",
-    "@gem-sdk/plugin-sticky-add-to-cart": "1.57.0-staging.2"
+    "@gem-sdk/core": "1.57.0",
+    "@gem-sdk/plugin-cookie-bar": "1.57.0",
+    "@gem-sdk/plugin-quick-view": "1.57.0",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.57.0"
   },
   "peerDependencies": {
     "next": ">=13"