@redneckz/wildless-cms-uni-blocks 0.14.602 → 0.14.604

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { type FieldDef } from '../../components/ApplicationForm/ApplicationFormContent';
 import { getRegionUrl } from '../../components/ApplicationForm/getRegionUrl';
 import { type FormFieldRegisterer } from '../../hooks/useForm';
@@ -8,7 +9,9 @@ import { AmountField } from './Fields/AmountField';
 import { AmountWorkersField } from './Fields/AmountWorkersField';
 import { AnnualRevenueField } from './Fields/AnnualRevenueField';
 import { ArmyIdFlgField } from './Fields/ArmyIdFlgField';
+import { BankEmpoleeCodeField } from './Fields/BankEmployeeCodeField';
 import { BankEmpoleeField } from './Fields/BankEmpoleeField';
+import { BankruptcyFlgField } from './Fields/BankruptcyFlgField';
 import { BeginDateField } from './Fields/BeginDateField';
 import { BirthdayField } from './Fields/BirthdayField';
 import { BirthPlaceField } from './Fields/BirthPlaceField';
@@ -17,8 +20,10 @@ import { CollectionCountField } from './Fields/CollectionCountField';
 import { CommentField } from './Fields/CommentField';
 import { ConscriptionField } from './Fields/ConscriptionField';
 import { ConsentField } from './Fields/ConsentField';
+import { CreditInRshbCdField } from './Fields/CreditInRshbCdField';
 import { DependentsField } from './Fields/DependentsField';
 import { DesiredMeetingDateField } from './Fields/DesiredMeetingDateField';
+import { DisablePeopleFlgField } from './Fields/DisablePeopleFlgField';
 import { DulIssueDateField } from './Fields/DulIssueDateField';
 import { DulIssuedByField } from './Fields/DulIssuedByField';
 import { DulNumberField } from './Fields/DulNumberField';
@@ -42,13 +47,17 @@ import { InnField } from './Fields/InnField';
 import { IsClientField } from './Fields/IsClientField';
 import { JobsNumberField } from './Fields/JobsNumberField';
 import { LastJobExperienceField } from './Fields/LastJobExperienceField';
+import { LegalEntityNameField } from './Fields/LegalEntityNameField';
 import { LegalFormField } from './Fields/LegalFormField';
 import { LocalitiesField } from './Fields/LocalitiesField';
+import { MandatoryIncomeField } from './Fields/MandatoryIncome';
 import { MiddleNameField } from './Fields/MiddleNameField';
 import { NameField } from './Fields/NameField';
 import { OnlineCheckoutField } from './Fields/OnlineCheckoutField';
 import { OrganizationField } from './Fields/OrganizationField';
 import { OrganizationNameField } from './Fields/OrganizationNameField';
+import { OtherIncomeField } from './Fields/OtherIncomeField';
+import { OtherPaymentsField } from './Fields/OtherPayments';
 import { ParticipantAddressField } from './Fields/ParticipantAddressField';
 import { ParticipantDateRegistrationField } from './Fields/ParticipantDateRegistrationField';
 import { PartnerCommentsField } from './Fields/PartnerCommentsField';
@@ -58,9 +67,11 @@ import { PosTerminalField } from './Fields/PosTerminalField';
 import { ProductField } from './Fields/ProductField';
 import { RegionField } from './Fields/RegionField';
 import { RegionPremiumField } from './Fields/RegionPremiumField';
+import { RetirementIncomeField } from './Fields/RetirementIncomeField';
 import { SecondaryPhoneField } from './Fields/SecondaryPhoneField';
 import { ServiceDirectionField } from './Fields/ServiceDirectionField';
 import { SexField } from './Fields/SexField';
+import { ShareholderFlgField } from './Fields/ShareholderFlgField';
 import { SnilsField } from './Fields/SnilsField';
 import { SurnameField } from './Fields/SurnameField';
 import { TermField } from './Fields/TermField';
@@ -159,6 +170,16 @@ export const getField =
       dulIssuedBy: <DulIssuedByField field={field} input={input} />,
       participantAddress: <ParticipantAddressField field={field} input={input} />,
       participantDateRegistration: <ParticipantDateRegistrationField field={field} input={input} />,
+      retirementIncome: <RetirementIncomeField field={field} input={input} />,
+      otherIncome: <OtherIncomeField field={field} input={input} />,
+      mandatoryIncome: <MandatoryIncomeField field={field} input={input} />,
+      otherPayments: <OtherPaymentsField field={field} input={input} />,
+      disablePeopleFlg: <DisablePeopleFlgField field={field} input={input} />,
+      bankruptcyFlg: <BankruptcyFlgField field={field} input={input} />,
+      shareholderFlg: <ShareholderFlgField field={field} input={input} />,
+      legalEntityName: <LegalEntityNameField field={field} input={input} />,
+      creditInRshbCd: <CreditInRshbCdField field={field} input={input} />,
+      bankEmployeeCode: <BankEmpoleeCodeField field={field} input={input} />,
     };
 
     return isRenderField({ input, field }) ? (

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

@@ -82,6 +82,15 @@ export const validatorObj: Record<string, Validator> = {
   sex: defaultValidator('Укажите свой пол'),
   participantAddress: defaultValidator('Необходимо выбрать адрес'),
   participantDateRegistration: defaultValidator('Укажите дату регистрации'),
+  retirementIncome: defaultValidator(),
+  otherIncome: defaultValidator(),
+  mandatoryIncome: defaultValidator(),
+  otherPayments: defaultValidator(),
+  disablePeopleFlg: defaultValidator(),
+  bankruptcyFlg: defaultValidator(),
+  shareholderFlg: defaultValidator(),
+  legalEntityName: defaultValidator(),
+  bankEmployeeCode: defaultValidator(),
 };
 
 export const getObjectValidator = (inputs: FieldDef[]): Record<string, Validator> => {

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

@@ -55,7 +55,7 @@ const snilsValidate = (snils: string) => {
 
 export const snilsValidator = (errorMsg: string) => validator(snilsValidate)(errorMsg);
 
-const emailValidate = (email: string) => /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2}$/.test(email);
+const emailValidate = (email: string) => /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,4}$/.test(email);
 
 export const emailValidator = (errorMsg: string) =>
   validator((_: string) => emailValidate(_))(errorMsg);

package/mobile/src/ui-kit/InfoCard/InfoCard.tsx

@@ -11,7 +11,7 @@ interface InfoCardProps {
 }
 
 export const InfoCard = JSX<InfoCardProps>(({ __html, icon, iconVersion = 'black' }) => (
-  <div className="flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m justify-evenly p-m">
+  <div className="flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m">
     <div className="rounded-full bg-white p-xs">
       <Icon name={icon} width="24" height="24" iconVersion={iconVersion} />
     </div>

package/mobile/src/ui-kit/ProgressBar/ProgressBar.tsx

@@ -4,16 +4,19 @@ import { JSX } from '@redneckz/uni-jsx';
 interface ProgressBarProps {
   step?: number;
   description?: string;
+  showPercentage?: boolean;
 }
 
-export const ProgressBar = JSX<ProgressBarProps>(({ step = 10, description }) => (
-  <div>
-    <div className="h-4 w-full bg-gray relative">
-      <div className="h-4 bg-green" style={{ width: `${step}%` }} />
+export const ProgressBar = JSX<ProgressBarProps>(
+  ({ step = 10, description, showPercentage = true }) => (
+    <div>
+      <div className="h-4 w-full bg-gray relative">
+        <div className="h-4 bg-green" style={{ width: `${step}%` }} />
+      </div>
+      <div className="relative">
+        {showPercentage ? <div className="absolute left-2/4 text-green">{step}%</div> : null}
+        {description ? <div className="text-right mr-4 text-gray">{description}</div> : null}
+      </div>
     </div>
-    <div className="relative">
-      <div className="absolute left-2/4 text-green">{step}%</div>
-      {description ? <div className="text-right mr-4 text-gray">{description}</div> : null}
-    </div>
-  </div>
-));
+  ),
+);

package/package.json

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

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -58,11 +58,21 @@ export type FieldVedDef = FieldDefaultDef & {
   defaultValue?: VedTypes;
 };
 
+/**
+ * @title Текст для отображения в карточке информации
+ * @default {"fieldType": "info"}
+ */
+export type FieldInfoDef = FieldDefaultDef &
+  TextProps & {
+    /** @default "info" */
+    fieldType: 'info';
+  };
+
 /**
  * @title Поле
  * @default { "fieldType": "common" }
  */
-export type FieldDef = FieldCommonDef | FieldVedDef;
+export type FieldDef = FieldCommonDef | FieldVedDef | FieldInfoDef;
 
 /** @hidden */
 type TypeFormFieldDef =

package/src/components/ApplicationForm/renderInputs.tsx

@@ -0,0 +1,25 @@
+import { getField } from '../../ui-kit/FormField/getField';
+import type {
+  FieldDef,
+  GroupedConsentsProps,
+} from '../ApplicationLeadForm/ApplicationLeadFormContent';
+import { CONSENTS } from '../ApplicationLeadForm/consents';
+import { GroupedConsents } from '../ApplicationLeadForm/GroupedConsents';
+
+export 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/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/ApplicationLeadForm/useApplicationLeadApi.ts

@@ -65,7 +65,7 @@ export const useApplicationLeadApi = ({ inputs, programId, saveForm }: Applicati
 
         const acceptedConsents: string[] = Object.keys(CONSENTS)
           .filter((_) => formData[_])
-          .map((_) => CONSENTS[_]);
+          .map((_) => CONSENTS[_]?.text);
 
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const verifyPhoneDialog = useVerifyPhoneDialog({

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>
+    );
+  },
+);