@gem-sdk/pages 1.50.10 → 1.51.0-staging.60

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,8 +22,10 @@ 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;
+    console.log('isSelectOnPage', isSelectOnPage);
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {}),
@@ -177,7 +180,8 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            })
+            }),
+            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
         ]
     });
 };

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

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+
+const InteractionSelectOnPageHeader = ()=>{
+    const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
+    const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const closeSelectOnPage = ()=>{
+        setInteractionIsSelectOnPage(false);
+        const event = new CustomEvent('editor:interaction:change-select-on-page', {
+            bubbles: true,
+            detail: false
+        });
+        window.dispatchEvent(event);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("header", {
+                className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "gp-h-10 gp-w-10"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("section", {
+                        className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                onClick: ()=>setInteractionSelectType('element'),
+                                className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                                children: "Select an element"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                onClick: ()=>setInteractionSelectType('page'),
+                                className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                                children: "Choose entire page"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        onClick: closeSelectOnPage,
+                        className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "20",
+                            height: "20",
+                            viewBox: "0 0 20 20",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
+                                fill: "#3C67FF"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-h-full gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[2px]"
+            })
+        ]
+    });
+};
+
+exports.default = InteractionSelectOnPageHeader;

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

@@ -36,6 +36,8 @@ const Toolbox = ()=>{
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
     const clearModal = core.useModalStore((s)=>s.clearModal);
+    const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
@@ -329,6 +331,18 @@ const Toolbox = ()=>{
     }, [
         setSalePageProductId
     ]);
+    const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
+        const isSelectOnPage = e.detail;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+    }, [
+        setInteractionIsSelectOnPage
+    ]);
+    const onUpdateInteractionItem = react.useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     react.useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -356,6 +370,8 @@ 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);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -375,6 +391,8 @@ 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);
         };
     }, [
         onAddEntity,
@@ -395,7 +413,9 @@ const Toolbox = ()=>{
         onUpdateItemName,
         onUpdateItemAttribute,
         onUpdateProductOffers,
-        onUpdateSalePageProductId
+        onUpdateSalePageProductId,
+        onUpdateInteractionItem,
+        onUpdateInteractionIsSelectOnPage
     ]);
     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

@@ -141,7 +141,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/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/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", {
@@ -79,17 +81,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/esm/components/builder/Header.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
+import { useShopStore, usePageStore, cls, makeStyleResponsive } from '@gem-sdk/core';
 import Devices from './SwitchView.js';
+import InteractionSelectOnPageHeader from './InteractionSelectOnPageHeader.js';
 
 const defaultMargin = {
     desktop: '16px',
@@ -17,8 +18,10 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate } = props;
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
+    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
+    console.log('isSelectOnPage', isSelectOnPage);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Devices, {}),
@@ -173,7 +176,8 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            })
+            }),
+            isSelectOnPage && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
         ]
     });
 };

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

@@ -0,0 +1,63 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { usePageStore } from '@gem-sdk/core';
+
+const InteractionSelectOnPageHeader = ()=>{
+    const selectType = usePageStore((s)=>s.interactionData?.selectType);
+    const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const closeSelectOnPage = ()=>{
+        setInteractionIsSelectOnPage(false);
+        const event = new CustomEvent('editor:interaction:change-select-on-page', {
+            bubbles: true,
+            detail: false
+        });
+        window.dispatchEvent(event);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("header", {
+                className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gp-h-10 gp-w-10"
+                    }),
+                    /*#__PURE__*/ jsxs("section", {
+                        className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                onClick: ()=>setInteractionSelectType('element'),
+                                className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                                children: "Select an element"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                onClick: ()=>setInteractionSelectType('page'),
+                                className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                                children: "Choose entire page"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        onClick: closeSelectOnPage,
+                        className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
+                        children: /*#__PURE__*/ jsx("svg", {
+                            width: "20",
+                            height: "20",
+                            viewBox: "0 0 20 20",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /*#__PURE__*/ jsx("path", {
+                                d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
+                                fill: "#3C67FF"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "gp-h-full gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[2px]"
+            })
+        ]
+    });
+};
+
+export { InteractionSelectOnPageHeader as default };

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

@@ -174,6 +174,7 @@ const Devices = ()=>{
             ]
         })
     });
+    return null;
 };
 
 export { Devices as default };

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

@@ -575,12 +575,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/esm/components/builder/Toolbox.js

@@ -32,6 +32,8 @@ const Toolbox = ()=>{
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
     const clearModal = useModalStore((s)=>s.clearModal);
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
@@ -325,6 +327,18 @@ const Toolbox = ()=>{
     }, [
         setSalePageProductId
     ]);
+    const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
+        const isSelectOnPage = e.detail;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+    }, [
+        setInteractionIsSelectOnPage
+    ]);
+    const onUpdateInteractionItem = useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -352,6 +366,8 @@ 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);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -371,6 +387,8 @@ 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);
         };
     }, [
         onAddEntity,
@@ -391,7 +409,9 @@ const Toolbox = ()=>{
         onUpdateItemName,
         onUpdateItemAttribute,
         onUpdateProductOffers,
-        onUpdateSalePageProductId
+        onUpdateSalePageProductId,
+        onUpdateInteractionItem,
+        onUpdateInteractionIsSelectOnPage
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

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

@@ -1,8 +1,8 @@
-import { ThemePageDocument, StorePropertyDocument, SaleFunnelDiscountsDocument, LibraryTemplateDocument, LibrarySaleFunnelDocument } from '@gem-sdk/core';
+import { ThemePageDocument, StorePropertyDocument, SaleFunnelDiscountsDocument, LibraryTemplateDocument, LibrarySaleFunnelDocument, ShopLibraryPageDocument } from '@gem-sdk/core';
 import { captureException } from '@sentry/nextjs';
 import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
-import { parseBuilderLibraryTemplate, parseBuilderTemplateV2 } from '../helpers/normalize.js';
+import { parseBuilderLibraryTemplate, parseShopLibraryPageTemplate, parseBuilderTemplateV2 } from '../helpers/normalize.js';
 import { usePagePreview } from '../hooks/usePagePreview.js';
 import { serializableJson } from '../helpers/parse-json.js';
 import { genCSS } from '../helpers/gen-css.js';
@@ -117,22 +117,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([
+            ShopLibraryPageDocument,
+            variables
+        ]),
+        fetcher([
+            StorePropertyDocument
+        ]),
+        fetcher([
+            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([
+            LibraryTemplateDocument,
+            variables
+        ]),
+        fetcher([
+            StorePropertyDocument
+        ]),
+        fetcher([
+            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 ? parseBuilderLibraryTemplate(dataBuilder) : parseBuilderTemplateV2(dataBuilder);
+            const pageTemplate = librarySaleFunnelID || isLibraryTemplate && currentOfferID ? parseBuilderLibraryTemplate(dataBuilder) : isShopLibraryPage ? parseShopLibraryPageTemplate(dataBuilder) : parseBuilderTemplateV2(dataBuilder);
             const gemPagesStoreFrontFetcher = storeFrontFetcher || fetcher;
             const [elementFontStyle, fontStyle, fallback] = await Promise.all([
                 getFontStyleFromPageTemplate(pageTemplate),
@@ -158,4 +256,4 @@ const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFet
         }
     };
 
-export { fetchPostPurchasePageDataByID, fetchSalePageDataByID, fetchThemePageDataByTemplateID, getPostPurchasePropsPreview };
+export { fetchLibraryTemplateDataByID, fetchPostPurchasePageDataByID, fetchSalePageDataByID, fetchShopLibraryPageDataByID, fetchThemePageDataByTemplateID, getPostPurchasePropsPreview, getRelevantPageData };

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

@@ -137,7 +137,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) {
             captureException(err);

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

@@ -139,7 +139,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
                 customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
                 pageHandle: dataBuilder.handle ?? null,
-                customFonts
+                customFonts,
+                interaction: dataBuilder?.interaction
             });
         } catch (err) {
             captureException(err);

package/dist/esm/libs/helpers/normalize.js

@@ -86,5 +86,10 @@ const parseBuilderLibraryTemplate = (data)=>{
         ...data?.sections ?? []
     ], data?.sectionPosition);
 };
+const parseShopLibraryPageTemplate = (data)=>{
+    return normalizePageSectionResponseV2([
+        ...data?.shopLibrarySections ?? []
+    ], data?.sectionPosition);
+};
 
-export { normalizeBuilderData, normalizePageSectionResponseV2, parseBuilderLibraryTemplate, parseBuilderTemplate, parseBuilderTemplateV2 };
+export { normalizeBuilderData, normalizePageSectionResponseV2, parseBuilderLibraryTemplate, parseBuilderTemplate, parseBuilderTemplateV2, parseShopLibraryPageTemplate };

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

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

package/dist/types/index.d.ts

@@ -40,6 +40,7 @@ type PageBuilderProps = {
     customCodeBody?: string | null;
     isStorefront?: boolean;
     customFonts?: string | null;
+    interaction?: ShopType.Maybe<Pick<ShopType.PublishedPageInteraction, "id" | "value">>;
 };
 type PageBuilderPropsV2 = {
     builderData?: {
@@ -93,7 +94,12 @@ type StaticPagePropsV2 = PageBuilderPropsV2 & {
 };
 declare const StaticPageV2: React.FC<StaticPagePropsV2 & AdditionalPageBuilderProps>;
 
-declare const getPostPurchasePropsPreview: (fetcher: FetchFunc, librarySaleFunnelID?: string, storeFrontFetcher?: FetchFunc) => (id: string, currentOfferID: string) => Promise<Omit<StaticPagePropsV2, 'publicStoreFrontData'>>;
+declare const getPostPurchasePropsPreview: (fetcher: FetchFunc, librarySaleFunnelID?: string, storeFrontFetcher?: FetchFunc) => (data: {
+    id: string;
+    currentOfferID: string;
+    isLibraryTemplate?: boolean;
+    isShopLibraryPage?: boolean;
+}) => Promise<Omit<StaticPagePropsV2, 'publicStoreFrontData'>>;
 
 declare const getStaticPagePropsPreview: (fetcher: FetchFunc, shopifyFetcher: FetchFunc) => (slug: string) => Promise<PageBuilderPropsV2>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.50.10",
+  "version": "1.51.0-staging.60",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,7 +26,7 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.50.2",
+    "@gem-sdk/core": "1.51.0-staging.60",
     "@gem-sdk/plugin-cookie-bar": "1.50.0",
     "@gem-sdk/plugin-quick-view": "1.50.0",
     "@gem-sdk/plugin-sticky-add-to-cart": "1.50.0"