@gem-sdk/core 1.23.0-staging.43 → 1.23.0-staging.433

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('zustand');
@@ -14,6 +16,7 @@ var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
 var Tooltip = require('./toolbar/Tooltip.js');
 var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
 var Resize = require('./resize/Resize.js');
+var useToolbarPostPurchase = require('../hooks/useToolbarPostPurchase.js');
 require('../helpers/convert.js');
 
 const SECTION_LIMIT = 25;
@@ -25,25 +28,7 @@ const isSection = (el)=>{
     const tag = el.getAttribute('data-component-tag');
     return tag === 'Section';
 };
-const isOverToolbarPosition = (el, parent)=>{
-    const rect = el.getBoundingClientRect();
-    const rectP = parent.getBoundingClientRect();
-    // 32px = toolbar active height
-    return rect.top - rectP.top < 32 + 1;
-};
-const findOverflowParent = (element, initEl)=>{
-    const thisEl = element;
-    const origEl = initEl || thisEl;
-    if (!thisEl) return;
-    if (isSection(thisEl)) return;
-    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
-    if (thisEl.parentElement) {
-        return findOverflowParent(thisEl.parentElement, origEl);
-    } else {
-        return;
-    }
-};
-const ComponentToolbarPreview = ({ ...props })=>{
+const ComponentToolbarPreview = (props)=>{
     const isThemeSection = props.isThemeSection;
     const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
     const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
@@ -53,13 +38,60 @@ const ComponentToolbarPreview = ({ ...props })=>{
     const [isShowParent, setIsShowParent] = react.useState(false);
     const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
     const [parents, setParents] = react.useState([]);
+    const [deleteTooltipPosition, setDeleteTooltipPosition] = react.useState('top');
+    const [isDisableDelete, setIsUnableDelete] = react.useState(false);
+    const [tooltipText, setTooltipText] = react.useState({
+        width: '',
+        text: ''
+    });
+    const [isDisableDuplicate, setIsDisableDuplicate] = react.useState(false);
+    const isSaleFunnelPage = react.useMemo(()=>editingPageType === 'POST_PURCHASE', [
+        editingPageType
+    ]);
+    const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = useToolbarPostPurchase.usePostPurchase(props.uid, props.tag || '');
+    const isOverToolbarPosition = (el, parent)=>{
+        const parentLength = parents.length;
+        const rect = el.getBoundingClientRect();
+        const rectP = parent.getBoundingClientRect();
+        // 36px = toolbar active height + 4 spaces
+        return rect.top - rectP.top < parentLength * 36;
+    };
+    const findOverflowParent = (element, initEl)=>{
+        const thisEl = element;
+        const origEl = initEl || thisEl;
+        if (!thisEl) return;
+        if (isSection(thisEl)) return;
+        if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+        if (thisEl.parentElement) {
+            return findOverflowParent(thisEl.parentElement, origEl);
+        } else {
+            return;
+        }
+    };
+    const getDeleteTooltipPosition = react.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 = react.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') return false;
+                if (parent.tag === 'Section' && isThemeSectionEditor) return false;
                 if (parent.editorConfigs?.toolbar?.hide) return false;
                 if (parent.editorConfigs?.component?.noSetting) return false;
                 return true;
@@ -70,9 +102,14 @@ const ComponentToolbarPreview = ({ ...props })=>{
             setIsShowParent(false);
         }
     }, [
-        setParents,
+        props.uid,
+        isSaleFunnelPage,
         getParents,
-        props.uid
+        checkDisableDelete,
+        getTooltipText,
+        checkDisableDuplicate,
+        isThemeSectionEditor,
+        getDeleteTooltipPosition
     ]);
     react.useEffect(()=>{
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -115,7 +152,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                 setIsShowParentRevert(true);
             } else {
                 const rect = $toolbar.getBoundingClientRect();
-                if (rect.top < parents.length * 24) {
+                if (rect.top < parents.length * 36) {
                     setIsShowParentRevert(true);
                 } else {
                     setIsShowParentRevert(false);
@@ -160,6 +197,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
         window.dispatchEvent(event);
         return false;
     };
+    const toolbarName = ()=>{
+        return props.customLabel || props.label;
+    };
     const onZoomOut = (e)=>{
         e.preventDefault();
         e.stopPropagation();
@@ -199,6 +239,17 @@ const ComponentToolbarPreview = ({ ...props })=>{
         }
         return false;
     };
+    const getSectionName = ()=>{
+        const checkRenamedSection = props.name && props.name === `Section ${props.uid}`;
+        if (getSectionNumber() >= SECTION_LIMIT - 5) {
+            return `${checkRenamedSection ? 'Section' : props?.name} ${getIndexSection() + 1}/${SECTION_LIMIT}`;
+        }
+        return checkRenamedSection ? `Section ${getIndexSection() + 1}` : props?.name;
+    };
+    const isEnableCreateThemeSection = ()=>{
+        return editingPageType !== 'STATIC' && editingPageType !== 'POST_PURCHASE';
+    };
+    // if (!isActive) return null;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -249,10 +300,10 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             }),
                             props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-name": true,
-                                children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
+                                children: getSectionName()
                             }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-name": true,
-                                children: props.customLabel || props.label
+                                children: toolbarName()
                             }),
                             props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-icon-parent": true,
@@ -270,12 +321,21 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             })
                         ]
                     }),
-                    isShowParent && parents.map((parent, index)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    isShowParent && parents.map((parent, index)=>{
+                        // Update count columns of Row
+                        const parentLength = parent?.childrens?.length ?? 0;
+                        let parent_label = parent.label;
+                        if (parent.label === 'Row') {
+                            parent_label = parentLength <= 1 ? parent.label + ' ' + parentLength + ' col' : parent.label + ' ' + parentLength + ' cols';
+                        }
+                        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                             "data-toolbar-parent": true,
                             "data-parent-uid": parent.uid,
                             "data-toolbar-theme-section": isThemeSectionEditor,
+                            "data-toolbar-parent-revert": isShowParentRevert,
                             style: {
-                                top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
+                                top: !isShowParentRevert ? `${-36 * (index + 1)}px` // 32 height + 4 spacing
+                                 : `${36 * (index + 1)}px`
                             },
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -315,11 +375,12 @@ const ComponentToolbarPreview = ({ ...props })=>{
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx("div", {
                                     "data-toolbar-name": true,
-                                    children: parent.label
+                                    children: parent_label
                                 })
                             ]
-                        }, parent.uid)),
-                    props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
+                        }, parent.uid);
+                    }),
+                    props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
                         ...props
                     }),
                     props.tag == 'Sticky' && /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -345,9 +406,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__*/ jsxRuntime.jsx("svg", {
                             width: "16",
                             height: "16",
@@ -361,9 +423,14 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             })
                         })
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
                         "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__*/ jsxRuntime.jsx("svg", {
                             width: "16",
@@ -379,8 +446,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                         })
                     })
                 ]
-            }),
-            editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatus, {
+            }, props.uid),
+            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatus, {
                 ...props
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -388,7 +455,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__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
@@ -406,8 +473,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             viewBox: "0 0 16 16",
                             fill: "none",
                             children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
-                                fill: "currentColor"
+                                d: "M8.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
+                                fill: "#212121"
                             })
                         })
                     }),
@@ -426,8 +493,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             viewBox: "0 0 16 16",
                             fill: "none",
                             children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
-                                fill: "currentColor"
+                                d: "M8.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
+                                fill: "#212121"
                             })
                         })
                     })
@@ -439,5 +506,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
         ]
     });
 };
+var ComponentToolbarPreview$1 = /*#__PURE__*/ react.memo(ComponentToolbarPreview);
 
-exports.ComponentToolbarPreview = ComponentToolbarPreview;
+exports.default = ComponentToolbarPreview$1;

package/dist/cjs/components/ComponentWrapper.js

@@ -8,9 +8,9 @@ var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var constant = require('./constant.js');
 var RenderCustomCode = require('./RenderCustomCode.js');
 
-const ComponentWrapper = ({ children, ...props })=>{
+const ComponentWrapper = ({ children, pageType, ...props })=>{
     if (props.type === 'section') return null;
-    const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
+    const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag, pageType);
     const advanced = props.advanced;
     if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
         return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -20,6 +20,7 @@ const ComponentWrapper = ({ children, ...props })=>{
                     advanced: advanced
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                    className: advanced?.cssClass,
                     ...children.props,
                     style,
                     advanced
@@ -35,7 +36,7 @@ const ComponentWrapper = ({ children, ...props })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: style,
-                className: `${props.uid}`,
+                className: `${props.uid} ${advanced?.cssClass}`,
                 children: children
             })
         ]

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -8,6 +8,15 @@ var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var constant = require('./constant.js');
 var RenderCustomCode = require('./RenderCustomCode.js');
 var ComponentToolbarPreview = require('./ComponentToolbarPreview.js');
+var useApplyAnimation = require('../hooks/animation/useApplyAnimation.js');
+require('zustand');
+require('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+var shop = require('../hooks/shop.js');
+require('vanilla-lazyload');
+require('../hooks/useCartUI.js');
+require('../helpers/convert.js');
 
 const ComponentWrapperPreview = ({ children, ...props })=>{
     react.useEffect(()=>{
@@ -21,6 +30,10 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     }, [
         props.uid
     ]);
+    useApplyAnimation.default({
+        props
+    });
+    const pageType = shop.usePageType();
     if (props.type === 'section') {
         return null;
     }
@@ -34,6 +47,9 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         if (editorConfigs.placeholder?.notAppendBeforeAfter) {
             customProps['data-placeholder-not-append-before-after'] = true;
         }
+        if (editorConfigs.placeholder?.notAppendLeftRight) {
+            customProps['data-placeholder-not-append-left-right'] = true;
+        }
         if (editorConfigs.toolbar?.parent) {
             customProps['data-toolbar-parent'] = true;
         }
@@ -66,14 +82,21 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     if (!props?.editorConfigs?.toolbar?.hide) {
         customProps['data-toolbar-wrap'] = true;
     }
-    const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
+    const isNotDroppable = (tag)=>{
+        return pageType === 'GP_FUNNEL_PAGE' ? [
+            'ProductList',
+            'Header'
+        ].includes(tag) : false;
+    };
+    const style = composeAdvanceStyle.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 (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
         return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -90,7 +113,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                     advanced,
                     children: [
                         children.props['children'],
-                        /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
+                        /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.default, {
                             ...props
                         })
                     ]
@@ -106,12 +129,21 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 advanced: advanced
             }),
             /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                style: style,
+                style: !constant.excludeApplyStyle.includes(props.tag) ? style : {
+                    '--mb': style?.['--mb'],
+                    '--mb-tablet': style?.['--mb-tablet'],
+                    '--mb-mobile': style?.['--mb-mobile']
+                },
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
                 children: [
-                    children,
-                    /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
+                    !constant.excludeApplyStyle.includes(props.tag) && children,
+                    /*#__PURE__*/ react.isValidElement(children) && constant.excludeApplyStyle.includes(props.tag) && /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                        ...children.props,
+                        style,
+                        advanced
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.default, {
                         ...props
                     })
                 ]
@@ -119,5 +151,6 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         ]
     });
 };
+var ComponentWrapperPreview$1 = /*#__PURE__*/ react.memo(ComponentWrapperPreview);
 
-exports.default = ComponentWrapperPreview;
+exports.default = ComponentWrapperPreview$1;

package/dist/cjs/components/Render.js

@@ -13,6 +13,12 @@ var RenderSection = require('./RenderSection.js');
 const Render = ({ uid, ...passProps })=>{
     const item = BuilderContext.useBuilderStore((s)=>s.getItem(uid));
     const Component = BuilderComponent.useBuilderComponent(item?.tag);
+    const isPostPurchase = BuilderContext.useBuilderStore((s)=>s.getIsPostPurchase());
+    const pageType = react.useMemo(()=>{
+        return isPostPurchase ? 'POST_PURCHASE' : undefined;
+    }, [
+        isPostPurchase
+    ]);
     if (!item) return null;
     if (item?.type === 'section') {
         return /*#__PURE__*/ jsxRuntime.jsx(RenderSection.default, {
@@ -35,6 +41,7 @@ const Render = ({ uid, ...passProps })=>{
                 }),
             children: /*#__PURE__*/ jsxRuntime.jsx(ComponentWrapper.default, {
                 ...item,
+                pageType: pageType,
                 children: item?.childrens?.length ? /*#__PURE__*/ jsxRuntime.jsx(Component, {
                     builderProps: {
                         uid,

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var makeStyle = require('../helpers/make-style.js');
 require('react');
 require('react/jsx-runtime');
 require('zustand');
@@ -12,10 +13,10 @@ require('vanilla-lazyload');
 require('../hooks/useCartUI.js');
 require('react-transition-group');
 require('@gem-sdk/core');
+var constant = require('./constant.js');
 var render = require('../helpers/render.js');
-require('../helpers/convert.js');
+var convert = require('../helpers/convert.js');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
-var constant = require('./constant.js');
 
 const componentsRenderWithParentId = [
     'CarouselItem'
@@ -24,6 +25,13 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
+const componentIconList = [
+    'IconListV2',
+    'IconList'
+];
+const componentUsingAdvanced = [
+    'IconList'
+];
 const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
@@ -104,7 +112,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                 });
             });
         } else {
-            liquid = render.template`<div style="${style}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
+            liquid = render.template`<div style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
       ${render.RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
@@ -114,6 +122,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     styles: item.styles,
                     setting: item.settings,
                     advanced: {
+                        ...componentUsingAdvanced.includes(item.tag) ? item?.advanced : {},
                         cssClass: item?.advanced?.cssClass
                     },
                     pageContext,
@@ -153,6 +162,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     },
                     pageContext,
                     isText: componentTexts.includes(item.tag) ? true : null,
+                    style: componentIconList.includes(item.tag) ? style : null,
                     ...passProps
                 });
             })}
@@ -161,6 +171,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
         const { cssCode, jsCode } = RenderCustomCode(item);
         if (cssCode) liquid += cssCode;
         if (jsCode) liquid += jsCode;
+        liquid = appendAnimation(item, liquid);
         return {
             liquid,
             extraFiles: customProps.extraFiles
@@ -190,13 +201,62 @@ const RenderCustomCode = (item)=>{
         jsCode
     };
 };
+const appendAnimation = (props, liquid)=>{
+    const { advanced, tag } = props;
+    const { animation, op: opacity } = advanced ?? {};
+    const getAnimationType = (settings, type)=>{
+        return settings?.triggerConfig?.[type]?.animation ?? 'none';
+    };
+    const getSettingsByDevice = (device)=>{
+        if (device === 'desktop') return animation?.desktop;
+        else if (device === 'tablet') return animation?.tablet ?? animation?.desktop;
+        else if (device === 'mobile') return animation?.mobile ?? animation?.tablet ?? animation?.desktop;
+        return animation?.desktop;
+    };
+    const appearDesktop = getAnimationType(getSettingsByDevice('desktop'), 'appear');
+    const hoverDesktop = getAnimationType(getSettingsByDevice('desktop'), 'hover');
+    const appearTablet = getAnimationType(getSettingsByDevice('tablet'), 'appear');
+    const appearMobile = getAnimationType(getSettingsByDevice('mobile'), 'appear');
+    const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
+    if (!enableAnimation) return liquid;
+    const getInitOpacity = (device)=>+!(getSettingsByDevice(device)?.enabled && ![
+            'shake',
+            'none'
+        ].includes(getAnimationType(getSettingsByDevice(device), 'appear')));
+    const opacityObject = {
+        desktop: getInitOpacity('desktop'),
+        tablet: getInitOpacity('tablet'),
+        mobile: getInitOpacity('mobile')
+    };
+    const inheritParentStyle = {
+        all: tag === 'Section' ? '' : 'inherit',
+        position: 'static',
+        transform: 'unset'
+    };
+    return render.template`
+  <gp-animation
+    gp-data='${JSON.stringify({
+        config: animation,
+        tag,
+        opacity
+    })}'
+    style="${{
+        ...inheritParentStyle
+    }}"
+  >
+    <div style="${{
+        ...makeStyle.makeStyleResponsive('op', opacityObject)
+    }}">${liquid}</div>
+  </gp-animation>
+  ${render.RenderIf(convert.isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${convert.baseAssetURL}/assets-v2/gp-animation.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `;
+};
 const RenderChildren = (props)=>{
     const data = Render(props);
     // Append to prop parent
     for(const key in data.extraFiles){
         if (Object.prototype.hasOwnProperty.call(data.extraFiles, key)) {
-            const value = data.extraFiles[key];
-            props.customProps.extraFiles[key] = value;
+            props.customProps.extraFiles[key] = data.extraFiles[key];
         }
     }
     // Fix limit 256kb
@@ -205,7 +265,7 @@ const RenderChildren = (props)=>{
     if (Math.ceil(size / 1024) >= 180) {
         const fileName = `gp-section-snippet-${props.uid}`;
         props.customProps.extraFiles[fileName] = data.liquid;
-        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
+        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`;
     }
     return data.liquid;
 };
@@ -222,7 +282,7 @@ const WrapRenderChildren = ({ uid, customProps }, codes)=>{
                 if (Math.ceil(size / 1024) >= 180) {
                     const fileName = `gp-section-snippet-${uid + i}`;
                     customProps.extraFiles[fileName] = code;
-                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant  %}`;
+                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`;
                 } else {
                     liquid += code;
                 }

package/dist/cjs/components/constant.js

@@ -20,7 +20,6 @@ const disableWrap = [
     'Header',
     'HeroBanner',
     'Icon',
-    'IconList',
     'HTMLCode',
     'IconListHoz',
     'IconListItem',
@@ -35,7 +34,9 @@ const disableWrap = [
     'Product',
     'ProductImages',
     'ProductImagesV2',
-    'Sticky'
+    'PostPurchaseProductImages',
+    'Sticky',
+    'Heading'
 ];
 const customRenderChildren = [
     'Accordion',
@@ -44,6 +45,30 @@ const customRenderChildren = [
     'IconList',
     'Tabs'
 ];
+const excludeApplyStyle = [
+    'IconListV2',
+    'IconList'
+];
+const postPurchaseRequiredElements = [
+    'PostPurchaseProductOffer',
+    'PostPurchaseProductTitle',
+    'PostPurchaseProductPrice',
+    'PostPurchaseAcceptButton',
+    'PostPurchaseButton',
+    'PostPurchaseCalloutBox',
+    'PostPurchaseProductPriceBreakdown',
+    'PostPurchaseProductImages',
+    'PostPurchaseCalloutText'
+];
+const postPurchaseWrapElements = [
+    'Row',
+    'Section',
+    'PostPurchaseCalloutBox',
+    'PostPurchaseProductOffer'
+];
 
 exports.customRenderChildren = customRenderChildren;
 exports.disableWrap = disableWrap;
+exports.excludeApplyStyle = excludeApplyStyle;
+exports.postPurchaseRequiredElements = postPurchaseRequiredElements;
+exports.postPurchaseWrapElements = postPurchaseWrapElements;