@redneckz/wildless-cms-uni-blocks 0.14.647 → 0.14.649

package/src/components/CreditForm/creditFormStepsData.tsx

@@ -12,11 +12,17 @@ export const stepsSectionsMap: SectionsProps[][] = [
       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: '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 },
+        { 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 },
@@ -26,18 +32,31 @@ export const stepsSectionsMap: SectionsProps[][] = [
       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 },
+        { 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 },
+        {
+          fieldType: 'common',
+          name: 'dulIssuedBy',
+          required: true,
+          dadata: true,
+          filledByEsia: true,
+        },
         {
           fieldType: 'common',
           name: 'education',
+          required: true,
         },
       ],
     },
@@ -48,7 +67,13 @@ export const stepsSectionsMap: SectionsProps[][] = [
     },
     {
       inputs: [
-        { fieldType: 'common', name: 'addressRegistration', required: true, dadata: true },
+        {
+          fieldType: 'common',
+          name: 'addressRegistration',
+          required: true,
+          dadata: true,
+          filledByEsia: true,
+        },
         { fieldType: 'common', name: 'addressMatch' },
       ],
     },
@@ -62,7 +87,7 @@ export const stepsSectionsMap: SectionsProps[][] = [
     },
     {
       columns: 2,
-      inputs: [{ fieldType: 'common', name: 'housing' }],
+      inputs: [{ fieldType: 'common', name: 'housing', required: true }],
     },
     {
       inputs: [{ fieldType: 'common', name: 'addressFact', required: true, dadata: true }],
@@ -152,7 +177,7 @@ export const stepsSectionsMap: SectionsProps[][] = [
     {
       columns: 2,
       inputs: [
-        { fieldType: 'common', name: 'familyMembers', required: true },
+        { fieldType: 'common', name: 'familyMembers' },
         { fieldType: 'common', name: 'children', required: true },
       ],
     },
@@ -167,6 +192,10 @@ export const stepsSectionsMap: SectionsProps[][] = [
         },
       ],
     },
+    {
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'confirmationIncome', required: true }],
+    },
     {
       columns: 1,
       inputs: [{ fieldType: 'common', name: 'mandatoryIncome', required: true }],

package/src/components/CreditForm/formStateMap.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import type { Option } from '../../ui-kit/Select/Option';
 import { type Address } from '../ApplicationLeadForm/getInitialFormState';
 
@@ -52,6 +53,7 @@ export interface FormStateMap {
     familyStatus?: Option;
     dependents?: number;
     familyMembers?: number;
+    confirmationIncome?: Option;
     mandatoryIncome?: number;
     otherPayments?: number;
     snils?: string;
@@ -131,6 +133,7 @@ export const formStateMap: FormStateMap = {
     familyStatus: { key: '', text: '' },
     dependents: undefined,
     familyMembers: undefined,
+    confirmationIncome: { key: '', text: '' },
     mandatoryIncome: undefined,
     otherPayments: undefined,
     snils: '',

package/src/components/CreditForm/getThirdStepData.ts

@@ -7,6 +7,7 @@ export const getThirdStepData = (formData: FormState): Partial<Participant> => {
     familyStatus,
     dependents,
     familyMembers,
+    confirmationIncome,
     mandatoryIncome,
     otherPayments,
     snils,
@@ -16,6 +17,7 @@ export const getThirdStepData = (formData: FormState): Partial<Participant> => {
   return {
     maritalStatusCd: familyStatus,
     totalDependents: familyMembers,
+    incomeCertificateCd: confirmationIncome,
     otherDependents: dependents,
     participantIncomes: getParticipantIncomes({
       mandatoryIncome,

package/src/model/DefaultControlType.ts

@@ -4,4 +4,5 @@ export interface DefaultControlType {
   error?: string;
   errors?: string[];
   placeholder?: string;
+  disabled?: boolean;
 }

package/src/ui-kit/DatePicker/DatePicker.tsx

@@ -4,7 +4,6 @@ import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { useElementSpace } from '../../hooks/useElementSpace';
 import { type LabelProps } from '../../model/HeadlineType';
 import { type IconVersion } from '../../model/IconVersion';
-import { formatDate } from '../../utils/formatDate';
 import { style } from '../../utils/style';
 import { type ControlProps } from '../ControlProps';
 import { Icon } from '../Icon/Icon';
@@ -12,8 +11,8 @@ import { type IconName } from '../Icon/IconProps';
 import { renderLabel } from '../Input/renderLabel';
 import { Select } from '../Select/Select';
 import { Calendar } from './Calendar';
-import { DatePickerInput } from './DatePickerInput';
 import { months } from './months';
+import { renderDatePickerForm } from './renderDatePickerForm';
 import { useDatePickerManager } from './useDatePickerManager';
 
 const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; height: string } = {
@@ -29,20 +28,17 @@ const SELECT_PROPS: { className: string; iconVersion: IconVersion; isBorder: boo
   isBorder: false,
 };
 
-const formStyle =
-  'flex justify-between items-center h-14 py-s border rounded-md cursor-pointer ' +
-  'hover:border-black active:border-black focus:border-black';
-
 interface DatePickerProps extends ControlProps<Date>, LabelProps {
   className?: string;
   minDate?: Date;
   maxDate?: Date;
   valid?: boolean;
+  disabled?: boolean;
 }
 
 export const DatePicker = JSX<DatePickerProps>(
   // eslint-disable-next-line max-lines-per-function
-  ({ className = '', label = '', value, valid = true, minDate, maxDate, onChange }) => {
+  ({ className = '', label = '', value, valid = true, minDate, maxDate, disabled, onChange }) => {
     const [showCalendar, { setValue }] = useBool(false);
     const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
     const [selectedYear, setSelectedYear] = useState(
@@ -80,10 +76,11 @@ export const DatePicker = JSX<DatePickerProps>(
             value,
             valid,
             onChange,
+            disabled,
             setSelectedMonth,
             setSelectedYear,
           })}
-          {showCalendar ? (
+          {showCalendar && !disabled ? (
             <div
               className={style('absolute bg-white z-20 select-none', {
                 'bottom-full': spaceAbove,
@@ -125,28 +122,3 @@ export const DatePicker = JSX<DatePickerProps>(
     );
   },
 );
-
-const renderDatePickerForm = ({
-  handleChangeVisibleCalendar,
-  value,
-  valid,
-  onChange,
-  setSelectedMonth,
-  setSelectedYear,
-}: {
-  handleChangeVisibleCalendar: () => void;
-  value: Date | undefined;
-  valid: boolean;
-  setSelectedMonth: (selectedMonth: number) => void;
-  setSelectedYear: (selectedYear: number) => void;
-  onChange?: (value: Date) => void;
-}) => (
-  <DatePickerInput
-    onChange={onChange}
-    onClick={handleChangeVisibleCalendar}
-    value={value && formatDate(value)}
-    setSelectedMonth={setSelectedMonth}
-    setSelectedYear={setSelectedYear}
-    className={style(formStyle, valid ? 'border-gray' : 'border-error')}
-  ></DatePickerInput>
-);

package/src/ui-kit/DatePicker/DatePickerInput.tsx

@@ -21,10 +21,11 @@ interface DatePickerInputProps {
   value?: string;
   onChange?: (value: Date) => void;
   onClick?: () => void;
+  disabled?: boolean;
 }
 
 export const DatePickerInput = JSX<DatePickerInputProps>(
-  ({ setSelectedMonth, setSelectedYear, className, value, onChange, onClick }) => {
+  ({ setSelectedMonth, setSelectedYear, className, value, disabled, onChange, onClick }) => {
     const ref = useRef<HTMLInputElement | null>(null);
     const [inputValue, setInputValue] = useState<string>(value || '');
 
@@ -66,8 +67,9 @@ export const DatePickerInput = JSX<DatePickerInputProps>(
           type="text"
           onChange={handleChange}
           onBlur={onBlur}
+          disabled={disabled}
         />
-        <Icon className="mr-s" {...ICON_PROPS} />
+        {disabled ? null : <Icon className="mr-s" {...ICON_PROPS} />}
       </div>
     );
   },

package/src/ui-kit/DatePicker/renderDatePickerForm.tsx

@@ -0,0 +1,35 @@
+import { formatDate } from '../../utils/formatDate';
+import { style } from '../../utils/style';
+import { DatePickerInput } from './DatePickerInput';
+
+const formStyle =
+  'flex justify-between items-center h-14 border rounded-md cursor-pointer ' +
+  'hover:border-black active:border-black focus:border-black';
+
+export const renderDatePickerForm = ({
+  handleChangeVisibleCalendar,
+  value,
+  valid,
+  onChange,
+  setSelectedMonth,
+  setSelectedYear,
+  disabled = false,
+}: {
+  handleChangeVisibleCalendar: () => void;
+  value: Date | undefined;
+  valid: boolean;
+  setSelectedMonth: (selectedMonth: number) => void;
+  setSelectedYear: (selectedYear: number) => void;
+  onChange?: (value: Date) => void;
+  disabled?: boolean;
+}) => (
+  <DatePickerInput
+    onChange={onChange}
+    disabled={disabled}
+    onClick={handleChangeVisibleCalendar}
+    value={value && formatDate(value)}
+    setSelectedMonth={setSelectedMonth}
+    setSelectedYear={setSelectedYear}
+    className={style(formStyle, valid ? 'border-gray' : 'border-error')}
+  ></DatePickerInput>
+);

package/src/ui-kit/FormField/Fields/AddressField.tsx

@@ -6,6 +6,7 @@ import { calculateIsRequired } from '../calculateIsRequired';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { isEsiaAuthorize } from '../isEsiaAuthorize';
 
 export const AddressField = JSX<CustomFieldProps>(({ field, input }) => {
   const fieldName = input?.name || 'addressRegistration';
@@ -40,6 +41,7 @@ export const AddressField = JSX<CustomFieldProps>(({ field, input }) => {
 
   return (
     <InputControl
+      disabled={fieldName === 'addressRegistration' && isEsiaAuthorize() && input?.filledByEsia}
       label="Адрес"
       {...getValidation(
         field(fieldName),

package/src/ui-kit/FormField/Fields/ConfirmationIncomeField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLeadFormData } from '../../../hooks/useLeadFormData';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { SelectField } from '../SelectField';
+
+export const ConfirmationIncomeField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { data: confirmationIncome } = useLeadFormData('INCOME_CERT_UNITED');
+
+  return (
+    <SelectField
+      field={field}
+      source={confirmationIncome}
+      label="Способ подтверждения дохода"
+      fieldName="confirmationIncome"
+      input={input}
+    />
+  );
+});

package/src/ui-kit/FormField/Fields/DulIssueDateField.tsx

@@ -3,10 +3,12 @@ import { DatePickerControl } from '../../DatePicker/DatePickerControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { isEsiaAuthorize } from '../isEsiaAuthorize';
 
 export const DulIssueDateField = JSX<CustomFieldProps>(({ field, input }) => (
   <DatePickerControl
     label="Дата выдачи"
     {...getValidation(field('dulIssueDateField'), validatorObj.dulIssueDateField, input?.required)}
+    disabled={isEsiaAuthorize() && input?.filledByEsia}
   />
 ));

package/src/ui-kit/FormField/Fields/DulIssuedByField.tsx

@@ -5,6 +5,7 @@ import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { isEsiaAuthorize } from '../isEsiaAuthorize';
 
 export const DulIssuedByField = JSX<CustomFieldProps>(({ field, input }) => {
   const { value: dulSubdivisionCode, onChange: changeDulSubdivisionCode } =
@@ -16,6 +17,7 @@ export const DulIssuedByField = JSX<CustomFieldProps>(({ field, input }) => {
 
   return (
     <InputControl
+      disabled={isEsiaAuthorize() && input?.filledByEsia}
       label="Кем выдан"
       {...input}
       {...getValidation(field('dulIssuedBy'), validatorObj.dulIssuedBy, input?.required)}

package/src/ui-kit/FormField/Fields/DulNumberField.tsx

@@ -3,9 +3,11 @@ import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { isEsiaAuthorize } from '../isEsiaAuthorize';
 
 export const DulNumberField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
+    disabled={isEsiaAuthorize() && input?.filledByEsia}
     label="Номер документа"
     type="number"
     inputLength={6}

package/src/ui-kit/FormField/Fields/DulSerieField.tsx

@@ -3,9 +3,11 @@ import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { isEsiaAuthorize } from '../isEsiaAuthorize';
 
 export const DulSerieField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
+    disabled={isEsiaAuthorize() && input?.filledByEsia}
     label="Серия документа"
     type="number"
     inputLength={4}

package/src/ui-kit/FormField/Fields/DulSubdivisionCodeField.tsx

@@ -5,6 +5,7 @@ import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { isEsiaAuthorize } from '../isEsiaAuthorize';
 
 export const DulSubdivisionCodeField = JSX<CustomFieldProps>(({ field, input }) => {
   const onDaDataChange = useCallback((item: DaDataSuggestion) => {
@@ -13,6 +14,7 @@ export const DulSubdivisionCodeField = JSX<CustomFieldProps>(({ field, input })
 
   return (
     <InputControl
+      disabled={isEsiaAuthorize() && input?.filledByEsia}
       label="Код подразделения"
       type="number"
       inputLength={6}

package/src/ui-kit/FormField/Fields/FamilyMembersField.tsx

@@ -1,16 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
-import { validatorObj } from '../getObjectValidator';
-import { getValidation } from '../getValidation';
 
-export const FamilyMembersField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
-    label="Количество членов семьи"
-    placeholder="Введите значение"
-    type="number"
-    inputLength={2}
-    {...getValidation(field('familyMembers'), validatorObj.familyMembers, input?.required)}
-    {...input}
-  />
-));
+export const FamilyMembersField = JSX<CustomFieldProps>(({ field }) => {
+  const { value, onChange } = field('familyMembers');
+  const adultsCount = field('familyStatus')?.value?.key === 'В браке' ? 2 : 1;
+  const childrenCount = Number(field('children')?.value);
+  const dependentsCount = Number(field('dependents')?.value);
+  const totalCount = adultsCount + childrenCount + dependentsCount;
+
+  useEffect(() => {
+    field?.('familyMembers')?.onChange?.(totalCount);
+  }, [field('familyStatus')?.value?.key, childrenCount, dependentsCount]);
+
+  return (
+    <InputControl
+      label="Количество членов семьи"
+      placeholder="Введите значение"
+      type="number"
+      disabled={true}
+      value={value}
+      onChange={(_) => onChange?.(_)}
+    />
+  );
+});

package/src/ui-kit/FormField/Fields/MiddleNameField.tsx

@@ -3,10 +3,13 @@ import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { isEsiaAuthorize } from '../isEsiaAuthorize';
 
 export const MiddleNameField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Отчество (Обязательно, при наличии)"
+    inputLength={60}
+    disabled={isEsiaAuthorize() && input?.filledByEsia}
     {...getValidation(field('middleName'), validatorObj.middleName)}
     {...input}
   />

package/src/ui-kit/FormField/Fields/NameField.tsx

@@ -3,10 +3,13 @@ import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { isEsiaAuthorize } from '../isEsiaAuthorize';
 
 export const NameField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Имя"
+    inputLength={60}
+    disabled={isEsiaAuthorize() && input?.filledByEsia}
     {...getValidation(field('name'), validatorObj.name, input?.required)}
     {...input}
   />

package/src/ui-kit/FormField/Fields/SurnameField.tsx

@@ -3,10 +3,13 @@ import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { isEsiaAuthorize } from '../isEsiaAuthorize';
 
 export const SurnameField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Фамилия"
+    inputLength={60}
+    disabled={isEsiaAuthorize() && input?.filledByEsia}
     {...getValidation(field('surname'), validatorObj.surname, input?.required)}
     {...input}
   />

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

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

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

@@ -24,6 +24,7 @@ import { ChildrenField } from './Fields/ChildrenField';
 import { CodeWordField } from './Fields/CodeWordField';
 import { CollectionCountField } from './Fields/CollectionCountField';
 import { CommentField } from './Fields/CommentField';
+import { ConfirmationIncomeField } from './Fields/ConfirmationIncomeField';
 import { ConscriptionField } from './Fields/ConscriptionField';
 import { ConsentField } from './Fields/ConsentField';
 import { CreditInRshbCdField } from './Fields/CreditInRshbCdField';
@@ -195,6 +196,7 @@ export const getField =
       currency: <CurrencyField field={field} input={input} />,
       cardCategory: <CardCategoryField field={field} input={input} />,
       codeWord: <CodeWordField field={field} input={input} />,
+      confirmationIncome: <ConfirmationIncomeField field={field} input={input} />,
     };
 
     return isRenderField({ input, field }) ? (

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

@@ -99,6 +99,7 @@ export const validatorObj: Record<string, Validator> = {
   addressRetail: defaultSelectValidator('Выберите адрес банка'),
   addressMatch: defaultValidator(),
   codeWord: codeWordValidator('Необходимо ввести кодовое слово'),
+  confirmationIncome: defaultValidator(),
 };
 
 export const getObjectValidator = (inputs: FieldDef[]): Record<string, Validator> => {

package/src/ui-kit/FormField/isEsiaAuthorize.ts

@@ -0,0 +1,2 @@
+export const isEsiaAuthorize = () =>
+  JSON.parse(globalThis.localStorage?.getItem('leadForm') ?? '{}')?.esiaId;

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

@@ -18,8 +18,8 @@ export const jobNumberValidator = (errorMsg?: string) =>
 export const nameValidator = (errorMsg?: string) =>
   validator((_) => typeof _ === 'string' && _.length > 1)(errorMsg ?? ERROR_MESSAGE);
 
-export const lengthStringValidator = (maxLength: number, errorMsg?: string) =>
-  validator((_) => typeof _ === 'string' && _.length >= 1 && _.length <= maxLength)(
+export const lengthStringValidator = (inputLength: number, errorMsg?: string) =>
+  validator((_) => typeof _ === 'string' && _.length >= 1 && _.length <= inputLength)(
     errorMsg ?? ERROR_MESSAGE,
   );