@gem-sdk/pages 1.57.15-staging.12 → 1.58.0-dev.114

package/dist/cjs/components/ErrorBoundary.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/components/ErrorFallback.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/components/FacebookPixel.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/components/FooterForPostPurchase.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/components/GoogleAnalytic.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/components/TikTokPixel.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -37,8 +38,13 @@ const InteractionSelectOnPageHeader = ()=>{
     }, [
         handleClickOutside
     ]);
+    react.useEffect(()=>{
+        setHoverOption(null);
+    }, [
+        selectType
+    ]);
     const isShowOverlay = react.useMemo(()=>{
-        return hoverOption !== 'ELEMENT' && (selectType === 'PAGE' || selectType === 'ELEMENT' && hoverOption === 'PAGE') && settingType === 'TRIGGER';
+        return hoverOption !== 'ELEMENT' && (selectType === 'PAGE' || selectType === 'ELEMENT' && hoverOption === 'PAGE');
     }, [
         hoverOption,
         selectType
@@ -87,7 +93,7 @@ const InteractionSelectOnPageHeader = ()=>{
                                             className: "gp-grow",
                                             children: title
                                         }),
-                                        settingType === 'TRIGGER' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             className: "gp-w-[21px]",
                                             children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
                                                 width: "16",
@@ -105,7 +111,7 @@ const InteractionSelectOnPageHeader = ()=>{
                                         })
                                     ]
                                 }),
-                                openDropdown && settingType === 'TRIGGER' && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                openDropdown && /*#__PURE__*/ jsxRuntime.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: [

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/layouts/main.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/libs/api/get-builder-props.js

@@ -5,16 +5,20 @@ var adapterShopify = require('@gem-sdk/adapter-shopify');
 var parseJson = require('../helpers/parse-json.js');
 
 const getBuilderProps = async (fetcher, shopifyFetcher)=>{
-    const [storeProperty, shopifyMeta] = await Promise.allSettled([
+    const [storeProperty, shopifyMeta, shopifyInfo] = await Promise.allSettled([
         fetcher([
             core.StorePropertyDocument
         ]),
         shopifyFetcher([
             adapterShopify.ShopMetaDocument
+        ]),
+        fetcher([
+            core.ShopShopifyDocument
         ])
     ]);
     const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
     const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
+    const shopInfo = shopifyInfo.status === 'fulfilled' ? shopifyInfo.value : undefined;
     const seo = shopMeta ? {
         titleTemplate: `%s | ${shopMeta.shop.name}`,
         defaultTitle: shopMeta?.shop.name,
@@ -34,7 +38,8 @@ const getBuilderProps = async (fetcher, shopifyFetcher)=>{
         swr: {
             revalidateOnMount: true
         },
-        seo
+        seo,
+        timezone: shopInfo?.shopShopify?.timezone
     });
 };
 

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

@@ -9,6 +9,7 @@ var generateManifres = require('../helpers/generate-manifres.js');
 var getFallback = require('../helpers/get-fallback.js');
 var normalize = require('../helpers/normalize.js');
 var parseJson = require('../helpers/parse-json.js');
+var customFonts = require('../custom-fonts.js');
 
 const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
         try {
@@ -19,9 +20,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             };
             const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
                 fetcher([
-                    core.PreviewPageDocument,
-                    variables,
-                    'previewPage'
+                    core.PreviewThemePageDocument,
+                    variables
                 ]),
                 fetcher([
                     core.StorePropertyDocument
@@ -33,19 +33,21 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             if (theme.status === 'rejected') {
                 throw new Error(theme.reason?.[0]);
             }
-            const dataBuilder = theme.value.previewPage;
+            const dataBuilder = theme.value.previewThemePage;
             if (!dataBuilder) {
                 throw new Error(`No data builder found for slug: /preview/${slug}`);
             }
+            const themePageCustomFonts = dataBuilder.customFonts;
             const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
-            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback, customFonts$1] = await Promise.all([
                 googleFonts.getFontStyleFromPageTemplate(pageTemplate),
-                googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
-                getFallback.getFallbackV2(fetcher, pageTemplate)
+                googleFonts.getFontFromGlobalStyle(dataBuilder?.themeStyle?.data),
+                getFallback.getFallbackV2(fetcher, pageTemplate),
+                customFonts.getCustomFonts(themePageCustomFonts)
             ]);
             const mobileOnly = dataBuilder.isMobile ?? false;
-            const description = dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-description')?.value;
-            const thumbnail = parseJson.parseJson(dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-thumbnail')?.value);
+            const description = dataBuilder?.dataSEO?.find((item)=>item?.key === 'global-meta-description')?.value;
+            const thumbnail = parseJson.parseJson(dataBuilder?.dataSEO?.find((item)=>item?.key === 'global-meta-thumbnail')?.value);
             const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
             const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
             const favicon = shopData?.storeProperty?.favicon ?? '/favicon/favicon-32x32.png';
@@ -119,7 +121,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             const countryIsoCode = shopMeta?.localization.country.isoCode ?? null;
             const locale = !languageIsoCode || !countryIsoCode ? null : `${languageIsoCode}-${countryIsoCode}`;
             return parseJson.serializableJson({
-                themeStyle: genCss.genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
+                themeStyle: genCss.genCSS(dataBuilder?.themeStyle?.data, mobileOnly),
                 fontStyle,
                 elementFontStyle,
                 builderData: pageTemplate,
@@ -135,11 +137,13 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 swatches: parseJson.parseJson(shopData?.storeProperty?.swatchesConfig),
                 seo,
                 mobileOnly,
-                gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
-                facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
-                tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
-                customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
-                customCodeBody: dataBuilder.themePageCustomCode?.body ?? null
+                gaTrackingId: dataBuilder.analytic?.gaTrackingID ?? null,
+                facebookPixelId: dataBuilder.analytic?.fbPixelID ?? null,
+                tiktokPixelId: dataBuilder.analytic?.tiktokPixelID ?? null,
+                customCodeHeader: dataBuilder.customCode?.header ?? null,
+                customCodeBody: dataBuilder.customCode?.body ?? null,
+                customFonts: customFonts$1,
+                pageBackground: normalize.extractPageBackground(dataBuilder)
             });
         } catch (err) {
             nextjs.captureException(err);

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

@@ -152,7 +152,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
                 pageHandle: dataBuilder.handle ?? null,
                 customFonts: customFonts$1,
-                interaction: dataBuilder?.interaction
+                interaction: dataBuilder?.interaction,
+                pageBackground: normalize.extractPageBackground(dataBuilder)
             });
         } catch (err) {
             nextjs.captureException(err);

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

@@ -83,6 +83,14 @@ 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 ?? []
@@ -94,6 +102,7 @@ const parseShopLibraryPageTemplate = (data)=>{
     ], data?.sectionPosition);
 };
 
+exports.extractPageBackground = extractPageBackground;
 exports.normalizeBuilderData = normalizeBuilderData;
 exports.normalizePageSectionResponseV2 = normalizePageSectionResponseV2;
 exports.parseBuilderLibraryTemplate = parseBuilderLibraryTemplate;

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var core = require('@gem-sdk/core');

package/dist/cjs/pages/404.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/pages/500.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/pages/CollectionGlobalProvider.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/pages/builder.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/pages/collection-detail.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/pages/preview.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/pages/product-detail.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -8,12 +9,12 @@ var Header = require('../components/builder/Header.js');
 var FooterForPostPurchase = require('../components/FooterForPostPurchase.js');
 var Script = require('next/script');
 
-const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview, interaction })=>{
+const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview, interaction, pageBackground })=>{
     const baseAssetURL = process.env.NEXT_GP_BASE_ASSET_URL || 'https://d3kbi0je7pp4lw.cloudfront.net';
     useTrackingView.useTrackingView(shopToken, pageHandle);
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            parseHtml.parseHtml(customCodeHeader, true),
+            parseHtml.parseHtml(customCodeHeader),
             themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
                 "data-id": "global-style",
                 type: "text/css",
@@ -42,6 +43,13 @@ const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontSt
                     __html: customFonts
                 }
             }, fontStyle),
+            pageBackground?.isUsePageBackground && pageBackground?.background && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                children: `
+          body {
+            background: ${pageBackground.background};
+          }
+        `
+            }, `page_background_${pageBackground?.background}`),
             /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
                 productOffers: productOffers,
                 publicStoreFrontData: publicStoreFrontData,
@@ -72,6 +80,7 @@ const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontSt
                                             }),
                                             /*#__PURE__*/ jsxRuntime.jsx(Script, {
                                                 defer: true,
+                                                strategy: "lazyOnload",
                                                 src: `${baseAssetURL}/assets-v2/gp-flow-action-lip.js`
                                             })
                                         ]

package/dist/cjs/pages/static.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/esm/components/ErrorBoundary.js

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

package/dist/esm/components/ErrorFallback.js

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

package/dist/esm/components/FacebookPixel.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { fpixel } from '@gem-sdk/core';
 import { usePathname, useSearchParams } from 'next/navigation';

package/dist/esm/components/FooterForPostPurchase.js

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

package/dist/esm/components/GoogleAnalytic.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { gtag } from '@gem-sdk/core';
 import { useSearchParams, usePathname } from 'next/navigation';

package/dist/esm/components/TikTokPixel.js

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

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

@@ -1,3 +1,4 @@
+'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,3 +1,4 @@
+'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,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useShopStore, usePageStore, cls, makeStyleResponsive } from '@gem-sdk/core';
 import Devices from './SwitchView.js';

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { usePageStore, useInteraction } from '@gem-sdk/core';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
@@ -33,8 +34,13 @@ const InteractionSelectOnPageHeader = ()=>{
     }, [
         handleClickOutside
     ]);
+    useEffect(()=>{
+        setHoverOption(null);
+    }, [
+        selectType
+    ]);
     const isShowOverlay = useMemo(()=>{
-        return hoverOption !== 'ELEMENT' && (selectType === 'PAGE' || selectType === 'ELEMENT' && hoverOption === 'PAGE') && settingType === 'TRIGGER';
+        return hoverOption !== 'ELEMENT' && (selectType === 'PAGE' || selectType === 'ELEMENT' && hoverOption === 'PAGE');
     }, [
         hoverOption,
         selectType
@@ -83,7 +89,7 @@ const InteractionSelectOnPageHeader = ()=>{
                                             className: "gp-grow",
                                             children: title
                                         }),
-                                        settingType === 'TRIGGER' && /*#__PURE__*/ jsx("div", {
+                                        /*#__PURE__*/ jsx("div", {
                                             className: "gp-w-[21px]",
                                             children: /*#__PURE__*/ jsx("svg", {
                                                 width: "16",
@@ -101,7 +107,7 @@ const InteractionSelectOnPageHeader = ()=>{
                                         })
                                     ]
                                 }),
-                                openDropdown && settingType === 'TRIGGER' && /*#__PURE__*/ jsxs("div", {
+                                openDropdown && /*#__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: [

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

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

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

@@ -1,3 +1,4 @@
+'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/layouts/main.js

@@ -1,3 +1,4 @@
+'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-builder-props.js

@@ -1,18 +1,22 @@
-import { StorePropertyDocument } from '@gem-sdk/core';
+import { StorePropertyDocument, ShopShopifyDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { serializableJson, parseJson } from '../helpers/parse-json.js';
 
 const getBuilderProps = async (fetcher, shopifyFetcher)=>{
-    const [storeProperty, shopifyMeta] = await Promise.allSettled([
+    const [storeProperty, shopifyMeta, shopifyInfo] = await Promise.allSettled([
         fetcher([
             StorePropertyDocument
         ]),
         shopifyFetcher([
             ShopMetaDocument
+        ]),
+        fetcher([
+            ShopShopifyDocument
         ])
     ]);
     const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
     const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
+    const shopInfo = shopifyInfo.status === 'fulfilled' ? shopifyInfo.value : undefined;
     const seo = shopMeta ? {
         titleTemplate: `%s | ${shopMeta.shop.name}`,
         defaultTitle: shopMeta?.shop.name,
@@ -32,7 +36,8 @@ const getBuilderProps = async (fetcher, shopifyFetcher)=>{
         swr: {
             revalidateOnMount: true
         },
-        seo
+        seo,
+        timezone: shopInfo?.shopShopify?.timezone
     });
 };
 

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

@@ -1,12 +1,13 @@
-import { PreviewPageDocument, StorePropertyDocument } from '@gem-sdk/core';
+import { PreviewThemePageDocument, StorePropertyDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { captureException } from '@sentry/nextjs';
 import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
-import { parseBuilderTemplateV2 } from '../helpers/normalize.js';
+import { parseBuilderTemplateV2, extractPageBackground } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
+import { getCustomFonts } from '../custom-fonts.js';
 
 const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
         try {
@@ -17,9 +18,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             };
             const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
                 fetcher([
-                    PreviewPageDocument,
-                    variables,
-                    'previewPage'
+                    PreviewThemePageDocument,
+                    variables
                 ]),
                 fetcher([
                     StorePropertyDocument
@@ -31,19 +31,21 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             if (theme.status === 'rejected') {
                 throw new Error(theme.reason?.[0]);
             }
-            const dataBuilder = theme.value.previewPage;
+            const dataBuilder = theme.value.previewThemePage;
             if (!dataBuilder) {
                 throw new Error(`No data builder found for slug: /preview/${slug}`);
             }
+            const themePageCustomFonts = dataBuilder.customFonts;
             const pageTemplate = parseBuilderTemplateV2(dataBuilder);
-            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback, customFonts] = await Promise.all([
                 getFontStyleFromPageTemplate(pageTemplate),
-                getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
-                getFallbackV2(fetcher, pageTemplate)
+                getFontFromGlobalStyle(dataBuilder?.themeStyle?.data),
+                getFallbackV2(fetcher, pageTemplate),
+                getCustomFonts(themePageCustomFonts)
             ]);
             const mobileOnly = dataBuilder.isMobile ?? false;
-            const description = dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-description')?.value;
-            const thumbnail = parseJson(dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-thumbnail')?.value);
+            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;
             const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
             const favicon = shopData?.storeProperty?.favicon ?? '/favicon/favicon-32x32.png';
@@ -117,7 +119,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             const countryIsoCode = shopMeta?.localization.country.isoCode ?? null;
             const locale = !languageIsoCode || !countryIsoCode ? null : `${languageIsoCode}-${countryIsoCode}`;
             return serializableJson({
-                themeStyle: genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
+                themeStyle: genCSS(dataBuilder?.themeStyle?.data, mobileOnly),
                 fontStyle,
                 elementFontStyle,
                 builderData: pageTemplate,
@@ -133,11 +135,13 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 swatches: parseJson(shopData?.storeProperty?.swatchesConfig),
                 seo,
                 mobileOnly,
-                gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
-                facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
-                tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
-                customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
-                customCodeBody: dataBuilder.themePageCustomCode?.body ?? null
+                gaTrackingId: dataBuilder.analytic?.gaTrackingID ?? null,
+                facebookPixelId: dataBuilder.analytic?.fbPixelID ?? null,
+                tiktokPixelId: dataBuilder.analytic?.tiktokPixelID ?? null,
+                customCodeHeader: dataBuilder.customCode?.header ?? null,
+                customCodeBody: dataBuilder.customCode?.body ?? null,
+                customFonts,
+                pageBackground: extractPageBackground(dataBuilder)
             });
         } catch (err) {
             captureException(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 } from '../helpers/normalize.js';
+import { parseBuilderTemplateV2, extractPageBackground } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
 import { captureException } from '@sentry/nextjs';
 import { getCustomFonts } from '../custom-fonts.js';
@@ -150,7 +150,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
                 pageHandle: dataBuilder.handle ?? null,
                 customFonts,
-                interaction: dataBuilder?.interaction
+                interaction: dataBuilder?.interaction,
+                pageBackground: extractPageBackground(dataBuilder)
             });
         } catch (err) {
             captureException(err);

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

@@ -81,6 +81,14 @@ 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 ?? []
@@ -92,4 +100,4 @@ const parseShopLibraryPageTemplate = (data)=>{
     ], data?.sectionPosition);
 };
 
-export { normalizeBuilderData, normalizePageSectionResponseV2, parseBuilderLibraryTemplate, parseBuilderTemplate, parseBuilderTemplateV2, parseShopLibraryPageTemplate };
+export { extractPageBackground, normalizeBuilderData, normalizePageSectionResponseV2, parseBuilderLibraryTemplate, parseBuilderTemplate, parseBuilderTemplateV2, parseShopLibraryPageTemplate };

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

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

package/dist/esm/pages/404.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { NextSeo } from 'next-seo';
 import Image from 'next/image';

package/dist/esm/pages/500.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cls } from '@gem-sdk/core';
 import { NextSeo } from 'next-seo';

package/dist/esm/pages/CollectionGlobalProvider.js

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

package/dist/esm/pages/builder.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider } from '@gem-sdk/core';
 import { useState, useMemo, useEffect } from 'react';

package/dist/esm/pages/collection-detail.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
 import dynamic from 'next/dynamic';

package/dist/esm/pages/preview.js

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

package/dist/esm/pages/product-detail.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render, AddOn } from '@gem-sdk/core';
 import dynamic from 'next/dynamic';

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
 import { useTrackingView } from '../libs/hooks/use-tracking-view.js';
@@ -6,12 +7,12 @@ import Header from '../components/builder/Header.js';
 import FooterForPostPurchase from '../components/FooterForPostPurchase.js';
 import Script from 'next/script';
 
-const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview, interaction })=>{
+const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview, interaction, pageBackground })=>{
     const baseAssetURL = process.env.NEXT_GP_BASE_ASSET_URL || 'https://d3kbi0je7pp4lw.cloudfront.net';
     useTrackingView(shopToken, pageHandle);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            parseHtml(customCodeHeader, true),
+            parseHtml(customCodeHeader),
             themeStyle && /*#__PURE__*/ jsx("style", {
                 "data-id": "global-style",
                 type: "text/css",
@@ -40,6 +41,13 @@ const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontSt
                     __html: customFonts
                 }
             }, fontStyle),
+            pageBackground?.isUsePageBackground && pageBackground?.background && /*#__PURE__*/ jsx("style", {
+                children: `
+          body {
+            background: ${pageBackground.background};
+          }
+        `
+            }, `page_background_${pageBackground?.background}`),
             /*#__PURE__*/ jsx(PageProvider, {
                 productOffers: productOffers,
                 publicStoreFrontData: publicStoreFrontData,
@@ -70,6 +78,7 @@ const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontSt
                                             }),
                                             /*#__PURE__*/ jsx(Script, {
                                                 defer: true,
+                                                strategy: "lazyOnload",
                                                 src: `${baseAssetURL}/assets-v2/gp-flow-action-lip.js`
                                             })
                                         ]

package/dist/esm/pages/static.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
 import { Suspense } from 'react';

package/dist/types/index.d.ts

@@ -40,7 +40,12 @@ type PageBuilderProps = {
     customCodeBody?: string | null;
     isStorefront?: boolean;
     customFonts?: string | null;
-    interaction?: ShopType.Maybe<Pick<ShopType.PublishedPageInteraction, "id" | "value">>;
+    interaction?: ShopType.Maybe<Pick<ShopType.PublishedPageInteraction, 'id' | 'value'>>;
+    pageBackground?: {
+        isUsePageBackground?: boolean;
+        background?: string;
+    };
+    timezone?: string;
 };
 type PageBuilderPropsV2 = {
     builderData?: {
@@ -257,4 +262,4 @@ type BuilderPageProps = {
 };
 declare const BuilderPage: React.FC<BuilderPageProps>;
 
-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, retryWithDelay, usePagePreview, useTrackingView };
+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 };

package/package.json

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