@redneckz/wildless-cms-uni-blocks 0.14.899 → 0.14.900

package/bundle/bundle.umd.js

@@ -755,10 +755,10 @@
     const and = (a, b) => (...args) => a(...args) && b(...args);
 
     const table = (...table) => (...input) => {
-        const [, unit] = assertNonEmpty(table.find(([predicate]) => predicate(...input)));
+        const [, unit] = assertNonEmpty$1(table.find(([predicate]) => predicate(...input)));
         return unit(...input);
     };
-    function assertNonEmpty(value) {
+    function assertNonEmpty$1(value) {
         if (!value) {
             throw new Error('Value should be fulfilled');
         }
@@ -10151,6 +10151,214 @@
     };
     const ErrorBlock = JSX(({ className = '', title, description, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center', className), defaultPadding: style('p-6xl'), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center", children: renderErrorContent(error) }), jsx(Headline, { title: title, description: description, headlineVersion: "XL", isEmbedded: true, className: "mb-2xl last:mb-0" }), button?.text ? (jsx(LinkButton, { version: button?.version, text: button?.text, ...button })) : null] })));
 
+    const REGION_URL = `${API_BASE_URI$1}/region`;
+    function useLocation(defaultLocation = 'Москва') {
+        const locationStore = useLocalStore();
+        return locationStore.location ?? { name: defaultLocation };
+    }
+    function useDefaultLocation(defaultLocation = 'Москва') {
+        const locationStore = useLocalStore();
+        const preselectLocation = useCallback(async () => {
+            if (!locationStore.location) {
+                const region = await fetchJSON(REGION_URL);
+                locationStore.location = region ?? { name: defaultLocation };
+            }
+        }, [locationStore, defaultLocation]);
+        useAsyncData(REGION_URL, preselectLocation);
+        return locationStore;
+    }
+
+    var Currency;
+    (function (Currency) {
+        Currency["RUB"] = "RUB";
+        Currency["EUR"] = "EUR";
+        Currency["USD"] = "USD";
+        Currency["CNY"] = "CNY";
+    })(Currency || (Currency = {}));
+
+    const currencyNumberFormat = new Intl.NumberFormat('ru', {
+        style: 'currency',
+        currency: Currency.RUB,
+    });
+    const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
+
+    const TABLE_STYLE_BASE = 'text-m font-light text-secondary-text ';
+    const TABLE_HEAD_STYLE = `${TABLE_STYLE_BASE} text-left`;
+    const TABLE_HEAD_STYLE_CENTER = `${TABLE_STYLE_BASE} pl-5xl text-center`;
+    const TABLE_HEAD_STYLE_RIGHT = `${TABLE_STYLE_BASE} pl-5xl text-right`;
+    const CURRENCY_ICONS_MAP = {
+        USD: 'DollarIcon',
+        EUR: 'EuroIcon',
+        CNY: 'ChineseYuanRenminbiIcon',
+    };
+    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: style('h-fit w-full', className), children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: jsx(Text, { size: "text-m", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), jsx("th", { className: TABLE_HEAD_STYLE_CENTER, children: jsx(Text, { size: "text-m", children: "\u041A\u0443\u043F\u0438\u0442\u044C" }) }), jsx("th", { className: TABLE_HEAD_STYLE_RIGHT, children: jsx(Text, { size: "text-m", children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" }) })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
+    const renderCurrencyRow = (exchangeCurrencyItem) => {
+        const currency = exchangeCurrencyItem?.currency?.currency;
+        return (jsxs("tr", { className: "pb-2xs text-h6", children: [jsx("td", { className: "pt-m m-auto flex text-left", children: jsxs("div", { className: "flex items-center gap-xs", children: [currency ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx(Text, { size: "text-h6", children: currency })] }) }), jsx("td", { className: "pt-m pl-5xl text-center", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }) }), jsx("td", { className: "pt-m pl-5xl text-right", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) }) })] }, currency));
+    };
+
+    const icon = { icon: 'GpsIcon' };
+    const CurrentLocation = JSX(({ className = '', address }) => (jsxs("div", { className: style('flex gap-s w-full justify-between @sm:justify-center', className), children: [jsx(RoundedIcon, { ...icon, iconBgVersion: "primary", className: "shrink-0" }), jsxs("div", { className: "space-y-2xs whitespace-pre-wrap", children: [address ? (jsx(Paragraph, { size: "text-l", color: "text-primary-main", children: address })) : null, jsx(Paragraph, { size: "text-m", color: "text-secondary-text", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
+
+    const roundTo = (value, precision = 2) => {
+        const factor = 10 ** precision;
+        return Math.round(parseFloat(String(value)) * factor) / factor;
+    };
+
+    const calculateResult = (value, rate, precision) => {
+        const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+        return Number.isInteger(result) ? result : roundTo(result);
+    };
+    const formatValue = (value) => value.replace(/[^\d.,]/g, '').replace(',', '.');
+
+    function assertNonEmpty(value) {
+        if (!value) {
+            throw new Error('Value should be fulfilled');
+        }
+        return value;
+    }
+
+    const baseTableFunc = (table) => (input) => {
+        const [, unit] = assertNonEmpty(table.find(([predicate]) => predicate(input)));
+        return unit(input);
+    };
+    const tableFunc = (table) => baseTableFunc(table.map(([p, o]) => [p, () => o]));
+    tableFunc.if = (predicate) => new TableFuncBuilder(undefined, predicate);
+    class TableFuncBuilder {
+        parent;
+        predicate;
+        unit;
+        get entry() {
+            return [assertNonEmpty(this.predicate), assertNonEmpty(this.unit)];
+        }
+        constructor(parent, predicate, unit) {
+            this.parent = parent;
+            this.predicate = predicate;
+            this.unit = unit;
+        }
+        if(predicate) {
+            return new TableFuncBuilder(this, predicate);
+        }
+        then(unit) {
+            return new TableFuncBuilder(this.parent, this.predicate, unit);
+        }
+        else(unit) {
+            return baseTableFunc([...buildTable(this), [() => true, unit]]);
+        }
+    }
+    const buildTable = (builder) => [
+        ...(builder?.parent ? buildTable(builder.parent) : []),
+        builder.entry,
+    ];
+
+    const callbackCurrencySelect = (props) => tableFunc([
+        [
+            (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
+            () => props.handleConvert(props.value, Currency.RUB),
+        ],
+        [
+            (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
+            () => props.handleConvert(props.value, Currency.USD),
+        ],
+        [
+            (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
+            () => props.handleConvert(props.value, Currency.CNY),
+        ],
+        [() => true, () => props.handleConvert(props.value)],
+    ])(props)?.();
+
+    function renderInput(props) {
+        const { placeholder, rates, selected, value, onChange, setSelected } = props;
+        const ratesOptions = rates.map((_) => ({
+            key: _?.currency?.currency ?? '',
+            text: _?.currency?.currency ?? '',
+        }));
+        const selectedValue = { key: selected, text: selected };
+        return (jsxs("div", { className: "relative flex", children: [jsx(Input, { className: "shrink-0 text-l w-full appearance-none -mr-20", placeholder: placeholder, type: "text", value: value, onChange: onChange }), ratesOptions.length ? (jsx(Select, { className: "absolute right-0", isBorder: false, onChange: (_) => setSelected(_.key), options: ratesOptions, value: selectedValue })) : null] }));
+    }
+
+    const ExchangeCurrencyCalculator = JSX(({ className = '', currencyRatesBuy, currencyRatesSell, button }) => {
+        const [calcState, setCalcState] = useState({
+            inputSell: '',
+            inputBuy: '',
+            selectSell: currencyRatesBuy?.[0]?.currency?.currency || Currency.RUB,
+            selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
+        });
+        const handleSetCalcState = useCallback((newState) => setCalcState((oldState) => ({ ...oldState, ...newState })), []);
+        return (jsxs("div", { className: `flex flex-col gap-m pt-2xl ${className}`, children: [currencyRatesBuy && currencyRatesSell ? (jsxs("div", { className: "grid gap-m", children: [renderInput({
+                            placeholder: 'Хочу продать',
+                            rates: currencyRatesSell,
+                            selected: calcState.selectSell,
+                            setSelected: handleSelectSell(calcState, handleSetCalcState, currencyRatesSell),
+                            value: calcState.inputSell,
+                            onChange: (value) => handleInputSell(handleSetCalcState, currencyRatesSell)(value, calcState.selectSell, calcState.selectBuy),
+                        }), renderInput({
+                            placeholder: 'Получу',
+                            rates: currencyRatesBuy,
+                            selected: calcState.selectBuy,
+                            setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
+                            value: calcState.inputBuy,
+                            onChange: (value) => handleInputBuy(handleSetCalcState, currencyRatesBuy)(value, calcState.selectBuy, calcState.selectSell),
+                        })] })) : null, button?.text ? (jsx(LinkButton, { text: button.text, version: button?.version, ...button })) : null] }));
+    });
+    const handleSelectSell = (calcState, setCalcState, currencyRatesSell) => (value) => {
+        setCalcState({ selectSell: value });
+        callbackCurrencySelect({
+            value,
+            oppositeValue: calcState.selectBuy,
+            handleConvert: (currencyFrom = calcState.selectSell, currencyTo = calcState.selectBuy) => {
+                handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, currencyFrom, currencyTo);
+            },
+        });
+    };
+    const handleSelectBuy = (calcState, setCalcState, currencyRatesBuy) => (value) => {
+        setCalcState({ selectBuy: value });
+        callbackCurrencySelect({
+            value,
+            oppositeValue: calcState.selectSell,
+            handleConvert: (currencyTo = calcState.selectBuy, currencyFrom = calcState.selectSell) => handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, currencyTo, currencyFrom),
+        });
+    };
+    const handleInputSell = (setCalcState, currencyRatesSell) => (value, currencyFrom, currencyTo) => {
+        setCalcState({ inputSell: formatValue(value), selectBuy: currencyTo });
+        const rate = currencyRatesSell.find((_) => _.currency?.currency === currencyTo)?.buyExchangeRate ||
+            currencyRatesSell.find((_) => _.currency?.currency === currencyFrom)?.buyExchangeRate;
+        if (rate) {
+            setCalcState({
+                inputBuy: String(calculateResult(value, rate, currencyFrom === Currency.RUB) || ''),
+            });
+        }
+    };
+    const handleInputBuy = (setCalcState, currencyRatesBuy) => (value, currencyTo, currencyFrom) => {
+        setCalcState({ inputBuy: formatValue(value), selectSell: currencyFrom });
+        const rate = currencyRatesBuy.find((_) => _.currency?.currency === currencyFrom)?.saleExchangeRate ||
+            currencyRatesBuy.find((_) => _.currency?.currency === currencyTo)?.saleExchangeRate;
+        if (rate) {
+            setCalcState({
+                inputSell: String(calculateResult(value, rate, currencyTo === Currency.RUB) || ''),
+            });
+        }
+    };
+
+    const EXCHANGE_RATES_URL = `${API_BASE_URI$1}/exchangerates`;
+    function useFetchExchangeRateData(currentRegion) {
+        const regionCode = currentRegion?.code || '000';
+        const { data } = useAsyncData(EXCHANGE_RATES_URL + `?regionCode=${regionCode}`, fetchJSONUnsafe);
+        return data || {};
+    }
+
+    const ExchangeRateTile = JSX(({ className = '', title = 'Курсы обмена валют', button, ...rest }) => {
+        const currentLocation = useLocation();
+        const exchangeRates = useFetchExchangeRateData(currentLocation);
+        const currencyRates = getCurrencyRates(exchangeRates?.exchangeRate?.currencies);
+        const currencyRatesBuy = currencyRates.filter((_) => _.buyExchangeRate);
+        currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
+        const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
+        currencyRatesSell.push({ currency: { currency: Currency.RUB } });
+        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex w-full gap-6xl flex-wrap @lg:flex-nowrap", children: [jsxs("div", { className: "w-full @2xl:w-auto @5xl:w-1/2", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), jsx(ExchangeCurrencyCalculator, { className: "grow w-1/2", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })] }) }) }));
+    });
+    const getCurrencyRates = (currencies) => currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id)) || [];
+
     const LinkList = JSX(({ className = '', items }) => {
         const link = useLink();
         return (jsx("ul", { className: style('flex flex-col gap-s w-full', className), children: items?.map(renderLinkListItem(link)) }));
@@ -10717,23 +10925,6 @@
     const handleIntersectionActivation$1 = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation$1 = (index) => (prev) => Math.min(prev, index);
 
-    const REGION_URL = `${API_BASE_URI$1}/region`;
-    function useLocation(defaultLocation = 'Москва') {
-        const locationStore = useLocalStore();
-        return locationStore.location ?? { name: defaultLocation };
-    }
-    function useDefaultLocation(defaultLocation = 'Москва') {
-        const locationStore = useLocalStore();
-        const preselectLocation = useCallback(async () => {
-            if (!locationStore.location) {
-                const region = await fetchJSON(REGION_URL);
-                locationStore.location = region ?? { name: defaultLocation };
-            }
-        }, [locationStore, defaultLocation]);
-        useAsyncData(REGION_URL, preselectLocation);
-        return locationStore;
-    }
-
     const groupBy = (list, keyGetter) => {
         const result = new Map();
         for (const item of list) {
@@ -11598,6 +11789,7 @@
         ErrorBlock,
         Footer,
         GalleryLayout,
+        ExchangeRateTile,
         GrantSupport,
         Header,
         Headline,
@@ -11761,7 +11953,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.898";
+    const packageVersion = "0.14.899";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;