@gem-sdk/pages 1.5.36 → 1.7.0

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

@@ -21,6 +21,7 @@ const Toolbox = ()=>{
     const addItem = core.useBuilderPreviewStore((s)=>s.addItem);
     const moveItem = core.useBuilderPreviewStore((s)=>s.moveItem);
     const removeItem = core.useBuilderPreviewStore((s)=>s.removeItem);
+    const setModalActive = core.useModalStore((s)=>s.setModalActive);
     const addSection = core.useSectionStore((s)=>s.addSection);
     const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
@@ -31,6 +32,12 @@ const Toolbox = ()=>{
     }, [
         matchMutate
     ]);
+    const onSetActiveModal = react.useCallback((e)=>{
+        const detail = e.detail;
+        setModalActive(detail?.modalId);
+    }, [
+        setModalActive
+    ]);
     // Update shop info
     const onChangeShopInfo = react.useCallback((e)=>{
         const detail = e.detail;
@@ -181,6 +188,7 @@ const Toolbox = ()=>{
         changeLayoutSettings
     ]);
     react.useEffect(()=>{
+        window.addEventListener('set-active-modal', onSetActiveModal);
         window.addEventListener('update-shop-info', onChangeShopInfo);
         window.addEventListener('revalidate-query', onRevalidateQuery);
         window.addEventListener('init-builder', onInitBuilder);
@@ -193,6 +201,7 @@ const Toolbox = ()=>{
         window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
         setInitEventSuccess(true);
         return ()=>{
+            window.removeEventListener('set-active-modal', onSetActiveModal);
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
             window.removeEventListener('init-builder', onInitBuilder);
@@ -214,11 +223,12 @@ const Toolbox = ()=>{
         onChangeSwatchesData,
         onRevalidateQuery,
         onChangeShopInfo,
-        onChangeLayoutSettingData
+        onChangeLayoutSettingData,
+        onSetActiveModal
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: core.cls({
-            "toolbox": initEventSuccess
+            toolbox: initEventSuccess
         })
     });
 };

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, cls } from '@gem-sdk/core';
+import { useMatchMutate, useShopStore, useBuilderPreviewStore, useModalStore, useSectionStore, cls } from '@gem-sdk/core';
 import { memo, useState, useCallback, useEffect } from 'react';
 import { createFontUrl } from '../../libs/google-fonts.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
@@ -17,6 +17,7 @@ const Toolbox = ()=>{
     const addItem = useBuilderPreviewStore((s)=>s.addItem);
     const moveItem = useBuilderPreviewStore((s)=>s.moveItem);
     const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
+    const setModalActive = useModalStore((s)=>s.setModalActive);
     const addSection = useSectionStore((s)=>s.addSection);
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
@@ -27,6 +28,12 @@ const Toolbox = ()=>{
     }, [
         matchMutate
     ]);
+    const onSetActiveModal = useCallback((e)=>{
+        const detail = e.detail;
+        setModalActive(detail?.modalId);
+    }, [
+        setModalActive
+    ]);
     // Update shop info
     const onChangeShopInfo = useCallback((e)=>{
         const detail = e.detail;
@@ -177,6 +184,7 @@ const Toolbox = ()=>{
         changeLayoutSettings
     ]);
     useEffect(()=>{
+        window.addEventListener('set-active-modal', onSetActiveModal);
         window.addEventListener('update-shop-info', onChangeShopInfo);
         window.addEventListener('revalidate-query', onRevalidateQuery);
         window.addEventListener('init-builder', onInitBuilder);
@@ -189,6 +197,7 @@ const Toolbox = ()=>{
         window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
         setInitEventSuccess(true);
         return ()=>{
+            window.removeEventListener('set-active-modal', onSetActiveModal);
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
             window.removeEventListener('init-builder', onInitBuilder);
@@ -210,11 +219,12 @@ const Toolbox = ()=>{
         onChangeSwatchesData,
         onRevalidateQuery,
         onChangeShopInfo,
-        onChangeLayoutSettingData
+        onChangeLayoutSettingData,
+        onSetActiveModal
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: cls({
-            "toolbox": initEventSuccess
+            toolbox: initEventSuccess
         })
     });
 };

package/dist/types/index.d.ts

@@ -32,6 +32,7 @@ type PageBuilderProps = {
     facebookPixelId?: string | null;
     customCodeHeader?: string | null;
     customCodeBody?: string | null;
+    isStorefront?: boolean;
 };
 type PageBuilderPropsV2 = {
     builderData?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.5.36",
+  "version": "1.7.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",