@gem-sdk/pages 1.63.19 → 2.0.0-dev.161

package/dist/esm/libs/helpers/normalize.js

@@ -81,6 +81,14 @@ const parseBuilderTemplate = (data)=>{
         ...data?.themePageCustomSections ?? []
     ], data?.sectionPosition);
 };
+const extractPageBackground = (data)=>{
+    try {
+        const pageBackgroundStr = data?.metafields?.find((item)=>item?.key === 'page_background')?.value;
+        return JSON.parse(pageBackgroundStr ?? '{}');
+    } catch  {
+        return {};
+    }
+};
 const parseBuilderLibraryTemplate = (data)=>{
     return normalizePageSectionResponseV2([
         ...data?.sections ?? []
@@ -92,4 +100,4 @@ const parseShopLibraryPageTemplate = (data)=>{
     ], data?.sectionPosition);
 };
 
-export { normalizeBuilderData, normalizePageSectionResponseV2, parseBuilderLibraryTemplate, parseBuilderTemplate, parseBuilderTemplateV2, parseShopLibraryPageTemplate };
+export { extractPageBackground, normalizeBuilderData, normalizePageSectionResponseV2, parseBuilderLibraryTemplate, parseBuilderTemplate, parseBuilderTemplateV2, parseShopLibraryPageTemplate };

package/dist/esm/libs/hooks/use-tracking-view.js

@@ -1,3 +1,4 @@
+'use client';
 import { PageViewUpDocument } from '@gem-sdk/core';
 import { useCallback, useEffect } from 'react';
 

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

@@ -1,26 +1,34 @@
 import { jsx } from 'react/jsx-runtime';
 import parse, { Element, Text } from 'html-react-parser';
+import Script from 'next/script';
 
-const parseHtml = (key, html, isHead)=>{
+const parseHtml = (html, isHead)=>{
     if (!html) return undefined;
     try {
         return parse(html, {
             replace: (node)=>{
-                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
+                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
+                            });
                         }
-                    }, key);
+                    }
                 }
             }
         });

package/dist/esm/pages/404.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { NextSeo } from 'next-seo';
 import Image from 'next/image';

package/dist/esm/pages/500.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cls } from '@gem-sdk/core';
 import { NextSeo } from 'next-seo';

package/dist/esm/pages/CollectionGlobalProvider.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useEffect } from 'react';
 import { useCollectionsQuery } from '@gem-sdk/core';

package/dist/esm/pages/builder.js

@@ -1,7 +1,6 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider } from '@gem-sdk/core';
-import { NextSeo } from 'next-seo';
-import Head from 'next/head';
 import { useState, useMemo, useEffect } from 'react';
 import Toolbox from '../components/builder/Toolbox.js';
 import Header from '../components/builder/Header.js';
@@ -13,7 +12,7 @@ import Toolbar from '../components/builder/Toolbar.js';
 import Devices from '../components/builder/SwitchView.js';
 import Body from '../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] = useState(false);
     const isDisableHeaderFooter = ()=>{
         return isThemeSectionEditor;
@@ -36,26 +35,19 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(NextSeo, {
-                ...seo
+            themeStyle && /*#__PURE__*/ jsx("style", {
+                type: "text/css",
+                id: "global-style",
+                dangerouslySetInnerHTML: {
+                    __html: themeStyle
+                }
             }),
-            /*#__PURE__*/ jsxs(Head, {
-                children: [
-                    themeStyle && /*#__PURE__*/ jsx("style", {
-                        type: "text/css",
-                        id: "global-style",
-                        dangerouslySetInnerHTML: {
-                            __html: themeStyle
-                        }
-                    }),
-                    fontStyle && /*#__PURE__*/ jsx("style", {
-                        "data-id": "google-fonts",
-                        type: "text/css",
-                        dangerouslySetInnerHTML: {
-                            __html: fontStyle
-                        }
-                    })
-                ]
+            fontStyle && /*#__PURE__*/ jsx("style", {
+                "data-id": "google-fonts",
+                type: "text/css",
+                dangerouslySetInnerHTML: {
+                    __html: fontStyle
+                }
             }),
             /*#__PURE__*/ jsx(PageProvider, {
                 children: /*#__PURE__*/ jsx(BuilderComponentProvider, {

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

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

package/dist/esm/pages/preview.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import dynamic from 'next/dynamic';
 

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

@@ -1,40 +1,29 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render, AddOn } from '@gem-sdk/core';
-import { NextSeo } from 'next-seo';
 import dynamic from 'next/dynamic';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
+import { Suspense } from 'react';
 
 const ProductProvider = dynamic(()=>import('@gem-sdk/core').then((m)=>m.ProductProvider));
-const ProductDetailPage = ({ themeStyle, fontStyle, seo, product, components, builderData, sectionData })=>{
-    const router = useRouter();
-    if (router.isFallback) {
-        return /*#__PURE__*/ jsx("div", {
+const ProductDetailPage = ({ themeStyle, fontStyle, product, components, builderData, sectionData })=>{
+    return /*#__PURE__*/ jsxs(Suspense, {
+        fallback: /*#__PURE__*/ jsx("div", {
             children: "Loading..."
-        });
-    }
-    return /*#__PURE__*/ jsxs(Fragment, {
+        }),
         children: [
-            /*#__PURE__*/ jsx(NextSeo, {
-                ...seo
+            themeStyle && /*#__PURE__*/ jsx("style", {
+                "data-id": "global-style",
+                type: "text/css",
+                dangerouslySetInnerHTML: {
+                    __html: themeStyle
+                }
             }),
-            /*#__PURE__*/ jsxs(Head, {
-                children: [
-                    themeStyle && /*#__PURE__*/ jsx("style", {
-                        "data-id": "global-style",
-                        type: "text/css",
-                        dangerouslySetInnerHTML: {
-                            __html: themeStyle
-                        }
-                    }),
-                    fontStyle && /*#__PURE__*/ jsx("style", {
-                        "data-id": "google-fonts",
-                        type: "text/css",
-                        dangerouslySetInnerHTML: {
-                            __html: fontStyle
-                        }
-                    })
-                ]
+            fontStyle && /*#__PURE__*/ jsx("style", {
+                "data-id": "google-fonts",
+                type: "text/css",
+                dangerouslySetInnerHTML: {
+                    __html: fontStyle
+                }
             }),
             /*#__PURE__*/ jsx(PageProvider, {
                 children: /*#__PURE__*/ jsx(BuilderComponentProvider, {

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

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

package/dist/esm/pages/static.js

@@ -1,52 +1,42 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
-import { NextSeo } from 'next-seo';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
+import { Suspense } from 'react';
 
-const StaticPage = ({ components, builderData, sectionData, seo, themeStyle, fontStyle })=>{
-    const router = useRouter();
-    if (router.isFallback) {
-        return /*#__PURE__*/ jsx("div", {
-            className: "gp-flex gp-h-[100vh] gp-items-center gp-justify-center",
-            children: /*#__PURE__*/ jsxs("div", {
-                className: "gp-flex gp-gap-2",
-                children: [
-                    /*#__PURE__*/ jsx("span", {
-                        className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"
-                    }),
-                    /*#__PURE__*/ 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__*/ 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__*/ jsxs(Fragment, {
+const StaticPage = ({ components, builderData, sectionData, themeStyle, fontStyle })=>{
+    const fallbackContent = /*#__PURE__*/ jsx("div", {
+        className: "gp-flex gp-h-[100vh] gp-items-center gp-justify-center",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "gp-flex gp-gap-2",
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"
+                }),
+                /*#__PURE__*/ 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__*/ 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__*/ jsxs(Suspense, {
+        fallback: fallbackContent,
         children: [
-            /*#__PURE__*/ jsx(NextSeo, {
-                ...seo
+            themeStyle && /*#__PURE__*/ jsx("style", {
+                "data-id": "global-style",
+                type: "text/css",
+                dangerouslySetInnerHTML: {
+                    __html: themeStyle
+                }
             }),
-            /*#__PURE__*/ jsxs(Head, {
-                children: [
-                    themeStyle && /*#__PURE__*/ jsx("style", {
-                        "data-id": "global-style",
-                        type: "text/css",
-                        dangerouslySetInnerHTML: {
-                            __html: themeStyle
-                        }
-                    }),
-                    fontStyle && /*#__PURE__*/ jsx("style", {
-                        "data-id": "google-fonts",
-                        type: "text/css",
-                        dangerouslySetInnerHTML: {
-                            __html: fontStyle
-                        }
-                    })
-                ]
+            fontStyle && /*#__PURE__*/ jsx("style", {
+                "data-id": "google-fonts",
+                type: "text/css",
+                dangerouslySetInnerHTML: {
+                    __html: fontStyle
+                }
             }),
             /*#__PURE__*/ jsx(PageProvider, {
                 children: /*#__PURE__*/ jsx(BuilderComponentProvider, {