@redneckz/wildless-cms-uni-blocks 0.14.609 → 0.14.617

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

@@ -4,44 +4,25 @@ import { style } from '../../utils/style';
 
 export interface StepsNavigationButtonsProps {
   step: number;
-  setStep: (step: number) => void;
   totalSteps: number;
+  onPrevStep?: () => void;
 }
 
-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>
-    );
-  },
-);
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
+  return (
+    <div className={'flex justify-between'}>
+      <Button
+        onClick={onPrevStep}
+        className={style('w-full @xl:w-auto')}
+        type="button"
+        version="secondary"
+        disabled={step === 1}
+      >
+        Назад
+      </Button>
+      <Button className={style('w-full @xl:w-auto')} type="submit">
+        Далее
+      </Button>
+    </div>
+  );
+});

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

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 /* eslint-disable max-len */
 
+//TODO: DO List
 export const stepsSectionsMap = {
   1: [
     {
@@ -33,24 +34,27 @@ export const stepsSectionsMap = {
         {
           fieldType: 'common',
           name: 'education',
-          required: true,
         },
       ],
     },
     {
       title: 'Адрес регистрации по месту жительства',
+      columns: 1,
+      inputs: [],
+    },
+    {
+      inputs: [{ fieldType: 'common', name: 'participantAddress', required: true, dadata: true }],
+    },
+    {
       columns: 2,
-      inputs: [
-        { fieldType: 'common', name: 'participantAddress', required: true },
-        { fieldType: 'common', name: 'participantAddress', required: true, dadata: true },
-      ],
+      inputs: [{ fieldType: 'common', name: 'participantDateRegistration', required: true }],
     },
     {
       title: 'Адрес фактического проживания (место пребывания РФ)',
       columns: 2,
       inputs: [
         { fieldType: 'common', name: 'fullAddress', required: true, dadata: true },
-        { fieldType: 'common', name: 'housing', required: true },
+        { fieldType: 'common', name: 'housing' },
       ],
     },
   ],
@@ -69,7 +73,7 @@ export const stepsSectionsMap = {
     },
     {
       inputs: [
-        { fieldType: 'common', name: 'employment', required: true },
+        { fieldType: 'common', name: 'employment' },
         { fieldType: 'common', name: 'organizationName', required: true, dadata: true },
       ],
     },
@@ -82,15 +86,15 @@ export const stepsSectionsMap = {
     },
     {
       inputs: [
-        { fieldType: 'common', name: 'organization', required: true },
-        { fieldType: 'common', name: 'amountWorkers', required: true },
+        { fieldType: 'common', name: 'organization', required: false },
+        { fieldType: 'common', name: 'amountWorkers', required: false },
       ],
     },
     {
       columns: 2,
       inputs: [
-        { fieldType: 'common', name: 'employerActivities', required: true },
-        { fieldType: 'common', name: 'employerOrganization', required: true },
+        { 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 },
@@ -101,7 +105,13 @@ export const stepsSectionsMap = {
       inputs: [
         { fieldType: 'common', name: 'phone', label: 'Телефон работодателя', required: true },
         { fieldType: 'common', name: 'beginDate', required: true },
-        { fieldType: 'common', name: 'positionOrganization', required: true },
+      ],
+    },
+    {
+      columns: 2,
+      inputs: [
+        { fieldType: 'common', name: 'positionOrganization', required: false },
+        { fieldType: 'common', name: 'partInBusiness', required: true },
       ],
     },
     {
@@ -118,20 +128,15 @@ export const stepsSectionsMap = {
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'familyStatus' }],
+      inputs: [{ fieldType: 'common', name: 'familyStatus', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'dependents' }],
+      inputs: [{ fieldType: 'common', name: 'dependents', required: true }],
     },
     {
-      columns: 2,
-      inputs: [
-        { fieldType: 'common', name: 'familyMembers' },
-        { fieldType: 'common', name: 'familyMembers' },
-        { fieldType: 'common', name: 'retirementIncome' },
-        { fieldType: 'common', name: 'otherIncome' },
-      ],
+      columns: 1,
+      inputs: [{ fieldType: 'common', name: 'familyMembers', required: true }],
     },
     {
       title: 'Совокупный доход',
@@ -146,15 +151,15 @@ export const stepsSectionsMap = {
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'mandatoryIncome' }],
+      inputs: [{ fieldType: 'common', name: 'mandatoryIncome', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'otherPayments' }],
+      inputs: [{ fieldType: 'common', name: 'otherPayments', required: true }],
     },
     {
       columns: 1,
-      inputs: [{ fieldType: 'common', name: 'snils' }],
+      inputs: [{ fieldType: 'common', name: 'snils', required: true }],
     },
     {
       columns: 2,
@@ -190,10 +195,10 @@ export const stepsSectionsMap = {
       inputs: [],
     },
     {
-      inputs: [{ fieldType: 'common', name: 'region' }],
+      inputs: [{ fieldType: 'common', name: 'region', required: true }],
     },
     {
-      inputs: [{ fieldType: 'common', name: 'addressBranch' }],
+      inputs: [{ fieldType: 'common', name: 'addressBranch', required: true }],
     },
     {
       title: 'Код представителя Банка',

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

@@ -0,0 +1,145 @@
+import type { Option } from '../../ui-kit/Select/Option';
+
+export interface FormStateMap {
+  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;
+    participantAddress?: string;
+    participantDateRegistration?: Date;
+    fullAddress?: string;
+    housing?: string;
+  };
+  2: {
+    employment?: Option;
+    organizationName?: string;
+    inn?: number;
+    legalForm?: string;
+    organization?: Option;
+    amountWorkers?: Option;
+    employerActivities?: Option;
+    employerOrganization?: Option;
+    lastJobExperience?: string;
+    experience5Years?: string;
+    jobsNumber?: string;
+    phone?: string;
+    beginDate?: Date;
+    positionOrganization?: Option;
+    partInBusiness?: number;
+    fullAddress?: string;
+  };
+  3: {
+    familyStatus?: Option;
+    dependents?: number;
+    familyMembers?: number;
+    mandatoryIncome?: number;
+    otherPayments?: number;
+    snils?: string;
+    armyIdFlg?: boolean;
+  };
+  4: {
+    disablePeopleFlg?: string;
+    bankruptcyFlg?: string;
+    shareholderFlg?: string;
+    legalEntityName?: string;
+    creditInRshbCd?: string;
+  };
+  5: {
+    region?: string;
+    addressBranch?: string;
+    bankEmployeeCode?: string;
+  };
+}
+
+const formStateMap: FormStateMap = {
+  1: {
+    surname: '',
+    name: '',
+    middleName: '',
+    sex: '',
+    birthday: undefined,
+    birthPlace: '',
+    phone: '',
+    email: '',
+    dulSerie: undefined,
+    dulNumber: undefined,
+    dulIssueDateField: undefined,
+    dulSubdivisionCode: '',
+    dulIssuedBy: '',
+    participantAddress: '',
+    participantDateRegistration: undefined,
+    fullAddress: '',
+    housing: '',
+  },
+  2: {
+    employment: { key: '', text: '' },
+    organizationName: '',
+    inn: undefined,
+    legalForm: '',
+    organization: { key: '', text: '' },
+    amountWorkers: { key: '', text: '' },
+    employerActivities: { key: '', text: '' },
+    employerOrganization: { key: '', text: '' },
+    lastJobExperience: '',
+    experience5Years: '',
+    jobsNumber: '',
+    phone: '',
+    beginDate: undefined,
+    positionOrganization: { key: '', text: '' },
+    partInBusiness: undefined,
+    fullAddress: '',
+  },
+  3: {
+    familyStatus: { key: '', text: '' },
+    dependents: undefined,
+    familyMembers: undefined,
+    mandatoryIncome: undefined,
+    otherPayments: undefined,
+    snils: '',
+    armyIdFlg: false,
+  },
+  4: {
+    disablePeopleFlg: '',
+    bankruptcyFlg: '',
+    shareholderFlg: '',
+    legalEntityName: '',
+    creditInRshbCd: '',
+  },
+  5: {
+    region: '',
+    addressBranch: '',
+    bankEmployeeCode: '',
+  },
+};
+
+export const getInitialFormState = <Step extends keyof FormStateMap>(
+  step: Step,
+  localStorageData: Record<string, any> | null,
+): FormStateMap[Step] => {
+  if (localStorageData) {
+    // TODO: Fill in for other fields with type Date
+    // TODO: Take it out to the helper
+    localStorageData.birthday = localStorageData.dulIssueDateField = new Date(
+      (localStorageData?.birthday as string) || Date.now(),
+    );
+    localStorageData.participantDateRegistration = new Date(
+      (localStorageData?.participantDateRegistration as string) || Date.now(),
+    );
+    localStorageData.beginDate = new Date((localStorageData?.beginDate as string) || Date.now());
+  }
+
+  return {
+    ...formStateMap[step],
+    ...localStorageData,
+  };
+};

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

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

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

@@ -0,0 +1,36 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+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 './getInitialFormState';
+
+type CreditFormApiProps = {
+  inputs: FieldDef[];
+  onNextStep: () => void;
+  saveStep: (value: Record<string, any>) => void;
+};
+
+export const useCreditFormApi = ({ inputs, onNextStep, saveStep }: CreditFormApiProps) => {
+  const handleSubmit = useCallback(async (formData: FormStateMap[keyof FormStateMap]) => {
+    const feedbackValidator = objectValidator(getObjectValidator(inputs));
+    if (!isValidationSuccess(feedbackValidator(formData))) {
+      return 'Fail';
+    }
+
+    try {
+      // TODO: add updateUserTask here
+    } catch (ex) {
+      return 'Fail';
+    }
+
+    saveStep(formData);
+    onNextStep();
+
+    return 'OK';
+  }, []);
+
+  return {
+    handleSubmit,
+  };
+};

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

@@ -10,9 +10,9 @@ import { type ControlProps } from '../ControlProps';
 import { Icon } from '../Icon/Icon';
 import { type IconName } from '../Icon/IconProps';
 import { renderLabel } from '../Input/renderLabel';
-import { Paragraph } from '../Paragraph/Paragraph';
 import { Select } from '../Select/Select';
 import { Calendar } from './Calendar';
+import { DatePickerInput } from './DatePickerInput';
 import { months } from './months';
 import { useDatePickerManager } from './useDatePickerManager';
 
@@ -30,7 +30,7 @@ const SELECT_PROPS: { className: string; iconVersion: IconVersion; isBorder: boo
 };
 
 const formStyle =
-  'flex justify-between items-center h-14 px-m py-s border rounded-md cursor-pointer ' +
+  '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 {
@@ -41,6 +41,7 @@ interface DatePickerProps extends ControlProps<Date>, LabelProps {
 }
 
 export const DatePicker = JSX<DatePickerProps>(
+  // eslint-disable-next-line max-lines-per-function
   ({ className = '', label = '', value, valid = true, minDate, maxDate, onChange }) => {
     const [showCalendar, { setValue }] = useBool(false);
     const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
@@ -64,6 +65,8 @@ export const DatePicker = JSX<DatePickerProps>(
       selectedYear,
       selectedMonth,
       showCalendar,
+      onChange,
+      value,
     });
 
     const spaceAbove = useElementSpace(ref, 370);
@@ -72,7 +75,14 @@ export const DatePicker = JSX<DatePickerProps>(
       <div className={style('space-y-xs', className)} ref={ref}>
         {renderLabel(label)}
         <div className="relative">
-          {renderDatePickerForm(handleChangeVisibleCalendar, value, valid)}
+          {renderDatePickerForm({
+            handleChangeVisibleCalendar,
+            value,
+            valid,
+            onChange,
+            setSelectedMonth,
+            setSelectedYear,
+          })}
           {showCalendar ? (
             <div
               className={style('absolute bg-white z-20 select-none', {
@@ -116,16 +126,27 @@ export const DatePicker = JSX<DatePickerProps>(
   },
 );
 
-const renderDatePickerForm = (
-  handleChangeVisibleCalendar: () => void,
-  value: Date | undefined,
-  valid: boolean,
-) => (
-  <div
+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')}
-  >
-    <Paragraph>{value && formatDate(value)}</Paragraph>
-    <Icon {...ICON_PROPS} name="CalendarIcon" />
-  </div>
+  ></DatePickerInput>
 );

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

@@ -0,0 +1,100 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type IconVersion } from '../../model/IconVersion';
+import { normalizeWithMask } from '../../utils/normalizeWithMask';
+import { style } from '../../utils/style';
+import { Icon } from '../Icon/Icon';
+import { type IconName } from '../Icon/IconProps';
+import { START_YEAR } from './getYears';
+
+const ICON_PROPS: { name: IconName; iconVersion: IconVersion; width: string; height: string } = {
+  name: 'CalendarIcon',
+  iconVersion: 'black',
+  width: '24',
+  height: '24',
+};
+
+interface DatePickerInputProps {
+  setSelectedMonth: (selectedMonth: number) => void;
+  setSelectedYear: (selectedYear: number) => void;
+  className?: string;
+  value?: string;
+  onChange?: (value: Date) => void;
+  onClick?: () => void;
+}
+
+export const DatePickerInput = JSX<DatePickerInputProps>(
+  ({ setSelectedMonth, setSelectedYear, className, value, onChange, onClick }) => {
+    const ref = useRef<HTMLInputElement | null>(null);
+    const [inputValue, setInputValue] = useState<string>(value || '');
+
+    const handleChange = (ev: { target?: { value?: string } }) => {
+      const val = ev.target?.value;
+      if (typeof val === 'string' && val?.length < 11) {
+        setInputValue(normalizeWithMask(val, '__.__.____'));
+      }
+    };
+
+    const onBlur = () => {
+      if (checkIsValidDate(inputValue)) {
+        const [day, month, year] = inputValue.split('.');
+        onChange?.(new Date(Number(year), Number(month) - 1, Number(day)));
+        setSelectedMonth(Number(month) - 1);
+        setSelectedYear(Number(year));
+      } else {
+        setInputValue(value || '');
+      }
+    };
+
+    const onInputClick = () => {
+      if (ref.current !== null) {
+        ref.current.focus();
+      }
+      onClick?.();
+    };
+
+    useEffect(() => {
+      setInputValue(value || '');
+    }, [value]);
+
+    return (
+      <div onClick={onInputClick} className={style('relative', className)}>
+        <input
+          ref={ref}
+          className="h-full w-full px-m text-l text-black focus-visible:outline-none"
+          value={inputValue}
+          type="text"
+          onChange={handleChange}
+          onBlur={onBlur}
+        />
+        <Icon className="mr-s" {...ICON_PROPS} />
+      </div>
+    );
+  },
+);
+
+const isValidYear = (year: string) =>
+  Number(year) >= START_YEAR && Number(year) <= new Date().getFullYear();
+
+const isValidMonth = (month: string) => Number(month) > 0 && Number(month) < 13;
+
+const checkIsValidDate = (date: string) => {
+  const [day, month, year] = date.split('.');
+
+  if (isValidYear(year)) {
+    if (isValidMonth(month)) {
+      const currentDate = new Date(Number(year), Number(month) - 1, 1);
+      let maxDateOfMonth = 0;
+      while (currentDate.getMonth() === Number(month) - 1) {
+        currentDate.setDate(currentDate.getDate() + 1);
+        maxDateOfMonth++;
+      }
+
+      if (Number(day) > 0 && Number(day) <= maxDateOfMonth) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};

package/mobile/src/ui-kit/DatePicker/getYears.ts

@@ -1,4 +1,4 @@
-const START_YEAR = 1940;
+export const START_YEAR = 1940;
 
 export const getYears = () =>
   Array.from({ length: new Date().getFullYear() - START_YEAR + 1 }, (_, i) => START_YEAR + i);

package/mobile/src/ui-kit/DatePicker/useDatePickerManager.ts

@@ -17,6 +17,8 @@ interface UseDatePickerManagerParams {
   onMonthSelect: (num: number) => void;
   selectedYear: number;
   onYearSelect: (num: number) => void;
+  onChange?: (date: Date) => void;
+  value?: Date;
 }
 
 export const useDatePickerManager = ({
@@ -26,6 +28,8 @@ export const useDatePickerManager = ({
   onMonthSelect,
   onYearSelect,
   selectedYear,
+  onChange,
+  value,
 }: UseDatePickerManagerParams) => {
   const close = useCallback(() => showCalendar && onShowCalendar(false), [showCalendar]);
   const ref = useOutsideClick<HTMLDivElement>(close);
@@ -54,10 +58,26 @@ export const useDatePickerManager = ({
   }, [selectedMonth]);
 
   const handleSelectMonth = useCallback(
-    ({ key }: Option) => onMonthSelect(months.indexOf(key)),
-    [],
+    ({ key }: Option) => {
+      onMonthSelect(months.indexOf(key));
+      const maxDateOfMonth = calculateMaxDaysOfMonth(selectedYear, months.indexOf(key));
+      handleChangeMonth({
+        maxDateOfMonth,
+        selectedYear,
+        selectedMonth: months.indexOf(key),
+        value,
+        onChange,
+      });
+    },
+    [value],
+  );
+  const handleSelectYear = useCallback(
+    ({ key }: Option) => {
+      onYearSelect(Number(key));
+      value && onChange?.(new Date(Number(key), selectedMonth, value?.getDate()));
+    },
+    [value],
   );
-  const handleSelectYear = useCallback(({ key }: Option) => onYearSelect(Number(key)), []);
 
   return {
     handleChangeVisibleCalendar,
@@ -70,3 +90,31 @@ export const useDatePickerManager = ({
     ref,
   };
 };
+
+const calculateMaxDaysOfMonth = (selectedYear: number, selectedMonth: number) => {
+  const date = new Date(selectedYear, selectedMonth, 1);
+  let maxDateOfMonth = 0;
+  while (date.getMonth() === selectedMonth) {
+    maxDateOfMonth++;
+    date.setDate(date.getDate() + 1);
+  }
+
+  return maxDateOfMonth;
+};
+
+const handleChangeMonth = ({
+  maxDateOfMonth,
+  selectedYear,
+  selectedMonth,
+  value,
+  onChange,
+}: {
+  maxDateOfMonth: number;
+  selectedYear: number;
+  selectedMonth: number;
+  value?: Date;
+  onChange?: (value: Date) => void;
+}) => {
+  value &&
+    onChange?.(new Date(selectedYear, selectedMonth, Math.min(maxDateOfMonth, value.getDate())));
+};

package/mobile/src/ui-kit/FormField/Fields/DependentsField.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { InputControl } from '../../Input/InputControl';
+import { InputNumberControl } from '../../Input/InputNumberControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
 
 export const DependentsField = JSX<CustomFieldProps>(({ field, input }) => (
-  <InputControl
+  <InputNumberControl
     label="Количество иждивенцев"
     placeholder="За исключение детей до 18 лет"
-    type="number"
+    inputLength={2}
     {...getValidation(field('dependents'), validatorObj.dependents, input?.required)}
     {...input}
   />