@gem-sdk/pages 2.0.0-staging.152 → 2.0.0-staging.709

package/dist/cjs/components/FooterForPostPurchase.js

@@ -13,7 +13,7 @@ const defaultMargin = {
 };
 const FooterForPostPurchase = (props)=>{
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-bg-white gp-font-sans'),
+        className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-font-sans'),
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
             className: "gp-flex gp-flex-1 gp-items-center gp-justify-between gp-py-6",
             style: {

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

@@ -45,7 +45,7 @@ const Footer = (props)=>{
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-bg-white gp-font-sans'),
+            className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-font-sans'),
             children: /*#__PURE__*/ jsxRuntime.jsx("div", {
                 className: "gp-flex gp-flex-1 gp-items-center gp-justify-between gp-py-6",
                 style: {
@@ -62,7 +62,7 @@ const Footer = (props)=>{
                 })
             })
         }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-bg-white gp-font-sans', {
+            className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-justify-center gp-border-y gp-border-[#EEEEEE gp-font-sans', {
                 'gp-fixed gp-bottom-0 gp-w-full': shouldFixed
             }),
             children: /*#__PURE__*/ jsxRuntime.jsxs("div", {

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

@@ -22,7 +22,6 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate, openPageSetting } = props;
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
-    core.usePageStore((s)=>s.sidebarMode);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {

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

@@ -411,6 +411,7 @@ const Toolbar = ()=>{
         if (!value || !currentComponentActive.current) {
             return;
         }
+        let isClickProcessing = false;
         const selector = getSelectorComponent({
             ...currentComponentActive.current
         });
@@ -419,6 +420,7 @@ const Toolbar = ()=>{
             const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
             if ($parents.length) {
                 const onHover = ($parent)=>{
+                    if (isClickProcessing) return;
                     const uid = $parent.getAttribute('data-parent-uid');
                     if (!uid) return;
                     const $parentComponents = document.body.querySelector('#storefront')?.querySelectorAll(`[data-uid="${uid}"]`);
@@ -447,6 +449,7 @@ const Toolbar = ()=>{
                     }
                 };
                 const onClick = async ($parent)=>{
+                    isClickProcessing = true;
                     const uid = $parent.getAttribute('data-parent-uid');
                     if (!uid) return;
                     const isElementInsideProduct = async ()=>{
@@ -478,6 +481,9 @@ const Toolbar = ()=>{
                     });
                     outHover($parent);
                     window.dispatchEvent(event);
+                    setTimeout(()=>{
+                        isClickProcessing = false;
+                    }, 0);
                 };
                 $parents.forEach(($parent)=>{
                     $parent.addEventListener('mouseover', ()=>onHover($parent));

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

@@ -8,11 +8,12 @@ var core = require('@gem-sdk/core');
 var react = require('react');
 var getStorefrontApi = require('../../libs/get-storefront-api.js');
 var googleFonts = require('../../libs/google-fonts.js');
+var checkOptionFont = require('../../libs/helpers/check-option-font.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');
+var getListFontWeightTypos = require('../composable/getListFontWeightTypos.js');
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -21,6 +22,7 @@ const Toolbox = ()=>{
     const changeStorefrontInfo = core.useShopStore((s)=>s.changeStorefrontInfo);
     const setDynamicProduct = core.usePageStore((s)=>s.setDynamicProduct);
     const setPostPurchaseProductOffers = core.usePageStore((s)=>s.setPostPurchaseProductOffers);
+    const setDynamicDiscountOffer = core.usePageStore((s)=>s.setDynamicDiscountOffer);
     const setSalePageProductId = core.usePageStore((s)=>s.setSalePageProductId);
     const setDynamicCollection = core.usePageStore((s)=>s.setDynamicCollection);
     const initState = core.useBuilderPreviewStore((s)=>s.initState);
@@ -38,7 +40,7 @@ const Toolbox = ()=>{
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
-    const changeShopifyPlan = core.useShopStore((s)=>s.changeShopifyPlan);
+    const updatePriceWithCurrency = core.useShopStore((s)=>s.updatePriceWithCurrency);
     const changeFontType = libsStore.libsStore((s)=>s.changeFontType);
     const fontType = libsStore.libsStore((s)=>s.fontType);
     const clearModal = core.useModalStore((s)=>s.clearModal);
@@ -137,9 +139,11 @@ const Toolbox = ()=>{
         try {
             if (detail.data) {
                 const themeStyle = genCss.genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value])=>{
-                    return value;
-                }).map((item)=>{
+                const fontWeights = getListFontWeightTypos.getListFontWeightTypos(detail.data?.typography);
+                const font = Object.entries(detail.data?.font).map(([, value])=>({
+                        ...value,
+                        variants: value.variants.filter((variant)=>fontWeights.includes(variant) || variant === 'regular' && fontWeights.includes('400')).map((variant)=>variant === 'regular' ? '400' : variant)
+                    })).map((item)=>{
                     if (item.type == 'custom') {
                         const isGoogleFont = shopifyCdnWithGoogleFonts.shopifyCdnWithGoogleFonts.find((ggFont)=>ggFont.family == item.family);
                         if (isGoogleFont) {
@@ -296,12 +300,12 @@ const Toolbox = ()=>{
     }, [
         changeShopPlan
     ]);
-    const onUpdateShopifyPlan = react.useCallback((e)=>{
-        const shopifyPlan = e.detail;
-        if (!shopifyPlan) return;
-        changeShopifyPlan(shopifyPlan);
+    const onUpdatePriceWithCurrency = react.useCallback((e)=>{
+        const showPriceCurrency = e.detail;
+        if (!showPriceCurrency) return;
+        updatePriceWithCurrency(showPriceCurrency);
     }, [
-        changeShopifyPlan
+        updatePriceWithCurrency
     ]);
     const onUpdateFontType = react.useCallback((e)=>{
         const fontType = e.detail;
@@ -354,6 +358,13 @@ const Toolbox = ()=>{
     }, [
         setPostPurchaseProductOffers
     ]);
+    const onUpdateDynamicDiscountOffer = react.useCallback((e)=>{
+        const dynamicDiscountOffer = e.detail;
+        if (!dynamicDiscountOffer) return;
+        setDynamicDiscountOffer(dynamicDiscountOffer);
+    }, [
+        setDynamicDiscountOffer
+    ]);
     const onUpdateSalePageProductId = react.useCallback((e)=>{
         const id = e.detail;
         if (!id) return;
@@ -420,12 +431,12 @@ const Toolbox = ()=>{
         window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
         window.addEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
         window.addEventListener('update-shop-plan', onUpdateShopPlan);
-        window.addEventListener('update-shopify-plan', onUpdateShopifyPlan);
         window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
         window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
         window.addEventListener('update-item-name', onUpdateItemName);
         window.addEventListener('update-item-attribute', onUpdateItemAttribute);
         window.addEventListener('set-product-offer', onUpdateProductOffers);
+        window.addEventListener('set-dynamic-discount-offer', onUpdateDynamicDiscountOffer);
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
         window.addEventListener('limit-create-theme-section', onLimitCreateThemeSection);
         window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
@@ -433,6 +444,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
         window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
         window.addEventListener('update-font-type', onUpdateFontType);
+        window.addEventListener('update-price-with-currency', onUpdatePriceWithCurrency);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -446,7 +458,7 @@ const Toolbox = ()=>{
             window.removeEventListener('on-off-header-footer', onChangeLayoutSettingData);
             window.removeEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
             window.removeEventListener('update-shop-plan', onUpdateShopPlan);
-            window.removeEventListener('update-shopify-plan', onUpdateShopifyPlan);
+            window.removeEventListener('update-price-with-currency', onUpdatePriceWithCurrency);
             window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
             window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
             window.removeEventListener('update-item-name', onUpdateItemName);
@@ -462,7 +474,6 @@ const Toolbox = ()=>{
     }, [
         onAddEntity,
         onUpdateShopPlan,
-        onUpdateShopifyPlan,
         onForceUpdateEntityProps,
         onUpdateEntityProp,
         onInitBuilder,
@@ -485,7 +496,9 @@ const Toolbox = ()=>{
         onUpdateInteractionIsSelectOnPage,
         onUpdateInteractionSettingType,
         onUpdateFontType,
-        onChangeSidebarMode
+        onChangeSidebarMode,
+        onUpdateDynamicDiscountOffer,
+        onUpdatePriceWithCurrency
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/cjs/components/composable/getListFontWeightTypos.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const getListFontWeightTypos = (font)=>{
+    const fontWeights = new Set();
+    Object.values(font).forEach((fontStyle)=>{
+        // Check desktop fontWeight
+        if (fontStyle.desktop?.fontWeight) {
+            fontWeights.add(fontStyle.desktop.fontWeight);
+        }
+    });
+    return Array.from(fontWeights);
+};
+
+exports.getListFontWeightTypos = getListFontWeightTypos;

package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js

@@ -37,6 +37,7 @@ const defaultPadding = {
     mobile: 'var(--g-ct-p)'
 };
 const AddSectionImageToLayout = ({ editorImageToLayout })=>{
+    const { t } = core.useI18nStore();
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
     const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
     const editingPageType = core.useShopStore((s)=>s.pageType);
@@ -82,11 +83,11 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx("span", {
                     className: "gp-absolute gp-top-[-12px] gp-bg-white gp-px-[8px] gp-text-[14px] gp-font-normal gp-text-[#9E9E9E]",
-                    children: "Add section"
+                    children: t('Add section')
                 }),
                 ACTIONS_DATA.map((action)=>{
                     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 gp-flex`,
+                        className: `gp-relative gp-mx-1 gp-min-h-[60px] gp-border-box w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 gp-flex gp-p-2`,
                         id: action.id,
                         onClick: ()=>handleAddSectionAction(action.eventID),
                         "aria-hidden": true,
@@ -94,7 +95,7 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
                             /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                 className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
                                 children: [
-                                    action.title,
+                                    t(action.title),
                                     action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                                         width: "43",
                                         height: "20",
@@ -137,7 +138,7 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
                                 className: "gp-flex gp-items-center",
                                 children: /*#__PURE__*/ jsxRuntime.jsx("span", {
                                     className: "gp-mr-[3px] gp-text-center gp-text-[12px] gp-font-normal gp-text-[#676767]",
-                                    children: action.content
+                                    children: t(action.content)
                                 })
                             })
                         ]

package/dist/cjs/components/image-to-layout/DropElement.js

@@ -2,8 +2,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
 
+const SALE_FUNNEL_PAGE_TYPES = [
+    'GP_FUNNEL_PAGE',
+    'GP_PRE_SALE_PAGE'
+];
 const DropElement = ()=>{
+    const { t } = core.useI18n();
+    const editingPageType = core.useShopStore((s)=>s.pageType);
+    const isFunnelSalesPage = SALE_FUNNEL_PAGE_TYPES.includes(editingPageType || '');
     const dispatchEventBuildWithSectionActiveTab = (value)=>{
         const event = new CustomEvent('editor:sidebar:build-with-section-active-tab', {
             bubbles: true,
@@ -13,6 +21,15 @@ const DropElement = ()=>{
         });
         window.dispatchEvent(event);
     };
+    const dispatchEventBuildWithTemplateActiveTab = (value)=>{
+        const event = new CustomEvent('editor:sidebar:build-with-template-active-tab', {
+            bubbles: true,
+            detail: {
+                value
+            }
+        });
+        window.dispatchEvent(event);
+    };
     const handleClickGenerate = (e)=>{
         const event = new CustomEvent('editor:sidebar:click-img-to-layout-gallery-btn', e);
         window.dispatchEvent(event);
@@ -101,22 +118,30 @@ const DropElement = ()=>{
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                         className: "gp-text-16 gp-font-medium gp-mb-4 gp-text-[#212121]",
-                        children: "Start with Sections from sidebar"
+                        children: isFunnelSalesPage ? t('Start building with Sections/Elements or') : t('Start with Sections from sidebar')
                     }),
                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        className: "gp-flex gp-w-[291px] gp-justify-between",
+                        className: "gp-flex gp-gap-3 gp-justify-between",
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx("button", {
                                 "data-button-add-section": true,
-                                onClick: ()=>dispatchEventBuildWithSectionActiveTab(true),
-                                className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#1C1C1C] gp-text-[14px] gp-text-white hover:gp-bg-[#3B3B3B]",
-                                children: "Add sections"
+                                onClick: ()=>{
+                                    if (isFunnelSalesPage) {
+                                        dispatchEventBuildWithTemplateActiveTab('funnelExisting');
+                                    } else dispatchEventBuildWithSectionActiveTab(true);
+                                },
+                                className: "gp-flex gp-h-[40px] gp-px-6 gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#1C1C1C] gp-text-[14px] gp-text-white hover:gp-bg-[#3B3B3B]",
+                                children: isFunnelSalesPage ? t('Use existing page designs') : t('Add sections')
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx("button", {
                                 "data-button-add-elements": true,
-                                onClick: ()=>dispatchEventBuildWithSectionActiveTab(false),
-                                className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#f4f4f4] gp-text-[14px] gp-text-[#212121] hover:gp-bg-[#E2E2E2]",
-                                children: "Add elements"
+                                onClick: ()=>{
+                                    if (isFunnelSalesPage) {
+                                        dispatchEventBuildWithTemplateActiveTab('templates');
+                                    } else dispatchEventBuildWithSectionActiveTab(false);
+                                },
+                                className: "gp-flex gp-h-[40px] gp-px-6 gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#f4f4f4] gp-text-[14px] gp-text-[#212121] hover:gp-bg-[#E2E2E2]",
+                                children: isFunnelSalesPage ? t('Explore templates') : t('Add elements')
                             })
                         ]
                     }),
@@ -155,7 +180,7 @@ const DropElement = ()=>{
                             "aria-hidden": "true",
                             id: "gp-img-to-layout-gallery-btn",
                             className: "gp-relative gp-cursor-pointer gp-text-[14px] gp-font-medium gp-text-[#3C67FF]",
-                            children: "Start with Generating from URL or image"
+                            children: t('Start with Generating from URL or image')
                         })
                     })
                 ]

package/dist/cjs/constants/index.js

@@ -0,0 +1,15 @@
+'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_TITLE"] = 'global-meta-title';
+    PublishedThemePageMetafields["GLOBAL_META_THUMBNAIL"] = 'global-meta-thumbnail';
+    PublishedThemePageMetafields["NOINDEX_KEY"] = 'noindex';
+    PublishedThemePageMetafields["NOFOLLOW_KEY"] = 'nofollow';
+})(exports.PublishedThemePageMetafields || (exports.PublishedThemePageMetafields = {}));

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-post-purchase-props-preview.js

@@ -33,6 +33,7 @@ const fetchSalePageDataByID = async (data, fetcher)=>{
         dataBuilder: theme.value.themePage,
         pageStyle: theme.value.themePage?.theme?.themeStyles?.edges?.[0]?.node?.data,
         storeProperty,
+        dynamicDiscountOffer: undefined,
         productOffers: []
     };
 };
@@ -44,7 +45,7 @@ const fetchPostPurchasePageDataByID = async (data, fetcher)=>{
             default: true
         }
     };
-    const [theme, storeProperty, saleFunnelDiscounts] = await Promise.allSettled([
+    const [theme, storeProperty, saleFunnelDiscounts, saleFunnelOffer] = await Promise.allSettled([
         fetcher([
             core.ThemePageDocument,
             variables
@@ -59,6 +60,12 @@ const fetchPostPurchasePageDataByID = async (data, fetcher)=>{
                     saleFunnelOfferID: data.currentOfferID
                 }
             }
+        ]),
+        fetcher([
+            core.SaleFunnelOfferDocument,
+            {
+                saleFunnelOfferId: data.currentOfferID
+            }
         ])
     ]);
     if (theme.status === 'rejected') {
@@ -67,10 +74,14 @@ const fetchPostPurchasePageDataByID = async (data, fetcher)=>{
     if (saleFunnelDiscounts.status === 'rejected') {
         throw new Error(saleFunnelDiscounts.reason?.[0]);
     }
+    if (saleFunnelOffer.status === 'rejected') {
+        throw new Error(saleFunnelOffer.reason?.[0]);
+    }
     return {
         dataBuilder: theme.value.themePage,
         pageStyle: theme.value.themePage?.theme?.themeStyles?.edges?.[0]?.node?.data,
         storeProperty,
+        dynamicDiscountOffer: saleFunnelOffer.value.saleFunnelOffer?.dynamicDiscounts?.[0],
         productOffers: saleFunnelDiscounts.value.saleFunnelDiscounts?.edges?.filter((item)=>item?.node?.objectType === 'PRODUCT' && item?.node?.type === 'ORDER_VALUE') || []
     };
 };
@@ -116,6 +127,7 @@ const fetchThemePageDataByTemplateID = async (data, fetcher)=>{
         dataBuilder: theme.value.libraryTemplate,
         pageStyle: undefined,
         storeProperty,
+        dynamicDiscountOffer: undefined,
         productOffers: productOffers
     };
 };
@@ -123,7 +135,7 @@ const fetchShopLibraryPageDataByID = async (data, fetcher)=>{
     const variables = {
         shopLibraryPageId: data.shopLibraryPageId
     };
-    const [theme, storeProperty, saleFunnelDiscounts] = await Promise.allSettled([
+    const [theme, storeProperty, saleFunnelDiscounts, saleFunnelOffer] = await Promise.allSettled([
         fetcher([
             core.ShopLibraryPageDocument,
             variables
@@ -138,6 +150,12 @@ const fetchShopLibraryPageDataByID = async (data, fetcher)=>{
                     saleFunnelOfferID: data.currentOfferID
                 }
             }
+        ]),
+        fetcher([
+            core.SaleFunnelOfferDocument,
+            {
+                saleFunnelOfferId: data.currentOfferID
+            }
         ])
     ]);
     if (theme.status === 'rejected') {
@@ -146,10 +164,14 @@ const fetchShopLibraryPageDataByID = async (data, fetcher)=>{
     if (saleFunnelDiscounts.status === 'rejected') {
         throw new Error(saleFunnelDiscounts.reason?.[0]);
     }
+    if (saleFunnelOffer.status === 'rejected') {
+        throw new Error(saleFunnelOffer.reason?.[0]);
+    }
     return {
         dataBuilder: theme.value.shopLibraryPage,
         pageStyle: undefined,
         storeProperty,
+        dynamicDiscountOffer: saleFunnelOffer.value.saleFunnelOffer?.dynamicDiscounts?.[0],
         productOffers: saleFunnelDiscounts.value.saleFunnelDiscounts?.edges?.filter((item)=>item?.node?.objectType === 'PRODUCT' && item?.node?.type === 'ORDER_VALUE') || []
     };
 };
@@ -157,7 +179,7 @@ const fetchLibraryTemplateDataByID = async (data, fetcher)=>{
     const variables = {
         libraryTemplateId: data.libraryTemplateId
     };
-    const [theme, storeProperty, saleFunnelDiscounts] = await Promise.allSettled([
+    const [theme, storeProperty, saleFunnelDiscounts, saleFunnelOffer] = await Promise.allSettled([
         fetcher([
             core.LibraryTemplateDocument,
             variables
@@ -172,6 +194,12 @@ const fetchLibraryTemplateDataByID = async (data, fetcher)=>{
                     saleFunnelOfferID: data.currentOfferID
                 }
             }
+        ]),
+        fetcher([
+            core.SaleFunnelOfferDocument,
+            {
+                saleFunnelOfferId: data.currentOfferID
+            }
         ])
     ]);
     if (theme.status === 'rejected') {
@@ -180,10 +208,14 @@ const fetchLibraryTemplateDataByID = async (data, fetcher)=>{
     if (saleFunnelDiscounts.status === 'rejected') {
         throw new Error(saleFunnelDiscounts.reason?.[0]);
     }
+    if (saleFunnelOffer.status === 'rejected') {
+        throw new Error(saleFunnelOffer.reason?.[0]);
+    }
     return {
         dataBuilder: theme.value.libraryTemplate,
         pageStyle: undefined,
         storeProperty,
+        dynamicDiscountOffer: saleFunnelOffer.value.saleFunnelOffer?.dynamicDiscounts?.[0],
         productOffers: saleFunnelDiscounts.value.saleFunnelDiscounts?.edges?.filter((item)=>item?.node?.objectType === 'PRODUCT' && item?.node?.type === 'ORDER_VALUE') || []
     };
 };
@@ -221,7 +253,7 @@ const getRelevantPageData = async (data)=>{
 const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFetcher)=>async (data)=>{
         try {
             const { id, currentOfferID, isLibraryTemplate, isShopLibraryPage } = data;
-            const { dataBuilder, storeProperty, productOffers, pageStyle } = await getRelevantPageData({
+            const { dataBuilder, storeProperty, productOffers, pageStyle, dynamicDiscountOffer } = await getRelevantPageData({
                 id,
                 currentOfferID,
                 fetcher,
@@ -250,7 +282,8 @@ const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFet
                 swr: {
                     fallback
                 },
-                productOffers
+                productOffers,
+                dynamicDiscountOffer
             });
         } catch (err) {
             console.log('error', err);

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

@@ -10,6 +10,7 @@ var getFallback = require('../helpers/get-fallback.js');
 var normalize = require('../helpers/normalize.js');
 var parseJson = require('../helpers/parse-json.js');
 var customFonts = require('../custom-fonts.js');
+var sentry = require('../helpers/sentry.js');
 
 const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
         try {
@@ -31,6 +32,10 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 ])
             ]);
             if (theme.status === 'rejected') {
+                sentry.sentryCaptureException('PreviewThemePageDocument', theme.reason, {
+                    variables,
+                    theme
+                });
                 throw new Error(theme.reason?.[0]);
             }
             const dataBuilder = theme.value.previewThemePage;