@gem-sdk/pages 1.24.11 → 1.25.3

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

@@ -19,12 +19,16 @@ const Toolbox = ()=>{
     const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
     const forceChangeItemProp = useBuilderPreviewStore((s)=>s.forceChangeItemProp);
     const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
+    const setDynamicProduct = useBuilderPreviewStore((s)=>s.setDynamicProduct);
+    const setDynamicCollection = useBuilderPreviewStore((s)=>s.setDynamicCollection);
     const addItem = useBuilderPreviewStore((s)=>s.addItem);
     const moveItem = useBuilderPreviewStore((s)=>s.moveItem);
     const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
     const addSection = useSectionStore((s)=>s.addSection);
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
+    const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
+    const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
     const clearModal = useModalStore((s)=>s.clearModal);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
@@ -217,6 +221,34 @@ const Toolbox = ()=>{
     }, [
         changeLayoutSettings
     ]);
+    const onUpdateCreateThemeSectionCount = useCallback((e)=>{
+        const count = e.detail;
+        if (!count) return;
+        changeCreateThemeSectionCount(count);
+    }, [
+        changeCreateThemeSectionCount
+    ]);
+    const onUpdateShopPlan = useCallback((e)=>{
+        const shopPlan = e.detail;
+        if (!shopPlan) return;
+        changeShopPlan(shopPlan);
+    }, [
+        changeShopPlan
+    ]);
+    const onUpdateDynamicProduct = useCallback((e)=>{
+        const product = e.detail;
+        if (!product) return;
+        setDynamicProduct(product);
+    }, [
+        setDynamicProduct
+    ]);
+    const onUpdateDynamicCollection = useCallback((e)=>{
+        const collection = e.detail;
+        if (!collection) return;
+        setDynamicCollection(collection);
+    }, [
+        setDynamicCollection
+    ]);
     useEffect(()=>{
         if (customFontUrl) {
             const fontId = 'google-font';
@@ -249,6 +281,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);
@@ -260,9 +296,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,
@@ -272,7 +313,10 @@ const Toolbox = ()=>{
         onChangeSwatchesData,
         onRevalidateQuery,
         onChangeShopInfo,
-        onChangeLayoutSettingData
+        onChangeLayoutSettingData,
+        onUpdateCreateThemeSectionCount,
+        onUpdateDynamicProduct,
+        onUpdateDynamicCollection
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

package/dist/esm/libs/api/get-home-page-props-v2.js

@@ -1,6 +1,6 @@
 import { PublishedThemePagesDocument, StorePropertyDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
-import { getFontFromGlobalStyle } from '../google-fonts.js';
+import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
@@ -33,7 +33,8 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 throw new Error(`No data builder found for Home page`);
             }
             const homeTemplate = parseBuilderTemplateV2(dataBuilder);
-            const [fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+                getFontStyleFromPageTemplate(homeTemplate),
                 getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
                 getFallbackV2(fetcher, homeTemplate)
             ]);
@@ -113,6 +114,7 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
             return serializableJson({
                 themeStyle: genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
                 fontStyle,
+                elementFontStyle,
                 builderData: homeTemplate,
                 swr: {
                     fallback

package/dist/esm/pages/builder.js

@@ -10,8 +10,9 @@ import CollectionGlobalProvider from './CollectionGlobalProvider.js';
 import PopupManager from '../components/builder/PopupManager.js';
 import ImageToLayout from '../components/image-to-layout/ImageToLayout.js';
 import AddSectionImageToLayout from '../components/image-to-layout/AddSectionImageToLayout.js';
+import Toolbar from '../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] = useState(false);
     const initState = useMemo(()=>({
             ROOT: {
@@ -53,15 +54,20 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                     data: sectionData,
                     children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
                         state: initState,
+                        isThemeSectionEditor: isThemeSectionEditor,
                         children: [
                             /*#__PURE__*/ jsx(Toolbox, {}),
+                            /*#__PURE__*/ jsx(Toolbar, {}),
                             /*#__PURE__*/ jsx(PopupManager, {}),
                             loadSuccess && /*#__PURE__*/ jsxs("div", {
                                 className: "builder z-1 relative",
                                 children: [
-                                    /*#__PURE__*/ jsx(Header, {}),
+                                    isThemeSectionEditor ? /*#__PURE__*/ jsx("div", {
+                                        className: "h-[40px] bg-[#f4f4f4]"
+                                    }) : /*#__PURE__*/ jsx(Header, {}),
                                     /*#__PURE__*/ jsx("div", {
                                         id: "storefront",
+                                        className: isThemeSectionEditor ? 'theme-section-editor' : '',
                                         children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
                                             children: /*#__PURE__*/ jsx(RenderPreview, {
                                                 uid: "ROOT"
@@ -79,7 +85,7 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                                     /*#__PURE__*/ jsx("div", {
                                         id: "visual-content"
                                     }),
-                                    /*#__PURE__*/ jsx(Footer, {})
+                                    !isThemeSectionEditor && /*#__PURE__*/ jsx(Footer, {})
                                 ]
                             })
                         ]

package/dist/types/index.d.ts

@@ -146,6 +146,7 @@ type BuilderPageProps = {
     mode?: RenderMode;
     pageType: ShopType.PublishedThemePageType;
     editorImageToLayout?: boolean;
+    isThemeSectionEditor?: boolean;
 };
 declare const BuilderPage: React.FC<BuilderPageProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.24.11",
+  "version": "1.25.3",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,10 +25,10 @@
     "next-seo": "^6.0.0"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.24.9",
-    "@gem-sdk/plugin-cookie-bar": "*",
-    "@gem-sdk/plugin-quick-view": "*",
-    "@gem-sdk/plugin-sticky-add-to-cart": "*"
+    "@gem-sdk/core": "1.25.0",
+    "@gem-sdk/plugin-cookie-bar": "1.25.0",
+    "@gem-sdk/plugin-quick-view": "1.25.0",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.25.0"
   },
   "peerDependencies": {
     "next": ">=13"