@gem-sdk/pages 1.57.12 → 1.57.15-staging.12

package/dist/cjs/components/FacebookPixel.js

@@ -2,24 +2,21 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
-var router = require('next/router');
+var navigation = require('next/navigation');
 var Script = require('next/script');
 var react = require('react');
 
 const FacebookPixel = ({ pixelId })=>{
-    const router$1 = router.useRouter();
+    const pathName = navigation.usePathname();
+    const searchParams = navigation.useSearchParams();
     react.useEffect(()=>{
         const handleRouteChange = ()=>{
             core.fpixel.pageview();
         };
-        router$1.events.on('routeChangeComplete', handleRouteChange);
-        router$1.events.on('hashChangeComplete', handleRouteChange);
-        return ()=>{
-            router$1.events.off('routeChangeComplete', handleRouteChange);
-            router$1.events.off('hashChangeComplete', handleRouteChange);
-        };
+        handleRouteChange();
     }, [
-        router$1.events
+        pathName,
+        searchParams
     ]);
     if (!pixelId) return null;
     return /*#__PURE__*/ jsxRuntime.jsx(Script, {

package/dist/cjs/components/GoogleAnalytic.js

@@ -2,28 +2,26 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
-var router = require('next/router');
+var navigation = require('next/navigation');
 var Script = require('next/script');
 var react = require('react');
 
 const GoogleAnalytic = ({ trackingId })=>{
-    const router$1 = router.useRouter();
+    const searchParams = navigation.useSearchParams();
+    const pathName = navigation.usePathname();
     react.useEffect(()=>{
+        const url = pathName + searchParams.toString();
         const handleRouteChange = (url)=>{
             core.gtag.pageview(url, trackingId);
         };
-        router$1.events.on('routeChangeComplete', handleRouteChange);
-        router$1.events.on('hashChangeComplete', handleRouteChange);
-        return ()=>{
-            router$1.events.off('routeChangeComplete', handleRouteChange);
-            router$1.events.off('hashChangeComplete', handleRouteChange);
-        };
+        handleRouteChange(url);
     }, [
         trackingId,
-        router$1.events
+        pathName,
+        searchParams
     ]);
     const handleOnReady = ()=>{
-        core.gtag.pageview(router$1.pathname, trackingId);
+        core.gtag.pageview(pathName, trackingId);
     };
     if (!trackingId) return null;
     if (trackingId.startsWith('UA-')) return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {

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

@@ -10,6 +10,8 @@ var googleFonts = require('../../libs/google-fonts.js');
 var genCss = require('../../libs/helpers/gen-css.js');
 var genFonts = require('../../libs/helpers/gen-fonts.js');
 var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
+var libsStore = require('../../store/libs-store.js');
+var checkOptionFont = require('../../libs/helpers/check-option-font.js');
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -35,6 +37,8 @@ const Toolbox = ()=>{
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
+    const changeFontType = libsStore.libsStore((s)=>s.changeFontType);
+    const fontType = libsStore.libsStore((s)=>s.fontType);
     const clearModal = core.useModalStore((s)=>s.clearModal);
     const changeLimitCreateThemeSection = core.useShopStore((s)=>s.changeLimitCreateThemeSection);
     const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
@@ -70,6 +74,12 @@ const Toolbox = ()=>{
         });
         // append new fonts
         for (const font of fonts){
+            if ([
+                'bunny',
+                'google'
+            ].includes(font.type) && checkOptionFont.checkNotInOptionFont(font.family, fontType)) {
+                continue;
+            }
             if (font.type !== 'custom') {
                 if (font.variants?.length) {
                     for (const variant of font.variants){
@@ -81,7 +91,7 @@ const Toolbox = ()=>{
                         const variantName = variant;
                         const url = googleFonts.createFontUrl([
                             cloneFont
-                        ]);
+                        ], undefined, fontType);
                         if (url) {
                             const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
                             if (googleFont) {
@@ -284,6 +294,13 @@ const Toolbox = ()=>{
     }, [
         changeShopPlan
     ]);
+    const onUpdateFontType = react.useCallback((e)=>{
+        const fontType = e.detail;
+        if (!fontType) return;
+        changeFontType(fontType);
+    }, [
+        changeFontType
+    ]);
     const onUpdateDynamicProduct = react.useCallback((e)=>{
         const product = e.detail;
         if (!product) return;
@@ -405,6 +422,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-interaction-item', onUpdateInteractionItem);
         window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
         window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
+        window.addEventListener('update-font-type', onUpdateFontType);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -428,6 +446,7 @@ const Toolbox = ()=>{
             window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
             window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
             window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+            window.removeEventListener('update-font-type', onUpdateFontType);
         };
     }, [
         onAddEntity,
@@ -453,6 +472,7 @@ const Toolbox = ()=>{
         onUpdateInteractionItem,
         onUpdateInteractionIsSelectOnPage,
         onUpdateInteractionSettingType,
+        onUpdateFontType,
         onChangeSidebarMode
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {

package/dist/cjs/index.js

@@ -18,12 +18,6 @@ var userAgent = require('./libs/helpers/user-agent.js');
 var normalize = require('./libs/helpers/normalize.js');
 var getFallback = require('./libs/helpers/get-fallback.js');
 var common = require('./libs/helpers/common.js');
-var collectionDetail = require('./pages/collection-detail.js');
-var preview = require('./pages/preview.js');
-var productDetail = require('./pages/product-detail.js');
-var _static = require('./pages/static.js');
-var builder = require('./pages/builder.js');
-var staticV2 = require('./pages/static-v2.js');
 var getStaticPaths = require('./libs/getStaticPaths.js');
 var genFonts = require('./libs/helpers/gen-fonts.js');
 var googleFonts = require('./libs/google-fonts.js');
@@ -35,6 +29,12 @@ var _500 = require('./pages/500.js');
 var GoogleAnalytic = require('./components/GoogleAnalytic.js');
 var FacebookPixel = require('./components/FacebookPixel.js');
 var TikTokPixel = require('./components/TikTokPixel.js');
+var collectionDetail = require('./pages/collection-detail.js');
+var preview = require('./pages/preview.js');
+var productDetail = require('./pages/product-detail.js');
+var _static = require('./pages/static.js');
+var builder = require('./pages/builder.js');
+var staticV2 = require('./pages/static-v2.js');
 
 
 
@@ -59,12 +59,6 @@ exports.normalizePageSectionResponseV2 = normalize.normalizePageSectionResponseV
 exports.parseBuilderTemplateV2 = normalize.parseBuilderTemplateV2;
 exports.getFallbackV2 = getFallback.getFallbackV2;
 exports.retryWithDelay = common.retryWithDelay;
-exports.CollectionDetailPage = collectionDetail.default;
-exports.PreviewPage = preview.PreviewPage;
-exports.ProductDetailPage = productDetail.default;
-exports.StaticPage = _static.default;
-exports.BuilderPage = builder.BuilderPage;
-exports.StaticPageV2 = staticV2.StaticPageV2;
 exports.getStaticPaths = getStaticPaths.getStaticPaths;
 exports.getFontFromGroupSetting = genFonts.getFontFromGroupSetting;
 exports.getFontsFromDataBuilder = genFonts.getFontsFromDataBuilder;
@@ -78,3 +72,9 @@ exports.Page500 = _500.Page500;
 exports.GoogleAnalytic = GoogleAnalytic.GoogleAnalytic;
 exports.FacebookPixel = FacebookPixel.FacebookPixel;
 exports.TikTokPixel = TikTokPixel.TikTokPixel;
+exports.CollectionDetailPage = collectionDetail.default;
+exports.PreviewPage = preview.PreviewPage;
+exports.ProductDetailPage = productDetail.default;
+exports.StaticPage = _static.default;
+exports.BuilderPage = builder.BuilderPage;
+exports.StaticPageV2 = staticV2.StaticPageV2;

package/dist/cjs/libs/api/get-post-purchase-props-preview.js

@@ -253,6 +253,7 @@ const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFet
                 productOffers
             });
         } catch (err) {
+            console.log('error', err);
             nextjs.captureException(err);
             throw err;
         }

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

@@ -18,7 +18,7 @@ const getStaticPagePropsV2 = (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
@@ -28,11 +28,21 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 ]),
                 shopifyFetcher([
                     adapterShopify.ShopMetaDocument
+                ]),
+                fetcher([
+                    core.PublishedShopMetasDocument,
+                    {
+                        keys: [
+                            'source_font'
+                        ]
+                    }
                 ])
             ]);
             if (theme.status === 'rejected') {
                 throw new Error(theme.reason?.[0]);
             }
+            const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
+            const sourceFont = publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === 'source_font');
             const dataBuilder = theme.value.publishedThemePages?.[0];
             const themePageCustomFonts = theme.value?.publishedThemePages?.[0]?.themePageCustomFonts;
             if (!dataBuilder) {
@@ -40,8 +50,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
             }
             const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
             const [elementFontStyle, fontStyle, fallback, customFonts$1] = await Promise.all([
-                googleFonts.getFontStyleFromPageTemplate(pageTemplate),
-                googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
+                googleFonts.getFontStyleFromPageTemplate(pageTemplate, sourceFont?.value),
+                googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data, sourceFont?.value),
                 getFallback.getFallbackV2(fetcher, pageTemplate),
                 customFonts.getCustomFonts(themePageCustomFonts)
             ]);

package/dist/cjs/libs/google-fonts.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var checkOptionFont = require('./helpers/check-option-font.js');
 var genFonts = require('./helpers/gen-fonts.js');
 
 const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
@@ -35,12 +36,17 @@ const composeFonts = (fonts)=>{
         };
     });
 };
-const createFontUrl = (fonts, option)=>{
-    const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
-    if (!googleFonts.length) return;
+const createFontUrl = (fonts, option, fontType)=>{
+    const mainFonts = fonts.filter((font)=>{
+        return !([
+            'bunny',
+            'google'
+        ].includes(font.type) && checkOptionFont.checkNotInOptionFont(font.family, fontType || 'google')) && (font.type === 'google' || font.type === 'bunny' || !font.type);
+    });
+    if (!mainFonts.length) return;
     const params = new URLSearchParams();
     const display = option?.display || 'swap';
-    const uniqFonts = googleFonts.filter((font, index, arr)=>{
+    const uniqFonts = mainFonts.filter((font, index, arr)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
     });
     const family = composeFonts(uniqFonts).map((font)=>{
@@ -54,13 +60,16 @@ const createFontUrl = (fonts, option)=>{
     if (option?.effect) {
         params.append('effect', option.effect);
     }
-    return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
+    const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
 };
-async function getFonts(fonts, option, isImportFontByUrl = true) {
+// eslint-disable-next-line max-params
+async function getFonts(fonts, option, isImportFontByUrl = true, fontType) {
     /**
    * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
    * CSS cascading 🤷‍♂️.
-   */ const url = createFontUrl(fonts, option);
+   */ const url = createFontUrl(fonts, option, fontType);
     if (!url) return '';
     try {
         if (isImportFontByUrl) return `@import url('${url}');`;
@@ -82,7 +91,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
         return '';
     }
 }
-const getFontFromGlobalStyle = (data)=>{
+const getFontFromGlobalStyle = (data, sourceFont)=>{
     if (!data) return '';
     try {
         const globalStyle = JSON.parse(data);
@@ -90,14 +99,14 @@ const getFontFromGlobalStyle = (data)=>{
         const fonts = Object.entries(fontData).map(([, value])=>{
             return value;
         });
-        return getFonts(fonts);
+        return getFonts(fonts, undefined, undefined, sourceFont);
     } catch  {
         return '';
     }
 };
-async function getFontStyleFromPageTemplate(pageTemplate) {
+async function getFontStyleFromPageTemplate(pageTemplate, sourceFont) {
     const fontStyle = pageTemplate.map((sectionData)=>{
-        return getFonts(genFonts.getFontsFromDataBuilder(sectionData.data));
+        return getFonts(genFonts.getFontsFromDataBuilder(sectionData.data), undefined, undefined, sourceFont);
     });
     return await Promise.all(fontStyle);
 }

package/dist/cjs/libs/helpers/check-option-font.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const listFontsNotInBunny = [
+    'Anton SC',
+    'Arsenal SC',
+    'Baskervville SC',
+    'Beiruti',
+    'Bodoni Moda SC',
+    'Bona Nova SC',
+    'Bungee Tint',
+    'Edu AU VIC WA NT Hand',
+    'Fustat',
+    'Ga Maamli',
+    'Kalnia Glaze',
+    'Maname',
+    'Matemasie',
+    'Material Icons',
+    'Material Icons Outlined',
+    'Material Icons Round',
+    'Material Icons Sharp',
+    'Material Icons Two Tone',
+    'Material Symbols Outlined',
+    'Material Symbols Rounded',
+    'Material Symbols Sharp',
+    'Moderustic',
+    'New Amsterdam',
+    'Playwrite AR',
+    'Playwrite AT',
+    'Playwrite BE VLG',
+    'Playwrite BE WAL',
+    'Playwrite CL',
+    'Playwrite CU',
+    'Playwrite CZ',
+    'Playwrite DK Loopet',
+    'Playwrite DK Uloopet',
+    'Playwrite HR',
+    'Playwrite HR Lijeva',
+    'Playwrite HU',
+    'Playwrite PE',
+    'SUSE',
+    'Sankofa Display',
+    'Wittgenstein',
+    'Zain'
+];
+const listFontsNotInGoogle = [
+    'Arima Madurai',
+    'Coda Caption',
+    'Fredoka One',
+    'Gentium Book Basic',
+    'Kantumruy',
+    'Merienda One',
+    'Source Sans Pro',
+    'Source Serif Pro',
+    'Briem Hand',
+    'Pushster'
+];
+const objectFont = {
+    bunny: listFontsNotInBunny,
+    google: listFontsNotInGoogle
+};
+const checkNotInOptionFont = (currentfont, type)=>{
+    return objectFont?.[type]?.includes(currentfont);
+};
+
+exports.checkNotInOptionFont = checkNotInOptionFont;

package/dist/cjs/pages/builder.js

@@ -2,8 +2,6 @@
 
 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');
@@ -15,7 +13,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, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
+const BuilderPage = ({ components, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
     const [loadSuccess, setLoadSuccess] = react.useState(false);
     const isDisableHeaderFooter = ()=>{
         return isThemeSectionEditor;
@@ -38,26 +36,19 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
-                ...seo
+            themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                type: "text/css",
+                id: "global-style",
+                dangerouslySetInnerHTML: {
+                    __html: themeStyle
+                }
             }),
-            /*#__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
-                        }
-                    })
-                ]
+            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

@@ -4,53 +4,43 @@ 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 Head = require('next/head');
-var router = require('next/router');
+var react = require('react');
 
 const CollectionProvider = dynamic(()=>import('@gem-sdk/core').then((m)=>m.CollectionProvider));
-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..."
-        });
-    }
+const CollectionDetailPage = ({ components, builderData, sectionData, themeStyle, collection, fontStyle })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
-                ...seo
+            themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                "data-id": "global-style",
+                type: "text/css",
+                dangerouslySetInnerHTML: {
+                    __html: themeStyle
+                }
             }),
-            /*#__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
-                        }
-                    })
-                ]
+            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, {
-                    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(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"
+                                    })
                                 })
                             })
                         })

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

@@ -4,41 +4,29 @@ 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 Head = require('next/head');
-var router = require('next/router');
+var react = require('react');
 
 const ProductProvider = dynamic(()=>import('@gem-sdk/core').then((m)=>m.ProductProvider));
-const ProductDetailPage = ({ themeStyle, fontStyle, seo, product, components, builderData, sectionData })=>{
-    const router$1 = router.useRouter();
-    if (router$1.isFallback) {
-        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+const ProductDetailPage = ({ themeStyle, fontStyle, product, components, builderData, sectionData })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(react.Suspense, {
+        fallback: /*#__PURE__*/ jsxRuntime.jsx("div", {
             children: "Loading..."
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        }),
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(nextSeo.NextSeo, {
-                ...seo
+            themeStyle && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                "data-id": "global-style",
+                type: "text/css",
+                dangerouslySetInnerHTML: {
+                    __html: themeStyle
+                }
             }),
-            /*#__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
-                        }
-                    })
-                ]
+            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, {