@gem-sdk/pages 2.0.0-staging.120 → 2.0.2

package/dist/esm/components/GoogleAnalytic.js

@@ -1,26 +1,27 @@
-'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { gtag } from '@gem-sdk/core';
-import { useSearchParams, usePathname } from 'next/navigation';
+import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useEffect } from 'react';
 
 const GoogleAnalytic = ({ trackingId })=>{
-    const searchParams = useSearchParams();
-    const pathName = usePathname();
+    const router = useRouter();
     useEffect(()=>{
-        const url = pathName + searchParams.toString();
         const handleRouteChange = (url)=>{
             gtag.pageview(url, trackingId);
         };
-        handleRouteChange(url);
+        router.events.on('routeChangeComplete', handleRouteChange);
+        router.events.on('hashChangeComplete', handleRouteChange);
+        return ()=>{
+            router.events.off('routeChangeComplete', handleRouteChange);
+            router.events.off('hashChangeComplete', handleRouteChange);
+        };
     }, [
         trackingId,
-        pathName,
-        searchParams
+        router.events
     ]);
     const handleOnReady = ()=>{
-        gtag.pageview(pathName, trackingId);
+        gtag.pageview(router.pathname, trackingId);
     };
     if (!trackingId) return null;
     if (trackingId.startsWith('UA-')) return /*#__PURE__*/ jsxs(Fragment, {

package/dist/esm/components/TikTokPixel.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Script from 'next/script';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { useInteraction, cls, RenderPreview } from '@gem-sdk/core';

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
 import { useState, useEffect } from 'react';

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

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

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

@@ -0,0 +1,188 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { usePageStore, useInteraction } from '@gem-sdk/core';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+
+const InteractionSelectOnPageHeader = ()=>{
+    const selectType = usePageStore((s)=>s.interactionData?.selectType);
+    const settingType = usePageStore((s)=>s.interactionData?.settingType);
+    const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
+    const { closeSelectOnPage, changeSelectMode } = useInteraction();
+    const [hoverOption, setHoverOption] = useState(null);
+    const [openDropdown, setOpenDropdown] = useState(false);
+    const popupRef = useRef(null);
+    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
+    const handleSetInteraction = (type)=>{
+        setOpenDropdown(false);
+        setInteractionSelectType(type);
+        changeSelectMode(type);
+        if (type == 'PAGE') closeSelectOnPage();
+    };
+    const handleClickOutside = useCallback((event)=>{
+        if (!openDropdown) return;
+        if (popupRef.current && !popupRef.current.contains(event.target)) {
+            setOpenDropdown(false);
+        }
+    }, [
+        openDropdown
+    ]);
+    useEffect(()=>{
+        document.addEventListener('mousedown', handleClickOutside);
+        return ()=>{
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [
+        handleClickOutside
+    ]);
+    const isShowOverlay = useMemo(()=>{
+        return hoverOption !== 'ELEMENT' && (selectType === 'PAGE' || selectType === 'ELEMENT' && hoverOption === 'PAGE') && settingType === 'TRIGGER';
+    }, [
+        hoverOption,
+        selectType
+    ]);
+    const title = useMemo(()=>{
+        const type = selectType === 'ELEMENT' ? 'an element' : 'entire page';
+        if (settingType === 'TRIGGER') return `Start with triggering  ${type}`;
+        return `Set ${selectType === 'ELEMENT' ? 'an element' : 'entire page'} as target`;
+    }, [
+        selectType,
+        settingType
+    ]);
+    const renderIconCheckSvg = ()=>{
+        return /*#__PURE__*/ jsx("div", {
+            className: "gp-w-[21px]",
+            children: /*#__PURE__*/ jsx("svg", {
+                width: "21",
+                height: "20",
+                viewBox: "0 0 21 20",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /*#__PURE__*/ jsx("path", {
+                    fillRule: "evenodd",
+                    clipRule: "evenodd",
+                    d: "M16.3415 5.1766C16.5528 5.41207 16.5528 5.79383 16.3415 6.0293L8.45016 14.8234C8.34869 14.9365 8.21107 15 8.06757 15C7.92408 15 7.78645 14.9365 7.68499 14.8234L4.65846 11.4505C4.44717 11.215 4.44718 10.8333 4.65848 10.5978C4.86978 10.3623 5.21236 10.3623 5.42365 10.5978L8.06759 13.5443L15.5764 5.1766C15.7877 4.94113 16.1302 4.94113 16.3415 5.1766Z",
+                    fill: "#00C853"
+                })
+            })
+        });
+    };
+    if (!isSelectOnPage) return null;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("header", {
+                className: "gp-flex gp-text-[12px] gp-justify-center gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-[1000] gp-bg-[#151515] gp-text-white interaction-select-mode-header",
+                children: /*#__PURE__*/ jsxs("section", {
+                    className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-2",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "gp-relative",
+                            children: [
+                                /*#__PURE__*/ jsxs("button", {
+                                    className: `gp-h-full hover:gp-bg-[#7190FF] gp-w-[280px] gp-gap-2 gp-py-2 gp-px-4 gp-items-center gp-justify-center gp-leading-5 gp-font-medium  gp-flex gp-rounded-b-[8px] gp-bg-[#3C67FF] gp-text-[#F9F9F9]`,
+                                    onClick: ()=>setOpenDropdown((prev)=>!prev),
+                                    children: [
+                                        /*#__PURE__*/ jsx("p", {
+                                            className: "gp-grow",
+                                            children: title
+                                        }),
+                                        settingType === 'TRIGGER' && /*#__PURE__*/ jsx("div", {
+                                            className: "gp-w-[21px]",
+                                            children: /*#__PURE__*/ jsx("svg", {
+                                                width: "16",
+                                                height: "16",
+                                                viewBox: "0 0 16 16",
+                                                fill: "currentColor",
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                children: /*#__PURE__*/ jsx("path", {
+                                                    fillRule: "evenodd",
+                                                    clipRule: "evenodd",
+                                                    d: "M4.13017 6.11716C4.30374 5.96095 4.58515 5.96095 4.75871 6.11716L8 9.03431L11.2413 6.11716C11.4149 5.96095 11.6963 5.96095 11.8698 6.11716C12.0434 6.27337 12.0434 6.52663 11.8698 6.68284L8.31427 9.88284C8.1407 10.0391 7.8593 10.0391 7.68573 9.88284L4.13017 6.68284C3.95661 6.52663 3.95661 6.27337 4.13017 6.11716Z",
+                                                    fill: "currentColor"
+                                                })
+                                            })
+                                        })
+                                    ]
+                                }),
+                                openDropdown && settingType === 'TRIGGER' && /*#__PURE__*/ jsxs("div", {
+                                    ref: popupRef,
+                                    className: "gp-p-2 gp-flex gp-flex-col gp-absolute gp-top-[calc(100%_+_4px)] gp-w-[280px] gp-bg-[#151515] gp-rounded-xl gp-text-white",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "gp-p-2 gp-flex gp-gap-2 gp-cursor-pointer hover:gp-bg-[#3b3b3b] gp-rounded-lg",
+                                            "aria-hidden": true,
+                                            onClick: ()=>handleSetInteraction('ELEMENT'),
+                                            onMouseOver: ()=>setHoverOption('ELEMENT'),
+                                            onFocus: ()=>setHoverOption('ELEMENT'),
+                                            onMouseLeave: ()=>setHoverOption(null),
+                                            children: [
+                                                selectType === 'ELEMENT' ? renderIconCheckSvg() : /*#__PURE__*/ jsx("div", {
+                                                    className: "gp-w-[21px]",
+                                                    children: /*#__PURE__*/ jsx("svg", {
+                                                        width: "18",
+                                                        height: "18",
+                                                        viewBox: "0 0 18 18",
+                                                        fill: "none",
+                                                        xmlns: "http://www.w3.org/2000/svg",
+                                                        children: /*#__PURE__*/ jsx("path", {
+                                                            fillRule: "evenodd",
+                                                            clipRule: "evenodd",
+                                                            d: "M8.99983 0.351562C9.34501 0.351562 9.62483 0.631385 9.62483 0.976562V2.15278C12.923 2.45 15.5496 5.07654 15.8468 8.37476H17.0233C17.3684 8.37476 17.6483 8.65458 17.6483 8.99976C17.6483 9.34493 17.3684 9.62476 17.0233 9.62476H15.8468C15.5496 12.923 12.923 15.5495 9.62483 15.8467V17.0232C9.62483 17.3683 9.34501 17.6482 8.99983 17.6482C8.65465 17.6482 8.37483 17.3683 8.37483 17.0232V15.8467C5.07662 15.5495 2.45007 12.923 2.15286 9.62476H0.976562C0.631385 9.62476 0.351562 9.34493 0.351562 8.99976C0.351562 8.65458 0.631385 8.37476 0.976562 8.37476H2.15286C2.45007 5.07654 5.07662 2.45 8.37483 2.15278V0.976562C8.37483 0.631385 8.65465 0.351562 8.99983 0.351562ZM3.40916 9.62476H5.97656C6.32174 9.62476 6.60156 9.34493 6.60156 8.99976C6.60156 8.65458 6.32174 8.37476 5.97656 8.37476H3.40916C3.69738 5.7675 5.76757 3.6973 8.37483 3.40909V5.97656C8.37483 6.32174 8.65465 6.60156 8.99983 6.60156C9.34501 6.60156 9.62483 6.32174 9.62483 5.97656V3.40909C12.2321 3.6973 14.3023 5.7675 14.5905 8.37476H12.0233C11.6781 8.37476 11.3983 8.65458 11.3983 8.99976C11.3983 9.34493 11.6781 9.62476 12.0233 9.62476H14.5905C14.3023 12.232 12.2321 14.3022 9.62483 14.5904V12.0232C9.62483 11.678 9.34501 11.3982 8.99983 11.3982C8.65465 11.3982 8.37483 11.678 8.37483 12.0232V14.5904C5.76757 14.3022 3.69738 12.232 3.40916 9.62476Z",
+                                                            fill: "#AAAAAA"
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx("p", {
+                                                    className: "gp-h-[21px]",
+                                                    children: "An element"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "gp-p-2 gp-flex gp-gap-2 gp-cursor-pointer hover:gp-bg-[#3b3b3b] gp-rounded-lg",
+                                            onClick: ()=>handleSetInteraction('PAGE'),
+                                            onMouseOver: ()=>setHoverOption('PAGE'),
+                                            onFocus: ()=>setHoverOption('PAGE'),
+                                            onMouseLeave: ()=>setHoverOption(null),
+                                            "aria-hidden": true,
+                                            children: [
+                                                selectType === 'PAGE' ? renderIconCheckSvg() : /*#__PURE__*/ jsx("svg", {
+                                                    width: "21",
+                                                    height: "20",
+                                                    viewBox: "0 0 21 20",
+                                                    fill: "none",
+                                                    xmlns: "http://www.w3.org/2000/svg",
+                                                    children: /*#__PURE__*/ jsx("path", {
+                                                        fillRule: "evenodd",
+                                                        clipRule: "evenodd",
+                                                        d: "M7.25 4.5C6.55964 4.5 6 5.05964 6 5.75V14.25C6 14.9404 6.55964 15.5 7.25 15.5H13.75C14.4404 15.5 15 14.9404 15 14.25V9.5H11.75C10.7835 9.5 10 8.7165 10 7.75V4.5H7.25ZM11.5 5.56066L13.9393 8H11.75C11.6119 8 11.5 7.88807 11.5 7.75V5.56066ZM4.5 5.75C4.5 4.23122 5.73122 3 7.25 3H10.75C10.9489 3 11.1397 3.07902 11.2803 3.21967L16.2803 8.21967C16.421 8.36032 16.5 8.55109 16.5 8.75V14.25C16.5 15.7688 15.2688 17 13.75 17H7.25C5.73122 17 4.5 15.7688 4.5 14.25V5.75Z",
+                                                        fill: "#AAAAAA"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx("p", {
+                                                    className: "gp-h-[21px]",
+                                                    children: "Entire page"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            className: "",
+                            onClick: closeSelectOnPage,
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            }),
+            isShowOverlay && /*#__PURE__*/ jsx("div", {
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999] gp-bg-[#3c67ff]/[0.25] gp-pointer-events-none`,
+                style: {
+                    height: 'calc(100% - 40px)'
+                }
+            })
+        ]
+    });
+};
+
+export { InteractionSelectOnPageHeader as default };

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useBuilderPreviewStore, useModalStore, useInteraction, cls } from '@gem-sdk/core';
 import { memo, useMemo, useCallback, useEffect } from 'react';

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { devices } from './const.js';

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { memo, useRef, useCallback, useEffect } from 'react';
 import { getDOMElementParents } from './toolbar/utils/getDOMElementParents.js';

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useMatchMutate, useShopStore, usePageStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
 import { memo, useMemo, useCallback, useEffect } from 'react';

package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { useShopStore, useBuilderPreviewStore, makeStyleResponsive } from '@gem-sdk/core';

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const DropElement = ()=>{

package/dist/esm/components/image-to-layout/ImageToLayout.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useBuilderPreviewStore, cls } from '@gem-sdk/core';
 import { DropElement } from './DropElement.js';

package/dist/esm/index.js

@@ -16,6 +16,12 @@ export { isBot } from './libs/helpers/user-agent.js';
 export { normalizePageSectionResponseV2, parseBuilderTemplateV2 } from './libs/helpers/normalize.js';
 export { getFallbackV2 } from './libs/helpers/get-fallback.js';
 export { retryWithDelay } from './libs/helpers/common.js';
+export { default as CollectionDetailPage } from './pages/collection-detail.js';
+export { PreviewPage } from './pages/preview.js';
+export { default as ProductDetailPage } from './pages/product-detail.js';
+export { default as StaticPage } from './pages/static.js';
+export { BuilderPage } from './pages/builder.js';
+export { StaticPageV2 } from './pages/static-v2.js';
 export { getStaticPaths } from './libs/getStaticPaths.js';
 export { getFontFromGroupSetting, getFontsFromDataBuilder } from './libs/helpers/gen-fonts.js';
 export { getFontFromGlobalStyle, getFonts } from './libs/google-fonts.js';
@@ -27,9 +33,4 @@ export { Page500 } from './pages/500.js';
 export { GoogleAnalytic } from './components/GoogleAnalytic.js';
 export { FacebookPixel } from './components/FacebookPixel.js';
 export { TikTokPixel } from './components/TikTokPixel.js';
-export { default as CollectionDetailPage } from './pages/collection-detail.js';
-export { PreviewPage } from './pages/preview.js';
-export { default as ProductDetailPage } from './pages/product-detail.js';
-export { default as StaticPage } from './pages/static.js';
-export { BuilderPage } from './pages/builder.js';
-export { StaticPageV2 } from './pages/static-v2.js';
+export { parseHtml } from './libs/parse-html.js';

package/dist/esm/layouts/main.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useShopStore, cls, AddOn } from '@gem-sdk/core';
 import { parseHtml } from '../libs/parse-html.js';

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

@@ -251,7 +251,6 @@ const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFet
                 productOffers
             });
         } catch (err) {
-            console.log('error', err);
             captureException(err);
             throw err;
         }

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

@@ -5,9 +5,10 @@ import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
-import { parseBuilderTemplateV2, extractPageBackground } from '../helpers/normalize.js';
+import { parseBuilderTemplateV2 } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
 import { getCustomFonts } from '../custom-fonts.js';
+import { sentryCaptureException } from '../helpers/sentry.js';
 
 const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
         try {
@@ -29,6 +30,10 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 ])
             ]);
             if (theme.status === 'rejected') {
+                sentryCaptureException('PreviewThemePageDocument', JSON.stringify(theme), {
+                    variables,
+                    theme
+                });
                 throw new Error(theme.reason?.[0]);
             }
             const dataBuilder = theme.value.previewThemePage;
@@ -43,7 +48,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 getFallbackV2(fetcher, pageTemplate),
                 getCustomFonts(themePageCustomFonts)
             ]);
-            const mobileOnly = !!dataBuilder.isMobile;
+            const mobileOnly = dataBuilder.isMobile ?? false;
             const description = dataBuilder?.dataSEO?.find((item)=>item?.key === 'global-meta-description')?.value;
             const thumbnail = parseJson(dataBuilder?.dataSEO?.find((item)=>item?.key === 'global-meta-thumbnail')?.value);
             const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
@@ -117,15 +122,15 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             };
             const languageIsoCode = shopMeta?.localization.language.isoCode ?? null;
             const countryIsoCode = shopMeta?.localization.country.isoCode ?? null;
-            const locale = languageIsoCode && countryIsoCode ? `${languageIsoCode}-${countryIsoCode}` : null;
+            const locale = !languageIsoCode || !countryIsoCode ? null : `${languageIsoCode}-${countryIsoCode}`;
             return serializableJson({
                 themeStyle: genCSS(dataBuilder?.themeStyle?.data, mobileOnly),
                 fontStyle,
                 elementFontStyle,
                 builderData: pageTemplate,
                 pageType,
-                moneyFormat: shopMeta?.shop?.moneyFormat ?? null,
-                currency: shopMeta?.localization?.country?.currency?.isoCode ?? null,
+                moneyFormat: shopMeta?.shop.moneyFormat ?? null,
+                currency: shopMeta?.localization.country.currency.isoCode ?? null,
                 languageIsoCode,
                 countryIsoCode,
                 locale,
@@ -141,7 +146,6 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeHeader: dataBuilder.customCode?.header ?? null,
                 customCodeBody: dataBuilder.customCode?.body ?? null,
                 customFonts,
-                pageBackground: extractPageBackground(dataBuilder),
                 interaction: dataBuilder?.interaction
             });
         } catch (err) {

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

@@ -4,7 +4,7 @@ import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
-import { parseBuilderTemplateV2, extractPageBackground } from '../helpers/normalize.js';
+import { parseBuilderTemplateV2 } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
 import { captureException } from '@sentry/nextjs';
 import { getCustomFonts } from '../custom-fonts.js';
@@ -150,8 +150,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
                 pageHandle: dataBuilder.handle ?? null,
                 customFonts,
-                interaction: dataBuilder?.interaction,
-                pageBackground: extractPageBackground(dataBuilder)
+                interaction: dataBuilder?.interaction
             });
         } catch (err) {
             captureException(err);

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

@@ -81,14 +81,6 @@ const parseBuilderTemplate = (data)=>{
         ...data?.themePageCustomSections ?? []
     ], data?.sectionPosition);
 };
-const extractPageBackground = (data)=>{
-    try {
-        const pageBackgroundStr = data?.metafields?.find((item)=>item?.key === 'page_background')?.value;
-        return JSON.parse(pageBackgroundStr ?? '{}');
-    } catch  {
-        return {};
-    }
-};
 const parseBuilderLibraryTemplate = (data)=>{
     return normalizePageSectionResponseV2([
         ...data?.sections ?? []
@@ -100,4 +92,4 @@ const parseShopLibraryPageTemplate = (data)=>{
     ], data?.sectionPosition);
 };
 
-export { extractPageBackground, normalizeBuilderData, normalizePageSectionResponseV2, parseBuilderLibraryTemplate, parseBuilderTemplate, parseBuilderTemplateV2, parseShopLibraryPageTemplate };
+export { normalizeBuilderData, normalizePageSectionResponseV2, parseBuilderLibraryTemplate, parseBuilderTemplate, parseBuilderTemplateV2, parseShopLibraryPageTemplate };

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

@@ -0,0 +1,15 @@
+import { withScope, captureMessage } from '@sentry/nextjs';
+
+const sentryCaptureException = (funcName, message, data, options)=>{
+    withScope((scope)=>{
+        scope.setLevel(options?.level ?? 'log');
+        if (options?.tag) {
+            scope.setTag(options?.tag.key, options?.tag.value);
+        }
+        scope.setExtra('function', funcName);
+        scope.setExtra('data', JSON.stringify(data));
+        captureMessage(`${funcName}: ${message}`);
+    });
+};
+
+export { sentryCaptureException };

package/dist/esm/libs/hooks/use-tracking-view.js

@@ -1,4 +1,3 @@
-'use client';
 import { PageViewUpDocument } from '@gem-sdk/core';
 import { useCallback, useEffect } from 'react';
 

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

@@ -10,7 +10,7 @@ import FooterForPostPurchase from '../components/FooterForPostPurchase.js';
 import Script from 'next/script';
 import { useEffect } from 'react';
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview, interaction, pageBackground })=>{
+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);
@@ -78,14 +78,7 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
                         dangerouslySetInnerHTML: {
                             __html: customFonts
                         }
-                    }, fontStyle),
-                    pageBackground?.isUsePageBackground && pageBackground?.background && /*#__PURE__*/ jsx("style", {
-                        children: `
-            body {
-              background: ${pageBackground.background};
-            }
-          `
-                    }, `page_background_${pageBackground?.background}`)
+                    }, fontStyle)
                 ]
             }),
             /*#__PURE__*/ jsx(PageProvider, {

package/dist/types/index.d.ts

@@ -42,10 +42,6 @@ type PageBuilderProps = {
     customFonts?: string | null;
     interaction?: ShopType.Maybe<Pick<ShopType.PublishedPageInteraction, "id" | "value">>;
     timezone?: string;
-    pageBackground?: {
-        isUsePageBackground?: boolean;
-        background?: string;
-    };
 };
 type PageBuilderPropsV2 = {
     builderData?: {
@@ -162,6 +158,36 @@ type RetryConfig = {
 };
 declare const retryWithDelay: <T = unknown>(fn: () => T, config?: RetryConfig) => Promise<T>;
 
+type PreviewPageProps = {
+    components: Record<string, React.ComponentType<any>>;
+    pageType: ShopType.PublishedThemePageType;
+};
+declare const PreviewPage: React.FC<PreviewPageProps>;
+
+type StaticPageProps = PageBuilderProps;
+declare const StaticPage: React.FC<StaticPageProps & AdditionalPageBuilderProps>;
+
+type BuilderPageProps = {
+    components: Record<string, React.ComponentType<any>>;
+    seo?: NextSeoProps;
+    themeStyle?: string | null;
+    fontStyle?: string | null;
+    header?: BuilderState;
+    footer?: BuilderState;
+    sectionData?: Record<string, SectionData$1>;
+    storefrontToken?: string | null;
+    storefrontHandle?: string | null;
+    shopToken?: string | null;
+    mode?: RenderMode;
+    pageType: ShopType.PublishedThemePageType;
+    editorImageToLayout?: boolean;
+    isThemeSectionEditor?: boolean;
+    hiddenToolbar?: boolean;
+    pageName: string;
+    isOriginTemplate?: boolean;
+};
+declare const BuilderPage: React.FC<BuilderPageProps>;
+
 declare const getStaticPaths: GetStaticPaths;
 
 type TypographyV2FontFamilyType = 'google' | 'custom' | 'theme' | 'bunny';
@@ -232,34 +258,6 @@ type Props = {
 };
 declare const TikTokPixel: ({ pixelId }: Props) => react_jsx_runtime.JSX.Element | null;
 
-type PreviewPageProps = {
-    components: Record<string, React.ComponentType<any>>;
-    pageType: ShopType.PublishedThemePageType;
-};
-declare const PreviewPage: React.FC<PreviewPageProps>;
-
-type StaticPageProps = PageBuilderProps;
-declare const StaticPage: React.FC<StaticPageProps & AdditionalPageBuilderProps>;
-
-type BuilderPageProps = {
-    components: Record<string, React.ComponentType<any>>;
-    seo?: NextSeoProps;
-    themeStyle?: string | null;
-    fontStyle?: string | null;
-    header?: BuilderState;
-    footer?: BuilderState;
-    sectionData?: Record<string, SectionData$1>;
-    storefrontToken?: string | null;
-    storefrontHandle?: string | null;
-    shopToken?: string | null;
-    mode?: RenderMode;
-    pageType: ShopType.PublishedThemePageType;
-    editorImageToLayout?: boolean;
-    isThemeSectionEditor?: boolean;
-    hiddenToolbar?: boolean;
-    pageName: string;
-    isOriginTemplate?: boolean;
-};
-declare const BuilderPage: React.FC<BuilderPageProps>;
+declare const parseHtml: (key: string, html?: string | null, isHead?: boolean) => string | JSX.Element | JSX.Element[] | undefined;
 
-export { AppPropsWithLayout, BuilderPage, CollectionDetailPage, CollectionPageProps, ErrorBoundary, ErrorFallback, FacebookPixel, GoogleAnalytic, NextPageWithLayout, Page404, Page500, PageBuilderProps, PageBuilderPropsV2, PreviewPage, ProductDetailPage, ProductPageProps, StaticPage, StaticPageProps, StaticPagePropsV2, StaticPageV2, TikTokPixel, createAppAPIFetcher, createFetcher, createShopifyFetcher, genCSS, getBuilderProps, getCollectionProps, getFallbackV2, getFontFromGlobalStyle, getFontFromGroupSetting, getFonts, getFontsFromDataBuilder, getHomePageProps, getHomePagePropsV2, getLayout, getPostPurchasePropsPreview, getPreviewProps, getProductProps, getStaticPagePropsPreview, getStaticPagePropsV2, getStaticPaths, getStorefrontApi, isBot, normalizePageSectionResponseV2, parseBuilderTemplateV2, retryWithDelay, usePagePreview, useTrackingView };
+export { AppPropsWithLayout, BuilderPage, CollectionDetailPage, CollectionPageProps, ErrorBoundary, ErrorFallback, FacebookPixel, GoogleAnalytic, NextPageWithLayout, Page404, Page500, PageBuilderProps, PreviewPage, ProductDetailPage, ProductPageProps, StaticPage, StaticPageProps, StaticPagePropsV2, StaticPageV2, TikTokPixel, createAppAPIFetcher, createFetcher, createShopifyFetcher, genCSS, getBuilderProps, getCollectionProps, getFallbackV2, getFontFromGlobalStyle, getFontFromGroupSetting, getFonts, getFontsFromDataBuilder, getHomePageProps, getHomePagePropsV2, getLayout, getPostPurchasePropsPreview, getPreviewProps, getProductProps, getStaticPagePropsPreview, getStaticPagePropsV2, getStaticPaths, getStorefrontApi, isBot, normalizePageSectionResponseV2, parseBuilderTemplateV2, parseHtml, retryWithDelay, usePagePreview, useTrackingView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "2.0.0-staging.120",
+  "version": "2.0.2",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.0.0-staging.117",
-    "@gem-sdk/plugin-cookie-bar": "1.58.0-staging.25",
-    "@gem-sdk/plugin-quick-view": "1.58.0-staging.25",
-    "@gem-sdk/plugin-sticky-add-to-cart": "1.58.0-staging.25"
+    "@gem-sdk/core": "2.0.2",
+    "@gem-sdk/plugin-cookie-bar": "1.58.0",
+    "@gem-sdk/plugin-quick-view": "1.58.0",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.58.0"
   },
   "peerDependencies": {
     "next": ">=13"