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

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,71 @@
+'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 { closeSelectOnPage } = core.useInteraction();
+    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-black gp-text-white",
+                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-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                "data-interaction-mode": "element",
+                                onClick: ()=>setInteractionSelectType('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]'}`,
+                                style: {
+                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
+                                },
+                                children: "Choose an element on page"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                "data-interaction-mode": "page",
+                                onClick: ()=>setInteractionSelectType('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]'}`,
+                                style: {
+                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
+                                },
+                                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-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-90 gp-bg-[#3c67ff]/[0.25]' : ''}`,
+                style: {
+                    height: 'calc(100% - 40px)'
+                }
+            })
+        ]
+    });
+};
+
+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,9 @@ 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 setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
@@ -329,6 +332,21 @@ const Toolbox = ()=>{
     }, [
         setSalePageProductId
     ]);
+    const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
+        const isSelectOnPage = e.detail.value;
+        const mode = e.detail.mode;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+        setInteractionSelectType(mode);
+    }, [
+        setInteractionIsSelectOnPage,
+        setInteractionSelectType
+    ]);
+    const onUpdateInteractionItem = react.useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     react.useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -356,6 +374,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 +395,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 +417,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,67 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { usePageStore, useInteraction } from '@gem-sdk/core';
+
+const InteractionSelectOnPageHeader = ()=>{
+    const selectType = usePageStore((s)=>s.interactionData?.selectType);
+    const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
+    const { closeSelectOnPage } = useInteraction();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ 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-black gp-text-white",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "gp-ml-4 gp-text-xs gp-mt-1",
+                        children: "Select mode enabled"
+                    }),
+                    /*#__PURE__*/ jsxs("section", {
+                        className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                "data-interaction-mode": "element",
+                                onClick: ()=>setInteractionSelectType('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]'}`,
+                                style: {
+                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
+                                },
+                                children: "Choose an element on page"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                "data-interaction-mode": "page",
+                                onClick: ()=>setInteractionSelectType('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]'}`,
+                                style: {
+                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
+                                },
+                                children: "Use entire page"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ 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__*/ jsx("svg", {
+                            width: "12",
+                            height: "12",
+                            viewBox: "0 0 12 12",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /*#__PURE__*/ 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__*/ jsx("div", {
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF]  gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-90 gp-bg-[#3c67ff]/[0.25]' : ''}`,
+                style: {
+                    height: 'calc(100% - 40px)'
+                }
+            })
+        ]
+    });
+};
+
+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,9 @@ 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 setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
@@ -325,6 +328,21 @@ const Toolbox = ()=>{
     }, [
         setSalePageProductId
     ]);
+    const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
+        const isSelectOnPage = e.detail.value;
+        const mode = e.detail.mode;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+        setInteractionSelectType(mode);
+    }, [
+        setInteractionIsSelectOnPage,
+        setInteractionSelectType
+    ]);
+    const onUpdateInteractionItem = useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -352,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);
@@ -371,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,
@@ -391,7 +413,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.51.0",
+  "version": "1.53.0-dev.4",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.51.0",
-    "@gem-sdk/plugin-cookie-bar": "1.51.0",
-    "@gem-sdk/plugin-quick-view": "1.51.0",
-    "@gem-sdk/plugin-sticky-add-to-cart": "1.51.0"
+    "@gem-sdk/core": "1.53.0-dev.4",
+    "@gem-sdk/plugin-cookie-bar": "1.53.0-dev.4",
+    "@gem-sdk/plugin-quick-view": "1.53.0-dev.4",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.53.0-dev.4"
   },
   "peerDependencies": {
     "next": ">=13"