@redneckz/wildless-cms-uni-blocks 0.16.1 → 0.16.3-isr

package/mobile/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';
+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,
       },
-      { normalize },
+      { 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/mobile/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 Выплата процентов
@@ -36,6 +72,8 @@ export interface CommonDepositParams {
   isRemoteRegistration?: boolean;
   /** @title Новый клиент */
   isNewClient?: boolean;
+  /** @title Дополнительный процент */
+  extraPercent?: Option;
   /** @title Валюта */
   currency?: Option;
   /** @hidden */
@@ -43,6 +81,7 @@ export interface CommonDepositParams {
 }
 
 export interface DepositDefaultParams extends CommonDefaultParams, CommonDepositParams {}
+
 export interface DepositParams extends DepositDefaultParams, CalcValueProps {}
 
 /**

package/mobile/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[],
@@ -103,7 +67,9 @@ export const getDepositCalculatorParams = (
     ) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
 
   const { rate } = depositCalculatorSourceBookParams;
-  const income = getDepositIncome(rate, userInputParams);
+  const extraPercent = userInputParams?.extraPercent?.key ?? 0;
+  const totalRate = Number(rate) + Number(extraPercent);
+  const income = getDepositIncome(totalRate, userInputParams);
   const finalSum = moneyValue + income;
   const sourceBookRows = rows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];
 

package/mobile/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/mobile/src/components/CalculatorDeposit/renderDepositParamsForm.tsx

@@ -1,71 +1,86 @@
-import { type FormFieldRegisterer } from '../../hooks/useForm';
-import { renderBinaryRadioButtonGroup } from '../../ui-kit/Calculator/renderBinaryRadioButtonGroup';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+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.isShowNewClient ? <Checkbox text="Новый вкладчик" {...field('isNewClient')} /> : null}
+      {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;

package/mobile/src/components/CalculatorDeposit/renderRegistrationType.tsx

@@ -3,11 +3,18 @@ import {
   type BinaryRadioButtonGroupProps,
 } from '../../ui-kit/Calculator/renderBinaryRadioButtonGroup';
 
-export const renderRegistrationType = (props: Partial<BinaryRadioButtonGroupProps>) =>
-  renderBinaryRadioButtonGroup({
-    ...props,
-    items: [
-      { id: 'remote', text: 'Дистанционно' },
-      { id: 'office', text: 'Офис Банка' },
-    ],
-  });
+export const renderRegistrationType = (
+  props: Partial<BinaryRadioButtonGroupProps>,
+  isShow = false,
+) =>
+  isShow
+    ? renderBinaryRadioButtonGroup({
+        ...props,
+        title: 'Оформление',
+        orientation: 'vertical',
+        items: [
+          { id: 'remote', text: 'Дистанционно' },
+          { id: 'office', text: 'Офис Банка' },
+        ],
+      })
+    : null;

package/mobile/src/components/CalculatorRefinancing/CalculatorRefinancing.tsx

@@ -1,8 +1,10 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
-import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { useForm, type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
 import { CalculatorStyle } from '../../ui-kit/Calculator/CalculatorStyle';
 import { CalculatorValue } from '../../ui-kit/Calculator/CalculatorValue';
+import { getDefaultParamsMin } from '../../ui-kit/Calculator/getDefaultParams';
 import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
 import { renderMonthsInput } from '../../ui-kit/Calculator/renderMonthsInput';
 import { renderPaymentType } from '../../ui-kit/Calculator/renderPaymentType';
@@ -28,6 +30,7 @@ export interface RefinancingCalculatorProp extends CalculatorRefinancingContent,
   className?: string;
   calcSource?: JSONRefObject & RefinancingCalculatorData;
 }
+
 export const CalculatorRefinancing = UniBlock<RefinancingCalculatorProp>(
   // eslint-disable-next-line max-lines-per-function
   ({ className = '', title, calcSource, buttons, footnote, paramsViewSettings, ...rest }) => {
@@ -48,10 +51,12 @@ export const CalculatorRefinancing = UniBlock<RefinancingCalculatorProp>(
       paramsViewSettings,
     );
 
+    const minRate = useMemo(
+      () => getDefaultParamsMin(calcSource?.rateRows)?.rate,
+      [calcSource?.rateRows],
+    );
+
     const paymentTypeElement = renderPaymentType({
-      title: '',
-      mobileTitle: 'Тип платежа',
-      orientation: 'vertical',
       ...field('isAnnuity'),
     });
 
@@ -99,19 +104,14 @@ export const CalculatorRefinancing = UniBlock<RefinancingCalculatorProp>(
           </div>
           <div className={style(CalculatorStyle.result, '@4xl:w-1/2')}>
             <CalculatorValue title="Полная стоимость кредита" value={calcSource?.totalLoanCost} />
-            <CalculatorValue
-              title="Ставка"
-              value={calcParams?.rate}
-              fractionDigits={2}
-              postfix="%"
-            />
+            <CalculatorValue title="Ставка от" value={minRate} fractionDigits={2} postfix="%" />
             <CalculatorValue
               title="Ежемесячный платёж"
               value={calcParams.monthlyPayment}
               postfix="₽"
             />
             {calcParams.benefit > 0 ? (
-              <CalculatorValue title={'Выгода в месяц'} value={calcParams.benefit} postfix="₽" />
+              <CalculatorValue title="Выгода в месяц" value={calcParams.benefit} postfix="₽" />
             ) : null}
             <div className="hidden sm:block mb-lg">{paymentTypeElement}</div>
             {renderButtonsSection(buttons, { isVertical: true })}

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -1,24 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useForm } from '../../hooks/useForm';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useForm } from '../../hooks/useForm/useForm';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Button } from '../../ui-kit/Button/Button';
+import { SubmitButton } from '../../ui-kit/Button/SubmitButton';
 import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { type CardTransferContent } from './CardTransferContent';
+import { useSubmitCardTransfer } from './useSubmitCardTransfer';
 
 const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const MAX_AMOUNT = 300000;
 const MIN_AMOUNT = 1;
 
-const FORM_URL_MAP = {
-  private: 'https://old.rshb.ru/p2p/',
-  business: 'https://old.rshb.ru/smallbusiness/p2p/',
-};
-
 const INITIAL_FORM_STATE = {
   amount: 1500,
 };
@@ -34,9 +31,15 @@ export const CardTransfer = JSX<CardTransferProps>(
     formType = 'private',
     ...rest
   }) => {
-    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
-    const [isDisabled, setDisabled] = useState(false);
+    const [isDisabled, { setValue: setDisabled }] = useBool(false);
+
+    const handleSubmit = useSubmitCardTransfer(formType);
+
+    const [{ amount }, { field, onSubmit }] = useForm(INITIAL_FORM_STATE, {
+      onSubmit: handleSubmit,
+    });
 
+    // TODO: dont set state in useEffect
     useEffect(() => {
       setDisabled(amount <= 0);
     }, [amount]);
@@ -54,7 +57,7 @@ export const CardTransfer = JSX<CardTransferProps>(
             title={title}
           />
         ) : null}
-        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL_MAP[formType]}>
+        <form className="w-full xl:max-w-[468px]" method="POST" onSubmit={onSubmit}>
           <CurrencyInput
             valid={!isDisabled}
             label={label}
@@ -64,9 +67,9 @@ export const CardTransfer = JSX<CardTransferProps>(
           />
           <input type="hidden" name="amount" value={amount} />
           {button?.text ? (
-            <Button className="w-full mt-lg" type="submit" disabled={isDisabled}>
+            <SubmitButton className="w-full mt-lg" disabled={isDisabled}>
               {button.text}
-            </Button>
+            </SubmitButton>
           ) : null}
         </form>
       </BlockWrapper>

package/mobile/src/components/CardTransfer/CardTransferContent.ts

@@ -1,6 +1,8 @@
 import { type LabelProps, type TextProps, type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
+export type CardTransferFormType = 'private' | 'business';
+
 /**
  * @title Перевод с карты на карту
  */
@@ -13,5 +15,5 @@ export type CardTransferContent = UniBlockContent &
      * @title Тип формы
      * @enumNames ['Частные клиенты', 'Бизнес-клиенты']
      */
-    formType?: 'private' | 'business';
+    formType?: CardTransferFormType;
   };

package/mobile/src/components/CardTransfer/SubmitFailedDialog.tsx

@@ -0,0 +1,42 @@
+import { Dialog } from '../../ui-kit/DialogManager/Dialog';
+import { Img } from '../../ui-kit/Img/Img';
+import { Headline } from '../Headline/Headline';
+
+export interface FormResponseDialogProps {
+  onClose?: () => void;
+  errorCode?: number;
+  errorMessage?: string;
+}
+
+const FAILED_TITLE = 'Ошибка перевода';
+
+export const SubmitFailedDialog = ({
+  onClose,
+  errorCode,
+  errorMessage,
+}: FormResponseDialogProps) => {
+  const description = errorCode ? `Код ошибки - ${errorCode}` : 'Пожалуйста, повторите позднее';
+
+  return (
+    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
+      <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
+        <Img image={{ icon: 'ResponseFailIcon', iconVersion: 'normal' }} width="136" height="136" />
+        <Headline
+          className="w-full"
+          title={FAILED_TITLE}
+          description={description}
+          headlineVersion="XS"
+          isEmbedded={true}
+        />
+        {errorMessage ? (
+          <div className="bg-secondary-dark rounded-xl px-4 pt-4 pb-8 grid gap-4 grid-cols-12">
+            <div className="col-span-8"> {errorMessage}</div>
+            <div className="col-span-4">
+              <Img image={{ icon: 'ResponseFailIcon', iconVersion: 'normal' }} />
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </Dialog>
+  );
+};