@redneckz/wildless-cms-uni-blocks 0.14.683 → 0.14.684

package/mobile/src/hooks/useJSONRef/useJSONRef.ts

@@ -4,15 +4,32 @@ import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { fetchRefs } from './fetchRefs';
 import { resolveBlockProps } from './resolveBlockProps';
 
+type RefsMap = Record<string, JSONNode>;
+
 export const useJSONRef = <C>(content: C, fallback?: Record<string, unknown>): C => {
   const refs = collectRef(content as JSONNode);
 
-  const [refsMap, setRefsMap] = useState<Record<string, JSONNode>>({});
+  const [refsMap, setRefsMap] = useState<RefsMap>({});
   useEffect(() => {
-    if (refs.length) {
-      fetchRefs(refs).then(setRefsMap);
-    }
+    resolveRefs(refs).then(setRefsMap);
   }, [refs.join()]);
 
   return refs.length ? resolveBlockProps(content, { ...fallback, ...refsMap }) : content;
 };
+
+const resolveRefs = async (refs: string[], parentRefsMap: RefsMap = {}): Promise<RefsMap> => {
+  if (refs.length) {
+    const refsMap = await fetchRefs(refs);
+    const unionRefsMap = { ...parentRefsMap, ...refsMap };
+
+    const additRefs = Object.entries(refsMap).flatMap(([, v]) => collectRef(v));
+
+    if (additRefs.length) {
+      return resolveRefs(additRefs, unionRefsMap);
+    }
+
+    return unionRefsMap;
+  }
+
+  return parentRefsMap;
+};

package/mobile/src/ui-kit/ConsentBkiDialog/useConsentBkiDialog.tsx

@@ -9,17 +9,21 @@ export const useConsentBkiDialog = (onClose: () => void) => {
   const verifyPhoneDialog = useVerifyPhoneDialog();
 
   const handleSuccessVerify = (profileId?: number) => async (smsCode?: string) => {
-    if (profileId) {
-      await updateUserProfile({
-        profile: {
-          id: profileId,
-          consentBkiFlg: true,
-          smsConsentBki: smsCode,
-        },
-      });
-    }
+    try {
+      if (profileId) {
+        await updateUserProfile({
+          profile: {
+            id: profileId,
+            consentBkiFlg: true,
+            smsConsentBki: smsCode,
+          },
+        });
+      }
 
-    onClose();
+      onClose();
+    } catch (ex) {
+      console.log(ex);
+    }
   };
 
   const handleSubmitBkiConstent =

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

@@ -5,4 +5,5 @@ export interface CustomFieldProps {
   field: FormFieldRegisterer<any>;
   input?: FieldDef;
   url?: string;
+  params?: Record<string, any>;
 }

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

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { CalculatorCredit } from '../../../components/CalculatorCredit/CalculatorCredit';
+import { type CreditCalculatorUserInputParams } from '../../../components/CalculatorCredit/CalculatorCreditContent';
+import { defaultValueAdapter } from '../../../components/CalculatorCredit/defaultValueAdapter';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+const FIELD_NAME = 'calculator';
+
+export const CreditCalcField = JSX<CustomFieldProps>(({ field, params }) => {
+  const handleChange = useCallback((_: CreditCalculatorUserInputParams) => {
+    field(FIELD_NAME).onChange?.(_);
+  }, []);
+
+  return (
+    <CalculatorCredit
+      {...params?.calcData}
+      defaultParams={defaultValueAdapter(
+        field(FIELD_NAME).value as CreditCalculatorUserInputParams,
+      )}
+      onChange={handleChange}
+    />
+  );
+});

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

@@ -1,12 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { getRegionUrl } from '../../../components/ApplicationForm/getRegionUrl';
 import { useRegions } from '../../../hooks/useRegions';
 import { SelectControl } from '../../Select/SelectControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
-export const RegionField = JSX<CustomFieldProps>(({ field, input, url }) => {
+export const RegionField = JSX<CustomFieldProps>(({ field, input, params }) => {
+  const url = getRegionUrl(params?.typeForm as string | undefined);
+
   const regions = useRegions(url);
 
   return (

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

@@ -100,4 +100,5 @@ export type NameFieldDef =
   | 'currency'
   | 'cardCategory'
   | 'codeWord'
+  | 'calculator'
   | 'confirmationIncome';

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

@@ -33,12 +33,10 @@ export const SelectField = UniBlock<SelectFieldProps>(
     isSearch = false,
   }) => {
     const leadOptions: Option[] =
-      (source &&
-        source?.map((_: LeadProps) => ({
-          key: _.key || '',
-          text: _.value,
-        }))) ||
-      [];
+      source?.map((_: LeadProps) => ({
+        key: _.key || '',
+        text: _.value,
+      })) || [];
 
     return (
       <SelectControl

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

@@ -2,7 +2,6 @@
 /* eslint-disable max-lines-per-function */
 //TODO: Убрать обращение к компонентам т.к. ApplicationForm
 import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
-import { getRegionUrl } from '../../components/ApplicationForm/getRegionUrl';
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { InputControl } from '../Input/InputControl';
 import { AcquiringField } from './Fields/AcquiringField';
@@ -29,6 +28,7 @@ import { CommentField } from './Fields/CommentField';
 import { ConfirmationIncomeField } from './Fields/ConfirmationIncomeField';
 import { ConscriptionField } from './Fields/ConscriptionField';
 import { ConsentField } from './Fields/ConsentField';
+import { CreditCalcField } from './Fields/CreditCalcField';
 import { CreditInRshbCdField } from './Fields/CreditInRshbCdField';
 import { CurrencyField } from './Fields/CurrencyField';
 import { DeliveryDateFiels } from './Fields/DeliveryDateFiels';
@@ -99,9 +99,9 @@ const PRODUCT_REF = {
 };
 
 export const getField =
-  (field: FormFieldRegisterer<any>, typeForm = '') =>
+  (field: FormFieldRegisterer<any>, params?: Record<string, any>) =>
   (input: FieldDef, i: number) => {
-    const isPremium = typeForm === 'ULTRASERVICE' || typeForm === 'PREMIUMSERVICE';
+    const isPremium = params?.typeForm === 'ULTRASERVICE' || params?.typeForm === 'PREMIUMSERVICE';
 
     const InputsMap = {
       surname: <SurnameField field={field} input={input} />,
@@ -157,7 +157,7 @@ export const getField =
       region: isPremium ? (
         <RegionPremiumField field={field} />
       ) : (
-        <RegionField field={field} input={input} url={getRegionUrl(typeForm)} />
+        <RegionField field={field} input={input} params={params} />
       ),
       education: <EducationField field={field} input={input} />,
       housing: <HousingField field={field} input={input} />,
@@ -205,6 +205,7 @@ export const getField =
       confirmationIncome: <ConfirmationIncomeField field={field} input={input} />,
       methodObtain: <MethodObtainField field={field} input={input} />,
       deliveryDate: <DeliveryDateFiels field={field} input={input} />,
+      calculator: <CreditCalcField field={field} params={params} />,
     };
 
     return isRenderField({ input, field }) ? (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.683",
+  "version": "0.14.684",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -132,6 +132,7 @@
   "peerDependencies": {
     "cypress": "^13.13.0",
     "cypress-visual-regression": "5.0.0",
+    "cypress-wait-until": "^3.0.1",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   },
@@ -214,7 +215,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "92 kB",
+      "limit": "100 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/RetailAPI/getCardTypes.ts

@@ -16,5 +16,5 @@ export const getCardTypes = async (paymentSystemType: string) => {
 
   const data: CardTypeData[] = await response?.json();
 
-  return data;
+  return Array.isArray(data) ? data : [];
 };

package/src/api/RetailAPI/updateUserTask.ts

@@ -1,5 +1,5 @@
 import { type Option } from '../../ui-kit/Select/Option';
-import { fetchRetailJSON } from './doRequest';
+import { doRequest } from './doRequest';
 
 type ParticipantAddress = {
   addressType: {
@@ -83,6 +83,7 @@ export type Participant = {
   participantAddresses?: ParticipantAddress[];
   participantIncomes?: ParticipantIncome[];
   payrollCardRshbFlg?: boolean;
+  consentInsuranceFlg?: boolean;
   positionCd?: Option;
   registrationDate?: string;
   seniority?: string;
@@ -107,9 +108,6 @@ export type Participant = {
   paymentSystemTypeCd?: string;
   classCard?: Option;
   codeWord?: string;
-  loanAmount?: number;
-  creditPeriod?: number;
-  paymentTypeCd?: PaymentType;
 };
 
 export type UpdateUserTaskBody = {
@@ -131,6 +129,9 @@ export type UpdateUserTaskBody = {
     esiaAccountTypeCd?: {
       key: 'VERIFIED' | 'STANDARD' | 'SIMPLIFIED';
     };
+    loanAmount?: number;
+    creditPeriod?: number;
+    paymentTypeCd?: PaymentType;
   };
 };
 
@@ -141,4 +142,4 @@ export type CreateUserProfileResponse = {
 };
 
 export const updateUserTask = (body: UpdateUserTaskBody) =>
-  fetchRetailJSON<CreateUserProfileResponse>('/user-data/updateUserTask', 'PUT', body);
+  doRequest('/user-data/updateUserTask', 'PUT', body);

package/src/components/ApplicationForm/ApplicationForm.tsx

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

package/src/components/ApplicationForm/renderInputs.tsx

@@ -11,11 +11,11 @@ export const renderInputs = ({ field, typeForm = '', inputs }: GroupedConsentsPr
 
   return consentInputs.length > 2 ? (
     <div>
-      {restInputs.map(getField(field, typeForm))}
+      {restInputs.map(getField(field, { typeForm }))}
       <GroupedConsents inputs={consentInputs} field={field} />
     </div>
   ) : (
-    (inputs || [])?.map(getField(field, typeForm))
+    (inputs || [])?.map(getField(field, { typeForm }))
   );
 };
 

package/src/components/ApplicationLeadForm/GroupedConsents.tsx

@@ -49,7 +49,7 @@ export const GroupedConsents = JSX<GroupedConsentsProps>(
           unfoldedByDefault
           renderFoldableSection={({ isUnfolded }) => (
             <FoldableSection isUnfolded={isUnfolded} className="flex flex-col pl-2xl">
-              {inputs.map(getField(field, typeForm))}
+              {inputs.map(getField(field, { typeForm }))}
             </FoldableSection>
           )}
           renderFoldButton={renderGeneralCheckbox(

package/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable max-lines */
+import { type PaymentType } from '../../api/RetailAPI/updateUserTask';
 import {
   FEEDBACK_METHOD,
   SERVICE_DIRECTIONS,
@@ -143,14 +144,19 @@ export interface FormState extends FormConsents, FormStateDeliveryType {
   cardCategory?: Option;
   codeWord?: string;
   esiaAccountTypeCd?: Option;
-  moneyValue?: number;
-  monthsValue?: number;
-  isAnnuity?: boolean;
-  isInsurance?: boolean;
-  isSalaryClient?: boolean;
-  isPensionClient?: boolean;
-  isStateEmployee?: boolean;
+  calculator?: {
+    moneyValue?: number;
+    monthsValue?: number;
+    isAnnuity?: boolean;
+    isInsurance?: boolean;
+    isSalaryClient?: boolean;
+    isPensionClient?: boolean;
+    isStateEmployee?: boolean;
+  };
   addressRetail?: Option;
+  loanAmount?: number;
+  creditPeriod?: number;
+  paymentTypeCd?: PaymentType;
 }
 
 const initialFormState = {

package/src/components/ApplicationLeadForm/useApplicationLeadApi.ts

@@ -24,6 +24,13 @@ type ApplicationLeadApiProps = {
   saveForm: (value: FormState) => void;
 };
 
+type UserData = {
+  participantId: number;
+  taskId: number;
+  profileId: number;
+  programId: string;
+};
+
 export const useApplicationLeadApi = ({
   inputs,
   programId,
@@ -34,15 +41,20 @@ export const useApplicationLeadApi = ({
   const [, setTaskId] = useLocalStorage<number>('taskId');
   const [, setProfileId] = useLocalStorage<number>('profileId');
   const [, setParticipantId] = useLocalStorage<number>('participantId');
+  const [, setProgramId] = useLocalStorage<string>('programId');
   const esiaLoginDialog = useEsiaLoginDialog(nextStepLink);
   const consentBkiDialog = useConsentBkiDialog(esiaLoginDialog.open);
   const verifyPhoneDialog = useVerifyPhoneDialog();
 
-  const saveUserData = useCallback((participantId: number, taskId: number, profileId: number) => {
-    setParticipantId(participantId);
-    setTaskId(taskId);
-    setProfileId(profileId);
-  }, []);
+  const saveUserData = useCallback(
+    ({ participantId, taskId, profileId, programId: programNumber }: UserData) => {
+      setParticipantId(participantId);
+      setTaskId(taskId);
+      setProfileId(profileId);
+      setProgramId(programNumber);
+    },
+    [],
+  );
 
   // eslint-disable-next-line consistent-return
   const handleSubmit = useCallback(async (formData: FormState) => {
@@ -103,7 +115,7 @@ const updateUserData = async ({
   programId: string;
   profileId: number;
   formData: FormState;
-  saveUserData: (participantId: number, taskId: number, profileId: number) => void;
+  saveUserData: (userData: UserData) => void;
   saveForm: (formData: FormState) => void;
 }) => {
   const transformedForm = transformOtherConsentsField(formData);
@@ -124,7 +136,7 @@ const updateUserData = async ({
     }),
   );
 
-  saveUserData(participantId, taskId, profileId);
+  saveUserData({ participantId, taskId, profileId, programId });
   saveForm(formData);
 };
 

package/src/components/CalculatorCredit/CalculatorCredit.tsx

@@ -18,7 +18,6 @@ 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';
@@ -29,6 +28,7 @@ import {
   type CreditCalculatorParams,
   type CreditCalculatorParamsViewSettings,
   type CreditCalculatorSourceBookParams,
+  type CreditCalculatorUserInputParams,
 } from './CalculatorCreditContent';
 import { getCreditCalculatorParams } from './getCreditCalculatorParams';
 import { isDefaultParams } from './isDefaultParams';
@@ -45,7 +45,7 @@ const MAP = {
 export interface CalculatorDepositProps extends CalculatorCreditContent, UniBlockProps {
   className?: string;
   calcSource?: CreditCalculatorData & JSONRefObject;
-  registerSubmit?: (submit: ((ev: PreventableEvent) => Record<string, any>) | undefined) => void;
+  onChange?: (params: CreditCalculatorUserInputParams) => void;
 }
 
 export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
@@ -57,12 +57,12 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
     footnote,
     paramsViewSettings,
     defaultParams,
-    registerSubmit,
+    onChange,
     ...rest
   }) => {
     const defaultParamsCals = getDefaultParamsMin(calcSource?.rateRows);
 
-    const [userInputParams, { field, onSubmit }] = useForm({
+    const [userInputParams, { field, isDirty }] = useForm({
       moneyValue: getMoneyDefaultValue(defaultParams, CREDIT_DEFAULT_SUM),
       monthsValue: getMonthsDefaultValue(defaultParams, DEFAULT_MONTHS),
       isAnnuity: Boolean(defaultParams?.isAnnuity),
@@ -72,7 +72,9 @@ export const CalculatorCredit = UniBlock<CalculatorDepositProps>(
       isStateEmployee: Boolean(defaultParams?.isEnableStateEmployee),
     });
 
-    registerSubmit?.(onSubmit);
+    useEffect(() => {
+      isDirty && onChange?.(userInputParams);
+    }, [userInputParams, isDirty]);
 
     const calcParams = getCreditCalculatorParams(userInputParams, calcSource, paramsViewSettings);
     const paymentTypeElement = renderPaymentType({

package/src/components/CalculatorCredit/defaultValueAdapter.ts

@@ -0,0 +1,26 @@
+import {
+  type CreditCalculatorUserInputParams,
+  type CreditDefaultParams,
+} from './CalculatorCreditContent';
+
+export const PARAMS_MAP = {
+  moneyValue: 'sum',
+  monthsValue: 'period',
+  isInsurance: 'isEnableInsurance',
+  isPensionClient: 'isEnablePensionClient',
+  isStateEmployee: 'isEnableStateEmployee',
+  isSalaryClient: 'isEnableSalaryClient',
+  isAnnuity: 'isAnnuity',
+};
+
+export const defaultValueAdapter = (
+  value?: CreditCalculatorUserInputParams,
+  isInverse = false,
+): CreditDefaultParams => {
+  const keysMap = isInverse ? swap(PARAMS_MAP) : PARAMS_MAP;
+
+  return Object.fromEntries(Object.entries(value ?? {}).map(([k, v]) => [keysMap[k], v]));
+};
+
+const swap = (_: Record<string, string>) =>
+  Object.fromEntries(Object.entries(_).map(([k, v]) => [v, k]));

package/src/components/CreditCardForm/CreditCardForm.tsx

@@ -11,9 +11,9 @@ import { stepsSectionsMap } from './creditCardFormStepsData';
 
 interface CreditCardFormWizardProps extends CreditCardFormContent, UniBlockProps {}
 
-const WIZARD_STEPS = 6;
+const STEPS = 6;
 
-const WIZARD_TITLES = [
+const TITLES = [
   'Параметры карты',
   'Персональные данные',
   'Данные о трудоустройстве',
@@ -34,7 +34,7 @@ export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...re
   useEffect(updateRefreshToken, []);
 
   const handleNextStep = useCallback(() => {
-    setStep((_) => Math.min(_ + 1, WIZARD_STEPS));
+    setStep((_) => Math.min(_ + 1, STEPS));
     scrollToTop();
   }, []);
 
@@ -52,11 +52,7 @@ export const CreditCardForm = JSX<CreditCardFormWizardProps>(({ className, ...re
     <BlockWrapper className={style('bg-transparent', className)} defaultPadding="p-0" {...rest}>
       <div ref={formContainerRef} className="container grid grid-cols-12">
         {isFormFinished ? null : (
-          <CreditCardFormProgress
-            stepsTitles={WIZARD_TITLES}
-            step={step}
-            totalSteps={WIZARD_STEPS}
-          />
+          <CreditCardFormProgress stepsTitles={TITLES} step={step} totalSteps={STEPS} />
         )}
         <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
           <CreditCardFormStep

package/src/components/CreditCardForm/CreditCardFormStatus.tsx

@@ -15,6 +15,7 @@ type CreditCardFormStatusProps = UniBlockProps & {
   title?: string;
   description?: string;
   interval?: number;
+  intervalExpireAction?: () => void;
   sectionInfoTitle?: string;
   sectionInfo?: (LabelProps & DescriptionProps)[];
   sectionAdditionalTitle?: string;
@@ -34,6 +35,9 @@ export const CreditCardFormStatus = JSX<CreditCardFormStatusProps>(
     sectionInfoAdditional,
     buttonText,
     interval,
+    intervalExpireAction = () => {
+      return;
+    },
     ...props
   }) => (
     <BlockWrapper {...props}>
@@ -46,7 +50,9 @@ export const CreditCardFormStatus = JSX<CreditCardFormStatusProps>(
           padding="p-xl"
           className="w-full"
         />
-        {interval ? <TimerCircle interval={interval} /> : null}
+        {interval ? (
+          <TimerCircle interval={interval} intervalExpireAction={intervalExpireAction} />
+        ) : null}
       </div>
       <SectionInfo title={sectionInfoTitle} items={sectionInfo} />
       <SectionInfo title={sectionAdditionalTitle} items={sectionInfoAdditional} countColumns />

package/src/components/CreditCardForm/CreditCardFormStatusTracker.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, 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 { useInterval } from '../../hooks/useInterval';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { type VNode } from '../../model/VNode';
 import { FailedStatusContent } from './FailedStatusContent';
@@ -24,25 +25,30 @@ export const CreditCardFormStatusTracker = JSX(() => {
         await sendSignalToProcess({ signalType, taskId });
       }
     })();
+  }, [taskId]);
 
-    const trackStatus = useCallback(async () => {
+  const trackStatus = useCallback(
+    async (stopInterval: () => void) => {
       const res = await getTaskStatus({ taskId });
 
       if (res && res?.statusCd !== STATUS_TYPE.process) {
-        clearInterval(pullingInterval);
+        stopInterval();
         setStatus(res.statusCd);
       }
-    }, []);
+    },
+    [taskId],
+  );
 
-    const pullingInterval = setInterval(trackStatus, 30000);
-  }, []);
+  useInterval(trackStatus, 30000);
 
-  return renderStatus(status);
+  const handleExpire = () => setStatus(STATUS_TYPE.rework);
+
+  return renderStatus(status, handleExpire);
 });
 
-const renderStatus = (status: STATUS_TYPE) => {
+const renderStatus = (status: STATUS_TYPE, handleExpire: () => void) => {
   const statusesMap: Record<STATUS_TYPE, VNode> = {
-    IN_PROCESS: <PendingStatusContent />,
+    IN_PROCESS: <PendingStatusContent handleExpireTimer={handleExpire} />,
     CANCELLED: <FailedStatusContent />,
     APPROVED: <SuccessStatusContent />,
     REVISION: <ReworkStatusContent />,

package/src/components/CreditCardForm/CreditCardFormStep.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
 import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
-import { type FormState } from '../ApplicationLeadForm/getInitialFormState';
 import { CreditCardFormStatusTracker } from './CreditCardFormStatusTracker';
 import { getInitialFormState } from './getInitialFormState';
-import { renderStep, type CustomSubmit } from './renderStep';
+import { renderStep } from './renderStep';
 import { StepsNavigationButtons } from './StepsNavigationButtons';
 import { useCreditCardFormAPI } from './useCreditCardFormAPI';
 
@@ -25,14 +23,8 @@ export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
     const [localStorageData, saveStep] = useLocalStorage<Record<string, any>>('leadForm');
     const initialState = getInitialFormState(step, localStorageData);
 
-    const customSubmit = useRef<CustomSubmit | undefined>(undefined);
-
     const inputs = (sections?.flatMap((_: SectionsProps) => _?.inputs) || []) as FieldDef[];
 
-    const registerSubmit = useCallback((submit?: CustomSubmit) => {
-      customSubmit.current = submit;
-    }, []);
-
     const { handleSubmit } = useCreditCardFormAPI({
       step,
       inputs,
@@ -42,21 +34,14 @@ export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
     });
 
     const [, { field, onSubmit }] = useForm(initialState, {
-      onSubmit: (formData, ev) => {
-        handleSubmit({ ...formData, ...customSubmit.current?.(ev) } as FormState);
-      },
+      onSubmit: handleSubmit,
     });
 
     return isFormFinished ? (
       <CreditCardFormStatusTracker />
     ) : (
       <form onSubmit={onSubmit} className="space-y-m">
-        {renderStep({
-          sections,
-          field,
-          step,
-          registerSubmit,
-        })}
+        {renderStep({ sections, field, step })}
         <StepsNavigationButtons step={step} onPrevStep={onPrevStep} />
       </form>
     );