@gem-sdk/pages 1.0.0

package/README.md

@@ -0,0 +1,7 @@
+# GemX Pages
+
+- Install
+
+```bash
+yarn add @gem-sdk/pages
+```

package/dist/cjs/components/ErrorBoundary.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const initialState = { hasError: false };
+class ErrorBoundary extends react.Component {
+    state = initialState;
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI
+        return { hasError: true, error };
+    }
+    reset = () => {
+        this.setState(initialState);
+    };
+    componentDidCatch(error, errorInfo) {
+        // You can use your own error logging service here
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        const { FallbackComponent } = this.props;
+        // Check if the error is thrown
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return jsxRuntime.jsx(FallbackComponent, { error: this.state.error, resetErrorBoundary: this.reset });
+        }
+        // Return children components in case of no error
+        return this.props.children;
+    }
+}
+
+exports.ErrorBoundary = ErrorBoundary;

package/dist/cjs/components/ErrorFallback.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const ErrorFallback = ({ error, resetErrorBoundary }) => {
+    return (jsxRuntime.jsxs("div", { role: "alert", className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx("p", { className: "text-center text-2xl", children: "Oops! Something went wrong" }), jsxRuntime.jsx("pre", { children: error?.message }), jsxRuntime.jsx("button", { onClick: resetErrorBoundary, className: "inline-flex h-10 items-center justify-center gap-2 rounded bg-[#3C67FF] px-6 text-white active:translate-y-1", children: "Try again" })] }));
+};
+
+exports.ErrorFallback = ErrorFallback;

package/dist/cjs/components/FacebookPixel.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var router = require('next/router');
+var Script = require('next/script');
+var react = require('react');
+
+const FacebookPixel = ({ pixelId }) => {
+    const router$1 = router.useRouter();
+    react.useEffect(() => {
+        // This pageview only triggers the first time (it's important for Pixel to have real information)
+        core.fpixel.pageview();
+        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);
+        };
+    }, [router$1.events]);
+    if (!pixelId)
+        return null;
+    return (jsxRuntime.jsx(Script, { id: "fb-pixel", strategy: "afterInteractive", dangerouslySetInnerHTML: {
+            __html: `
+            !function(f,b,e,v,n,t,s)
+            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+            n.queue=[];t=b.createElement(e);t.async=!0;
+            t.src=v;s=b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t,s)}(window, document,'script',
+            'https://connect.facebook.net/en_US/fbevents.js');
+            fbq('init', ${pixelId});
+          `,
+        } }));
+};
+
+exports.FacebookPixel = FacebookPixel;

package/dist/cjs/components/GoogleAnalytic.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var router = require('next/router');
+var Script = require('next/script');
+var react = require('react');
+
+const GoogleAnalytic = ({ trackingId }) => {
+    const router$1 = router.useRouter();
+    react.useEffect(() => {
+        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);
+        };
+    }, [trackingId, router$1.events]);
+    if (!trackingId)
+        return null;
+    if (trackingId.startsWith('UA-'))
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Script, { src: "https://www.google-analytics.com/analytics.js", async: true, strategy: "afterInteractive" }), jsxRuntime.jsx(Script, { strategy: "afterInteractive", id: "google-analytics", dangerouslySetInnerHTML: {
+                        __html: `window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+          ga('create', '${trackingId}', 'auto');
+          ga('send', 'pageview');
+            `,
+                    } })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Script, { strategy: "afterInteractive", src: `https://www.googletagmanager.com/gtag/js?id=${trackingId}` }), jsxRuntime.jsx(Script, { id: "gtag-init", strategy: "afterInteractive", dangerouslySetInnerHTML: {
+                    __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${trackingId}', {
+              page_path: window.location.pathname,
+            });
+          `,
+                } })] }));
+};
+
+exports.GoogleAnalytic = GoogleAnalytic;

package/dist/cjs/components/TikTokPixel.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Script = require('next/script');
+
+const TikTokPixel = ({ pixelId }) => {
+    if (!pixelId)
+        return null;
+    return (jsxRuntime.jsx(Script, { id: "tiktok-pixel", strategy: "afterInteractive", dangerouslySetInnerHTML: {
+            __html: `
+        !function (w, d, t) {
+          w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
+          ttq.load('${pixelId}');
+          ttq.page();
+        }(window, document, 'ttq');
+          `,
+        } }));
+};
+
+exports.TikTokPixel = TikTokPixel;

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

@@ -0,0 +1,200 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@gem-sdk/core');
+var react = require('react');
+var googleFonts = require('../../libs/google-fonts.js');
+var genCss = require('../../libs/helpers/gen-css.js');
+var getStorefrontApi = require('../../libs/get-storefront-api.js');
+
+const globalStyleId = 'global-style';
+const globalFontId = 'google-font-builder';
+const Toolbox = () => {
+    const matchMutate = core.useMatchMutate();
+    const provider = core.useShopStore((s) => s.provider);
+    const changeStorefrontInfo = core.useShopStore((s) => s.changeStorefrontInfo);
+    const initState = core.useBuilderPreviewStore((s) => s.initState);
+    const initNormalizeState = core.useBuilderPreviewStore((s) => s.forceChangeState);
+    const changeItemPropByKey = core.useBuilderPreviewStore((s) => s.changeItemPropByKey);
+    const addItem = core.useBuilderPreviewStore((s) => s.addItem);
+    const moveItem = core.useBuilderPreviewStore((s) => s.moveItem);
+    const removeItem = core.useBuilderPreviewStore((s) => s.removeItem);
+    const addSection = core.useSectionStore((s) => s.addSection);
+    const changeSwatches = core.useShopStore((s) => s.changeSwatches);
+    // Revalidate all query with key match query/
+    const onRevalidateQuery = react.useCallback(() => {
+        matchMutate(/query\//);
+    }, [matchMutate]);
+    // Update shop info
+    const onChangeShopInfo = react.useCallback((e) => {
+        const detail = e.detail;
+        changeStorefrontInfo({
+            url: detail.shopHandle ? getStorefrontApi.getStorefrontApi(detail.shopHandle, provider) : undefined,
+            token: detail.shopToken,
+        });
+    }, [changeStorefrontInfo, provider]);
+    const onChangeGlobalStyle = react.useCallback((e) => {
+        const detail = e.detail;
+        try {
+            if (detail.data) {
+                const themeStyle = genCss.genCSS(detail.data, detail.mobileOnly);
+                const font = Object.entries(detail.data?.font).map(([, value]) => {
+                    return value;
+                });
+                const fontUrl = googleFonts.createFontUrl(font);
+                const globalStyle = document.getElementById(globalStyleId);
+                const googleFont = document.getElementById(globalFontId);
+                if (googleFont) {
+                    googleFont.getAttribute('href') !== fontUrl && googleFont.setAttribute('href', fontUrl);
+                    //
+                }
+                else {
+                    const link = document.createElement('link');
+                    link.id = globalFontId;
+                    link.href = fontUrl;
+                    link.rel = 'stylesheet';
+                    document.head.appendChild(link);
+                }
+                if (globalStyle) {
+                    globalStyle.innerHTML = themeStyle;
+                }
+                else {
+                    const style = document.createElement('style');
+                    style.id = globalStyleId;
+                    style.innerHTML = themeStyle;
+                    document.head.appendChild(style);
+                }
+            }
+        }
+        catch {
+            //
+        }
+    }, []);
+    // Init builder data
+    const onInitBuilder = react.useCallback((e) => {
+        try {
+            const detail = e.detail;
+            if (detail.data) {
+                if (detail.type === 'flat') {
+                    initNormalizeState(detail.data);
+                }
+                else {
+                    initState(detail.data);
+                }
+            }
+        }
+        catch {
+            //
+        }
+    }, [initNormalizeState, initState]);
+    // Add new entity
+    const onAddEntity = react.useCallback((e) => {
+        try {
+            const detail = e.detail;
+            if (detail.entity) {
+                addItem({
+                    data: detail.entity,
+                    id: detail.id,
+                    position: detail.position,
+                    type: detail.type ?? 'component',
+                });
+                if (detail?.type === 'section' && !Array.isArray(detail.entity)) {
+                    addSection(detail.entity.uid, detail.entity);
+                }
+            }
+        }
+        catch {
+            //
+        }
+    }, [addItem, addSection]);
+    // Update props of entity
+    const onUpdateEntityProp = react.useCallback((e) => {
+        try {
+            const detail = e.detail;
+            if (detail.uid && detail.propName) {
+                changeItemPropByKey({
+                    id: detail.uid,
+                    key: detail.propName,
+                    data: detail.propValue,
+                    group: detail.group,
+                });
+            }
+        }
+        catch {
+            //
+        }
+    }, [changeItemPropByKey]);
+    // Move entity
+    const onMoveEntity = react.useCallback((e) => {
+        try {
+            const detail = e.detail;
+            if (detail.to && detail.uid) {
+                moveItem(detail.uid, detail.to, Number(detail.position) ?? 0);
+            }
+        }
+        catch {
+            //
+        }
+    }, [moveItem]);
+    // Remove entity
+    const onRemoveEntity = react.useCallback((e) => {
+        try {
+            const detail = e.detail;
+            if (detail.uid) {
+                removeItem(detail.uid);
+            }
+        }
+        catch {
+            //
+        }
+    }, [removeItem]);
+    // Change Swatches Data
+    const onChangeSwatchesData = react.useCallback((e) => {
+        const detail = e.detail;
+        try {
+            if (detail.data) {
+                changeSwatches(detail.data);
+            }
+        }
+        catch {
+            //
+        }
+    }, [changeSwatches]);
+    react.useEffect(() => {
+        window.addEventListener('update-shop-info', onChangeShopInfo);
+        window.addEventListener('revalidate-query', onRevalidateQuery);
+        window.addEventListener('init-builder', onInitBuilder);
+        window.addEventListener('add-entity', onAddEntity);
+        window.addEventListener('remove-entity', onRemoveEntity);
+        window.addEventListener('move-entity', onMoveEntity);
+        window.addEventListener('update-entity-prop', onUpdateEntityProp);
+        window.addEventListener('set-global-style', onChangeGlobalStyle);
+        window.addEventListener('update-global-swatches-data', onChangeSwatchesData);
+        return () => {
+            window.removeEventListener('update-shop-info', onChangeShopInfo);
+            window.removeEventListener('revalidate-query', onRevalidateQuery);
+            window.removeEventListener('init-builder', onInitBuilder);
+            window.removeEventListener('add-entity', onAddEntity);
+            window.removeEventListener('remove-entity', onRemoveEntity);
+            window.removeEventListener('move-entity', onMoveEntity);
+            window.removeEventListener('update-entity-prop', onUpdateEntityProp);
+            window.removeEventListener('set-global-style', onChangeGlobalStyle);
+            window.removeEventListener('update-global-swatches-data', onChangeSwatchesData);
+        };
+    }, [
+        onAddEntity,
+        onUpdateEntityProp,
+        onInitBuilder,
+        onMoveEntity,
+        onRemoveEntity,
+        onChangeGlobalStyle,
+        onChangeSwatchesData,
+        onRevalidateQuery,
+        onChangeShopInfo,
+    ]);
+    return null;
+};
+var Toolbox$1 = react.memo(Toolbox);
+
+exports.default = Toolbox$1;

package/dist/cjs/index.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var getCollectionProps = require('./libs/api/get-collection-props.js');
+var getHomePageProps = require('./libs/api/get-home-page-props.js');
+var getHomePagePropsV2 = require('./libs/api/get-home-page-props-v2.js');
+var getPreviewProps = require('./libs/api/get-preview-props.js');
+var getBuilderProps = require('./libs/api/get-builder-props.js');
+var getProductProps = require('./libs/api/get-product-props.js');
+var getStaticPageProps = require('./libs/api/get-static-page-props.js');
+var getStaticPagePropsV2 = require('./libs/api/get-static-page-props-v2.js');
+var getStaticPagePropsPreview = require('./libs/api/get-static-page-props-preview.js');
+var fetcher = require('./libs/fetcher.js');
+var getLayout = require('./libs/get-layout.js');
+var genCss = require('./libs/helpers/gen-css.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 googleFonts = require('./libs/google-fonts.js');
+var getStorefrontApi = require('./libs/get-storefront-api.js');
+var ErrorBoundary = require('./components/ErrorBoundary.js');
+var ErrorFallback = require('./components/ErrorFallback.js');
+var _404 = require('./pages/404.js');
+var _500 = require('./pages/500.js');
+var GoogleAnalytic = require('./components/GoogleAnalytic.js');
+var FacebookPixel = require('./components/FacebookPixel.js');
+var TikTokPixel = require('./components/TikTokPixel.js');
+
+
+
+exports.getCollectionProps = getCollectionProps.getCollectionProps;
+exports.getHomePageProps = getHomePageProps.getHomePageProps;
+exports.getHomePagePropsV2 = getHomePagePropsV2.getHomePagePropsV2;
+exports.getPreviewProps = getPreviewProps.getPreviewProps;
+exports.getBuilderProps = getBuilderProps.getBuilderProps;
+exports.getProductProps = getProductProps.getProductProps;
+exports.getStaticPageProps = getStaticPageProps.getStaticPageProps;
+exports.getStaticPagePropsV2 = getStaticPagePropsV2.getStaticPagePropsV2;
+exports.getStaticPagePropsPreview = getStaticPagePropsPreview.getStaticPagePropsPreview;
+exports.createFetcher = fetcher.createFetcher;
+exports.createShopifyFetcher = fetcher.createShopifyFetcher;
+exports.getLayout = getLayout.getLayout;
+exports.genCSS = genCss.genCSS;
+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.getFonts = googleFonts.getFonts;
+exports.getStorefrontApi = getStorefrontApi.getStorefrontApi;
+exports.ErrorBoundary = ErrorBoundary.ErrorBoundary;
+exports.ErrorFallback = ErrorFallback.ErrorFallback;
+exports.Page404 = _404.Page404;
+exports.Page500 = _500.Page500;
+exports.GoogleAnalytic = GoogleAnalytic.GoogleAnalytic;
+exports.FacebookPixel = FacebookPixel.FacebookPixel;
+exports.TikTokPixel = TikTokPixel.TikTokPixel;

package/dist/cjs/layouts/main.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+
+const MainLayout = ({ children }) => {
+    const mobileOnly = core.useShopStore((s) => s.mobileOnly);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: core.cls({
+                    'max-w-mobile mx-auto w-full': mobileOnly,
+                }), children: children }), jsxRuntime.jsx(core.AddOn, { name: "cookie-bar" }), jsxRuntime.jsx(core.AddOn, { name: "cart-drawer" })] }));
+};
+
+exports.default = MainLayout;

package/dist/cjs/libs/api/get-builder-props.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var parseJson = require('../helpers/parse-json.js');
+
+const getBuilderProps = async (fetcher, shopifyFetcher) => {
+    const [storeProperty, shopifyMeta] = await Promise.allSettled([
+        fetcher([core.StorePropertyDocument]),
+        shopifyFetcher([adapterShopify.ShopMetaDocument]),
+    ]);
+    const shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
+    const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
+    const seo = shopMeta
+        ? {
+            titleTemplate: `%s | ${shopMeta.shop.name}`,
+            defaultTitle: shopMeta?.shop.name,
+            title: 'Preview',
+            description: shopMeta?.shop.description,
+        }
+        : {};
+    return parseJson.serializableJson({
+        currency: shopMeta?.localization.country.currency.isoCode ?? null,
+        locale: shopMeta?.localization.country.isoCode ?? null,
+        swatches: parseJson.parseJson(shopData?.storeProperty?.swatchesConfig),
+        swr: {
+            revalidateOnMount: true,
+        },
+        seo,
+    });
+};
+
+exports.getBuilderProps = getBuilderProps;

package/dist/cjs/libs/api/get-collection-props.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var genCss = require('../helpers/gen-css.js');
+var normalize = require('../helpers/normalize.js');
+var parseJson = require('../helpers/parse-json.js');
+
+const getCollectionProps = (fetcher) => async (handle) => {
+    const pageType = 'COLLECTION';
+    const variables = {
+        slug: handle,
+        slugType: pageType,
+    };
+    const [collectionData, theme] = await Promise.all([
+        fetcher([
+            core.CollectionDocument,
+            {
+                handle,
+            },
+        ]),
+        fetcher([
+            core.PublishedThemePagesDocument,
+            variables,
+        ]),
+    ]);
+    const dataBuilder = theme.publishedThemePages?.[0];
+    const collectionTemplate = normalize.parseBuilderTemplate(dataBuilder);
+    if (!collectionData || !collectionData?.collection || !dataBuilder) {
+        throw new Error('Collection not found');
+    }
+    const { collection } = collectionData;
+    const queries = core.prefetchQueries(collectionTemplate);
+    const datas = await Promise.allSettled(queries.map(({ query, variables, func }) => {
+        if (func) {
+            return func(fetcher, variables);
+        }
+        if (query)
+            return fetcher([query, variables]);
+        return {};
+    }));
+    const fallback = queries.reduce((acc, { key }, index) => {
+        const res = datas[index];
+        if (res?.status === 'fulfilled') {
+            return {
+                ...acc,
+                [key]: res.value,
+            };
+        }
+        return acc;
+    }, {});
+    return parseJson.serializableJson({
+        builderData: collectionTemplate,
+        collection,
+        pageType,
+        themeStyle: genCss.genCSS(dataBuilder.pageStyle?.data),
+        swr: { fallback },
+        seo: {
+            title: collection.title,
+            description: collection.description,
+        },
+    });
+};
+
+exports.getCollectionProps = getCollectionProps;

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

@@ -0,0 +1,127 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var adapterShopify = require('@gem-sdk/adapter-shopify');
+var googleFonts = require('../google-fonts.js');
+var genCss = require('../helpers/gen-css.js');
+var generateManifres = require('../helpers/generate-manifres.js');
+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');
+
+const getHomePagePropsV2 = (fetcher, shopifyFetcher) => async () => {
+    try {
+        const variables = {
+            slugType: 'STATIC',
+        };
+        const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+            fetcher([
+                core.PublishedThemePagesDocument,
+                variables,
+            ]),
+            fetcher([core.StorePropertyDocument]),
+            shopifyFetcher([adapterShopify.ShopMetaDocument]),
+        ]);
+        if (theme.status === 'rejected') {
+            throw new Error(theme.reason?.[0]);
+        }
+        const dataBuilder = theme.value?.publishedThemePages?.[0];
+        if (!dataBuilder) {
+            throw new Error(`No data builder found for Home page`);
+        }
+        const homeTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
+        const [fontStyle, fallback] = await Promise.all([
+            googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
+            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 shopMeta = shopifyMeta.status === 'fulfilled' ? shopifyMeta.value : undefined;
+        const shopData = storeProperty.status === 'fulfilled' ? storeProperty.value : undefined;
+        const favicon = shopData?.storeProperty?.favicon ?? '/favicon/favicon-32x32.png';
+        const seo = {
+            defaultTitle: shopMeta?.shop.name,
+            title: dataBuilder?.name ?? 'Home',
+            description: description ?? shopMeta?.shop.description,
+            openGraph: {
+                site_name: shopMeta?.shop.name,
+                locale: shopMeta?.localization.country.isoCode,
+                title: dataBuilder?.name ?? shopMeta?.shop.name,
+                description: description ?? shopMeta?.shop.description,
+                images: thumbnail ? [thumbnail] : [],
+            },
+            additionalMetaTags: [
+                {
+                    name: 'theme-color',
+                    content: '#000000',
+                },
+            ],
+            canonical: '/',
+            additionalLinkTags: [
+                {
+                    rel: 'icon',
+                    sizes: '32x32',
+                    href: `${favicon}-/crop/1:1/center/-/smart_resize/32x32/`,
+                },
+                {
+                    rel: 'icon',
+                    sizes: '16x16',
+                    href: `${favicon}-/crop/1:1/center/-/smart_resize/16x16/`,
+                },
+                {
+                    rel: 'apple-touch-icon',
+                    sizes: '180x180',
+                    href: `${favicon}-/crop/1:1/center/-/smart_resize/180x180/`,
+                },
+                {
+                    rel: 'manifest',
+                    href: generateManifres.generateManifest({
+                        theme_color: '#000000',
+                        background_color: '#ffffff',
+                        display: 'standalone',
+                        scope: '/',
+                        start_url: '/',
+                        name: shopMeta?.shop.name,
+                        short_name: shopMeta?.shop.name,
+                        description: shopMeta?.shop.description,
+                        icons: [
+                            {
+                                src: `${favicon}-/crop/1:1/center/-/smart_resize/192x192/`,
+                                sizes: '192x192',
+                                type: 'image/png',
+                                purpose: 'any maskable',
+                            },
+                            {
+                                src: `${favicon}-/crop/1:1/center/-/smart_resize/512x512/`,
+                                sizes: '512x512',
+                                type: 'image/png',
+                            },
+                        ],
+                    }),
+                },
+            ],
+        };
+        return parseJson.serializableJson({
+            themeStyle: genCss.genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
+            fontStyle,
+            builderData: homeTemplate,
+            swr: { fallback },
+            currency: shopMeta?.localization.country.currency.isoCode ?? null,
+            locale: shopMeta?.localization.country.isoCode ?? null,
+            swatches: parseJson.parseJson(shopData?.storeProperty?.swatchesConfig),
+            seo,
+            mobileOnly,
+            gaTrackingId: dataBuilder.themePageAnalytic?.gaTrackingID ?? null,
+            facebookPixelId: dataBuilder.themePageAnalytic?.fbPixelID ?? null,
+            tiktokPixelId: dataBuilder.themePageAnalytic?.tiktokPixelID ?? null,
+        });
+    }
+    catch (err) {
+        nextjs.captureException(err);
+        throw err;
+    }
+};
+
+exports.getHomePagePropsV2 = getHomePagePropsV2;