@gem-sdk/pages 1.48.0-dev.1 → 1.48.0-dev.102

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

@@ -8,57 +8,61 @@ 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);
-    };
+    const { closeSelectOnPage } = core.useInteraction();
     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",
+                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-h-10 gp-w-10"
+                        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-p-1 gp-gap-1",
+                        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-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"
+                                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-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"
+                                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-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
+                        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: "20",
-                            height: "20",
-                            viewBox: "0 0 20 20",
+                            width: "12",
+                            height: "12",
+                            viewBox: "0 0 12 12",
                             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"
+                                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-h-full gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[2px]"
+                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)'
+                }
             })
         ]
     });

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

@@ -38,6 +38,7 @@ const Toolbox = ()=>{
     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
     ]);
@@ -332,10 +333,13 @@ const Toolbox = ()=>{
         setSalePageProductId
     ]);
     const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
-        const isSelectOnPage = e.detail;
+        const isSelectOnPage = e.detail.value;
+        const mode = e.detail.mode;
         setInteractionIsSelectOnPage(isSelectOnPage);
+        setInteractionSelectType(mode);
     }, [
-        setInteractionIsSelectOnPage
+        setInteractionIsSelectOnPage,
+        setInteractionSelectType
     ]);
     const onUpdateInteractionItem = react.useCallback((e)=>{
         const interactionItem = e.detail;

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.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/InteractionSelectOnPageHeader.js

@@ -1,60 +1,64 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { usePageStore } from '@gem-sdk/core';
+import { usePageStore, useInteraction } 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);
-    };
+    const { closeSelectOnPage } = useInteraction();
     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",
+                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-h-10 gp-w-10"
+                        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-p-1 gp-gap-1",
+                        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-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"
+                                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-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"
+                                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-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
+                        className: "gp-h-10 gp-w-10 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",
+                            width: "12",
+                            height: "12",
+                            viewBox: "0 0 12 12",
                             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"
+                                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-h-full gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF] gp-border-[2px]"
+                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)'
+                }
             })
         ]
     });

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

@@ -34,6 +34,7 @@ const Toolbox = ()=>{
     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
     ]);
@@ -328,10 +329,13 @@ const Toolbox = ()=>{
         setSalePageProductId
     ]);
     const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
-        const isSelectOnPage = e.detail;
+        const isSelectOnPage = e.detail.value;
+        const mode = e.detail.mode;
         setInteractionIsSelectOnPage(isSelectOnPage);
+        setInteractionSelectType(mode);
     }, [
-        setInteractionIsSelectOnPage
+        setInteractionIsSelectOnPage,
+        setInteractionSelectType
     ]);
     const onUpdateInteractionItem = useCallback((e)=>{
         const interactionItem = e.detail;

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.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.48.0-dev.1",
+  "version": "1.48.0-dev.102",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.48.0-dev.1",
-    "@gem-sdk/plugin-cookie-bar": "1.48.0-dev.1",
-    "@gem-sdk/plugin-quick-view": "1.48.0-dev.1",
-    "@gem-sdk/plugin-sticky-add-to-cart": "1.48.0-dev.1"
+    "@gem-sdk/core": "1.48.0-dev.102",
+    "@gem-sdk/plugin-cookie-bar": "1.48.0-dev.3",
+    "@gem-sdk/plugin-quick-view": "1.48.0-dev.3",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.48.0-dev.3"
   },
   "peerDependencies": {
     "next": ">=13"