@redneckz/wildless-cms-uni-blocks 0.14.766 → 0.14.768

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

@@ -2,15 +2,96 @@ import { type FieldValidatorsMap } from '../../hooks/useForm/FormOptions';
 import { type Validator } from '../../validation/validator';
 import { type BaseFieldDef } from './BaseFieldDef';
 import {
+  addressDaDataValidator,
+  addressOrganizationValidator,
   agreementValidator,
+  codeWordValidator,
   defaultSelectValidator,
   defaultValidator,
   emailValidator,
   innValidator,
+  jobNumberValidator,
+  lengthStringValidator,
+  limitedBirthdayValidator,
   nameValidator,
+  numberValidator,
   phoneValidator,
+  serieValidator,
+  snilsValidator,
 } from './validators';
 
+const validatorConsentsObj: Record<string, Validator> = {
+  processPersonalDataFlg: agreementValidator,
+  consentProviderFlg: agreementValidator,
+  consentInformFlg: agreementValidator,
+  consentPfrFlg: agreementValidator,
+  consentOthersFlg: agreementValidator,
+};
+
+const validatorCreditCardObj: Record<string, Validator> = {
+  addressCourier: addressDaDataValidator(),
+  paymentSystem: defaultValidator('Укажите тип платежной системы'),
+  currency: defaultValidator('Укажите валюту'),
+  cardCategory: defaultValidator('Укажите категорию карты'),
+  codeWord: codeWordValidator('Необходимо ввести кодовое слово'),
+  confirmationIncome: defaultSelectValidator(),
+  methodObtain: defaultValidator(),
+  deliveryDate: defaultValidator('Укажите дату доставки'),
+};
+
+const validatorRetailObj: Record<string, Validator> = {
+  organization: defaultSelectValidator('Выберите тип организации'),
+  organizationAddress: addressOrganizationValidator(),
+  organizationPhone: phoneValidator('Укажите номер телефона'),
+  organizationName: defaultValidator('Укажите наименование организации'),
+  legalForm: defaultValidator('Укажите ОПФ'),
+  generalSeniority: jobNumberValidator('Укажите количество лет стажа'),
+  lastJobExperience: jobNumberValidator('Укажите стаж на последнем месте работы'),
+  experience5Years: jobNumberValidator('Укажите общий стаж за последние 5 лет'),
+  jobsNumber: jobNumberValidator('Укажите количество мест работы за последние 5 лет'),
+  beginDate: defaultValidator('Укажите дату заключения трудового договора'),
+  addressFact: addressDaDataValidator(),
+  addressRegistration: addressDaDataValidator(),
+  addressRetail: defaultSelectValidator('Выберите адрес банка'),
+  addressMatch: defaultValidator(),
+  sex: defaultValidator('Укажите свой пол'),
+  limitedBirthday: limitedBirthdayValidator(),
+  birthPlace: defaultValidator('Укажите место рождения'),
+  education: defaultSelectValidator('Выберите ваше образование'),
+  housing: defaultSelectValidator('Выберите тип жилья'),
+  amountWorkers: defaultSelectValidator('Выберите информацию о количестве сотрудников'),
+  employment: defaultSelectValidator('Выберите информацию о трудоустройстве'),
+  employerActivities: defaultSelectValidator('Выберите вид деятельности организации'),
+  employerOrganization: defaultSelectValidator('Выберите вид организации'),
+  positionOrganization: defaultSelectValidator('Выберите вашу должность'),
+  familyStatus: defaultSelectValidator('Выберите семейное положение'),
+  familyMembers: lengthStringValidator(2, 'Укажите количество членов семьи'),
+  children: lengthStringValidator(2, 'Укажите количество детей'),
+  dependents: lengthStringValidator(2, 'Укажите количество иждивенцев'),
+  totalIncome: lengthStringValidator(19, 'Укажите среднемесячный доход от основной зарплаты'),
+  expenses: lengthStringValidator(10, 'Укажите сумму обязательных выплат'),
+  snils: snilsValidator('Некорректный номер СНИЛС'),
+  conscription: defaultValidator(),
+  armyIdFlg: agreementValidator,
+  dulSerie: serieValidator('Укажите серию паспорта'),
+  dulNumber: numberValidator('Укажите номер паспорта'),
+  dulIssueDate: defaultValidator('Укажите дату выдачи паспорта'),
+  dulSubdivisionCode: numberValidator('Укажите код подразделения'),
+  dulIssuedBy: defaultValidator('Укажите организацию, выдавшую паспорт'),
+  participantDateRegistration: defaultValidator('Укажите дату регистрации'),
+  retirementIncome: defaultValidator(),
+  otherIncome: defaultValidator(),
+  wages: defaultValidator(),
+  mandatoryPayments: defaultValidator(),
+  disablePeopleFlg: defaultValidator(),
+  bankruptcyFlg: defaultValidator(),
+  shareholderFlg: defaultValidator(),
+  legalEntityName: defaultValidator(),
+  bankEmployeeCode: defaultValidator(),
+  partInBusiness: defaultValidator(),
+  regionRetail: defaultSelectValidator('Выберите регион'),
+};
+
 export const validatorObj: Record<string, Validator> = {
   fullName: defaultValidator(),
   addressBranch: defaultSelectValidator(),
@@ -40,37 +121,33 @@ export const validatorObj: Record<string, Validator> = {
   typeForm: defaultValidator(),
   consentToReceiveMaterials: agreementValidator,
   consentDataProcessing: agreementValidator,
+  ...validatorConsentsObj,
+  ...validatorRetailObj,
+  ...validatorCreditCardObj,
 };
 
 export const getFormValidator = <FormState extends Record<string, any>, F extends BaseFieldDef>(
   fieldDefs: F[],
-  externalValidatorObj: Record<string, Validator> = {},
 ): ((_: FormState) => FieldValidatorsMap<FormState>) => {
   const requiredFields = fieldDefs.filter((_) => Boolean(_?.required && _?.name));
-  const validator = { ...validatorObj, ...externalValidatorObj };
 
   const hasConditions = requiredFields.some((_) => _.condition?.values);
   const requiredFieldValidatorsMap: FieldValidatorsMap<FormState> = Object.fromEntries(
-    requiredFields
-      .filter(byNonEmptyValidator(validator))
-      .map(({ name }) => [name, validator[name ?? '']]),
+    requiredFields.filter(byNonEmptyValidator).map(({ name }) => [name, validatorObj[name ?? '']]),
   );
 
   return (formState) =>
     hasConditions
       ? Object.fromEntries(
           requiredFields
-            .filter(byNonEmptyValidator(validator))
+            .filter(byNonEmptyValidator)
             .filter(byCondition(formState))
-            .map(({ name }) => [name, validator[name ?? '']]),
+            .map(({ name }) => [name, validatorObj[name ?? '']]),
         )
       : requiredFieldValidatorsMap;
 };
 
-const byNonEmptyValidator =
-  (validator: Record<string, Validator> = {}) =>
-  ({ name }: BaseFieldDef): boolean =>
-    Boolean(validator[name ?? '']);
+const byNonEmptyValidator = ({ name }: BaseFieldDef): boolean => Boolean(validatorObj[name ?? '']);
 
 const byCondition =
   <FormState extends Record<string, any>>(formState: FormState) =>

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

@@ -0,0 +1,6 @@
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+
+const ESIA_FIELD_NAME = 'esiaAccountTypeCd';
+
+export const isEsiaAuthorize = (field: FormFieldRegisterer<any>, name: string) =>
+  Boolean(field(ESIA_FIELD_NAME)?.value?.key) && field(name).value;

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

@@ -0,0 +1,41 @@
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { type CreditFormDictionarySlice } from '../../hooks/useRetailFormStore';
+import {
+  getEmployeesNumberOption,
+  getOrganizationActivityType,
+  getOrganizationKind,
+  getOrganizationType,
+} from '../../services/retail/utils/getOrganizationParams';
+import { getAddressFromDaDataItem } from './Fields/AddressField';
+
+export const updateOrganizationFields = (
+  store: CreditFormDictionarySlice,
+  field: FormFieldRegisterer<any>,
+  item: DaDataSuggestion,
+) => {
+  const { okved, okopf, inn } = getOrganizationRequisites(item);
+
+  field?.('legalForm')?.onChange?.(item.data?.opf?.short);
+
+  field?.('organizationAddress')?.onChange?.(
+    getAddressFromDaDataItem(item.data?.address as DaDataSuggestion),
+  );
+
+  const organizationData = {
+    amountWorkers: getEmployeesNumberOption(store?.amountWorkers, item.data?.employee_count),
+    employerActivities: getOrganizationActivityType(store?.employerActivities ?? [], okved),
+    organization: getOrganizationType(store?.organization ?? [], okopf, inn),
+    employerOrganization: getOrganizationKind(store?.employerOrganization ?? [], okopf),
+  };
+
+  for (const fieldName in organizationData) {
+    organizationData[fieldName] && field?.(fieldName)?.onChange?.(organizationData[fieldName]);
+  }
+};
+
+const getOrganizationRequisites = (item: DaDataSuggestion) => ({
+  inn: item.data?.inn ?? '',
+  okopf: Number(item.data?.opf?.code),
+  okved: item.data?.okved ?? '',
+});

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

@@ -1,19 +1,39 @@
-import { isCyrillic } from '../../utils/isCyrilic';
+import { type Address } from '../../services/retail/model/LeadFormState';
 import { required } from '../../validation/required';
 import { validator } from '../../validation/validator';
 
 const ERROR_MESSAGE = 'Некорректно заполненное поле';
 
+const ADDRESS_ERROR_MESSAGE = 'Укажите регион, город/населенный пункт, улицу, дом';
+
+const MIN_AGE = 23;
+const MAX_AGE = 75;
+const AGE_ERROR_MESSAGE = 'Допустимый возраст заёмщика - от 23 до 75 лет';
+
 export const defaultValidator = (errorMsg?: string) => required(errorMsg ?? ERROR_MESSAGE);
 
 export const defaultSelectValidator = (errorMsg?: string) =>
   validator((_) => _?.key && _?.key !== '')(errorMsg ?? ERROR_MESSAGE);
 
+export const jobNumberValidator = (errorMsg?: string) =>
+  validator((_) => typeof _ === 'string' && /^[0-9]{1,2}$/g.test(_))(errorMsg ?? ERROR_MESSAGE);
+
 export const nameValidator = (errorMsg?: string) =>
   validator((_) => typeof _ === 'string' && _.length > 1 && isCyrillic(_))(
     errorMsg ?? ERROR_MESSAGE,
   );
 
+export const lengthStringValidator = (inputLength: number, errorMsg?: string) =>
+  validator((_) => typeof _ === 'string' && _.length >= 1 && _.length <= inputLength)(
+    errorMsg ?? ERROR_MESSAGE,
+  );
+
+export const serieValidator = (errorMsg: string) =>
+  validator((_) => typeof _ === 'string' && _.length === 4)(errorMsg);
+
+export const numberValidator = (errorMsg: string) =>
+  validator((_) => typeof _ === 'string' && _.length === 6)(errorMsg);
+
 export const innValidator = (errorMsg: string) =>
   validator((_) => typeof _ === 'string' && (_.length === 10 || _.length === 12))(errorMsg);
 
@@ -29,7 +49,63 @@ export const agreementValidator = validator((_) => typeof _ === 'boolean' && _)(
   'Согласие обязательно',
 );
 
+const snilsValidate = (snils: string) => {
+  const snl = String(snils).replace(/[^0-9]+/g, '');
+  if (snl.length === 11) {
+    let checksum = 0;
+    for (let i = 0; i < 9; i++) {
+      checksum += parseInt(snl.charAt(i)) * (9 - i);
+    }
+    if (checksum > 101) {
+      checksum = checksum % 101;
+    }
+    if (checksum === 100 || checksum === 101) {
+      checksum = 0;
+    }
+
+    return checksum === parseInt(snl.substr(9));
+  }
+
+  return false;
+};
+
+export const snilsValidator = (errorMsg: string) => validator(snilsValidate)(errorMsg);
+
 const emailValidate = (email: string) => /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,4}$/.test(email);
 
 export const emailValidator = (errorMsg: string) =>
   validator((_: string) => emailValidate(_))(errorMsg);
+
+const addressDaDataValidate = (address: Address) =>
+  Boolean(address.region && (address.city || address.locality) && address.house);
+
+export const addressDaDataValidator = () => validator(addressDaDataValidate)(ADDRESS_ERROR_MESSAGE);
+
+export const addressOrganizationValidator = () =>
+  validator((address: Address) =>
+    Boolean(address.fiasCode && (address.city || address.locality) && address.house),
+  )(ADDRESS_ERROR_MESSAGE);
+
+export const codeWordValidator = (errorMsg?: string) =>
+  validator((_) => typeof _ === 'string' && _.length >= 3 && _.length <= 21 && isCyrillic(_))(
+    errorMsg ?? ERROR_MESSAGE,
+  );
+
+const cyrillicPattern = /^[\u0400-\u04FF\d\s]+$/u;
+
+const isCyrillic = (_ = '') => cyrillicPattern.test(_);
+
+const limitedBirthdayValidate = (date?: Date) => {
+  const today = new Date();
+
+  const minDate = new Date(today.getFullYear() - MIN_AGE, today.getMonth(), today.getDate());
+  const maxDate = new Date(today.getFullYear() - MAX_AGE, today.getMonth(), today.getDate());
+
+  if (!date || date > minDate || date < maxDate) {
+    return false;
+  }
+
+  return true;
+};
+
+export const limitedBirthdayValidator = () => validator(limitedBirthdayValidate)(AGE_ERROR_MESSAGE);

package/src/ui-kit/Input/InputControl.tsx

@@ -8,6 +8,7 @@ import { style } from '../../utils/style';
 import { Input } from './Input';
 import { type InputProps } from './InputProps';
 import { renderErrorText } from './renderErrorText';
+import { useInputPopup } from './useInputPopup';
 
 export const InputControl = JSX<InputProps>(
   ({
@@ -18,11 +19,15 @@ export const InputControl = JSX<InputProps>(
     error,
     errors,
     onChange = noop,
+    onDaDataChange,
     onBlur,
     isTextarea,
     type,
+    name = '',
+    daDataQueryPrefix,
     isInteger = false,
     maxLength,
+    dadata = false,
     disabled = false,
   }) => {
     const [isOpen, { setFalse: close, setTrue: open }] = useBool();
@@ -30,16 +35,25 @@ export const InputControl = JSX<InputProps>(
 
     const handleChange = useCallback(
       (v: string) => {
-        !isOpen && open();
+        dadata && !isOpen && open();
         maxLength ? v.length <= maxLength && onChange(v) : onChange(v);
       },
-      [isOpen, onChange],
+      [dadata, isOpen, onChange],
     );
 
     useEffect(() => {
       isInteger && value ? onChange(normalizeInteger(value)) : null;
     }, [value]);
 
+    const inputRef = useInputPopup({
+      isOpen: isOpen && dadata,
+      name,
+      value,
+      daDataQueryPrefix,
+      onChange,
+      onDaDataChange,
+    });
+
     return (
       <div
         className={style('shrink-0 w-full', className)}
@@ -47,7 +61,7 @@ export const InputControl = JSX<InputProps>(
         onBlur={close}
         onFocus={open}
       >
-        <div>
+        <div ref={inputRef}>
           <Input
             disabled={disabled}
             type={type || 'text'}

package/src/ui-kit/Input/InputPopup.tsx

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { style } from '../../utils/style';
+import { type PreventableEventWithTarget } from '../PreventableEvent';
+
+export interface InputPopupProps {
+  options: Array<DaDataSuggestion>;
+  container: HTMLDivElement;
+  onChange: (e: DaDataSuggestion) => void;
+  value?: string;
+}
+
+const ARROW_DOWN_KEYBOARD_KEY_CODE = 'ArrowDown';
+const ARROW_UP_KEYBOARD_KEY_CODE = 'ArrowUp';
+const ENTER_KEYBOARD_KEY_CODE = 'Enter';
+const INITIAL_LIST_ITEM_ACTIVE = -1;
+
+export const InputPopup = JSX<InputPopupProps>(({ options, container, onChange }) => {
+  const [listItemActive, setListItemActive] = useState<number>(INITIAL_LIST_ITEM_ACTIVE);
+
+  const onKeyDownHandler = (ev: PreventableEventWithTarget & { key: string }): void => {
+    const hintsListMaxIndex = options.length - 1;
+
+    if (ev.key === ARROW_DOWN_KEYBOARD_KEY_CODE) {
+      setListItemActive(listItemActive < hintsListMaxIndex ? listItemActive + 1 : 0);
+    } else if (ev.key === ARROW_UP_KEYBOARD_KEY_CODE) {
+      setListItemActive(listItemActive > 0 ? listItemActive - 1 : hintsListMaxIndex);
+    } else if (ev.key === ENTER_KEYBOARD_KEY_CODE && options[listItemActive]) {
+      ev.preventDefault();
+      onChange(options[listItemActive]);
+    }
+  };
+
+  useEffect(() => {
+    container.addEventListener('keydown', onKeyDownHandler);
+
+    return () => container.removeEventListener('keydown', onKeyDownHandler);
+  }, [listItemActive]);
+
+  return (
+    <div
+      className="bg-white text-l overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
+      role="list"
+    >
+      {options?.map((item, key) => (
+        <div
+          key={key.toString()}
+          className={style('flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative', {
+            'bg-main-divider': listItemActive === key,
+          })}
+          role="listitem"
+          onMouseDown={() => onChange(item)}
+        >
+          <span className="min-h-6">{item.processedValue}</span>
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/ui-kit/Input/InputProps.ts

@@ -1,3 +1,4 @@
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type InputTypes } from '../../model/InputTypes';
 import { type ControlProps } from '../ControlProps';
@@ -10,10 +11,13 @@ export interface InputProps<V = string> extends DefaultControlType, ControlProps
   pattern?: string;
   onFocus?: (ev: PreventableEventWithTarget) => void;
   onBlur?: (ev?: PreventableEventWithTarget) => void;
+  onDaDataChange?: (ev: DaDataSuggestion) => void;
+  daDataQueryPrefix?: string;
   valid?: boolean;
   disabled?: boolean;
   autoFocus?: boolean;
   isTextarea?: boolean;
+  dadata?: boolean;
   maxLength?: number;
   isInteger?: boolean;
 }

package/src/ui-kit/Input/useInputPopup.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getDaDataHints } from '../../api/dadataHints/dadataHints';
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { hintsListsOptions } from '../../api/dadataHints/hintsListsOptions';
+import { debounce } from '../../utils/debounce';
+import { usePopupManager } from '../PopupManager/usePopupManager';
+import { InputPopup } from './InputPopup';
+
+interface InputPopupOptions {
+  isOpen?: boolean;
+  name: string;
+  value?: string;
+  daDataQueryPrefix?: string;
+  onChange: (e: string) => void;
+  onDaDataChange?: (e: DaDataSuggestion) => void;
+}
+
+// eslint-disable-next-line max-lines-per-function
+export function useInputPopup({
+  isOpen,
+  value,
+  name,
+  onChange,
+  onDaDataChange,
+  daDataQueryPrefix,
+}: InputPopupOptions) {
+  const prevInputValue = useRef(value);
+  const currentInputValue = useRef(value);
+  const [hintsList, setHintsList] = useState<Array<DaDataSuggestion>>([]);
+  const popup = usePopupManager();
+
+  const defaultHintsListOptions = hintsListsOptions[name];
+
+  const close = useCallback(() => {
+    currentInputValue.current = value;
+    popup.close();
+  }, [value]);
+
+  const handleChange = useCallback(
+    (option: DaDataSuggestion) => {
+      close();
+      currentInputValue.current = option.processedValue;
+      onChange?.(option.processedValue);
+      onDaDataChange?.(option);
+    },
+    [close, onChange],
+  );
+
+  const inputRef = useRef<HTMLDivElement | null>(null);
+
+  const getHintsList = useMemo(
+    () => async (searchValue: string) => {
+      if (!defaultHintsListOptions) {
+        return;
+      }
+      const result = await getDaDataHints({
+        url: defaultHintsListOptions.url,
+        responseItemHandler: defaultHintsListOptions.responseItemHandler,
+        requestData: {
+          ...defaultHintsListOptions?.requestData,
+        },
+        query: searchValue,
+        queryPrefix: daDataQueryPrefix,
+      });
+      if (result?.length) {
+        setHintsList(result);
+      }
+    },
+    [daDataQueryPrefix],
+  );
+
+  const debouncedGetHintsList = useMemo(() => debounce(getHintsList, 300), [getHintsList]);
+
+  useEffect(() => {
+    if (!isOpen || !inputRef.current || currentInputValue.current === value) {
+      close();
+
+      return;
+    }
+
+    const inputElement = inputRef.current;
+    const { top, left, width, height } = inputElement.getBoundingClientRect();
+
+    if (value && prevInputValue.current !== value) {
+      debouncedGetHintsList(value);
+
+      prevInputValue.current = value;
+    }
+
+    popup.open({
+      popup: (
+        <InputPopup
+          options={hintsList}
+          container={inputElement}
+          value={value}
+          onChange={handleChange}
+        />
+      ),
+      top: top + globalThis.scrollY + height,
+      left,
+      width,
+    });
+  }, [isOpen, hintsList, value, handleChange]);
+
+  return inputRef;
+}

package/src/ui-kit/VerifyPhoneDialog/InputCode.tsx

@@ -0,0 +1,89 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getValidStyle } from '../Input/getValidStyle';
+import { type PreventableEvent } from '../PreventableEvent';
+
+type InputCodeProps = {
+  values: string[];
+  setValues: (_: string[]) => void;
+  hasError?: boolean;
+  errorText?: string;
+};
+
+export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, errorText }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  useEffect(() => {
+    inputRefs.current?.[activeIndex]?.focus();
+  }, [activeIndex]);
+
+  const handleChange = useCallback(
+    (index: number) => (event: PreventableEvent & { currentTarget: { value: string } }) => {
+      const { value } = event.currentTarget;
+      const oneValue = value.slice(0, 1);
+      setValues(values.map((_, i) => (i === index ? oneValue : _)));
+      setActiveIndex(index + 1);
+    },
+    [values],
+  );
+
+  const handleKeyDown = useCallback(
+    (currentIndex: number) => (event: PreventableEvent & { key: string }) => {
+      const { key } = event;
+      if (key === 'Backspace' && !values[currentIndex]) {
+        const previousIndex = currentIndex > 0 ? currentIndex - 1 : values.length - 1;
+        const updatedValues = values.map((value, index) => (index === previousIndex ? '' : value));
+        setValues(updatedValues);
+        setActiveIndex(previousIndex);
+      }
+    },
+    [values],
+  );
+
+  const handlePaste = useCallback(
+    (event: PreventableEvent & { clipboardData: { getData: (v: string) => string } }) => {
+      event.preventDefault();
+      const pastedData = event.clipboardData.getData('text');
+      const updatedValues = values.map((_, idx) => (idx < pastedData.length ? pastedData[idx] : _));
+      setValues(updatedValues);
+      setActiveIndex(updatedValues.length - 1);
+    },
+    [values],
+  );
+
+  return (
+    <div className="flex flex-col gap-2 text-center">
+      <div>
+        {values.map((value, index) => (
+          <input
+            key={index}
+            type="number"
+            maxLength={1}
+            value={value}
+            onChange={handleChange(index)}
+            onPaste={handlePaste}
+            ref={(ref) => {
+              if (!inputRefs.current) {
+                inputRefs.current = [];
+              }
+              inputRefs.current[index] = ref as HTMLInputElement;
+            }}
+            onFocus={(event) => event.target.select()}
+            onKeyDown={handleKeyDown(index)}
+            className={getInputStyle(index, values, hasError)}
+          />
+        ))}
+      </div>
+      {hasError ? <div className="text-error">{errorText}</div> : null}
+    </div>
+  );
+});
+
+const getInputStyle = (index: number, values: string[], hasError = false) => {
+  const isInputEmpty = !values[index];
+
+  return `w-16 sm:w-20 h-24 text-5xl text-center p-md m-2 border ${getValidStyle(
+    !hasError || !isInputEmpty,
+  )} rounded-md caret-transparent outline-none`;
+};

package/src/ui-kit/VerifyPhoneDialog/SubmitButton.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+interface SubmitButtonProps {
+  isDisabled: boolean;
+  onClick: () => void;
+  text?: string;
+}
+
+export const SubmitButton = JSX<SubmitButtonProps>(({ isDisabled, onClick, text }) => {
+  return (
+    <Button type="button" onClick={onClick} disabled={isDisabled}>
+      <Text font="font-normal">{text}</Text>
+    </Button>
+  );
+});

package/src/ui-kit/VerifyPhoneDialog/VerifyPhoneDialog.fixture.tsx

@@ -0,0 +1,20 @@
+import '../../setup-fixture';
+
+import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { VerifyPhoneDialog } from './VerifyPhoneDialog';
+
+const consents = [
+  'соглашение о порядке использования простой электронной подписи,',
+  'согласие на обработку персональных данных,',
+  'предоставление и подписание прочих согласий Банка,',
+  'согласие на запрос в ПФР',
+];
+
+export default {
+  default: (
+    <div>
+      <VerifyPhoneDialog phone="+71234567890" consents={consents} />
+      <DialogManager />
+    </div>
+  ),
+};