@gem-sdk/core 1.39.17 → 1.40.0

package/dist/cjs/helpers/queries/get-products.js

@@ -4,12 +4,13 @@ var products_generated = require('../../graphql/queries/products.generated.js');
 var getCollection = require('./get-collection.js');
 var getProduct = require('./get-product.js');
 
-const getProducts = async (fetcher, { ids, isSample, isStorefront, defaultSelectedProductCount })=>{
+const getProducts = async (fetcher, { ids, isSample, isStorefront, defaultSelectedProductCount, allStatus })=>{
     const products = await loopFetchProducts(fetcher, {
         ids,
         isSample,
         isStorefront,
-        defaultSelectedProductCount
+        defaultSelectedProductCount,
+        allStatus
     });
     if (!products) {
         throw new Error('Product not found');
@@ -62,7 +63,7 @@ const fetchProducts = async (fetcher, variables)=>{
         variables
     ]);
 };
-const loopFetchProducts = async (fetcher, { ids, isSample, isStorefront, defaultSelectedProductCount })=>{
+const loopFetchProducts = async (fetcher, { ids, isSample, isStorefront, defaultSelectedProductCount, allStatus })=>{
     const defaultNumberOfProducts = defaultSelectedProductCount || 4;
     const numberOfProducts = (ids?.length == 0 ? defaultNumberOfProducts : ids?.length) ?? defaultNumberOfProducts;
     const productsPerPage = 8; // number of products per page
@@ -75,6 +76,9 @@ const loopFetchProducts = async (fetcher, { ids, isSample, isStorefront, default
     // counter number of queries
     const pages = Math.ceil(numberOfProducts / productsPerPage);
     while(currentPage <= pages && hasNextPage !== false){
+        const status = allStatus ? {} : {
+            status: 'ACTIVE'
+        };
         variables = {
             first: getCollection.calculateFirstProduct(numberOfProducts, currentPage, productsPerPage),
             firstMedia: 1,
@@ -88,7 +92,7 @@ const loopFetchProducts = async (fetcher, { ids, isSample, isStorefront, default
                 direction: 'ASC'
             },
             where: {
-                status: 'ACTIVE',
+                ...status,
                 isSample,
                 ...isStorefront && {
                     isStorefront

package/dist/cjs/hooks/shop/use-product-query.js

@@ -6,7 +6,7 @@ var shop = require('../shop.js');
 var useFetchHandle = require('../useFetchHandle.js');
 var query = require('../../helpers/query.js');
 
-const useProductQuery = (productId, options)=>{
+const useProductQuery = (productId, options, customFetcher)=>{
     const fetcher = useFetchHandle.useFetchHandle();
     const isSample = shop.useIsSampleProduct();
     const isStorefront = shop.useIsStorefrontProduct();
@@ -15,7 +15,7 @@ const useProductQuery = (productId, options)=>{
         isSample,
         isStorefront
     }) : null, async ([, arg])=>{
-        return getProduct.getProduct(fetcher, arg);
+        return getProduct.getProduct(customFetcher || fetcher, arg);
     }, options);
 };
 

package/dist/cjs/hooks/shop/use-products-query.js

@@ -6,7 +6,7 @@ var query = require('../../helpers/query.js');
 var shop = require('../shop.js');
 var useFetchHandle = require('../useFetchHandle.js');
 
-const useProductsQuery = (ids, options, defaultSelectedProductCount)=>{
+const useProductsQuery = (ids, options, params)=>{
     const fetcher = useFetchHandle.useFetchHandle();
     const isSample = shop.useIsSampleProduct();
     const isStorefront = shop.useIsStorefrontProduct();
@@ -14,9 +14,10 @@ const useProductsQuery = (ids, options, defaultSelectedProductCount)=>{
         ids,
         isSample,
         isStorefront,
-        defaultSelectedProductCount
+        defaultSelectedProductCount: params?.defaultSelectedProductCount,
+        allStatus: params?.allStatus
     }) : null, async ([, arg])=>{
-        return getProducts.getProducts(fetcher, arg);
+        return getProducts.getProducts(params?.fetcher || fetcher, arg);
     }, options);
 };
 

package/dist/cjs/hooks/useFormatMoney.js

@@ -2,6 +2,9 @@
 
 var shop = require('./shop.js');
 
+const shopifyPriceRounding = (amount, precision)=>{
+    return parseFloat(`${amount}`).toFixed(Number(precision) + 1).slice(0, -1);
+};
 const useFormatMoney = (amount, withCurrency)=>{
     const { moneyFormat, moneyWithCurrencyFormat } = shop.useMoneyFormat();
     const formatMoney = function(cents, format) {
@@ -32,7 +35,7 @@ const useFormatMoney = (amount, withCurrency)=>{
                 return 0;
             }
             // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
-            number = parseFloat(`${number}`).toFixed(Number(precision) + 1).slice(0, -1);
+            number = shopifyPriceRounding(number, Number(precision));
             const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
             return dollars + cents;
         }
@@ -55,4 +58,5 @@ const useFormatMoney = (amount, withCurrency)=>{
     return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
 
+exports.shopifyPriceRounding = shopifyPriceRounding;
 exports.useFormatMoney = useFormatMoney;

package/dist/cjs/hooks/useInitialSwatchesOptions.js

@@ -8,6 +8,17 @@ var variantPresets = require('../components/src/product/helpers/variant-presets.
 var shop = require('./shop.js');
 var useFetchHandle = require('./useFetchHandle.js');
 var ShopContext = require('../contexts/ShopContext.js');
+require('react');
+require('react/jsx-runtime');
+require('zustand');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('./useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
+var isBrowser = require('../helpers/is-browser.js');
+require('../helpers/convert.js');
 
 let swatchChange = false;
 let colorChange = false;
@@ -37,7 +48,7 @@ const useInitialSwatchesOptions = (options)=>{
     });
     if (!options) return [];
     setDefaultSwatches(swatches, options);
-    if (swatches?.length && (swatchChange || colorChange)) {
+    if (isBrowser.default() && swatches?.length && (swatchChange || colorChange)) {
         window?.parent?.postMessage?.(JSON.stringify({
             type: 'update-swatches',
             swatches

package/dist/cjs/hooks/useProduct.js

@@ -5,6 +5,7 @@ var ProductContext = require('../contexts/ProductContext.js');
 require('react/jsx-runtime');
 require('zustand');
 require('swr');
+var PageContext = require('../contexts/PageContext.js');
 require('@gem-sdk/adapter-shopify');
 require('swr/mutation');
 require('vanilla-lazyload');
@@ -190,6 +191,19 @@ const useCheckAvailableVariantInStock = (optionId, optionValue)=>{
         return false;
     }) : false;
 };
+const useProductOfferDiscount = ()=>{
+    const productOffers = PageContext.usePageStore((s)=>s.productOffers);
+    const currentProduct = useProduct();
+    const currentVariant = useCurrentVariant();
+    const currentOffer = productOffers?.find((item)=>item?.node?.objectBaseID === currentProduct?.baseID)?.node;
+    if (!currentOffer || !currentOffer.isEnabled) return 0;
+    let currentDiscount = currentOffer?.value;
+    if (currentOffer && currentOffer.valueType === 'PERCENTAGE' && currentDiscount) {
+        const price = currentVariant?.price || 0;
+        currentDiscount = currentDiscount * price / 100;
+    }
+    return currentDiscount || 0;
+};
 
 exports.useCheckAvailableVariantInStock = useCheckAvailableVariantInStock;
 exports.useCurrentVariant = useCurrentVariant;
@@ -197,6 +211,7 @@ exports.useCurrentVariantInStock = useCurrentVariantInStock;
 exports.useFeaturedImageGlobal = useFeaturedImageGlobal;
 exports.useIsSyncProduct = useIsSyncProduct;
 exports.useProduct = useProduct;
+exports.useProductOfferDiscount = useProductOfferDiscount;
 exports.useProductProperties = useProductProperties;
 exports.useQuantity = useQuantity;
 exports.useSelectedOption = useSelectedOption;

package/dist/cjs/hooks/useToolbarPostPurchase.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var constant = require('../components/constant.js');
+var ShopContext = require('../contexts/ShopContext.js');
+
+const usePostPurchase = (uid, tag)=>{
+    const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
+    const getElementCountInPage = (tagParam, root)=>{
+        const tagUsed = tagParam || tag;
+        let count = 0;
+        const elements = (root || document).querySelectorAll(`[data-component-tag="${tagUsed}"]`);
+        if (tagUsed === 'PostPurchaseProductOffer') {
+            return elements.length;
+        }
+        let isCountedWrapper = '';
+        elements.forEach((element)=>{
+            const isWrappedByProductOffer = element.closest('[data-component-tag="PostPurchaseProductOffer"]');
+            const productId = isWrappedByProductOffer?.getAttribute('data-uid') || '';
+            const productWrapper = element.closest('[data-component-tag="Product"]');
+            const elementCounted = productWrapper?.querySelectorAll(`[data-component-tag="${tagUsed}"]`).length || 0;
+            const offset = isWrappedByProductOffer ? productId !== isCountedWrapper ? elementCounted : 0 : 1;
+            if (isWrappedByProductOffer) {
+                isCountedWrapper = productId;
+            }
+            count += offset;
+        });
+        return count;
+    };
+    const verifyRequireElement = ()=>{
+        const count = getElementCountInPage();
+        return count <= 1;
+    };
+    const verifyWrapContainsRequireElement = ()=>{
+        const $component = document.querySelector(`[data-uid="${uid}"]`);
+        if (!$component) return false;
+        for (const requiredElementTag of constant.postPurchaseRequiredElements){
+            const countElementInsidePage = getElementCountInPage(requiredElementTag);
+            const countElementInsideWrap = getElementCountInPage(requiredElementTag, $component);
+            if (countElementInsideWrap > 0 && countElementInsidePage - countElementInsideWrap < 1) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const countRequiredElement = ()=>{
+        return constant.postPurchaseRequiredElements.reduce((acc, requiredElementTag)=>{
+            const $component = document.querySelector(`[data-uid="${uid}"]`);
+            if (!$component) return 0;
+            const count = $component.querySelectorAll(`[data-component-tag="${requiredElementTag}"]`).length;
+            return acc + count;
+        }, 0);
+    };
+    const checkDisableDelete = ()=>{
+        if (editingPageType !== 'POST_PURCHASE') return false;
+        let isUnable = false;
+        if (constant.postPurchaseRequiredElements.includes(tag)) {
+            isUnable = verifyRequireElement();
+            if (isUnable) return isUnable;
+        }
+        if (constant.postPurchaseWrapElements.includes(tag) && countRequiredElement() > 0) {
+            return verifyWrapContainsRequireElement();
+        }
+        return false;
+    };
+    const checkDisableDuplicate = ()=>{
+        return editingPageType === 'GP_FUNNEL_PAGE' && tag === 'ProductList';
+    };
+    const getTooltipText = ()=>{
+        if (constant.postPurchaseRequiredElements.includes(tag)) {
+            return {
+                text: 'This element is required <br> and can’t be deleted',
+                width: '175px'
+            };
+        } else {
+            const elmName = tag === 'Section' ? 'section' : 'element';
+            return {
+                text: `This ${elmName} contains required <br> elements and cannot be deleted`,
+                width: '206px'
+            };
+        }
+    };
+    return {
+        checkDisableDelete,
+        getTooltipText,
+        checkDisableDuplicate
+    };
+};
+
+exports.usePostPurchase = usePostPurchase;

package/dist/cjs/index.js

@@ -24,6 +24,10 @@ var publishedThemePages_generated = require('./graphql/queries/published-theme-p
 var products_generated = require('./graphql/queries/products.generated.js');
 var storeProperty_generated = require('./graphql/queries/store-property.generated.js');
 var previewPage_generated = require('./graphql/queries/preview-page.generated.js');
+var LibraryTemplate_generated = require('./graphql-app-api/queries/LibraryTemplate.generated.js');
+var ThemePage_generated = require('./graphql-app-api/queries/ThemePage.generated.js');
+var SaleFunnelDiscounts_generated = require('./graphql-app-api/queries/SaleFunnelDiscounts.generated.js');
+var LibrarySaleFunnelDiscount_generated = require('./graphql-app-api/queries/LibrarySaleFunnelDiscount.generated.js');
 var borders = require('./helpers/borders.js');
 var carousel = require('./helpers/carousel.js');
 var cls = require('./helpers/cls.js');
@@ -91,6 +95,7 @@ var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
 var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
 var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
 var shop$1 = require('./types/shop.js');
+var appAPI = require('./types/appAPI.js');
 var globalStyle = require('./types/global-style.js');
 var animations$1 = require('./types/animations.js');
 var getCollection = require('./helpers/queries/get-collection.js');
@@ -139,6 +144,10 @@ exports.PublishedThemePagesDocument = publishedThemePages_generated.PublishedThe
 exports.ProductsDocument = products_generated.ProductsDocument;
 exports.StorePropertyDocument = storeProperty_generated.StorePropertyDocument;
 exports.PreviewPageDocument = previewPage_generated.PreviewPageDocument;
+exports.LibraryTemplateDocument = LibraryTemplate_generated.LibraryTemplateDocument;
+exports.ThemePageDocument = ThemePage_generated.ThemePageDocument;
+exports.SaleFunnelDiscountsDocument = SaleFunnelDiscounts_generated.SaleFunnelDiscountsDocument;
+exports.LibrarySaleFunnelDocument = LibrarySaleFunnelDiscount_generated.LibrarySaleFunnelDocument;
 exports.composeBorderCss = borders.composeBorderCss;
 exports.getBorderStyle = borders.getBorderStyle;
 exports.handleConvertBorderColor = borders.handleConvertBorderColor;
@@ -186,6 +195,7 @@ exports.getGlobalColorStyle = colors.getGlobalColorStyle;
 exports.getSingleColorVariable = colors.getSingleColorVariable;
 exports.isColor = colors.isColor;
 exports.composeAdvanceStyle = composeAdvanceStyle.composeAdvanceStyle;
+exports.composeAdvanceStyleForPostPurchase = composeAdvanceStyle.composeAdvanceStyleForPostPurchase;
 exports.filterAttrInStyle = composeAdvanceStyle.filterAttrInStyle;
 exports.filterCornerInStyle = composeAdvanceStyle.filterCornerInStyle;
 exports.removeAttrInStyle = composeAdvanceStyle.removeAttrInStyle;
@@ -292,6 +302,7 @@ exports.useCollectionsQuery = useCollectionsQuery.useCollectionsQuery;
 exports.useProductQuery = useProductQuery.useProductQuery;
 exports.useProductsQuery = useProductsQuery.useProductsQuery;
 exports.useCurrentDevice = useCurrentDevice.useCurrentDevice;
+exports.shopifyPriceRounding = useFormatMoney.shopifyPriceRounding;
 exports.useFormatMoney = useFormatMoney.useFormatMoney;
 exports.useLazyVideo = useLazyVideo.useLazyVideo;
 exports.useCartId = useCartId.default;
@@ -312,6 +323,7 @@ exports.useCurrentVariantInStock = useProduct.useCurrentVariantInStock;
 exports.useFeaturedImageGlobal = useProduct.useFeaturedImageGlobal;
 exports.useIsSyncProduct = useProduct.useIsSyncProduct;
 exports.useProduct = useProduct.useProduct;
+exports.useProductOfferDiscount = useProduct.useProductOfferDiscount;
 exports.useProductProperties = useProduct.useProductProperties;
 exports.useQuantity = useProduct.useQuantity;
 exports.useSelectedOption = useProduct.useSelectedOption;
@@ -327,6 +339,7 @@ exports.useSuspenseFetch = useSuspenseFetch.default;
 exports.useSwatchesOptions = useSwatchesOptions.default;
 exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
 exports.ShopType = shop$1;
+exports.AppAPIType = appAPI;
 exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
 exports.OptionSpecialStyle = globalStyle.OptionSpecialStyle;
 Object.defineProperty(exports, 'AnimationDirectionType', {

package/dist/cjs/types/appAPI.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/esm/components/ComponentToolbarPreview.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
+import { memo, useState, useMemo, useCallback, useEffect } from 'react';
 import 'zustand';
 import { useBuilderPreviewStore } from '../contexts/BuilderPreviewContext.js';
 import { useShopStore } from '../contexts/ShopContext.js';
@@ -12,6 +12,7 @@ import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
 import Tooltip from './toolbar/Tooltip.js';
 import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
 import Resize from './resize/Resize.js';
+import { usePostPurchase } from '../hooks/useToolbarPostPurchase.js';
 import '../helpers/convert.js';
 
 const SECTION_LIMIT = 25;
@@ -23,7 +24,7 @@ const isSection = (el)=>{
     const tag = el.getAttribute('data-component-tag');
     return tag === 'Section';
 };
-const ComponentToolbarPreview = ({ ...props })=>{
+const ComponentToolbarPreview = (props)=>{
     const isThemeSection = props.isThemeSection;
     const editingPageType = useShopStore((s)=>s.pageType);
     const getParents = useBuilderPreviewStore((s)=>s.getParents);
@@ -33,12 +34,23 @@ const ComponentToolbarPreview = ({ ...props })=>{
     const [isShowParent, setIsShowParent] = useState(false);
     const [isShowParentRevert, setIsShowParentRevert] = useState(false);
     const [parents, setParents] = useState([]);
+    const [deleteTooltipPosition, setDeleteTooltipPosition] = useState('top');
+    const [isDisableDelete, setIsUnableDelete] = useState(false);
+    const [tooltipText, setTooltipText] = useState({
+        width: '',
+        text: ''
+    });
+    const [isDisableDuplicate, setIsDisableDuplicate] = useState(false);
+    const isSaleFunnelPage = useMemo(()=>editingPageType === 'POST_PURCHASE', [
+        editingPageType
+    ]);
+    const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = usePostPurchase(props.uid, props.tag || '');
     const isOverToolbarPosition = (el, parent)=>{
-        const parentLenght = parents.length;
+        const parentLength = parents.length;
         const rect = el.getBoundingClientRect();
         const rectP = parent.getBoundingClientRect();
         // 36px = toolbar active height + 4 spaces
-        return rect.top - rectP.top < parentLenght * 36;
+        return rect.top - rectP.top < parentLength * 36;
     };
     const findOverflowParent = (element, initEl)=>{
         const thisEl = element;
@@ -52,10 +64,27 @@ const ComponentToolbarPreview = ({ ...props })=>{
             return;
         }
     };
+    const getDeleteTooltipPosition = useCallback(()=>{
+        if (props.tag == 'Section') return 'bottom';
+        const $toolbar = document.querySelector('[data-toolbar-active="true"]');
+        if ($toolbar) {
+            const rect = $toolbar.getBoundingClientRect();
+            if (rect.top < 60) setDeleteTooltipPosition('bottom');
+            else setDeleteTooltipPosition('top');
+        }
+    }, [
+        props.tag
+    ]);
     // Get parents
     const onActiveComponent = useCallback((e)=>{
         const detail = e.detail;
         if (detail?.componentUid == props.uid) {
+            getDeleteTooltipPosition();
+            if (isSaleFunnelPage) {
+                setIsUnableDelete(checkDisableDelete());
+                setTooltipText(getTooltipText());
+                setIsDisableDuplicate(checkDisableDuplicate());
+            }
             const currentParents = getParents(props.uid).filter((parent)=>{
                 if (parent.uid === 'ROOT') return false;
                 if (parent.tag === 'Section' && isThemeSectionEditor) return false;
@@ -69,10 +98,14 @@ const ComponentToolbarPreview = ({ ...props })=>{
             setIsShowParent(false);
         }
     }, [
-        setParents,
-        getParents,
         props.uid,
-        isThemeSectionEditor
+        isSaleFunnelPage,
+        getParents,
+        checkDisableDelete,
+        getTooltipText,
+        checkDisableDuplicate,
+        isThemeSectionEditor,
+        getDeleteTooltipPosition
     ]);
     useEffect(()=>{
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -209,6 +242,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
         }
         return checkRenamedSection ? `Section ${getIndexSection() + 1}` : props?.name;
     };
+    const isEnableCreateThemeSection = ()=>{
+        return editingPageType !== 'STATIC' && editingPageType !== 'POST_PURCHASE';
+    };
+    // if (!isActive) return null;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxs("div", {
@@ -339,7 +376,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             ]
                         }, parent.uid);
                     }),
-                    props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
+                    props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(CreateThemeSection, {
                         ...props
                     }),
                     props.tag == 'Sticky' && /*#__PURE__*/ jsx("div", {
@@ -365,9 +402,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
                         text: "Page has reached Shopify’s 25 section-limit",
                         position: "bottom",
                         "data-toolbar-duplicate": true,
-                        "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
-                        onClick: (e)=>onDuplicate(e),
+                        "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isDisableDuplicate,
+                        onClick: isDisableDuplicate ? undefined : (e)=>onDuplicate(e),
                         "aria-hidden": "true",
+                        className: isDisableDuplicate ? '!gp-cursor-not-allowed' : '',
                         children: /*#__PURE__*/ jsx("svg", {
                             width: "16",
                             height: "16",
@@ -381,9 +419,14 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             })
                         })
                     }),
-                    /*#__PURE__*/ jsx("div", {
+                    /*#__PURE__*/ jsx(Tooltip, {
                         "data-toolbar-delete": true,
-                        onClick: (e)=>onDelete(e),
+                        onClick: (e)=>isDisableDelete ? null : onDelete(e),
+                        enable: isDisableDelete,
+                        "data-toolbar-disable": isDisableDelete,
+                        width: tooltipText.width,
+                        text: tooltipText.text,
+                        position: deleteTooltipPosition,
                         "aria-hidden": "true",
                         children: /*#__PURE__*/ jsx("svg", {
                             width: "16",
@@ -399,8 +442,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                         })
                     })
                 ]
-            }),
-            editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatus, {
+            }, props.uid),
+            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatus, {
                 ...props
             }),
             /*#__PURE__*/ jsx("div", {
@@ -408,7 +451,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                 "data-outline-section": props.tag == 'Section',
                 "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
                 "data-outline-limit": getIndexSection() >= SECTION_LIMIT
-            }),
+            }, 'outline-' + props.uid),
             props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx(Tooltip, {
@@ -459,5 +502,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
         ]
     });
 };
+var ComponentToolbarPreview$1 = /*#__PURE__*/ memo(ComponentToolbarPreview);
 
-export { ComponentToolbarPreview };
+export { ComponentToolbarPreview$1 as default };

package/dist/esm/components/ComponentWrapper.js

@@ -4,9 +4,9 @@ import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { disableWrap } from './constant.js';
 import RenderCustomCode from './RenderCustomCode.js';
 
-const ComponentWrapper = ({ children, ...props })=>{
+const ComponentWrapper = ({ children, pageType, ...props })=>{
     if (props.type === 'section') return null;
-    const style = composeAdvanceStyle(props.advanced, props.tag);
+    const style = composeAdvanceStyle(props.advanced, props.tag, pageType);
     const advanced = props.advanced;
     if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
         return /*#__PURE__*/ jsxs(Fragment, {

package/dist/esm/components/ComponentWrapperPreview.js

@@ -1,10 +1,18 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useEffect, isValidElement } from 'react';
+import { memo, useEffect, isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { disableWrap, excludeApplyStyle } from './constant.js';
 import RenderCustomCode from './RenderCustomCode.js';
-import { ComponentToolbarPreview } from './ComponentToolbarPreview.js';
+import ComponentToolbarPreview from './ComponentToolbarPreview.js';
 import useApplyAnimation from '../hooks/animation/useApplyAnimation.js';
+import 'zustand';
+import 'swr';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import { usePageType } from '../hooks/shop.js';
+import 'vanilla-lazyload';
+import '../hooks/useCartUI.js';
+import '../helpers/convert.js';
 
 const ComponentWrapperPreview = ({ children, ...props })=>{
     useEffect(()=>{
@@ -21,6 +29,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     useApplyAnimation({
         props
     });
+    const pageType = usePageType();
     if (props.type === 'section') {
         return null;
     }
@@ -66,14 +75,21 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     if (!props?.editorConfigs?.toolbar?.hide) {
         customProps['data-toolbar-wrap'] = true;
     }
-    const style = composeAdvanceStyle(props.advanced, props.tag);
+    const isNotDroppable = (tag)=>{
+        return pageType === 'GP_FUNNEL_PAGE' ? [
+            'ProductList',
+            'Header'
+        ].includes(tag) : false;
+    };
+    const style = composeAdvanceStyle(props.advanced, props.tag, pageType);
     const advanced = props.advanced;
     const builderAttrs = {
         ...customProps,
         'data-uid': props.uid,
         'data-component-type': 'component',
         'data-component-tag': props.tag,
-        'data-component-label': props.label
+        'data-component-label': props.label,
+        'data-not-droppable': isNotDroppable(props.tag)
     };
     if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
         return /*#__PURE__*/ jsxs(Fragment, {
@@ -128,5 +144,6 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         ]
     });
 };
+var ComponentWrapperPreview$1 = /*#__PURE__*/ memo(ComponentWrapperPreview);
 
-export { ComponentWrapperPreview as default };
+export { ComponentWrapperPreview$1 as default };

package/dist/esm/components/Render.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useBuilderComponent } from '../contexts/BuilderComponent.js';
 import { useBuilderStore } from '../contexts/BuilderContext.js';
@@ -9,6 +9,13 @@ import RenderSectionMemo from './RenderSection.js';
 const Render = ({ uid, ...passProps })=>{
     const item = useBuilderStore((s)=>s.getItem(uid));
     const Component = useBuilderComponent(item?.tag);
+    const isPostPurchase = useBuilderStore((s)=>s.getIsPostPurchase());
+    const isPreview = useBuilderStore((s)=>s.getIsPreview());
+    const pageType = useMemo(()=>{
+        return isPostPurchase ? 'POST_PURCHASE' : undefined;
+    }, [
+        isPostPurchase
+    ]);
     if (!item) return null;
     if (item?.type === 'section') {
         return /*#__PURE__*/ jsx(RenderSectionMemo, {
@@ -31,10 +38,12 @@ const Render = ({ uid, ...passProps })=>{
                 }),
             children: /*#__PURE__*/ jsx(ComponentWrapper, {
                 ...item,
+                pageType: pageType,
                 children: item?.childrens?.length ? /*#__PURE__*/ jsx(Component, {
                     builderProps: {
                         uid,
-                        builderData: item
+                        builderData: item,
+                        isPreview
                     },
                     styles: item.styles,
                     setting: item.settings,
@@ -45,7 +54,8 @@ const Render = ({ uid, ...passProps })=>{
                 }) : /*#__PURE__*/ jsx(Component, {
                     builderProps: {
                         uid,
-                        builderData: item
+                        builderData: item,
+                        isPreview
                     },
                     styles: item.styles,
                     setting: item.settings,

package/dist/esm/components/Render.liquid.js

@@ -9,10 +9,10 @@ import 'vanilla-lazyload';
 import '../hooks/useCartUI.js';
 import 'react-transition-group';
 import '@gem-sdk/core';
+import { disableWrap, customRenderChildren } from './constant.js';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { baseAssetURL, isLocalEnv } from '../helpers/convert.js';
 import { RenderIf, template } from '../helpers/render.js';
-import { disableWrap, customRenderChildren } from './constant.js';
 
 const componentsRenderWithParentId = [
     'CarouselItem'

package/dist/esm/components/constant.js

@@ -32,6 +32,7 @@ const disableWrap = [
     'Product',
     'ProductImages',
     'ProductImagesV2',
+    'PostPurchaseProductImages',
     'Sticky',
     'Heading'
 ];
@@ -46,5 +47,22 @@ const excludeApplyStyle = [
     'IconListV2',
     'IconList'
 ];
+const postPurchaseRequiredElements = [
+    'PostPurchaseProductOffer',
+    'PostPurchaseProductTitle',
+    'PostPurchaseProductPrice',
+    'PostPurchaseAcceptButton',
+    'PostPurchaseButton',
+    'PostPurchaseCalloutBox',
+    'PostPurchaseProductPriceBreakdown',
+    'PostPurchaseProductImages',
+    'PostPurchaseCalloutText'
+];
+const postPurchaseWrapElements = [
+    'Row',
+    'Section',
+    'PostPurchaseCalloutBox',
+    'PostPurchaseProductOffer'
+];
 
-export { customRenderChildren, disableWrap, excludeApplyStyle };
+export { customRenderChildren, disableWrap, excludeApplyStyle, postPurchaseRequiredElements, postPurchaseWrapElements };