@redneckz/wildless-cms-uni-blocks 0.14.1069 → 0.14.1071

package/bundle/bundle.umd.js

@@ -823,11 +823,11 @@
             ? 'bg-secondary-light text-primary-main'
             : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
 
-    const RichText = JSX(({ __html = '', richVersion = '', itemSize = 'list-m', isDotted = true, children }) => {
+    const RichText = JSX(({ __html = '', richVersion = '', itemSize = 'list-m', className, isDotted = true, children, }) => {
         const dotStyle = isDotted ? '' : 'without-dots';
         return __html || children ? (
         /* Attribute [data-component] need for correct render in wcms editor. Do not remove. */
-        jsx("div", { "data-component": "rich-text-container", children: jsx("div", { className: style(richVersion, itemSize, 'md-container group-data-secondary:text-white group-data-gray:text-secondary-text', dotStyle), dangerouslySetInnerHTML: __html ? { __html } : undefined, children: children }) })) : null;
+        jsx("div", { "data-component": "rich-text-container", children: jsx("div", { className: style(richVersion, itemSize, 'md-container group-data-secondary:text-white group-data-gray:text-secondary-text', dotStyle, className), dangerouslySetInnerHTML: __html ? { __html } : undefined, children: children }) })) : null;
     });
 
     const renderBenefitDescription = (description, i) => description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description }, `description-${i}`)) : null;
@@ -6897,7 +6897,7 @@
         return res || {};
     };
 
-    const createParticipant = (body) => fetchRetailJSON('/external/public-data/createParticipant', 'POST', body).then((res) => res || null);
+    const createParticipant = (body) => fetchRetailJSON('/internal/entities/createParticipant', 'POST', body).then((res) => res || null);
 
     const createUserProfile = (body) => fetchRetailJSON('/public-data/createUserProfile', 'POST', body).then((res) => res?.profile?.id || null);
 
@@ -6966,7 +6966,7 @@
         'bg-white': 'text-primary-main',
         transparent: 'text-white',
     };
-    const renderImage = (bgColor, image, size) => {
+    const renderImage$1 = (bgColor, image, size) => {
         const img = image?.src
             ? image
             : {
@@ -6980,7 +6980,7 @@
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
-    const Logo = JSX(({ className, href = '/', logo, children, targetBlank, bgColor = 'bg-white', showTitle = true, data, size = ICON_SIZE, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: logo?.href ?? href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title ?? 'Россельхозбанк', ...getAspectsAttributes(data), children: [renderImage(bgColor, logo?.image, size), showTitle
+    const Logo = JSX(({ className, href = '/', logo, children, targetBlank, bgColor = 'bg-white', showTitle = true, data, size = ICON_SIZE, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: logo?.href ?? href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title ?? 'Россельхозбанк', ...getAspectsAttributes(data), children: [renderImage$1(bgColor, logo?.image, size), showTitle
                 ? children ?? (jsx("div", { className: "ml-s", children: jsx(Text, { font: "font-medium", color: TEXT_COLOR[bgColor], size: logoTitleSizeStyle, children: logo?.title ?? 'Россельхозбанк' }) }))
                 : null] })));
 
@@ -7837,43 +7837,26 @@
             try {
                 startSending();
                 const transformedFormData = transformFormData(formData);
-                const participantData = await createParticipant({
-                    phone: formatPhone(transformedFormData.phone),
-                    email: transformedFormData.email,
-                });
                 const referalData = leadFormStore.referalData;
                 const marketingInfo = sessionStore.marketingInfo;
-                if (!participantData) {
-                    throw new Error();
-                }
-                const { participantId, userId } = participantData;
-                if (!participantId) {
-                    throw new Error();
-                }
                 const common = {
                     programId,
-                    userId,
                     productType,
                     sendAspects,
                     verifyPhoneDialog,
                     handleFailSendForm,
                 };
                 const taskData = {
-                    participantId,
                     formData: transformedFormData,
                     referalData,
                     marketingInfo,
                     saveUserData,
                 };
-                const sendCurrentTask = createSendCurrentTaskNew({
-                    common,
-                    taskData,
-                    consentBkiDialog,
-                });
                 const handleSuccessVerify = createHandleSuccessVerifyNew({
                     common,
+                    taskData,
                     draftDialog,
-                    sendCurrentTask,
+                    consentBkiDialog,
                 });
                 const acceptedConsents = getAcceptedConsents(transformedFormData, productType);
                 verifyPhoneDialog.open({
@@ -7898,6 +7881,9 @@
     const createSendCurrentTaskNew = ({ common, taskData, consentBkiDialog, }) => async () => {
         const { programId, userId, productType, sendAspects, verifyPhoneDialog, handleFailSendForm } = common;
         const { participantId, formData, referalData, marketingInfo, saveUserData } = taskData;
+        if (!participantId) {
+            throw new Error();
+        }
         const taskId = await updateUserDataNewMicroservice({
             programId,
             participantId,
@@ -7917,9 +7903,34 @@
             onFail: handleFailSendForm,
         });
     };
-    const createHandleSuccessVerifyNew = ({ common, draftDialog, sendCurrentTask, }) => async () => {
-        const { verifyPhoneDialog, sendAspects, handleFailSendForm, userId, programId, productType } = common;
+    const createHandleSuccessVerifyNew = ({ common, taskData, draftDialog, consentBkiDialog, }) => async () => {
+        const { programId, productType, sendAspects, verifyPhoneDialog, handleFailSendForm } = common;
+        const { formData } = taskData;
         try {
+            const participantData = await createParticipant({
+                phone: formatPhone(formData.phone),
+                email: formData.email,
+            });
+            if (!participantData) {
+                throw new Error();
+            }
+            const { participantId, userId } = participantData;
+            if (!participantId) {
+                throw new Error();
+            }
+            const updatedCommon = {
+                ...common,
+                userId,
+            };
+            const updatedTaskData = {
+                ...taskData,
+                participantId,
+            };
+            const sendCurrentTask = createSendCurrentTaskNew({
+                common: updatedCommon,
+                taskData: updatedTaskData,
+                consentBkiDialog,
+            });
             const lastTaskId = await getLastTaskStatus({ userId, programId });
             if (lastTaskId) {
                 const task = await getTaskById({ taskId: lastTaskId });
@@ -7936,7 +7947,8 @@
                 await sendCurrentTask();
             }
         }
-        catch {
+        catch (error) {
+            console.error('Error in handleSuccessVerify:', error);
             handleFailSendForm();
         }
     };
@@ -10248,27 +10260,30 @@
         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(Heading, { className: "text-left", headingType: "h5", as: "h2", title: "\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u0440\u0430\u0441\u0447\u0435\u0442\u0430" }), jsx(RichText, { __html: '\u041A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A \u0434\u043B\u044F \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0431\u0430\u043B\u043B\u043E\u0432 \u043F\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435.<br />\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435 \u043F\u043E \u0443\u0441\u043B\u043E\u0432\u0438\u044F\u043C \u0438 \u043D\u0430\u0447\u0438\u0441\u043B\u0435\u043D\u0438\u044F\u043C \u043C\u043E\u0436\u043D\u043E \u0443\u0437\u043D\u0430\u0442\u044C \u0432\u043E \u0432\u043A\u043B\u0430\u0434\u043A\u0435 <a href="#docs">\u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B</a>' }), 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 CashbackCalculatorResult = JSX(({ cashbacks, maxMonthCashback }) => {
+        const { month, year } = getResult(cashbacks, maxMonthCashback);
+        return (jsxs("div", { className: "w-full flex flex-col gap-lg", children: [jsx(Heading, { className: "text-left", headingType: "h5", as: "h2", title: "\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u0440\u0430\u0441\u0447\u0435\u0442\u0430" }), 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: month }), jsx(ResultText, { text: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0432 \u0433\u043E\u0434", value: year })] })] }));
     });
-    const getResult = (cashbacks) => {
+    const getResult = (cashbacks, maxMonthCashback) => {
         return cashbacks.reduce((acc, val) => {
-            const mounthSum = (Number(val.percent.key) / 100) * val.sum;
+            const mounthSum = (formatKey(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),
+                month: Math.min(acc.month + mounthSum, maxMonthCashback),
+                year: Math.min(acc.year + mounthSum * 12, maxMonthCashback * 12),
             };
         }, {
-            mounth: 0,
+            month: 0,
             year: 0,
         });
     };
+    const formatKey = (key) => Number(key.replace('-main', ''));
 
-    const AllPercentCategories = [
+    const ALL_PERCENT_STANDARD_CATEGORIES = [
+        {
+            text: 'Категория 1% «На всё»',
+            key: '1-main',
+        },
         {
             text: 'Категория 1,5%',
             key: '1.5',
@@ -10290,7 +10305,11 @@
             key: '15',
         },
     ];
-    const PercentCategoriesWithoutIncreased = [
+    const ALL_PERCENT_PREMIUM_CATEGORIES = [
+        {
+            text: 'Категория 1,5% «На всё»',
+            key: '1.5-main',
+        },
         {
             text: 'Категория 1,5%',
             key: '1.5',
@@ -10299,58 +10318,128 @@
             text: 'Категория 3%',
             key: '3',
         },
+        {
+            text: 'Категория 5%',
+            key: '5',
+        },
+        {
+            text: 'Категория 10%',
+            key: '10',
+        },
+        {
+            text: 'Категория 15%',
+            key: '15',
+        },
     ];
-    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" }), jsxs("div", { className: "flex gap-m", children: [jsx(Select, { className: "w-full", isManualInput: isMainCashback, placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E", 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\u0433\u043E\u0440\u0438\u044E \u043F\u043E\u043A\u0443\u043F\u043E\u043A", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E \u043F\u043E\u043A\u0443\u043F\u043E\u043A", 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 MAIN_CASHBACK_KEY = {
+        standard: '1-main',
+        premium: '1.5-main',
     };
-
-    const DEFAULT_CASHBACK = [
+    const DEFAULT_STANDARD_CASHBACK = [
+        {
+            id: 0,
+            percent: {
+                text: 'Категория 1% «На всё»',
+                key: '1-main',
+            },
+            sum: 5000,
+        },
+    ];
+    const DEFAULT_PREMIUM_CASHBACK = [
         {
             id: 0,
             percent: {
-                text: 'Категория 1% "На всё"',
-                key: '1',
+                text: 'Категория 1,5% «На всё»',
+                key: '1.5-main',
             },
             sum: 5000,
         },
     ];
-    const useCashbackCalculator = () => {
+    // export const INCREASED_PERCENTS = ['5', '10', '15'];
+    const MAX_CATEGORIES = {
+        standard: 5,
+        premium: 7,
+    };
+    const INFO_BLOCK_HTML = `<p>Полученные баллы можно конвертировать в рубли и компенсировать покупки у партнеров.</p>`;
+    const MAX_MONTH_CASHBACK = {
+        standard: 5000,
+        premium: 15000,
+    };
+
+    const getPercentCategories = (isMainCashbackAdded, calculatorType) => {
+        const allPercentCategories = calculatorType === 'premium' ? ALL_PERCENT_PREMIUM_CATEGORIES : ALL_PERCENT_STANDARD_CATEGORIES;
+        let updatedCategories = allPercentCategories;
+        if (!isMainCashbackAdded) {
+            return allPercentCategories;
+        }
+        if (isMainCashbackAdded) {
+            updatedCategories = updatedCategories.filter((_) => _.key !== MAIN_CASHBACK_KEY[calculatorType]);
+        }
+        return updatedCategories;
+    };
+
+    const defaultDeleteImage = {
+        src: 'IconDelete.svg',
+        format: 'webp',
+        alt: 'Иконка кнопки удаления блока кэшбека',
+    };
+    const CashbackCategory = JSX(({ categories, cashback, maxInputRange, deleteImage = defaultDeleteImage, isMainCashbackAdded = false, calculatorType = 'standard', onDelete, onChange, isShowDisclaimer = false, onChangeCategory = noop, }) => {
+        const [currentCategory, setCurrentCategory] = useState(getRandomElement(categories));
+        const isMainCashback = cashback.percent.key === MAIN_CASHBACK_KEY[calculatorType];
+        const onChangePercent = createChangeHandler(cashback, 'percent', onChange);
+        const onChangeSum = createChangeHandler(cashback, 'sum', onChange);
+        const onChangeCashbackCategory = (value) => {
+            setCurrentCategory(value);
+            onChangeCategory((prev) => updateSelectedCategories(prev, cashback, value));
+        };
+        return (jsxs("div", { className: "w-full space-y-m", children: [jsxs("div", { className: "space-y-xs", children: [jsx(Paragraph, { 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" }), isShowDisclaimer ? (jsx(Text, { size: "text-s", color: "text-primary-text", font: "font-light", className: "italic", children: "\u041A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A \u0434\u043B\u044F \u0440\u0430\u0441\u0447\u0451\u0442\u0430 \u0431\u0430\u043B\u043B\u043E\u0432 \u043F\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435" })) : null, jsxs("div", { className: "flex gap-m", children: [jsx(Select, { className: "w-full", isManualInput: isMainCashback, placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E", options: getPercentCategories(isMainCashbackAdded, calculatorType), value: cashback.percent, onChange: onChangePercent }), jsx(Button, { version: "secondary", onClick: () => onDelete(cashback.id), shape: "round", className: "px-4 rounded-md", children: jsx(Img, { image: deleteImage }) })] })] }), categories?.length && !isMainCashback ? (jsx(Select, { label: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E \u043F\u043E\u043A\u0443\u043F\u043E\u043A", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E \u043F\u043E\u043A\u0443\u043F\u043E\u043A", options: categories, value: currentCategory, onChange: onChangeCashbackCategory })) : 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 createChangeHandler = (obj, field, onChange) => (value) => {
+        onChange({
+            ...obj,
+            [field]: value,
+        });
+    };
+    const updateSelectedCategories = (prev, cashback, value) => {
+        const newItem = { id: cashback.id, category: value };
+        if (prev.length === 0) {
+            return [newItem];
+        }
+        const index = prev.findIndex((item) => item.id === cashback.id);
+        if (index !== -1) {
+            const updated = [...prev];
+            updated[index] = newItem;
+            return updated;
+        }
+        return [...prev, newItem];
+    };
+
+    const renderButtons = ({ cashbacksLength, onAddNewCashback, onResetCashback, calculatorType = 'standard', maxCategories = MAX_CATEGORIES[calculatorType], }) => {
+        return (jsxs("div", { className: "w-full flex flex-col gap-lg", children: [cashbacksLength < maxCategories ? (jsx(Button, { className: "self-start text-primary-main", embedded: true, version: "secondary", onClick: onAddNewCashback, children: cashbacksLength ? 'Добавить ещё категорию' : 'Добавить категорию' })) : 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 CashbackType = {
+        standard: DEFAULT_STANDARD_CASHBACK,
+        premium: DEFAULT_PREMIUM_CASHBACK,
+    };
+    const useCashbackCalculator = (calculatorType) => {
         const { data } = useLeadFormData('CASHBACK_CATEGORY');
-        const [cashbacks, setCashbacks] = useState(DEFAULT_CASHBACK);
+        const [cashbacks, setCashbacks] = useState(CashbackType[calculatorType]);
+        const [selectedCategories, setSelectedCategories] = useState([]);
         const categories = data?.map((_) => ({
             key: _.key || '',
             text: _.value,
         })) || [];
+        const filteredCategories = useMemo(() => {
+            const categoriesToRemove = selectedCategories.map((obj) => obj.category);
+            const keysToRemove = new Set(categoriesToRemove.map((item) => item.key));
+            return categories.filter((item) => !keysToRemove.has(item.key));
+        }, [selectedCategories, categories]);
         const onAddNewCashback = () => setCashbacks((_) => [
             ..._,
             {
-                id: _[_.length - 1].id + 1,
+                id: _ && _.length > 0 ? _[_.length - 1]?.id + 1 : 1,
                 percent: {
                     text: 'Категория 1,5%',
                     key: '1.5',
@@ -10365,14 +10454,15 @@
             return _;
         }));
         const onDeleteCashback = (id) => setCashbacks((prev) => prev.filter((_) => _.id !== id));
-        const onResetCashback = () => setCashbacks(DEFAULT_CASHBACK);
+        const onResetCashback = () => setCashbacks(CashbackType[calculatorType]);
         return {
             cashbacks,
-            categories,
+            categories: filteredCategories,
             onAddNewCashback,
             onChangeCashback,
             onDeleteCashback,
             onResetCashback,
+            onChangeCategory: setSelectedCategories,
         };
     };
 
@@ -10381,19 +10471,280 @@
         text: 'Оформить карту',
         target: '_self',
     };
-    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, className = '', button = defaultButton, ...rest }) => {
-        const { cashbacks, categories, onAddNewCashback, onChangeCashback, onDeleteCashback, onResetCashback, } = useCashbackCalculator();
-        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 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0431\u0430\u043B\u043B\u043E\u0432", description: "\u041C\u043E\u0436\u043D\u043E \u0432\u044B\u0431\u0440\u0430\u0442\u044C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 5 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439, \u043E\u0434\u043D\u0430 \u0438\u0437 \u043D\u0438\u0445 \u0438\u0437 \u043F\u043E\u0432\u044B\u0448\u0435\u043D\u043D\u043E\u0439 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438", 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: button.href, text: button.text, target: button.target, version: "primary" })] }), img] })] }));
+    const CashbackCalculator = JSX(
+    // eslint-disable-next-line max-lines-per-function
+    ({ maxInputRange = 300000, maxCategories, calculatorType = 'standard', maxMonthCashback = MAX_MONTH_CASHBACK[calculatorType], button = defaultButton, className = '', ...rest }) => {
+        const { cashbacks, categories, onAddNewCashback, onChangeCashback, onDeleteCashback, onResetCashback, onChangeCategory, } = useCashbackCalculator(calculatorType);
+        const { deleteImage, infoImage, image } = rest;
+        const [isMainCashbackAdded, setIsMainCashbackAdded] = useState(false);
+        useEffect(() => {
+            setIsMainCashbackAdded(Boolean(cashbacks.find((item) => item.percent.key === MAIN_CASHBACK_KEY[calculatorType])));
+        }, [cashbacks]);
+        return (jsx(BlockWrapper, { className: style('flex flex-col justify-center items-center gap-lg', className), defaultPadding: style('p-0'), ...rest, children: jsxs("div", { className: "flex flex-row items-start gap-lg mt-5", children: [jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-lg", children: [cashbacks.length
+                                ? cashbacks.map((_, index) => (jsx(CashbackCategory, { categories: categories, cashback: _, maxInputRange: maxInputRange, deleteImage: deleteImage, onDelete: onDeleteCashback, onChange: onChangeCashback, isMainCashbackAdded: isMainCashbackAdded, calculatorType: calculatorType, isShowDisclaimer: index === 0, onChangeCategory: onChangeCategory }, String(_.id))))
+                                : renderNoCategoryText(), renderButtons({
+                                cashbacksLength: cashbacks.length,
+                                onAddNewCashback: onAddNewCashback,
+                                onResetCashback: onResetCashback,
+                                calculatorType: calculatorType,
+                                maxCategories,
+                            }), jsx(CashbackCalculatorResult, { cashbacks: cashbacks, maxMonthCashback: maxMonthCashback }), jsx(InfoCard, { __html: INFO_BLOCK_HTML, image: infoImage }), jsx(RichText, { __html: '* \u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435 \u043F\u043E \u0443\u0441\u043B\u043E\u0432\u0438\u044F\u043C \u0438 \u043D\u0430\u0447\u0438\u0441\u043B\u0435\u043D\u0438\u044F\u043C \u043C\u043E\u0436\u043D\u043E \u0443\u0437\u043D\u0430\u0442\u044C \u0432\u043E \u0432\u043A\u043B\u0430\u0434\u043A\u0435 <a href="#docs">\u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B</a>' }), jsx(LinkButton, { className: "w-full @lg:w-auto self-start", href: button.href, text: button.text, target: button.target, version: "primary" })] }), renderImage(image)] }) }));
+    });
+    const renderNoCategoryText = () => (jsx(Text, { align: "text-left", className: "w-full", children: "\u041A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044F \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u0430" }));
+    const renderImage = (image = {}) => image?.src ? (jsx(Img, { image: image, className: "hidden w-full @xl:block", imageClassName: "justify-self-center" })) : null;
+
+    const getVersion = (isPrimary, type) => isPrimary && type !== 'underlined' ? 'primary' : 'secondary';
+
+    const badgeBgStyleMap = {
+        primary: 'bg-white/30',
+        secondary: 'bg-main-divider',
+    };
+    const badgeTextColorStyleMap = {
+        primary: { desktop: 'text-white', mobile: 'text-primary-text' },
+        secondary: { desktop: 'text-secondary-text', mobile: 'text-secondary-text' },
+    };
+    const Badge = JSX(({ count, version = 'secondary' }) => {
+        const isMobileMode = useMobileMode();
+        const badgeBgStyle = isMobileMode ? 'bg-main-divider' : badgeBgStyleMap[version];
+        const textStyle = badgeTextColorStyleMap[version][isMobileMode ? 'mobile' : 'desktop'];
+        return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyle), role: "status", "aria-label": `Количество ${count} доступных программ и сервисов`, children: jsx(Text, { size: "text-xs", color: textStyle, children: count }) }));
+    });
+
+    const getButtonClassNames = (isActive) => ({
+        btn: `w-96 ${isActive ? 'p-m border-none bg-primary-main text-white' : 'p-s ease-in duration-300 bg-white'}`,
+        text: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l text-primary-text',
+        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
+        icon: isActive ? '' : 'text-primary-main',
+        iconVersion: (isActive ? 'white' : 'normal'),
+        oldText: 'text-m text-center',
+        oldDesc: 'text-m-light',
+    });
+    const renderTabItemInner = ({ text, description, icon, isActive, type, }) => {
+        const buttonClassNames = getButtonClassNames(isActive);
+        return (jsxs("div", { className: style('cursor-pointer text-left border-b-0 flex gap-2xs'), "aria-label": text, "aria-labelledby": `${text}-label`, children: [icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
+                        ...icon,
+                        iconVersion: icon?.iconVersion ?? buttonClassNames.iconVersion,
+                    }, width: "24", height: "24", alt: text })) : null, jsxs("div", { className: "border-0", children: [jsx("div", { className: type === 'animated' ? buttonClassNames.text : buttonClassNames.oldText, children: text }), jsx("div", { className: type === 'animated' ? buttonClassNames.desc : buttonClassNames.oldDesc, children: description })] })] }));
+    };
+
+    const tabPaddingStyleMap = {
+        default: 'px-xs',
+        underlined: 'px-m',
+        animated: 'px-m border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
+    };
+    const tabTextStyle = 'text-secondary-text hover:text-primary-main';
+    const activeTabTextStyleMap = {
+        default: 'text-white',
+        underlined: 'text-primary-main border-b-2',
+        animated: 'text-white sm:text-white',
+    };
+    const tabBgStyleMap = {
+        default: 'bg-white',
+        underlined: 'bg-white',
+        animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
+    };
+    const activeTabBgStyleMap = {
+        default: 'bg-primary-main',
+        underlined: 'bg-white',
+        animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
+    };
+    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
+        const Tag = tag;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { text, description, icon, count, tabName, ...link } = item;
+        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', 'rounded-none', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), "aria-label": "\u0421\u043F\u0438\u0441\u043E\u043A \u0442\u0430\u0431\u043E\u0432", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), role: "tab", "aria-label": `Таб ${text}`, children: [renderTabItemInner({
+                        text,
+                        description,
+                        icon,
+                        isActive,
+                        type,
+                    }), Number.isInteger(count) ? (jsx("div", { className: "ml-xs", role: "status", "aria-label": `Количество программ и сервисов ${count}`, children: jsx(Badge, { count: count, version: getVersion(isActive, type) }) })) : null] }) }));
+    });
+
+    const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
+    const LinkTabItem = JSX((props) => {
+        const link = useLink();
+        const handleClick = useCallback(() => {
+            props.onClick && props.onClick(props.item || {});
+        }, [props.onClick, props.item]);
+        const { onClick, ...item } = link({ ...props.item, onClick: handleClick });
+        return jsx(TabItemInner, { ...props, tag: "a", item: item, onClick: onClick });
+    });
+    // TODO: Update handlerDecorator (support buttons?)
+    const ButtonTabItem = JSX(({ item = {}, onClick, ...rest }) => {
+        const handleClick = useCallback((e) => {
+            e.target.scrollIntoView({ block: 'nearest' });
+            onClick?.(item);
+        }, [onClick, item]);
+        return jsx(TabItemInner, { item: item, onClick: handleClick, ...rest });
     });
-    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 renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
+
+    const scrollButtonStyle = 'hidden sm:flex absolute z-40';
+    const scrollStyle = {
+        default: {
+            item: 'flex-1',
+            gap: 0,
+            buttonTop: 'top-0',
+        },
+        animated: {
+            item: 'flex',
+            gap: 8,
+            buttonTop: 'top-5',
+        },
+        underlined: {
+            item: '',
+            gap: 0,
+            buttonTop: 'top-0',
+        },
     };
-    const showIncreasedPercents = (currentCashback, cashback) => INCREASED_PERCENTS.includes(currentCashback.percent.key) ||
-        !cashback.some((_) => INCREASED_PERCENTS.includes(_.percent.key));
+    const ScrollableTabsControl = JSX(({ className, items = [], activeItem, onChange, tabsType = 'default' }) => {
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount: items?.length || 0,
+        });
+        useEffect(() => scrollToSelected(containerRef.current, items, activeItem), []);
+        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyle[tabsType].item, gap: scrollStyle[tabsType].gap, children: items.map(renderTab(activeItem, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ArrowLeftButton, { wcmsIgnore: true, className: style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ArrowRightButton, { wcmsIgnore: true, className: style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
+    });
+    const scrollToSelected = (container, items, activeItem) => {
+        const selectedIndex = items.findIndex((_) => _ === activeItem);
+        if (container && selectedIndex > 0) {
+            container.scrollTo({
+                left: container?.children[selectedIndex]?.offsetLeft,
+                behavior: 'smooth',
+            });
+        }
+    };
+
+    const tabsStyle = {
+        default: {
+            wrapper: '',
+            component: '',
+        },
+        animated: {
+            wrapper: 'border-b-8 border-primary-main bg-white',
+            component: 'm-auto',
+        },
+        underlined: {
+            wrapper: 'flex',
+            component: 'm-auto',
+        },
+    };
+    const renderTabsLayout = ({ className = '', tabsType = 'animated', ...props }) => tabsType ? (jsx("div", { className: style(tabsStyle[tabsType].wrapper, className), children: jsx(ScrollableTabsControl, { className: tabsStyle[tabsType].component, tabsType: tabsType, ...props }) })) : null;
+
+    const STICKY_STYLE = 'sticky top-1 z-20';
+    const TabsLayout = UniBlock(
+    // eslint-disable-next-line max-lines-per-function
+    ({ className = '', tabs = [], block, tabsType, showCounter = false, isSticky = false, ...rest }) => {
+        const id = getId(block || {});
+        const router = useRouter();
+        const isFrame = isIFrame();
+        const isEveryLink = tabs.every((_) => _?.type === 'link');
+        const query = new URLSearchParams(decodeURIComponent(globalThis?.location?.search || ''));
+        const tabId = getTabId(id);
+        const tabsCounted = showCounter
+            ? tabs.map((_) => ({
+                ..._,
+                count: _?.type === 'group' ? block?.slots?.[_?.tabName ?? '']?.length ?? 0 : 0,
+            }))
+            : tabs;
+        const defaultSelectedTabIndex = tabsCounted.findIndex((_) => Boolean(_?.selected));
+        const defaultQueryTabIndex = tabsCounted.findIndex((_, i) => _.type === 'group' && (_?.tabName ?? String(i)) === tabId);
+        const defaultTabIndex = tabId ? defaultQueryTabIndex : defaultSelectedTabIndex;
+        const [activeTabIndex, setActiveTabIndex] = useState(getDefaultIndex(defaultTabIndex));
+        const activeItem = tabsCounted[activeTabIndex];
+        const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
+        const updateUrlSearchTabParam = (_, i) => {
+            if (_.text) {
+                query.set(id, _?.tabName ?? String(i));
+            }
+            else {
+                query.delete(id);
+            }
+            router.replace(`${router.pathname}?${query}`, { scroll: false });
+        };
+        const handleChange = useCallback((_) => {
+            const index = tabsCounted.indexOf(_);
+            const tab = tabsCounted[index];
+            setActiveTabIndex(index);
+            if (tab.type === 'group') {
+                updateUrlSearchTabParam(_, index);
+            }
+        }, [tabsCounted]);
+        return (jsxs(BlockWrapper, { className: style({ [STICKY_STYLE]: [isSticky, isEveryLink, !isFrame].every(Boolean) }, className), defaultPadding: "p-0", block: block, ...rest, children: [renderTabsLayout({
+                    className: style({
+                        'pb-1': [block?.slots, tabsType === 'default'].every(Boolean),
+                        [STICKY_STYLE]: [isSticky, !isEveryLink, !isFrame].every(Boolean),
+                    }),
+                    items: getItems(tabs, tabsCounted),
+                    activeItem,
+                    tabsType,
+                    onChange: handleChange,
+                }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: Object.entries(block?.slots ?? {}).map(([key, value]) => renderBlocksList(value, {
+                        ...rest?.options,
+                        slotName,
+                        parent: block,
+                        extraProps: { className: key === slotName ? '' : 'hidden' },
+                    })) })] }));
+    }, {
+        slots: ({ tabs }) => tabs?.map(getSlotName)?.filter(Boolean) || [],
+    });
+    const getDefaultIndex = (index) => (index && index !== -1 ? index : 0);
+    const getId = ({ __id, anchor }) => anchor ?? __id ?? 'tabs';
+    const getItems = (tabs, tabsCounted) => (tabsCounted?.length ? tabsCounted : tabs);
+    const getSlotName = (tab, index) => tab?.type === 'group' ? tab?.tabName || `Слот №${index + 1}` : '';
+    const getTabId = (id) => decodeURIComponent(globalThis?.location?.search
+        .replace('?', '')
+        .replace('+', ' ')
+        .split('&')
+        .find((_) => _.split('=').find((param) => param === id))
+        ?.split('=')?.[1] ?? '');
+
+    const CALCULATOR_TABS = [
+        {
+            type: 'group',
+            description: 'с остатками на счетах до 2 999 999,99 руб*',
+            text: 'Стандарт',
+            tabName: 'standard',
+            selected: true,
+        },
+        {
+            type: 'group',
+            description: 'с остатками на счетах от 3 000 000,00 руб*',
+            text: 'Престиж',
+            tabName: 'premium',
+            selected: false,
+        },
+    ];
+    const defaultInfoImage = {
+        src: 'IconExchange.svg',
+        format: 'webp',
+        alt: 'Иконка информационного блока',
+    };
+    const CashbackCalculatorLayout = JSX(({ premiumCalculatorParams = {}, standardCalculatorParams = {}, image, deleteImage, infoImage = defaultInfoImage, button, className = '', options, title, description, subtitle, ...rest }) => {
+        const calculatorProps = {
+            button,
+            deleteImage,
+            infoImage,
+            image,
+        };
+        const CalculatorStandardBlock = createCalculatorBlock('standard', calculatorProps, standardCalculatorParams);
+        const CalculatorPremiumBlock = createCalculatorBlock('premium', calculatorProps, premiumCalculatorParams);
+        const slots = {
+            standard: [CalculatorStandardBlock],
+            premium: [CalculatorPremiumBlock],
+        };
+        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center gap-lg', className), defaultPadding: style('p-6xl'), ...rest, children: [jsx(Headline, { title: title, headlineVersion: "XL", isEmbedded: true }), jsx(RichText, { __html: description, className: "text-center" }), jsx(Paragraph, { children: subtitle }), jsx("div", { className: "container grid grid-cols-12", children: jsx(TabsLayout, { className: "col-span-12", tabsType: "animated", tabs: CALCULATOR_TABS, block: { slots }, options: options }) })] }));
+    });
+    const createCalculatorBlock = (calculatorType, calculatorProps, calculatorParams) => ({
+        type: 'CashbackCalculator',
+        content: {
+            calculatorType: calculatorType,
+            ...calculatorProps,
+            ...calculatorParams,
+        },
+        style: ['col-span-12'],
+    });
 
     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 })) }));
@@ -13991,8 +14342,6 @@
         return (jsx("div", { children: filters.length > 0 ? (jsxs("div", { className: "space-y-s", children: [jsx(Text, { children: text }), jsx("div", { className: COMMON_FILTERS_STYLES, children: filters })] })) : null }));
     };
 
-    const getVersion = (isPrimary, type) => isPrimary && type !== 'underlined' ? 'primary' : 'secondary';
-
     const renderButtonsGroup = (data, activeButton, onButtonClick) => {
         const allButtonVersion = getVersion(activeButton === 'all');
         const businessButtonVersion = getVersion(activeButton === 'business');
@@ -14402,211 +14751,6 @@
 
     const StickyBottomMenu = JSX(() => (jsx("div", { className: "hidden", role: "none" })));
 
-    const badgeBgStyleMap = {
-        primary: 'bg-white/30',
-        secondary: 'bg-main-divider',
-    };
-    const badgeTextColorStyleMap = {
-        primary: { desktop: 'text-white', mobile: 'text-primary-text' },
-        secondary: { desktop: 'text-secondary-text', mobile: 'text-secondary-text' },
-    };
-    const Badge = JSX(({ count, version = 'secondary' }) => {
-        const isMobileMode = useMobileMode();
-        const badgeBgStyle = isMobileMode ? 'bg-main-divider' : badgeBgStyleMap[version];
-        const textStyle = badgeTextColorStyleMap[version][isMobileMode ? 'mobile' : 'desktop'];
-        return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyle), role: "status", "aria-label": `Количество ${count} доступных программ и сервисов`, children: jsx(Text, { size: "text-xs", color: textStyle, children: count }) }));
-    });
-
-    const getButtonClassNames = (isActive) => ({
-        btn: `w-96 ${isActive ? 'p-m border-none bg-primary-main text-white' : 'p-s ease-in duration-300 bg-white'}`,
-        text: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l text-primary-text',
-        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
-        icon: isActive ? '' : 'text-primary-main',
-        iconVersion: (isActive ? 'white' : 'normal'),
-        oldText: 'text-m text-center',
-        oldDesc: 'text-m-light',
-    });
-    const renderTabItemInner = ({ text, description, icon, isActive, type, }) => {
-        const buttonClassNames = getButtonClassNames(isActive);
-        return (jsxs("div", { className: style('cursor-pointer text-left border-b-0 flex gap-2xs'), "aria-label": text, "aria-labelledby": `${text}-label`, children: [icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
-                        ...icon,
-                        iconVersion: icon?.iconVersion ?? buttonClassNames.iconVersion,
-                    }, width: "24", height: "24", alt: text })) : null, jsxs("div", { className: "border-0", children: [jsx("div", { className: type === 'animated' ? buttonClassNames.text : buttonClassNames.oldText, children: text }), jsx("div", { className: type === 'animated' ? buttonClassNames.desc : buttonClassNames.oldDesc, children: description })] })] }));
-    };
-
-    const tabPaddingStyleMap = {
-        default: 'px-xs',
-        underlined: 'px-m',
-        animated: 'px-m border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
-    };
-    const tabTextStyle = 'text-secondary-text hover:text-primary-main';
-    const activeTabTextStyleMap = {
-        default: 'text-white',
-        underlined: 'text-primary-main border-b-2',
-        animated: 'text-white sm:text-white',
-    };
-    const tabBgStyleMap = {
-        default: 'bg-white',
-        underlined: 'bg-white',
-        animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
-    };
-    const activeTabBgStyleMap = {
-        default: 'bg-primary-main',
-        underlined: 'bg-white',
-        animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
-    };
-    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
-        const Tag = tag;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { text, description, icon, count, tabName, ...link } = item;
-        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', 'rounded-none', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), "aria-label": "\u0421\u043F\u0438\u0441\u043E\u043A \u0442\u0430\u0431\u043E\u0432", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), role: "tab", "aria-label": `Таб ${text}`, children: [renderTabItemInner({
-                        text,
-                        description,
-                        icon,
-                        isActive,
-                        type,
-                    }), Number.isInteger(count) ? (jsx("div", { className: "ml-xs", role: "status", "aria-label": `Количество программ и сервисов ${count}`, children: jsx(Badge, { count: count, version: getVersion(isActive, type) }) })) : null] }) }));
-    });
-
-    const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
-    const LinkTabItem = JSX((props) => {
-        const link = useLink();
-        const handleClick = useCallback(() => {
-            props.onClick && props.onClick(props.item || {});
-        }, [props.onClick, props.item]);
-        const { onClick, ...item } = link({ ...props.item, onClick: handleClick });
-        return jsx(TabItemInner, { ...props, tag: "a", item: item, onClick: onClick });
-    });
-    // TODO: Update handlerDecorator (support buttons?)
-    const ButtonTabItem = JSX(({ item = {}, onClick, ...rest }) => {
-        const handleClick = useCallback((e) => {
-            e.target.scrollIntoView({ block: 'nearest' });
-            onClick?.(item);
-        }, [onClick, item]);
-        return jsx(TabItemInner, { item: item, onClick: handleClick, ...rest });
-    });
-
-    const renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
-
-    const scrollButtonStyle = 'hidden sm:flex absolute z-40';
-    const scrollStyle = {
-        default: {
-            item: 'flex-1',
-            gap: 0,
-            buttonTop: 'top-0',
-        },
-        animated: {
-            item: 'flex',
-            gap: 8,
-            buttonTop: 'top-5',
-        },
-        underlined: {
-            item: '',
-            gap: 0,
-            buttonTop: 'top-0',
-        },
-    };
-    const ScrollableTabsControl = JSX(({ className, items = [], activeItem, onChange, tabsType = 'default' }) => {
-        const [containerRef, scroll] = useSwipeListScroll({
-            itemCount: items?.length || 0,
-        });
-        useEffect(() => scrollToSelected(containerRef.current, items, activeItem), []);
-        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyle[tabsType].item, gap: scrollStyle[tabsType].gap, children: items.map(renderTab(activeItem, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ArrowLeftButton, { wcmsIgnore: true, className: style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ArrowRightButton, { wcmsIgnore: true, className: style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
-    });
-    const scrollToSelected = (container, items, activeItem) => {
-        const selectedIndex = items.findIndex((_) => _ === activeItem);
-        if (container && selectedIndex > 0) {
-            container.scrollTo({
-                left: container?.children[selectedIndex]?.offsetLeft,
-                behavior: 'smooth',
-            });
-        }
-    };
-
-    const tabsStyle = {
-        default: {
-            wrapper: '',
-            component: '',
-        },
-        animated: {
-            wrapper: 'border-b-8 border-primary-main bg-white',
-            component: 'm-auto',
-        },
-        underlined: {
-            wrapper: 'flex',
-            component: 'm-auto',
-        },
-    };
-    const renderTabsLayout = ({ className = '', tabsType = 'animated', ...props }) => tabsType ? (jsx("div", { className: style(tabsStyle[tabsType].wrapper, className), children: jsx(ScrollableTabsControl, { className: tabsStyle[tabsType].component, tabsType: tabsType, ...props }) })) : null;
-
-    const STICKY_STYLE = 'sticky top-1 z-20';
-    const TabsLayout = UniBlock(
-    // eslint-disable-next-line max-lines-per-function
-    ({ className = '', tabs = [], block, tabsType, showCounter = false, isSticky = false, ...rest }) => {
-        const id = getId(block || {});
-        const router = useRouter();
-        const isFrame = isIFrame();
-        const isEveryLink = tabs.every((_) => _?.type === 'link');
-        const query = new URLSearchParams(decodeURIComponent(globalThis?.location?.search || ''));
-        const tabId = getTabId(id);
-        const tabsCounted = showCounter
-            ? tabs.map((_) => ({
-                ..._,
-                count: _?.type === 'group' ? block?.slots?.[_?.tabName ?? '']?.length ?? 0 : 0,
-            }))
-            : tabs;
-        const defaultSelectedTabIndex = tabsCounted.findIndex((_) => Boolean(_?.selected));
-        const defaultQueryTabIndex = tabsCounted.findIndex((_, i) => _.type === 'group' && (_?.tabName ?? String(i)) === tabId);
-        const defaultTabIndex = tabId ? defaultQueryTabIndex : defaultSelectedTabIndex;
-        const [activeTabIndex, setActiveTabIndex] = useState(getDefaultIndex(defaultTabIndex));
-        const activeItem = tabsCounted[activeTabIndex];
-        const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
-        const updateUrlSearchTabParam = (_, i) => {
-            if (_.text) {
-                query.set(id, _?.tabName ?? String(i));
-            }
-            else {
-                query.delete(id);
-            }
-            router.replace(`${router.pathname}?${query}`, { scroll: false });
-        };
-        const handleChange = useCallback((_) => {
-            const index = tabsCounted.indexOf(_);
-            const tab = tabsCounted[index];
-            setActiveTabIndex(index);
-            if (tab.type === 'group') {
-                updateUrlSearchTabParam(_, index);
-            }
-        }, [tabsCounted]);
-        return (jsxs(BlockWrapper, { className: style({ [STICKY_STYLE]: [isSticky, isEveryLink, !isFrame].every(Boolean) }, className), defaultPadding: "p-0", block: block, ...rest, children: [renderTabsLayout({
-                    className: style({
-                        'pb-1': [block?.slots, tabsType === 'default'].every(Boolean),
-                        [STICKY_STYLE]: [isSticky, !isEveryLink, !isFrame].every(Boolean),
-                    }),
-                    items: getItems(tabs, tabsCounted),
-                    activeItem,
-                    tabsType,
-                    onChange: handleChange,
-                }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: Object.entries(block?.slots ?? {}).map(([key, value]) => renderBlocksList(value, {
-                        ...rest?.options,
-                        slotName,
-                        parent: block,
-                        extraProps: { className: key === slotName ? '' : 'hidden' },
-                    })) })] }));
-    }, {
-        slots: ({ tabs }) => tabs?.map(getSlotName)?.filter(Boolean) || [],
-    });
-    const getDefaultIndex = (index) => (index && index !== -1 ? index : 0);
-    const getId = ({ __id, anchor }) => anchor ?? __id ?? 'tabs';
-    const getItems = (tabs, tabsCounted) => (tabsCounted?.length ? tabsCounted : tabs);
-    const getSlotName = (tab, index) => tab?.type === 'group' ? tab?.tabName || `Слот №${index + 1}` : '';
-    const getTabId = (id) => decodeURIComponent(globalThis?.location?.search
-        .replace('?', '')
-        .replace('+', ' ')
-        .split('&')
-        .find((_) => _.split('=').find((param) => param === id))
-        ?.split('=')?.[1] ?? '');
-
     const FIRST_CELL_STYLES = 'w-80 flex-shrink-0 sticky left-0 bg-white';
     const renderHeader = ({ title, icon }) => (jsxs("div", { className: style('flex gap-m items-center', FIRST_CELL_STYLES), role: "cell", children: [icon ? (jsx(Img, { className: "hidden lg:block max-w-6 shrink-0", image: icon, width: "24", height: "24" })) : null, title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null] }));
 
@@ -14727,20 +14871,21 @@
         RollupItem,
         StepsBlock,
         StickyBottomMenu,
+        TextBlock,
         TabsLayout,
         TariffsTable,
-        TextBlock,
         VerticalLayout,
         Video,
         ApplicationLeadForm,
         CreditCardForm,
         CreditForm,
         DebitForm,
-        CashbackCalculator,
         CalculatorRko,
         RkoTariffCardsTable,
         RatesTable,
         ReferalForm,
+        CashbackCalculator,
+        CashbackCalculatorLayout,
     };
 
     const applyAspects = (aspects) => (ev) => {
@@ -14885,7 +15030,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.1068";
+    const packageVersion = "0.14.1070";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;