@gem-sdk/pages 1.51.0 → 1.53.0-dev.107

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var core = require('@gem-sdk/core');
+var CollectionGlobalProvider = require('../../pages/CollectionGlobalProvider.js');
+
+const Body = ({ pageType, isThemeSectionEditor })=>{
+    const interactionData = core.usePageStore((s)=>s.interactionData);
+    const isInteractionSelectModeClass = react.useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
+        interactionData?.isSelectOnPage
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        id: "storefront",
+        className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
+        children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
+            children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
+                uid: "ROOT"
+            })
+        }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
+            uid: "ROOT"
+        })
+    });
+};
+
+exports.default = Body;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var SwitchView = require('./SwitchView.js');
+var InteractionSelectOnPageHeader = require('./InteractionSelectOnPageHeader.js');
 
 const defaultMargin = {
     desktop: '16px',
@@ -21,6 +22,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate } = props;
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
+    const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -177,7 +179,8 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            })
+            }),
+            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
         ]
     });
 };

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

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var useSelectModeInteraction = require('../../libs/hooks/useSelectModeInteraction.js');
+
+const InteractionSelectOnPageHeader = ()=>{
+    const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
+    const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
+    const { closeSelectOnPage } = core.useInteraction();
+    const { changeSelectMode } = useSelectModeInteraction.useSelectModeInteraction();
+    const handleSetInteraction = (type)=>{
+        setInteractionSelectType(type);
+        changeSelectMode(type);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("header", {
+                className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-[#151515] gp-text-white interaction-select-mode-header",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "gp-ml-4 gp-text-xs gp-mt-1",
+                        children: "Select mode enabled"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("section", {
+                        className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                onClick: ()=>handleSetInteraction('ELEMENT'),
+                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px]  ${selectType === 'ELEMENT' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
+                                children: "Choose an element on page"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                onClick: ()=>handleSetInteraction('PAGE'),
+                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px] ${selectType === 'PAGE' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
+                                children: "Use entire page"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        onClick: closeSelectOnPage,
+                        className: "gp-h-10 gp-w-10 gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "12",
+                            height: "12",
+                            viewBox: "0 0 12 12",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                d: "M9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L7.06066 6L11.0303 2.03033C11.3232 1.73744 11.3232 1.26256 11.0303 0.96967C10.7374 0.676777 10.2626 0.676777 9.96967 0.96967L6 4.93934L2.03033 0.96967C1.73744 0.676777 1.26256 0.676777 0.96967 0.96967C0.676777 1.26256 0.676777 1.73744 0.96967 2.03033L4.93934 6L0.96967 9.96967C0.676777 10.2626 0.676777 10.7374 0.96967 11.0303C1.26256 11.3232 1.73744 11.3232 2.03033 11.0303L6 7.06066L9.96967 11.0303Z",
+                                fill: "#F9F9F9"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF]   gp-mt-[40px] gp-z-[999]  ${selectType === 'PAGE' ? 'gp-z-[999] gp-border-[4px] gp-bg-[#3c67ff]/[0.25]' : 'gp-border-[2px] gp-pointer-events-none'}`,
+                style: {
+                    height: 'calc(100% - 40px)'
+                }
+            })
+        ]
+    });
+};
+
+exports.default = InteractionSelectOnPageHeader;

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

@@ -33,7 +33,7 @@ const PopupManager = ()=>{
         onSetActiveModal
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
+        className: "gp-popup-trigger-button gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
         children: popups?.map((item)=>{
             const display = item?.advanced?.d;
             return /*#__PURE__*/ jsxRuntime.jsx("div", {

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

@@ -178,6 +178,7 @@ const Devices = ()=>{
             ]
         })
     });
+    return null;
 };
 
 exports.default = Devices;

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

@@ -579,12 +579,14 @@ const Toolbar = ()=>{
                     if (await isElementInsideArticle()) {
                         articleId = currentComponentActive.current?.articleId || '';
                     }
+                    console.log('$parent$parent', $parent);
                     const event = new CustomEvent('editor:toolbar:force-active-component', {
                         bubbles: true,
                         detail: {
                             componentUid: uid,
                             productId,
-                            articleId
+                            articleId,
+                            elementTag: $parent.getAttribute('data-component-tag') || ''
                         }
                     });
                     outHover($parent);

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,7 +37,13 @@ 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 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 fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
@@ -64,6 +72,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){
@@ -75,7 +89,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) {
@@ -278,6 +292,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;
@@ -329,6 +350,30 @@ const Toolbox = ()=>{
     }, [
         setSalePageProductId
     ]);
+    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 onUpdateInteractionItem = react.useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     react.useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -356,6 +401,10 @@ const Toolbox = ()=>{
         window.addEventListener('update-item-attribute', onUpdateItemAttribute);
         window.addEventListener('set-product-offer', onUpdateProductOffers);
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+        window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+        window.addEventListener('update-interaction-item', onUpdateInteractionItem);
+        window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+        window.addEventListener('update-font-type', onUpdateFontType);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -375,6 +424,10 @@ const Toolbox = ()=>{
             window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
             window.removeEventListener('set-product-offer', onUpdateProductOffers);
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+            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,
@@ -395,7 +448,11 @@ const Toolbox = ()=>{
         onUpdateItemName,
         onUpdateItemAttribute,
         onUpdateProductOffers,
-        onUpdateSalePageProductId
+        onUpdateSalePageProductId,
+        onUpdateInteractionItem,
+        onUpdateInteractionIsSelectOnPage,
+        onUpdateInteractionSettingType,
+        onUpdateFontType
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/cjs/libs/api/get-post-purchase-props-preview.js

@@ -119,22 +119,120 @@ const fetchThemePageDataByTemplateID = async (data, fetcher)=>{
         productOffers: productOffers
     };
 };
-const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFetcher)=>async (id, currentOfferID)=>{
+const fetchShopLibraryPageDataByID = async (data, fetcher)=>{
+    const variables = {
+        shopLibraryPageId: data.shopLibraryPageId
+    };
+    const [theme, storeProperty, saleFunnelDiscounts] = await Promise.allSettled([
+        fetcher([
+            core.ShopLibraryPageDocument,
+            variables
+        ]),
+        fetcher([
+            core.StorePropertyDocument
+        ]),
+        fetcher([
+            core.SaleFunnelDiscountsDocument,
+            {
+                where: {
+                    saleFunnelOfferID: data.currentOfferID
+                }
+            }
+        ])
+    ]);
+    if (theme.status === 'rejected') {
+        throw new Error(theme.reason?.[0]);
+    }
+    if (saleFunnelDiscounts.status === 'rejected') {
+        throw new Error(saleFunnelDiscounts.reason?.[0]);
+    }
+    return {
+        dataBuilder: theme.value.shopLibraryPage,
+        pageStyle: undefined,
+        storeProperty,
+        productOffers: saleFunnelDiscounts.value.saleFunnelDiscounts?.edges?.filter((item)=>item?.node?.objectType === 'PRODUCT' && item?.node?.type === 'ORDER_VALUE') || []
+    };
+};
+const fetchLibraryTemplateDataByID = async (data, fetcher)=>{
+    const variables = {
+        libraryTemplateId: data.libraryTemplateId
+    };
+    const [theme, storeProperty, saleFunnelDiscounts] = await Promise.allSettled([
+        fetcher([
+            core.LibraryTemplateDocument,
+            variables
+        ]),
+        fetcher([
+            core.StorePropertyDocument
+        ]),
+        fetcher([
+            core.SaleFunnelDiscountsDocument,
+            {
+                where: {
+                    saleFunnelOfferID: data.currentOfferID
+                }
+            }
+        ])
+    ]);
+    if (theme.status === 'rejected') {
+        throw new Error(theme.reason?.[0]);
+    }
+    if (saleFunnelDiscounts.status === 'rejected') {
+        throw new Error(saleFunnelDiscounts.reason?.[0]);
+    }
+    return {
+        dataBuilder: theme.value.libraryTemplate,
+        pageStyle: undefined,
+        storeProperty,
+        productOffers: saleFunnelDiscounts.value.saleFunnelDiscounts?.edges?.filter((item)=>item?.node?.objectType === 'PRODUCT' && item?.node?.type === 'ORDER_VALUE') || []
+    };
+};
+const getRelevantPageData = async (data)=>{
+    const { id, currentOfferID, fetcher, isLibraryTemplate, librarySaleFunnelID, isShopLibraryPage } = data;
+    if (librarySaleFunnelID) {
+        return await fetchThemePageDataByTemplateID({
+            libraryTemplateId: id,
+            currentOfferID,
+            librarySaleFunnelID
+        }, fetcher);
+    }
+    if (isShopLibraryPage && currentOfferID) {
+        return await fetchShopLibraryPageDataByID({
+            shopLibraryPageId: id,
+            currentOfferID
+        }, fetcher);
+    }
+    if (isLibraryTemplate && currentOfferID) {
+        return await fetchLibraryTemplateDataByID({
+            libraryTemplateId: id,
+            currentOfferID
+        }, fetcher);
+    }
+    if (currentOfferID) {
+        return await fetchPostPurchasePageDataByID({
+            themePageId: id,
+            currentOfferID
+        }, fetcher);
+    }
+    return await fetchSalePageDataByID({
+        themePageId: id
+    }, fetcher);
+};
+const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFetcher)=>async (data)=>{
         try {
-            const { dataBuilder, storeProperty, productOffers, pageStyle } = librarySaleFunnelID ? await fetchThemePageDataByTemplateID({
-                libraryTemplateId: id,
+            const { id, currentOfferID, isLibraryTemplate, isShopLibraryPage } = data;
+            const { dataBuilder, storeProperty, productOffers, pageStyle } = await getRelevantPageData({
+                id,
                 currentOfferID,
+                fetcher,
+                isLibraryTemplate,
+                isShopLibraryPage,
                 librarySaleFunnelID
-            }, fetcher) : currentOfferID ? await fetchPostPurchasePageDataByID({
-                themePageId: id,
-                currentOfferID
-            }, fetcher) : await fetchSalePageDataByID({
-                themePageId: id
-            }, fetcher);
+            });
             if (!dataBuilder) {
                 throw new Error(`No data builder found for slug: /preview/${id}`);
             }
-            const pageTemplate = librarySaleFunnelID ? normalize.parseBuilderLibraryTemplate(dataBuilder) : normalize.parseBuilderTemplateV2(dataBuilder);
+            const pageTemplate = librarySaleFunnelID || isLibraryTemplate && currentOfferID ? normalize.parseBuilderLibraryTemplate(dataBuilder) : isShopLibraryPage ? normalize.parseShopLibraryPageTemplate(dataBuilder) : normalize.parseBuilderTemplateV2(dataBuilder);
             const gemPagesStoreFrontFetcher = storeFrontFetcher || fetcher;
             const [elementFontStyle, fontStyle, fallback] = await Promise.all([
                 googleFonts.getFontStyleFromPageTemplate(pageTemplate),
@@ -160,7 +258,10 @@ const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFet
         }
     };
 
+exports.fetchLibraryTemplateDataByID = fetchLibraryTemplateDataByID;
 exports.fetchPostPurchasePageDataByID = fetchPostPurchasePageDataByID;
 exports.fetchSalePageDataByID = fetchSalePageDataByID;
+exports.fetchShopLibraryPageDataByID = fetchShopLibraryPageDataByID;
 exports.fetchThemePageDataByTemplateID = fetchThemePageDataByTemplateID;
 exports.getPostPurchasePropsPreview = getPostPurchasePropsPreview;
+exports.getRelevantPageData = getRelevantPageData;

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

@@ -139,7 +139,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
                 tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
                 customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
-                customCodeBody: dataBuilder.themePageCustomCode?.body ?? null
+                customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
+                interaction: dataBuilder?.interaction
             });
         } catch (err) {
             nextjs.captureException(err);

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/libs/helpers/normalize.js

@@ -88,9 +88,15 @@ const parseBuilderLibraryTemplate = (data)=>{
         ...data?.sections ?? []
     ], data?.sectionPosition);
 };
+const parseShopLibraryPageTemplate = (data)=>{
+    return normalizePageSectionResponseV2([
+        ...data?.shopLibrarySections ?? []
+    ], data?.sectionPosition);
+};
 
 exports.normalizeBuilderData = normalizeBuilderData;
 exports.normalizePageSectionResponseV2 = normalizePageSectionResponseV2;
 exports.parseBuilderLibraryTemplate = parseBuilderLibraryTemplate;
 exports.parseBuilderTemplate = parseBuilderTemplate;
 exports.parseBuilderTemplateV2 = parseBuilderTemplateV2;
+exports.parseShopLibraryPageTemplate = parseShopLibraryPageTemplate;

package/dist/cjs/libs/hooks/useSelectModeInteraction.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const useSelectModeInteraction = ()=>{
+    const changeSelectMode = (mode)=>{
+        const event = new CustomEvent('editor:interaction:change-select-mode', {
+            bubbles: true,
+            detail: mode
+        });
+        window.dispatchEvent(event);
+    };
+    return {
+        changeSelectMode
+    };
+};
+
+exports.useSelectModeInteraction = useSelectModeInteraction;