@redneckz/wildless-cms-uni-blocks 0.14.637 → 0.14.639

package/mobile/src/hooks/useForm.ts

@@ -22,7 +22,7 @@ export interface FormOperatorProps<FormState extends Record<string, any>> {
   field: FormFieldRegisterer<FormState>;
   update: (_: FormState) => void;
   reset: () => void;
-  onSubmit?: (ev: PreventableEvent) => void;
+  onSubmit?: (ev: PreventableEvent) => FormState;
 }
 
 // eslint-disable-next-line max-lines-per-function
@@ -98,6 +98,8 @@ export const useForm = <FormState extends Record<string, any>>(
       resetOnSubmit ? reset() : setDirtyForm(true);
 
       onSubmit && onSubmit(formState, ev);
+
+      return formState;
     },
     [onSubmit, formState],
   );

package/mobile/src/model/InputSectionsType.ts

@@ -0,0 +1,6 @@
+import { type SectionsProps } from '../components/ApplicationForm/ApplicationFormContent';
+
+export interface InputSectionsType {
+  /** @hidden */
+  sections?: SectionsProps[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.637",
+  "version": "0.14.639",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -210,7 +210,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "84 kB",
+      "limit": "86 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/RetailAPI/getTaskStatus.ts

@@ -0,0 +1,16 @@
+import { doRequest } from './doRequest';
+
+export enum STATUS_TYPE {
+  process = 'IN_PROCESS',
+  ok = 'OK',
+  fail = 'FAILED',
+  rework = 'REWORK',
+}
+
+interface GetTaskStatusResponse {
+  statusCd: STATUS_TYPE;
+  taskId: number;
+}
+
+export const getTaskStatus = (body: { taskId: number }) =>
+  doRequest<GetTaskStatusResponse>('/user-data/getTaskStatus', 'POST', body);

package/src/api/RetailAPI/sendSignalToProcess.ts

@@ -0,0 +1,19 @@
+import { doRequest } from './doRequest';
+
+export type SignalType =
+  | 'CREATE_APPLICATION_SHORT_SIGNAL'
+  | 'CREATE_APPLICATION_LOAN_V3_SIGNAL'
+  | 'KILL_DRAFT_PROCESS_SIGNAL';
+
+interface SendSignalToProcess {
+  signalType: SignalType;
+  taskId: number;
+}
+
+interface SendSignalToProcessResponse {
+  statusCd: string;
+  taskId: number;
+}
+
+export const sendSignalToProcess = (body: SendSignalToProcess) =>
+  doRequest<SendSignalToProcessResponse>('/public-data/sendSignalToProcess', 'POST', body);

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -3,6 +3,7 @@
 
 import { type AspectsProps } from '../../model/AspectsProps';
 import { type LabelProps, type TextProps, type TitleProps } from '../../model/HeadlineType';
+import { type InputSectionsType } from '../../model/InputSectionsType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type Target } from '../../model/LinkProps';
 import { type NameFieldDef } from '../../ui-kit/FormField/NameFieldDef';
@@ -140,7 +141,8 @@ type additionalParamsType = hideProductDef | showProductDef;
  */
 export type ApplicationFormContent = UniBlockContent &
   TitleProps &
-  AspectsProps & {
+  AspectsProps &
+  InputSectionsType & {
     /** @title Кнопка */
     button?: SubmitButtonProps;
     /**
@@ -154,8 +156,6 @@ export type ApplicationFormContent = UniBlockContent &
       target?: Target;
     };
     typeForm?: TypeFormFieldDef;
-    /** @hidden */
-    sections?: SectionsProps[];
     endpoint?: EndpointType;
     /** @title Дополнительные параметры формы */
     additionalParams?: additionalParamsType;

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

@@ -15,8 +15,6 @@ export default {
       <ApplicationLeadForm
         className="col-span-12"
         title="Заголовок"
-        typeForm="CORRUPTION"
-        endpoint="lead"
         sections={[
           {
             columns: 2,

package/src/components/ApplicationLeadForm/ApplicationLeadForm.fixture.tsx

@@ -16,8 +16,6 @@ export default {
       <ApplicationLeadForm
         className="col-span-12"
         title="Заголовок"
-        typeForm="CORRUPTION"
-        endpoint="lead"
         programId="10"
         sections={[
           {

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -24,7 +24,6 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     title,
     programId = '',
     nextStepLink = '/credit-lead',
-    typeForm = '',
     sections = [],
     button,
     ...rest
@@ -34,7 +33,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
 
     const { isLoading } = useInitApplicationLead(nextStepLink);
     const [leadForm, setLeadForm] = useLocalStorage<FormState>('leadForm');
-    const initialFormState = getInitialFormState(inputs, leadForm, typeForm);
+    const initialFormState = getInitialFormState(inputs, leadForm);
     const { handleSubmit, responseStatus } = useApplicationLeadApi({
       inputs,
       programId,
@@ -43,7 +42,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     });
 
     if (responseStatus) {
-      const responseTypeDialog = useResponseTypeDialog({ responseType: responseStatus, typeForm });
+      const responseTypeDialog = useResponseTypeDialog({ responseType: responseStatus });
       responseTypeDialog.open();
     }
 

package/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -1,7 +1,7 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { type LabelProps, type TextProps, type TitleProps } from '../../model/HeadlineType';
+import { type InputSectionsType } from '../../model/InputSectionsType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
-import { type Target } from '../../model/LinkProps';
 import { type NameFieldDef } from '../../ui-kit/FormField/NameFieldDef';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 import { type FormState } from './getInitialFormState';
@@ -113,27 +113,14 @@ export type SectionsProps = TitleProps & {
  * @title Форма заявки настраиваемая
  */
 export type ApplicationLeadFormContent = UniBlockContent &
-  TitleProps & {
+  TitleProps &
+  InputSectionsType & {
     /** @title Кнопка */
     button?: SubmitButtonProps;
-    /**
-     * @title Условия передачи данных
-     * @required ["text", "href"]
-     */
-    link?: TextProps & {
-      /** @title URL (href) */
-      href?: string;
-      /** @default "" */
-      target?: Target;
-    };
     /** @title Номер кредитной программы */
     programId?: string;
     /** @title адресс следующей страницы заявки */
     nextStepLink?: string;
-    typeForm?: TypeFormFieldDef;
-    /** @hidden */
-    sections?: SectionsProps[];
-    endpoint?: EndpointType;
   };
 
 /** @hidden */

package/src/components/CalculatorCredit/CalculatorCredit.tsx

@@ -18,6 +18,7 @@ import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInp
 import { setDefaultParamsCalc } from '../../ui-kit/Calculator/setDefaultParamsCalc';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { clamp } from '../../utils/clamp';
@@ -44,7 +45,9 @@ const MAP = {
 export interface CalculatorDepositProps extends CalculatorCreditContent, UniBlockProps {
   className?: string;
   calcSource?: CreditCalculatorData & JSONRefObject;
+  registerSubmit?: (submit: ((ev: PreventableEvent) => Record<string, any>) | undefined) => void;
 }
+
 export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
   ({
     className,
@@ -54,10 +57,12 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
     footnote,
     paramsViewSettings,
     defaultParams,
+    registerSubmit,
     ...rest
   }) => {
     const defaultParamsCals = getDefaultParamsMin(calcSource?.rateRows);
-    const [userInputParams, { field }] = useForm({
+
+    const [userInputParams, { field, onSubmit }] = useForm({
       moneyValue: getMoneyDefaultValue(defaultParams, CREDIT_DEFAULT_SUM),
       monthsValue: getMonthsDefaultValue(defaultParams, DEFAULT_MONTHS),
       isAnnuity: Boolean(defaultParams?.isAnnuity),
@@ -67,6 +72,8 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
       isStateEmployee: Boolean(defaultParams?.isEnableStateEmployee),
     });
 
+    registerSubmit?.(onSubmit);
+
     const calcParams = getCreditCalculatorParams(userInputParams, calcSource, paramsViewSettings);
     const paymentTypeElement = renderPaymentType({
       title: 'Тип платежа',

package/src/components/CreditForm/CreditForm.tsx

@@ -7,13 +7,17 @@ import {
   type FieldDef,
   type SectionsProps,
 } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { CalculatorCredit } from '../CalculatorCredit/CalculatorCredit';
 import { type CreditFormContent } from './CreditFormContent';
 import { CreditFormProgress } from './CreditFormProgress';
 import { CreditFormStep } from './CreditFormStep';
 import { stepsSectionsMap } from './creditFormStepsData';
 
-const STEPS_COUNT = 5;
-const STEPS_TITLES = [
+interface CreditFormWizardProps extends CreditFormContent, UniBlockProps {}
+
+const WIZARD_STEPS = 5;
+
+const WIZARD_TITLES = [
   'Персональные данные',
   'Данные о трудоустройстве',
   'Данные о доходах и расходах',
@@ -21,16 +25,11 @@ const STEPS_TITLES = [
   'Отделение Банка',
 ];
 
-interface CreditFormProps extends CreditFormContent, UniBlockProps {}
-
-export const CreditForm = JSX<CreditFormProps>(({ className, ...rest }) => {
+export const CreditForm = JSX<CreditFormWizardProps>(({ className, ...rest }) => {
   const [step, setStep] = useState(0);
-  const sections = useMemo(() => stepsSectionsMap[step], [step]);
-
-  const inputs = (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldDef[];
 
   const handleNextStep = useCallback(() => {
-    setStep((_) => Math.min(_ + 1, STEPS_COUNT - 1));
+    setStep((_) => Math.min(_ + 1, WIZARD_STEPS));
   }, []);
 
   const handlePrevStep = useCallback(() => {
@@ -38,18 +37,46 @@ export const CreditForm = JSX<CreditFormProps>(({ className, ...rest }) => {
     setStep((_) => Math.max(_ - 1, 0));
   }, []);
 
+  const sections = useMemo(() => stepsSectionsMap[step], [step]);
+
+  const inputs = (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldDef[];
+
+  const isStartStep = step === 0;
+  const [isFormFinished, setIsFormFinished] = useState(false);
+
   return (
     <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-6xl" {...rest}>
       <div className="container grid grid-cols-12">
-        <CreditFormProgress stepsTitles={STEPS_TITLES} step={step} totalSteps={STEPS_COUNT} />
+        {isStartStep || isFormFinished ? null : (
+          <CreditFormProgress stepsTitles={WIZARD_TITLES} step={step} totalSteps={WIZARD_STEPS} />
+        )}
         <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
           <CreditFormStep
-            inputs={inputs}
             key={String(step)}
             step={step}
+            inputs={inputs}
             sections={sections}
             onNextStep={handleNextStep}
             onPrevStep={handlePrevStep}
+            isFormFinished={isFormFinished}
+            finishForm={setIsFormFinished}
+            renderStep={
+              isStartStep
+                ? ({ registerSubmit }) => (
+                    <CalculatorCredit
+                      {...{
+                        title: 'Калькулятор кредита',
+                        footnote:
+                          'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
+                        calcSource: {
+                          $ref: '/wcms-resources/credit-calculator-data.json',
+                        },
+                      }}
+                      registerSubmit={registerSubmit}
+                    />
+                  )
+                : undefined
+            }
           />
         </div>
       </div>

package/src/components/CreditForm/CreditFormContent.ts

@@ -1,46 +1,22 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
-import { type TextProps, type TitleProps } from '../../model/HeadlineType';
-import { type Target } from '../../model/LinkProps';
+import { type TitleProps } from '../../model/HeadlineType';
+import { type InputSectionsType } from '../../model/InputSectionsType';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
-import {
-  type EndpointType,
-  type SectionsProps,
-  type SubmitButtonProps,
-} from '../ApplicationForm/ApplicationFormContent';
-import {
-  type FieldDef,
-  type TypeFormFieldDef,
-} from '../ApplicationLeadForm/ApplicationLeadFormContent';
-import { type FormStateMap } from './getInitialFormState';
+import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { type FormStateMap } from './formStateMap';
 
 /**
  * @title Форма заявки на потребительский кредит настраиваемая
  */
 export type CreditFormContent = UniBlockContent &
-  TitleProps & {
-    /** @title Кнопка */
-    button?: SubmitButtonProps;
-    /**
-     * @title Условия передачи данных
-     * @required ["text", "href"]
-     */
-    link?: TextProps & {
-      /** @title URL (href) */
-      href?: string;
-      /** @default "" */
-      target?: Target;
-    };
+  TitleProps &
+  InputSectionsType & {
     /** @title Номер кредитной программы */
     programId?: string;
-    typeForm?: TypeFormFieldDef;
-    /** @hidden */
-    sections?: SectionsProps[];
-    endpoint?: EndpointType;
   };
 
 /** @hidden */
 export interface RenderInputsProps {
   inputs?: FieldDef[];
-  typeForm?: TypeFormFieldDef | string;
   field: FormFieldRegisterer<FormStateMap[keyof FormStateMap]>;
 }

package/src/components/CreditForm/CreditFormProgress.tsx

@@ -4,19 +4,19 @@ import { ProgressBar } from '../../ui-kit/ProgressBar/ProgressBar';
 
 export interface CreditFormProgressProps {
   step: number;
-  totalSteps: number;
+  totalSteps?: number;
   stepsTitles?: string[];
 }
 
 export const CreditFormProgress = JSX<CreditFormProgressProps>(
-  ({ step = 0, totalSteps = 5, stepsTitles = [] }) => {
-    const progress = useMemo(() => ((step + 1) / totalSteps) * 100, [step, totalSteps]);
+  ({ step = 1, totalSteps = 5, stepsTitles = [] }) => {
+    const progress = useMemo(() => (step / totalSteps) * 100, [step, totalSteps]);
 
     return (
       <div className="py-lg px-5xl bg-white col-span-12">
         <div>
-          <span className="font-bold">
-            Шаг {step + 1} из {totalSteps}.
+          <span className="font-bold mr-s">
+            Шаг {step} из {totalSteps}.
           </span>
           {stepsTitles[step] || null}
           <ProgressBar step={progress} showPercentage={false} />

package/src/components/CreditForm/CreditFormStatus.tsx

@@ -0,0 +1,119 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMobileMode } from '../../hooks/useMobileMode';
+import { type DescriptionProps, type LabelProps } from '../../model/HeadlineType';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { InfoCard, type InfoCardProps } from '../../ui-kit/InfoCard/InfoCard';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Text } from '../../ui-kit/Text/Text';
+import { TimerCircle } from '../../ui-kit/TimerCircle/TimerCircle';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+
+type CreditFormStatusProps = UniBlockProps & {
+  title?: string;
+  description?: string;
+  interval?: number;
+  sectionInfoTitle?: string;
+  sectionInfo?: (LabelProps & DescriptionProps)[];
+  sectionAdditionalTitle?: string;
+  sectionInfoAdditional?: (LabelProps & DescriptionProps)[];
+  buttonText?: string;
+  infoCard?: InfoCardProps;
+};
+
+export const CreditFormStatus = JSX<CreditFormStatusProps>(
+  ({
+    title,
+    description: dsc,
+    infoCard,
+    sectionInfoTitle,
+    sectionInfo,
+    sectionAdditionalTitle,
+    sectionInfoAdditional,
+    buttonText,
+    interval,
+    ...props
+  }) => (
+    <BlockWrapper {...props}>
+      <div className="flex flex-col md:flex-row items-center">
+        <Headline
+          headlineVersion="M"
+          title={title}
+          description={dsc}
+          align="text-left"
+          padding="p-xl"
+          className="w-full"
+        />
+        {interval ? <TimerCircle interval={interval} /> : null}
+      </div>
+      <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
+      <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />
+      {infoCard?.__html ? (
+        <InfoCard
+          __html={infoCard?.__html}
+          icon={infoCard?.icon}
+          link={{
+            text: infoCard?.link?.text,
+          }}
+        />
+      ) : null}
+      {buttonText ? (
+        <LinkButton href="/natural" text={buttonText} version="primary" className="w-full mt-lg" />
+      ) : null}
+    </BlockWrapper>
+  ),
+);
+
+const SectionInfo = ({
+  title,
+  items,
+  countColumns = false,
+}: {
+  title?: string;
+  items?: (LabelProps & DescriptionProps)[];
+  countColumns?: boolean;
+}) => {
+  const isMobile = useMobileMode();
+
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <div>
+      <hr className="w-full h-px bg-main-gray border-0" />
+      <div className="p-xl">
+        {title ? (
+          <Text color="text-primary-text" size="text-h5">
+            <div className={style({ 'mb-m': Boolean(title) })}>{title}</div>
+          </Text>
+        ) : null}
+        {items ? (
+          <div
+            className={style(
+              'grid grid-cols-1 gap-m',
+              inputColumnStyles(countColumns || isMobile ? 1 : 2),
+            )}
+          >
+            {items.map((item, index) => (
+              <div key={index}>{renderItem(item)}</div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const renderItem = ({ label, description }: LabelProps & DescriptionProps) => (
+  <div className="flex flex-col">
+    <Text color="text-secondary-text" size="text-l">
+      {label}
+    </Text>
+    <Text color="text-primary-text" size="text-xl">
+      {description}
+    </Text>
+  </div>
+);

package/src/components/CreditForm/CreditFormStatusTracker.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getTaskStatus, STATUS_TYPE } from '../../api/RetailAPI/getTaskStatus';
+import { sendSignalToProcess, type SignalType } from '../../api/RetailAPI/sendSignalToProcess';
+import { FailedStatusContent } from './FailedStatusContent';
+import { PendingStatusContent } from './PendingStatusContent';
+import { ReworkStatusContent } from './ReworkStatusContent';
+import { SuccessStatusContent } from './SuccessStatusContent';
+
+const TASK_ID = 2816419;
+const SIGNAL_TYPES: SignalType[] = [
+  'CREATE_APPLICATION_SHORT_SIGNAL',
+  'CREATE_APPLICATION_LOAN_V3_SIGNAL',
+];
+
+export const CreditFormStatusTracker = JSX(() => {
+  const [status, setStatus] = useState(STATUS_TYPE.process);
+
+  useEffect(() => {
+    for (const signalType of SIGNAL_TYPES) {
+      sendSignalToProcess({ signalType, taskId: TASK_ID });
+    }
+
+    const trackStatus = () =>
+      getTaskStatus({ taskId: TASK_ID }).then((res) => {
+        if (res.statusCd && res.statusCd !== STATUS_TYPE.process) {
+          clearInterval(pullingInterval);
+          setStatus(res.statusCd);
+        }
+      });
+
+    const pullingInterval = setInterval(trackStatus, 30000);
+  }, []);
+
+  return renderStatus(status);
+});
+
+const renderStatus = (status: STATUS_TYPE) => {
+  const statusesMap: Record<STATUS_TYPE, JSX.Element> = {
+    IN_PROCESS: <PendingStatusContent />,
+    FAILED: <FailedStatusContent />,
+    OK: <SuccessStatusContent />,
+    REWORK: <ReworkStatusContent />,
+  };
+
+  return statusesMap[status] || null;
+};

package/src/components/CreditForm/CreditFormStep.tsx

@@ -1,21 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm } from '../../hooks/useForm';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
-import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
-import { renderTitle } from '../../ui-kit/FormField/renderTitle';
-import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
-import { style } from '../../utils/style';
 import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
 import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
-import { getInitialFormState, type FormStateMap } from './getInitialFormState';
-import { renderInputs } from './renderInputs';
+import { CreditFormStatusTracker } from './CreditFormStatusTracker';
+import { type FormStateMap } from './formStateMap';
+import { getInitialFormState } from './getInitialFormState';
+import { renderStep as defaultRenderStep, type CustomSubmit, type StepProps } from './renderStep';
 import { StepsNavigationButtons } from './StepsNavigationButtons';
-import { useCreditFormApi } from './useCreditFormApi';
-
-export interface StepProps {
-  sections?: SectionsProps[];
-  field: FormFieldRegisterer<FormStateMap[keyof FormStateMap]>;
-}
+import { useCreditFormAPI } from './useCreditFormAPI';
 
 export interface CreditFormStepProps {
   step: number;
@@ -23,43 +17,52 @@ export interface CreditFormStepProps {
   inputs: FieldDef[];
   onNextStep: () => void;
   onPrevStep: () => void;
+  renderStep?: (props: StepProps) => JSX.Element | JSX.Element[] | undefined;
+  isFormFinished: boolean;
+  finishForm?: (bool: boolean) => void;
 }
 
 export const CreditFormStep = JSX<CreditFormStepProps>(
-  ({ step, sections, onPrevStep, onNextStep, inputs }) => {
+  ({
+    step,
+    sections,
+    onPrevStep,
+    onNextStep,
+    inputs,
+    renderStep = defaultRenderStep,
+    isFormFinished,
+    finishForm,
+  }) => {
     const [localStorageData, saveStep] = useLocalStorage<Record<string, any>>('leadForm');
     const initialState = getInitialFormState(step as keyof FormStateMap, localStorageData);
 
-    const { handleSubmit } = useCreditFormApi({
-      inputs,
+    const customSubmit = useRef<CustomSubmit | undefined>(undefined);
+
+    const registerSubmit = useCallback((submit?: CustomSubmit) => {
+      customSubmit.current = submit;
+    }, []);
+
+    const { handleSubmit } = useCreditFormAPI({
       step,
-      onNextStep: onNextStep,
+      inputs,
+      onNextStep,
       saveStep,
+      finishForm,
     });
 
-    const [, { field, onSubmit }] = useForm(initialState, { onSubmit: handleSubmit });
+    const [, { field, onSubmit }] = useForm(initialState, {
+      onSubmit: (formData, ev) => {
+        handleSubmit({ ...formData, ...customSubmit.current?.(ev) });
+      },
+    });
 
-    return (
+    return isFormFinished ? (
+      <CreditFormStatusTracker />
+    ) : (
       <form onSubmit={onSubmit} className="space-y-m">
-        {renderStep({ sections, field })}
+        {renderStep({ sections, field, registerSubmit })}
         <StepsNavigationButtons step={step} onPrevStep={onPrevStep} />
       </form>
     );
   },
 );
-
-const renderStep = ({ sections, field }: StepProps) => {
-  return sections?.map((_, i) => (
-    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}>
-      {renderInfo(_?.inputs)}
-      {renderTitle(_?.title)}
-      {renderInputs({ field, inputs: _?.inputs })}
-    </div>
-  ));
-};
-
-const renderInfo = (inputs: FieldDef[] = []) => {
-  const infoInputs = inputs.filter((_) => _.fieldType === 'info');
-
-  return infoInputs.length ? infoInputs.map(({ text }) => <InfoCard __html={text} />) : null;
-};