@gem-sdk/pages 2.0.0-dev.168 → 2.0.0-dev.184

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

@@ -3,53 +3,94 @@
 
 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, pageBackground })=>{
+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"
+                    })
+                ]
+            })
+        });
+    }
+    const hasInteraction = (interaction?.value || []).length > 0;
     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),
-            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,
@@ -61,7 +102,7 @@ const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontSt
                             isPostPurchase && /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
                                 pageType: "POST_PURCHASE"
                             }),
-                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            hasInteraction && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 dangerouslySetInnerHTML: {
                                     __html: `<div id="gp-interaction" style="display: none;">${JSON.stringify(interaction?.value || [])}</div>`
                                 }
@@ -78,9 +119,8 @@ const StaticPageV2 = ({ components, builderData, sectionData, themeStyle, fontSt
                                             /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
                                                 uid: builder.uid
                                             }),
-                                            /*#__PURE__*/ jsxRuntime.jsx(Script, {
+                                            hasInteraction && /*#__PURE__*/ jsxRuntime.jsx(Script, {
                                                 defer: true,
-                                                strategy: "lazyOnload",
                                                 src: `${baseAssetURL}/assets-v2/gp-flow-action-lip.js`
                                             })
                                         ]

package/dist/cjs/pages/static.js

@@ -5,42 +5,53 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
-var react = require('react');
+var nextSeo = require('next-seo');
+var Head = require('next/head');
+var router = require('next/router');
 
-const StaticPage = ({ components, builderData, sectionData, themeStyle, fontStyle })=>{
-    const fallbackContent = /*#__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(react.Suspense, {
-        fallback: fallbackContent,
+const StaticPage = ({ components, builderData, sectionData, seo, themeStyle, fontStyle })=>{
+    const router$1 = router.useRouter();
+    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: [
-            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/esm/components/builder/Header.js

@@ -118,7 +118,7 @@ const Header = (props)=>{
                                 })
                             ]
                         }),
-                        !isOriginTemplate && /*#__PURE__*/ jsx("button", {
+                        !(isOriginTemplate || pageType === 'STATIC') && /*#__PURE__*/ 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__*/ jsxs("div", {

package/dist/esm/constants/index.js

@@ -0,0 +1,12 @@
+var PublishedThemePageMetafields;
+(function(PublishedThemePageMetafields) {
+    PublishedThemePageMetafields["CUSTOM_CODE_HEADER"] = 'custom_code_header';
+    PublishedThemePageMetafields["CUSTOM_CODE_BODY"] = 'custom_code_body';
+    PublishedThemePageMetafields["ANALYTICS_GA_TRACKING_ID"] = 'analytics_ga_tracking_id';
+    PublishedThemePageMetafields["ANALYTICS_FB_PIXEL_ID"] = 'analytics_fb_pixel_id';
+    PublishedThemePageMetafields["ANALYTICS_TIKTOK_PIXEL_ID"] = 'analytics_tiktok_pixel_id';
+    PublishedThemePageMetafields["GLOBAL_META_DESCRIPTION"] = 'global-meta-description';
+    PublishedThemePageMetafields["GLOBAL_META_THUMBNAIL"] = 'global-meta-thumbnail';
+})(PublishedThemePageMetafields || (PublishedThemePageMetafields = {}));
+
+export { PublishedThemePageMetafields };

package/dist/esm/layouts/main.js

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

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

@@ -1,4 +1,4 @@
-import { PublishedThemePagesDocument, StorePropertyDocument } from '@gem-sdk/core';
+import { PublishedThemePagesDocument, StorePropertyDocument, PublishedShopMetasDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
@@ -7,13 +7,15 @@ import { getFallbackV2 } from '../helpers/get-fallback.js';
 import { parseBuilderTemplateV2 } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
 import { captureException } from '@sentry/nextjs';
+import { PublishedThemePageMetafields } from '../../constants/index.js';
+import { getPublishedThemePageMetafieldByKey } from '../helpers/get-metafield.js';
 
 const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
         try {
             const variables = {
                 slugType: 'STATIC'
             };
-            const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+            const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
                 fetcher([
                     PublishedThemePagesDocument,
                     variables
@@ -23,11 +25,21 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 ]),
                 shopifyFetcher([
                     ShopMetaDocument
+                ]),
+                fetcher([
+                    PublishedShopMetasDocument,
+                    {
+                        keys: [
+                            PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                            PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL
+                        ]
+                    }
                 ])
             ]);
             if (theme.status === 'rejected') {
                 throw new Error(theme.reason?.[0]);
             }
+            const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
             const dataBuilder = theme.value?.publishedThemePages?.[0];
             if (!dataBuilder) {
                 throw new Error(`No data builder found for Home page`);
@@ -39,8 +51,8 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 getFallbackV2(fetcher, homeTemplate)
             ]);
             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 = getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+            const thumbnail = parseJson(getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.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';
@@ -127,11 +139,11 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 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: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.ANALYTICS_GA_TRACKING_ID, dataBuilder?.metafields) ?? null,
+                facebookPixelId: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.ANALYTICS_FB_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                tiktokPixelId: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.ANALYTICS_TIKTOK_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                customCodeHeader: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.CUSTOM_CODE_HEADER, dataBuilder?.metafields) ?? null,
+                customCodeBody: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.CUSTOM_CODE_BODY, dataBuilder?.metafields) ?? null,
                 pageHandle: dataBuilder.handle ?? null
             });
         } catch (err) {

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

@@ -1,10 +1,12 @@
-import { PublishedThemePagesDocument, StorePropertyDocument, prefetchQueries } from '@gem-sdk/core';
+import { PublishedThemePagesDocument, StorePropertyDocument, PublishedShopMetasDocument, prefetchQueries } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { parseBuilderTemplate } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
+import { PublishedThemePageMetafields } from '../../constants/index.js';
+import { getPublishedThemePageMetafieldByKey } from '../helpers/get-metafield.js';
 
 const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
         const pageType = 'STATIC';
@@ -15,7 +17,7 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
         //   PublishedThemePagesDocument,
         //   variables,
         // ]);
-        const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+        const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
             fetcher([
                 PublishedThemePagesDocument,
                 variables
@@ -25,6 +27,15 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
             ]),
             shopifyFetcher([
                 ShopMetaDocument
+            ]),
+            fetcher([
+                PublishedShopMetasDocument,
+                {
+                    keys: [
+                        PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                        PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL
+                    ]
+                }
             ])
         ]);
         if (theme.status === 'rejected') {
@@ -32,6 +43,7 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
                 pageType
             };
         }
+        const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
         const dataBuilder = theme.value.publishedThemePages?.[0];
         const homeTemplate = parseBuilderTemplate(dataBuilder);
         const fontStyle = await getFontFromGlobalStyle(dataBuilder?.pageStyle?.data);
@@ -56,8 +68,8 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
             }
             return acc;
         }, {});
-        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 = getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+        const thumbnail = parseJson(getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.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';

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

@@ -43,7 +43,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 getFallbackV2(fetcher, pageTemplate),
                 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(dataBuilder?.dataSEO?.find((item)=>item?.key === 'global-meta-thumbnail')?.value);
             const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
@@ -117,15 +117,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 serializableJson({
                 themeStyle: genCSS(dataBuilder?.themeStyle?.data, mobileOnly),
                 fontStyle,
                 elementFontStyle,
                 builderData: pageTemplate,
                 pageType,
-                moneyFormat: shopMeta?.shop.moneyFormat ?? null,
-                currency: shopMeta?.localization.country.currency.isoCode ?? null,
+                moneyFormat: shopMeta?.shop?.moneyFormat ?? null,
+                currency: shopMeta?.localization?.country?.currency?.isoCode ?? null,
                 languageIsoCode,
                 countryIsoCode,
                 locale,
@@ -141,7 +141,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeHeader: dataBuilder.customCode?.header ?? null,
                 customCodeBody: dataBuilder.customCode?.body ?? null,
                 customFonts,
-                pageBackground: extractPageBackground(dataBuilder)
+                pageBackground: extractPageBackground(dataBuilder),
+                interaction: dataBuilder?.interaction
             });
         } catch (err) {
             captureException(err);

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

@@ -8,6 +8,8 @@ import { parseBuilderTemplateV2, extractPageBackground } from '../helpers/normal
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
 import { captureException } from '@sentry/nextjs';
 import { getCustomFonts } from '../custom-fonts.js';
+import { getPublishedThemePageMetafieldByKey } from '../helpers/get-metafield.js';
+import { PublishedThemePageMetafields } from '../../constants/index.js';
 
 const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
         try {
@@ -31,7 +33,9 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                     PublishedShopMetasDocument,
                     {
                         keys: [
-                            'source_font'
+                            'source_font',
+                            PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                            PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL
                         ]
                     }
                 ])
@@ -54,8 +58,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 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 = getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+            const thumbnail = parseJson(getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.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';
@@ -143,11 +147,11 @@ const getStaticPagePropsV2 = (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: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.ANALYTICS_GA_TRACKING_ID, dataBuilder?.metafields) ?? null,
+                facebookPixelId: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.ANALYTICS_FB_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                tiktokPixelId: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.ANALYTICS_TIKTOK_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                customCodeHeader: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.CUSTOM_CODE_HEADER, dataBuilder?.metafields) ?? null,
+                customCodeBody: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.CUSTOM_CODE_BODY, dataBuilder?.metafields) ?? null,
                 pageHandle: dataBuilder.handle ?? null,
                 customFonts,
                 interaction: dataBuilder?.interaction,

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

@@ -1,10 +1,12 @@
-import { PublishedThemePagesDocument, StorePropertyDocument, prefetchQueries } from '@gem-sdk/core';
+import { PublishedThemePagesDocument, StorePropertyDocument, PublishedShopMetasDocument, prefetchQueries } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { parseBuilderTemplate } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
+import { PublishedThemePageMetafields } from '../../constants/index.js';
+import { getPublishedThemePageMetafieldByKey } from '../helpers/get-metafield.js';
 
 const getStaticPageProps = (fetcher, shopifyFetcher)=>async (slug)=>{
         const pageType = 'STATIC';
@@ -12,7 +14,7 @@ const getStaticPageProps = (fetcher, shopifyFetcher)=>async (slug)=>{
             slug,
             slugType: pageType
         };
-        const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+        const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
             fetcher([
                 PublishedThemePagesDocument,
                 variables
@@ -22,6 +24,16 @@ const getStaticPageProps = (fetcher, shopifyFetcher)=>async (slug)=>{
             ]),
             shopifyFetcher([
                 ShopMetaDocument
+            ]),
+            fetcher([
+                PublishedShopMetasDocument,
+                {
+                    keys: [
+                        'source_font',
+                        PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                        PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL
+                    ]
+                }
             ])
         ]);
         if (theme.status === 'rejected') {
@@ -29,6 +41,7 @@ const getStaticPageProps = (fetcher, shopifyFetcher)=>async (slug)=>{
                 pageType
             };
         }
+        const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
         const dataBuilder = theme.value.publishedThemePages?.[0];
         const pageTemplate = parseBuilderTemplate(dataBuilder);
         const fontStyle = await getFontFromGlobalStyle(dataBuilder?.pageStyle?.data);
@@ -53,8 +66,8 @@ const getStaticPageProps = (fetcher, shopifyFetcher)=>async (slug)=>{
             }
             return acc;
         }, {});
-        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 = getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+        const thumbnail = parseJson(getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.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';

package/dist/esm/libs/helpers/get-metafield.js

@@ -0,0 +1,5 @@
+const getPublishedThemePageMetafieldByKey = (key, metafields)=>{
+    return metafields?.find((item)=>item?.key === key)?.value;
+};
+
+export { getPublishedThemePageMetafieldByKey };

package/dist/esm/libs/parse-html.js

@@ -1,34 +1,26 @@
 import { jsx } from 'react/jsx-runtime';
 import parse, { Element, Text } from 'html-react-parser';
-import Script from '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 Element) {
-                    const child = node.children?.[0];
-                    if (child instanceof Text) {
-                        if (isHead) return /*#__PURE__*/ jsx("script", {
-                            ...node.attribs,
-                            dangerouslySetInnerHTML: {
-                                __html: child.data
-                            }
-                        });
-                        else return /*#__PURE__*/ jsx(Script, {
-                            ...node.attribs,
-                            dangerouslySetInnerHTML: {
-                                __html: child.data
-                            }
-                        });
-                    } else {
-                        if (!isHead) {
-                            return /*#__PURE__*/ jsx(Script, {
-                                ...node.attribs
-                            });
+                if (node.type !== 'script' || !(node instanceof Element)) return null;
+                const child = node.children?.[0];
+                if (!child) return null;
+                if (!(child instanceof Text) && !isHead) return /*#__PURE__*/ jsx("script", {
+                    id: key,
+                    ...node.attribs
+                }, key);
+                if (child instanceof Text && isHead) {
+                    return /*#__PURE__*/ jsx("script", {
+                        id: key,
+                        ...node.attribs,
+                        dangerouslySetInnerHTML: {
+                            __html: child.data
                         }
-                    }
+                    }, key);
                 }
             }
         });