@redneckz/wildless-cms-uni-blocks 0.14.651 → 0.14.652

package/src/components/CreditCardForm/CreditCardFormStep.tsx

@@ -0,0 +1,66 @@
+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 { CreditCardFormStatusTracker } from './CreditCardFormStatusTracker';
+import { type FormStateMap } from './formStateMap';
+import { getInitialFormState } from './getInitialFormState';
+import { renderStep, type CustomSubmit } from './renderStep';
+import { StepsNavigationButtons } from './StepsNavigationButtons';
+import { useCreditCardFormAPI } from './useCreditCardFormAPI';
+
+export interface CreditCardFormStepProps {
+  step: number;
+  sections: SectionsProps[];
+  inputs: FieldDef[];
+  onNextStep: () => void;
+  onPrevStep: () => void;
+  isFormFinished: boolean;
+  finishForm?: (bool: boolean) => void;
+}
+
+export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
+  ({ step, sections, onPrevStep, onNextStep, inputs, isFormFinished, finishForm }) => {
+    const [localStorageData, saveStep] = useLocalStorage<Record<string, any>>('leadForm');
+    const initialState = getInitialFormState(step as keyof FormStateMap, localStorageData);
+
+    const customSubmit = useRef<CustomSubmit | undefined>(undefined);
+
+    const registerSubmit = useCallback((submit?: CustomSubmit) => {
+      customSubmit.current = submit;
+    }, []);
+
+    const { handleSubmit } = useCreditCardFormAPI({
+      step,
+      inputs,
+      onNextStep,
+      saveStep,
+      finishForm,
+    });
+
+    const [state, { field, onSubmit }] = useForm(initialState, {
+      onSubmit: (formData, ev) => {
+        handleSubmit({ ...formData, ...customSubmit.current?.(ev) });
+      },
+    });
+
+    const methodObtain = 'methodObtain' in state ? state.methodObtain : undefined;
+
+    return isFormFinished ? (
+      <CreditCardFormStatusTracker />
+    ) : (
+      <form onSubmit={onSubmit} className="space-y-m">
+        {renderStep({
+          sections,
+          field,
+          registerSubmit,
+          methodObtain,
+          isLastStep: step === 5,
+        })}
+        <StepsNavigationButtons step={step} onPrevStep={onPrevStep} />
+      </form>
+    );
+  },
+);

package/src/components/CreditCardForm/FailedStatusContent.tsx

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

package/src/components/CreditCardForm/PendingStatusContent.tsx

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

package/src/components/CreditCardForm/ReworkStatusContent.tsx

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

package/src/components/CreditCardForm/StepsNavigationButtons.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../../ui-kit/Button/Button';
+import { style } from '../../utils/style';
+
+export interface StepsNavigationButtonsProps {
+  step: number;
+  onPrevStep?: () => void;
+}
+
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
+  const isFirstStep = step === 0;
+
+  return (
+    <div className="flex justify-between gap-m">
+      <Button
+        onClick={onPrevStep}
+        className={style('w-full @xl:w-auto')}
+        type="button"
+        version="secondary"
+        disabled={isFirstStep}
+      >
+        Назад
+      </Button>
+      <Button className="w-full @xl:w-auto" type="submit">
+        Далее
+      </Button>
+    </div>
+  );
+});

package/src/components/CreditCardForm/SuccessStatusContent.tsx

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

package/src/components/CreditCardForm/creditCardFormStepsData.tsx

@@ -0,0 +1,310 @@
+/* eslint-disable max-lines */
+/* eslint-disable max-len */
+
+import { type CreditCardSectionsProps } from './CreditCardFormContent';
+
+export const stepsSectionsMap: CreditCardSectionsProps[][] = [
+  [
+    {
+      title: 'Параметры карты',
+      inputs: [],
+    },
+    {
+      inputs: [
+        { fieldType: 'common', name: 'currency', required: true },
+        { fieldType: 'common', name: 'paymentSystem', required: true },
+        { fieldType: 'common', name: 'cardCategory', required: true },
+        { fieldType: 'common', name: 'codeWord', required: true },
+      ],
+    },
+  ],
+  [
+    {
+      title: 'Персональные данные',
+      columns: 2,
+      inputs: [
+        {
+          fieldType: 'common',
+          name: 'surname',
+          required: true,
+          dadata: true,
+          filledByEsia: true,
+        },
+        { fieldType: 'common', name: 'name', required: true, dadata: true, filledByEsia: true },
+        { fieldType: 'common', name: 'middleName', dadata: true, filledByEsia: true },
+        { fieldType: 'common', name: 'sex', required: true },
+        { fieldType: 'common', name: 'birthday', required: true, filledByEsia: true },
+        { fieldType: 'common', name: 'birthPlace', required: true },
+        { fieldType: 'common', name: 'phone', required: true },
+        { fieldType: 'common', name: 'email', required: true, dadata: true },
+      ],
+    },
+    {
+      title: 'Паспортные данные',
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'dulSerie', required: true, filledByEsia: true },
+        { fieldType: 'common', name: 'dulNumber', required: true, filledByEsia: true },
+        { fieldType: 'common', name: 'dulIssueDateField', required: true, filledByEsia: true },
+        {
+          fieldType: 'common',
+          name: 'dulSubdivisionCode',
+          required: true,
+          dadata: true,
+          filledByEsia: true,
+        },
+      ],
+    },
+    {
+      inputs: [
+        {
+          fieldType: 'common',
+          name: 'dulIssuedBy',
+          required: true,
+          dadata: true,
+          filledByEsia: true,
+        },
+        {
+          fieldType: 'common',
+          name: 'education',
+          required: true,
+        },
+      ],
+    },
+    {
+      title: 'Адрес регистрации по месту жительства',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      inputs: [
+        {
+          fieldType: 'common',
+          name: 'addressRegistration',
+          required: true,
+          dadata: true,
+          filledByEsia: true,
+        },
+        { fieldType: 'common', name: 'addressMatch' },
+      ],
+    },
+    {
+      columns: 2,
+      inputs: [{ fieldType: 'common', name: 'participantDateRegistration', required: true }],
+    },
+    {
+      title: 'Адрес фактического проживания (место пребывания РФ)',
+      inputs: [],
+    },
+    {
+      columns: 2,
+      inputs: [{ fieldType: 'common', name: 'housing', required: true }],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'addressFact', required: true, dadata: true }],
+    },
+  ],
+  [
+    {
+      title: 'Данные о трудоустройстве',
+      inputs: [],
+    },
+    {
+      inputs: [
+        {
+          fieldType: 'info',
+          text: 'Клиент на момент оформления заявки на кредит должен быть: официально трудоустроен более 6 месяцев, если Клиент получает з/п на счет РСХБ, то трудоустроен более 3 месяцев, не должен находиться в декретном отпуске',
+        },
+      ],
+    },
+    {
+      inputs: [
+        { fieldType: 'common', name: 'employment' },
+        { fieldType: 'common', name: 'organizationName', required: true, dadata: true },
+      ],
+    },
+    {
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'inn', required: true, dadata: true },
+        { fieldType: 'common', name: 'legalForm', required: true },
+      ],
+    },
+    {
+      inputs: [
+        { fieldType: 'common', name: 'organization', required: false },
+        { fieldType: 'common', name: 'amountWorkers', required: false },
+      ],
+    },
+    {
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'employerActivities', required: false },
+        { fieldType: 'common', name: 'employerOrganization', required: false },
+        { fieldType: 'common', name: 'generalSeniority', required: true },
+        { fieldType: 'common', name: 'lastJobExperience', required: true },
+        { fieldType: 'common', name: 'experience5Years', required: true },
+        { fieldType: 'common', name: 'jobsNumber', required: true },
+      ],
+    },
+    {
+      inputs: [
+        {
+          fieldType: 'common',
+          name: 'organizationPhone',
+          label: 'Телефон работодателя',
+          required: true,
+        },
+        { fieldType: 'common', name: 'beginDate', required: true },
+      ],
+    },
+    {
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'positionOrganization', required: false },
+        { fieldType: 'common', name: 'partInBusiness', required: true },
+      ],
+    },
+    {
+      title: 'Адрес работодателя',
+      inputs: [],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'organizationAddress', required: true, dadata: true }],
+    },
+  ],
+  [
+    {
+      title: 'Семейное положение',
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'familyStatus', required: true }],
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'dependents', required: true }],
+    },
+    {
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'familyMembers' },
+        { fieldType: 'common', name: 'children', required: true },
+      ],
+    },
+    {
+      title: 'Совокупный доход',
+    },
+    {
+      inputs: [
+        {
+          fieldType: 'info',
+          text: 'Сумма основного и дополнительных доходов после вычета налога',
+        },
+      ],
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'mandatoryIncome', required: true }],
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'otherPayments', required: true }],
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'snils', required: true }],
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'conscription', required: true }],
+    },
+    {
+      columns: 2,
+      inputs: [{ fieldType: 'common', name: 'armyIdFlg' }],
+    },
+  ],
+  [
+    {
+      title: 'Дополнительные сведения',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'disablePeopleFlg' }],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'bankruptcyFlg' }],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'shareholderFlg' }],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'legalEntityName' }],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'creditInRshbCd' }],
+    },
+  ],
+  [
+    {
+      title: 'Способ получения',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'methodObtain' }],
+    },
+    {
+      type: 'courier',
+      title: 'Адрес',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      type: 'courier',
+      inputs: [{ fieldType: 'common', name: 'addressCourier', dadata: true }],
+    },
+    {
+      type: 'courier',
+      inputs: [{ fieldType: 'common', name: 'deliveryDate' }],
+    },
+    {
+      type: 'courier',
+      inputs: [{ fieldType: 'common', name: 'comment' }],
+    },
+    {
+      type: 'office',
+      title: 'Отделение Банка',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      type: 'office',
+      inputs: [{ fieldType: 'common', name: 'regionRetail', required: true }],
+    },
+    {
+      type: 'office',
+      inputs: [{ fieldType: 'common', name: 'addressRetail', required: true }],
+    },
+    {
+      type: 'office',
+      title: 'Код представителя Банка',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      type: 'office',
+      inputs: [
+        {
+          fieldType: 'info',
+          text: 'Если представитель Банка помогал Вам в заведении заявки, введите здесь его код',
+        },
+      ],
+    },
+    {
+      type: 'office',
+      inputs: [{ fieldType: 'common', name: 'bankEmployeeCode' }],
+    },
+  ],
+];

package/src/components/CreditCardForm/formStateMap.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable max-lines */
+import { PAYMENT_SYSTEM_TYPES } from '../../ui-kit/FormField/Fields/PaymentSystemField';
+import type { Option } from '../../ui-kit/Select/Option';
+import { type Address } from '../ApplicationLeadForm/getInitialFormState';
+
+export interface FormStateMap {
+  0: {
+    currency?: string;
+    paymentSystem?: string;
+    cardCategory?: Option;
+    codeWord?: string;
+  };
+  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;
+    methodObtain?: string;
+    addressCourier?: Address;
+  };
+  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?: Address;
+    bankEmployeeCode?: string;
+    addressCoutier?: Address;
+    methodObtain?: 'office' | 'courier';
+    deliveryDate?: Date;
+  };
+}
+
+export const formStateMap: FormStateMap = {
+  0: {
+    paymentSystem: PAYMENT_SYSTEM_TYPES[0].id,
+    currency: 'rub',
+    codeWord: '',
+  },
+  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: '',
+    methodObtain: 'office',
+    addressCourier: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+  },
+  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: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    bankEmployeeCode: '',
+    addressCoutier: {
+      fullAddress: '',
+      fiasCode: '',
+    },
+    methodObtain: 'office',
+    deliveryDate: undefined,
+  },
+};