@redneckz/wildless-cms-uni-blocks 0.14.697 → 0.14.699

package/mobile/src/components/CreditForm/getZeroStepData.ts

@@ -1,8 +1,8 @@
 import { type Participant } from '../../api/RetailAPI/updateUserTask';
-import { type FormState } from '../ApplicationLeadForm/getInitialFormState';
+import { type LeadFormState } from '../ApplicationLeadForm/LeadFormState';
 
 export const getZeroStepData = (
-  formData: FormState,
+  formData: LeadFormState,
 ): Pick<Participant, 'payrollCardRshbFlg' | 'consentInsuranceFlg'> => {
   const { isInsurance, isSalaryClient } = formData?.calculator ?? {};
 

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

@@ -1,11 +1,11 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
 import { getField } from '../../ui-kit/FormField/getField';
 import { type FieldDef } from '../ApplicationLeadForm/ApplicationLeadFormContent';
-import { type FormState } from '../ApplicationLeadForm/getInitialFormState';
+import { type LeadFormState } from '../ApplicationLeadForm/LeadFormState';
 
 export interface RenderInputsProps {
   inputs: FieldDef[];
-  field: FormFieldRegisterer<FormState>;
+  field: FormFieldRegisterer<LeadFormState>;
   params?: Record<string, any>;
 }
 

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

@@ -3,16 +3,16 @@ import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
 import { renderTitle } from '../../ui-kit/FormField/renderTitle';
 import { style } from '../../utils/style';
 import { type SectionsProps } from '../ApplicationForm/ApplicationFormContent';
-import { type FormState } from '../ApplicationLeadForm/getInitialFormState';
+import { type LeadFormState } from '../ApplicationLeadForm/LeadFormState';
 import { calculateInputs, type GetValue } from './calculateInputs';
 import { renderInfo } from './renderInfo';
 import { renderInputs } from './renderInputs';
 
-export type CustomSubmit = FormOperatorProps<FormState>['onSubmit'];
+export type CustomSubmit = FormOperatorProps<LeadFormState>['onSubmit'];
 
 export interface StepProps {
   sections?: SectionsProps[];
-  field: FormFieldRegisterer<FormState>;
+  field: FormFieldRegisterer<LeadFormState>;
   step: number;
   params?: Record<string, any>;
 }
@@ -31,6 +31,6 @@ export const renderStep = ({ sections, field, step, params }: StepProps) =>
   });
 
 const getValue =
-  (field: FormFieldRegisterer<FormState>): GetValue =>
+  (field: FormFieldRegisterer<LeadFormState>): GetValue =>
   (name) =>
     field(name)?.value;

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

@@ -5,7 +5,7 @@ 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 FormState } from '../ApplicationLeadForm/getInitialFormState';
+import { type LeadFormState } from '../ApplicationLeadForm/LeadFormState';
 import { calculateInputs, type GetValue } from './calculateInputs';
 import { getCreditFormTaskData } from './getCreditFormTaskData';
 
@@ -29,7 +29,7 @@ export const useCreditFormAPI = ({
   const [profileId] = useLocalStorage<number>('profileId');
   const [participantId] = useLocalStorage<number>('participantId');
 
-  const handleSubmit = useCallback(async (formData: FormState) => {
+  const handleSubmit = useCallback(async (formData: LeadFormState) => {
     const feedbackValidator = objectValidator(
       getObjectValidator(calculateInputs(getValue(formData))(inputs, step)),
     );
@@ -78,6 +78,6 @@ const resetForm = (isFinalStep: boolean, response: Response) => {
 };
 
 const getValue =
-  (formData: FormState): GetValue =>
+  (formData: LeadFormState): GetValue =>
   (name) =>
     formData[name];

package/mobile/src/components/CreditForm/utils.ts

@@ -1,4 +1,4 @@
-import { type Address } from '../ApplicationLeadForm/getInitialFormState';
+import { type Address } from '../ApplicationLeadForm/LeadFormState';
 
 export const fieldsNamesToContactKeysMap = {
   email: 'EMAIL',

package/mobile/src/hooks/useCreditFormStore.tsx

@@ -0,0 +1,13 @@
+import { useLocalStore } from '@redneckz/uni-jsx/lib/Store/useLocalStore';
+import { type LeadProps } from '../api/RetailAPI/model/LeadFormData';
+
+export interface CreditFormStore {
+  amountWorkers: LeadProps[] | null;
+  organization: LeadProps[] | null;
+  employerActivities: LeadProps[] | null;
+  employerOrganization: LeadProps[] | null;
+}
+
+export const useCreditFormStore = () => {
+  return useLocalStore<CreditFormStore>();
+};

package/mobile/src/hooks/useLeadFormData.ts

@@ -1,5 +1,5 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-import { type LeadProps } from '../ui-kit/FormField/SelectField';
+import { type LeadProps } from '../api/RetailAPI/model/LeadFormData';
 import { fetchJSON } from '../utils/fetchJSON';
 
 type ErrorProps = {

package/mobile/src/hooks/useLocalStorage.ts

@@ -1,11 +1,12 @@
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { safeJsonParse } from '../utils/safeJsonParse';
 
 export function useLocalStorage<T>(
   key: string,
 ): [T | null, (value: T | null | ((oldValue: T | null) => T | null)) => void] {
   const initialValue = globalThis.localStorage?.getItem(key);
   const [storedValue, setStoredValue] = useState<T | null>(
-    initialValue ? (JSON.parse(initialValue) as T | null) : null,
+    initialValue ? safeJsonParse(initialValue) : null,
   );
 
   const setValue = useCallback(

package/mobile/src/hooks/useSetter.ts

@@ -0,0 +1,16 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { Nullable } from '@redneckz/uni-jsx/lib/utils/ts/Nullable';
+
+export const useSetter = <T, K extends keyof T>(target: T, key: K) =>
+  useCallback(
+    (value: Nullable<T[K]> | ((oldValue: Nullable<T[K]>) => Nullable<T[K]>)) => {
+      const newValue = value instanceof Function ? value(target[key]) : value;
+
+      if (newValue !== null && newValue !== undefined) {
+        target[key] = newValue;
+      } else {
+        delete target[key];
+      }
+    },
+    [target, key],
+  );

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

@@ -51,7 +51,7 @@ export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
 
     return (
       <Dialog
-        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
+        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl"
         onClose={onClose}
       >
         <div className="flex flex-col gap-xl items-center">

package/mobile/src/ui-kit/ConsentBkiDialog/useConsentBkiDialog.tsx

@@ -1,5 +1,4 @@
 import { updateUserProfile } from '../../api/RetailAPI/updateUserProfile';
-import { formatPhone } from '../../utils/formatPhone';
 import { useDialog } from '../DialogManager/useDialog';
 import { VerifyPhoneDialog } from '../VerifyPhoneDialog/VerifyPhoneDialog';
 import { ConsentBkiDialog } from './ConsentBkiDialog';
@@ -30,7 +29,8 @@ export const useConsentBkiDialog = (onClose: () => void) => {
     (phone?: string, profileId?: number) => async (confirmStatus: string) => {
       if (confirmStatus === 'SIGNED' && phone) {
         verifyPhoneDialog.open({
-          ...verifyPhoneContent(phone),
+          phone,
+          consents: ['согласие на запрос информации в БКИ'],
           onSuccess: handleSuccessVerify(profileId),
         });
       } else {
@@ -43,12 +43,3 @@ export const useConsentBkiDialog = (onClose: () => void) => {
       open({ onSubmit: handleSubmitBkiConstent(phone, profileId), onClose }),
   };
 };
-
-const verifyPhoneContent = (phone: string) => ({
-  title: 'Подтвердите номер телефона',
-  description: `Мы отправили код на ${phone}`,
-  phoneNumber: formatPhone(phone),
-  textButton: 'Далее',
-  __html: `<span>Вводя код, я подтверждаю, что ознакомлен и подписываю:</span>
-              <ul><li>согласие на запрос информации в БКИ</li></ul>`,
-});

package/mobile/src/ui-kit/DialogManager/useDialog.tsx

@@ -1,5 +1,6 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
 import type { DialogOptions } from './DialogAction';
 import { useDialogManager } from './useDialogManager';
 
@@ -10,7 +11,7 @@ export function useDialog<Props extends { onClose?: () => void }>(
   const { open, close, ...rest } = useDialogManager();
 
   const openDialog = useCallback(
-    (props: Props, options: Partial<DialogOptions> = {}) =>
+    (props: Props & { children?: VNode }, options: Partial<DialogOptions> = {}) =>
       open({
         dialog: (
           <Dialog

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { getLink } from '../../api/RetailAPI/getLink';
-import { type FormState } from '../../components/ApplicationLeadForm/getInitialFormState';
+import { type LeadFormState } from '../../components/ApplicationLeadForm/LeadFormState';
 import { locationNavigator } from '../../external/locationNavigator';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { Button } from '../Button/Button';
@@ -14,7 +14,7 @@ export interface EsiaLoginDialogProps {
 
 export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(({ onClose }) => {
   const navigator = locationNavigator();
-  const [leadForm, setLeadForm] = useLocalStorage<FormState>('leadForm');
+  const [leadForm, setLeadForm] = useLocalStorage<LeadFormState>('leadForm');
   const handleAuth = useCallback(async () => {
     const resp = await getLink({
       redirectUri: navigator.href,
@@ -37,7 +37,7 @@ export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(({ onClose }) => {
   return (
     <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg" onClose={handleClose}>
       <div className="flex flex-col gap-lg items-center rounded-md">
-        <div className="flex items-center justify-around w-full">
+        <div className="flex items-center justify-around w-full px-m">
           <ul className="list-disc">
             <li>Вероятность одобрения выше</li>
             <li>Без справок о доходах и трудоустройстве</li>
@@ -45,7 +45,7 @@ export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(({ onClose }) => {
           </ul>
           <Img image={{ icon: 'GosUslugiIcon', iconVersion: 'normal' }} height="70" />
         </div>
-        <div className="flex items-center justify-between w-full m-0">
+        <div className="flex flex-wrap gap-lg w-full">
           <Button type="button" onClick={handleAuth}>
             Заполнить через Госуслуги
           </Button>

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

@@ -1,15 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCreditFormStore } from '../../../hooks/useCreditFormStore';
 import { useLeadFormData } from '../../../hooks/useLeadFormData';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { SelectField } from '../SelectField';
 
 export const AmountWorkersField = JSX<CustomFieldProps>(({ field, input }) => {
-  const { data: amountWorkers } = useLeadFormData('EMPLOYEES_NUMBER');
+  const { data } = useLeadFormData('EMPLOYEES_NUMBER');
+
+  const store = useCreditFormStore();
+
+  useEffect(() => {
+    if (data) {
+      store.amountWorkers = data;
+    }
+  }, [data]);
 
   return (
     <SelectField
       field={field}
-      source={amountWorkers}
+      source={store.amountWorkers ?? []}
       label="Количество работающих в организации"
       fieldName="amountWorkers"
       input={input}

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

@@ -15,6 +15,7 @@ export const CreditCalcField = JSX<CustomFieldProps>(({ field, params }) => {
   return (
     <CalculatorCredit
       {...params?.calcData}
+      padding="p-0"
       defaultParams={defaultValueAdapter(
         field(FIELD_NAME).value as CreditCalculatorUserInputParams,
       )}

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

@@ -1,15 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCreditFormStore } from '../../../hooks/useCreditFormStore';
 import { useLeadFormData } from '../../../hooks/useLeadFormData';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { SelectField } from '../SelectField';
 
 export const EmployerActivitiesField = JSX<CustomFieldProps>(({ field, input }) => {
-  const { data: employerActivities } = useLeadFormData('ORGANIZATION_ACTIVITY_TYPE');
+  const { data } = useLeadFormData('ORGANIZATION_ACTIVITY_TYPE');
+
+  const store = useCreditFormStore();
+
+  useEffect(() => {
+    if (data) {
+      store.employerActivities = data;
+    }
+  }, [data]);
 
   return (
     <SelectField
       field={field}
-      source={employerActivities}
+      source={store.employerActivities ?? []}
       label="Вид деятельности организации-работодателя"
       fieldName="employerActivities"
       input={input}

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

@@ -1,15 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCreditFormStore } from '../../../hooks/useCreditFormStore';
 import { useLeadFormData } from '../../../hooks/useLeadFormData';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { SelectField } from '../SelectField';
 
 export const EmployerOrganizationField = JSX<CustomFieldProps>(({ field, input }) => {
-  const { data: employerOrganization } = useLeadFormData('ORGANIZATION_KIND');
+  const { data } = useLeadFormData('ORGANIZATION_KIND');
+
+  const store = useCreditFormStore();
+
+  useEffect(() => {
+    if (data) {
+      store.employerOrganization = data;
+    }
+  }, [data]);
 
   return (
     <SelectField
       field={field}
-      source={employerOrganization}
+      source={store.employerOrganization ?? []}
       label="Вид организации работодателя"
       fieldName="employerOrganization"
       input={input}

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

@@ -1,19 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type DaDataSuggestion } from '../../../api/dadataHints/dadataHintsType';
+import { useCreditFormStore } from '../../../hooks/useCreditFormStore';
 import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
-import { getAddressFromDaDataItem } from './AddressField';
+import { updateOrganizationFields } from '../updateOrganizationFields';
 
 export const InnField = JSX<CustomFieldProps>(({ field, input }) => {
+  const store = useCreditFormStore();
+
   const onDaDataChange = useCallback((item: DaDataSuggestion) => {
-    field?.('organizationAddress')?.onChange?.(
-      getAddressFromDaDataItem(item.data?.address as DaDataSuggestion),
-    );
     field?.('organizationName')?.onChange?.(item.data?.name?.short_with_opf);
-    field?.('legalForm')?.onChange?.(item.data?.opf?.short);
+    updateOrganizationFields(store, field, item);
   }, []);
 
   return (

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

@@ -1,15 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCreditFormStore } from '../../../hooks/useCreditFormStore';
 import { useLeadFormData } from '../../../hooks/useLeadFormData';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { SelectField } from '../SelectField';
 
 export const OrganizationField = JSX<CustomFieldProps>(({ field, input }) => {
-  const { data: organization } = useLeadFormData('ORGANIZATION_TYPE');
+  const { data } = useLeadFormData('ORGANIZATION_TYPE');
+
+  const store = useCreditFormStore();
+
+  useEffect(() => {
+    if (data) {
+      store.organization = data;
+    }
+  }, [data]);
 
   return (
     <SelectField
       field={field}
-      source={organization}
+      source={store.organization ?? []}
       label="Тип организации"
       fieldName="organization"
       input={input}

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

@@ -1,15 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type DaDataSuggestion } from '../../../api/dadataHints/dadataHintsType';
+import { useCreditFormStore } from '../../../hooks/useCreditFormStore';
 import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { validatorObj } from '../getObjectValidator';
 import { getValidation } from '../getValidation';
+import { updateOrganizationFields } from '../updateOrganizationFields';
 
 export const OrganizationNameField = JSX<CustomFieldProps>(({ field, input }) => {
+  const store = useCreditFormStore();
+
   const onDaDataChange = useCallback((item: DaDataSuggestion) => {
     field?.('inn')?.onChange?.(item.data?.inn);
-    field?.('legalForm')?.onChange?.(item.data?.opf?.short);
+    updateOrganizationFields(store, field, item);
   }, []);
 
   return (

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

@@ -1,3 +1,4 @@
+import { type LeadProps } from '../../api/RetailAPI/model/LeadFormData';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { type Option } from '../Select/Option';
@@ -6,14 +7,6 @@ import { type CustomFieldProps } from './CustomFieldProps';
 import { validatorObj } from './getObjectValidator';
 import { getValidation } from './getValidation';
 
-export interface LeadProps {
-  type?: string;
-  key?: string;
-  value?: string;
-  displayOrder?: number;
-  description?: string;
-}
-
 export interface SelectFieldProps extends CustomFieldProps, UniBlockProps {
   source?: LeadProps[];
   label: string;

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

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

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

@@ -1,4 +1,4 @@
-import { type Address } from '../../components/ApplicationLeadForm/getInitialFormState';
+import { type Address } from '../../components/ApplicationLeadForm/LeadFormState';
 import { pattern } from '../../validation/pattern';
 import { required } from '../../validation/required';
 import { validator } from '../../validation/validator';

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { style } from '../../utils/style';
+import { getValidStyle } from './getValidStyle';
 import { type InputProps } from './InputProps';
-import { inputValidStyle } from './inputValidStyle';
 import { renderLabel } from './renderLabel';
 
 export const Input = JSX<InputProps>(
@@ -86,6 +86,4 @@ export const Input = JSX<InputProps>(
   },
 );
 
-const getValidStyle = (valid: boolean) => (valid ? inputValidStyle : 'border-error');
-
 const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';

package/mobile/src/ui-kit/Input/getValidStyle.tsx

@@ -0,0 +1,3 @@
+import { inputValidStyle } from './inputValidStyle';
+
+export const getValidStyle = (valid: boolean) => (valid ? inputValidStyle : 'border-error');

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

@@ -1,26 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
-import { getHtmlText } from './getHtmlText';
 import { type RichTextProps } from './RichTextProps';
 
-const EMPTY_HTML = '<p><br></p>';
+export const RichText = JSX<RichTextProps>(
+  ({ __html = '', richVersion = '', itemSize = 'list-m', isDotted = true, children }) => {
+    const dotStyle = isDotted ? '' : 'without-dots';
 
-export const RichText = JSX<RichTextProps>((props) => {
-  const { __html = '', richVersion = '', itemSize = 'list-m', isDotted = true } = props;
-  const dotStyle = isDotted ? '' : 'without-dots';
-
-  return __html && getHtmlText(__html) !== EMPTY_HTML ? (
-    /* Attribute [data-component] need for correct render in wcms editor. Do not remove. */
-    <div data-component="rich-text-container">
-      <div
-        className={style(
-          richVersion,
-          itemSize,
-          'md-container group-data-secondary:text-white group-data-gray:text-secondary-text',
-          dotStyle,
-        )}
-        dangerouslySetInnerHTML={{ __html }}
-      />
-    </div>
-  ) : null;
-});
+    return __html || children ? (
+      /* Attribute [data-component] need for correct render in wcms editor. Do not remove. */
+      <div data-component="rich-text-container">
+        <div
+          className={style(
+            richVersion,
+            itemSize,
+            'md-container group-data-secondary:text-white group-data-gray:text-secondary-text',
+            dotStyle,
+          )}
+          dangerouslySetInnerHTML={__html ? { __html } : undefined}
+        >
+          {children}
+        </div>
+      </div>
+    ) : null;
+  },
+);

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

@@ -1,5 +1,6 @@
 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 = {
@@ -82,7 +83,7 @@ export const InputCode = JSX<InputCodeProps>(({ values, setValues, hasError, err
 const getInputStyle = (index: number, values: string[], hasError = false) => {
   const isInputEmpty = !values[index];
 
-  return `w-20 h-24 text-5xl text-center p-lg m-2 border ${
-    hasError && isInputEmpty ? 'border-error' : 'border-gray'
-  } rounded-md caret-transparent outline-none`;
+  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`;
 };