@redneckz/wildless-cms-uni-blocks 0.14.934 → 0.14.936

package/lib/ui-kit/InfoCard/InfoCard.d.ts

@@ -1,8 +1,10 @@
 import { type IconVersion } from '../../model/IconVersion';
+import { type Picture } from '../../model/Picture';
 import { type IconName } from '../Icon/IconProps';
 export interface InfoCardProps {
     __html?: string;
     icon?: IconName;
     iconVersion?: IconVersion;
+    image?: Picture;
 }
 export declare const InfoCard: import("@redneckz/uni-jsx").UNIComponent<InfoCardProps, any, any>;

package/lib/ui-kit/InfoCard/InfoCard.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from '../Icon/Icon.js';
+import { Img } from '../Img/Img.js';
 import { RichText } from '../RichText/RichText.js';
-export const InfoCard = JSX(({ __html, icon = 'InfoCircleIcon', iconVersion = 'black' }) => (_jsxs("div", { className: "flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m", children: [_jsx("div", { className: "rounded-full bg-white p-xs", children: _jsx(Icon, { name: icon, width: "24", height: "24", iconVersion: iconVersion }) }), _jsx("div", { className: "", children: _jsx(RichText, { __html: __html }) })] })));
+export const InfoCard = JSX(({ __html, icon = 'InfoCircleIcon', iconVersion = 'black', image }) => (_jsxs("div", { className: "flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m", children: [_jsx("div", { className: "rounded-full bg-white p-xs", children: image ? (_jsx(Img, { image: image, className: "block w-max" })) : (_jsx(Icon, { name: icon, width: "24", height: "24", iconVersion: iconVersion })) }), _jsx("div", { className: "", children: _jsx(RichText, { __html: __html }) })] })));
 //# sourceMappingURL=InfoCard.js.map

package/lib/ui-kit/InfoCard/InfoCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.js","sourceRoot":"","sources":["../../../src/ui-kit/InfoCard/InfoCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAQhD,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EAAE,MAAM,EAAE,IAAI,GAAG,gBAAgB,EAAE,WAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC,CAC9D,eAAK,SAAS,EAAC,8EAA8E,aAC3F,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,WAAW,EAAE,WAAW,GAAI,GACjE,EACN,cAAK,SAAS,EAAC,EAAE,YACf,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,GACxB,IACF,CACP,CACF,CAAC"}
+{"version":3,"file":"InfoCard.js","sourceRoot":"","sources":["../../../src/ui-kit/InfoCard/InfoCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAShD,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CACzB,CAAC,EAAE,MAAM,EAAE,IAAI,GAAG,gBAAgB,EAAE,WAAW,GAAG,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACrE,eAAK,SAAS,EAAC,8EAA8E,aAC3F,cAAK,SAAS,EAAC,4BAA4B,YACxC,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,GAAG,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,aAAa,GAAG,CAC9C,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,WAAW,EAAE,WAAW,GAAI,CACtE,GACG,EACN,cAAK,SAAS,EAAC,EAAE,YACf,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,GAAI,GACxB,IACF,CACP,CACF,CAAC"}

package/mobile/bundle/bundle.umd.js

@@ -4643,7 +4643,7 @@
         return [storedValue, setValue];
     }
 
-    const InfoCard = JSX(({ __html, icon = 'InfoCircleIcon', iconVersion = 'black' }) => (jsxs("div", { className: "flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m", children: [jsx("div", { className: "rounded-full bg-white p-xs", children: jsx(Icon, { name: icon, width: "24", height: "24", iconVersion: iconVersion }) }), jsx("div", { className: "", children: jsx(RichText, { __html: __html }) })] })));
+    const InfoCard = JSX(({ __html, icon = 'InfoCircleIcon', iconVersion = 'black', image }) => (jsxs("div", { className: "flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m", children: [jsx("div", { className: "rounded-full bg-white p-xs", children: image ? (jsx(Img, { image: image, className: "block w-max" })) : (jsx(Icon, { name: icon, width: "24", height: "24", iconVersion: iconVersion })) }), jsx("div", { className: "", children: jsx(RichText, { __html: __html }) })] })));
 
     const getCardTypes = async (paymentSystemTypeCd, creditProgramId) => {
         const data = await fetchRetailJSON('/dictionaryFiltered', 'POST', {
@@ -8493,6 +8493,174 @@
         return (jsxs(BlockWrapper, { className: style('flex flex-col', className), defaultPadding: "p-2xl", ...rest, children: [jsx(Img, { className: "self-center", image: icon }), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button?.text ? jsx(LinkButton, { className: "w-full mt-m mb-lg", ...button }) : null, hiddenCells.length ? (jsxs(Foldable, { children: [jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isVisible, children: hiddenCells })] }), cardCells.length >= visibleCellsCount ? (jsx(DefaultFoldButton, { className: "mt-m", label: isVisible ? 'Скрыть' : 'Подробнее о тарифе', isUnfolded: isVisible, embedded: true, data: data, onClick: handleFold })) : null] })) : (jsx("div", { children: visibleCells }))] }));
     });
 
+    const MAX_MONTH_CASHBACK = 5000;
+    const MAX_YEAR_CASHBACK = 60000;
+    const ResultText = JSX(({ text, value }) => (jsxs("div", { className: "space-y-xs w-full", children: [jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: text }), jsx("div", { className: "w-full text-2xl bg-main-gray px-4 py-3 rounded-md", children: `${toLocalNumberFormat()(value)} ₽` })] })));
+    const CashbackCalculatorResult = JSX(({ cashbacks }) => {
+        const { mounth, year } = getResult(cashbacks);
+        return (jsxs("div", { className: "w-full flex flex-col gap-lg", children: [jsx(Headline, { title: "\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u0440\u0430\u0441\u0447\u0435\u0442\u0430", description: "\u041A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 \u043A\u0435\u0448\u0431\u044D\u043A\u0430 \u043F\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043B\u044C\u043D\u043E", headlineVersion: "XS", isEmbedded: true, align: "text-left" }), jsxs("div", { className: "flex flex-col @xs:flex-row gap-lg", children: [jsx(ResultText, { text: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0432 \u043C\u0435\u0441\u044F\u0446", value: mounth }), jsx(ResultText, { text: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0432 \u0433\u043E\u0434", value: year })] })] }));
+    });
+    const getResult = (cashbacks) => {
+        return cashbacks.reduce((acc, val) => {
+            const mounthSum = (Number(val.percent.key) / 100) * val.sum;
+            return {
+                mounth: Math.min(acc.mounth + mounthSum, MAX_MONTH_CASHBACK),
+                year: Math.min(acc.year + mounthSum * 12, MAX_YEAR_CASHBACK),
+            };
+        }, {
+            mounth: 0,
+            year: 0,
+        });
+    };
+
+    const AllPercentCategories = [
+        {
+            text: 'Категория на кешбэк 1,5%',
+            key: '1.5',
+        },
+        {
+            text: 'Категория на кешбэк 3%',
+            key: '3',
+        },
+        {
+            text: 'Категория на кешбэк 5%',
+            key: '5',
+        },
+        {
+            text: 'Категория на кешбэк 10%',
+            key: '10',
+        },
+        {
+            text: 'Категория на кешбэк 15%',
+            key: '15',
+        },
+    ];
+    const PercentCategoriesWithoutIncreased = [
+        {
+            text: 'Категория на кешбэк 1,5%',
+            key: '1.5',
+        },
+        {
+            text: 'Категория на кешбэк 3%',
+            key: '3',
+        },
+    ];
+    const CashbackCategory = JSX(({ categories, cashback, showIncreasedPercents, maxInputRange, deleteImage, onDelete, onChange, }) => {
+        const [currentCategory, setCurrentCategory] = useState(getRandomElement(categories));
+        const isMainCashback = cashback.id === 0;
+        const onChangePercent = (value) => {
+            onChange({
+                ...cashback,
+                percent: value,
+            });
+        };
+        const onChangeSum = (value) => {
+            onChange({
+                ...cashback,
+                sum: value,
+            });
+        };
+        return (jsxs("div", { className: "w-full space-y-m", children: [jsxs("div", { className: "space-y-xs", children: [jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E \u043A\u0435\u0448\u0431\u044D\u043A\u0430" }), jsxs("div", { className: "flex gap-m", children: [jsx(Select, { className: "w-full", isManualInput: isMainCashback, placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u044D\u0448\u0431\u044D\u043A", options: getPercentCategories(isMainCashback, showIncreasedPercents), value: cashback.percent, onChange: onChangePercent }), !isMainCashback ? (jsx(Button, { version: "secondary", onClick: () => onDelete(cashback.id), shape: "round", className: "px-4 rounded-md", children: jsx(Img, { image: deleteImage }) })) : null] })] }), categories?.length && !isMainCashback ? (jsx(Select, { label: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u043E\u0440\u0438\u044E", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u043E\u0440\u0438\u044E", options: categories, value: currentCategory, onChange: setCurrentCategory })) : null, jsx(InputRange, { step: 500, title: "\u0421\u0443\u043C\u043C\u0430 \u043F\u043E\u043A\u0443\u043F\u043E\u043A \u0432 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438", min: 0, max: maxInputRange, value: cashback.sum, onChange: onChangeSum })] }));
+    });
+    const getRandomElement = (arr) => arr?.[new Date().getTime().toString().slice(-1)];
+    const getPercentCategories = (isMainCashback, showIncreasedPercents) => {
+        if (isMainCashback) {
+            return [];
+        }
+        else if (showIncreasedPercents) {
+            return AllPercentCategories;
+        }
+        else {
+            return PercentCategoriesWithoutIncreased;
+        }
+    };
+
+    const DEFAULT_MULTIPLE_CASHBACK = [
+        {
+            id: 0,
+            percent: {
+                text: 'Категория на кешбэк 1%',
+                key: '1',
+            },
+            sum: 5000,
+        },
+        {
+            id: 1,
+            percent: {
+                text: 'Категория на кешбэк 1,5%',
+                key: '1.5',
+            },
+            sum: 5000,
+        },
+        {
+            id: 2,
+            percent: {
+                text: 'Категория на кешбэк 1,5%',
+                key: '1.5',
+            },
+            sum: 5000,
+        },
+    ];
+    const DEFAULT_CASHBACK = [
+        {
+            id: 0,
+            percent: {
+                text: 'Категория на кешбэк 1%',
+                key: '1',
+            },
+            sum: 5000,
+        },
+    ];
+    const useCashbackCalculator = (isMultiple) => {
+        const { data } = useLeadFormData('CASHBACK_CATEGORY');
+        const [cashbacks, setCashbacks] = useState(isMultiple ? DEFAULT_MULTIPLE_CASHBACK : DEFAULT_CASHBACK);
+        const categories = data?.map((_) => ({
+            key: _.key || '',
+            text: _.value,
+        })) || [];
+        const onAddNewCashback = () => setCashbacks((_) => [
+            ..._,
+            {
+                id: _[_.length - 1].id + 1,
+                percent: {
+                    text: 'Категория на кешбэк 1,5%',
+                    key: '1.5',
+                },
+                sum: 5000,
+            },
+        ]);
+        const onChangeCashback = (item) => setCashbacks((prev) => prev.map((_) => {
+            if (_.id === item.id) {
+                return item;
+            }
+            return _;
+        }));
+        const onDeleteCashback = (id) => setCashbacks((prev) => prev.filter((_) => _.id !== id));
+        const onResetCashback = () => setCashbacks(DEFAULT_CASHBACK);
+        return {
+            cashbacks,
+            categories,
+            onAddNewCashback,
+            onChangeCashback,
+            onDeleteCashback,
+            onResetCashback,
+        };
+    };
+
+    const INCREASED_PERCENTS = ['5', '10', '15'];
+    const MAX_CATEGORIES = 5;
+    const INFO_BLOCK_HTML = `<p>Полученные баллы можно конвертировать в рубли и компенсировать покупки у партнеров. Подробнее в <a href='#docs'>документах</a></p>`;
+    const CashbackCalculator = JSX(({ maxInputRange = 300000, image, deleteImage, infoImage, isMultiple = false, className = '', ...rest }) => {
+        const { cashbacks, categories, onAddNewCashback, onChangeCashback, onDeleteCashback, onResetCashback, } = useCashbackCalculator(isMultiple);
+        const img = image?.src ? (jsx(Img, { image: image, className: "hidden w-full @xl:block", imageClassName: "justify-self-center" })) : null;
+        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center gap-lg', className), defaultPadding: style('p-6xl'), ...rest, children: [jsx(Headline, { title: "\u041A\u0430\u043B\u044C\u043A\u0443\u043B\u044F\u0442\u043E\u0440 \u043A\u0435\u0448\u0431\u044D\u043A\u0430", description: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 5 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439 \u043A\u0435\u0448\u0431\u044D\u043A\u0430, \u0438 \u0432\u044B \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u0435 \u043E\u0431\u0449\u0438\u0439 \u0440\u0430\u0441\u0447\u0435\u0442 \u043F\u043E\u043B\u0443\u0447\u0430\u0435\u043C\u043E\u0433\u043E \u043A\u0435\u0448\u0431\u044D\u043A\u0430", headlineVersion: "XL", isEmbedded: true }), jsxs("div", { className: "flex flex-row items-start gap-lg", children: [jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-lg", children: [cashbacks.map((_) => (jsx(CashbackCategory, { categories: categories, cashback: _, showIncreasedPercents: showIncreasedPercents(_, cashbacks), maxInputRange: maxInputRange, deleteImage: deleteImage, onDelete: onDeleteCashback, onChange: onChangeCashback }, String(_.id)))), renderButtons$1(cashbacks.length, onAddNewCashback, onResetCashback), jsx(CashbackCalculatorResult, { cashbacks: cashbacks }), jsx(InfoCard, { __html: INFO_BLOCK_HTML, image: infoImage }), jsx(LinkButton, { className: "w-full @lg:w-auto self-start", href: "#zayavka", text: "\u041E\u0444\u043E\u0440\u043C\u0438\u0442\u044C \u043A\u0430\u0440\u0442\u0443", version: "primary" })] }), img] })] }));
+    });
+    const renderButtons$1 = (cashbacksLength, onAddNewCashback, onResetCashback) => {
+        return (jsxs("div", { className: "w-full flex flex-col gap-lg", children: [cashbacksLength < MAX_CATEGORIES ? (jsx(Button, { className: "self-start text-primary-main", embedded: true, version: "secondary", onClick: onAddNewCashback, children: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0435\u0449\u0435" })) : null, cashbacksLength > 2 ? (jsx(Button, { className: "self-start", version: "secondary", onClick: onResetCashback, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438" })) : null] }));
+    };
+    const showIncreasedPercents = (currentCashback, cashback) => INCREASED_PERCENTS.includes(currentCashback.percent.key) ||
+        !cashback.some((_) => INCREASED_PERCENTS.includes(_.percent.key));
+
     const ProgressBar = JSX(({ step = 10, description, showPercentage = true }) => (jsxs("div", { children: [jsx("div", { className: "h-4 w-full bg-gray relative", children: jsx("div", { className: "h-4 bg-green", style: { width: `${step}%` } }) }), jsxs("div", { className: "relative", children: [showPercentage ? jsxs("div", { className: "absolute left-2/4 text-green", children: [step, "%"] }) : null, description ? jsx("div", { className: "text-right pr-m text-gray", children: description }) : null] })] })));
 
     const CreditCardFormProgress = JSX(({ step = 1, totalSteps = 6, stepsTitles = [] }) => {
@@ -12103,6 +12271,7 @@
         CreditCardForm,
         CreditForm,
         DebitForm,
+        CashbackCalculator,
     };
 
     const applyAspects = (aspects) => (ev) => {
@@ -12226,7 +12395,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.933";
+    const packageVersion = "0.14.935";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;