npm - @gem-sdk/core - Versions diffs - 1.12.0-next.10 → 1.12.0-next.12 - Mend

@gem-sdk/core 1.12.0-next.10 → 1.12.0-next.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/cjs/components/Render.liquid.js +65 -17
package/dist/cjs/helpers/render.js +4 -0
package/dist/cjs/hooks/shop.js +12 -0
package/dist/cjs/hooks/useFormatMoney.js +54 -14
package/dist/cjs/hooks/useMoney.js +60 -207
package/dist/cjs/index.js +5 -2
package/dist/esm/components/Render.liquid.js +65 -18
package/dist/esm/helpers/render.js +4 -1
package/dist/esm/hooks/shop.js +12 -1
package/dist/esm/hooks/useFormatMoney.js +55 -13
package/dist/esm/hooks/useMoney.js +60 -207
package/dist/esm/index.js +4 -4
package/dist/types/index.d.ts +61 -12
package/package.json +1 -1

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

@@ -16,20 +16,35 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
-const Render = ({ uid , builder , components , parentId , ...passProps })=>{
+const Render = ({ uid , builder , components , parentId , extraFiles ={} , ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
         console.log('Miss component: ', item);
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
+    }
+    if (!item) {
+        return {
+            liquid: '',
+            extraFiles
+        };
     }
-    if (!item) return null;
     if (item?.type === 'section') {
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
     } else {
+        const customProps = {
+            extraFiles: {}
+        };
         const style = composeAdvanceStyle.composeAdvanceStyle(item.advanced, item.tag);
+        let liquid = '';
         if (constant.disableWrap.includes(item.tag)) {
-            return render.RenderIf(item?.childrens?.length, ()=>{
+            liquid = render.RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
                         uid,
@@ -46,17 +61,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                             ...builder[id],
                             uid: id,
                             builder,
-                            components
+                            components,
+                            customProps
                         };
                     }),
-                    children: item.childrens.map((id)=>Render({
+                    children: item.childrens.map((id)=>RenderChildren({
                             uid: id,
                             builder,
                             components,
-                            parentId: uid
+                            customProps
                         })).join('')
                 });
-            }, ()=>Component({
+            }, ()=>{
+                return Component({
                     builderProps: {
                         uid,
                         builderData: item
@@ -68,10 +85,12 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                     isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     ...passProps
-                }));
+                });
+            });
         }
-        return render.template`<div style="${style}" class="${item.uid}">
-    ${render.RenderIf(item?.childrens?.length, ()=>Component({
+        liquid = render.template`<div style="${style}" class="${item.uid}">
+    ${render.RenderIf(item?.childrens?.length, ()=>{
+            return Component({
                 builderProps: {
                     uid,
                     builderData: item
@@ -84,15 +103,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                         ...builder[id],
                         uid: id,
                         builder,
-                        components
+                        components,
+                        customProps
                     };
                 }),
-                children: item.childrens.map((id)=>Render({
+                children: item.childrens.map((id)=>RenderChildren({
                         uid: id,
                         builder,
-                        components
+                        components,
+                        customProps
                     })).join('')
-            }), ()=>Component({
+            });
+        }, ()=>{
+            return Component({
                 builderProps: {
                     uid,
                     builderData: item
@@ -101,9 +124,34 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                 setting: item.settings,
                 isText: componentTexts.includes(item.tag) ? true : null,
                 ...passProps
-            }))}
+            });
+        })}
     </div>`;
+        return {
+            liquid,
+            extraFiles: customProps.extraFiles
+        };
+    }
+};
+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;
+        }
+    }
+    // Fix limit 256kb
+    const textEncoder = new TextEncoder();
+    const size = data?.liquid ? textEncoder.encode(data.liquid).length : 0;
+    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  %}`;
     }
+    return data.liquid;
 };
+exports.RenderChildren = RenderChildren;
 exports.default = Render;

package/dist/cjs/helpers/render.js CHANGED Viewed

@@ -39,6 +39,9 @@ const styles = (strings, ...keys)=>{
     }
     return styleArr.join(';');
 };
+const dataStringify = (obj)=>{
+    return JSON.stringify(obj).replace(/\\"/g, '"');
+};
 const template = (strings, ...keys)=>{
     let str = '';
     strings.forEach((item, index)=>{
@@ -59,6 +62,7 @@ const template = (strings, ...keys)=>{
 };
 exports.RenderIf = RenderIf;
+exports.dataStringify = dataStringify;
 exports.props = props;
 exports.styles = styles;
 exports.template = template;

package/dist/cjs/hooks/shop.js CHANGED Viewed

@@ -26,6 +26,17 @@ const useCurrency = ()=>{
         changeCurrency
     ]);
 };
+const useMoneyFormat = ()=>{
+    const moneyFormat = ShopContext.useShopStore((state)=>state.moneyFormat);
+    const moneyWithCurrencyFormat = ShopContext.useShopStore((state)=>state.moneyWithCurrencyFormat);
+    return react.useMemo(()=>({
+            moneyFormat,
+            moneyWithCurrencyFormat
+        }), [
+        moneyFormat,
+        moneyWithCurrencyFormat
+    ]);
+};
 const useSwatches = ()=>{
     const swatches = ShopContext.useShopStore((state)=>state.swatches);
     const changeSwatches = ShopContext.useShopStore((state)=>state.changeSwatches);
@@ -108,6 +119,7 @@ exports.useIsStorefrontProduct = useIsStorefrontProduct;
 exports.useLocale = useLocale;
 exports.useMatchMutate = useMatchMutate;
 exports.useMobileOnly = useMobileOnly;
+exports.useMoneyFormat = useMoneyFormat;
 exports.usePageType = usePageType;
 exports.usePluginEnable = usePluginEnable;
 exports.useStoreFront = useStoreFront;

package/dist/cjs/hooks/useFormatMoney.js CHANGED Viewed

@@ -1,21 +1,61 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-var react = require('react');
 var shop = require('./shop.js');
-const useFormatMoney = ()=>{
-    const { locale  } = shop.useLocale();
-    const formatMoney = react.useCallback((value, options)=>new Intl.NumberFormat(locale, {
-            style: 'currency',
-            ...options
-        }).format(value), [
-        locale
-    ]);
-    return {
-        formatMoney
+const useFormatMoney = (amount, withCurrency)=>{
+    const { moneyFormat , moneyWithCurrencyFormat  } = shop.useMoneyFormat();
+    const formatMoney = function(cents, format) {
+        let value = '';
+        const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+        const formatString = format || '${{amount}}';
+        if (typeof cents == 'string') {
+            cents = cents.replace('.', '');
+        }
+        /**
+     * check default
+     * @param opt opt
+     * @param def def
+     * @returns any
+     */ function defaultOption(opt, def) {
+            return typeof opt == 'undefined' ? def : opt;
+        }
+        /**
+     * formatWithDelimiters
+     * @param number number
+     * @param precision precision
+     * @param thousands thousands
+     * @param decimal decimal
+     * @returns any
+     */ // eslint-disable-next-line max-params
+        function formatWithDelimiters(number, precision, thousands, decimal) {
+            precision = defaultOption(precision, 2);
+            thousands = defaultOption(thousands, ',');
+            decimal = defaultOption(decimal, '.');
+            if (isNaN(number) || number == null) {
+                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 = (number / 100.0).toFixed(Number(precision) + 1).slice(0, -1);
+            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;
+        }
+        switch(formatString.match(placeholderRegex)[1]){
+            case 'amount':
+                value = formatWithDelimiters(cents, 2);
+                break;
+            case 'amount_no_decimals':
+                value = formatWithDelimiters(cents, 0);
+                break;
+            case 'amount_with_comma_separator':
+                value = formatWithDelimiters(cents, 2, '.', ',');
+                break;
+            case 'amount_no_decimals_with_comma_separator':
+                value = formatWithDelimiters(cents, 0, '.', ',');
+                break;
+        }
+        return formatString.replace(placeholderRegex, value);
     };
+    return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
-exports.default = useFormatMoney;
+exports.useFormatMoney = useFormatMoney;

package/dist/cjs/hooks/useMoney.js CHANGED Viewed

@@ -5,182 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var shop = require('./shop.js');
-const NARROW_SYMBOL_MAP = {
-    AED: 'د.إ',
-    AFN: '؋',
-    ALL: 'L',
-    AMD: 'դր.',
-    ANG: 'ƒ',
-    AOA: 'Kz',
-    ARS: '$',
-    AUD: '$',
-    AWG: 'ƒ',
-    AZN: '₼',
-    BAM: 'КМ',
-    BBD: '$',
-    BDT: '৳',
-    BGN: 'лв.',
-    BHD: 'ب.د',
-    BIF: 'Fr',
-    BMD: '$',
-    BND: '$',
-    BOB: 'Bs.',
-    BRL: 'R$',
-    BSD: '$',
-    BTN: 'Nu.',
-    BWP: 'P',
-    BYN: 'Br',
-    BYR: 'Br',
-    BZD: '$',
-    CAD: '$',
-    CDF: 'Fr',
-    CHF: 'CHF',
-    CLF: 'UF',
-    CLP: '$',
-    CNY: '¥',
-    COP: '$',
-    CRC: '₡',
-    CUC: '$',
-    CUP: '$',
-    CVE: '$',
-    CZK: 'Kč',
-    DJF: 'Fdj',
-    DKK: 'kr.',
-    DOP: '$',
-    DZD: 'د.ج',
-    EGP: 'ج.م',
-    ERN: 'Nfk',
-    ETB: 'Br',
-    EUR: '€',
-    FJD: '$',
-    FKP: '£',
-    GBP: '£',
-    GEL: 'ლ',
-    GHS: '₵',
-    GIP: '£',
-    GMD: 'D',
-    GNF: 'Fr',
-    GTQ: 'Q',
-    GYD: '$',
-    HKD: '$',
-    HNL: 'L',
-    HRK: 'kn',
-    HTG: 'G',
-    HUF: 'Ft',
-    IDR: 'Rp',
-    ILS: '₪',
-    INR: '₹',
-    IQD: 'ع.د',
-    IRR: '﷼',
-    ISK: 'kr',
-    JMD: '$',
-    JOD: 'د.ا',
-    JPY: '¥',
-    KES: 'KSh',
-    KGS: 'som',
-    KHR: '៛',
-    KMF: 'Fr',
-    KPW: '₩',
-    KRW: '₩',
-    KWD: 'د.ك',
-    KYD: '$',
-    KZT: '〒',
-    LAK: '₭',
-    LBP: 'ل.ل',
-    LKR: '₨',
-    LRD: '$',
-    LSL: 'L',
-    LTL: 'Lt',
-    LVL: 'Ls',
-    LYD: 'ل.د',
-    MAD: 'د.م.',
-    MDL: 'L',
-    MGA: 'Ar',
-    MKD: 'ден',
-    MMK: 'K',
-    MNT: '₮',
-    MOP: 'P',
-    MRU: 'UM',
-    MUR: '₨',
-    MVR: 'MVR',
-    MWK: 'MK',
-    MXN: '$',
-    MYR: 'RM',
-    MZN: 'MTn',
-    NAD: '$',
-    NGN: '₦',
-    NIO: 'C$',
-    NOK: 'kr',
-    NPR: '₨',
-    NZD: '$',
-    OMR: 'ر.ع.',
-    PAB: 'B/.',
-    PEN: 'S/.',
-    PGK: 'K',
-    PHP: '₱',
-    PKR: '₨',
-    PLN: 'zł',
-    PYG: '₲',
-    QAR: 'ر.ق',
-    RON: 'Lei',
-    RSD: 'РСД',
-    RUB: '₽',
-    RWF: 'FRw',
-    SAR: 'ر.س',
-    SBD: '$',
-    SCR: '₨',
-    SDG: '£',
-    SEK: 'kr',
-    SGD: '$',
-    SHP: '£',
-    SKK: 'Sk',
-    SLL: 'Le',
-    SOS: 'Sh',
-    SRD: '$',
-    SSP: '£',
-    STN: 'Db',
-    SVC: '₡',
-    SYP: '£S',
-    SZL: 'E',
-    THB: '฿',
-    TJS: 'ЅМ',
-    TMT: 'T',
-    TND: 'د.ت',
-    TOP: 'T$',
-    TRY: '₺',
-    TTD: '$',
-    TWD: '$',
-    TZS: 'Sh',
-    UAH: '₴',
-    UGX: 'USh',
-    USD: '$',
-    UYU: '$',
-    UZS: '',
-    VED: 'Bs.D.',
-    VES: 'Bs.S.',
-    VND: '₫',
-    VUV: 'Vt',
-    WST: 'T',
-    XAF: 'Fr',
-    XAG: 'oz t',
-    XAU: 'oz t',
-    XBA: '',
-    XBB: '',
-    XBC: '',
-    XBD: '',
-    XCD: '$',
-    XDR: 'SDR',
-    XOF: 'Fr',
-    XPD: 'oz t',
-    XPF: 'Fr',
-    XPT: 'oz t',
-    xts: '',
-    YER: '﷼',
-    ZAR: 'R',
-    ZMK: 'ZK',
-    ZMW: 'ZK'
-};
-const useMoney = (money)=>{
+const useMoney = (amount)=>{
     const { locale  } = shop.useLocale();
     const { currency  } = shop.useCurrency();
     const options = react.useMemo(()=>({
@@ -189,43 +14,71 @@ const useMoney = (money)=>{
         }), [
         currency
     ]);
-    const value = react.useMemo(()=>new Intl.NumberFormat(locale, options).format(money), [
-        locale,
-        options,
-        money
-    ]);
-    const baseParts = new Intl.NumberFormat(locale, options).formatToParts(money);
-    const nameParts = new Intl.NumberFormat(locale, {
+    const defaultFormatter = useLazyFormatter(locale, options);
+    const nameFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'name'
-    }).formatToParts(money);
-    const narrowParts = new Intl.NumberFormat(locale, {
+    });
+    const narrowSymbolFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'narrowSymbol'
-    }).formatToParts(money);
-    const moneyValue = react.useMemo(()=>({
-            currencyCode: currency,
-            currencyName: nameParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "US dollars"
-            currency,
-            currencyNarrowSymbol: narrowParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "$"
-            (currency ? NARROW_SYMBOL_MAP[currency] : '') ?? '',
-            parts: baseParts,
-            localizedString: value,
-            amount: baseParts.filter((part)=>[
-                    'decimal',
-                    'fraction',
-                    'group',
-                    'integer',
-                    'literal'
-                ].includes(part.type)).map((part)=>part.value).join('')
+    });
+    const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
+        ...options,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+    });
+    const withoutCurrencyFormatter = useLazyFormatter(locale);
+    const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+    });
+    const isPartCurrency = (part)=>part.type === 'currency';
+    // By wrapping these properties in functions, we only
+    // create formatters if they are going to be used.
+    const lazyFormatters = react.useMemo(()=>({
+            currencyCode: ()=>currency,
+            localizedString: ()=>defaultFormatter().format(amount),
+            parts: ()=>defaultFormatter().formatToParts(amount),
+            withoutTrailingZeros: ()=>amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
+            withoutTrailingZerosAndCurrency: ()=>amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
+            currencyName: ()=>nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
+            currencySymbol: ()=>defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
+            currencyNarrowSymbol: ()=>narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? '',
+            amount: ()=>defaultFormatter().formatToParts(amount).filter((part)=>[
+                        'decimal',
+                        'fraction',
+                        'group',
+                        'integer',
+                        'literal'
+                    ].includes(part.type)).map((part)=>part.value).join('')
         }), [
-        baseParts,
-        nameParts,
-        narrowParts,
-        value,
-        currency
+        currency,
+        amount,
+        nameFormatter,
+        defaultFormatter,
+        narrowSymbolFormatter,
+        withoutCurrencyFormatter,
+        withoutTrailingZerosFormatter,
+        withoutTrailingZerosOrCurrencyFormatter
+    ]);
+    // Call functions automatically when the properties are accessed
+    // to keep these functions as an implementation detail.
+    return react.useMemo(()=>new Proxy(lazyFormatters, {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+            get: (target, key)=>Reflect.get(target, key)?.call(null)
+        }), [
+        lazyFormatters
     ]);
-    return moneyValue;
 };
+function useLazyFormatter(locale, options) {
+    return react.useMemo(()=>{
+        let memoized;
+        return ()=>memoized ??= new Intl.NumberFormat(locale, options);
+    }, [
+        locale,
+        options
+    ]);
+}
 exports.default = useMoney;

package/dist/cjs/index.js CHANGED Viewed

@@ -67,12 +67,12 @@ var useCollectionsQuery = require('./hooks/shop/use-collections-query.js');
 var useProductQuery = require('./hooks/shop/use-product-query.js');
 var useProductsQuery = require('./hooks/shop/use-products-query.js');
 var useCurrentDevice = require('./hooks/use-current-device.js');
+var useFormatMoney = require('./hooks/useFormatMoney.js');
 var useLazyVideo = require('./hooks/use-lazy-video.js');
 var useCartId = require('./hooks/useCartId.js');
 var useCartLine = require('./hooks/useCartLine.js');
 var useCartUI = require('./hooks/useCartUI.js');
 var useCollection = require('./hooks/useCollection.js');
-var useFormatMoney = require('./hooks/useFormatMoney.js');
 var react = require('react');
 var useIsomorphicLayoutEffect = require('./hooks/useIsomorphicLayoutEffect.js');
 var useLoadScript = require('./hooks/useLoadScript.js');
@@ -93,6 +93,7 @@ var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
 exports.AddOn = AddOn.default;
 exports.Render = Render.default;
 exports.RenderPreview = RenderPreview.default;
+exports.RenderChildren = Render_liquid.RenderChildren;
 exports.RenderLiquid = Render_liquid.default;
 exports.AddonProvider = AddonContext.AddonProvider;
 exports.useAddon = AddonContext.useAddon;
@@ -190,6 +191,7 @@ exports.fpixel = fpixel;
 exports.gtag = gtag;
 exports.tiktokpixel = tiktokpixel;
 exports.RenderIf = render.RenderIf;
+exports.dataStringify = render.dataStringify;
 exports.props = render.props;
 exports.styles = render.styles;
 exports.template = render.template;
@@ -225,6 +227,7 @@ exports.useIsStorefrontProduct = shop.useIsStorefrontProduct;
 exports.useLocale = shop.useLocale;
 exports.useMatchMutate = shop.useMatchMutate;
 exports.useMobileOnly = shop.useMobileOnly;
+exports.useMoneyFormat = shop.useMoneyFormat;
 exports.usePageType = shop.usePageType;
 exports.usePluginEnable = shop.usePluginEnable;
 exports.useStoreFront = shop.useStoreFront;
@@ -234,12 +237,12 @@ exports.useCollectionsQuery = useCollectionsQuery.useCollectionsQuery;
 exports.useProductQuery = useProductQuery.useProductQuery;
 exports.useProductsQuery = useProductsQuery.useProductsQuery;
 exports.useCurrentDevice = useCurrentDevice.useCurrentDevice;
+exports.useFormatMoney = useFormatMoney.useFormatMoney;
 exports.useLazyVideo = useLazyVideo.useLazyVideo;
 exports.useCartId = useCartId.default;
 exports.useCartLine = useCartLine.default;
 exports.useCartUI = useCartUI.default;
 exports.useCollection = useCollection.useCollection;
-exports.useFormatMoney = useFormatMoney.default;
 Object.defineProperty(exports, 'useId', {
 	enumerable: true,
 	get: function () { return react.useId; }

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

@@ -12,20 +12,35 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
-const Render = ({ uid , builder , components , parentId , ...passProps })=>{
+const Render = ({ uid , builder , components , parentId , extraFiles ={} , ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
         console.log('Miss component: ', item);
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
+    }
+    if (!item) {
+        return {
+            liquid: '',
+            extraFiles
+        };
     }
-    if (!item) return null;
     if (item?.type === 'section') {
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
     } else {
+        const customProps = {
+            extraFiles: {}
+        };
         const style = composeAdvanceStyle(item.advanced, item.tag);
+        let liquid = '';
         if (disableWrap.includes(item.tag)) {
-            return RenderIf(item?.childrens?.length, ()=>{
+            liquid = RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
                         uid,
@@ -42,17 +57,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                             ...builder[id],
                             uid: id,
                             builder,
-                            components
+                            components,
+                            customProps
                         };
                     }),
-                    children: item.childrens.map((id)=>Render({
+                    children: item.childrens.map((id)=>RenderChildren({
                             uid: id,
                             builder,
                             components,
-                            parentId: uid
+                            customProps
                         })).join('')
                 });
-            }, ()=>Component({
+            }, ()=>{
+                return Component({
                     builderProps: {
                         uid,
                         builderData: item
@@ -64,10 +81,12 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                     isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     ...passProps
-                }));
+                });
+            });
         }
-        return template`<div style="${style}" class="${item.uid}">
-    ${RenderIf(item?.childrens?.length, ()=>Component({
+        liquid = template`<div style="${style}" class="${item.uid}">
+    ${RenderIf(item?.childrens?.length, ()=>{
+            return Component({
                 builderProps: {
                     uid,
                     builderData: item
@@ -80,15 +99,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                         ...builder[id],
                         uid: id,
                         builder,
-                        components
+                        components,
+                        customProps
                     };
                 }),
-                children: item.childrens.map((id)=>Render({
+                children: item.childrens.map((id)=>RenderChildren({
                         uid: id,
                         builder,
-                        components
+                        components,
+                        customProps
                     })).join('')
-            }), ()=>Component({
+            });
+        }, ()=>{
+            return Component({
                 builderProps: {
                     uid,
                     builderData: item
@@ -97,9 +120,33 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                 setting: item.settings,
                 isText: componentTexts.includes(item.tag) ? true : null,
                 ...passProps
-            }))}
+            });
+        })}
     </div>`;
+        return {
+            liquid,
+            extraFiles: customProps.extraFiles
+        };
+    }
+};
+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;
+        }
+    }
+    // Fix limit 256kb
+    const textEncoder = new TextEncoder();
+    const size = data?.liquid ? textEncoder.encode(data.liquid).length : 0;
+    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  %}`;
     }
+    return data.liquid;
 };
-export { Render as default };
+export { RenderChildren, Render as default };

package/dist/esm/helpers/render.js CHANGED Viewed

@@ -37,6 +37,9 @@ const styles = (strings, ...keys)=>{
     }
     return styleArr.join(';');
 };
+const dataStringify = (obj)=>{
+    return JSON.stringify(obj).replace(/\\"/g, '"');
+};
 const template = (strings, ...keys)=>{
     let str = '';
     strings.forEach((item, index)=>{
@@ -56,4 +59,4 @@ const template = (strings, ...keys)=>{
     return str;
 };
-export { RenderIf, props, styles, template };
+export { RenderIf, dataStringify, props, styles, template };

package/dist/esm/hooks/shop.js CHANGED Viewed

@@ -24,6 +24,17 @@ const useCurrency = ()=>{
         changeCurrency
     ]);
 };
+const useMoneyFormat = ()=>{
+    const moneyFormat = useShopStore((state)=>state.moneyFormat);
+    const moneyWithCurrencyFormat = useShopStore((state)=>state.moneyWithCurrencyFormat);
+    return useMemo(()=>({
+            moneyFormat,
+            moneyWithCurrencyFormat
+        }), [
+        moneyFormat,
+        moneyWithCurrencyFormat
+    ]);
+};
 const useSwatches = ()=>{
     const swatches = useShopStore((state)=>state.swatches);
     const changeSwatches = useShopStore((state)=>state.changeSwatches);
@@ -97,4 +108,4 @@ function useCheckoutUrl(url) {
     return storefrontToken ? `${url}?access_token=${storefrontToken}` : url;
 }
-export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches };
+export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches };

package/dist/esm/hooks/useFormatMoney.js CHANGED Viewed

@@ -1,17 +1,59 @@
-import { useCallback } from 'react';
-import { useLocale } from './shop.js';
+import { useMoneyFormat } from './shop.js';
-const useFormatMoney = ()=>{
-    const { locale  } = useLocale();
-    const formatMoney = useCallback((value, options)=>new Intl.NumberFormat(locale, {
-            style: 'currency',
-            ...options
-        }).format(value), [
-        locale
-    ]);
-    return {
-        formatMoney
+const useFormatMoney = (amount, withCurrency)=>{
+    const { moneyFormat , moneyWithCurrencyFormat  } = useMoneyFormat();
+    const formatMoney = function(cents, format) {
+        let value = '';
+        const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+        const formatString = format || '${{amount}}';
+        if (typeof cents == 'string') {
+            cents = cents.replace('.', '');
+        }
+        /**
+     * check default
+     * @param opt opt
+     * @param def def
+     * @returns any
+     */ function defaultOption(opt, def) {
+            return typeof opt == 'undefined' ? def : opt;
+        }
+        /**
+     * formatWithDelimiters
+     * @param number number
+     * @param precision precision
+     * @param thousands thousands
+     * @param decimal decimal
+     * @returns any
+     */ // eslint-disable-next-line max-params
+        function formatWithDelimiters(number, precision, thousands, decimal) {
+            precision = defaultOption(precision, 2);
+            thousands = defaultOption(thousands, ',');
+            decimal = defaultOption(decimal, '.');
+            if (isNaN(number) || number == null) {
+                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 = (number / 100.0).toFixed(Number(precision) + 1).slice(0, -1);
+            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;
+        }
+        switch(formatString.match(placeholderRegex)[1]){
+            case 'amount':
+                value = formatWithDelimiters(cents, 2);
+                break;
+            case 'amount_no_decimals':
+                value = formatWithDelimiters(cents, 0);
+                break;
+            case 'amount_with_comma_separator':
+                value = formatWithDelimiters(cents, 2, '.', ',');
+                break;
+            case 'amount_no_decimals_with_comma_separator':
+                value = formatWithDelimiters(cents, 0, '.', ',');
+                break;
+        }
+        return formatString.replace(placeholderRegex, value);
     };
+    return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
-export { useFormatMoney as default };
+export { useFormatMoney };

package/dist/esm/hooks/useMoney.js CHANGED Viewed

@@ -1,182 +1,7 @@
 import { useMemo } from 'react';
 import { useLocale, useCurrency } from './shop.js';
-const NARROW_SYMBOL_MAP = {
-    AED: 'د.إ',
-    AFN: '؋',
-    ALL: 'L',
-    AMD: 'դր.',
-    ANG: 'ƒ',
-    AOA: 'Kz',
-    ARS: '$',
-    AUD: '$',
-    AWG: 'ƒ',
-    AZN: '₼',
-    BAM: 'КМ',
-    BBD: '$',
-    BDT: '৳',
-    BGN: 'лв.',
-    BHD: 'ب.د',
-    BIF: 'Fr',
-    BMD: '$',
-    BND: '$',
-    BOB: 'Bs.',
-    BRL: 'R$',
-    BSD: '$',
-    BTN: 'Nu.',
-    BWP: 'P',
-    BYN: 'Br',
-    BYR: 'Br',
-    BZD: '$',
-    CAD: '$',
-    CDF: 'Fr',
-    CHF: 'CHF',
-    CLF: 'UF',
-    CLP: '$',
-    CNY: '¥',
-    COP: '$',
-    CRC: '₡',
-    CUC: '$',
-    CUP: '$',
-    CVE: '$',
-    CZK: 'Kč',
-    DJF: 'Fdj',
-    DKK: 'kr.',
-    DOP: '$',
-    DZD: 'د.ج',
-    EGP: 'ج.م',
-    ERN: 'Nfk',
-    ETB: 'Br',
-    EUR: '€',
-    FJD: '$',
-    FKP: '£',
-    GBP: '£',
-    GEL: 'ლ',
-    GHS: '₵',
-    GIP: '£',
-    GMD: 'D',
-    GNF: 'Fr',
-    GTQ: 'Q',
-    GYD: '$',
-    HKD: '$',
-    HNL: 'L',
-    HRK: 'kn',
-    HTG: 'G',
-    HUF: 'Ft',
-    IDR: 'Rp',
-    ILS: '₪',
-    INR: '₹',
-    IQD: 'ع.د',
-    IRR: '﷼',
-    ISK: 'kr',
-    JMD: '$',
-    JOD: 'د.ا',
-    JPY: '¥',
-    KES: 'KSh',
-    KGS: 'som',
-    KHR: '៛',
-    KMF: 'Fr',
-    KPW: '₩',
-    KRW: '₩',
-    KWD: 'د.ك',
-    KYD: '$',
-    KZT: '〒',
-    LAK: '₭',
-    LBP: 'ل.ل',
-    LKR: '₨',
-    LRD: '$',
-    LSL: 'L',
-    LTL: 'Lt',
-    LVL: 'Ls',
-    LYD: 'ل.د',
-    MAD: 'د.م.',
-    MDL: 'L',
-    MGA: 'Ar',
-    MKD: 'ден',
-    MMK: 'K',
-    MNT: '₮',
-    MOP: 'P',
-    MRU: 'UM',
-    MUR: '₨',
-    MVR: 'MVR',
-    MWK: 'MK',
-    MXN: '$',
-    MYR: 'RM',
-    MZN: 'MTn',
-    NAD: '$',
-    NGN: '₦',
-    NIO: 'C$',
-    NOK: 'kr',
-    NPR: '₨',
-    NZD: '$',
-    OMR: 'ر.ع.',
-    PAB: 'B/.',
-    PEN: 'S/.',
-    PGK: 'K',
-    PHP: '₱',
-    PKR: '₨',
-    PLN: 'zł',
-    PYG: '₲',
-    QAR: 'ر.ق',
-    RON: 'Lei',
-    RSD: 'РСД',
-    RUB: '₽',
-    RWF: 'FRw',
-    SAR: 'ر.س',
-    SBD: '$',
-    SCR: '₨',
-    SDG: '£',
-    SEK: 'kr',
-    SGD: '$',
-    SHP: '£',
-    SKK: 'Sk',
-    SLL: 'Le',
-    SOS: 'Sh',
-    SRD: '$',
-    SSP: '£',
-    STN: 'Db',
-    SVC: '₡',
-    SYP: '£S',
-    SZL: 'E',
-    THB: '฿',
-    TJS: 'ЅМ',
-    TMT: 'T',
-    TND: 'د.ت',
-    TOP: 'T$',
-    TRY: '₺',
-    TTD: '$',
-    TWD: '$',
-    TZS: 'Sh',
-    UAH: '₴',
-    UGX: 'USh',
-    USD: '$',
-    UYU: '$',
-    UZS: '',
-    VED: 'Bs.D.',
-    VES: 'Bs.S.',
-    VND: '₫',
-    VUV: 'Vt',
-    WST: 'T',
-    XAF: 'Fr',
-    XAG: 'oz t',
-    XAU: 'oz t',
-    XBA: '',
-    XBB: '',
-    XBC: '',
-    XBD: '',
-    XCD: '$',
-    XDR: 'SDR',
-    XOF: 'Fr',
-    XPD: 'oz t',
-    XPF: 'Fr',
-    XPT: 'oz t',
-    xts: '',
-    YER: '﷼',
-    ZAR: 'R',
-    ZMK: 'ZK',
-    ZMW: 'ZK'
-};
-const useMoney = (money)=>{
+const useMoney = (amount)=>{
     const { locale  } = useLocale();
     const { currency  } = useCurrency();
     const options = useMemo(()=>({
@@ -185,43 +10,71 @@ const useMoney = (money)=>{
         }), [
         currency
     ]);
-    const value = useMemo(()=>new Intl.NumberFormat(locale, options).format(money), [
-        locale,
-        options,
-        money
-    ]);
-    const baseParts = new Intl.NumberFormat(locale, options).formatToParts(money);
-    const nameParts = new Intl.NumberFormat(locale, {
+    const defaultFormatter = useLazyFormatter(locale, options);
+    const nameFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'name'
-    }).formatToParts(money);
-    const narrowParts = new Intl.NumberFormat(locale, {
+    });
+    const narrowSymbolFormatter = useLazyFormatter(locale, {
         ...options,
         currencyDisplay: 'narrowSymbol'
-    }).formatToParts(money);
-    const moneyValue = useMemo(()=>({
-            currencyCode: currency,
-            currencyName: nameParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "US dollars"
-            currency,
-            currencyNarrowSymbol: narrowParts.find((part)=>part.type === 'currency')?.value ?? // e.g. "$"
-            (currency ? NARROW_SYMBOL_MAP[currency] : '') ?? '',
-            parts: baseParts,
-            localizedString: value,
-            amount: baseParts.filter((part)=>[
-                    'decimal',
-                    'fraction',
-                    'group',
-                    'integer',
-                    'literal'
-                ].includes(part.type)).map((part)=>part.value).join('')
+    });
+    const withoutTrailingZerosFormatter = useLazyFormatter(locale, {
+        ...options,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+    });
+    const withoutCurrencyFormatter = useLazyFormatter(locale);
+    const withoutTrailingZerosOrCurrencyFormatter = useLazyFormatter(locale, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+    });
+    const isPartCurrency = (part)=>part.type === 'currency';
+    // By wrapping these properties in functions, we only
+    // create formatters if they are going to be used.
+    const lazyFormatters = useMemo(()=>({
+            currencyCode: ()=>currency,
+            localizedString: ()=>defaultFormatter().format(amount),
+            parts: ()=>defaultFormatter().formatToParts(amount),
+            withoutTrailingZeros: ()=>amount % 1 === 0 ? withoutTrailingZerosFormatter().format(amount) : defaultFormatter().format(amount),
+            withoutTrailingZerosAndCurrency: ()=>amount % 1 === 0 ? withoutTrailingZerosOrCurrencyFormatter().format(amount) : withoutCurrencyFormatter().format(amount),
+            currencyName: ()=>nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
+            currencySymbol: ()=>defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? currency,
+            currencyNarrowSymbol: ()=>narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)?.value ?? '',
+            amount: ()=>defaultFormatter().formatToParts(amount).filter((part)=>[
+                        'decimal',
+                        'fraction',
+                        'group',
+                        'integer',
+                        'literal'
+                    ].includes(part.type)).map((part)=>part.value).join('')
         }), [
-        baseParts,
-        nameParts,
-        narrowParts,
-        value,
-        currency
+        currency,
+        amount,
+        nameFormatter,
+        defaultFormatter,
+        narrowSymbolFormatter,
+        withoutCurrencyFormatter,
+        withoutTrailingZerosFormatter,
+        withoutTrailingZerosOrCurrencyFormatter
+    ]);
+    // Call functions automatically when the properties are accessed
+    // to keep these functions as an implementation detail.
+    return useMemo(()=>new Proxy(lazyFormatters, {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+            get: (target, key)=>Reflect.get(target, key)?.call(null)
+        }), [
+        lazyFormatters
     ]);
-    return moneyValue;
 };
+function useLazyFormatter(locale, options) {
+    return useMemo(()=>{
+        let memoized;
+        return ()=>memoized ??= new Intl.NumberFormat(locale, options);
+    }, [
+        locale,
+        options
+    ]);
+}
 export { useMoney as default };

package/dist/esm/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 export { default as AddOn } from './components/AddOn.js';
 export { default as Render } from './components/Render.js';
 export { default as RenderPreview } from './components/RenderPreview.js';
-export { default as RenderLiquid } from './components/Render.liquid.js';
+export { RenderChildren, default as RenderLiquid } from './components/Render.liquid.js';
 export { AddonProvider, useAddon, useAddons } from './contexts/AddonContext.js';
 export { BuilderComponentProvider, useBuilderComponent } from './contexts/BuilderComponent.js';
 export { BuilderProvider, useBuilderStore } from './contexts/BuilderContext.js';
@@ -48,7 +48,7 @@ import * as gtag from './helpers/tracking/gtag.js';
 export { gtag };
 import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
-export { RenderIf, props, styles, template } from './helpers/render.js';
+export { RenderIf, dataStringify, props, styles, template } from './helpers/render.js';
 export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
 export { composeSize, composeSizeCss, genSizeClass } from './helpers/size.js';
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
@@ -62,18 +62,18 @@ export { useCartNoteUpdate } from './hooks/cart/use-cart-note-update.js';
 export { useCreateCart } from './hooks/cart/use-create-cart.js';
 export { useRemoveCartItem } from './hooks/cart/use-remove-cart-item.js';
 export { useUpdateCartItem } from './hooks/cart/use-update-cart-item.js';
-export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, usePageType, usePluginEnable, useStoreFront, useSwatches } from './hooks/shop.js';
+export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches } from './hooks/shop.js';
 export { useCollectionQuery } from './hooks/shop/use-collection-query.js';
 export { useCollectionsQuery } from './hooks/shop/use-collections-query.js';
 export { useProductQuery } from './hooks/shop/use-product-query.js';
 export { useProductsQuery } from './hooks/shop/use-products-query.js';
 export { useCurrentDevice } from './hooks/use-current-device.js';
+export { useFormatMoney } from './hooks/useFormatMoney.js';
 export { useLazyVideo } from './hooks/use-lazy-video.js';
 export { default as useCartId } from './hooks/useCartId.js';
 export { default as useCartLine } from './hooks/useCartLine.js';
 export { default as useCartUI } from './hooks/useCartUI.js';
 export { useCollection } from './hooks/useCollection.js';
-export { default as useFormatMoney } from './hooks/useFormatMoney.js';
 export { useId } from 'react';
 export { default as useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect.js';
 export { default as useLoadScript } from './hooks/useLoadScript.js';

package/dist/types/index.d.ts CHANGED Viewed

@@ -25,13 +25,21 @@ type Props$1 = {
 };
 declare const RenderPreviewMemo: React.NamedExoticComponent<Props$1>;
+type ExtraFiles = {
+    [fileName: string]: string;
+};
 type Props = {
     uid: string;
     builder: Record<string, any>;
     components: Record<string, any>;
+    extraFiles?: ExtraFiles;
     [key: string]: any;
 };
-declare const Render: ({ uid, builder, components, parentId, ...passProps }: Props) => string | null;
+declare const Render: ({ uid, builder, components, parentId, extraFiles, ...passProps }: Props) => {
+    liquid: string;
+    extraFiles: ExtraFiles;
+};
+declare const RenderChildren: (props: Props) => string;
 type AddonContextProps = {
     components: Record<string, React.ComponentType<any>>;
@@ -7312,6 +7320,8 @@ type ShopContextProps = {
     locale?: string;
     pageType?: PublishedThemePageType;
     currency?: string;
+    moneyFormat?: string;
+    moneyWithCurrencyFormat?: string;
     plugins?: string[];
     storefrontUrl?: string;
     storefrontToken?: string;
@@ -7760,6 +7770,7 @@ type CallbackCondition = () => string;
 declare const RenderIf: (c: boolean | null | undefined, t: string | CallbackCondition, f?: string | CallbackCondition) => string;
 declare const props: (strings: any, ...keys: any[]) => string;
 declare const styles: (strings: any, ...keys: any[]) => string;
+declare const dataStringify: (obj: object) => string;
 declare const template: (strings: any, ...keys: any[]) => string;
 declare const isLocalEnv: boolean;
@@ -7867,6 +7878,10 @@ declare const useCurrency: () => {
     currency: string | undefined;
     changeCurrency: (currency: string) => void;
 };
+declare const useMoneyFormat: () => {
+    moneyFormat: string | undefined;
+    moneyWithCurrencyFormat: string | undefined;
+};
 declare const useSwatches: () => {
     swatches: GlobalSwatchesData[] | undefined;
     changeSwatches: (swatches: GlobalSwatchesData[]) => void;
@@ -7903,6 +7918,8 @@ declare const useProductsQuery: (ids?: string[], options?: SWRConfiguration<Prod
 declare const useCurrentDevice: () => NameDevices;
+declare const useFormatMoney: (amount: number, withCurrency: boolean) => string;
 declare const useLazyVideo: () => void;
 declare const useCartId: () => {
@@ -7921,10 +7938,6 @@ declare function useCartUI(): {
 declare const useCollection: () => CollectionSelectFragment | undefined;
-declare const useFormatMoney: () => {
-    formatMoney: (value: number, options?: Intl.NumberFormatOptions & Required<Pick<Intl.NumberFormatOptions, 'currency'>>) => string;
-};
 declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 type LoadScriptParams = Parameters<typeof loadScript>;
@@ -7934,14 +7947,50 @@ type ScriptState = 'loading' | 'done' | 'error';
  */
 declare function useLoadScript(url: LoadScriptParams[0], options?: LoadScriptParams[1]): ScriptState;
-declare const useMoney: (money: number) => {
-    currencyCode: string | undefined;
-    currencyName: string | undefined;
-    currencyNarrowSymbol: string;
+type UseMoneyValue = {
+    /**
+     * The currency code from the `MoneyV2` object.
+     */
+    currencyCode: string;
+    /**
+     * The name for the currency code, returned by `Intl.NumberFormat`.
+     */
+    currencyName?: string;
+    /**
+     * The currency symbol returned by `Intl.NumberFormat`.
+     */
+    currencySymbol?: string;
+    /**
+     * The currency narrow symbol returned by `Intl.NumberFormat`.
+     */
+    currencyNarrowSymbol?: string;
+    /**
+     * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.
+     */
+    amount: string;
+    /**
+     * All parts returned by `Intl.NumberFormat.formatToParts`.
+     */
     parts: Intl.NumberFormatPart[];
+    /**
+     * A string returned by `new Intl.NumberFormat` for the amount and currency code,
+     * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).
+     */
     localizedString: string;
-    amount: string;
-};
+    /**
+     * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.
+     * For example, `$640.00` turns into `$640`.
+     * `$640.42` remains `$640.42`.
+     */
+    withoutTrailingZeros: string;
+    /**
+     * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.
+     * For example, `$640.00` turns into `640`.
+     * `$640.42` turns into `640.42`.
+     */
+    withoutTrailingZerosAndCurrency: string;
+};
+declare const useMoney: (amount: number) => UseMoneyValue;
 declare const usePrevious: <T>(value: T) => T | undefined;
@@ -8021,4 +8070,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, WiserWidgetType, baseAssetURL, calculateFirstProduct, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, WiserWidgetType, baseAssetURL, calculateFirstProduct, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, dataStringify, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.12.0-next.10",
+  "version": "1.12.0-next.12",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",