@redneckz/wildless-cms-uni-blocks 0.14.779 → 0.14.788

package/bundle/bundle.umd.js

@@ -2854,6 +2854,97 @@
     const normalizeInteger = (val = '') => val.replace(/[^\d]+/g, '');
     const getPlaceholder = (placeholder, errors, label) => errors && !label ? `${placeholder}*` : placeholder;
 
+    const ESIA_FIELD_NAME = 'esiaAccountTypeCd';
+    const isEsiaAuthorize = (field, name) => Boolean(field(ESIA_FIELD_NAME)?.value?.key) && field(name).value;
+
+    const AddressField = JSX(({ field, input }) => {
+        const fieldName = input?.name || 'addressRegistration';
+        const fieldValue = field(fieldName).value;
+        const onDaDataChange = useCallback((item) => {
+            field?.(fieldName)?.onChange?.(getAddressFromDaDataItem(item));
+        }, []);
+        const onChange = useCallback((value) => {
+            field?.(fieldName)?.onChange?.({
+                apartment: '',
+                city: '',
+                district: '',
+                fullAddress: value,
+                fiasCode: '',
+                house: '',
+                locality: '',
+                okatoRegionCode: '',
+                postcode: '',
+                region: '',
+                regionCode: '',
+                street: '',
+                qc: '',
+                qcComplete: '',
+                qcHouse: '',
+            });
+        }, []);
+        return (jsx(DaDataInputControl, { disabled: input?.filledByEsia && isEsiaAuthorize(field, fieldName), label: "\u0410\u0434\u0440\u0435\u0441", ...field(fieldName), value: fieldValue?.fullAddress, onChange: onChange, ...input, onDaDataChange: onDaDataChange }));
+    });
+    const getAddressFromDaDataItem = (item) => ({
+        apartment: item?.data?.flat,
+        city: item?.data?.city,
+        district: item?.data?.area_with_type,
+        fullAddress: item?.unrestricted_value,
+        fiasCode: item?.data?.fias_id,
+        house: item?.data?.house,
+        locality: item?.data?.settlement_with_type,
+        okatoRegionCode: item?.data?.okato,
+        postcode: item?.data?.postal_code,
+        region: item?.data?.region,
+        regionCode: item?.data?.region_kladr_id ? item?.data?.region_kladr_id.substring(0, 2) : '',
+        street: item?.data?.street,
+        qc: item?.data?.qc,
+        qcComplete: item?.data?.qc_complete,
+        qcHouse: item?.data?.qc_house,
+    });
+
+    const AddressCourierField = UniBlock(({ field, input, source }) => {
+        const [errorCity, setErrorCity] = useState('');
+        const fieldValue = field('addressCourier')?.value;
+        const currentLocality = fieldValue?.locality;
+        const currentCity = fieldValue?.city;
+        useEffect(() => {
+            if ((currentCity || currentLocality) &&
+                !source?.deliveryCities?.includes(currentCity)) {
+                field?.('addressCourier')?.onChange?.({
+                    ...fieldValue,
+                    house: '',
+                });
+                setErrorCity('Город недоступен для доставки');
+            }
+            else {
+                setErrorCity('');
+            }
+        }, [currentCity, currentLocality, source]);
+        const onDaDataChange = useCallback((item) => {
+            field?.('addressCourier')?.onChange?.(getAddressFromDaDataItem(item));
+        }, []);
+        const onChange = useCallback((value) => {
+            field?.('addressCourier')?.onChange?.({
+                apartment: '',
+                city: '',
+                district: '',
+                fullAddress: value,
+                fiasCode: '',
+                house: '',
+                locality: '',
+                okatoRegionCode: '',
+                postcode: '',
+                region: '',
+                regionCode: '',
+                street: '',
+                qc: '',
+                qcComplete: '',
+                qcHouse: '',
+            });
+        }, []);
+        return (jsx(DaDataInputControl, { label: "\u0410\u0434\u0440\u0435\u0441", ...field('addressCourier'), value: fieldValue?.fullAddress, onChange: onChange, ...input, error: errorCity || field('addressCourier')?.error, onDaDataChange: onDaDataChange }));
+    });
+
     const AddressFactField = JSX(({ field, input }) => {
         const fieldName = 'addressFact';
         const fieldValue = field(fieldName).value;
@@ -2904,54 +2995,6 @@
         return (jsx(DaDataInputControl, { label: "\u0410\u0434\u0440\u0435\u0441", disabled: value, ...field(fieldName), value: fieldValue?.fullAddress, onChange: onChange, ...input, onDaDataChange: onDaDataChange }));
     });
 
-    const ESIA_FIELD_NAME = 'esiaAccountTypeCd';
-    const isEsiaAuthorize = (field, name) => Boolean(field(ESIA_FIELD_NAME)?.value?.key) && field(name).value;
-
-    const AddressField = JSX(({ field, input }) => {
-        const fieldName = input?.name || 'addressRegistration';
-        const fieldValue = field(fieldName).value;
-        const onDaDataChange = useCallback((item) => {
-            field?.(fieldName)?.onChange?.(getAddressFromDaDataItem(item));
-        }, []);
-        const onChange = useCallback((value) => {
-            field?.(fieldName)?.onChange?.({
-                apartment: '',
-                city: '',
-                district: '',
-                fullAddress: value,
-                fiasCode: '',
-                house: '',
-                locality: '',
-                okatoRegionCode: '',
-                postcode: '',
-                region: '',
-                regionCode: '',
-                street: '',
-                qc: '',
-                qcComplete: '',
-                qcHouse: '',
-            });
-        }, []);
-        return (jsx(DaDataInputControl, { disabled: input?.filledByEsia && isEsiaAuthorize(field, fieldName), label: "\u0410\u0434\u0440\u0435\u0441", ...field(fieldName), value: fieldValue?.fullAddress, onChange: onChange, ...input, onDaDataChange: onDaDataChange }));
-    });
-    const getAddressFromDaDataItem = (item) => ({
-        apartment: item?.data?.flat,
-        city: item?.data?.city,
-        district: item?.data?.area_with_type,
-        fullAddress: item?.unrestricted_value,
-        fiasCode: item?.data?.fias_id,
-        house: item?.data?.house,
-        locality: item?.data?.settlement_with_type,
-        okatoRegionCode: item?.data?.okato,
-        postcode: item?.data?.postal_code,
-        region: item?.data?.region,
-        regionCode: item?.data?.region_kladr_id ? item?.data?.region_kladr_id.substring(0, 2) : '',
-        street: item?.data?.street,
-        qc: item?.data?.qc,
-        qcComplete: item?.data?.qc_complete,
-        qcHouse: item?.data?.qc_house,
-    });
-
     const AddressMatchField = JSX(({ field, input }) => {
         return (jsx(CheckboxWithError, { text: "\u0410\u0434\u0440\u0435\u0441 \u0444\u0430\u043A\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043C\u0435\u0441\u0442\u0430 \u0436\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0441\u043E\u0432\u043F\u0430\u0434\u0430\u0435\u0442 \u0441 \u0430\u0434\u0440\u0435\u0441\u043E\u043C \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438", ...field(input?.name ?? '') }));
     });
@@ -3831,7 +3874,7 @@
 
     const DocumentDialog = JSX(({ src, onClose, onDocumentRead }) => {
         const isMobileMode = useMobileMode();
-        return (jsxs(Dialog, { className: "my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0", onClose: onClose, children: [isMobileMode ? (jsx("img", { src: src })) : (jsx("iframe", { src: `${src}#toolbar=0`, className: "w-full h-[80vh]", id: "iframe-dialog" })), jsx(Button, { className: "mx-auto mt-m", type: "button", onClick: () => {
+        return (jsxs(Dialog, { className: "my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0 z-[101]", onClose: onClose, children: [isMobileMode ? (jsx("img", { src: src })) : (jsx("iframe", { src: `${src}#toolbar=0`, className: "w-full h-[80vh]", id: "iframe-dialog" })), jsx(Button, { className: "mx-auto mt-m", type: "button", onClick: () => {
                         onDocumentRead?.();
                         onClose?.();
                     }, children: "\u041E\u0437\u043D\u0430\u043A\u043E\u043C\u0438\u0442\u044C\u0441\u044F" })] }));
@@ -3883,7 +3926,13 @@
     const CalculatorValue = JSX(({ className, title, value, color = 'text-secondary-text', ...rest }) => (jsxs("div", { className: style(CalculatorValueStyle, className), children: [title ? (jsx(Text, { size: "text-l", font: "font-light", color: color, children: title })) : null, value ? jsx(FormatValue, { value: value, ...rest }) : jsx(Text, { size: "text-h3", children: "-" })] })));
 
     const getDefaultParamsMin = (rateRows) => getDefaultParams([(i, acc) => i < acc, (i, prev) => i?.maxSum > prev?.maxSum], rateRows);
-    const getDefaultParamsMax = (rateRows = [], isNewClient = false) => getDefaultParams([(i, acc) => i > acc, (i, prev) => i?.minSum < prev?.minSum], rateRows?.filter((_) => isNewClient === Boolean(_?.isNewClient)));
+    const getDefaultParamsMax = (rateRows = [], isNewClient = false, extraPercents = []) => {
+        return {
+            ...getDefaultParams([(i, acc) => i > acc, (i, prev) => i?.minSum < prev?.minSum], rateRows?.filter((_) => isNewClient === Boolean(_?.isNewClient))),
+            extraPercent: extraPercents.at(-1),
+            extraPercents,
+        };
+    };
     const getDefaultParams = (comparators, rateRows) => {
         if (!rateRows?.length) {
             return undefined;
@@ -3916,10 +3965,12 @@
     const renderMonthsInput = ({ min = 0, max = 0, availableMonths, ...rest }) => (jsx(InputRange, { items: [`От ${monthText(min)}`, `До ${monthText(max)}`], step: STEP_MONTHS, ...(availableMonths?.length ? { list: availableMonths } : { min, max }), ...rest }));
     const monthText = (month) => `${month} ${Number(month) % 10 === 1 ? 'месяца' : 'месяцев'}`;
 
-    const renderBinaryRadioButtonGroup = ({ items, title, mobileTitle = title, orientation = 'horizontal', value, onChange, ...rest }) => (jsxs("div", { className: "grid gap-s whitespace-nowrap", children: [title ? (jsx("div", { className: "hidden @5xl:block", role: "radiogroup", "aria-label": title, children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, mobileTitle ? (jsx("div", { className: "@5xl:hidden", role: "radiogroup", "aria-label": mobileTitle, children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: mobileTitle }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: items, value: items[value ? 0 : 1].id, onChange: (_) => onChange && onChange(_ === items[0].id), ...rest })] }));
+    const renderBinaryRadioButtonGroup = ({ items, title, orientation = 'horizontal', value, onChange, ...rest }) => (jsxs("div", { className: "grid gap-s whitespace-nowrap lg:sm:col-span-1 col-span-2", children: [title ? (jsx("div", { role: "radiogroup", "aria-label": title, children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: items, value: items[value ? 0 : 1].id, onChange: (_) => onChange && onChange(_ === items[0].id), ...rest })] }));
 
     const renderPaymentType = (props) => renderBinaryRadioButtonGroup({
         ...props,
+        title: 'Тип платежа',
+        orientation: 'vertical',
         className: 'sm:flex-col',
         items: [
             { id: 'annuity', text: 'Аннуитетный' },
@@ -4097,8 +4148,6 @@
         }, { onChange });
         const calcParams = getCreditCalculatorParams(userInputParams, calcSource, paramsViewSettings);
         const paymentTypeElement = renderPaymentType({
-            title: 'Тип платежа',
-            orientation: 'vertical',
             ...field('isAnnuity'),
         });
         const { onChange: setMoneyValue } = field('moneyValue');
@@ -4713,6 +4762,9 @@
 
     const WagesField = JSX(({ field, input }) => (jsx(DaDataInputControl, { label: "\u0421\u043E\u0432\u043E\u043A\u0443\u043F\u043D\u044B\u0439 \u0434\u043E\u0445\u043E\u0434 \u0432 \u043C\u0435\u0441\u044F\u0446 \u043F\u043E\u0441\u043B\u0435 \u0432\u044B\u0447\u0435\u0442\u0430 \u043D\u0430\u043B\u043E\u0433\u043E\u0432 (\u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0430, \u043F\u0440\u0435\u043C\u0438\u0438)", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435", isInteger: true, ...field(input?.name ?? ''), ...input })));
 
+    const DELIVERY_CITIES_REF = {
+        $ref: '/wcms-resources/delivery-cities-data.json',
+    };
     const InputsApplicationLeadMap = {
         limitedBirthday: LimitedBirthdayField,
         name: NameField,
@@ -4787,7 +4839,7 @@
         inn: DaDataInnField,
     };
     const InputRetailCardMap = {
-        addressCourier: AddressField,
+        addressCourier: (props) => (jsx(AddressCourierField, { ...props, source: DELIVERY_CITIES_REF })),
         paymentSystem: PaymentSystemField,
         currency: CurrencyField,
         cardCategory: CardCategoryField,
@@ -5242,7 +5294,7 @@
             armyIdFlg,
         };
     };
-    const countIncomeAverage = (wages, retirementIncome) => Number(wages) + Number(retirementIncome);
+    const countIncomeAverage = (wages, retirementIncome) => Number(wages ?? 0) + Number(retirementIncome ?? 0);
 
     /* eslint-disable camelcase */
     const EMPLOYMENT_TYPE = {
@@ -5461,7 +5513,7 @@
             }
             onClose?.();
         }, []);
-        return (jsx(Dialog, { className: "my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg", onClose: handleClose, children: jsxs("div", { className: "flex flex-col gap-lg items-center rounded-md", children: [jsxs("div", { className: "flex items-center justify-around w-full px-m", children: [jsxs("ul", { className: "list-disc", children: [jsx("li", { children: "\u0412\u0435\u0440\u043E\u044F\u0442\u043D\u043E\u0441\u0442\u044C \u043E\u0434\u043E\u0431\u0440\u0435\u043D\u0438\u044F \u0432\u044B\u0448\u0435" }), jsx("li", { children: "\u0411\u0435\u0437 \u0441\u043F\u0440\u0430\u0432\u043E\u043A \u043E \u0434\u043E\u0445\u043E\u0434\u0430\u0445 \u0438 \u0442\u0440\u0443\u0434\u043E\u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0435" }), jsx("li", { children: "\u0421 \u0437\u0430\u0449\u0438\u0442\u043E\u0439 \u0412\u0430\u0448\u0438\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" })] }), jsx(Img, { image: { icon: 'GosUslugiIcon', iconVersion: 'normal' }, height: "70" })] }), jsxs("div", { className: "flex flex-wrap gap-lg w-full", children: [jsx(Button, { type: "button", onClick: handleAuth, children: "\u0417\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0413\u043E\u0441\u0443\u0441\u043B\u0443\u0433\u0438" }), jsx(Button, { type: "button", version: "secondary", onClick: handleClose, children: "\u041F\u0440\u043E\u043F\u0443\u0441\u0442\u0438\u0442\u044C" })] })] }) }));
+        return (jsx(Dialog, { className: "my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg", onClose: handleClose, children: jsxs("div", { className: "flex flex-col gap-lg items-center rounded-md", children: [jsxs("div", { className: "flex items-center justify-around w-full px-m", children: [jsxs("ul", { className: "list-disc", children: [jsx("li", { children: "\u0412\u0435\u0440\u043E\u044F\u0442\u043D\u043E\u0441\u0442\u044C \u043E\u0434\u043E\u0431\u0440\u0435\u043D\u0438\u044F \u0432\u044B\u0448\u0435" }), jsx("li", { children: "\u0411\u0435\u0437 \u0441\u043F\u0440\u0430\u0432\u043E\u043A \u043E \u0434\u043E\u0445\u043E\u0434\u0430\u0445 \u0438 \u0442\u0440\u0443\u0434\u043E\u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0435" }), jsx("li", { children: "\u0421 \u0437\u0430\u0449\u0438\u0442\u043E\u0439 \u0412\u0430\u0448\u0438\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" })] }), jsx(Img, { image: { icon: 'GosUslugiIcon', iconVersion: 'normal' }, height: "70" })] }), jsxs("div", { className: "@container flex flex-wrap gap-lg w-full", children: [jsx(Button, { type: "button", onClick: handleAuth, className: "w-full md:w-auto", children: "\u0417\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0413\u043E\u0441\u0443\u0441\u043B\u0443\u0433\u0438" }), jsx(Button, { type: "button", version: "secondary", onClick: handleClose, className: "w-full md:w-auto", children: "\u041F\u0440\u043E\u043F\u0443\u0441\u0442\u0438\u0442\u044C" })] })] }) }));
     });
 
     const useEsiaLoginDialog = (nextStepLink) => {
@@ -5571,10 +5623,12 @@
     };
 
     /* eslint-disable max-lines */
-    const useApplicationLeadApi = ({ programId, nextStepLink, productType, }) => {
+    // eslint-disable-next-line max-lines-per-function
+    const useApplicationLeadApi = ({ programId, nextStepLink, productType, data, }) => {
         const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
         const [ok, setOK] = useState();
         const saveUserData = useSaveUserData();
+        const aspects = useAspects();
         const openEsiaLoginDialog = useEsiaLoginDialog(nextStepLink);
         const consentBkiDialog = useConsentBkiDialog(openEsiaLoginDialog);
         const verifyPhoneDialog = useDialog(VerifyPhoneDialog);
@@ -5594,6 +5648,11 @@
                             productType,
                             saveUserData,
                         });
+                        handleAspects({
+                            aspectsAttributes: data,
+                            aspects,
+                            ev: {},
+                        });
                         verifyPhoneDialog.close();
                         if (productType === 'debitCard') {
                             openEsiaLoginDialog();
@@ -5835,7 +5894,7 @@
         return [initialFormState, { isLoading }];
     };
 
-    const ApplicationLeadForm = JSX(({ className, title, programId = '', nextStepLink = '/credit-lead', button, productType = 'credit', ...rest }) => {
+    const ApplicationLeadForm = JSX(({ className, title, programId = '', nextStepLink = '/credit-lead', button, productType = 'credit', data, ...rest }) => {
         const applicationFormData = useMemo(() => getApplicationFormData(productType), [productType]);
         const inputs = useMemo(() => (applicationFormData?.flatMap((_) => _?.inputs) || []), [applicationFormData]);
         const formValidator = useMemo(() => getFormValidator(inputs, validatorObj), [inputs]);
@@ -5844,6 +5903,7 @@
             programId,
             nextStepLink,
             productType,
+            data,
         });
         const [, { field, onSubmit }] = useForm(initialFormState, {
             formValidator,
@@ -6312,7 +6372,7 @@
         return (jsx(BlockWrapper, { className: style('!bg-transparent', alignStyle, className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) }));
     });
 
-    const Rate = JSX(({ rate = 0, title = 'Ставка', unit, fractionDigits = 2, depositeName, isShowDepositeName, color = 'text-secondary-text', }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: color, children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex @xl:justify-center gradient-color-text", children: [jsx("span", { className: "font-mohave text-title-huge -mt-m tracking-[-15px]", children: toLocalNumberFormat(fractionDigits, { fixed: true })(rate) }), unit ? jsx("span", { className: "text-7xl mt-5", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-2 w-full text-left whitespace-nowrap", children: depositeName })) : null] })] })));
+    const Rate = JSX(({ rate = 0, title = 'Ставка', unit, fractionDigits = 2, depositeName, isShowDepositeName, color = 'text-secondary-text', }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: color, children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex @xl:justify-center gradient-color-text gap-xs", children: [jsx("span", { className: "font-mohave text-title-huge -mt-m tracking-[-15px]", children: toLocalNumberFormat(fractionDigits, { fixed: true })(rate) }), unit ? jsx("span", { className: "text-7xl mt-5", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-2 w-full text-left whitespace-nowrap", children: depositeName })) : null] })] })));
 
     const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { className: "space-y-s min-w-96", children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx(Icon, { className: "w-10 h-auto lg:w-40", name: "PercentIcon" }), jsx("div", { className: "w-64", children: jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: "\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u0430, \u0432\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B" }) })] })));
 
@@ -6402,6 +6462,8 @@
 
     const renderPayout = (props) => renderBinaryRadioButtonGroup({
         ...props,
+        title: 'Выплата процентов',
+        orientation: 'vertical',
         items: [
             { id: 'everyMonth', text: 'Ежемесячно' },
             { id: 'atEndTerm', text: 'В конце срока' },
@@ -6502,10 +6564,7 @@
                                 ...field('daysValue'),
                                 value: calculatorParams.daysValue,
                             }), jsxs("div", { className: "flex flex-col sm:flex-row gap-y-m gap-x-5xl", children: [renderBusinessDepositParamsForm(calculatorParams, field), renderPayout({
-                                        title: 'Выплата процентов',
-                                        orientation: 'vertical',
                                         ...field('isMonthlyInterestPayment'),
-                                        className: 'sm:flex-col',
                                     })] })] }), renderRate({
                         rate,
                         depositeName,
@@ -6650,57 +6709,48 @@
         return rates ?? rows?.[0]?.rates;
     };
 
-    const renderRegistrationType = (props) => renderBinaryRadioButtonGroup({
-        ...props,
-        items: [
-            { id: 'remote', text: 'Дистанционно' },
-            { id: 'office', text: 'Офис Банка' },
-        ],
-    });
+    const renderRegistrationType = (props, isShow = false) => isShow
+        ? renderBinaryRadioButtonGroup({
+            ...props,
+            title: 'Оформление',
+            orientation: 'vertical',
+            items: [
+                { id: 'remote', text: 'Дистанционно' },
+                { id: 'office', text: 'Офис Банка' },
+            ],
+        })
+        : null;
 
-    const renderDepositParamsForm = (params, field) => {
+    const renderDepositParamsForm = (params, field, extraPercents) => {
         const isCurrency = params?.currency?.key !== 'rub';
-        return (jsxs("div", { className: "grid gap-lg", children: [jsxs("div", { className: "flex gap-lg", children: [params.isShowReplenish
-                            ? renderBinaryRadioButtonGroup({
-                                title: 'Пополнение',
-                                ...field('isReplenish'),
-                                value: params.isReplenish,
-                                orientation: 'vertical',
-                                items: [
-                                    { id: 'withReplenish', text: 'С пополнением' },
-                                    { id: 'withoutReplenish', text: 'Без пополнения' },
-                                ],
-                                disabled: isCurrency,
-                            })
-                            : null, params.isShowWithdrawn
-                            ? renderBinaryRadioButtonGroup({
-                                title: 'Снятие',
-                                ...field('isWithdrawn'),
-                                value: params.isWithdrawn,
-                                orientation: 'vertical',
-                                items: [
-                                    { id: 'wthDrawn', text: 'Со снятием' },
-                                    { id: 'noWithdrawn', text: 'Без снятия' },
-                                ],
-                                disabled: isCurrency,
-                            })
-                            : null] }), renderSeparator(params.isShowReplenish || params.isShowWithdrawn), jsxs("div", { className: "flex gap-lg", children: [params.isShowMonthlyInterestPayment
-                            ? renderPayout({
-                                title: 'Выплата процентов',
-                                ...field('isMonthlyInterestPayment'),
-                                value: params.isMonthlyInterestPayment,
-                                orientation: 'vertical',
-                            })
-                            : null, params.isShowRemoteRegistration
-                            ? renderRegistrationType({
-                                title: 'Оформление',
-                                ...field('isRemoteRegistration'),
-                                value: params.isRemoteRegistration,
-                                orientation: 'vertical',
-                            })
-                            : null] }), renderSeparator(params.isShowNewClient), params.isShowNewClient ? jsx(Checkbox, { text: "\u041D\u043E\u0432\u044B\u0439 \u0432\u043A\u043B\u0430\u0434\u0447\u0438\u043A", ...field('isNewClient') }) : null] }));
+        return (jsxs("div", { className: "grid grid-cols-2 gap-lg", children: [renderReplenish(field('isReplenish'), params, isCurrency), renderWithdrawn(field('isWithdrawn'), params, isCurrency), renderSeparator(params.isShowReplenish || params.isShowWithdrawn), params.isShowMonthlyInterestPayment ? renderPayout(field('isMonthlyInterestPayment')) : null, renderRegistrationType(field('isRemoteRegistration'), params.isShowRemoteRegistration), renderExtraPercents(field('extraPercent'), extraPercents), params.isShowNewClient ? jsx(Checkbox, { text: "\u041D\u043E\u0432\u044B\u0439 \u0432\u043A\u043B\u0430\u0434\u0447\u0438\u043A", ...field('isNewClient') }) : null] }));
     };
-    const renderSeparator = (isShow = false) => isShow ? jsx("div", { className: "border-b border-main-divider w-full" }) : null;
+    const renderReplenish = (props, params, isCurrency = false) => params.isShowReplenish
+        ? renderBinaryRadioButtonGroup({
+            ...props,
+            title: 'Пополнение',
+            orientation: 'vertical',
+            items: [
+                { id: 'withReplenish', text: 'С пополнением' },
+                { id: 'withoutReplenish', text: 'Без пополнения' },
+            ],
+            disabled: isCurrency,
+        })
+        : null;
+    const renderWithdrawn = (props, params, isCurrency = false) => params.isShowWithdrawn
+        ? renderBinaryRadioButtonGroup({
+            ...props,
+            title: 'Снятие',
+            orientation: 'vertical',
+            items: [
+                { id: 'wthDrawn', text: 'Со снятием' },
+                { id: 'noWithdrawn', text: 'Без снятия' },
+            ],
+            disabled: isCurrency,
+        })
+        : null;
+    const renderSeparator = (isShow = false) => isShow ? jsx("div", { className: "border-b border-main-divider col-span-2 w-full" }) : null;
+    const renderExtraPercents = (props, extraPercents) => extraPercents?.length ? (jsxs("div", { className: "w-full space-y-s col-span-2", children: [jsx(Text, { color: "text-secondary-text", font: "font-light", children: "\u041D\u0430\u0434\u0431\u0430\u0432\u043A\u0430 \u0437\u0430 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u043F\u043E \u043A\u0430\u0440\u0442\u0435" }), jsx(Select, { options: extraPercents, ...props })] })) : null;
 
     const MAP = {
         isMonthlyInterestPayment: 'isMonthlyInterestPayment',
@@ -6708,6 +6758,7 @@
         isReplenish: 'isReplenish',
         isWithdrawn: 'isWithdrawn',
         moneyValue: 'minSum',
+        extraPercent: 'extraPercent',
     };
     const DEFAULT_CURRENCY = {
         text: '₽',
@@ -6715,6 +6766,7 @@
     };
     const DEPOSIT_DEFAULT_SUM = 20000;
     const DEPOSIT_DEFAULT_MONTHS = 1;
+    const DEPOSIT_DEFAULT_EXTRA_PERCENT = { text: 'Без учета надбавки', key: '0' };
     const CalculatorDeposit = UniBlock(({ className, title, calcSource, buttons = [], footnote = '', paramsViewSettings, defaultParams, ...rest }) => {
         const { rows } = calcSource ?? {};
         const currencyOptions = rows?.map((_) => _.currency) ?? [DEFAULT_CURRENCY];
@@ -6728,27 +6780,32 @@
             isWithdrawn: Boolean(defaultParams?.isWithdrawn),
             isNewClient: Boolean(defaultParams?.isNewClient),
             currency: DEFAULT_CURRENCY,
+            extraPercent: defaultParams?.extraPercent ?? DEPOSIT_DEFAULT_EXTRA_PERCENT,
         }, { normalizer: normalize });
-        const currencyValue = field?.('currency')?.value ?? DEFAULT_CURRENCY;
-        const isNewClient = field?.('isNewClient')?.value;
+        const currencyValue = getCurrencyValue(field);
+        const isNewClient = Boolean(field?.('isNewClient')?.value);
+        const extraPercents = rows?.find((_) => _?.extraPercents)?.extraPercents;
         const row = getRows(rows, currencyValue);
         const calcParams = getDepositCalculatorParams(userInputParams, row, paramsViewSettings);
         const { rate, income, finalSum, type = '' } = calcParams;
         const handleDefaultParamsCals = useCallback(() => {
             setDefaultParamsCalc({
                 field,
-                defParams: getDefaultParamsMax(row, isNewClient),
+                defParams: getDefaultParamsMax(row, isNewClient, extraPercents),
                 calcParams,
                 monthsValue: 'minMonths',
                 map: MAP,
             });
-        }, [field, rows]);
+        }, [field, rows, extraPercents]);
         useEffect(() => {
             if (!isDefaultParams(defaultParams) && row) {
                 handleDefaultParamsCals();
             }
         }, [defaultParams, rows]);
-        const isMaxRate = rate === getDefaultParamsMax(row, isNewClient)?.rate;
+        const extraRate = field?.('extraPercent')?.value?.key;
+        const totalRate = getTotalRate(rate, extraRate);
+        const isMaxRate = rate === getDefaultParamsMax(row, isNewClient)?.rate &&
+            extraRate === extraPercents?.at(-1)?.key;
         return (jsx(CalculatorLayout, { className: className, title: title, ...rest, children: jsxs("section", { className: style(CalculatorStyle.wrapper, className), children: [jsxs("div", { className: CalculatorStyle.input, children: [jsxs("div", { className: "flex gap-m", children: [renderWantedSumInput({
                                         className: 'w-full',
                                         title: `Сумма, ${currencyValue?.text}`,
@@ -6765,8 +6822,8 @@
                                 availableMonths: calcParams.availableMonths,
                                 ...field('monthsValue'),
                                 value: calcParams.monthsValue,
-                            }), renderDepositParamsForm({ ...calcParams, ...paramsViewSettings }, field)] }), renderRate({
-                        rate,
+                            }), renderDepositParamsForm({ ...calcParams, ...paramsViewSettings }, field, extraPercents)] }), renderRate({
+                        rate: totalRate,
                         children: renderMaxRateButton(handleDefaultParamsCals, isMaxRate),
                     }), renderDepositResult({
                         income,
@@ -6784,6 +6841,8 @@
         return button;
     };
     const renderMaxRateButton = (handleDefaultParamsCals, isMaxRate = false) => isMaxRate ? null : (jsx(Button, { type: "button", version: "secondary", onClick: handleDefaultParamsCals, children: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0443\u044E \u0441\u0442\u0430\u0432\u043A\u0443" }));
+    const getTotalRate = (rate, extraRate) => Number(rate) + Number(extraRate ?? 0);
+    const getCurrencyValue = (field) => field?.('currency')?.value ?? DEFAULT_CURRENCY;
 
     const checkRefinancingSourceBookRowCommonParams = (props) => checkRowParam({
         ...props,
@@ -6895,9 +6954,6 @@
         const calcParams = getRefinancingCalculatorParams(userInputParams, calcSource, paramsViewSettings);
         const minRate = useMemo(() => getDefaultParamsMin(calcSource?.rateRows)?.rate, [calcSource?.rateRows]);
         const paymentTypeElement = renderPaymentType({
-            title: '',
-            mobileTitle: 'Тип платежа',
-            orientation: 'vertical',
             ...field('isAnnuity'),
         });
         return (jsx(CalculatorLayout, { className: className, title: title, ...rest, children: jsxs("section", { className: style(CalculatorStyle.wrapper, className), children: [jsxs("div", { className: CalculatorStyle.input, children: [renderWantedSumInput({
@@ -6929,7 +6985,7 @@
                                     ...field('moneyExtra'),
                                     value: calcParams.moneyExtra,
                                 })
-                                : null, jsx("div", { className: "sm:hidden pt-1 pb-4 border-b border-main-divider", children: paymentTypeElement })] }), jsxs("div", { className: style(CalculatorStyle.result, '@4xl:w-1/2'), children: [jsx(CalculatorValue, { title: "\u041F\u043E\u043B\u043D\u0430\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u043A\u0440\u0435\u0434\u0438\u0442\u0430", value: calcSource?.totalLoanCost }), jsx(CalculatorValue, { title: "\u0421\u0442\u0430\u0432\u043A\u0430 \u043E\u0442", value: minRate, fractionDigits: 2, postfix: "%" }), jsx(CalculatorValue, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436", value: calcParams.monthlyPayment, postfix: "\u20BD" }), calcParams.benefit > 0 ? (jsx(CalculatorValue, { title: 'Выгода в месяц', value: calcParams.benefit, postfix: "\u20BD" })) : null, jsx("div", { className: "hidden sm:block mb-lg", children: paymentTypeElement }), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }) }));
+                                : null, jsx("div", { className: "sm:hidden pt-1 pb-4 border-b border-main-divider", children: paymentTypeElement })] }), jsxs("div", { className: style(CalculatorStyle.result, '@4xl:w-1/2'), children: [jsx(CalculatorValue, { title: "\u041F\u043E\u043B\u043D\u0430\u044F \u0441\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u043A\u0440\u0435\u0434\u0438\u0442\u0430", value: calcSource?.totalLoanCost }), jsx(CalculatorValue, { title: "\u0421\u0442\u0430\u0432\u043A\u0430 \u043E\u0442", value: minRate, fractionDigits: 2, postfix: "%" }), jsx(CalculatorValue, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436", value: calcParams.monthlyPayment, postfix: "\u20BD" }), calcParams.benefit > 0 ? (jsx(CalculatorValue, { title: "\u0412\u044B\u0433\u043E\u0434\u0430 \u0432 \u043C\u0435\u0441\u044F\u0446", value: calcParams.benefit, postfix: "\u20BD" })) : null, jsx("div", { className: "hidden sm:block mb-lg", children: paymentTypeElement }), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }) }));
     });
     const renderCreditParamsForm = (params, field) => (jsxs("div", { className: "space-y-lg sm:space-y-s", children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", ...field('isSalaryClient'), value: params.isSalaryClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null, jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u0443\u044E \u0441\u0443\u043C\u043C\u0443", ...field('isExtraMoney'), value: params.isExtraMoney })] }));
 
@@ -11208,7 +11264,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.778";
+    const packageVersion = "0.14.787";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;