@gem-sdk/pages 1.56.0 → 1.57.0-dev.53

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

@@ -10,6 +10,8 @@ var googleFonts = require('../../libs/google-fonts.js');
 var genCss = require('../../libs/helpers/gen-css.js');
 var genFonts = require('../../libs/helpers/gen-fonts.js');
 var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
+var libsStore = require('../../store/libs-store.js');
+var checkOptionFont = require('../../libs/helpers/check-option-font.js');
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -35,8 +37,15 @@ const Toolbox = ()=>{
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
+    const changeFontType = libsStore.libsStore((s)=>s.changeFontType);
+    const fontType = libsStore.libsStore((s)=>s.fontType);
     const clearModal = core.useModalStore((s)=>s.clearModal);
     const changeLimitCreateThemeSection = core.useShopStore((s)=>s.changeLimitCreateThemeSection);
+    const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    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
     ]);
@@ -65,6 +74,12 @@ const Toolbox = ()=>{
         });
         // append new fonts
         for (const font of fonts){
+            if ([
+                'bunny',
+                'google'
+            ].includes(font.type) && checkOptionFont.checkNotInOptionFont(font.family, fontType)) {
+                return;
+            }
             if (font.type !== 'custom') {
                 if (font.variants?.length) {
                     for (const variant of font.variants){
@@ -76,7 +91,7 @@ const Toolbox = ()=>{
                         const variantName = variant;
                         const url = googleFonts.createFontUrl([
                             cloneFont
-                        ]);
+                        ], undefined, fontType);
                         if (url) {
                             const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
                             if (googleFont) {
@@ -279,6 +294,13 @@ const Toolbox = ()=>{
     }, [
         changeShopPlan
     ]);
+    const onUpdateFontType = react.useCallback((e)=>{
+        const fontType = e.detail;
+        if (!fontType) return;
+        changeFontType(fontType);
+    }, [
+        changeFontType
+    ]);
     const onUpdateDynamicProduct = react.useCallback((e)=>{
         const product = e.detail;
         if (!product) return;
@@ -337,6 +359,37 @@ const Toolbox = ()=>{
     }, [
         changeLimitCreateThemeSection
     ]);
+    const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
+        const isSelectOnPage = e.detail.value;
+        const mode = e.detail.mode;
+        const settingType = e.detail.settingType;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+        setInteractionSelectType(mode);
+        setInteractionSettingType(settingType);
+    }, [
+        setInteractionIsSelectOnPage,
+        setInteractionSelectType,
+        setInteractionSettingType
+    ]);
+    const onUpdateInteractionSettingType = react.useCallback((e)=>{
+        const settingType = e.detail.settingType;
+        setInteractionSettingType(settingType);
+    }, [
+        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);
+    }, [
+        setInteractionItem
+    ]);
     react.useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -365,6 +418,11 @@ const Toolbox = ()=>{
         window.addEventListener('set-product-offer', onUpdateProductOffers);
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
         window.addEventListener('limit-create-theme-section', onLimitCreateThemeSection);
+        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);
+        window.addEventListener('update-font-type', onUpdateFontType);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -385,6 +443,10 @@ const Toolbox = ()=>{
             window.removeEventListener('set-product-offer', onUpdateProductOffers);
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
             window.removeEventListener('limit-create-theme-section', onLimitCreateThemeSection);
+            window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+            window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
+            window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+            window.removeEventListener('update-font-type', onUpdateFontType);
         };
     }, [
         onAddEntity,
@@ -406,7 +468,12 @@ const Toolbox = ()=>{
         onUpdateItemAttribute,
         onUpdateProductOffers,
         onUpdateSalePageProductId,
-        onLimitCreateThemeSection
+        onLimitCreateThemeSection,
+        onUpdateInteractionItem,
+        onUpdateInteractionIsSelectOnPage,
+        onUpdateInteractionSettingType,
+        onUpdateFontType,
+        onChangeSidebarMode
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

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

@@ -0,0 +1,7 @@
+'use strict';
+
+const TOOLBAR_HOVER_HEIGHT = 24;
+const TOOLBAR_ACTIVE_HEIGHT = 32;
+
+exports.TOOLBAR_ACTIVE_HEIGHT = TOOLBAR_ACTIVE_HEIGHT;
+exports.TOOLBAR_HOVER_HEIGHT = TOOLBAR_HOVER_HEIGHT;

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

@@ -0,0 +1,41 @@
+'use strict';
+
+const findDOMClosest = ($target, selectors)=>{
+    const closestElements = {
+        $childrenSlot: null,
+        $productFeatureImg: null,
+        $section: null,
+        $component: null,
+        $disableIframeClick: null,
+        $stickyMinimize: null,
+        $toolbar: null,
+        $gpText: null,
+        $imageDetection: null,
+        $popupTriggerButton: null
+    };
+    let currentElement = $target;
+    while(currentElement){
+        // Check for stop conditions
+        if (currentElement.matches('[data-uid="ROOT"], .builder, #storefront')) {
+            break;
+        }
+        // Check if currentElement matches any of the selectors
+        for (const [key, selector] of Object.entries(selectors)){
+            if (!closestElements[key] && currentElement.matches(selector)) {
+                closestElements[key] = currentElement;
+            }
+        }
+        // If all closest elements are found, break the loop
+        if (Object.values(closestElements).every((el)=>el !== null)) {
+            break;
+        }
+        // Move up to the parent element
+        currentElement = currentElement.parentElement;
+    }
+    // Reset ram
+    currentElement = null;
+    // Return
+    return closestElements;
+};
+
+exports.findDOMClosest = findDOMClosest;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var isOverToolbarPosition = require('./isOverToolbarPosition.js');
+var isSection = require('./isSection.js');
+var notVisible = require('./notVisible.js');
+
+const findOverflowParent = (element, initEl)=>{
+    const thisEl = element;
+    const origEl = initEl || thisEl;
+    if (!thisEl) return;
+    if (isSection.isSection(thisEl)) return;
+    if (notVisible.notVisible(thisEl) && isOverToolbarPosition.isOverToolbarPosition(initEl, thisEl)) return thisEl;
+    if (thisEl.parentElement) {
+        return findOverflowParent(thisEl.parentElement, origEl);
+    } else {
+        return;
+    }
+};
+
+exports.findOverflowParent = findOverflowParent;

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

@@ -0,0 +1,18 @@
+'use strict';
+
+const getChildrenByAttrSelector = ($el, attrSelector)=>{
+    const childLen = $el.children.length;
+    if (childLen) {
+        for(let i = 0; i < childLen; i++){
+            const children = $el.children[i];
+            if (children) {
+                const is = children.getAttribute(attrSelector);
+                if (is) {
+                    return children;
+                }
+            }
+        }
+    }
+};
+
+exports.getChildrenByAttrSelector = getChildrenByAttrSelector;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+const getDOMElementParents = ($el, selector, limit)=>{
+    // Set up a parent array
+    const parents = [];
+    // Push each parent $elms to the array
+    while($el){
+        $el = $el.parentElement ?? undefined;
+        if ($el) {
+            if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
+                break;
+            }
+            if (selector) {
+                if ($el.matches(selector)) {
+                    parents.push($el);
+                    if (limit && parents.length == limit) {
+                        return parents;
+                    }
+                }
+                continue;
+            }
+            parents.push($el);
+            if (limit && parents.length == limit) {
+                return parents;
+            }
+        }
+    }
+    // Return our parent array
+    return parents;
+};
+
+exports.getDOMElementParents = getDOMElementParents;

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var _const = require('../const.js');
+
+const isOverParent = ({ current, parent, index, revert })=>{
+    for(let i = 0; i < index; i++){
+        let is = current.top - (_const.TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (_const.TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height || current.top - (_const.TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top + parent.height && current.top - (_const.TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top;
+        if (revert) {
+            is = current.bottom + (_const.TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom && current.bottom + (_const.TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom - parent.height || current.bottom + (_const.TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom - parent.height && current.bottom + (_const.TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom;
+        }
+        if (is) return true;
+    }
+    return false;
+};
+
+exports.isOverParent = isOverParent;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var _const = require('../const.js');
+
+const isOverToolbarPosition = (el, parent)=>{
+    const rect = el.getBoundingClientRect();
+    const rectP = parent.getBoundingClientRect();
+    // 32px = toolbar active height
+    return rect.top - rectP.top < _const.TOOLBAR_ACTIVE_HEIGHT + 1;
+};
+
+exports.isOverToolbarPosition = isOverToolbarPosition;

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

@@ -0,0 +1,8 @@
+'use strict';
+
+const isSection = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Section';
+};
+
+exports.isSection = isSection;

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

@@ -0,0 +1,8 @@
+'use strict';
+
+const notVisible = (el)=>{
+    const overflow = getComputedStyle(el).overflow;
+    return overflow !== 'visible';
+};
+
+exports.notVisible = notVisible;

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

@@ -0,0 +1,27 @@
+'use strict';
+
+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) {
+                if (intervalID) clearInterval(intervalID);
+                if (timeoutID) clearTimeout(timeoutID);
+                resolve(el);
+            }
+        };
+        findEl();
+        intervalID = setInterval(()=>{
+            findEl();
+        }, 50);
+        timeoutID = setTimeout(()=>{
+            if (intervalID) clearInterval(intervalID);
+            if (timeoutID) clearTimeout(timeoutID);
+            resolve(null);
+        }, timeout);
+    });
+};
+
+exports.waitForElementToExist = waitForElementToExist;

package/dist/cjs/components/image-to-layout/DropElement.js

@@ -106,11 +106,13 @@ const DropElement = ()=>{
                         className: "gp-flex gp-w-[291px] gp-justify-between",
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                "data-button-add-section": true,
                                 onClick: ()=>dispatchEventBuildWithSectionActiveTab(true),
                                 className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#1C1C1C] gp-text-[14px] gp-text-white hover:gp-bg-[#3B3B3B]",
                                 children: "Add sections"
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                "data-button-add-elements": true,
                                 onClick: ()=>dispatchEventBuildWithSectionActiveTab(false),
                                 className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#f4f4f4] gp-text-[14px] gp-text-[#212121] hover:gp-bg-[#E2E2E2]",
                                 children: "Add elements"

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

@@ -18,7 +18,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 slug,
                 slugType: pageType
             };
-            const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+            const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
                 fetcher([
                     core.PublishedThemePagesDocument,
                     variables
@@ -28,11 +28,21 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 ]),
                 shopifyFetcher([
                     adapterShopify.ShopMetaDocument
+                ]),
+                fetcher([
+                    core.PublishedShopMetasDocument,
+                    {
+                        keys: [
+                            'source_font'
+                        ]
+                    }
                 ])
             ]);
             if (theme.status === 'rejected') {
                 throw new Error(theme.reason?.[0]);
             }
+            const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
+            const sourceFont = publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === 'source_font');
             const dataBuilder = theme.value.publishedThemePages?.[0];
             const themePageCustomFonts = theme.value?.publishedThemePages?.[0]?.themePageCustomFonts;
             if (!dataBuilder) {
@@ -40,8 +50,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
             }
             const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
             const [elementFontStyle, fontStyle, fallback, customFonts$1] = await Promise.all([
-                googleFonts.getFontStyleFromPageTemplate(pageTemplate),
-                googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
+                googleFonts.getFontStyleFromPageTemplate(pageTemplate, sourceFont?.value),
+                googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data, sourceFont?.value),
                 getFallback.getFallbackV2(fetcher, pageTemplate),
                 customFonts.getCustomFonts(themePageCustomFonts)
             ]);
@@ -141,7 +151,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
                 customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
                 pageHandle: dataBuilder.handle ?? null,
-                customFonts: customFonts$1
+                customFonts: customFonts$1,
+                interaction: dataBuilder?.interaction
             });
         } catch (err) {
             nextjs.captureException(err);

package/dist/cjs/libs/google-fonts.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var checkOptionFont = require('./helpers/check-option-font.js');
 var genFonts = require('./helpers/gen-fonts.js');
 
 const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
@@ -35,12 +36,17 @@ const composeFonts = (fonts)=>{
         };
     });
 };
-const createFontUrl = (fonts, option)=>{
-    const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
-    if (!googleFonts.length) return;
+const createFontUrl = (fonts, option, fontType)=>{
+    const mainFonts = fonts.filter((font)=>{
+        return !([
+            'bunny',
+            'google'
+        ].includes(font.type) && checkOptionFont.checkNotInOptionFont(font.family, fontType || 'google')) && (font.type === 'google' || font.type === 'bunny' || !font.type);
+    });
+    if (!mainFonts.length) return;
     const params = new URLSearchParams();
     const display = option?.display || 'swap';
-    const uniqFonts = googleFonts.filter((font, index, arr)=>{
+    const uniqFonts = mainFonts.filter((font, index, arr)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
     });
     const family = composeFonts(uniqFonts).map((font)=>{
@@ -54,13 +60,16 @@ const createFontUrl = (fonts, option)=>{
     if (option?.effect) {
         params.append('effect', option.effect);
     }
-    return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
+    const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
 };
-async function getFonts(fonts, option, isImportFontByUrl = true) {
+// eslint-disable-next-line max-params
+async function getFonts(fonts, option, isImportFontByUrl = true, fontType) {
     /**
    * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
    * CSS cascading 🤷‍♂️.
-   */ const url = createFontUrl(fonts, option);
+   */ const url = createFontUrl(fonts, option, fontType);
     if (!url) return '';
     try {
         if (isImportFontByUrl) return `@import url('${url}');`;
@@ -82,7 +91,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
         return '';
     }
 }
-const getFontFromGlobalStyle = (data)=>{
+const getFontFromGlobalStyle = (data, sourceFont)=>{
     if (!data) return '';
     try {
         const globalStyle = JSON.parse(data);
@@ -90,14 +99,14 @@ const getFontFromGlobalStyle = (data)=>{
         const fonts = Object.entries(fontData).map(([, value])=>{
             return value;
         });
-        return getFonts(fonts);
+        return getFonts(fonts, undefined, undefined, sourceFont);
     } catch  {
         return '';
     }
 };
-async function getFontStyleFromPageTemplate(pageTemplate) {
+async function getFontStyleFromPageTemplate(pageTemplate, sourceFont) {
     const fontStyle = pageTemplate.map((sectionData)=>{
-        return getFonts(genFonts.getFontsFromDataBuilder(sectionData.data));
+        return getFonts(genFonts.getFontsFromDataBuilder(sectionData.data), undefined, undefined, sourceFont);
     });
     return await Promise.all(fontStyle);
 }

package/dist/cjs/libs/helpers/check-option-font.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const listFontsNotInBunny = [
+    'Anton SC',
+    'Arsenal SC',
+    'Baskervville SC',
+    'Beiruti',
+    'Bodoni Moda SC',
+    'Bona Nova SC',
+    'Bungee Tint',
+    'Edu AU VIC WA NT Hand',
+    'Fustat',
+    'Ga Maamli',
+    'Kalnia Glaze',
+    'Maname',
+    'Matemasie',
+    'Material Icons',
+    'Material Icons Outlined',
+    'Material Icons Round',
+    'Material Icons Sharp',
+    'Material Icons Two Tone',
+    'Material Symbols Outlined',
+    'Material Symbols Rounded',
+    'Material Symbols Sharp',
+    'Moderustic',
+    'New Amsterdam',
+    'Playwrite AR',
+    'Playwrite AT',
+    'Playwrite BE VLG',
+    'Playwrite BE WAL',
+    'Playwrite CL',
+    'Playwrite CU',
+    'Playwrite CZ',
+    'Playwrite DK Loopet',
+    'Playwrite DK Uloopet',
+    'Playwrite HR',
+    'Playwrite HR Lijeva',
+    'Playwrite HU',
+    'Playwrite PE',
+    'SUSE',
+    'Sankofa Display',
+    'Wittgenstein',
+    'Zain'
+];
+const listFontsNotInGoogle = [
+    'Arima Madurai',
+    'Coda Caption',
+    'Fredoka One',
+    'Gentium Book Basic',
+    'Kantumruy',
+    'Merienda One',
+    'Source Sans Pro',
+    'Source Serif Pro',
+    'Briem Hand',
+    'Pushster'
+];
+const objectFont = {
+    bunny: listFontsNotInBunny,
+    google: listFontsNotInGoogle
+};
+const checkNotInOptionFont = (currentfont, type)=>{
+    return objectFont?.[type]?.includes(currentfont);
+};
+
+exports.checkNotInOptionFont = checkNotInOptionFont;

package/dist/cjs/pages/builder.js

@@ -8,12 +8,12 @@ var react = require('react');
 var Toolbox = require('../components/builder/Toolbox.js');
 var Header = require('../components/builder/Header.js');
 var Footer = require('../components/builder/Footer.js');
-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');
 var SwitchView = require('../components/builder/SwitchView.js');
+var Body = require('../components/builder/Body.js');
 
 const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
     const [loadSuccess, setLoadSuccess] = react.useState(false);
@@ -83,16 +83,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                                             isOriginTemplate: isOriginTemplate,
                                             openPageSetting: openPageSetting
                                         })),
-                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                            id: "storefront",
-                                            className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
-                                            children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
-                                                children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
-                                                    uid: "ROOT"
-                                                })
-                                            }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
-                                                uid: "ROOT"
-                                            })
+                                        /*#__PURE__*/ jsxRuntime.jsx(Body.default, {
+                                            pageType: pageType,
+                                            isThemeSectionEditor: isThemeSectionEditor
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
                                             editorImageToLayout: editorImageToLayout || false

package/dist/cjs/pages/static-v2.js

@@ -9,9 +9,11 @@ var useTrackingView = require('../libs/hooks/use-tracking-view.js');
 var parseHtml = require('../libs/parse-html.js');
 var Header = require('../components/builder/Header.js');
 var FooterForPostPurchase = require('../components/FooterForPostPurchase.js');
+var Script = require('next/script');
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview })=>{
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview, interaction })=>{
     const router$1 = router.useRouter();
+    const baseAssetURL = process.env.NEXT_GP_BASE_ASSET_URL || 'https://d3kbi0je7pp4lw.cloudfront.net';
     useTrackingView.useTrackingView(shopToken, pageHandle, router$1.isFallback);
     if (router$1.isFallback) {
         return /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -81,17 +83,28 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
                             isPostPurchase && /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
                                 pageType: "POST_PURCHASE"
                             }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                dangerouslySetInnerHTML: {
+                                    __html: `<div id="gp-interaction" style="display: none;">${JSON.stringify(interaction?.value || [])}</div>`
+                                }
+                            }),
                             /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
                                 data: sectionData,
-                                children: builderData?.map((builder)=>/*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
+                                children: builderData?.map((builder)=>/*#__PURE__*/ jsxRuntime.jsxs(core.BuilderProvider, {
                                         state: builder.data,
                                         lazy: builder.lazy,
                                         priority: builder.priority,
                                         isPostPurchase: isPostPurchase,
                                         isPreview: isPreview,
-                                        children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
-                                            uid: builder.uid
-                                        })
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
+                                                uid: builder.uid
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(Script, {
+                                                defer: true,
+                                                src: `${baseAssetURL}/assets-v2/gp-flow-action-lip.js`
+                                            })
+                                        ]
                                     }, builder.uid))
                             }),
                             isPostPurchase && /*#__PURE__*/ jsxRuntime.jsx(FooterForPostPurchase.default, {

package/dist/cjs/store/libs-store.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var zustand = require('zustand');
+
+const libsStore = zustand.create((set)=>({
+        fontType: 'google',
+        changeFontType: (fontType)=>{
+            set({
+                fontType
+            });
+        }
+    }));
+
+exports.libsStore = libsStore;