@redneckz/wildless-cms-uni-blocks 0.14.665 → 0.14.666

package/mobile/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -123,8 +123,12 @@ export interface FormState extends FormConsents, FormStateDeliveryType {
   participantDateRegistration?: Date | string;
   retirementIncome?: number;
   otherIncome?: number;
-  mandatoryIncome?: number;
+  incomeAverage?: number;
+  mandatoryPayments?: number;
+  additionalIncome?: number;
   otherPayments?: number;
+  rentalIncome?: number;
+  wages?: number;
   creditInRshbCd?: Option;
   disablePeopleFlg?: boolean;
   bankruptcyFlg?: boolean;

package/mobile/src/components/ContentPage/useContentPageData.ts

@@ -3,7 +3,7 @@ import { type BlocksRegistry } from '../../model/BlocksRegistry';
 import { type BlockDef, type ContentPageDef } from '../../model/ContentPageDef';
 import baseData from './ContentPage.page.json';
 
-const BLOCK_TYPES_BLACK_LIST = ['Header', 'Footer', 'Placeholder'];
+const BLOCK_TYPES_BLACK_LIST = ['Header', 'Footer', 'Placeholder', 'CreditForm', 'CreditCardForm'];
 
 export function useContentPageData(blocksRegistry: BlocksRegistry): ContentPageDef {
   const [data, setData] = useState<ContentPageDef>(baseData as ContentPageDef);

package/mobile/src/components/CreditCardForm/CreditCardForm.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { updateRefreshToken } from '../../api/RetailAPI/updateRefreshToken';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
@@ -24,6 +25,8 @@ const WIZARD_TITLES = [
 export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...rest }) => {
   const [step, setStep] = useState(0);
 
+  useEffect(updateRefreshToken, []);
+
   const handleNextStep = useCallback(() => {
     setStep((_) => Math.min(_ + 1, WIZARD_STEPS));
   }, []);

package/mobile/src/components/CreditCardForm/creditCardFormStepsData.tsx

@@ -205,11 +205,11 @@ export const stepsSectionsMap: CreditCardSectionsProps[][] = [
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'mandatoryIncome', required: true }],
+      inputs: [{ fieldType: 'common', name: 'wages', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'otherPayments', required: true }],
+      inputs: [{ fieldType: 'common', name: 'mandatoryPayments', required: true }],
     },
     {
       columns: 1,

package/mobile/src/components/CreditCardForm/formStateMap.tsx

@@ -63,8 +63,8 @@ export const formStateMap: Partial<FormState>[] = [
     dependents: undefined,
     familyMembers: undefined,
     confirmationIncome: { key: '', text: '' },
-    mandatoryIncome: undefined,
-    otherPayments: undefined,
+    wages: undefined,
+    mandatoryPayments: undefined,
     snils: '',
     armyIdFlg: false,
   },

package/mobile/src/components/CreditCardForm/getFourthStepData.ts

@@ -7,8 +7,14 @@ export const getFourthStepData = (formData: FormState): Partial<Participant> =>
     familyStatus,
     dependents,
     familyMembers,
-    mandatoryIncome,
+    wages,
+    mandatoryPayments,
+    incomeAverage,
+    additionalIncome,
+    otherIncome,
     otherPayments,
+    rentalIncome,
+    retirementIncome,
     snils,
     armyIdFlg,
   } = formData;
@@ -18,8 +24,14 @@ export const getFourthStepData = (formData: FormState): Partial<Participant> =>
     totalDependents: familyMembers,
     otherDependents: dependents,
     participantIncomes: getParticipantIncomes({
-      mandatoryIncome,
+      wages,
+      mandatoryPayments,
+      incomeAverage,
+      additionalIncome,
+      otherIncome,
       otherPayments,
+      rentalIncome,
+      retirementIncome,
     }),
     snils: snils?.replaceAll(' ', ''),
     armyIdFlg,

package/mobile/src/components/CreditForm/creditFormStepsData.tsx

@@ -198,11 +198,11 @@ export const stepsSectionsMap: SectionsProps[][] = [
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'mandatoryIncome', required: true }],
+      inputs: [{ fieldType: 'common', name: 'wages', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'otherPayments', required: true }],
+      inputs: [{ fieldType: 'common', name: 'mandatoryPayments', required: true }],
     },
     {
       columns: 1,

package/mobile/src/components/CreditForm/formStateMap.tsx

@@ -61,8 +61,8 @@ export const formStateMap: Partial<FormState>[] = [
     dependents: undefined,
     familyMembers: undefined,
     confirmationIncome: { key: '', text: '' },
-    mandatoryIncome: undefined,
-    otherPayments: undefined,
+    wages: undefined,
+    mandatoryPayments: undefined,
     snils: '',
     armyIdFlg: false,
   },

package/mobile/src/components/CreditForm/getThirdStepData.ts

@@ -8,8 +8,14 @@ export const getThirdStepData = (formData: FormState): Partial<Participant> => {
     dependents,
     familyMembers,
     confirmationIncome,
-    mandatoryIncome,
+    wages,
+    mandatoryPayments,
+    incomeAverage,
+    additionalIncome,
+    otherIncome,
     otherPayments,
+    rentalIncome,
+    retirementIncome,
     snils,
     armyIdFlg,
   } = formData;
@@ -20,8 +26,14 @@ export const getThirdStepData = (formData: FormState): Partial<Participant> => {
     incomeCertificateCd: confirmationIncome,
     otherDependents: dependents,
     participantIncomes: getParticipantIncomes({
-      mandatoryIncome,
+      wages,
+      mandatoryPayments,
+      incomeAverage,
+      additionalIncome,
+      otherIncome,
       otherPayments,
+      rentalIncome,
+      retirementIncome,
     }),
     snils: snils?.replaceAll(' ', ''),
     armyIdFlg,

package/mobile/src/components/CreditForm/utils.ts

@@ -13,8 +13,14 @@ export const fieldsNamesToAddressKeysMap = {
 };
 
 export const fieldsNamesToIncomeKeysMap = {
-  mandatoryIncome: 'INCOME_AVERAGE',
-  otherPayments: 'MANDATORY_PAYMENTS',
+  incomeAverage: 'INCOME_AVERAGE',
+  mandatoryPayments: 'MANDATORY_PAYMENTS',
+  additionalIncome: 'ADDITIONAL_INCOME',
+  otherIncome: 'OTHER_INCOME',
+  otherPayments: 'OTHER_PAYMENTS',
+  rentalIncome: 'RENTAL_INCOME',
+  wages: 'WAGES',
+  retirementIncome: 'RETIREMENT_INCOME',
 };
 
 export const getParticipantContacts = (fields: Record<string, string | undefined>): any[] =>
@@ -66,7 +72,7 @@ export const getParticipantIncomes = (fields: Record<string, number | undefined>
           incomeTypeCd: {
             key: fieldsNamesToIncomeKeysMap[key],
           },
-          value,
+          value: Number(value || 0),
         },
       ];
     }

package/mobile/src/ui-kit/FormField/Fields/{OtherPayments.tsx → MandatoryPaymentsField.tsx}

@@ -4,12 +4,12 @@ import type { CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const OtherPaymentsField = JSX<CustomFieldProps>(({ field, input }) => (
+export const MandatoryPaymentsField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Обязательные выплаты"
     placeholder="Введите значение"
     type="number"
-    {...getValidation(field('otherPayments'), validatorObj.otherPayments, input?.required)}
+    {...getValidation(field('mandatoryPayments'), validatorObj.mandatoryPayments, input?.required)}
     {...input}
   />
 ));

package/mobile/src/ui-kit/FormField/Fields/RetirementIncomeField.tsx

@@ -1,15 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { InputControl } from '../../Input/InputControl';
 import type { CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const RetirementIncomeField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
-    label="Пенсионные доходы"
-    placeholder="Введите значение"
-    type="number"
-    {...getValidation(field('retirementIncome'), validatorObj.retirementIncome, input?.required)}
-    {...input}
-  />
-));
+export const RetirementIncomeField = JSX<CustomFieldProps>(({ field, input }) => {
+  const currentWages = field('wages')?.value;
+
+  const onChange = useCallback(
+    (_: string) => {
+      const incomesSum = Number(_) + Number(currentWages || 0);
+
+      field('retirementIncome')?.onChange?.(_);
+      field('incomeAverage')?.onChange?.(String(incomesSum));
+    },
+    [currentWages],
+  );
+
+  return (
+    <InputControl
+      label="Пенсионные доходы"
+      placeholder="Введите значение"
+      type="number"
+      {...getValidation(field('retirementIncome'), validatorObj.retirementIncome, input?.required)}
+      {...input}
+      onChange={onChange}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/WagesField.tsx

@@ -0,0 +1,31 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { InputControl } from '../../Input/InputControl';
+import type { CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+export const WagesField = JSX<CustomFieldProps>(({ field, input }) => {
+  const currentRetirementIncome = field('retirementIncome')?.value;
+
+  const onChange = useCallback(
+    (_: string) => {
+      const incomesSum = Number(_) + Number(currentRetirementIncome || 0);
+
+      field('wages')?.onChange?.(_);
+      field('incomeAverage')?.onChange?.(String(incomesSum));
+    },
+    [currentRetirementIncome],
+  );
+
+  return (
+    <InputControl
+      label="Совокупный доход в месяц после вычета налогов (зарплата, премии)"
+      placeholder="Введите значение"
+      type="number"
+      {...getValidation(field('wages'), validatorObj.wages, input?.required)}
+      {...input}
+      onChange={onChange}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/NameFieldDef.ts

@@ -76,8 +76,12 @@ export type NameFieldDef =
   | 'participantDateRegistration'
   | 'retirementIncome'
   | 'otherIncome'
-  | 'mandatoryIncome'
+  | 'incomeAverage'
+  | 'mandatoryPayments'
+  | 'additionalIncome'
   | 'otherPayments'
+  | 'rentalIncome'
+  | 'wages'
   | 'creditInRshbCd'
   | 'disablePeopleFlg'
   | 'bankruptcyFlg'

package/mobile/src/ui-kit/FormField/getField.tsx

@@ -59,7 +59,7 @@ import { LastJobExperienceField } from './Fields/LastJobExperienceField';
 import { LegalEntityNameField } from './Fields/LegalEntityNameField';
 import { LegalFormField } from './Fields/LegalFormField';
 import { LocalitiesField } from './Fields/LocalitiesField';
-import { MandatoryIncomeField } from './Fields/MandatoryIncome';
+import { MandatoryPaymentsField } from './Fields/MandatoryPaymentsField';
 import { MethodObtainField } from './Fields/MethodObtainField';
 import { MiddleNameField } from './Fields/MiddleNameField';
 import { NameField } from './Fields/NameField';
@@ -67,7 +67,6 @@ import { OnlineCheckoutField } from './Fields/OnlineCheckoutField';
 import { OrganizationField } from './Fields/OrganizationField';
 import { OrganizationNameField } from './Fields/OrganizationNameField';
 import { OtherIncomeField } from './Fields/OtherIncomeField';
-import { OtherPaymentsField } from './Fields/OtherPayments';
 import { ParticipantDateRegistrationField } from './Fields/ParticipantDateRegistrationField';
 import { PartInBusinessField } from './Fields/PartInBusinessField';
 import { PartnerCommentsField } from './Fields/PartnerCommentsField';
@@ -91,6 +90,7 @@ import { TermField } from './Fields/TermField';
 import { TotalIncomeField } from './Fields/TotalIncomeField';
 import { UltraPremiumField } from './Fields/UltraPremiumField';
 import { VedField } from './Fields/VedField';
+import { WagesField } from './Fields/WagesField';
 import { isRenderField } from './isRenderField';
 
 const PRODUCT_REF = {
@@ -184,8 +184,8 @@ export const getField =
       participantDateRegistration: <ParticipantDateRegistrationField field={field} input={input} />,
       retirementIncome: <RetirementIncomeField field={field} input={input} />,
       otherIncome: <OtherIncomeField field={field} input={input} />,
-      mandatoryIncome: <MandatoryIncomeField field={field} input={input} />,
-      otherPayments: <OtherPaymentsField field={field} input={input} />,
+      wages: <WagesField field={field} input={input} />,
+      mandatoryPayments: <MandatoryPaymentsField field={field} input={input} />,
       disablePeopleFlg: <DisablePeopleFlgField field={field} input={input} />,
       bankruptcyFlg: <BankruptcyFlgField field={field} input={input} />,
       shareholderFlg: <ShareholderFlgField field={field} input={input} />,

package/mobile/src/ui-kit/FormField/getObjectValidator.tsx

@@ -88,8 +88,8 @@ export const validatorObj: Record<string, Validator> = {
   participantDateRegistration: defaultValidator('Укажите дату регистрации'),
   retirementIncome: defaultValidator(),
   otherIncome: defaultValidator(),
-  mandatoryIncome: defaultValidator(),
-  otherPayments: defaultValidator(),
+  wages: defaultValidator(),
+  mandatoryPayments: defaultValidator(),
   disablePeopleFlg: defaultValidator(),
   bankruptcyFlg: defaultValidator(),
   shareholderFlg: defaultValidator(),

package/package.json

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

package/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -123,8 +123,12 @@ export interface FormState extends FormConsents, FormStateDeliveryType {
   participantDateRegistration?: Date | string;
   retirementIncome?: number;
   otherIncome?: number;
-  mandatoryIncome?: number;
+  incomeAverage?: number;
+  mandatoryPayments?: number;
+  additionalIncome?: number;
   otherPayments?: number;
+  rentalIncome?: number;
+  wages?: number;
   creditInRshbCd?: Option;
   disablePeopleFlg?: boolean;
   bankruptcyFlg?: boolean;

package/src/components/ContentPage/useContentPageData.ts

@@ -3,7 +3,7 @@ import { type BlocksRegistry } from '../../model/BlocksRegistry';
 import { type BlockDef, type ContentPageDef } from '../../model/ContentPageDef';
 import baseData from './ContentPage.page.json';
 
-const BLOCK_TYPES_BLACK_LIST = ['Header', 'Footer', 'Placeholder'];
+const BLOCK_TYPES_BLACK_LIST = ['Header', 'Footer', 'Placeholder', 'CreditForm', 'CreditCardForm'];
 
 export function useContentPageData(blocksRegistry: BlocksRegistry): ContentPageDef {
   const [data, setData] = useState<ContentPageDef>(baseData as ContentPageDef);

package/src/components/CreditCardForm/CreditCardForm.fixture.tsx

@@ -3,6 +3,17 @@ import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
 import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { CreditCardForm } from './CreditCardForm';
 
+const MOCK_TOKEN = 'mock-key';
+const MOCK_TASK_ID = '111111';
+
+const refreshToken = globalThis.sessionStorage?.getItem('refreshToken');
+const accessToken = globalThis.sessionStorage?.getItem('accessToken');
+const taskId = globalThis.localStorage.getItem('taskId');
+
+!refreshToken && globalThis.sessionStorage?.setItem('refreshToken', MOCK_TOKEN);
+!accessToken && globalThis.sessionStorage?.setItem('accessToken', MOCK_TOKEN);
+!taskId && globalThis.localStorage.setItem('taskId', MOCK_TASK_ID);
+
 export default {
   default: (
     <div>

package/src/components/CreditCardForm/CreditCardForm.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { updateRefreshToken } from '../../api/RetailAPI/updateRefreshToken';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
@@ -24,6 +25,8 @@ const WIZARD_TITLES = [
 export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...rest }) => {
   const [step, setStep] = useState(0);
 
+  useEffect(updateRefreshToken, []);
+
   const handleNextStep = useCallback(() => {
     setStep((_) => Math.min(_ + 1, WIZARD_STEPS));
   }, []);

package/src/components/CreditCardForm/creditCardFormStepsData.tsx

@@ -205,11 +205,11 @@ export const stepsSectionsMap: CreditCardSectionsProps[][] = [
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'mandatoryIncome', required: true }],
+      inputs: [{ fieldType: 'common', name: 'wages', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'otherPayments', required: true }],
+      inputs: [{ fieldType: 'common', name: 'mandatoryPayments', required: true }],
     },
     {
       columns: 1,

package/src/components/CreditCardForm/formStateMap.tsx

@@ -63,8 +63,8 @@ export const formStateMap: Partial<FormState>[] = [
     dependents: undefined,
     familyMembers: undefined,
     confirmationIncome: { key: '', text: '' },
-    mandatoryIncome: undefined,
-    otherPayments: undefined,
+    wages: undefined,
+    mandatoryPayments: undefined,
     snils: '',
     armyIdFlg: false,
   },

package/src/components/CreditCardForm/getFourthStepData.ts

@@ -7,8 +7,14 @@ export const getFourthStepData = (formData: FormState): Partial<Participant> =>
     familyStatus,
     dependents,
     familyMembers,
-    mandatoryIncome,
+    wages,
+    mandatoryPayments,
+    incomeAverage,
+    additionalIncome,
+    otherIncome,
     otherPayments,
+    rentalIncome,
+    retirementIncome,
     snils,
     armyIdFlg,
   } = formData;
@@ -18,8 +24,14 @@ export const getFourthStepData = (formData: FormState): Partial<Participant> =>
     totalDependents: familyMembers,
     otherDependents: dependents,
     participantIncomes: getParticipantIncomes({
-      mandatoryIncome,
+      wages,
+      mandatoryPayments,
+      incomeAverage,
+      additionalIncome,
+      otherIncome,
       otherPayments,
+      rentalIncome,
+      retirementIncome,
     }),
     snils: snils?.replaceAll(' ', ''),
     armyIdFlg,

package/src/components/CreditForm/creditFormStepsData.tsx

@@ -198,11 +198,11 @@ export const stepsSectionsMap: SectionsProps[][] = [
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'mandatoryIncome', required: true }],
+      inputs: [{ fieldType: 'common', name: 'wages', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'otherPayments', required: true }],
+      inputs: [{ fieldType: 'common', name: 'mandatoryPayments', required: true }],
     },
     {
       columns: 1,

package/src/components/CreditForm/formStateMap.tsx

@@ -61,8 +61,8 @@ export const formStateMap: Partial<FormState>[] = [
     dependents: undefined,
     familyMembers: undefined,
     confirmationIncome: { key: '', text: '' },
-    mandatoryIncome: undefined,
-    otherPayments: undefined,
+    wages: undefined,
+    mandatoryPayments: undefined,
     snils: '',
     armyIdFlg: false,
   },

package/src/components/CreditForm/getThirdStepData.ts

@@ -8,8 +8,14 @@ export const getThirdStepData = (formData: FormState): Partial<Participant> => {
     dependents,
     familyMembers,
     confirmationIncome,
-    mandatoryIncome,
+    wages,
+    mandatoryPayments,
+    incomeAverage,
+    additionalIncome,
+    otherIncome,
     otherPayments,
+    rentalIncome,
+    retirementIncome,
     snils,
     armyIdFlg,
   } = formData;
@@ -20,8 +26,14 @@ export const getThirdStepData = (formData: FormState): Partial<Participant> => {
     incomeCertificateCd: confirmationIncome,
     otherDependents: dependents,
     participantIncomes: getParticipantIncomes({
-      mandatoryIncome,
+      wages,
+      mandatoryPayments,
+      incomeAverage,
+      additionalIncome,
+      otherIncome,
       otherPayments,
+      rentalIncome,
+      retirementIncome,
     }),
     snils: snils?.replaceAll(' ', ''),
     armyIdFlg,

package/src/components/CreditForm/utils.ts

@@ -13,8 +13,14 @@ export const fieldsNamesToAddressKeysMap = {
 };
 
 export const fieldsNamesToIncomeKeysMap = {
-  mandatoryIncome: 'INCOME_AVERAGE',
-  otherPayments: 'MANDATORY_PAYMENTS',
+  incomeAverage: 'INCOME_AVERAGE',
+  mandatoryPayments: 'MANDATORY_PAYMENTS',
+  additionalIncome: 'ADDITIONAL_INCOME',
+  otherIncome: 'OTHER_INCOME',
+  otherPayments: 'OTHER_PAYMENTS',
+  rentalIncome: 'RENTAL_INCOME',
+  wages: 'WAGES',
+  retirementIncome: 'RETIREMENT_INCOME',
 };
 
 export const getParticipantContacts = (fields: Record<string, string | undefined>): any[] =>
@@ -66,7 +72,7 @@ export const getParticipantIncomes = (fields: Record<string, number | undefined>
           incomeTypeCd: {
             key: fieldsNamesToIncomeKeysMap[key],
           },
-          value,
+          value: Number(value || 0),
         },
       ];
     }

package/src/ui-kit/FormField/Fields/{OtherPayments.tsx → MandatoryPaymentsField.tsx}

@@ -4,12 +4,12 @@ import type { CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const OtherPaymentsField = JSX<CustomFieldProps>(({ field, input }) => (
+export const MandatoryPaymentsField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Обязательные выплаты"
     placeholder="Введите значение"
     type="number"
-    {...getValidation(field('otherPayments'), validatorObj.otherPayments, input?.required)}
+    {...getValidation(field('mandatoryPayments'), validatorObj.mandatoryPayments, input?.required)}
     {...input}
   />
 ));

package/src/ui-kit/FormField/Fields/RetirementIncomeField.tsx

@@ -1,15 +1,31 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { InputControl } from '../../Input/InputControl';
 import type { CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const RetirementIncomeField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
-    label="Пенсионные доходы"
-    placeholder="Введите значение"
-    type="number"
-    {...getValidation(field('retirementIncome'), validatorObj.retirementIncome, input?.required)}
-    {...input}
-  />
-));
+export const RetirementIncomeField = JSX<CustomFieldProps>(({ field, input }) => {
+  const currentWages = field('wages')?.value;
+
+  const onChange = useCallback(
+    (_: string) => {
+      const incomesSum = Number(_) + Number(currentWages || 0);
+
+      field('retirementIncome')?.onChange?.(_);
+      field('incomeAverage')?.onChange?.(String(incomesSum));
+    },
+    [currentWages],
+  );
+
+  return (
+    <InputControl
+      label="Пенсионные доходы"
+      placeholder="Введите значение"
+      type="number"
+      {...getValidation(field('retirementIncome'), validatorObj.retirementIncome, input?.required)}
+      {...input}
+      onChange={onChange}
+    />
+  );
+});

package/src/ui-kit/FormField/Fields/WagesField.tsx

@@ -0,0 +1,31 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { InputControl } from '../../Input/InputControl';
+import type { CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+export const WagesField = JSX<CustomFieldProps>(({ field, input }) => {
+  const currentRetirementIncome = field('retirementIncome')?.value;
+
+  const onChange = useCallback(
+    (_: string) => {
+      const incomesSum = Number(_) + Number(currentRetirementIncome || 0);
+
+      field('wages')?.onChange?.(_);
+      field('incomeAverage')?.onChange?.(String(incomesSum));
+    },
+    [currentRetirementIncome],
+  );
+
+  return (
+    <InputControl
+      label="Совокупный доход в месяц после вычета налогов (зарплата, премии)"
+      placeholder="Введите значение"
+      type="number"
+      {...getValidation(field('wages'), validatorObj.wages, input?.required)}
+      {...input}
+      onChange={onChange}
+    />
+  );
+});