@gem-sdk/core 1.50.0 → 1.51.0-dev.64

package/dist/esm/contexts/PageContext.js

@@ -29,6 +29,31 @@ const createPageStoreProvider = (data)=>createStore((set)=>({
                 set({
                     publicStoreFrontData: publicStoreFrontData
                 });
+            },
+            setInteractionIsSelectOnPage: (value)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            isSelectOnPage: value
+                        }
+                    }));
+            },
+            setInteractionItem: (item)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            item,
+                            isSelectOnPage: state.interactionData?.isSelectOnPage || false
+                        }
+                    }));
+            },
+            setInteractionSelectType: (selectType)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            selectType
+                        }
+                    }));
             }
         }));
 const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
@@ -36,7 +61,10 @@ const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffe
             dynamicProduct,
             dynamicCollection,
             productOffers,
-            publicStoreFrontData
+            publicStoreFrontData,
+            interactionData: {
+                selectType: 'element'
+            }
         }), [
         dynamicProduct,
         dynamicCollection,

package/dist/esm/contexts/SectionContext.js

@@ -8,7 +8,6 @@ const SectionContext = /*#__PURE__*/ createContext(null);
 const createSectionProvider = (data)=>createStore((set, get)=>({
             data: data ?? {},
             getSection: (id)=>{
-                console.log('get().data', get().data);
                 const section = get().data[id];
                 return section ?? undefined;
             },

package/dist/esm/graphql/fragments/product-little.generated.js

@@ -4,6 +4,7 @@
   title
   description
   descriptionHtml
+  createdAt
   handle
   averageRating
   isStorefront

package/dist/esm/graphql/fragments/published-theme-page.generated.js

@@ -26,6 +26,10 @@
   themePageCustomFonts {
     ...CustomFontSelect
   }
+  interaction {
+    id
+    value
+  }
 }
     `;
 const PreviewThemePageSelect = `
@@ -53,6 +57,10 @@ const PreviewThemePageSelect = `
     themePageCustomCode {
       ...CustomCodeSelect
     }
+    interaction {
+    id
+    value
+  }
   }
 `;
 

package/dist/esm/graphql-app-api/queries/ShopLibraryPage.generated.js

@@ -0,0 +1,15 @@
+/* eslint-disable */ const ShopLibraryPageDocument = `
+    query ShopLibraryPage($shopLibraryPageId: ID!) {
+  shopLibraryPage(id: $shopLibraryPageId) {
+    id
+    name
+    sectionPosition
+    shopLibrarySections {
+      id
+      component
+    }
+  }
+}
+    `;
+
+export { ShopLibraryPageDocument };

package/dist/esm/helpers/align.js

@@ -0,0 +1,17 @@
+const convertTextAlignToJustify = (align)=>{
+    const devices = [
+        'desktop',
+        'tablet',
+        'mobile'
+    ];
+    const result = {};
+    devices.forEach((device)=>{
+        const deviceType = device === 'desktop' ? '' : `${device}:`;
+        result[`${deviceType}gp-justify-start`] = align?.[device] === 'left';
+        result[`${deviceType}gp-justify-center`] = align?.[device] === 'center';
+        result[`${deviceType}gp-justify-end`] = align?.[device] === 'right';
+    });
+    return result;
+};
+
+export { convertTextAlignToJustify };

package/dist/esm/helpers/animations.js

@@ -44,7 +44,7 @@ const animations = ()=>{
         });
         return cloneOptions;
     };
-    const slide = (target, options)=>{
+    const slide = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const { direction, distance } = normalizedOptions;
         const coordinate = [
@@ -65,11 +65,11 @@ const animations = ()=>{
                 transform: `translate${coordinate}(0)`
             }
         ];
-        return generateAnimationInstance(target, preset, {
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
             ...generateOptions(normalizedOptions, 500)
         });
     };
-    const fade = (target, options)=>{
+    const fade = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const preset = [
             {
@@ -79,7 +79,7 @@ const animations = ()=>{
                 opacity: 1
             }
         ];
-        return generateAnimationInstance(target, preset, {
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
             ...generateOptions(normalizedOptions, 500)
         });
     };
@@ -99,7 +99,7 @@ const animations = ()=>{
             easing: EASING[easing ?? 'linear']
         };
     };
-    const zoom = (target, options)=>{
+    const zoom = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const { scale, zoomDirection, isFade } = normalizedOptions;
         const [i1, i2] = scale.in;
@@ -125,7 +125,7 @@ const animations = ()=>{
             }
         ];
         const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
-        return generateAnimationInstance(target, zoomPreset, {
+        return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
             ...generateOptions(normalizedOptions, 700)
         });
     };

package/dist/esm/helpers/background.js

@@ -119,7 +119,7 @@ const getBgAttachmentByDevice = (background, device)=>{
     return background?.[device]?.attachment;
 };
 const composeBackgroundCss = (backgroundColor)=>{
-    return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
+    return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)};` : undefined}`;
 };
 const makeFixedBgAttachment = (background)=>{
     if (!background) return;

package/dist/esm/helpers/colors.js

@@ -117,7 +117,7 @@ const getGlobalColorStateStyle = (type, data)=>{
     return Object.fromEntries(Object.entries(data).map(([state, value])=>{
         if (state === 'active') return [];
         return [
-            `-${stateMapping?.[state]}-${type}`,
+            `-${stateMapping?.[state] || ''}-${type}`,
             getSingleColorVariable(value)
         ];
     }).filter(isDefined));

package/dist/esm/helpers/interaction/index.js

@@ -0,0 +1,64 @@
+import 'react/jsx-runtime';
+import 'zustand';
+import 'react';
+import 'swr';
+import { usePageStore } from '../../contexts/PageContext.js';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'swr/infinite';
+import 'vanilla-lazyload';
+import '../../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import 'classnames';
+import 'dayjs';
+import '../convert.js';
+
+const useInteraction = ()=>{
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const onListener = ({ event, selector }, callback)=>{
+        const element = document.querySelector(selector);
+        if (!element) return;
+        element.addEventListener(event, (e)=>{
+            const event = e;
+            const params = event.detail;
+            if (callback) callback(params);
+        });
+    };
+    const trigger = ({ event, data, selector })=>{
+        const element = document.querySelector(selector);
+        if (!element) return;
+        const eventDispatch = new CustomEvent(event, {
+            bubbles: false,
+            cancelable: true,
+            detail: {
+                data
+            }
+        });
+        element.dispatchEvent(eventDispatch);
+    };
+    const saveToElementInteractionData = (element, key, value)=>{
+        const interactionData = element.getAttribute('gp-data-interaction');
+        const interactionDataJson = JSON.parse(interactionData || '{}');
+        element.setAttribute('gp-data-interaction', JSON.stringify({
+            ...interactionDataJson,
+            [key]: value
+        }));
+    };
+    const closeSelectOnPage = ()=>{
+        setInteractionIsSelectOnPage(false);
+        const event = new CustomEvent('editor:interaction:change-select-on-page', {
+            bubbles: true,
+            detail: false
+        });
+        window.dispatchEvent(event);
+    };
+    return {
+        onListener,
+        trigger,
+        saveToElementInteractionData,
+        closeSelectOnPage
+    };
+};
+
+export { useInteraction };

package/dist/esm/helpers/render.js

@@ -56,6 +56,8 @@ const template = (strings, ...keys)=>{
             }
         }
     });
+    str = str.replaceAll(`style=""`, '');
+    str = str.replaceAll(`class=""`, '');
     return str;
 };
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/dist/esm/helpers/shadow.js

@@ -25,7 +25,7 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
     if (typeof value.distance == 'undefined') return {};
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
     return {
-        [`-${!isActiveState ? stateMapping?.[state] : ''}-${getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
+        [`-${!isActiveState ? stateMapping?.[state] || '' : ''}-${getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
     };
 };
 const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{

package/dist/esm/helpers/third-party/appConfig.js

@@ -76,5 +76,29 @@ const SimpleBundlesKitsConfig = {
         appId: 'e553276b-36b2-446d-b80a-aa47fe5f96ac'
     }
 };
+const EasyBundleBuilderSkailamaConfig = {
+    EasyBundleBuilderSkailama: {
+        appName: 'easy-bundles',
+        appId: '05b1325c-6303-4da5-8e2f-b13ab2a50e1a'
+    }
+};
+const PreorderNowPreOrderPqConfig = {
+    PreorderNowPreOrderPq: {
+        appName: 'preorder-now-pre-order-pq',
+        appId: '551fab2c-3af6-4a8f-ba21-736a71cb4540'
+    }
+};
+const FlyBundlesUpsellsFbtConfig = {
+    FlyBundlesUpsellsFbt: {
+        appName: 'fly-bundles-upsell',
+        appId: '26807bdc-c2ed-4a25-afb2-06e6b1ebf843'
+    }
+};
+const JunipProductReviewsUgcConfig = {
+    JunipProductReviewsUgc: {
+        appName: 'junip-product-reviews-ugc',
+        appId: 'dc14f5a8-ed15-41b1-ad08-cfba23f9789b'
+    }
+};
 
-export { BonLoyaltyRewardsReferralsConfig, FastBundleBundlesDiscountsConfig, KiteFreeGiftDiscountConfig, LoopSubscriptionsConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SelleasyConfig, ShopifyFormsConfig, SimpleBundlesKitsConfig, SkioSubscriptionsYcS20Config, SubifySubscriptionsConfig, UnlimitedBundlesDiscountsConfig };
+export { BonLoyaltyRewardsReferralsConfig, EasyBundleBuilderSkailamaConfig, FastBundleBundlesDiscountsConfig, FlyBundlesUpsellsFbtConfig, JunipProductReviewsUgcConfig, KiteFreeGiftDiscountConfig, LoopSubscriptionsConfig, PreorderNowPreOrderPqConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SelleasyConfig, ShopifyFormsConfig, SimpleBundlesKitsConfig, SkioSubscriptionsYcS20Config, SubifySubscriptionsConfig, UnlimitedBundlesDiscountsConfig };

package/dist/esm/helpers/third-party/appSetting.js

@@ -79,6 +79,13 @@ const overrideSettings = (tag, currentSetting, appSetting)=>{
                 ...currentSetting,
                 form_id: appSetting['formId']
             };
+        case 'FlyBundlesUpsellsFbt':
+            {
+                return {
+                    ...currentSetting,
+                    bundle_id: appSetting?.['customBundleId']
+                };
+            }
         default:
             return currentSetting;
     }
@@ -127,7 +134,66 @@ const SimpleBundlesKits = {
         'infinite-options-selector': null
     }
 };
+const EasyBundleBuilderSkailama = {
+    EasyBundleBuilderSkailama: {
+        'app-block-bundlePage': null
+    }
+};
+const PreorderNowPreOrderPq = {
+    PreorderNowPreOrderPq: {
+        'app-block-notifyapp-block-notify': null,
+        'app-block-partial': null,
+        'app-block-timer': null,
+        'app-block': null
+    }
+};
+const FlyBundlesUpsellsFbt = {
+    FlyBundlesUpsellsFbt: {
+        'app-block-volume': null,
+        'app-block-upsell-block': null,
+        'app-block-fbt': null,
+        'app-block-custom': {
+            bundle_id: ''
+        }
+    }
+};
+const JunipProductReviewsUgc = {
+    JunipProductReviewsUgc: {
+        'junip-review-carousel': {
+            reviewsType: 'product_reviews',
+            showSummary: true,
+            title: 'Reviews',
+            paddingTop: 48,
+            paddingBottom: 48,
+            containerClass: ''
+        },
+        'junip-ugc-gallery': {
+            layout: 'scroll',
+            title: '',
+            paddingTop: 48,
+            paddingBottom: 48,
+            containerClass: ''
+        },
+        'junip-product-review': {
+            product: '{{product}}'
+        },
+        'junip-product-summary': {
+            product: '{{product}}'
+        },
+        'junip-reviews': {
+            layout: 'list',
+            reviewsType: 'all',
+            showSummary: true,
+            reviewsCount: 10,
+            containerClass: ''
+        }
+    }
+};
 const composeSettingsByWidgetType = {
+    ...JunipProductReviewsUgc,
+    ...FlyBundlesUpsellsFbt,
+    ...PreorderNowPreOrderPq,
+    ...EasyBundleBuilderSkailama,
     ...FastBundleBundlesDiscounts,
     ...KiteFreeGiftDiscount,
     ...UnlimitedBundlesDiscounts,

package/dist/esm/helpers/third-party/constant.js

@@ -1,4 +1,4 @@
-import { RechargeSubscriptionsConfig, BonLoyaltyRewardsReferralsConfig, SubifySubscriptionsConfig, SelleasyConfig, LoopSubscriptionsConfig, SkioSubscriptionsYcS20Config, ShopifyFormsConfig, ReviewxpoProductReviewsAppConfig, PumperBundlesVolumeDiscountConfig, UnlimitedBundlesDiscountsConfig, KiteFreeGiftDiscountConfig, FastBundleBundlesDiscountsConfig, SimpleBundlesKitsConfig } from './appConfig.js';
+import { RechargeSubscriptionsConfig, BonLoyaltyRewardsReferralsConfig, SubifySubscriptionsConfig, SelleasyConfig, LoopSubscriptionsConfig, SkioSubscriptionsYcS20Config, ShopifyFormsConfig, ReviewxpoProductReviewsAppConfig, PumperBundlesVolumeDiscountConfig, UnlimitedBundlesDiscountsConfig, KiteFreeGiftDiscountConfig, FastBundleBundlesDiscountsConfig, SimpleBundlesKitsConfig, EasyBundleBuilderSkailamaConfig, PreorderNowPreOrderPqConfig, FlyBundlesUpsellsFbtConfig, JunipProductReviewsUgcConfig } from './appConfig.js';
 
 const mapShopifyAppMeta = {
     ...RechargeSubscriptionsConfig,
@@ -13,7 +13,11 @@ const mapShopifyAppMeta = {
     ...UnlimitedBundlesDiscountsConfig,
     ...KiteFreeGiftDiscountConfig,
     ...FastBundleBundlesDiscountsConfig,
-    ...SimpleBundlesKitsConfig
+    ...SimpleBundlesKitsConfig,
+    ...EasyBundleBuilderSkailamaConfig,
+    ...PreorderNowPreOrderPqConfig,
+    ...FlyBundlesUpsellsFbtConfig,
+    ...JunipProductReviewsUgcConfig
 };
 const THIRD_PARTY_APP_BLOCK_ID_PREFIX = 'gp_app';
 

package/dist/esm/helpers/typography.js

@@ -26,7 +26,8 @@ const composeTypographyV2Css = (typography, isImportant)=>{
     const composeImportant = isImportant ? '!important' : '';
     return `
   ${fontFamily ? `font-family: ${composeFontFamilyTypographyV2({
-        fontFamily
+        fontFamily,
+        type: typography?.type
     })} ${composeImportant}` : ''};
   ${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant}` : ''};
   ${bold ? `font-weight: bold ${composeImportant}` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant}` : ''};
@@ -74,7 +75,7 @@ const composeTypographyV2 = (value, attrs)=>{
     });
 };
 const composeFontFamilyTypographyV2 = (value)=>{
-    const { fontFamily, isCustom, fallbackFontFamily } = value || {};
+    const { fontFamily, isCustom, fallbackFontFamily, type } = value || {};
     if (!fontFamily) {
         return isCustom ? fallbackFontFamily : undefined;
     }
@@ -91,7 +92,7 @@ const composeFontFamilyTypographyV2 = (value)=>{
             default:
                 return getFontUsedByTypographyV2({
                     fontFamily: fontFamily.value,
-                    fallbackFontFamily: value?.fallbackFontFamily
+                    fallbackFontFamily: composeFallbackTypographyStyle(type ?? 'heading')
                 });
         }
     }
@@ -116,7 +117,7 @@ const composeTypographyAttr = (attrs)=>{
     });
 };
 const composeTypographyClassName = (typo, typography)=>{
-    return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
+    return typo ? typo?.type && !isCustomTypo(typo.custom) ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
 };
 const composeFallbackTypographyStyle = (tag)=>{
     if (tag.toLocaleLowerCase().includes('heading')) {
@@ -130,7 +131,7 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
         const customTypo = {
             ...typo.custom,
             fallbackFontFamily: fallbackFontFamily,
-            isCustom: !!typo.custom
+            isCustom: isCustomTypo(typo.custom)
         };
         return {
             ...composeTypographyV2(customTypo, typo.attrs),
@@ -141,5 +142,8 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
         ...!typography?.type ? composeTypography(typography?.custom) : {}
     };
 };
+const isCustomTypo = (customTypo)=>{
+    return customTypo && Object.keys(customTypo).length > 1 || customTypo && Object.keys(customTypo).length === 1 && !customTypo.fontSize;
+};
 
 export { composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass };

package/dist/esm/hooks/animation/useApplyAnimation.js

@@ -4,6 +4,7 @@ import { useAnimationTarget } from './useAnimationTarget.js';
 import { useAnimationConfig } from './useAnimationConfig.js';
 import { useAnimationActions } from './useAnimationActions.js';
 import { useAnimationPreview } from './useAnimationPreview.js';
+import '../../types/custom.js';
 import { AnimationType } from '../../types/animations.js';
 
 const useApplyAnimation = ({ props })=>{
@@ -36,6 +37,7 @@ const useApplyAnimation = ({ props })=>{
                 setting,
                 target: item.target
             }));
+        console.log('listAnimations', listAnimations);
         cancelAnimation();
         setAnimation(listAnimations);
     }, [

package/dist/esm/hooks/useFormatMoney.js

@@ -3,69 +3,69 @@ import { useMoneyFormat } from './shop.js';
 const shopifyPriceRounding = (amount, precision)=>{
     return parseFloat(`${amount}`).toFixed(Number(precision) + 1).slice(0, -1);
 };
+const formatMoney = function(cents, format) {
+    let value = '';
+    const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+    const formatString = format || '${{amount}}';
+    /**
+   * 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 = 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;
+    }
+    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;
+        case 'amount_with_apostrophe_separator':
+            value = formatWithDelimiters(cents, 2, "'", '.');
+            break;
+        case 'amount_no_decimals_with_space_separator':
+            value = formatWithDelimiters(cents, 0, ' ');
+            break;
+        case 'amount_with_space_separator':
+            value = formatWithDelimiters(cents, 2, ' ', ',');
+            break;
+        case 'amount_with_period_and_space_separator':
+            value = formatWithDelimiters(cents, 2, ' ', '.');
+            break;
+    }
+    return formatString.replace(placeholderRegex, value);
+};
 const useFormatMoney = (amount, withCurrency)=>{
     const { moneyFormat, moneyWithCurrencyFormat } = useMoneyFormat();
-    const formatMoney = function(cents, format) {
-        let value = '';
-        const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
-        const formatString = format || '${{amount}}';
-        /**
-     * 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 = 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;
-        }
-        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;
-            case 'amount_with_apostrophe_separator':
-                value = formatWithDelimiters(cents, 2, "'", '.');
-                break;
-            case 'amount_no_decimals_with_space_separator':
-                value = formatWithDelimiters(cents, 0, ' ');
-                break;
-            case 'amount_with_space_separator':
-                value = formatWithDelimiters(cents, 2, ' ', ',');
-                break;
-            case 'amount_with_period_and_space_separator':
-                value = formatWithDelimiters(cents, 2, ' ', '.');
-                break;
-        }
-        return formatString.replace(placeholderRegex, value);
-    };
     return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
 
-export { shopifyPriceRounding, useFormatMoney };
+export { formatMoney, shopifyPriceRounding, useFormatMoney };

package/dist/esm/hooks/useInteraction.js

@@ -0,0 +1,17 @@
+import { usePageStore } from '../contexts/PageContext.js';
+
+const useInteraction = ()=>{
+    const interactionData = usePageStore((state)=>state.interactionData);
+    const { item } = interactionData || {};
+    const getAnimationByUid = (uid)=>{
+        const targets = item?.targets;
+        const targetByUid = targets?.find((target)=>target.uid === uid);
+        const metaDataContainsAnimation = targetByUid?.events?.find((it)=>it.condition?.metaData?.animation);
+        return metaDataContainsAnimation?.condition?.metaData?.animation;
+    };
+    return {
+        getAnimationByUid
+    };
+};
+
+export { useInteraction };

package/dist/esm/index.js

@@ -28,6 +28,7 @@ export { LibraryTemplateDocument } from './graphql-app-api/queries/LibraryTempla
 export { ThemePageDocument } from './graphql-app-api/queries/ThemePage.generated.js';
 export { SaleFunnelDiscountsDocument } from './graphql-app-api/queries/SaleFunnelDiscounts.generated.js';
 export { LibrarySaleFunnelDocument } from './graphql-app-api/queries/LibrarySaleFunnelDiscount.generated.js';
+export { ShopLibraryPageDocument } from './graphql-app-api/queries/ShopLibraryPage.generated.js';
 export { composeBorderCss, getBorderRadiusStyle, getBorderStyle, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn } from './helpers/borders.js';
 export { getCarouselContainerHeight, makeContainerWidthOrHeight, makeDotGapToCarouselStyle } from './helpers/carousel.js';
 export { cls } from './helpers/cls.js';
@@ -61,6 +62,7 @@ export { composePositionLineHeight, composePostionIconList } from './helpers/ico
 export { isDefined } from './helpers/is-defined.js';
 export { composeGridLayout, convertOldLayout, gridToArrayRegex, optionLayoutStyle } from './helpers/layout.js';
 export { makeAspectRatio, makeGlobalSizeHeightResponsive, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
+export { convertTextAlignToJustify } from './helpers/align.js';
 export { checkAvailableVariantInStock, getSelectedVariant, parseSelectedOption } from './helpers/product.js';
 export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey } from './helpers/query.js';
 export { composeCornerCss, composeRadius, composeRadiusResponsive, getCornerCSSFromGlobal, getCustomRadius, getRadiusCSSFromGlobal, getRadiusStyleActiveState } from './helpers/radius.js';
@@ -81,7 +83,7 @@ export { useCollectionsQuery } from './hooks/shop/use-collections-query.js';
 export { useProductQuery } from './hooks/shop/use-product-query.js';
 export { useProductsQuery, useProductsQueryAll } from './hooks/shop/use-products-query.js';
 export { useCurrentDevice } from './hooks/use-current-device.js';
-export { shopifyPriceRounding, useFormatMoney } from './hooks/useFormatMoney.js';
+export { formatMoney, shopifyPriceRounding, 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';
@@ -98,6 +100,7 @@ export { useProductList, useProductListProducts, useProductListSettings, useProd
 export { default as useSuspenseFetch } from './hooks/useSuspenseFetch.js';
 export { default as useSwatchesOptions } from './hooks/useSwatchesOptions.js';
 export { default as useInitialSwatchesOptions } from './hooks/useInitialSwatchesOptions.js';
+export { InteractionTargetEvent, InteractionTriggerEvent } from './types/custom.js';
 import * as shop from './types/shop.js';
 export { shop as ShopType };
 import * as appAPI from './types/appAPI.js';
@@ -109,3 +112,4 @@ export { fetchMedias, fetchVariants, getProduct } from './helpers/queries/get-pr
 export { getProductBySlug } from './helpers/queries/get-product-by-slug.js';
 export { getAppBlocks } from './helpers/third-party/getAppBlocks.js';
 export { addAppBlockId } from './helpers/third-party/addAppBlockId.js';
+export { useInteraction } from './helpers/interaction/index.js';