@gem-sdk/pages 1.58.0-dev.13 → 1.58.0-dev.142

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 });
@@ -5,7 +6,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var SwitchView = require('./SwitchView.js');
-var InteractionSelectOnPageHeader = require('./InteractionSelectOnPageHeader.js');
 
 const defaultMargin = {
     desktop: '16px',
@@ -22,7 +22,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate, openPageSetting } = props;
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
-    const sidebarMode = core.usePageStore((s)=>s.sidebarMode);
+    core.usePageStore((s)=>s.sidebarMode);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -180,8 +180,7 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            }),
-            sidebarMode === 'interaction' && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
+            })
         ]
     });
 };

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,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);
-    const sidebarMode = usePageStore((s)=>s.sidebarMode);
+    usePageStore((s)=>s.sidebarMode);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -176,8 +176,7 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            }),
-            sidebarMode === 'interaction' && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
+            })
         ]
     });
 };

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);