@gem-sdk/pages 1.57.0-staging.0 → 1.57.0-staging.11

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

@@ -25,7 +25,6 @@ const Header = (props)=>{
     const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
-    console.log('isSelectOnPage', isSelectOnPage);
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {}),

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

@@ -86,7 +86,7 @@ const InteractionSelectOnPageHeader = ()=>{
                                             className: "gp-grow",
                                             children: title
                                         }),
-                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        settingType === 'TRIGGER' && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             className: "gp-w-[21px]",
                                             children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
                                                 width: "16",
@@ -104,7 +104,7 @@ const InteractionSelectOnPageHeader = ()=>{
                                         })
                                     ]
                                 }),
-                                openDropdown && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                openDropdown && settingType === 'TRIGGER' && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                     ref: popupRef,
                                     className: "gp-p-2 gp-flex gp-flex-col gp-absolute gp-top-[calc(100%_+_4px)] gp-w-[280px] gp-bg-[#151515] gp-rounded-xl gp-text-white",
                                     children: [

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,
@@ -685,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 */ react.useEffect(()=>{
         document.addEventListener('mousemove', onMouseMove);
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -694,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);
@@ -703,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,
@@ -712,7 +686,8 @@ const Toolbar = ()=>{
         onIsEditingTextEditor,
         onShowParents,
         onResizeSpacing,
-        onHoverComponent
+        onHoverComponent,
+        onComponentReRender
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };

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,8 +2,8 @@
 
 const waitForElementToExist = (selector, timeout = 200)=>{
     return new Promise((resolve)=>{
-        let intervalID;
-        let timeoutID;
+        let intervalID = null;
+        let timeoutID = null;
         const findEl = ()=>{
             const el = document.body.querySelector('#storefront')?.querySelector(selector);
             if (el) {

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

@@ -21,7 +21,6 @@ const Header = (props)=>{
     const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
-    console.log('isSelectOnPage', isSelectOnPage);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Devices, {}),

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

@@ -82,7 +82,7 @@ const InteractionSelectOnPageHeader = ()=>{
                                             className: "gp-grow",
                                             children: title
                                         }),
-                                        /*#__PURE__*/ jsx("div", {
+                                        settingType === 'TRIGGER' && /*#__PURE__*/ jsx("div", {
                                             className: "gp-w-[21px]",
                                             children: /*#__PURE__*/ jsx("svg", {
                                                 width: "16",
@@ -100,7 +100,7 @@ const InteractionSelectOnPageHeader = ()=>{
                                         })
                                     ]
                                 }),
-                                openDropdown && /*#__PURE__*/ jsxs("div", {
+                                openDropdown && settingType === 'TRIGGER' && /*#__PURE__*/ jsxs("div", {
                                     ref: popupRef,
                                     className: "gp-p-2 gp-flex gp-flex-col gp-absolute gp-top-[calc(100%_+_4px)] gp-w-[280px] gp-bg-[#151515] gp-rounded-xl gp-text-white",
                                     children: [

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,
@@ -681,6 +645,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 +662,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 +672,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 +682,8 @@ const Toolbar = ()=>{
         onIsEditingTextEditor,
         onShowParents,
         onResizeSpacing,
-        onHoverComponent
+        onHoverComponent,
+        onComponentReRender
     ]);
     return /*#__PURE__*/ jsx(Fragment, {});
 };

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,7 +1,7 @@
 const waitForElementToExist = (selector, timeout = 200)=>{
     return new Promise((resolve)=>{
-        let intervalID;
-        let timeoutID;
+        let intervalID = null;
+        let timeoutID = null;
         const findEl = ()=>{
             const el = document.body.querySelector('#storefront')?.querySelector(selector);
             if (el) {

package/package.json

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