@gem-sdk/pages 1.58.0-dev.60 → 1.58.0-staging.100

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

@@ -6,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',
@@ -23,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, {
@@ -123,7 +122,7 @@ const Header = (props)=>{
                                 })
                             ]
                         }),
-                        !isOriginTemplate && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        !(isOriginTemplate || pageType === 'STATIC') && /*#__PURE__*/ jsxRuntime.jsx("button", {
                             className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
                             onClick: openPageSetting,
                             children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -181,8 +180,7 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            }),
-            sidebarMode === 'interaction' && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
+            })
         ]
     });
 };

package/dist/cjs/layouts/main.js

@@ -11,7 +11,7 @@ const MainLayout = ({ children, ...props })=>{
     const mobileOnly = core.useShopStore((s)=>s.mobileOnly);
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            parseHtml.parseHtml(props?.customCodeBody),
+            parseHtml.parseHtml('custom-code-body', props?.customCodeBody),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 className: core.cls({
                     'gp-max-w-mobile gp-mx-auto gp-w-full': mobileOnly

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-post-purchase-props-preview.js

@@ -8,6 +8,7 @@ var normalize = require('../helpers/normalize.js');
 var usePagePreview = require('../hooks/usePagePreview.js');
 var parseJson = require('../helpers/parse-json.js');
 var genCss = require('../helpers/gen-css.js');
+var adapterShopify = require('@gem-sdk/adapter-shopify');
 
 const fetchSalePageDataByID = async (data, fetcher)=>{
     const variables = {
@@ -218,8 +219,14 @@ const getRelevantPageData = async (data)=>{
         themePageId: id
     }, fetcher);
 };
-const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFetcher)=>async (data)=>{
+const getPostPurchasePropsPreview = (fetcher, shopifyFetcher, options)=>async (data)=>{
+        const { librarySaleFunnelID, storeFrontFetcher } = options;
         try {
+            const [shopifyMeta] = await Promise.allSettled([
+                shopifyFetcher([
+                    adapterShopify.ShopMetaDocument
+                ])
+            ]);
             const { id, currentOfferID, isLibraryTemplate, isShopLibraryPage } = data;
             const { dataBuilder, storeProperty, productOffers, pageStyle } = await getRelevantPageData({
                 id,
@@ -239,7 +246,7 @@ const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFet
                 googleFonts.getFontFromGlobalStyle(pageStyle),
                 getFallback.getFallbackV2(gemPagesStoreFrontFetcher, pageTemplate, false)
             ]);
-            const { seo, pageConfig } = usePagePreview.usePagePreview(dataBuilder, storeProperty);
+            const { seo, pageConfig } = usePagePreview.usePagePreview(dataBuilder, storeProperty, shopifyMeta);
             return parseJson.serializableJson({
                 themeStyle: genCss.genCSS(pageStyle),
                 seo,

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

@@ -45,7 +45,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 getFallback.getFallbackV2(fetcher, pageTemplate),
                 customFonts.getCustomFonts(themePageCustomFonts)
             ]);
-            const mobileOnly = dataBuilder.isMobile ?? false;
+            const mobileOnly = !!dataBuilder.isMobile;
             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;
@@ -119,15 +119,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 ? null : `${languageIsoCode}-${countryIsoCode}`;
+            const locale = languageIsoCode && countryIsoCode ? `${languageIsoCode}-${countryIsoCode}` : null;
             return parseJson.serializableJson({
                 themeStyle: genCss.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,
@@ -142,7 +142,9 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 tiktokPixelId: dataBuilder.analytic?.tiktokPixelID ?? null,
                 customCodeHeader: dataBuilder.customCode?.header ?? null,
                 customCodeBody: dataBuilder.customCode?.body ?? null,
-                customFonts: customFonts$1
+                customFonts: customFonts$1,
+                pageBackground: normalize.extractPageBackground(dataBuilder),
+                interaction: dataBuilder?.interaction
             });
         } 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/parse-html.js

@@ -2,35 +2,27 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var parse = require('html-react-parser');
-var Script = require('next/script');
 
-const parseHtml = (html, isHead)=>{
+const parseHtml = (key, html, isHead)=>{
     if (!html) return undefined;
     try {
         return parse(html, {
             replace: (node)=>{
-                if (node.type === 'script' && node instanceof parse.Element) {
-                    const child = node.children?.[0];
-                    if (child instanceof parse.Text) {
-                        if (isHead) return /*#__PURE__*/ jsxRuntime.jsx("script", {
-                            ...node.attribs,
-                            dangerouslySetInnerHTML: {
-                                __html: child.data
-                            }
-                        });
-                        else return /*#__PURE__*/ jsxRuntime.jsx(Script, {
-                            ...node.attribs,
-                            dangerouslySetInnerHTML: {
-                                __html: child.data
-                            }
-                        });
-                    } else {
-                        if (!isHead) {
-                            return /*#__PURE__*/ jsxRuntime.jsx(Script, {
-                                ...node.attribs
-                            });
+                if (node.type !== 'script' || !(node instanceof parse.Element)) return null;
+                const child = node.children?.[0];
+                if (!child) return null;
+                if (!(child instanceof parse.Text) && !isHead) return /*#__PURE__*/ jsxRuntime.jsx("script", {
+                    id: key,
+                    ...node.attribs
+                }, key);
+                if (child instanceof parse.Text && isHead) {
+                    return /*#__PURE__*/ jsxRuntime.jsx("script", {
+                        id: key,
+                        ...node.attribs,
+                        dangerouslySetInnerHTML: {
+                            __html: child.data
                         }
-                    }
+                    }, key);
                 }
             }
         });

package/dist/cjs/pages/404.js

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

package/dist/cjs/pages/500.js

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

package/dist/cjs/pages/CollectionGlobalProvider.js

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

package/dist/cjs/pages/builder.js

@@ -1,8 +1,9 @@
-'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
+var nextSeo = require('next-seo');
+var Head = require('next/head');
 var react = require('react');
 var Toolbox = require('../components/builder/Toolbox.js');
 var Header = require('../components/builder/Header.js');
@@ -14,7 +15,7 @@ var Toolbar = require('../components/builder/Toolbar.js');
 var SwitchView = require('../components/builder/SwitchView.js');
 var Body = require('../components/builder/Body.js');
 
-const BuilderPage = ({ components, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
+const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
     const [loadSuccess, setLoadSuccess] = react.useState(false);
     const isDisableHeaderFooter = ()=>{
         return isThemeSectionEditor;
@@ -37,19 +38,26 @@ const BuilderPage = ({ components, themeStyle, fontStyle, sectionData, pageType,
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                type: "text/css",
-                id: "global-style",
-                dangerouslySetInnerHTML: {
-                    __html: themeStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
+                ...seo
             }),
-            fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "google-fonts",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: fontStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsxs(Head, {
+                children: [
+                    themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        type: "text/css",
+                        id: "global-style",
+                        dangerouslySetInnerHTML: {
+                            __html: themeStyle
+                        }
+                    }),
+                    fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "google-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: fontStyle
+                        }
+                    })
+                ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
                 children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {

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

@@ -1,47 +1,56 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
+var nextSeo = require('next-seo');
 var dynamic = require('next/dynamic');
-var react = require('react');
+var Head = require('next/head');
+var router = require('next/router');
 
 const CollectionProvider = dynamic(()=>import('@gem-sdk/core').then((m)=>m.CollectionProvider));
-const CollectionDetailPage = ({ components, builderData, sectionData, themeStyle, collection, fontStyle })=>{
+const CollectionDetailPage = ({ seo, components, builderData, sectionData, themeStyle, collection, fontStyle })=>{
+    const router$1 = router.useRouter();
+    if (router$1.isFallback) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            children: "Loading..."
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "global-style",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: themeStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
+                ...seo
             }),
-            fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "google-fonts",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: fontStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsxs(Head, {
+                children: [
+                    themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "global-style",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: themeStyle
+                        }
+                    }),
+                    fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "google-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: fontStyle
+                        }
+                    })
+                ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(react.Suspense, {
-                fallback: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    children: "Loading..."
-                }),
-                children: /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
-                        components: components,
-                        children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
-                            data: sectionData,
-                            children: /*#__PURE__*/ jsxRuntime.jsx(CollectionProvider, {
-                                collection: collection,
-                                children: builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
-                                    state: builderData,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
-                                        uid: "ROOT"
-                                    })
+            /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
+                    components: components,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
+                        data: sectionData,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(CollectionProvider, {
+                            collection: collection,
+                            children: builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
+                                state: builderData,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
+                                    uid: "ROOT"
                                 })
                             })
                         })

package/dist/cjs/pages/preview.js

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

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

@@ -1,33 +1,44 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
+var nextSeo = require('next-seo');
 var dynamic = require('next/dynamic');
-var react = require('react');
+var Head = require('next/head');
+var router = require('next/router');
 
 const ProductProvider = dynamic(()=>import('@gem-sdk/core').then((m)=>m.ProductProvider));
-const ProductDetailPage = ({ themeStyle, fontStyle, product, components, builderData, sectionData })=>{
-    return /*#__PURE__*/ jsxRuntime.jsxs(react.Suspense, {
-        fallback: /*#__PURE__*/ jsxRuntime.jsx("div", {
+const ProductDetailPage = ({ themeStyle, fontStyle, seo, product, components, builderData, sectionData })=>{
+    const router$1 = router.useRouter();
+    if (router$1.isFallback) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
             children: "Loading..."
-        }),
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "global-style",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: themeStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
+                ...seo
             }),
-            fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "google-fonts",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: fontStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsxs(Head, {
+                children: [
+                    themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "global-style",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: themeStyle
+                        }
+                    }),
+                    fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "google-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: fontStyle
+                        }
+                    })
+                ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
                 children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {

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

@@ -1,48 +1,94 @@
-'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
+var nextSeo = require('next-seo');
+var Head = require('next/head');
+var router = require('next/router');
 var useTrackingView = require('../libs/hooks/use-tracking-view.js');
 var parseHtml = require('../libs/parse-html.js');
 var Header = require('../components/builder/Header.js');
 var FooterForPostPurchase = require('../components/FooterForPostPurchase.js');
 var Script = require('next/script');
+var react = require('react');
 
-const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview, interaction })=>{
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview, interaction, pageBackground })=>{
+    const router$1 = router.useRouter();
     const baseAssetURL = process.env.NEXT_GP_BASE_ASSET_URL || 'https://d3kbi0je7pp4lw.cloudfront.net';
-    useTrackingView.useTrackingView(shopToken, pageHandle);
+    useTrackingView.useTrackingView(shopToken, pageHandle, router$1.isFallback);
+    const customCodeHeaderID = 'custom-code-header';
+    react.useEffect(()=>{
+        const customCodeHeaderElement = document.querySelectorAll(`#${customCodeHeaderID}`);
+        if (customCodeHeaderElement.length > 1) {
+            customCodeHeaderElement.forEach((script, index)=>{
+                if (index !== 0) script.remove();
+            });
+        }
+    }, []);
+    if (router$1.isFallback) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-flex gp-h-[100vh] gp-items-center gp-justify-center",
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "gp-flex gp-gap-2",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-slate-800"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-slate-800"
+                    })
+                ]
+            })
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            parseHtml.parseHtml(customCodeHeader),
-            themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "global-style",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: themeStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
+                ...seo
             }),
-            fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "google-fonts",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: fontStyle
-                }
+            /*#__PURE__*/ jsxRuntime.jsxs(Head, {
+                children: [
+                    parseHtml.parseHtml(customCodeHeaderID, customCodeHeader, true),
+                    themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "global-style",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: themeStyle
+                        }
+                    }, "global-style"),
+                    fontStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "google-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: fontStyle
+                        }
+                    }, "google-fonts"),
+                    elementFontStyle && elementFontStyle.map((fontStyle)=>/*#__PURE__*/ jsxRuntime.jsx("style", {
+                            "data-id": "google-element-fonts",
+                            type: "text/css",
+                            dangerouslySetInnerHTML: {
+                                __html: fontStyle
+                            }
+                        }, fontStyle)),
+                    customFonts && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        "data-id": "custom-element-fonts",
+                        type: "text/css",
+                        dangerouslySetInnerHTML: {
+                            __html: customFonts
+                        }
+                    }, fontStyle),
+                    pageBackground?.isUsePageBackground && pageBackground?.background && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                        children: `
+            body {
+              background: ${pageBackground.background};
+            }
+          `
+                    }, `page_background_${pageBackground?.background}`)
+                ]
             }),
-            elementFontStyle && elementFontStyle.map((fontStyle)=>/*#__PURE__*/ jsxRuntime.jsx("style", {
-                    "data-id": "google-element-fonts",
-                    type: "text/css",
-                    dangerouslySetInnerHTML: {
-                        __html: fontStyle
-                    }
-                }, fontStyle)),
-            customFonts && /*#__PURE__*/ jsxRuntime.jsx("style", {
-                "data-id": "custom-element-fonts",
-                type: "text/css",
-                dangerouslySetInnerHTML: {
-                    __html: customFonts
-                }
-            }, fontStyle),
             /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
                 productOffers: productOffers,
                 publicStoreFrontData: publicStoreFrontData,
@@ -73,7 +119,6 @@ const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontSt
                                             }),
                                             /*#__PURE__*/ jsxRuntime.jsx(Script, {
                                                 defer: true,
-                                                strategy: "lazyOnload",
                                                 src: `${baseAssetURL}/assets-v2/gp-flow-action-lip.js`
                                             })
                                         ]