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

package/bundle/bundle.umd.js

@@ -4635,7 +4635,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', {
@@ -8497,6 +8497,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(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 = (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 ContactsBlock = JSX(({ className, contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: style('flex', className), defaultPadding: "p-6xl", version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
     const renderBlocks = (info) => (jsx("div", { className: "flex gap-5xl grow basis-0", children: info.map((column, i) => renderBlocksColumn({ column, i })) }));
     const renderBlocksColumn = ({ column, i }) => column ? (jsx("div", { className: "flex flex-col gap-xl grow basis-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { children: [jsx(Headline, { title: title, description: description, headlineVersion: "XS", align: "text-left", isEmbedded: true }), additionalDescription ? (jsx("div", { className: "mt-xs opacity-80", children: jsx(Paragraph, { size: "text-m", font: "font-light", children: additionalDescription }) })) : null, jsx("div", { className: style({ 'mt-xl': Boolean(button?.text) }), children: renderButtonsSection([button]) })] }, String(key)))) }, `col-${String(i)}`)) : null;
@@ -12301,6 +12469,7 @@
         CreditCardForm,
         CreditForm,
         DebitForm,
+        CashbackCalculator,
     };
 
     const applyAspects = (aspects) => (ev) => {
@@ -12444,7 +12613,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;