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

package/mobile/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;
-};

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

@@ -0,0 +1,11 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { CreditFormStatus } from './CreditFormStatus';
+
+export const FailedStatusContent = JSX(() => (
+  <CreditFormStatus
+    title="Благодарим Вас за ожидание"
+    description="В настоящий момент Банк не может одобрить Вашу заявку на кредит.
+      Попробуйте подать заявку позже. Спасибо за обращение в АО «Россельхозбанк»."
+    buttonText="Вернуться на главную"
+  />
+));

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

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { CreditFormStatus } from './CreditFormStatus';
+
+export const PendingStatusContent = JSX(() => {
+  const [leadForm] = useLocalStorage<Record<string, any>>('leadForm');
+
+  return (
+    <CreditFormStatus
+      interval={300}
+      title="Заявка успешно отправлена"
+      description="Не закрывайте окно, скоро сообщим результат"
+      sectionInfoTitle="Заявленные условия по кредиту"
+      sectionInfo={[
+        {
+          label: 'Название продукта',
+          description: 'Кредит на любые цели',
+        },
+        {
+          label: 'Цель кредита',
+          description: 'На любые цели',
+        },
+        {
+          label: 'Сумма',
+          description: leadForm?.moneyValue?.toLocaleString() + ' ₽',
+        },
+        {
+          label: 'Срок кредита',
+          description: leadForm?.monthsValue + ' мес',
+        },
+        {
+          label: 'Тип платежа',
+          description: leadForm?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
+        },
+      ]}
+    />
+  );
+});

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

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { CreditFormStatus } from './CreditFormStatus';
+
+export const ReworkStatusContent = JSX(() => {
+  const [leadForm] = useLocalStorage<Record<string, any>>('leadForm');
+
+  return (
+    <CreditFormStatus
+      title="Благодарим вас за ожидание, но нам требуется больше времени для принятия решения"
+      description="Посетите выбранное отделение банка с необходимыми документами и так завершите оформление кредита."
+      sectionAdditionalTitle="В отделении Банка"
+      sectionInfoAdditional={[
+        {
+          label: 'Регион',
+          description: leadForm?.regionRetail?.text,
+        },
+        {
+          label: 'Адрес',
+          description: leadForm?.addressRetail?.text,
+        },
+      ]}
+      sectionInfo={[
+        {
+          label: 'Основные документы:',
+          description: '- Паспорт РФ',
+        },
+      ]}
+      buttonText="Вернуться на главную"
+    />
+  );
+});

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

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { CreditFormStatus } from './CreditFormStatus';
+
+export const SuccessStatusContent = JSX(() => {
+  const [leadForm] = useLocalStorage<Record<string, any>>('leadForm');
+
+  return (
+    <CreditFormStatus
+      title="Банк одобрил вам кредит"
+      description="Обратитесь в отделение банка, чтобы завершить оформление и получит ваш кредит"
+      sectionInfo={[
+        {
+          label: 'Название продукта',
+          description: 'Кредит на любые цели',
+        },
+        {
+          label: 'Ставка',
+          description: '14,5%',
+        },
+        {
+          label: 'Ежемесячный платеж',
+          description: '86 052 ₽',
+        },
+        {
+          label: 'Срок кредита',
+          description: leadForm?.monthsValue + ' мес',
+        },
+        {
+          label: 'Тип платежа',
+          description: leadForm?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
+        },
+      ]}
+      buttonText="Вернуться на главную"
+    />
+  );
+});

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

@@ -4,6 +4,9 @@
 import { type SectionsProps } from '../ApplicationLeadForm/ApplicationLeadFormContent';
 
 export const stepsSectionsMap: SectionsProps[][] = [
+  [
+    // zero step for calculator
+  ],
   [
     {
       title: 'Персональные данные',

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

@@ -0,0 +1,151 @@
+import type { Option } from '../../ui-kit/Select/Option';
+import { type Address } from '../ApplicationLeadForm/getInitialFormState';
+
+export interface FormStateMap {
+  0: {
+    moneyValue?: number;
+    monthsValue?: number;
+    isAnnuity?: boolean;
+    isInsurance?: boolean;
+    isSalaryClient?: boolean;
+    isPensionClient?: boolean;
+    isStateEmployee?: boolean;
+  };
+  1: {
+    surname?: string;
+    name?: string;
+    middleName?: string;
+    sex?: string;
+    birthday?: Date;
+    birthPlace?: string;
+    phone?: string;
+    email?: string;
+    dulSerie?: number;
+    dulNumber?: number;
+    dulIssueDateField?: Date;
+    dulSubdivisionCode?: string;
+    dulIssuedBy?: string;
+    addressRegistration?: Address;
+    participantDateRegistration?: Date;
+    addressFact?: Address;
+    housing?: string;
+  };
+  2: {
+    amountWorkers?: Option;
+    beginDate?: Date;
+    employerActivities?: Option;
+    employerOrganization?: Option;
+    employment?: Option;
+    experience5Years?: string;
+    inn?: number;
+    jobsNumber?: string;
+    lastJobExperience?: string;
+    legalForm?: string;
+    organization?: Option;
+    organizationAddress?: Address;
+    organizationName?: string;
+    organizationPhone?: string;
+    partInBusiness?: number;
+    positionOrganization?: Option;
+  };
+  3: {
+    familyStatus?: Option;
+    dependents?: number;
+    familyMembers?: number;
+    mandatoryIncome?: number;
+    otherPayments?: number;
+    snils?: string;
+    armyIdFlg?: boolean;
+  };
+  4: {
+    disablePeopleFlg?: boolean;
+    bankruptcyFlg?: boolean;
+    shareholderFlg?: boolean;
+    legalEntityName?: string;
+    creditInRshbCd?: Option;
+  };
+  5: {
+    regionRetail?: string;
+    addressRetail?: string;
+    bankEmployeeCode?: string;
+  };
+}
+
+export const formStateMap: FormStateMap = {
+  0: {
+    moneyValue: 0,
+    monthsValue: 0,
+    isAnnuity: false,
+    isInsurance: false,
+    isSalaryClient: false,
+    isPensionClient: false,
+    isStateEmployee: false,
+  },
+  1: {
+    surname: '',
+    name: '',
+    middleName: '',
+    sex: '',
+    birthday: undefined,
+    birthPlace: '',
+    phone: '',
+    email: '',
+    dulSerie: undefined,
+    dulNumber: undefined,
+    dulIssueDateField: undefined,
+    dulSubdivisionCode: '',
+    dulIssuedBy: '',
+    addressRegistration: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    participantDateRegistration: undefined,
+    addressFact: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    housing: '',
+  },
+  2: {
+    amountWorkers: { key: '', text: '' },
+    beginDate: undefined,
+    employerActivities: { key: '', text: '' },
+    employerOrganization: { key: '', text: '' },
+    employment: { key: '', text: '' },
+    experience5Years: '',
+    inn: undefined,
+    jobsNumber: '',
+    lastJobExperience: '',
+    legalForm: '',
+    organization: { key: '', text: '' },
+    organizationAddress: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    organizationName: '',
+    organizationPhone: '',
+    partInBusiness: undefined,
+    positionOrganization: { key: '', text: '' },
+  },
+  3: {
+    familyStatus: { key: '', text: '' },
+    dependents: undefined,
+    familyMembers: undefined,
+    mandatoryIncome: undefined,
+    otherPayments: undefined,
+    snils: '',
+    armyIdFlg: false,
+  },
+  4: {
+    disablePeopleFlg: false,
+    bankruptcyFlg: false,
+    shareholderFlg: false,
+    legalEntityName: '',
+    creditInRshbCd: undefined,
+  },
+  5: {
+    regionRetail: '',
+    addressRetail: '',
+    bankEmployeeCode: '',
+  },
+};

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

@@ -1,139 +1,4 @@
-/* eslint-disable max-len, max-lines */
-import type { Option } from '../../ui-kit/Select/Option';
-import { type Address } from '../ApplicationLeadForm/getInitialFormState';
-
-export interface FormStateMap {
-  0: {
-    surname?: string;
-    name?: string;
-    middleName?: string;
-    sex?: string;
-    birthday?: Date;
-    birthPlace?: string;
-    phone?: string;
-    email?: string;
-    dulSerie?: number;
-    dulNumber?: number;
-    dulIssueDateField?: Date;
-    dulSubdivisionCode?: string;
-    dulIssuedBy?: string;
-    addressRegistration?: Address;
-    addressMatch?: boolean;
-    participantDateRegistration?: Date;
-    addressFact?: Address;
-    housing?: string;
-  };
-  1: {
-    amountWorkers?: Option;
-    beginDate?: Date;
-    employerActivities?: Option;
-    employerOrganization?: Option;
-    employment?: Option;
-    experience5Years?: string;
-    inn?: number;
-    jobsNumber?: string;
-    lastJobExperience?: string;
-    legalForm?: string;
-    organization?: Option;
-    organizationAddress?: Address;
-    organizationName?: string;
-    organizationPhone?: string;
-    partInBusiness?: number;
-    positionOrganization?: Option;
-  };
-  2: {
-    familyStatus?: Option;
-    dependents?: number;
-    familyMembers?: number;
-    mandatoryIncome?: number;
-    otherPayments?: number;
-    snils?: string;
-    armyIdFlg?: boolean;
-  };
-  3: {
-    disablePeopleFlg?: boolean;
-    bankruptcyFlg?: boolean;
-    shareholderFlg?: boolean;
-    legalEntityName?: string;
-    creditInRshbCd?: Option;
-  };
-  4: {
-    regionRetail?: string;
-    addressRetail?: string;
-    bankEmployeeCode?: string;
-  };
-}
-
-const formStateMap: FormStateMap = {
-  0: {
-    surname: '',
-    name: '',
-    middleName: '',
-    sex: '',
-    birthday: undefined,
-    birthPlace: '',
-    phone: '',
-    email: '',
-    dulSerie: undefined,
-    dulNumber: undefined,
-    dulIssueDateField: undefined,
-    dulSubdivisionCode: '',
-    dulIssuedBy: '',
-    addressRegistration: {
-      fullAddress: '',
-      fiasCode: '',
-    },
-    addressMatch: false,
-    participantDateRegistration: undefined,
-    addressFact: {
-      fullAddress: '',
-      fiasCode: '',
-    },
-    housing: '',
-  },
-  1: {
-    amountWorkers: { key: '', text: '' },
-    beginDate: undefined,
-    employerActivities: { key: '', text: '' },
-    employerOrganization: { key: '', text: '' },
-    employment: { key: '', text: '' },
-    experience5Years: '',
-    inn: undefined,
-    jobsNumber: '',
-    lastJobExperience: '',
-    legalForm: '',
-    organization: { key: '', text: '' },
-    organizationAddress: {
-      fullAddress: '',
-      fiasCode: '',
-    },
-    organizationName: '',
-    organizationPhone: '',
-    partInBusiness: undefined,
-    positionOrganization: { key: '', text: '' },
-  },
-  2: {
-    familyStatus: { key: '', text: '' },
-    dependents: undefined,
-    familyMembers: undefined,
-    mandatoryIncome: undefined,
-    otherPayments: undefined,
-    snils: '',
-    armyIdFlg: false,
-  },
-  3: {
-    disablePeopleFlg: false,
-    bankruptcyFlg: false,
-    shareholderFlg: false,
-    legalEntityName: '',
-    creditInRshbCd: undefined,
-  },
-  4: {
-    regionRetail: '',
-    addressRetail: '',
-    bankEmployeeCode: '',
-  },
-};
+import { formStateMap, type FormStateMap } from './formStateMap';
 
 export const getInitialFormState = <Step extends keyof FormStateMap>(
   step: Step,

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

@@ -0,0 +1,10 @@
+import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
+import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+
+export const renderInfo = (inputs: FieldDef[] = []) => {
+  const infoInputs = inputs.filter((_) => _.fieldType === 'info');
+
+  return infoInputs.length
+    ? infoInputs.map(({ text, name }, i) => <InfoCard key={`${name}_${i}`} __html={text} />)
+    : null;
+};

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

@@ -1,6 +1,5 @@
 import { getField } from '../../ui-kit/FormField/getField';
 import { type RenderInputsProps } from './CreditFormContent';
 
-export const renderInputs = ({ field, inputs }: RenderInputsProps) => {
-  return (inputs || [])?.map(getField(field, ''));
-};
+export const renderInputs = ({ field, inputs }: RenderInputsProps) =>
+  (inputs || [])?.map(getField(field, ''));

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

@@ -0,0 +1,25 @@
+import { type FormFieldRegisterer, type FormOperatorProps } from '../../hooks/useForm';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { style } from '../../utils/style';
+import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
+import { type FormStateMap } from './formStateMap';
+import { renderInfo } from './renderInfo';
+import { renderInputs } from './renderInputs';
+
+export type CustomSubmit = FormOperatorProps<FormStateMap[keyof FormStateMap]>['onSubmit'];
+
+export interface StepProps {
+  sections?: SectionsProps[];
+  field: FormFieldRegisterer<FormStateMap[keyof FormStateMap]>;
+  registerSubmit?: (submit: CustomSubmit) => void;
+}
+
+export const renderStep = ({ sections, field }: StepProps) =>
+  sections?.map(({ inputs, columns, title }, i) => (
+    <div key={`section-${i}`} className={style(inputColumnStyles(columns), 'grid gap-x-m')}>
+      {renderInfo(inputs)}
+      {renderTitle(title)}
+      {renderInputs({ field, inputs })}
+    </div>
+  ));

package/mobile/src/components/CreditForm/{useCreditFormApi.tsx → useCreditFormAPI.tsx}

@@ -5,17 +5,24 @@ import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
 import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { type FormStateMap } from './formStateMap';
 import { getCreditFormTaskData } from './getCreditFormTaskData';
-import { type FormStateMap } from './getInitialFormState';
 
 type CreditFormApiProps = {
-  inputs: FieldDef[];
   step: number;
+  inputs: FieldDef[];
   onNextStep: () => void;
   saveStep: (value: Record<string, any>) => void;
+  finishForm?: (bool: boolean) => void;
 };
 
-export const useCreditFormApi = ({ inputs, step, onNextStep, saveStep }: CreditFormApiProps) => {
+export const useCreditFormAPI = ({
+  step,
+  inputs,
+  onNextStep,
+  saveStep,
+  finishForm,
+}: CreditFormApiProps) => {
   const [taskId] = useLocalStorage<number>('taskId');
   const [profileId] = useLocalStorage<number>('profileId');
   const [participantId] = useLocalStorage<number>('participantId');
@@ -46,6 +53,10 @@ export const useCreditFormApi = ({ inputs, step, onNextStep, saveStep }: CreditF
 
     onNextStep();
 
+    if (step === 5) {
+      finishForm?.(true);
+    }
+
     return 'OK';
   }, []);
 

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.638",
   "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);