@redneckz/wildless-cms-uni-blocks 0.14.778 → 0.14.787

package/mobile/src/ui-kit/Calculator/getDefaultParams.tsx

@@ -1,4 +1,5 @@
-import { type DepositCalculatorSourceBookParams } from '../../components/CalculatorDeposit/getDepositCalculatorParams';
+import { type DepositCalculatorSourceBookParams } from '../../components/CalculatorDeposit/CalculatorDepositContent';
+import { type Option } from '../Select/Option';
 import { type CalcDefaultParamsProps } from './CalculatorProps';
 
 export const getDefaultParamsMin = (rateRows?: CalcDefaultParamsProps[]) =>
@@ -9,11 +10,17 @@ export const getDefaultParamsMin = (rateRows?: CalcDefaultParamsProps[]) =>
 export const getDefaultParamsMax = (
   rateRows: DepositCalculatorSourceBookParams[] = [],
   isNewClient = false,
-) =>
-  getDefaultParams(
-    [(i: number, acc: number) => i > acc, (i, prev) => i?.minSum < prev?.minSum],
-    rateRows?.filter((_) => isNewClient === Boolean(_?.isNewClient)),
-  );
+  extraPercents: Option[] = [],
+) => {
+  return {
+    ...getDefaultParams(
+      [(i: number, acc: number) => i > acc, (i, prev) => i?.minSum < prev?.minSum],
+      rateRows?.filter((_) => isNewClient === Boolean(_?.isNewClient)),
+    ),
+    extraPercent: extraPercents.at(-1),
+    extraPercents,
+  };
+};
 
 const getDefaultParams = (
   comparators: [

package/mobile/src/ui-kit/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -8,7 +8,6 @@ import { Text } from '../../ui-kit/Text/Text';
 export interface BinaryRadioButtonGroupProps {
   items: [truthy: RadioButtonItem, falsy: RadioButtonItem];
   title?: string;
-  mobileTitle?: string;
   orientation?: ListOrientation;
   value?: boolean;
   className?: string;
@@ -19,27 +18,19 @@ export interface BinaryRadioButtonGroupProps {
 export const renderBinaryRadioButtonGroup = ({
   items,
   title,
-  mobileTitle = title,
   orientation = 'horizontal',
   value,
   onChange,
   ...rest
 }: BinaryRadioButtonGroupProps) => (
-  <div className="grid gap-s whitespace-nowrap">
+  <div className="grid gap-s whitespace-nowrap lg:sm:col-span-1 col-span-2">
     {title ? (
-      <div className="hidden @5xl:block" role="radiogroup" aria-label={title}>
+      <div role="radiogroup" aria-label={title}>
         <Text color="text-secondary-text" font="font-light">
           {title}
         </Text>
       </div>
     ) : null}
-    {mobileTitle ? (
-      <div className="@5xl:hidden" role="radiogroup" aria-label={mobileTitle}>
-        <Text color="text-secondary-text" font="font-light">
-          {mobileTitle}
-        </Text>
-      </div>
-    ) : null}
 
     <RadioButtonGroup
       orientation={orientation}

package/mobile/src/ui-kit/Calculator/renderPaymentType.tsx

@@ -6,6 +6,8 @@ import {
 export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
   renderBinaryRadioButtonGroup({
     ...props,
+    title: 'Тип платежа',
+    orientation: 'vertical',
     className: 'sm:flex-col',
     items: [
       { id: 'annuity', text: 'Аннуитетный' },

package/mobile/src/ui-kit/Calculator/renderPayout.tsx

@@ -6,6 +6,8 @@ import {
 export const renderPayout = (props: Partial<BinaryRadioButtonGroupProps>) =>
   renderBinaryRadioButtonGroup({
     ...props,
+    title: 'Выплата процентов',
+    orientation: 'vertical',
     items: [
       { id: 'everyMonth', text: 'Ежемесячно' },
       { id: 'atEndTerm', text: 'В конце срока' },

package/mobile/src/ui-kit/Calculator/setDefaultParamsCalc.tsx

@@ -5,7 +5,7 @@ import {
 import {
   type DepositCalculatorParams,
   type DepositCalculatorSourceBookParams,
-} from '../../components/CalculatorDeposit/getDepositCalculatorParams';
+} from '../../components/CalculatorDeposit/CalculatorDepositContent';
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { clamp } from '../../utils/clamp';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.778",
+  "version": "0.14.787",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -29,6 +29,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     nextStepLink = '/credit-lead',
     button,
     productType = 'credit',
+    data,
     ...rest
   }) => {
     const applicationFormData = useMemo(() => getApplicationFormData(productType), [productType]);
@@ -48,6 +49,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
       programId,
       nextStepLink,
       productType,
+      data,
     });
 
     const [, { field, onSubmit }] = useForm(initialFormState, {

package/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -1,3 +1,4 @@
+import { type AspectsProps } from '../../model/AspectsProps';
 import { type TextProps, type TitleProps } from '../../model/HeadlineType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type InputRetailSectionsType } from '../../retail/model/InputSectionsType';
@@ -13,6 +14,7 @@ export type ProductType = 'credit' | 'creditCard' | 'debitCard';
  * @title Форма заявки настраиваемая
  */
 export type ApplicationLeadFormContent = UniBlockContent &
+  AspectsProps &
   TitleProps &
   InputRetailSectionsType & {
     /** @title Кнопка */

package/src/components/ApplicationLeadForm/useApplicationLeadApi.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable max-lines */
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { handleAspects } from '../../hooks/useAspects/handleAspects';
+import { useAspects } from '../../hooks/useAspects/useAspects';
+import { type AspectsProps } from '../../model/AspectsProps';
 import { createDraftTask } from '../../retail/api/createDraftTask';
 import { createUserProfile } from '../../retail/api/createUserProfile';
 import { createUserTaskDebit } from '../../retail/api/createUserTaskDebit';
@@ -15,26 +18,30 @@ import { VerifyPhoneDialog } from '../../retail/components/VerifyPhoneDialog/Ver
 import { type FormRetailConsents, type LeadFormState } from '../../retail/model/LeadFormState';
 import { getUpdateUserProfileData } from '../../retail/utils/getUpdateUserProfile';
 import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { formatPhone } from '../../utils/formatPhone';
 import { type ProductType } from './ApplicationLeadFormContent';
 import { productTypeToConsentsMap } from './consents';
 import { getCreditLeadFormTaskData, getDebitLeadFormTaskData } from './getLeadFormTaskData';
 import { useSaveUserData, type UserData } from './useSaveUserData';
 
-interface ApplicationLeadApiProps {
+interface ApplicationLeadApiProps extends AspectsProps {
   programId: string;
   nextStepLink: string;
   productType: ProductType;
 }
 
+// eslint-disable-next-line max-lines-per-function
 export const useApplicationLeadApi = ({
   programId,
   nextStepLink,
   productType,
+  data,
 }: ApplicationLeadApiProps) => {
   const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const [ok, setOK] = useState<boolean | undefined>();
   const saveUserData = useSaveUserData();
+  const aspects = useAspects();
 
   const openEsiaLoginDialog = useEsiaLoginDialog(nextStepLink);
   const consentBkiDialog = useConsentBkiDialog(openEsiaLoginDialog);
@@ -57,6 +64,11 @@ export const useApplicationLeadApi = ({
             productType,
             saveUserData,
           });
+          handleAspects({
+            aspectsAttributes: data,
+            aspects,
+            ev: {} as PreventableEventWithTarget,
+          });
           verifyPhoneDialog.close();
           if (productType === 'debitCard') {
             openEsiaLoginDialog();

package/src/components/CalculatorBusinessDeposit/CalculatorBusinessDeposit.tsx

@@ -77,10 +77,7 @@ export const CalculatorBusinessDeposit = UniBlock<CalculatorBusinessDepositProp>
             <div className="flex flex-col sm:flex-row gap-y-m gap-x-5xl">
               {renderBusinessDepositParamsForm(calculatorParams, field)}
               {renderPayout({
-                title: 'Выплата процентов',
-                orientation: 'vertical',
                 ...field('isMonthlyInterestPayment'),
-                className: 'sm:flex-col',
               })}
             </div>
           </div>

package/src/components/CalculatorCredit/CalculatorCredit.tsx

@@ -78,8 +78,6 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
 
     const calcParams = getCreditCalculatorParams(userInputParams, calcSource, paramsViewSettings);
     const paymentTypeElement = renderPaymentType({
-      title: 'Тип платежа',
-      orientation: 'vertical',
       ...field('isAnnuity'),
     });
     const { onChange: setMoneyValue } = field('moneyValue');

package/src/components/CalculatorDeposit/CalculatorDeposit.fixture.tsx

@@ -97,4 +97,16 @@ export default {
       <PopupManager />
     </div>
   ),
+  extraPercents: (
+    <div className="container grid grid-cols-12">
+      <CalculatorDeposit
+        {...calculator}
+        title="Калькулятор с задаными дефолтными значениями"
+        paramsViewSettings={{
+          isShowReplenish: true,
+        }}
+      />
+      <PopupManager />
+    </div>
+  ),
 };

package/src/components/CalculatorDeposit/CalculatorDeposit.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines, max-lines-per-function */
 import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
-import { useForm } from '../../hooks/useForm/useForm';
+import { useForm, type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { Button } from '../../ui-kit/Button/Button';
 import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
 import { CalculatorStyle } from '../../ui-kit/Calculator/CalculatorStyle';
@@ -20,13 +20,14 @@ import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { isDefaultParams } from '../CalculatorCredit/isDefaultParams';
-import { type CalculatorDepositContent } from './CalculatorDepositContent';
 import {
-  getDepositCalculatorParams,
+  type CalculatorDepositContent,
   type DepositCalculatorData,
   type DepositCalculatorSourceBookParams,
-  type TariffsButtonContent,
-} from './getDepositCalculatorParams';
+  type DepositParams,
+  type LinkButtonWithTypeContent,
+} from './CalculatorDepositContent';
+import { getDepositCalculatorParams } from './getDepositCalculatorParams';
 import { isRubles } from './isRubles';
 import { getRows, normalizeDepositParams } from './normalize';
 import { renderDepositParamsForm } from './renderDepositParamsForm';
@@ -38,6 +39,7 @@ const MAP = {
   isReplenish: 'isReplenish',
   isWithdrawn: 'isWithdrawn',
   moneyValue: 'minSum',
+  extraPercent: 'extraPercent',
 };
 
 const DEFAULT_CURRENCY: Option = {
@@ -47,11 +49,13 @@ const DEFAULT_CURRENCY: Option = {
 
 const DEPOSIT_DEFAULT_SUM = 20000;
 const DEPOSIT_DEFAULT_MONTHS = 1;
+const DEPOSIT_DEFAULT_EXTRA_PERCENT = { text: 'Без учета надбавки', key: '0' };
 
 export interface CalculatorDepositProps extends CalculatorDepositContent, UniBlockProps {
   className?: string;
   calcSource?: DepositCalculatorData & JSONRefObject;
 }
+
 export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
   ({
     className,
@@ -67,7 +71,7 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
     const currencyOptions = rows?.map((_) => _.currency) ?? [DEFAULT_CURRENCY];
     const normalize = useCallback(normalizeDepositParams(rows), [rows]);
 
-    const [userInputParams, { field }] = useForm(
+    const [userInputParams, { field }] = useForm<DepositParams>(
       {
         moneyValue: getMoneyDefaultValue(defaultParams, DEPOSIT_DEFAULT_SUM),
         monthsValue: getMonthsDefaultValue(defaultParams, DEPOSIT_DEFAULT_MONTHS),
@@ -77,25 +81,30 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
         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) as DepositCalculatorSourceBookParams,
+        defParams: getDefaultParamsMax(
+          row,
+          isNewClient,
+          extraPercents,
+        ) as DepositCalculatorSourceBookParams,
         calcParams,
         monthsValue: 'minMonths',
         map: MAP,
       });
-    }, [field, rows]);
+    }, [field, rows, extraPercents]);
 
     useEffect(() => {
       if (!isDefaultParams(defaultParams) && row) {
@@ -103,7 +112,11 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
       }
     }, [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 (
       <CalculatorLayout className={className} title={title} {...rest}>
@@ -132,10 +145,14 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
               ...field('monthsValue'),
               value: calcParams.monthsValue,
             })}
-            {renderDepositParamsForm({ ...calcParams, ...paramsViewSettings }, field)}
+            {renderDepositParamsForm(
+              { ...calcParams, ...paramsViewSettings },
+              field,
+              extraPercents,
+            )}
           </div>
           {renderRate({
-            rate,
+            rate: totalRate,
             children: renderMaxRateButton(handleDefaultParamsCals, isMaxRate),
           })}
           {renderDepositResult({
@@ -154,7 +171,7 @@ export const CalculatorDeposit = UniBlock<CalculatorDepositProps>(
 
 const getStep = (key = '') => (isRubles(key) ? 1000 : 100);
 
-const getTariffButton = (buttons: TariffsButtonContent[] = [], btnType = '') => {
+const getTariffButton = (buttons: LinkButtonWithTypeContent[] = [], btnType = '') => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { type, ...button } = buttons.find((_) => _.type === btnType) ?? {};
 
@@ -167,3 +184,9 @@ const renderMaxRateButton = (handleDefaultParamsCals: () => void, isMaxRate = fa
       Показать максимальную ставку
     </Button>
   );
+
+const getTotalRate = (rate: number, extraRate?: string): number =>
+  Number(rate) + Number(extraRate ?? 0);
+
+const getCurrencyValue = (field: FormFieldRegisterer<DepositParams>) =>
+  field?.('currency')?.value ?? DEFAULT_CURRENCY;

package/src/components/CalculatorDeposit/CalculatorDepositContent.ts

@@ -1,11 +1,47 @@
 import {
+  type CalcDefaultParamsProps,
   type CalcValueProps,
   type CommonCalculatorProps,
   type CommonDefaultParams,
 } from '../../ui-kit/Calculator/CalculatorProps';
+import type { LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { type Option } from '../../ui-kit/Select/Option';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
+export interface DepositCalculatorUserInputParams extends CommonDepositParams, CalcValueProps {}
+
+export interface DepositCalculatorParams
+  extends DepositCalculatorSourceBookParams,
+    DepositCalculatorUserInputParams {
+  availableMonths: number[];
+  defaultMonth: number;
+  income: number;
+  finalSum: number;
+  currency?: Option;
+}
+
+export type LinkButtonWithTypeContent = LinkButtonContent & {
+  type?: string;
+};
+
+export type DepositCalculatorRowsData = {
+  currency: Option;
+  rates?: DepositCalculatorSourceBookParams[];
+  extraPercents?: Option[];
+};
+
+export type DepositCalculatorData = {
+  rows?: DepositCalculatorRowsData[];
+  buttons?: LinkButtonWithTypeContent[];
+};
+
+export interface DepositCalculatorSourceBookParams
+  extends CommonDepositParams,
+    CalcDefaultParamsProps {
+  currency?: Option;
+  extraPercent?: Option;
+}
+
 export interface CalculatorDepositParamsViewSettings {
   /**
    * @title Выплата процентов
@@ -23,6 +59,8 @@ export interface CalculatorDepositParamsViewSettings {
   isShowWithdrawn?: boolean;
   /** @title Новый клиент */
   isShowNewClient?: boolean;
+  /** @title Новый клиент */
+  isShowExtraPercent?: boolean;
 }
 
 export interface CommonDepositParams {
@@ -36,6 +74,8 @@ export interface CommonDepositParams {
   isRemoteRegistration?: boolean;
   /** @title Новый клиент */
   isNewClient?: boolean;
+  /** @title Дополнительный процент */
+  extraPercent?: Option;
   /** @title Валюта */
   currency?: Option;
   /** @hidden */
@@ -43,6 +83,7 @@ export interface CommonDepositParams {
 }
 
 export interface DepositDefaultParams extends CommonDefaultParams, CommonDepositParams {}
+
 export interface DepositParams extends DepositDefaultParams, CalcValueProps {}
 
 /**

package/src/components/CalculatorDeposit/getDepositCalculatorParams.ts

@@ -1,15 +1,11 @@
-import {
-  type CalcDefaultParamsProps,
-  type CalcValueProps,
-} from '../../ui-kit/Calculator/CalculatorProps';
 import { checkRangeByKeys, getRangeByKeys } from '../../ui-kit/Calculator/rangeHelpers';
-import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
-import { type Option } from '../../ui-kit/Select/Option';
 import { arrayByRange } from '../../utils/arrayByRange';
 import { mergeIntervals } from '../../utils/mergeIntervals';
 import {
   type CalculatorDepositParamsViewSettings,
-  type CommonDepositParams,
+  type DepositCalculatorParams,
+  type DepositCalculatorSourceBookParams,
+  type DepositCalculatorUserInputParams,
 } from './CalculatorDepositContent';
 
 const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParams = {
@@ -25,38 +21,6 @@ const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParams = {
   type: '',
 };
 
-export interface DepositCalculatorSourceBookParams
-  extends CommonDepositParams,
-    CalcDefaultParamsProps {
-  currency?: Option;
-}
-
-export interface DepositCalculatorUserInputParams extends CommonDepositParams, CalcValueProps {}
-
-export interface DepositCalculatorParams
-  extends DepositCalculatorSourceBookParams,
-    DepositCalculatorUserInputParams {
-  availableMonths: number[];
-  defaultMonth: number;
-  income: number;
-  finalSum: number;
-  currency?: Option;
-}
-
-export type TariffsButtonContent = LinkButtonContent & {
-  type?: string;
-};
-
-export type DepositCalculatorRowsData = {
-  currency: Option;
-  rates: DepositCalculatorSourceBookParams[];
-};
-
-export type DepositCalculatorData = {
-  rows?: DepositCalculatorRowsData[];
-  buttons?: TariffsButtonContent[];
-};
-
 export const getDepositCalculatorParams = (
   userInputParams: DepositCalculatorUserInputParams,
   rows?: DepositCalculatorSourceBookParams[],

package/src/components/CalculatorDeposit/normalize.tsx

@@ -1,8 +1,7 @@
 import { getRangeByKeys } from '../../ui-kit/Calculator/rangeHelpers';
 import { type Option } from '../../ui-kit/Select/Option';
 import { clamp } from '../../utils/clamp';
-import { type DepositParams } from './CalculatorDepositContent';
-import { type DepositCalculatorRowsData } from './getDepositCalculatorParams';
+import { type DepositCalculatorRowsData, type DepositParams } from './CalculatorDepositContent';
 import { isRubles } from './isRubles';
 
 export const normalizeDepositParams = (rows?: DepositCalculatorRowsData[]) => (_: DepositParams) =>

package/src/components/CalculatorDeposit/renderDepositParamsForm.tsx

@@ -1,71 +1,84 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
-import { renderBinaryRadioButtonGroup } from '../../ui-kit/Calculator/renderBinaryRadioButtonGroup';
+import {
+  renderBinaryRadioButtonGroup,
+  type BinaryRadioButtonGroupProps,
+} from '../../ui-kit/Calculator/renderBinaryRadioButtonGroup';
 import { renderPayout } from '../../ui-kit/Calculator/renderPayout';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { type CalculatorDepositParamsViewSettings } from './CalculatorDepositContent';
-import { type DepositCalculatorParams } from './getDepositCalculatorParams';
+import { type Option } from '../../ui-kit/Select/Option';
+import { Select, type SelectProps } from '../../ui-kit/Select/Select';
+import { Text } from '../../ui-kit/Text/Text';
+import {
+  type CalculatorDepositParamsViewSettings,
+  type DepositCalculatorParams,
+} from './CalculatorDepositContent';
 import { renderRegistrationType } from './renderRegistrationType';
 
 export const renderDepositParamsForm = (
   params: DepositCalculatorParams & CalculatorDepositParamsViewSettings,
   field: FormFieldRegisterer<any>,
+  extraPercents?: Option[],
 ) => {
   const isCurrency = params?.currency?.key !== 'rub';
 
   return (
-    <div className="grid gap-lg">
-      <div className="flex gap-lg">
-        {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}
-      </div>
+    <div className="grid grid-cols-2 gap-lg">
+      {renderReplenish(field('isReplenish'), params, isCurrency)}
+      {renderWithdrawn(field('isWithdrawn'), params, isCurrency)}
       {renderSeparator(params.isShowReplenish || params.isShowWithdrawn)}
-      <div className="flex gap-lg">
-        {params.isShowMonthlyInterestPayment
-          ? renderPayout({
-              title: 'Выплата процентов',
-              ...field('isMonthlyInterestPayment'),
-              value: params.isMonthlyInterestPayment,
-              orientation: 'vertical',
-            })
-          : null}
-        {params.isShowRemoteRegistration
-          ? renderRegistrationType({
-              title: 'Оформление',
-              ...field('isRemoteRegistration'),
-              value: params.isRemoteRegistration,
-              orientation: 'vertical',
-            })
-          : null}
-      </div>
-      {renderSeparator(params.isShowNewClient)}
+      {params.isShowMonthlyInterestPayment ? renderPayout(field('isMonthlyInterestPayment')) : null}
+      {renderRegistrationType(field('isRemoteRegistration'), params.isShowRemoteRegistration)}
+      {renderExtraPercents(field('extraPercent'), extraPercents)}
       {params.isShowNewClient ? <Checkbox text="Новый вкладчик" {...field('isNewClient')} /> : null}
     </div>
   );
 };
 
+const renderReplenish = (
+  props: Partial<BinaryRadioButtonGroupProps>,
+  params: DepositCalculatorParams & CalculatorDepositParamsViewSettings,
+  isCurrency = false,
+) =>
+  params.isShowReplenish
+    ? renderBinaryRadioButtonGroup({
+        ...props,
+        title: 'Пополнение',
+        orientation: 'vertical',
+        items: [
+          { id: 'withReplenish', text: 'С пополнением' },
+          { id: 'withoutReplenish', text: 'Без пополнения' },
+        ],
+        disabled: isCurrency,
+      })
+    : null;
+
+const renderWithdrawn = (
+  props: Partial<BinaryRadioButtonGroupProps>,
+  params: DepositCalculatorParams & CalculatorDepositParamsViewSettings,
+  isCurrency = false,
+) =>
+  params.isShowWithdrawn
+    ? renderBinaryRadioButtonGroup({
+        ...props,
+        title: 'Снятие',
+        orientation: 'vertical',
+        items: [
+          { id: 'wthDrawn', text: 'Со снятием' },
+          { id: 'noWithdrawn', text: 'Без снятия' },
+        ],
+        disabled: isCurrency,
+      })
+    : null;
+
 const renderSeparator = (isShow = false) =>
-  isShow ? <div className="border-b border-main-divider w-full"></div> : null;
+  isShow ? <div className="border-b border-main-divider col-span-2 w-full"></div> : null;
+
+const renderExtraPercents = (props: Partial<SelectProps>, extraPercents?: Option[]) =>
+  extraPercents?.length ? (
+    <div className="w-full space-y-s col-span-2">
+      <Text color="text-secondary-text" font="font-light">
+        Надбавка за операции по карте
+      </Text>
+      <Select options={extraPercents} {...props} />
+    </div>
+  ) : null;