@gem-sdk/core 2.0.0-dev.896 → 2.0.0

package/dist/esm/hooks/shop.js

@@ -1 +1,111 @@
-import{useMemo as e}from"react";import{useSWRConfig as t}from"swr";import{useShopStore as r}from"../contexts/ShopContext.js";let useLocale=()=>{let t=r(e=>e.locale),o=r(e=>e.changeLocale);return e(()=>({locale:t,changeLocale:o}),[t,o])},useCurrency=()=>{let t=r(e=>e.currency),o=r(e=>e.changeCurrency);return e(()=>({currency:t,changeCurrency:o}),[t,o])},useMoneyFormat=()=>{let t=r(e=>e.moneyFormat),o=r(e=>e.moneyWithCurrencyFormat);return e(()=>({moneyFormat:t,moneyWithCurrencyFormat:o}),[t,o])},useSwatches=()=>{let t=r(e=>e.swatches),o=r(e=>e.changeSwatches);return e(()=>({swatches:t,changeSwatches:o}),[t,o])},usePageType=()=>{let t=r(e=>e.pageType);return e(()=>t||"STATIC",[t])},useStoreFront=()=>{let e=r(e=>e.provider),t=r(e=>e.storefrontToken),o=r(e=>e.storefrontUrl);return{provider:e,storefrontToken:t,storefrontUrl:o}},usePluginEnable=()=>r(e=>e.plugins),useEditorMode=()=>r(e=>e.mode),useMobileOnly=()=>r(e=>e.mobileOnly),useMatchMutate=()=>{let{cache:e,mutate:r}=t();return(t,o)=>{if(!(e instanceof Map))throw Error("matchMutate requires the cache provider to be a Map instance");let u=[];e.forEach((e,r)=>{t.test(r)&&u.push(r)});let n=u.map(t=>{let u=e.get(t);return r(t,u?.data,o)});return Promise.all(n)}};function useConnectedShopify(){let{storefrontToken:e}=useStoreFront();return!!e}function useIsSampleProduct(){let{storefrontToken:e}=useStoreFront(),t=r(e=>e.isStorefront);return t&&!e}function useIsStorefrontProduct(){return r(e=>e.isStorefront)}function useCheckoutUrl(e){let{storefrontToken:t}=useStoreFront();if(e)return t?`${e}?access_token=${t}`:e}export{useCheckoutUrl,useConnectedShopify,useCurrency,useEditorMode,useIsSampleProduct,useIsStorefrontProduct,useLocale,useMatchMutate,useMobileOnly,useMoneyFormat,usePageType,usePluginEnable,useStoreFront,useSwatches};
+import { useMemo } from 'react';
+import { useSWRConfig } from 'swr';
+import { useShopStore } from '../contexts/ShopContext.js';
+
+const useLocale = ()=>{
+    const locale = useShopStore((state)=>state.locale);
+    const changeLocale = useShopStore((state)=>state.changeLocale);
+    return useMemo(()=>({
+            locale,
+            changeLocale
+        }), [
+        locale,
+        changeLocale
+    ]);
+};
+const useCurrency = ()=>{
+    const currency = useShopStore((state)=>state.currency);
+    const changeCurrency = useShopStore((state)=>state.changeCurrency);
+    return useMemo(()=>({
+            currency,
+            changeCurrency
+        }), [
+        currency,
+        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);
+    return useMemo(()=>({
+            swatches,
+            changeSwatches
+        }), [
+        swatches,
+        changeSwatches
+    ]);
+};
+const usePageType = ()=>{
+    const pageType = useShopStore((state)=>state.pageType);
+    return useMemo(()=>pageType || 'STATIC', [
+        pageType
+    ]);
+};
+const useStoreFront = ()=>{
+    const provider = useShopStore((state)=>state.provider);
+    const storefrontToken = useShopStore((state)=>state.storefrontToken);
+    const storefrontUrl = useShopStore((state)=>state.storefrontUrl);
+    return {
+        provider,
+        storefrontToken,
+        storefrontUrl
+    };
+};
+const usePluginEnable = ()=>{
+    return useShopStore((state)=>state.plugins);
+};
+const useEditorMode = ()=>{
+    return useShopStore((state)=>state.mode);
+};
+const useMobileOnly = ()=>{
+    return useShopStore((state)=>state.mobileOnly);
+};
+const useMatchMutate = ()=>{
+    const { cache, mutate } = useSWRConfig();
+    return (matcher, opts)=>{
+        if (!(cache instanceof Map)) {
+            throw new Error('matchMutate requires the cache provider to be a Map instance');
+        }
+        const keys = [];
+        cache.forEach((_, key)=>{
+            if (matcher.test(key)) {
+                keys.push(key);
+            }
+        });
+        const mutations = keys.map((key)=>{
+            const cacheData = cache.get(key);
+            return mutate(key, cacheData?.data, opts);
+        });
+        return Promise.all(mutations);
+    };
+};
+function useConnectedShopify() {
+    const { storefrontToken } = useStoreFront();
+    return !!storefrontToken;
+}
+function useIsSampleProduct() {
+    const { storefrontToken } = useStoreFront();
+    const isStorefront = useShopStore((state)=>state.isStorefront);
+    return isStorefront && !storefrontToken;
+}
+function useIsStorefrontProduct() {
+    return useShopStore((state)=>state.isStorefront);
+}
+function useCheckoutUrl(url) {
+    const { storefrontToken } = useStoreFront();
+    if (!url) return undefined;
+    return storefrontToken ? `${url}?access_token=${storefrontToken}` : url;
+}
+
+export { useCheckoutUrl, useConnectedShopify, useCurrency, useEditorMode, useIsSampleProduct, useIsStorefrontProduct, useLocale, useMatchMutate, useMobileOnly, useMoneyFormat, usePageType, usePluginEnable, useStoreFront, useSwatches };

package/dist/esm/hooks/use-current-device.js

@@ -1 +1,28 @@
-import{useSyncExternalStore as e}from"react";function subscribe(e){return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}let useCurrentDevice=()=>e(subscribe,()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1024?"tablet":"desktop",()=>"desktop");export{useCurrentDevice};
+import { useSyncExternalStore } from 'react';
+
+// Hàm debounce với TypeScript
+function debounce(func, wait) {
+    let timeout;
+    return function(...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(()=>func.apply(this, args), wait);
+    };
+}
+function subscribe(callback) {
+    const debouncedCallback = debounce(callback, 200); // Debounce với thời gian chờ 200ms
+    window.addEventListener('resize', debouncedCallback);
+    return ()=>window.removeEventListener('resize', debouncedCallback);
+}
+const useCurrentDevice = ()=>{
+    return useSyncExternalStore(subscribe, ()=>{
+        if (window.innerWidth < 768) {
+            return 'mobile';
+        } else if (window.innerWidth >= 768 && window.innerWidth < 1025) {
+            return 'tablet';
+        } else {
+            return 'desktop';
+        }
+    }, ()=>'desktop');
+};
+
+export { useCurrentDevice };

package/dist/esm/hooks/use-lazy-video.js

@@ -1 +1,13 @@
-import{useEffect as e}from"react";import a from"vanilla-lazyload";let useLazyVideo=()=>{e(()=>{let e=new a({use_native:!0});e.update()},[])};export{useLazyVideo};
+import { useEffect } from 'react';
+import LazyLoad from 'vanilla-lazyload';
+
+const useLazyVideo = ()=>{
+    useEffect(()=>{
+        const lazyLoadInstance = new LazyLoad({
+            use_native: true
+        });
+        lazyLoadInstance.update();
+    }, []);
+};
+
+export { useLazyVideo };

package/dist/esm/hooks/useAnimations.js

@@ -1 +1,27 @@
-import{animations as t}from"../helpers/animations.js";import"react";import"react/jsx-runtime";import"zustand";import"swr";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"vanilla-lazyload";import"./useCartUI.js";import"react-transition-group";import"@gem-sdk/core";import"classnames";import"../helpers/convert.js";let useAnimations=()=>{let{zoom:r,shake:i,fade:o,slide:m}=t();return{zoom:r,shake:i,fade:o,slide:m}};export{useAnimations};
+import { animations } from '../helpers/animations.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'zustand';
+import 'swr';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'swr/infinite';
+import 'vanilla-lazyload';
+import './useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import 'classnames';
+import 'dayjs';
+import '../helpers/convert.js';
+
+const useAnimations = ()=>{
+    const { zoom, shake, fade, slide } = animations();
+    return {
+        zoom,
+        shake,
+        fade,
+        slide
+    };
+};
+
+export { useAnimations };

package/dist/esm/hooks/useCartId.js

@@ -1 +1,40 @@
-import{useSyncExternalStore as e,useCallback as t,useMemo as r}from"react";let cartKey="cart-id",getCartId=()=>window.localStorage.getItem(cartKey),writeCartId=e=>{e&&window.localStorage.setItem(cartKey,e)},removeCartId=()=>{window.localStorage.removeItem(cartKey)},subscribeStorage=e=>(window.addEventListener("storage",e),()=>{window.removeEventListener("storage",e)}),useCartId=()=>{let a=e(subscribeStorage,getCartId,()=>void 0),o=t(e=>{writeCartId(e)},[]),d=t(()=>{removeCartId()},[]);return r(()=>({cartId:a,updateCartId:o,clearCartId:d}),[a,d,o])};export{useCartId as default};
+import { useSyncExternalStore, useCallback, useMemo } from 'react';
+
+const cartKey = 'cart-id';
+const getCartId = ()=>{
+    return window.localStorage.getItem(cartKey);
+};
+const writeCartId = (value)=>{
+    if (value) {
+        window.localStorage.setItem(cartKey, value);
+    }
+};
+const removeCartId = ()=>{
+    window.localStorage.removeItem(cartKey);
+};
+const subscribeStorage = (callback)=>{
+    window.addEventListener('storage', callback);
+    return ()=>{
+        window.removeEventListener('storage', callback);
+    };
+};
+const useCartId = ()=>{
+    const cartId = useSyncExternalStore(subscribeStorage, getCartId, ()=>undefined);
+    const updateCartId = useCallback((val)=>{
+        writeCartId(val);
+    }, []);
+    const clearCartId = useCallback(()=>{
+        removeCartId();
+    }, []);
+    return useMemo(()=>({
+            cartId,
+            updateCartId,
+            clearCartId
+        }), [
+        cartId,
+        clearCartId,
+        updateCartId
+    ]);
+};
+
+export { useCartId as default };

package/dist/esm/hooks/useCartLine.js

@@ -1 +1,7 @@
-import{useCartLineStore as e}from"../contexts/CartLineContext.js";let useCartLine=()=>e(e=>e.line);export{useCartLine as default};
+import { useCartLineStore } from '../contexts/CartLineContext.js';
+
+const useCartLine = ()=>{
+    return useCartLineStore((s)=>s.line);
+};
+
+export { useCartLine as default };

package/dist/esm/hooks/useCartUI.js

@@ -1 +1,44 @@
-import{useCallback as e}from"react";import{create as t}from"zustand";import{usePluginEnable as o}from"./shop.js";let useStore=t(e=>({isCartOpen:!1,setOpen:t=>{let o=window.innerWidth-document.documentElement.clientWidth,d=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);t?(document.body.style.overflow="hidden",document.body.style.paddingRight=`${d+o}px`):(document.body.style.overflow="",document.body.style.paddingRight=""),e({isCartOpen:t})}}));function useCartUI(){let t=o(),d=useStore(e=>e.isCartOpen),n=useStore(e=>e.setOpen),r=e(()=>{t?.includes("cart-drawer")&&n(!0)},[t,n]),i=e(()=>n(!1),[n]);return{isCartOpen:d,openCart:r,closeCart:i}}export{useCartUI as default};
+import { useCallback } from 'react';
+import { create } from 'zustand';
+import { usePluginEnable } from './shop.js';
+
+const useStore = create((set)=>({
+        isCartOpen: false,
+        setOpen: (isCartOpen)=>{
+            const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+            const computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+            if (isCartOpen) {
+                document.body.style.overflow = `hidden`;
+                document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
+            } else {
+                document.body.style.overflow = '';
+                document.body.style.paddingRight = '';
+            }
+            set({
+                isCartOpen
+            });
+        }
+    }));
+function useCartUI() {
+    const plugins = usePluginEnable();
+    const isCartOpen = useStore((s)=>s.isCartOpen);
+    const setOpen = useStore((s)=>s.setOpen);
+    const openCart = useCallback(()=>{
+        if (plugins?.includes('cart-drawer')) {
+            setOpen(true);
+        }
+    }, [
+        plugins,
+        setOpen
+    ]);
+    const closeCart = useCallback(()=>setOpen(false), [
+        setOpen
+    ]);
+    return {
+        isCartOpen,
+        openCart,
+        closeCart
+    };
+}
+
+export { useCartUI as default };

package/dist/esm/hooks/useCollection.js

@@ -1 +1,7 @@
-import{useCollectionStore as o}from"../contexts/CollectionContext.js";let useCollection=()=>o(o=>o.collection);export{useCollection};
+import { useCollectionStore } from '../contexts/CollectionContext.js';
+
+const useCollection = ()=>{
+    return useCollectionStore((s)=>s.collection);
+};
+
+export { useCollection };

package/dist/esm/hooks/useFetchHandle.js

@@ -1 +1,11 @@
-import{useSWRConfig as e}from"swr";let useFetchHandle=()=>{let{fetcher:t}=e();if(!t)throw Error("Application must be init within a fetcher");return t};export{useFetchHandle};
+import { useSWRConfig } from 'swr';
+
+const useFetchHandle = ()=>{
+    const { fetcher } = useSWRConfig();
+    if (!fetcher) {
+        throw new Error('Application must be init within a fetcher');
+    }
+    return fetcher;
+};
+
+export { useFetchHandle };

package/dist/esm/hooks/useFormatMoney.js

@@ -1 +1,71 @@
-import{useMoneyFormat as e}from"./shop.js";let shopifyPriceRounding=(e,a)=>parseFloat(`${e}`).toFixed(Number(a)+1).slice(0,-1),useFormatMoney=(a,r)=>{let{moneyFormat:o,moneyWithCurrencyFormat:t}=e(),s=function(e,a){let r="",o=/\{\{\s*(\w+)\s*\}\}/,t=a||"${{amount}}";function s(e,a){return void 0===e?a:e}function n(e,a,r,o){if(a=s(a,2),r=s(r,","),o=s(o,"."),isNaN(e)||null==e)return 0;e=shopifyPriceRounding(e,Number(a));let t=e.split("."),n=t[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1"+r),i=t[1]?o+t[1]:"";return n+i}switch(t.match(o)[1]){case"amount":r=n(e,2);break;case"amount_no_decimals":r=n(e,0);break;case"amount_with_comma_separator":r=n(e,2,".",",");break;case"amount_no_decimals_with_comma_separator":r=n(e,0,".",",");break;case"amount_with_apostrophe_separator":r=n(e,2,"'",".");break;case"amount_no_decimals_with_space_separator":r=n(e,0," ");break;case"amount_with_space_separator":r=n(e,2," ",",");break;case"amount_with_period_and_space_separator":r=n(e,2," ",".")}return t.replace(o,r)};return s(`${a}`,r&&t||o)};export{shopifyPriceRounding,useFormatMoney};
+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();
+    return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
+};
+
+export { formatMoney, shopifyPriceRounding, useFormatMoney };

package/dist/esm/hooks/useInitialSwatchesOptions.js

@@ -1 +1,124 @@
-import e from"swr";import{ProductOptionNameDocument as t}from"../graphql/queries/product-value-label.generated.js";import{colorPreset as o}from"../components/src/product/helpers/variant-presets.js";import{useSwatches as a}from"./shop.js";import{useFetchHandle as r}from"./useFetchHandle.js";import{useShopStore as s}from"../contexts/ShopContext.js";import"react";import"react/jsx-runtime";import"zustand";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"vanilla-lazyload";import"./useCartUI.js";import"react-transition-group";import"@gem-sdk/core";import"classnames";import l from"../helpers/is-browser.js";import"../helpers/convert.js";let swatchChange=!1,colorChange=!1,useInitialSwatchesOptions=t=>{let o=r(),i=s(e=>e.changeSwatches),{swatches:n}=a(),{data:p}=e(["/query/productOptionName",{}],async()=>fetchProductValueLabel(o),{revalidateOnMount:!0}),c=[];if(n?.forEach(e=>{c.push(e.optionTitle)}),p?.productOptionName?.forEach(e=>{c.includes(e)||(swatchChange=!0,n?.push({optionTitle:e,optionType:"rectangle_list",optionValues:[]}))}),!t)return[];setDefaultSwatches(n,t),l()&&n?.length&&(swatchChange||colorChange)&&(window?.parent?.postMessage?.(JSON.stringify({type:"update-swatches",swatches:n}),"*"),i(n))},getColorDefault=(e,t)=>{let a=e?o[e.toLocaleLowerCase()]:void 0,r=a?[a]:[],s=t?.[0];return!s&&r.length&&(colorChange=!0),s?[s]:r},getProductOptionsLabelByName=(e,t)=>{let o=[],a=e.find(e=>e.name===t);return a?.values.forEach(e=>{o.push(e.label??"")}),o},getSwatchesOptionsLabel=e=>{let t=[];return e.forEach(e=>{t.push(e.label??"")}),t},setDefaultSwatches=(e,t)=>(e&&e?.map(e=>{let o=getProductOptionsLabelByName(t,e.optionTitle),a=getSwatchesOptionsLabel(e.optionValues);o.forEach(t=>{a.includes(t)||e.optionValues.push({label:t,colors:getColorDefault(t),imageUrl:""})}),e.optionValues=e.optionValues.map(e=>(void 0===e.imageUrl&&(swatchChange=!0),{label:e.label??"",colors:getColorDefault(e.label,e.colors),imageUrl:e.imageUrl??""}))}),e),fetchProductValueLabel=async e=>{let o={},a=async o=>{let a=await e([t,o]);return a};return a(o)};export{useInitialSwatchesOptions as default};
+import useSWR from 'swr';
+import { ProductOptionNameDocument } from '../graphql/queries/product-value-label.generated.js';
+import { colorPreset } from '../components/src/product/helpers/variant-presets.js';
+import { useSwatches } from './shop.js';
+import { useFetchHandle } from './useFetchHandle.js';
+import { useShopStore } from '../contexts/ShopContext.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'zustand';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'swr/infinite';
+import 'vanilla-lazyload';
+import './useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import 'classnames';
+import 'dayjs';
+import isBrowser from '../helpers/is-browser.js';
+import '../helpers/convert.js';
+
+let swatchChange = false;
+let colorChange = false;
+const useInitialSwatchesOptions = (options)=>{
+    const fetcher = useFetchHandle();
+    const changeSwatches = useShopStore((s)=>s.changeSwatches);
+    const { swatches } = useSwatches();
+    const { data: productOptionName } = useSWR([
+        '/query/productOptionName',
+        {}
+    ], async ()=>fetchProductValueLabel(fetcher), {
+        revalidateOnMount: true
+    });
+    const swatchesTitleList = [];
+    swatches?.forEach((el)=>{
+        swatchesTitleList.push(el.optionTitle);
+    });
+    productOptionName?.productOptionName?.forEach((el)=>{
+        if (!swatchesTitleList.includes(el)) {
+            swatchChange = true;
+            swatches?.push({
+                optionTitle: el,
+                optionType: 'rectangle_list',
+                optionValues: []
+            });
+        }
+    });
+    if (!options) return [];
+    setDefaultSwatches(swatches, options);
+    if (isBrowser() && swatches?.length && (swatchChange || colorChange)) {
+        window?.parent?.postMessage?.(JSON.stringify({
+            type: 'update-swatches',
+            swatches
+        }), '*');
+        changeSwatches(swatches);
+    }
+    swatchChange = false;
+};
+const getColorDefault = (label, color)=>{
+    const colorByLabel = label ? colorPreset[label.toLocaleLowerCase()] : undefined;
+    const colorArray = colorByLabel ? [
+        colorByLabel
+    ] : [];
+    const firstColor = color?.[0];
+    if (!firstColor && colorArray.length) colorChange = true;
+    return firstColor ? [
+        firstColor
+    ] : colorArray;
+};
+const getProductOptionsLabelByName = (options, name)=>{
+    const labels = [];
+    const optionByName = options.find((op)=>op.name === name);
+    optionByName?.values.forEach((val)=>{
+        labels.push(val.label ?? '');
+    });
+    return labels;
+};
+const getSwatchesOptionsLabel = (options)=>{
+    const labels = [];
+    options.forEach((op)=>{
+        labels.push(op.label ?? '');
+        return;
+    });
+    return labels;
+};
+const setDefaultSwatches = (swatches, options)=>{
+    if (swatches) {
+        swatches?.map((sw)=>{
+            const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
+            const swLabels = getSwatchesOptionsLabel(sw.optionValues);
+            productLabels.forEach((label)=>{
+                if (!swLabels.includes(label)) {
+                    sw.optionValues.push({
+                        label,
+                        colors: getColorDefault(label),
+                        imageUrl: ''
+                    });
+                }
+            });
+            sw.optionValues = sw.optionValues.map((op)=>{
+                if (op.imageUrl === undefined) swatchChange = true;
+                return {
+                    label: op.label ?? '',
+                    colors: getColorDefault(op.label, op.colors),
+                    imageUrl: op.imageUrl ?? ''
+                };
+            });
+        });
+    }
+    return swatches;
+};
+const fetchProductValueLabel = async (fetcher)=>{
+    const initVariables = {};
+    const query = async (variables)=>{
+        const response = await fetcher([
+            ProductOptionNameDocument,
+            variables
+        ]);
+        return response;
+    };
+    return query(initVariables);
+};
+
+export { useInitialSwatchesOptions as default };

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/hooks/useIsomorphicLayoutEffect.js

@@ -1 +1,6 @@
-import{useLayoutEffect as o}from"react";let useIsomorphicLayoutEffect=o;export{useIsomorphicLayoutEffect as default};
+import { useLayoutEffect } from 'react';
+
+// const isBrowser = typeof window !== 'undefined';
+const useIsomorphicLayoutEffect = useLayoutEffect;
+
+export { useIsomorphicLayoutEffect as default };

package/dist/esm/hooks/useLoadScript.js

@@ -1 +1,28 @@
-import{useState as r,useEffect as t}from"react";import{loadScript as o}from"../helpers/load-script.js";function useLoadScript(a,i){let[e,n]=r("loading"),c=JSON.stringify(i);return t(()=>{(async function(){try{n("loading"),await o(a,i),n("done")}catch(r){n("error")}})()},[a,c,i]),e}export{useLoadScript as default};
+import { useState, useEffect } from 'react';
+import { loadScript } from '../helpers/load-script.js';
+
+/**
+ * The `useLoadScript` hook loads an external script tag on the client-side.
+ */ function useLoadScript(url, options) {
+    const [status, setStatus] = useState('loading');
+    const stringifiedOptions = JSON.stringify(options);
+    useEffect(()=>{
+        async function loadScriptWrapper() {
+            try {
+                setStatus('loading');
+                await loadScript(url, options);
+                setStatus('done');
+            } catch (error) {
+                setStatus('error');
+            }
+        }
+        loadScriptWrapper();
+    }, [
+        url,
+        stringifiedOptions,
+        options
+    ]);
+    return status;
+}
+
+export { useLoadScript as default };

package/dist/esm/hooks/useMoney.js

@@ -1 +1,80 @@
-import{useMemo as r}from"react";import{useLocale as t,useCurrency as e}from"./shop.js";let useMoney=a=>{let{locale:o}=t(),{currency:m}=e(),i=r(()=>({style:"currency",currency:m}),[m]),n=useLazyFormatter(o,i),u=useLazyFormatter(o,{...i,currencyDisplay:"name"}),c=useLazyFormatter(o,{...i,currencyDisplay:"narrowSymbol"}),l=useLazyFormatter(o,{...i,minimumFractionDigits:0,maximumFractionDigits:0}),s=useLazyFormatter(o),y=useLazyFormatter(o,{minimumFractionDigits:0,maximumFractionDigits:0}),f=r=>"currency"===r.type,F=r(()=>({currencyCode:()=>m,localizedString:()=>n().format(a),parts:()=>n().formatToParts(a),withoutTrailingZeros:()=>a%1==0?l().format(a):n().format(a),withoutTrailingZerosAndCurrency:()=>a%1==0?y().format(a):s().format(a),currencyName:()=>u().formatToParts(a).find(f)?.value??m,currencySymbol:()=>n().formatToParts(a).find(f)?.value??m,currencyNarrowSymbol:()=>c().formatToParts(a).find(f)?.value??"",amount:()=>n().formatToParts(a).filter(r=>["decimal","fraction","group","integer","literal"].includes(r.type)).map(r=>r.value).join("")}),[m,a,u,n,c,s,l,y]);return r(()=>new Proxy(F,{get:(r,t)=>Reflect.get(r,t)?.call(null)}),[F])};function useLazyFormatter(t,e){return r(()=>{let r;return()=>r??=new Intl.NumberFormat(t,e)},[t,e])}export{useMoney as default};
+import { useMemo } from 'react';
+import { useLocale, useCurrency } from './shop.js';
+
+const useMoney = (amount)=>{
+    const { locale } = useLocale();
+    const { currency } = useCurrency();
+    const options = useMemo(()=>({
+            style: 'currency',
+            currency: currency
+        }), [
+        currency
+    ]);
+    const defaultFormatter = useLazyFormatter(locale, options);
+    const nameFormatter = useLazyFormatter(locale, {
+        ...options,
+        currencyDisplay: 'name'
+    });
+    const narrowSymbolFormatter = useLazyFormatter(locale, {
+        ...options,
+        currencyDisplay: 'narrowSymbol'
+    });
+    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('')
+        }), [
+        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
+    ]);
+};
+function useLazyFormatter(locale, options) {
+    return useMemo(()=>{
+        let memoized;
+        return ()=>memoized ??= new Intl.NumberFormat(locale, options);
+    }, [
+        locale,
+        options
+    ]);
+}
+
+export { useMoney as default };