@redneckz/wildless-cms-uni-blocks 0.14.738 → 0.14.740

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

@@ -13,4 +13,6 @@ export interface RenderInputsProps {
 const InputsMap = { ...InputsRetailMap, ...InputRetailCardMap };
 
 export const renderInputs = ({ field, inputs, params }: RenderInputsProps) =>
-  inputs.map(getField(field, params, InputsMap));
+  inputs.map(
+    getField<FieldRetailDef>(field, params, InputsMap),
+  );

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

@@ -63,10 +63,7 @@ export const useCreditCardFormAPI = ({
           resetForm(response);
         }
 
-        onNextStep();
-        if (isFinalStep) {
-          onFinish?.();
-        }
+        isFinalStep ? onFinish?.() : onNextStep();
       } catch (ex) {
         // Do nothing
       } finally {

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

@@ -7,6 +7,7 @@ import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { type CreditFormContent } from './CreditFormContent';
 import { CreditFormProgress } from './CreditFormProgress';
+import { CreditFormStatusTracker } from './CreditFormStatusTracker';
 import { CreditFormStep } from './CreditFormStep';
 import { stepsSectionsMap } from './creditFormStepsData';
 import { type ProgramsSourceProps } from './ProgramsSourceProps';
@@ -60,16 +61,19 @@ export const CreditForm = UniBlock<CreditFormProps>(({ className, programsSource
           <CreditFormProgress stepsTitles={STEP_TITLES} step={step} totalSteps={STEPS} />
         )}
         <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
-          <CreditFormStep
-            key={String(step)}
-            step={step}
-            sections={sections}
-            isFormFinished={isFormFinished}
-            programsSource={programsSource as ProgramsSourceProps}
-            onNextStep={handleNextStep}
-            onPrevStep={handlePrevStep}
-            onFinish={handleFinish}
-          />
+          {isFormFinished ? (
+            <CreditFormStatusTracker />
+          ) : (
+            <CreditFormStep
+              key={String(step)}
+              step={step}
+              sections={sections}
+              programsSource={programsSource as ProgramsSourceProps}
+              onNextStep={handleNextStep}
+              onPrevStep={handlePrevStep}
+              onFinish={handleFinish}
+            />
+          )}
         </div>
       </div>
     </BlockWrapper>

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

@@ -2,12 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
-import { type SectionsProps, type SectionsRetailProps } from '../../model/InputSectionsType';
+import { type SectionsRetailProps } from '../../model/InputSectionsType';
 import type { LeadFormState } from '../../services/retail/model/LeadFormState';
-import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
 import { calculateInputs } from '../../services/retail/utils/calculateInputs';
 import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
-import { CreditFormStatusTracker } from './CreditFormStatusTracker';
 import { type ProgramsSourceProps } from './ProgramsSourceProps';
 import { renderStep } from './renderStep';
 import { StepsNavigationButtons } from './StepsNavigationButtons';
@@ -16,7 +14,6 @@ import { useCreditFormAPI } from './useCreditFormAPI';
 export interface CreditFormStepProps {
   step: number;
   sections: SectionsRetailProps[];
-  isFormFinished?: boolean;
   programsSource?: ProgramsSourceProps;
   onNextStep: () => void;
   onPrevStep: () => void;
@@ -24,12 +21,12 @@ export interface CreditFormStepProps {
 }
 
 export const CreditFormStep = JSX<CreditFormStepProps>(
-  ({ step, sections, isFormFinished, programsSource, onPrevStep, onNextStep, onFinish }) => {
+  ({ step, sections, programsSource, onPrevStep, onNextStep, onFinish }) => {
     const { programId } = useRetailFormStore();
     const calcData = programsSource?.[programId ?? '']; // Need normalizator useForm, to be save defaultParams
 
     const inputs = useMemo(
-      () => (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldRetailDef[],
+      () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs ?? []),
       [sections],
     );
 
@@ -51,9 +48,7 @@ export const CreditFormStep = JSX<CreditFormStepProps>(
       onSubmit,
     });
 
-    return isFormFinished ? (
-      <CreditFormStatusTracker />
-    ) : (
+    return (
       <form onSubmit={handleSubmit} className="space-y-m">
         {renderStep({ sections, field, step, params: { calcData } })}
         <StepsNavigationButtons step={step} isSending={isSending} onPrevStep={onPrevStep} />

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

@@ -11,4 +11,4 @@ export interface RenderInputsProps {
 }
 
 export const renderInputs = ({ field, inputs, params }: RenderInputsProps) =>
-  inputs.map(getField(field, params, { ...InputsRetailMap }));
+  inputs.map(getField<FieldRetailDef>(field, params, { ...InputsRetailMap }));

package/mobile/src/services/retail/model/LeadFormState.ts

@@ -148,6 +148,6 @@ export interface LeadFormState extends FormRetailConsents, FormStateDeliveryType
   loanAmount?: number;
   creditPeriod?: number;
   paymentTypeCd?: PaymentType;
+  // TODO: Only fields with value should be in state. Currently, for compatibility, all fields from NameFieldDef are listed here
+  infoCard?: string;
 }
-
-export { type NameFieldDef } from '../../../ui-kit/FormField/NameFieldDef';

package/mobile/src/services/retail/model/NameFieldDef.ts

@@ -0,0 +1,89 @@
+type NameFieldApplicationBaseDef =
+  | 'surname'
+  | 'name'
+  | 'middleName'
+  | 'limitedBirthday'
+  | 'email'
+  | 'phone'
+  | 'inn';
+
+type NameFieldConsentDef =
+  | 'processPersonalDataFlg'
+  | 'consentProviderFlg'
+  | 'consentInformFlg'
+  | 'consentPfrFlg'
+  | 'consentOthersFlg';
+
+type NameFieldCreditCardDef =
+  | 'addressCourier'
+  | 'paymentSystem'
+  | 'currency'
+  | 'cardCategory'
+  | 'codeWord'
+  | 'confirmationIncome'
+  | 'methodObtain'
+  | 'deliveryDate';
+
+type NameFieldRetailDef =
+  | 'organization'
+  | 'organizationAddress'
+  | 'organizationPhone'
+  | 'organizationName'
+  | 'legalForm'
+  | 'generalSeniority'
+  | 'lastJobExperience'
+  | 'experience5Years'
+  | 'jobsNumber'
+  | 'beginDate'
+  | 'addressFact'
+  | 'addressRegistration'
+  | 'addressRetail'
+  | 'addressMatch'
+  | 'sex'
+  | 'birthPlace'
+  | 'education'
+  | 'housing'
+  | 'amountWorkers'
+  | 'employment'
+  | 'employerActivities'
+  | 'employerOrganization'
+  | 'positionOrganization'
+  | 'familyStatus'
+  | 'familyMembers'
+  | 'children'
+  | 'dependents'
+  | 'totalIncome'
+  | 'expenses'
+  | 'snils'
+  | 'conscription'
+  | 'armyIdFlg'
+  | 'dulSerie'
+  | 'dulNumber'
+  | 'dulIssueDateField'
+  | 'dulSubdivisionCode'
+  | 'dulIssuedBy'
+  | 'participantDateRegistration'
+  | 'retirementIncome'
+  | 'rentalIncome'
+  | 'otherIncome'
+  | 'otherPayments'
+  | 'additionalIncome'
+  | 'wages'
+  | 'mandatoryPayments'
+  | 'disablePeopleFlg'
+  | 'bankruptcyFlg'
+  | 'shareholderFlg'
+  | 'legalEntityName'
+  | 'creditInRshbCd'
+  | 'bankEmployeeCode'
+  | 'partInBusiness'
+  | 'regionRetail'
+  | 'calculator'
+  | 'infoCard'
+  | 'comment';
+
+export type NameFieldDef =
+  | NameFieldApplicationBaseDef
+  | NameFieldConsentDef
+  | NameFieldRetailDef
+  | NameFieldCreditCardDef;

package/mobile/src/services/retail/model/RetailFormContent.ts

@@ -1,5 +1,5 @@
 import { type LabelProps, type LinkButtonVersion, type TextProps } from '../external/types';
-import { type NameFieldDef } from './LeadFormState';
+import { type NameFieldDef } from './NameFieldDef';
 
 interface Required {
   /** @title Обязательно для заполнения */

package/mobile/src/services/retail/utils/calculateInputs.ts

@@ -1,4 +1,3 @@
-import { type FieldDef } from '../../../components/ApplicationForm/ApplicationFormContent';
 import { type Option } from '../../../ui-kit/Select/Option';
 import { type LeadFormState } from '../model/LeadFormState';
 import { type FieldRetailDef } from '../model/RetailFormContent';
@@ -28,24 +27,24 @@ export const calculateInputs = (getValue: GetValue) => (inputs: FieldRetailDef[]
 const checkIsRetiree = (step: number, getValue: GetValue) =>
   step === 2 && getValue('employment')?.key === 'RETIREE';
 
-const checkBusinessOwner = ({ name }: FieldDef, getValue: GetValue) =>
+const checkBusinessOwner = ({ name }: FieldRetailDef, getValue: GetValue) =>
   name === 'partInBusiness' && getValue('positionOrganization')?.key !== 'BUSINESS_OWNER';
 
-const checkAddressFillFromESIA = ({ name, filledByEsia }: FieldDef, getValue: GetValue) =>
+const checkAddressFillFromESIA = ({ name, filledByEsia }: FieldRetailDef, getValue: GetValue) =>
   name?.startsWith('address') && getValue('esiaAccountTypeCd')?.key && filledByEsia;
 
-const checkAddressFact = ({ name }: FieldDef, getValue: GetValue) =>
+const checkAddressFact = ({ name }: FieldRetailDef, getValue: GetValue) =>
   name === 'addressFact' && getValue('addressMatch');
 
-export const checkCondition = ({ condition }: FieldDef, getValue: GetValue) =>
+export const checkCondition = ({ condition }: FieldRetailDef, getValue: GetValue) =>
   condition?.name &&
   condition?.values?.some((_) => {
-    const dataValue = getValue(condition?.name as keyof LeadFormState);
+    const dataValue = getValue(condition?.name);
 
     return _ !== ((dataValue as Option)?.key ?? dataValue);
   });
 
-const checkConsentPfrFlg = ({ name }: FieldDef, getValue: GetValue) =>
+const checkConsentPfrFlg = ({ name }: FieldRetailDef, getValue: GetValue) =>
   name === 'snils' && isSnilsRequired(getValue);
 
 const isSnilsRequired = (getValue: GetValue) =>

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

@@ -0,0 +1,8 @@
+export interface BaseFieldDef {
+  name?: string;
+  required?: boolean;
+  condition?: {
+    name: string;
+    values: string[];
+  };
+}

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

@@ -1,79 +1,3 @@
-type NameFieldConsentDef =
-  | 'processPersonalDataFlg'
-  | 'consentProviderFlg'
-  | 'consentInformFlg'
-  | 'consentPfrFlg'
-  | 'consentOthersFlg';
-
-type NameFieldCreditCardDef =
-  | 'addressCourier'
-  | 'paymentSystem'
-  | 'currency'
-  | 'cardCategory'
-  | 'codeWord'
-  | 'confirmationIncome'
-  | 'methodObtain'
-  | 'deliveryDate';
-
-type NameFieldRetailDef =
-  | 'organization'
-  | 'organizationAddress'
-  | 'organizationPhone'
-  | 'organizationName'
-  | 'legalForm'
-  | 'generalSeniority'
-  | 'lastJobExperience'
-  | 'experience5Years'
-  | 'jobsNumber'
-  | 'beginDate'
-  | 'addressFact'
-  | 'addressRegistration'
-  | 'addressRetail'
-  | 'addressMatch'
-  | 'sex'
-  | 'limitedBirthday'
-  | 'birthPlace'
-  | 'education'
-  | 'housing'
-  | 'amountWorkers'
-  | 'employment'
-  | 'employerActivities'
-  | 'employerOrganization'
-  | 'positionOrganization'
-  | 'familyStatus'
-  | 'familyMembers'
-  | 'children'
-  | 'dependents'
-  | 'totalIncome'
-  | 'expenses'
-  | 'snils'
-  | 'conscription'
-  | 'armyIdFlg'
-  | 'dulSerie'
-  | 'dulNumber'
-  | 'dulIssueDateField'
-  | 'dulSubdivisionCode'
-  | 'dulIssuedBy'
-  | 'participantDateRegistration'
-  | 'retirementIncome'
-  | 'rentalIncome'
-  | 'otherIncome'
-  | 'otherPayments'
-  | 'additionalIncome'
-  | 'wages'
-  | 'mandatoryPayments'
-  | 'incomeAverage'
-  | 'disablePeopleFlg'
-  | 'bankruptcyFlg'
-  | 'shareholderFlg'
-  | 'legalEntityName'
-  | 'creditInRshbCd'
-  | 'bankEmployeeCode'
-  | 'partInBusiness'
-  | 'regionRetail'
-  | 'calculator'
-  | 'infoCard';
-
 type NameFieldApplicationDef =
   | 'surname'
   | 'name'
@@ -110,8 +34,4 @@ type NameFieldApplicationDef =
   | 'consentToReceiveMaterials'
   | 'consentDataProcessing';
 
-export type NameFieldDef =
-  | NameFieldApplicationDef
-  | NameFieldRetailDef
-  | NameFieldCreditCardDef
-  | NameFieldConsentDef;
+export type NameFieldDef = NameFieldApplicationDef;

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

@@ -1,9 +1,8 @@
-//TODO: Убрать обращение к компонентам т.к. ApplicationForm
-import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
 import { type FormTypeFieldDef } from '../../model/FormTypeFieldDef';
 import { type VNode } from '../../model/VNode';
 import { InputControl } from '../Input/InputControl';
+import { type BaseFieldDef } from './BaseFieldDef';
 import { type CustomFieldProps } from './CustomFieldProps';
 import { AcquiringField } from './Fields/AcquiringField';
 import { AddressBranchField } from './Fields/AddressBranchField';
@@ -37,7 +36,7 @@ import { TermField } from './Fields/TermField';
 import { UltraPremiumField } from './Fields/UltraPremiumField';
 import { VedField } from './Fields/VedField';
 import { getPremium } from './getPremium';
-import { isRenderField } from './isRenderField';
+import { shouldRenderField } from './shouldRenderField';
 
 const PRODUCT_REF = {
   $ref: '/wcms-resources/outservice-productlist.json',
@@ -86,18 +85,20 @@ const InputsMap = {
 };
 
 export const getField =
-  (
+  <F extends BaseFieldDef>(
     field: FormFieldRegisterer<any>,
     params?: Record<string, any>,
     externalInputs: Record<string, VNode> = {},
   ) =>
-  (input: FieldDef, i: number) => {
-    const resultInputsMap = {
+  (input: F, i: number) => {
+    const fieldsRegister = {
       ...InputsMap,
       ...externalInputs,
     };
 
-    return isRenderField({ input, field }) ? (
-      <div key={String(i)}>{resultInputsMap[input?.name || '']?.({ field, input, params })}</div>
-    ) : null;
+    return (
+      shouldRenderField({ input, field }) && (
+        <div key={i}>{fieldsRegister[String(input.name)]?.({ field, input, params })}</div>
+      )
+    );
   };

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

@@ -1,6 +1,6 @@
-import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
 import { type FieldValidatorsMap } from '../../hooks/useForm/FormOptions';
 import { type Validator } from '../../validation/validator';
+import { type BaseFieldDef } from './BaseFieldDef';
 import {
   addressDaDataValidator,
   addressOrganizationValidator,
@@ -124,8 +124,8 @@ export const validatorObj: Record<string, Validator> = {
   ...validatorCreditCardObj,
 };
 
-export const getFormValidator = <FormState extends Record<string, any>>(
-  fieldDefs: FieldDef[],
+export const getFormValidator = <FormState extends Record<string, any>, F extends BaseFieldDef>(
+  fieldDefs: F[],
 ): ((_: FormState) => FieldValidatorsMap<FormState>) => {
   const requiredFields = fieldDefs.filter((_) => Boolean(_?.required && _?.name));
 
@@ -145,11 +145,11 @@ export const getFormValidator = <FormState extends Record<string, any>>(
       : requiredFieldValidatorsMap;
 };
 
-const byNonEmptyValidator = ({ name }: FieldDef): boolean => Boolean(validatorObj[name ?? '']);
+const byNonEmptyValidator = ({ name }: BaseFieldDef): boolean => Boolean(validatorObj[name ?? '']);
 
 const byCondition =
   <FormState extends Record<string, any>>(formState: FormState) =>
-  (fieldDef: FieldDef) =>
+  (fieldDef: BaseFieldDef) =>
     !fieldDef?.condition ||
     fieldDef.condition.values.find((_) => {
       const dependencyValue = formState?.[fieldDef?.condition?.name ?? ''];

package/mobile/src/ui-kit/FormField/{isRenderField.tsx → shouldRenderField.tsx}

@@ -1,11 +1,11 @@
-import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
 import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { type BaseFieldDef } from './BaseFieldDef';
 
-export function isRenderField({
+export function shouldRenderField<F extends BaseFieldDef>({
   input,
   field,
 }: {
-  input: FieldDef;
+  input: F;
   field: FormFieldRegisterer<any>;
 }) {
   const { condition } = input;

package/package.json

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

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -86,7 +86,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>(
               className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
             >
               {renderTitle(_.title)}
-              {(_?.inputs || [])?.map(getField(field, { typeForm }))}
+              {(_?.inputs || [])?.map(getField<FieldDef>(field, { typeForm }))}
             </div>
           ))}
           {renderAgreementSubmit(

package/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -56,7 +56,7 @@ export const GroupedConsents = JSX<GroupedConsentsProps>(({ inputs = [], field,
           <FoldableSection isUnfolded={isUnfolded} className="flex flex-col pl-2xl">
             {
               // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-              inputs.map(getField(field, {}, InputsConsentsMap))
+              inputs.map(getField<FieldRetailDef>(field, {}, { ...InputsConsentsMap }))
             }
           </FoldableSection>
         )}

package/src/components/ApplicationLeadForm/renderInputs.tsx

@@ -10,7 +10,7 @@ export const renderInputs = ({ field, inputs }: GroupedConsentsProps) => {
 
   return consentInputs.length > 2 ? (
     <div>
-      {restInputs.map(getField(field, {}, { ...InputsApplicationLeadMap }))}
+      {restInputs.map(getField<FieldRetailDef>(field, {}, { ...InputsApplicationLeadMap }))}
       <GroupedConsents inputs={consentInputs} field={field} />
     </div>
   ) : (
@@ -18,7 +18,9 @@ export const renderInputs = ({ field, inputs }: GroupedConsentsProps) => {
   );
 };
 
-const splitInputs = (inputs?: FieldRetailDef[]) => ({
-  consentInputs: inputs?.filter((_) => Object.keys(CONSENTS).includes(_.name || '')) || [],
-  restInputs: inputs?.filter((_) => !Object.keys(CONSENTS).includes(_.name || '')) || [],
+const splitInputs = (
+  inputs: FieldRetailDef[] = [],
+): { consentInputs: FieldRetailDef[]; restInputs: FieldRetailDef[] } => ({
+  consentInputs: inputs.filter(({ name }) => Object.keys(CONSENTS).includes(String(name))),
+  restInputs: inputs.filter(({ name }) => !Object.keys(CONSENTS).includes(String(name))),
 });

package/src/components/CreditCardForm/CreditCardForm.tsx

@@ -6,6 +6,7 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { type CreditCardFormContent } from './CreditCardFormContent';
 import { CreditCardFormProgress } from './CreditCardFormProgress';
+import { CreditCardFormStatusTracker } from './CreditCardFormStatusTracker';
 import { CreditCardFormStep } from './CreditCardFormStep';
 import { stepsSectionsMap } from './creditCardFormStepsData';
 
@@ -55,15 +56,18 @@ export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...re
           <CreditCardFormProgress stepsTitles={TITLES} step={step} totalSteps={STEPS} />
         )}
         <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
-          <CreditCardFormStep
-            key={String(step)}
-            step={step}
-            sections={sections}
-            isFormFinished={isFormFinished}
-            onNextStep={handleNextStep}
-            onPrevStep={handlePrevStep}
-            onFinish={handleFinish}
-          />
+          {isFormFinished ? (
+            <CreditCardFormStatusTracker />
+          ) : (
+            <CreditCardFormStep
+              key={String(step)}
+              step={step}
+              sections={sections}
+              onNextStep={handleNextStep}
+              onPrevStep={handlePrevStep}
+              onFinish={handleFinish}
+            />
+          )}
         </div>
       </div>
     </BlockWrapper>

package/src/components/CreditCardForm/CreditCardFormStep.tsx

@@ -3,11 +3,8 @@ import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
 import { type SectionsRetailProps } from '../../model/InputSectionsType';
 import { type LeadFormState } from '../../services/retail/model/LeadFormState';
-import { type FieldRetailDef } from '../../services/retail/model/RetailFormContent';
 import { calculateInputs } from '../../services/retail/utils/calculateInputs';
 import { getFormValidator } from '../../ui-kit/FormField/getObjectValidator';
-import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
-import { CreditCardFormStatusTracker } from './CreditCardFormStatusTracker';
 import { renderStep } from './renderStep';
 import { StepsNavigationButtons } from './StepsNavigationButtons';
 import { useCreditCardFormAPI } from './useCreditCardFormAPI';
@@ -15,16 +12,15 @@ import { useCreditCardFormAPI } from './useCreditCardFormAPI';
 export interface CreditCardFormStepProps {
   step: number;
   sections: SectionsRetailProps[];
-  isFormFinished: boolean;
   onNextStep: () => void;
   onPrevStep: () => void;
   onFinish?: () => void;
 }
 
 export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
-  ({ step, sections, isFormFinished, onPrevStep, onNextStep, onFinish }) => {
+  ({ step, sections, onPrevStep, onNextStep, onFinish }) => {
     const inputs = useMemo(
-      () => (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldRetailDef[],
+      () => sections?.flatMap((_: SectionsRetailProps) => _?.inputs || []),
       [sections],
     );
 
@@ -46,9 +42,7 @@ export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
       onSubmit,
     });
 
-    return isFormFinished ? (
-      <CreditCardFormStatusTracker />
-    ) : (
+    return (
       <form onSubmit={handleSubmit} className="space-y-m">
         {renderStep({ sections, field, step })}
         <StepsNavigationButtons isSending={isSending} step={step} onPrevStep={onPrevStep} />

package/src/components/CreditCardForm/renderInputs.tsx

@@ -13,4 +13,6 @@ export interface RenderInputsProps {
 const InputsMap = { ...InputsRetailMap, ...InputRetailCardMap };
 
 export const renderInputs = ({ field, inputs, params }: RenderInputsProps) =>
-  inputs.map(getField(field, params, InputsMap));
+  inputs.map(
+    getField<FieldRetailDef>(field, params, InputsMap),
+  );

package/src/components/CreditCardForm/useCreditCardFormAPI.tsx

@@ -63,10 +63,7 @@ export const useCreditCardFormAPI = ({
           resetForm(response);
         }
 
-        onNextStep();
-        if (isFinalStep) {
-          onFinish?.();
-        }
+        isFinalStep ? onFinish?.() : onNextStep();
       } catch (ex) {
         // Do nothing
       } finally {

package/src/components/CreditForm/CreditForm.tsx

@@ -7,6 +7,7 @@ import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { type CreditFormContent } from './CreditFormContent';
 import { CreditFormProgress } from './CreditFormProgress';
+import { CreditFormStatusTracker } from './CreditFormStatusTracker';
 import { CreditFormStep } from './CreditFormStep';
 import { stepsSectionsMap } from './creditFormStepsData';
 import { type ProgramsSourceProps } from './ProgramsSourceProps';
@@ -60,16 +61,19 @@ export const CreditForm = UniBlock<CreditFormProps>(({ className, programsSource
           <CreditFormProgress stepsTitles={STEP_TITLES} step={step} totalSteps={STEPS} />
         )}
         <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
-          <CreditFormStep
-            key={String(step)}
-            step={step}
-            sections={sections}
-            isFormFinished={isFormFinished}
-            programsSource={programsSource as ProgramsSourceProps}
-            onNextStep={handleNextStep}
-            onPrevStep={handlePrevStep}
-            onFinish={handleFinish}
-          />
+          {isFormFinished ? (
+            <CreditFormStatusTracker />
+          ) : (
+            <CreditFormStep
+              key={String(step)}
+              step={step}
+              sections={sections}
+              programsSource={programsSource as ProgramsSourceProps}
+              onNextStep={handleNextStep}
+              onPrevStep={handlePrevStep}
+              onFinish={handleFinish}
+            />
+          )}
         </div>
       </div>
     </BlockWrapper>