@redneckz/wildless-cms-uni-blocks 0.14.603 → 0.14.605

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -3,20 +3,14 @@ import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
-import { getField } from '../../ui-kit/FormField/getField';
 import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
 import { renderTitle } from '../../ui-kit/FormField/renderTitle';
 import { useResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/useResponseTypeDialog';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import {
-  type ApplicationLeadFormContent,
-  type FieldDef,
-  type GroupedConsentsProps,
-} from './ApplicationLeadFormContent';
-import { CONSENTS } from './consents';
+import { renderInputs } from '../ApplicationForm/renderInputs';
+import { type ApplicationLeadFormContent, type FieldDef } from './ApplicationLeadFormContent';
 import { getInitialFormState } from './getInitialFormState';
-import { GroupedConsents } from './GroupedConsents';
 import { renderSubmitButton } from './renderSubmitButton';
 import { useApplicationLeadApi } from './useApplicationLeadApi';
 import { useInitApplicationLead } from './useInitApplicationLead';
@@ -72,21 +66,3 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     );
   },
 );
-
-const renderInputs = ({ field, typeForm = '', inputs }: GroupedConsentsProps) => {
-  const { consentInputs, restInputs } = splitInputs(inputs || []);
-
-  return consentInputs.length > 2 ? (
-    <div>
-      {restInputs.map(getField(field, typeForm))}
-      <GroupedConsents inputs={consentInputs} field={field} />
-    </div>
-  ) : (
-    (inputs || [])?.map(getField(field, typeForm))
-  );
-};
-
-const splitInputs = (inputs?: FieldDef[]) => ({
-  consentInputs: inputs?.filter((_) => Object.keys(CONSENTS).includes(_.name)) || [],
-  restInputs: inputs?.filter((_) => !Object.keys(CONSENTS).includes(_.name)) || [],
-});

package/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -25,6 +25,7 @@ export type ConditionFieldProps = {
 };
 
 export type FieldDefaultDef = Required &
+  TextProps &
   LabelProps &
   ConditionFieldProps & {
     name: NameFieldDef;
@@ -56,14 +57,23 @@ export type FieldVedDef = FieldDefaultDef & {
   defaultValue?: VedTypes;
 };
 
+/**
+ * @title Текст для отображения в карточке информации
+ * @default {"fieldType": "info"}
+ */
+export type FieldInfoDef = FieldDefaultDef & {
+  /** @default "info" */
+  fieldType: 'info';
+};
+
 /**
  * @title Поле
  * @default { "fieldType": "common" }
  */
-export type FieldDef = FieldCommonDef | FieldVedDef;
+export type FieldDef = FieldCommonDef | FieldVedDef | FieldInfoDef;
 
 /** @hidden */
-type TypeFormFieldDef =
+export type TypeFormFieldDef =
   | 'ACQR'
   | 'ANALITIC'
   | 'ANTIFRAUD'

package/src/components/ApplicationLeadForm/getInitialFormState.tsx

@@ -87,6 +87,16 @@ export interface FormState extends FormConsents {
   armyIdFlg?: boolean;
   participantAddress?: string;
   participantDateRegistration?: Date;
+  retirementIncome?: number;
+  otherIncome?: number;
+  mandatoryIncome?: number;
+  otherPayments?: number;
+  creditInRshbCd?: string;
+  disablePeopleFlg?: boolean;
+  bankruptcyFlg?: boolean;
+  shareholderFlg?: boolean;
+  legalEntityName?: string;
+  bankEmployeeCode?: number;
 }
 
 const initialFormState = {

package/src/components/Blocks.mobile.ts

@@ -19,6 +19,7 @@ import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
+import { CreditForm } from './CreditForm/CreditForm';
 import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { Depository } from './Depository/Depository';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
@@ -68,6 +69,7 @@ export const Blocks: BlocksRegistry = {
   CarouselLinks,
   CarouselRecommendationCard,
   CarouselTariffsCard,
+  CreditForm,
   DepositFiltration,
   Depository,
   ErrorBlock,

package/src/components/Blocks.ts

@@ -20,6 +20,7 @@ import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
+import { CreditForm } from './CreditForm/CreditForm';
 import { DepositFiltration } from './DepositFiltration/DepositFiltration';
 import { Depository } from './Depository/Depository';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
@@ -74,6 +75,7 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselTariffsCard,
   ContactsBlock,
+  CreditForm,
   DepositFiltration,
   Depository,
   ErrorBlock,

package/src/components/CreditForm/CreditForm.fixture.tsx

@@ -0,0 +1,6 @@
+import '../../setup-fixture';
+import { CreditForm } from './CreditForm';
+
+export default {
+  default: <CreditForm className="col-span-12" />,
+};

package/src/components/CreditForm/CreditForm.tsx

@@ -0,0 +1,76 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
+import { renderTitle } from '../../ui-kit/FormField/renderTitle';
+import { InfoCard } from '../../ui-kit/InfoCard/InfoCard';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
+import { type FormState } from '../ApplicationForm/getInitialFormState';
+import { renderInputs } from '../ApplicationForm/renderInputs';
+import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { getInitialFormState } from '../ApplicationLeadForm/getInitialFormState';
+import { type CreditFormContent } from './CreditFormContent';
+import { CreditFormProgress } from './CreditFormProgress';
+import { stepsSectionsMap } from './creditFormStepsData';
+import { StepsNavigationButtons } from './StepsNavigationButtons';
+
+const STEPS_COUNT = 5;
+const STEPS_TITLES = [
+  'Персональные данные',
+  'Данные о трудоустройстве',
+  'Данные о доходах и расходах',
+  'Дополнительные сведения',
+  'Отделение Банка',
+];
+
+export interface StepProps {
+  typeForm: string;
+  sections: SectionsProps[];
+  field: FormFieldRegisterer<FormState>;
+}
+
+export interface CreditFormProps extends CreditFormContent, UniBlockProps {}
+
+export const CreditForm = JSX<CreditFormProps>(
+  ({ className, typeForm = '', sections = [], ...rest }) => {
+    const [step, setStep] = useState(1);
+    const inputs = (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[];
+    const initialFormState = getInitialFormState(inputs, typeForm);
+    const handleSubmit = () => false;
+
+    const [, { field, onSubmit }] = useForm(initialFormState, { onSubmit: handleSubmit });
+
+    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} />
+          <div className="py-lg px-5xl mt-2xs bg-white col-span-12">
+            <form onSubmit={onSubmit} className="space-y-m">
+              {renderStep({ sections: stepsSectionsMap[step], typeForm, field })}
+              <StepsNavigationButtons step={step} setStep={setStep} totalSteps={STEPS_COUNT} />
+            </form>
+          </div>
+        </div>
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderStep = ({ sections, field, typeForm }: StepProps) => {
+  return sections.map((_, i) => (
+    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}>
+      {renderInfo(_?.inputs)}
+      {renderTitle(_?.title)}
+      {renderInputs({ field, typeForm, inputs: _?.inputs })}
+    </div>
+  ));
+};
+
+const renderInfo = (inputs: FieldDef[] = []) => {
+  const infoInputs = inputs.filter((_) => _.fieldType === 'info');
+
+  return infoInputs.length ? infoInputs.map(({ text }) => <InfoCard __html={text} />) : null;
+};

package/src/components/CreditForm/CreditFormContent.ts

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

package/src/components/CreditForm/CreditFormProgress.tsx

@@ -0,0 +1,27 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { ProgressBar } from '../../ui-kit/ProgressBar/ProgressBar';
+
+export interface CreditFormProgressProps {
+  step: number;
+  totalSteps: number;
+  stepsTitles?: string[];
+}
+
+export const CreditFormProgress = JSX<CreditFormProgressProps>(
+  ({ 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} из {totalSteps}.
+          </span>{' '}
+          {stepsTitles[step - 1] || null}
+          <ProgressBar step={progress} showPercentage={false} />
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/CreditForm/StepsNavigationButtons.tsx

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

package/src/components/CreditForm/creditFormStepsData.tsx

@@ -0,0 +1,215 @@
+/* eslint-disable max-lines */
+/* eslint-disable max-len */
+
+export const stepsSectionsMap = {
+  1: [
+    {
+      title: 'Персональные данные',
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'surname', required: true, dadata: true },
+        { fieldType: 'common', name: 'name', required: true, dadata: true },
+        { fieldType: 'common', name: 'middleName', dadata: true },
+        { fieldType: 'common', name: 'sex', required: true },
+        { fieldType: 'common', name: 'birthday', required: 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 },
+        { fieldType: 'common', name: 'dulNumber', required: true },
+        { fieldType: 'common', name: 'dulIssueDateField', required: true },
+        { fieldType: 'common', name: 'dulSubdivisionCode', required: true, dadata: true },
+      ],
+    },
+    {
+      inputs: [
+        { fieldType: 'common', name: 'dulIssuedBy', required: true, dadata: true },
+        {
+          fieldType: 'common',
+          name: 'education',
+          required: true,
+        },
+      ],
+    },
+    {
+      title: 'Адрес регистрации по месту жительства',
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'participantAddress', required: true },
+        { fieldType: 'common', name: 'participantAddress', required: true, dadata: true },
+      ],
+    },
+    {
+      title: 'Адрес фактического проживания (место пребывания РФ)',
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'fullAddress', required: true, dadata: true },
+        { fieldType: 'common', name: 'housing', required: true },
+      ],
+    },
+  ],
+  2: [
+    {
+      title: 'Данные о трудоустройстве',
+      inputs: [],
+    },
+    {
+      inputs: [
+        {
+          fieldType: 'info',
+          text: 'Клиент на момент оформления заявки на кредит должен быть: официально трудоустроен более 6 месяцев, если Клиент получает з/п на счет РСХБ, то трудоустроен более 3 месяцев, не должен находиться в декретном отпуске',
+        },
+      ],
+    },
+    {
+      inputs: [
+        { fieldType: 'common', name: 'employment', required: true },
+        { 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: true },
+        { fieldType: 'common', name: 'amountWorkers', required: true },
+      ],
+    },
+    {
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'employerActivities', required: true },
+        { fieldType: 'common', name: 'employerOrganization', required: true },
+        { 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: 'phone', label: 'Телефон работодателя', required: true },
+        { fieldType: 'common', name: 'beginDate', required: true },
+        { fieldType: 'common', name: 'positionOrganization', required: true },
+      ],
+    },
+    {
+      title: 'Адрес работодателя',
+      inputs: [],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'fullAddress', required: true }],
+    },
+  ],
+  3: [
+    {
+      title: 'Семейное положение',
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'familyStatus' }],
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'dependents' }],
+    },
+    {
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'familyMembers' },
+        { fieldType: 'common', name: 'familyMembers' },
+        { fieldType: 'common', name: 'retirementIncome' },
+        { fieldType: 'common', name: 'otherIncome' },
+      ],
+    },
+    {
+      title: 'Совокупный доход',
+    },
+    {
+      inputs: [
+        {
+          fieldType: 'info',
+          text: 'Сумма основного и дополнительных доходов после вычета налога',
+        },
+      ],
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'mandatoryIncome' }],
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'otherPayments' }],
+    },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'snils' }],
+    },
+    {
+      columns: 2,
+      inputs: [{ fieldType: 'common', name: 'armyIdFlg' }],
+    },
+  ],
+  4: [
+    {
+      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' }],
+    },
+  ],
+  5: [
+    {
+      title: 'Отделение Банка',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'region' }],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'addressBranch' }],
+    },
+    {
+      title: 'Код представителя Банка',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      inputs: [
+        {
+          fieldType: 'info',
+          text: 'Если представитель Банка помогал Вам в заведении заявки, введите здесь его код',
+        },
+      ],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'bankEmployeeCode' }],
+    },
+  ],
+};