@gem-sdk/core 1.23.0-staging.369 → 1.23.0-staging.384

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,7 +28,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 = ShopContext.useShopStore((s)=>s.pageType);
     const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
@@ -35,12 +38,23 @@ 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 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;
@@ -54,10 +68,27 @@ const ComponentToolbarPreview = ({ ...props })=>{
             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' && isThemeSectionEditor) return false;
@@ -71,10 +102,14 @@ const ComponentToolbarPreview = ({ ...props })=>{
             setIsShowParent(false);
         }
     }, [
-        setParents,
-        getParents,
         props.uid,
-        isThemeSectionEditor
+        isSaleFunnelPage,
+        getParents,
+        checkDisableDelete,
+        getTooltipText,
+        checkDisableDuplicate,
+        isThemeSectionEditor,
+        getDeleteTooltipPosition
     ]);
     react.useEffect(()=>{
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -211,6 +246,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__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -341,7 +380,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                             ]
                         }, parent.uid);
                     }),
-                    props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
+                    props.tag === 'Section' && !props.isThemeSection && isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
                         ...props
                     }),
                     props.tag == 'Sticky' && /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -367,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",
@@ -383,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",
@@ -401,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", {
@@ -410,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, {
@@ -461,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, {

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -9,6 +9,14 @@ 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(()=>{
@@ -25,6 +33,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     useApplyAnimation.default({
         props
     });
+    const pageType = shop.usePageType();
     if (props.type === 'section') {
         return null;
     }
@@ -73,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, {
@@ -97,7 +113,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                     advanced,
                     children: [
                         children.props['children'],
-                        /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
+                        /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.default, {
                             ...props
                         })
                     ]
@@ -127,7 +143,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                         style,
                         advanced
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
+                    /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.default, {
                         ...props
                     })
                 ]
@@ -135,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

@@ -13,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');
 var convert = require('../helpers/convert.js');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
-var constant = require('./constant.js');
 
 const componentsRenderWithParentId = [
     'CarouselItem'
@@ -234,7 +234,6 @@ const appendAnimation = (props, liquid)=>{
         transform: 'unset'
     };
     return render.template`
-  ${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>`)}
   <gp-animation
     gp-data='${JSON.stringify({
         config: animation,
@@ -248,6 +247,7 @@ const appendAnimation = (props, liquid)=>{
         ...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)=>{

package/dist/cjs/components/constant.js

@@ -34,6 +34,7 @@ const disableWrap = [
     'Product',
     'ProductImages',
     'ProductImagesV2',
+    'PostPurchaseProductImages',
     'Sticky',
     'Heading'
 ];
@@ -48,7 +49,26 @@ 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;

package/dist/cjs/components/resize/Spacing.js

@@ -9,6 +9,7 @@ var BuilderPreviewContext = require('../../contexts/BuilderPreviewContext.js');
 require('swr');
 require('@gem-sdk/adapter-shopify');
 require('swr/mutation');
+var shop = require('../../hooks/shop.js');
 require('vanilla-lazyload');
 require('../../hooks/useCartUI.js');
 require('react-transition-group');
@@ -17,6 +18,7 @@ require('../../helpers/convert.js');
 
 function Spacing(props) {
     const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    const pageType = shop.usePageType();
     const $bottomDrag = react.useRef(null);
     const $bottomBg = react.useRef(null);
     const delayMouseMove = react.useRef(null);
@@ -165,7 +167,7 @@ function Spacing(props) {
         updateSpacing
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+        children: props.tag !== 'Section' && pageType !== 'POST_PURCHASE' && /*#__PURE__*/ jsxRuntime.jsx("div", {
             "data-spacing": true,
             "data-spacing-theme-section": isThemeSectionEditor,
             className: "gp-absolute gp-w-full gp-bottom-0",

package/dist/cjs/components/toolbar/Tooltip.js

@@ -4,16 +4,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 
-function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', ...props }) {
+function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', width, ...props }) {
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         ...props,
         "data-toolbar-tooltip-trigger": true,
         children: [
             children,
             enable && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                style: {
+                    width: width,
+                    zIndex: 50
+                },
                 "data-toolbar-tooltip": true,
                 "data-toolbar-tooltip-position": position,
-                children: text
+                dangerouslySetInnerHTML: {
+                    __html: text
+                }
             })
         ]
     });

package/dist/cjs/contexts/BuilderContext.js

@@ -5,15 +5,17 @@ var react = require('react');
 var zustand = require('zustand');
 
 const BuilderContext = /*#__PURE__*/ react.createContext(null);
-const createBuilderProvider = (data)=>zustand.createStore((_, get)=>({
+const createBuilderProvider = (data, isPostPurchase)=>zustand.createStore((_, get)=>({
             state: data,
+            isPostPurchase: isPostPurchase,
             getItem: (id)=>{
                 return get().state[id];
-            }
+            },
+            getIsPostPurchase: ()=>get().isPostPurchase
         }));
-const BuilderProvider = ({ children, state, lazy, priority, ...passProps })=>{
+const BuilderProvider = ({ children, state, isPostPurchase, lazy, priority, ...passProps })=>{
     const Component = lazy ? react.Suspense : react.Fragment;
-    const store = createBuilderProvider(state);
+    const store = createBuilderProvider(state, isPostPurchase);
     return /*#__PURE__*/ jsxRuntime.jsx(Component, {
         children: /*#__PURE__*/ jsxRuntime.jsx(BuilderContext.Provider, {
             ...passProps,

package/dist/cjs/contexts/PageContext.js

@@ -16,6 +16,16 @@ const createPageStoreProvider = (data)=>zustand.createStore((set)=>({
                 set({
                     dynamicCollection: data
                 });
+            },
+            setPostPurchaseProductOffers: (productOffers)=>{
+                set({
+                    productOffers: productOffers
+                });
+            },
+            setSalePageProductId: (id)=>{
+                set({
+                    salePageProductId: id
+                });
             }
         }));
 const PageProvider = ({ children, dynamicProduct, dynamicCollection, ...passProps })=>{

package/dist/cjs/graphql-app-api/queries/LibraryTemplate.generated.js

@@ -0,0 +1,17 @@
+'use strict';
+
+/* eslint-disable */ const LibraryTemplateDocument = `
+    query LibraryTemplate($libraryTemplateId: ID!) {
+  libraryTemplate(id: $libraryTemplateId) {
+    id
+    name
+    sectionPosition
+    sections {
+      id
+      component
+    }
+  }
+}
+    `;
+
+exports.LibraryTemplateDocument = LibraryTemplateDocument;

package/dist/cjs/graphql-app-api/queries/ThemePage.generated.js

@@ -0,0 +1,25 @@
+'use strict';
+
+/* eslint-disable */ const ThemePageDocument = `
+    query ThemePage($themePageId: ID!) {
+  themePage(id: $themePageId) {
+    id
+    name
+    handle
+    isMobile
+    sectionPosition
+    pageSections {
+      cid
+      component
+      id
+    }
+    themeStyle {
+      id
+      data
+      name
+    }
+  }
+}
+    `;
+
+exports.ThemePageDocument = ThemePageDocument;

package/dist/cjs/helpers/compose-advance-style.js

@@ -44,7 +44,34 @@ const getAttrValue = (attr, value, tag)=>{
             return value;
     }
 };
-function composeAdvanceStyle(data, tag) {
+const postPurchasePaddingMapping = {
+    loose: '21px',
+    extraLoose: '38px',
+    tight: '9px',
+    extraTight: '5px',
+    base: '14px'
+};
+const composeAdvanceStyleForPostPurchase = (data, tag)=>{
+    if (!data) return {};
+    const styles = {};
+    Object.keys(data).forEach((attr)=>{
+        const value = data[attr];
+        if (attr === 'blockPadding') {
+            const valueMapped = postPurchasePaddingMapping[value];
+            styles[`--pb`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--pt`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--mb`] = '0px';
+            styles[`--mt`] = '0px';
+        }
+        if (attr === 'inlinePadding') {
+            const valueMapped = postPurchasePaddingMapping[value];
+            styles[`--pl`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--pr`] = getAttrValue(attr, valueMapped, tag);
+        }
+    });
+    return styles;
+};
+function composeAdvanceStyle(data, tag, pageType) {
     if (!data) return {};
     const styles = {
         '--pos': 'relative'
@@ -196,8 +223,24 @@ function composeAdvanceStyle(data, tag) {
                 }));
             }
         }
+        if (attr === 'blockPadding' && pageType === "POST_PURCHASE") {
+            const valueMapped = postPurchasePaddingMapping[value];
+            styles[`--pb`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--pt`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--mb`] = '0px';
+            styles[`--mt`] = '0px';
+        }
+        if (attr === 'inlinePadding' && pageType === "POST_PURCHASE") {
+            const valueMapped = postPurchasePaddingMapping[value];
+            styles[`--pl`] = getAttrValue(attr, valueMapped, tag);
+            styles[`--pr`] = getAttrValue(attr, valueMapped, tag);
+        }
     });
-    return styles;
+    const advancedPostPurchaseStyles = pageType === "POST_PURCHASE" ? composeAdvanceStyleForPostPurchase(data, tag) : {};
+    return {
+        ...styles,
+        ...advancedPostPurchaseStyles
+    };
 }
 const splitStyle = (keys, style = {})=>{
     const fullKeys = keys.map((key)=>makeStyle.makeStyleKey(key)).flat();
@@ -269,6 +312,7 @@ const removePaddingYInStyle = (style)=>{
 };
 
 exports.composeAdvanceStyle = composeAdvanceStyle;
+exports.composeAdvanceStyleForPostPurchase = composeAdvanceStyleForPostPurchase;
 exports.filterAttrInStyle = filterAttrInStyle;
 exports.filterCornerInStyle = filterCornerInStyle;
 exports.removeAttrInStyle = removeAttrInStyle;

package/dist/cjs/helpers/filter-toolbar-preview.js

@@ -7,7 +7,7 @@ var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js'
 
 const filterToolbarPreview = (children, keep = false)=>{
     const arrChild = react.Children.toArray(children);
-    return arrChild.filter((child)=>!keep ? child?.type != ComponentToolbarPreview.ComponentToolbarPreview : child?.type == ComponentToolbarPreview.ComponentToolbarPreview);
+    return arrChild.filter((child)=>!keep ? child?.type != ComponentToolbarPreview.default : child?.type == ComponentToolbarPreview.default);
 };
 
 exports.default = filterToolbarPreview;

package/dist/cjs/helpers/is-empty-children.js

@@ -7,7 +7,7 @@ var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js'
 
 const isEmptyChildren = (children)=>{
     let arrChild = react.Children.toArray(children);
-    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.ComponentToolbarPreview);
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.default);
     return react.Children.count(arrChild) < 1 || !children;
 };
 

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-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,7 +14,8 @@ const useProductsQuery = (ids, options, defaultSelectedProductCount)=>{
         ids,
         isSample,
         isStorefront,
-        defaultSelectedProductCount
+        defaultSelectedProductCount: params?.defaultSelectedProductCount,
+        allStatus: params?.allStatus
     }) : null, async ([, arg])=>{
         return getProducts.getProducts(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;