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

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

@@ -4,11 +4,12 @@ import { useMatchMutate, useShopStore, usePageStore, useBuilderPreviewStore, use
 import { memo, useMemo, useCallback, useEffect } from 'react';
 import { getStorefrontApi } from '../../libs/get-storefront-api.js';
 import { createFontUrl } from '../../libs/google-fonts.js';
+import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
 import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
 import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
 import { libsStore } from '../../store/libs-store.js';
-import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
+import { getListFontWeightTypos } from '../composable/getListFontWeightTypos.js';
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -17,6 +18,7 @@ const Toolbox = ()=>{
     const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
     const setDynamicProduct = usePageStore((s)=>s.setDynamicProduct);
     const setPostPurchaseProductOffers = usePageStore((s)=>s.setPostPurchaseProductOffers);
+    const setDynamicDiscountOffer = usePageStore((s)=>s.setDynamicDiscountOffer);
     const setSalePageProductId = usePageStore((s)=>s.setSalePageProductId);
     const setDynamicCollection = usePageStore((s)=>s.setDynamicCollection);
     const initState = useBuilderPreviewStore((s)=>s.initState);
@@ -34,7 +36,7 @@ const Toolbox = ()=>{
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
-    const changeShopifyPlan = useShopStore((s)=>s.changeShopifyPlan);
+    const updatePriceWithCurrency = useShopStore((s)=>s.updatePriceWithCurrency);
     const changeFontType = libsStore((s)=>s.changeFontType);
     const fontType = libsStore((s)=>s.fontType);
     const clearModal = useModalStore((s)=>s.clearModal);
@@ -133,9 +135,11 @@ const Toolbox = ()=>{
         try {
             if (detail.data) {
                 const themeStyle = genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value])=>{
-                    return value;
-                }).map((item)=>{
+                const fontWeights = 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.find((ggFont)=>ggFont.family == item.family);
                         if (isGoogleFont) {
@@ -292,12 +296,12 @@ const Toolbox = ()=>{
     }, [
         changeShopPlan
     ]);
-    const onUpdateShopifyPlan = useCallback((e)=>{
-        const shopifyPlan = e.detail;
-        if (!shopifyPlan) return;
-        changeShopifyPlan(shopifyPlan);
+    const onUpdatePriceWithCurrency = useCallback((e)=>{
+        const showPriceCurrency = e.detail;
+        if (!showPriceCurrency) return;
+        updatePriceWithCurrency(showPriceCurrency);
     }, [
-        changeShopifyPlan
+        updatePriceWithCurrency
     ]);
     const onUpdateFontType = useCallback((e)=>{
         const fontType = e.detail;
@@ -350,6 +354,13 @@ const Toolbox = ()=>{
     }, [
         setPostPurchaseProductOffers
     ]);
+    const onUpdateDynamicDiscountOffer = useCallback((e)=>{
+        const dynamicDiscountOffer = e.detail;
+        if (!dynamicDiscountOffer) return;
+        setDynamicDiscountOffer(dynamicDiscountOffer);
+    }, [
+        setDynamicDiscountOffer
+    ]);
     const onUpdateSalePageProductId = useCallback((e)=>{
         const id = e.detail;
         if (!id) return;
@@ -416,12 +427,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);
@@ -429,6 +440,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);
@@ -442,7 +454,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);
@@ -458,7 +470,6 @@ const Toolbox = ()=>{
     }, [
         onAddEntity,
         onUpdateShopPlan,
-        onUpdateShopifyPlan,
         onForceUpdateEntityProps,
         onUpdateEntityProp,
         onInitBuilder,
@@ -481,7 +492,9 @@ const Toolbox = ()=>{
         onUpdateInteractionIsSelectOnPage,
         onUpdateInteractionSettingType,
         onUpdateFontType,
-        onChangeSidebarMode
+        onChangeSidebarMode,
+        onUpdateDynamicDiscountOffer,
+        onUpdatePriceWithCurrency
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

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

@@ -0,0 +1,12 @@
+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);
+};
+
+export { getListFontWeightTypos };

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { useShopStore, useBuilderPreviewStore, makeStyleResponsive } from '@gem-sdk/core';
+import { useI18nStore, useShopStore, useBuilderPreviewStore, makeStyleResponsive } from '@gem-sdk/core';
 
 const BASE_DATA = [
     {
@@ -33,6 +33,7 @@ const defaultPadding = {
     mobile: 'var(--g-ct-p)'
 };
 const AddSectionImageToLayout = ({ editorImageToLayout })=>{
+    const { t } = useI18nStore();
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
     const totalSection = useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
     const editingPageType = useShopStore((s)=>s.pageType);
@@ -78,11 +79,11 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
             children: [
                 /*#__PURE__*/ 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__*/ 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,
@@ -90,7 +91,7 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
                             /*#__PURE__*/ 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__*/ jsxs("svg", {
                                         width: "43",
                                         height: "20",
@@ -133,7 +134,7 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
                                 className: "gp-flex gp-items-center",
                                 children: /*#__PURE__*/ 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/esm/components/image-to-layout/DropElement.js

@@ -1,7 +1,15 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useI18n, useShopStore } from '@gem-sdk/core';
 
+const SALE_FUNNEL_PAGE_TYPES = [
+    'GP_FUNNEL_PAGE',
+    'GP_PRE_SALE_PAGE'
+];
 const DropElement = ()=>{
+    const { t } = useI18n();
+    const editingPageType = 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,
@@ -11,6 +19,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);
@@ -99,22 +116,30 @@ const DropElement = ()=>{
                 children: [
                     /*#__PURE__*/ 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__*/ jsxs("div", {
-                        className: "gp-flex gp-w-[291px] gp-justify-between",
+                        className: "gp-flex gp-gap-3 gp-justify-between",
                         children: [
                             /*#__PURE__*/ 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__*/ 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')
                             })
                         ]
                     }),
@@ -153,7 +178,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/esm/constants/index.js

@@ -0,0 +1,15 @@
+var PublishedThemePageMetafields;
+(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';
+})(PublishedThemePageMetafields || (PublishedThemePageMetafields = {}));
+
+export { PublishedThemePageMetafields };

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

@@ -1,4 +1,4 @@
-import { PublishedThemePagesDocument, StorePropertyDocument } from '@gem-sdk/core';
+import { PublishedThemePagesDocument, StorePropertyDocument, PublishedShopMetasDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
@@ -7,13 +7,15 @@ import { getFallbackV2 } from '../helpers/get-fallback.js';
 import { parseBuilderTemplateV2 } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
 import { captureException } from '@sentry/nextjs';
+import { PublishedThemePageMetafields } from '../../constants/index.js';
+import { getPublishedThemePageMetafieldByKey } from '../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([
                     PublishedThemePagesDocument,
                     variables
@@ -23,11 +25,21 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 ]),
                 shopifyFetcher([
                     ShopMetaDocument
+                ]),
+                fetcher([
+                    PublishedShopMetasDocument,
+                    {
+                        keys: [
+                            PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                            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`);
@@ -39,8 +51,8 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 getFallbackV2(fetcher, homeTemplate)
             ]);
             const mobileOnly = dataBuilder.isMobile ?? false;
-            const description = dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-description')?.value;
-            const thumbnail = parseJson(dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-thumbnail')?.value);
+            const description = getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+            const thumbnail = parseJson(getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === 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';
@@ -127,11 +139,11 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 swatches: 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: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.ANALYTICS_GA_TRACKING_ID, dataBuilder?.metafields) ?? null,
+                facebookPixelId: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.ANALYTICS_FB_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                tiktokPixelId: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.ANALYTICS_TIKTOK_PIXEL_ID, dataBuilder?.metafields) ?? null,
+                customCodeHeader: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.CUSTOM_CODE_HEADER, dataBuilder?.metafields) ?? null,
+                customCodeBody: getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.CUSTOM_CODE_BODY, dataBuilder?.metafields) ?? null,
                 pageHandle: dataBuilder.handle ?? null
             });
         } catch (err) {

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

@@ -1,10 +1,12 @@
-import { PublishedThemePagesDocument, StorePropertyDocument, prefetchQueries } from '@gem-sdk/core';
+import { PublishedThemePagesDocument, StorePropertyDocument, PublishedShopMetasDocument, prefetchQueries } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { parseBuilderTemplate } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
+import { PublishedThemePageMetafields } from '../../constants/index.js';
+import { getPublishedThemePageMetafieldByKey } from '../helpers/get-metafield.js';
 
 const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
         const pageType = 'STATIC';
@@ -15,7 +17,7 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
         //   PublishedThemePagesDocument,
         //   variables,
         // ]);
-        const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+        const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
             fetcher([
                 PublishedThemePagesDocument,
                 variables
@@ -25,6 +27,15 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
             ]),
             shopifyFetcher([
                 ShopMetaDocument
+            ]),
+            fetcher([
+                PublishedShopMetasDocument,
+                {
+                    keys: [
+                        PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION,
+                        PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL
+                    ]
+                }
             ])
         ]);
         if (theme.status === 'rejected') {
@@ -32,6 +43,7 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
                 pageType
             };
         }
+        const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
         const dataBuilder = theme.value.publishedThemePages?.[0];
         const homeTemplate = parseBuilderTemplate(dataBuilder);
         const fontStyle = await getFontFromGlobalStyle(dataBuilder?.pageStyle?.data);
@@ -56,8 +68,8 @@ const getHomePageProps = (fetcher, shopifyFetcher)=>async ()=>{
             }
             return acc;
         }, {});
-        const description = dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-description')?.value;
-        const thumbnail = parseJson(dataBuilder?.themePageDataSEO?.find((item)=>item?.key === 'global-meta-thumbnail')?.value);
+        const description = getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === PublishedThemePageMetafields.GLOBAL_META_DESCRIPTION)?.value;
+        const thumbnail = parseJson(getPublishedThemePageMetafieldByKey(PublishedThemePageMetafields.GLOBAL_META_THUMBNAIL, dataBuilder?.metafields) || publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === 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/esm/libs/api/get-post-purchase-props-preview.js

@@ -1,4 +1,4 @@
-import { ThemePageDocument, StorePropertyDocument, SaleFunnelDiscountsDocument, LibraryTemplateDocument, LibrarySaleFunnelDocument, ShopLibraryPageDocument } from '@gem-sdk/core';
+import { ThemePageDocument, StorePropertyDocument, SaleFunnelDiscountsDocument, SaleFunnelOfferDocument, LibraryTemplateDocument, LibrarySaleFunnelDocument, ShopLibraryPageDocument } from '@gem-sdk/core';
 import { captureException } from '@sentry/nextjs';
 import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
@@ -31,6 +31,7 @@ const fetchSalePageDataByID = async (data, fetcher)=>{
         dataBuilder: theme.value.themePage,
         pageStyle: theme.value.themePage?.theme?.themeStyles?.edges?.[0]?.node?.data,
         storeProperty,
+        dynamicDiscountOffer: undefined,
         productOffers: []
     };
 };
@@ -42,7 +43,7 @@ const fetchPostPurchasePageDataByID = async (data, fetcher)=>{
             default: true
         }
     };
-    const [theme, storeProperty, saleFunnelDiscounts] = await Promise.allSettled([
+    const [theme, storeProperty, saleFunnelDiscounts, saleFunnelOffer] = await Promise.allSettled([
         fetcher([
             ThemePageDocument,
             variables
@@ -57,6 +58,12 @@ const fetchPostPurchasePageDataByID = async (data, fetcher)=>{
                     saleFunnelOfferID: data.currentOfferID
                 }
             }
+        ]),
+        fetcher([
+            SaleFunnelOfferDocument,
+            {
+                saleFunnelOfferId: data.currentOfferID
+            }
         ])
     ]);
     if (theme.status === 'rejected') {
@@ -65,10 +72,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') || []
     };
 };
@@ -114,6 +125,7 @@ const fetchThemePageDataByTemplateID = async (data, fetcher)=>{
         dataBuilder: theme.value.libraryTemplate,
         pageStyle: undefined,
         storeProperty,
+        dynamicDiscountOffer: undefined,
         productOffers: productOffers
     };
 };
@@ -121,7 +133,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([
             ShopLibraryPageDocument,
             variables
@@ -136,6 +148,12 @@ const fetchShopLibraryPageDataByID = async (data, fetcher)=>{
                     saleFunnelOfferID: data.currentOfferID
                 }
             }
+        ]),
+        fetcher([
+            SaleFunnelOfferDocument,
+            {
+                saleFunnelOfferId: data.currentOfferID
+            }
         ])
     ]);
     if (theme.status === 'rejected') {
@@ -144,10 +162,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') || []
     };
 };
@@ -155,7 +177,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([
             LibraryTemplateDocument,
             variables
@@ -170,6 +192,12 @@ const fetchLibraryTemplateDataByID = async (data, fetcher)=>{
                     saleFunnelOfferID: data.currentOfferID
                 }
             }
+        ]),
+        fetcher([
+            SaleFunnelOfferDocument,
+            {
+                saleFunnelOfferId: data.currentOfferID
+            }
         ])
     ]);
     if (theme.status === 'rejected') {
@@ -178,10 +206,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') || []
     };
 };
@@ -219,7 +251,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,
@@ -248,7 +280,8 @@ const getPostPurchasePropsPreview = (fetcher, librarySaleFunnelID, storeFrontFet
                 swr: {
                     fallback
                 },
-                productOffers
+                productOffers,
+                dynamicDiscountOffer
             });
         } catch (err) {
             console.log('error', err);

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

@@ -8,6 +8,7 @@ import { getFallbackV2 } from '../helpers/get-fallback.js';
 import { parseBuilderTemplateV2, extractPageBackground } from '../helpers/normalize.js';
 import { parseJson, serializableJson } from '../helpers/parse-json.js';
 import { getCustomFonts } from '../custom-fonts.js';
+import { sentryCaptureException } from '../helpers/sentry.js';
 
 const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
         try {
@@ -29,6 +30,10 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 ])
             ]);
             if (theme.status === 'rejected') {
+                sentryCaptureException('PreviewThemePageDocument', theme.reason, {
+                    variables,
+                    theme
+                });
                 throw new Error(theme.reason?.[0]);
             }
             const dataBuilder = theme.value.previewThemePage;