@gem-sdk/pages 1.24.11 → 1.25.0

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

@@ -23,12 +23,16 @@ const Toolbox = ()=>{
     const initNormalizeState = core.useBuilderPreviewStore((s)=>s.forceChangeState);
     const forceChangeItemProp = core.useBuilderPreviewStore((s)=>s.forceChangeItemProp);
     const changeItemPropByKey = core.useBuilderPreviewStore((s)=>s.changeItemPropByKey);
+    const setDynamicProduct = core.useBuilderPreviewStore((s)=>s.setDynamicProduct);
+    const setDynamicCollection = core.useBuilderPreviewStore((s)=>s.setDynamicCollection);
     const addItem = core.useBuilderPreviewStore((s)=>s.addItem);
     const moveItem = core.useBuilderPreviewStore((s)=>s.moveItem);
     const removeItem = core.useBuilderPreviewStore((s)=>s.removeItem);
     const addSection = core.useSectionStore((s)=>s.addSection);
     const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
+    const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
+    const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
     const clearModal = core.useModalStore((s)=>s.clearModal);
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
@@ -221,6 +225,34 @@ const Toolbox = ()=>{
     }, [
         changeLayoutSettings
     ]);
+    const onUpdateCreateThemeSectionCount = react.useCallback((e)=>{
+        const count = e.detail;
+        if (!count) return;
+        changeCreateThemeSectionCount(count);
+    }, [
+        changeCreateThemeSectionCount
+    ]);
+    const onUpdateShopPlan = react.useCallback((e)=>{
+        const shopPlan = e.detail;
+        if (!shopPlan) return;
+        changeShopPlan(shopPlan);
+    }, [
+        changeShopPlan
+    ]);
+    const onUpdateDynamicProduct = react.useCallback((e)=>{
+        const product = e.detail;
+        if (!product) return;
+        setDynamicProduct(product);
+    }, [
+        setDynamicProduct
+    ]);
+    const onUpdateDynamicCollection = react.useCallback((e)=>{
+        const collection = e.detail;
+        if (!collection) return;
+        setDynamicCollection(collection);
+    }, [
+        setDynamicCollection
+    ]);
     react.useEffect(()=>{
         if (customFontUrl) {
             const fontId = 'google-font';
@@ -253,6 +285,10 @@ const Toolbox = ()=>{
         window.addEventListener('set-global-style', onChangeGlobalStyle);
         window.addEventListener('update-global-swatches-data', onChangeSwatchesData);
         window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
+        window.addEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
+        window.addEventListener('update-shop-plan', onUpdateShopPlan);
+        window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
+        window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -264,9 +300,14 @@ const Toolbox = ()=>{
             window.removeEventListener('set-global-style', onChangeGlobalStyle);
             window.removeEventListener('update-global-swatches-data', onChangeSwatchesData);
             window.removeEventListener('on-off-header-footer', onChangeLayoutSettingData);
+            window.removeEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
+            window.removeEventListener('update-shop-plan', onUpdateShopPlan);
+            window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
+            window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
         };
     }, [
         onAddEntity,
+        onUpdateShopPlan,
         onForceUpdateEntityProps,
         onUpdateEntityProp,
         onInitBuilder,
@@ -276,7 +317,10 @@ const Toolbox = ()=>{
         onChangeSwatchesData,
         onRevalidateQuery,
         onChangeShopInfo,
-        onChangeLayoutSettingData
+        onChangeLayoutSettingData,
+        onUpdateCreateThemeSectionCount,
+        onUpdateDynamicProduct,
+        onUpdateDynamicCollection
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/cjs/pages/builder.js

@@ -12,8 +12,9 @@ var CollectionGlobalProvider = require('./CollectionGlobalProvider.js');
 var PopupManager = require('../components/builder/PopupManager.js');
 var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
 var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionImageToLayout.js');
+var Toolbar = require('../components/builder/Toolbar.js');
 
-const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout })=>{
+const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor })=>{
     const [loadSuccess, setLoadSuccess] = react.useState(false);
     const initState = react.useMemo(()=>({
             ROOT: {
@@ -55,15 +56,20 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                     data: sectionData,
                     children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
                         state: initState,
+                        isThemeSectionEditor: isThemeSectionEditor,
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(Toolbar.default, {}),
                             /*#__PURE__*/ jsxRuntime.jsx(PopupManager.default, {}),
                             loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                 className: "builder z-1 relative",
                                 children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(Header.default, {}),
+                                    isThemeSectionEditor ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        className: "h-[40px] bg-[#f4f4f4]"
+                                    }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {}),
                                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                                         id: "storefront",
+                                        className: isThemeSectionEditor ? 'theme-section-editor' : '',
                                         children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
                                             children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
                                                 uid: "ROOT"
@@ -81,7 +87,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                                         id: "visual-content"
                                     }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
+                                    !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
                                 ]
                             })
                         ]