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

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

@@ -122,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", {

package/dist/cjs/constants/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+exports.PublishedThemePageMetafields = void 0;
+(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';
+})(exports.PublishedThemePageMetafields || (exports.PublishedThemePageMetafields = {}));

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-home-page-props-v2.js

@@ -9,13 +9,15 @@ var getFallback = require('../helpers/get-fallback.js');
 var normalize = require('../helpers/normalize.js');
 var parseJson = require('../helpers/parse-json.js');
 var nextjs = require('@sentry/nextjs');
+var index = require('../../constants/index.js');
+var getMetafield = require('../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([
                     core.PublishedThemePagesDocument,
                     variables
@@ -25,11 +27,21 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 ]),
                 shopifyFetcher([
                     adapterShopify.ShopMetaDocument
+                ]),
+                fetcher([
+                    core.PublishedShopMetasDocument,
+                    {
+                        keys: [
+                            index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                            index.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`);
@@ -41,8 +53,8 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 getFallback.getFallbackV2(fetcher, homeTemplate)
             ]);
             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 = getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+            const thumbnail = parseJson.parseJson(getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === index.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';
@@ -129,11 +141,11 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 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: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.ANALYTICS_GA_TRACKING_ID, dataBuilder?.metafields) ?? null,
+                facebookPixelId: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.ANALYTICS_FB_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                tiktokPixelId: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.ANALYTICS_TIKTOK_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                customCodeHeader: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.CUSTOM_CODE_HEADER, dataBuilder?.metafields) ?? null,
+                customCodeBody: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.CUSTOM_CODE_BODY, dataBuilder?.metafields) ?? null,
                 pageHandle: dataBuilder.handle ?? null
             });
         } catch (err) {

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

@@ -7,6 +7,8 @@ var genCss = require('../helpers/gen-css.js');
 var generateManifres = require('../helpers/generate-manifres.js');
 var normalize = require('../helpers/normalize.js');
 var parseJson = require('../helpers/parse-json.js');
+var index = require('../../constants/index.js');
+var getMetafield = require('../helpers/get-metafield.js');
 
 const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
         const pageType = 'STATIC';
@@ -17,7 +19,7 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
         //   PublishedThemePagesDocument,
         //   variables,
         // ]);
-        const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+        const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
             fetcher([
                 core.PublishedThemePagesDocument,
                 variables
@@ -27,6 +29,15 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
             ]),
             shopifyFetcher([
                 adapterShopify.ShopMetaDocument
+            ]),
+            fetcher([
+                core.PublishedShopMetasDocument,
+                {
+                    keys: [
+                        index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                        index.PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL
+                    ]
+                }
             ])
         ]);
         if (theme.status === 'rejected') {
@@ -34,6 +45,7 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
                 pageType
             };
         }
+        const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
         const dataBuilder = theme.value.publishedThemePages?.[0];
         const homeTemplate = normalize.parseBuilderTemplate(dataBuilder);
         const fontStyle = await googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data);
@@ -58,8 +70,8 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
             }
             return acc;
         }, {});
-        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 = getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+        const thumbnail = parseJson.parseJson(getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === index.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/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,
@@ -143,7 +143,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeHeader: dataBuilder.customCode?.header ?? null,
                 customCodeBody: dataBuilder.customCode?.body ?? null,
                 customFonts: customFonts$1,
-                pageBackground: normalize.extractPageBackground(dataBuilder)
+                pageBackground: normalize.extractPageBackground(dataBuilder),
+                interaction: dataBuilder?.interaction
             });
         } catch (err) {
             nextjs.captureException(err);

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

@@ -10,6 +10,8 @@ var normalize = require('../helpers/normalize.js');
 var parseJson = require('../helpers/parse-json.js');
 var nextjs = require('@sentry/nextjs');
 var customFonts = require('../custom-fonts.js');
+var getMetafield = require('../helpers/get-metafield.js');
+var index = require('../../constants/index.js');
 
 const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
         try {
@@ -33,7 +35,9 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                     core.PublishedShopMetasDocument,
                     {
                         keys: [
-                            'source_font'
+                            'source_font',
+                            index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                            index.PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL
                         ]
                     }
                 ])
@@ -56,8 +60,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 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 = getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+            const thumbnail = parseJson.parseJson(getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === index.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';
@@ -145,11 +149,11 @@ const getStaticPagePropsV2 = (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: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.ANALYTICS_GA_TRACKING_ID, dataBuilder?.metafields) ?? null,
+                facebookPixelId: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.ANALYTICS_FB_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                tiktokPixelId: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.ANALYTICS_TIKTOK_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                customCodeHeader: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.CUSTOM_CODE_HEADER, dataBuilder?.metafields) ?? null,
+                customCodeBody: getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.CUSTOM_CODE_BODY, dataBuilder?.metafields) ?? null,
                 pageHandle: dataBuilder.handle ?? null,
                 customFonts: customFonts$1,
                 interaction: dataBuilder?.interaction,

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

@@ -7,6 +7,8 @@ var genCss = require('../helpers/gen-css.js');
 var generateManifres = require('../helpers/generate-manifres.js');
 var normalize = require('../helpers/normalize.js');
 var parseJson = require('../helpers/parse-json.js');
+var index = require('../../constants/index.js');
+var getMetafield = require('../helpers/get-metafield.js');
 
 const getStaticPageProps = (fetcher, shopifyFetcher)=>async (slug)=>{
         const pageType = 'STATIC';
@@ -14,7 +16,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([
                 core.PublishedThemePagesDocument,
                 variables
@@ -24,6 +26,16 @@ const getStaticPageProps = (fetcher, shopifyFetcher)=>async (slug)=>{
             ]),
             shopifyFetcher([
                 adapterShopify.ShopMetaDocument
+            ]),
+            fetcher([
+                core.PublishedShopMetasDocument,
+                {
+                    keys: [
+                        'source_font',
+                        index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                        index.PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL
+                    ]
+                }
             ])
         ]);
         if (theme.status === 'rejected') {
@@ -31,6 +43,7 @@ const getStaticPageProps = (fetcher, shopifyFetcher)=>async (slug)=>{
                 pageType
             };
         }
+        const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
         const dataBuilder = theme.value.publishedThemePages?.[0];
         const pageTemplate = normalize.parseBuilderTemplate(dataBuilder);
         const fontStyle = await googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data);
@@ -55,8 +68,8 @@ const getStaticPageProps = (fetcher, shopifyFetcher)=>async (slug)=>{
             }
             return acc;
         }, {});
-        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 = getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === index.PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+        const thumbnail = parseJson.parseJson(getMetafield.getPublishedThemePageMetafieldByKey(index.PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === index.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/cjs/libs/helpers/get-metafield.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const getPublishedThemePageMetafieldByKey = (key, metafields)=>{
+    return metafields?.find((item)=>item?.key === key)?.value;
+};
+
+exports.getPublishedThemePageMetafieldByKey = getPublishedThemePageMetafieldByKey;

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/builder.js

@@ -3,6 +3,8 @@
 
 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 +16,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 +39,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

@@ -5,43 +5,53 @@ 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/product-detail.js

@@ -5,29 +5,41 @@ 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, {