@gem-sdk/core 1.12.0-next.4 → 1.12.0-next.41

package/dist/esm/hooks/shop.js

@@ -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

@@ -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 = parseFloat(`${number}`).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

@@ -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

@@ -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';
@@ -29,7 +29,7 @@ export { getShortName } from './helpers/get-shortname.js';
 export { default as globalEvent } from './helpers/GlobalEvent.js';
 export { default as isBrowser } from './helpers/is-browser.js';
 export { isEmptyChildren } from './helpers/is-empty-children.js';
-export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth } from './helpers/make-style.js';
+export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
 export { normalizeBuilderData } from './helpers/normalize-builder-data.js';
 export { prefetchQueries } from './helpers/prefetch-queries.js';
 export { composeSpacing, getSpacingVariable } from './helpers/spacing.js';
@@ -39,7 +39,7 @@ export { genVariable } from './helpers/css-variable.js';
 export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
 export { isDefined } from './helpers/is-defined.js';
 export { composeTextColorCss, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getSingleColorVariable, isColor } from './helpers/colors.js';
-export { composeTypographyCss, genTypoClass } from './helpers/typography.js';
+export { composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, genTypoClass } from './helpers/typography.js';
 export { composeCornerCss, composeRadius, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
 export { getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 import * as fpixel from './helpers/tracking/fpixel.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, composeMemo, 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';