@redneckz/wildless-cms-uni-blocks 0.14.875 → 0.14.877

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -1,8 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
-import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
-import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { useLink } from '../../hooks/useLink';
 import { type ComponentType } from '../../model/ComponentType';
 import { type LinkProps } from '../../model/LinkProps';
@@ -10,91 +6,25 @@ import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { style } from '../../utils/style';
 
 interface DropdownMenuProps extends ComponentType {
-  items: LinkProps[];
+  dropdownRef?: { current: HTMLDivElement | null };
+  items?: LinkProps[];
   activeItem?: LinkProps;
   ariaLabel?: string;
 }
 
-interface ChangeDropdownPositionParams {
-  isOpened: boolean;
-  buttonRef: {
-    current: HTMLDivElement | null;
-  };
-  menuRef: {
-    current: HTMLDivElement | null;
-  };
-}
-
-export const DropdownMenu = JSX<DropdownMenuProps>(
-  ({ className = '', items, activeItem, ariaLabel = 'Меню' }) => {
-    const [isVisible, { setFalse, toggle }] = useBool(false);
-    const ref = useOutsideClick<HTMLDivElement>(setFalse);
-    const dropdownRef = useRef<HTMLDivElement | null>(null);
-
-    const changeDropdownPosition = useCallback(
-      ({ isOpened, buttonRef, menuRef }: ChangeDropdownPositionParams) => {
-        if (isOpened && buttonRef.current && menuRef.current) {
-          const dropdownRect = menuRef.current.getBoundingClientRect();
-          const dropdownButtonRect = buttonRef.current.getBoundingClientRect();
-          const newDropdownPosition = globalThis.innerWidth - dropdownRect.width;
-
-          if (dropdownRect.right >= globalThis.innerWidth) {
-            menuRef.current.style.left = `${newDropdownPosition}px`;
-          } else if (dropdownButtonRect.left > dropdownRect.left) {
-            if (newDropdownPosition > dropdownButtonRect.left) {
-              menuRef.current.style.left = '';
-            } else {
-              menuRef.current.style.left = `${newDropdownPosition}px`;
-            }
-          }
-        }
-      },
-      [isVisible],
-    );
-
-    useEventListener(globalThis, 'resize', () =>
-      changeDropdownPosition({ isOpened: isVisible, buttonRef: ref, menuRef: dropdownRef }),
-    );
-
-    useEffect(() => {
-      changeDropdownPosition({ isOpened: isVisible, buttonRef: ref, menuRef: dropdownRef });
-    }, [isVisible]);
-
-    return (
-      <div
-        className={style(isVisible ? 'rounded-md shadow-blue-gray' : '', className)}
-        ref={ref}
-        role="navigation"
-      >
-        <button
-          type="button"
-          className="group/btn flex justify-between items-center h-6"
-          aria-label={ariaLabel}
-          onClick={toggle}
-          role="button"
-          aria-labelledby="labeldiv"
-        >
-          {Array(3)
-            .fill(null)
-            .map((_, i) => (
-              <div
-                key={String(i)}
-                className="w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
-              />
-            ))}
-        </button>
-        <div
-          ref={dropdownRef}
-          className={style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40', {
-            hidden: !isVisible,
-          })}
-          aria-hidden={!isVisible}
-        >
-          {renderDropdownItems(items, activeItem)}
-        </div>
-      </div>
-    );
-  },
+export const DropdownMenu = ({
+  dropdownRef,
+  items = [],
+  activeItem,
+  ariaLabel,
+}: DropdownMenuProps) => (
+  <div
+    ref={dropdownRef}
+    className="absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40"
+    aria-label={ariaLabel}
+  >
+    {renderDropdownItems(items, activeItem)}
+  </div>
 );
 
 export const DropdownMenuItem = JSX<LinkProps & { isActive?: boolean }>(({ isActive, ...rest }) => {

package/mobile/src/components/Header/HeaderMoreMenuItem.tsx

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type ComponentType } from '../../model/ComponentType';
+import { type LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { useDropdownSubMenu } from './useDropdownSubMenu';
+
+interface HeaderMoreMenuItemProps extends ComponentType {
+  items: LinkProps[];
+  activeItem?: LinkProps;
+  ariaLabel?: string;
+}
+
+export const HeaderMoreMenuItem = JSX<HeaderMoreMenuItemProps>(
+  ({ className = '', items, activeItem, ariaLabel = 'Меню' }) => {
+    const [isOpenDropdown, { setFalse, toggle }] = useBool(false);
+
+    const dropdownMenu = useDropdownSubMenu({
+      items,
+      onClose: setFalse,
+      isOpen: isOpenDropdown,
+      activeItem,
+    });
+
+    useEffect(() => {
+      dropdownMenu.current?.addEventListener('mouseleave', setFalse);
+
+      return () => {
+        dropdownMenu.current?.removeEventListener('mouseleave', setFalse);
+      };
+    }, []);
+
+    return (
+      <div
+        className={style(isOpenDropdown ? 'rounded-md shadow-blue-gray' : '', className)}
+        ref={dropdownMenu}
+        role="navigation"
+      >
+        <button
+          type="button"
+          className="group/btn flex justify-between items-center h-6"
+          aria-label={ariaLabel}
+          onClick={toggle}
+          role="button"
+          aria-labelledby="labeldiv"
+        >
+          {Array(3)
+            .fill(null)
+            .map((_, i) => (
+              <div
+                key={String(i)}
+                className="w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
+              />
+            ))}
+        </button>
+      </div>
+    );
+  },
+);

package/mobile/src/components/Header/HeaderSubMenu.tsx

@@ -6,8 +6,8 @@ import { type IntersectionObserverOptions } from '../../hooks/useIntersectionObs
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
-import { DropdownMenu } from './DropdownMenu';
 import { HeaderChatBotButton } from './HeaderChatBotButton';
+import { HeaderMoreMenuItem } from './HeaderMoreMenuItem';
 import { type InternetButtonProps } from './HeaderProps';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
 import { InternetBankButton } from './InternetBankButton';
@@ -56,6 +56,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
               key={String(i)}
               className={visibleItemsCount - 1 < i ? 'invisible' : ''}
               active={_ === activeSubItem}
+              activeItem={activeSubItem}
               observerOptions={observerOptions}
               onVisibilityChange={subItemsVisibilityHandlers[i]}
               data={_.dataHeader}
@@ -64,7 +65,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
           ))}
         </div>
         {dropDownMenuItems.length ? (
-          <DropdownMenu
+          <HeaderMoreMenuItem
             items={dropDownMenuItems}
             activeItem={activeSubItem}
             ariaLabel={dropdownMenuAriaLabel}

package/mobile/src/components/Header/HeaderSubMenuItem.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type NavigationLinkProps } from '../../data/NavigationData';
 import {
   useIntersectionObserver,
   type IntersectionObserverOptions,
@@ -7,15 +9,20 @@ import {
 import { type ComponentType } from '../../model/ComponentType';
 import { type LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import { useDropdownSubMenu } from './useDropdownSubMenu';
 
 export interface HeaderSubMenuItemProps extends LinkProps, ComponentType {
   active?: boolean;
+  activeItem?: LinkProps;
   observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;
+  items?: NavigationLinkProps[];
 }
 
 export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
-  ({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
+  ({ observerOptions, onVisibilityChange, children, className, items, activeItem, ...rest }) => {
+    const [isOpenDropdown, { setFalse, setTrue }] = useBool(false);
+
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (!entries.length || !onVisibilityChange) {
@@ -31,10 +38,29 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
     );
     const ref = useIntersectionObserver<HTMLSpanElement>(observerCallback, observerOptions);
 
+    const dropdownMenu = useDropdownSubMenu({
+      items,
+      onClose: setFalse,
+      isOpen: isOpenDropdown,
+      activeItem,
+    });
+
+    useEffect(() => {
+      dropdownMenu.current?.addEventListener('mouseenter', setTrue);
+      dropdownMenu.current?.addEventListener('mouseleave', setFalse);
+
+      return () => {
+        dropdownMenu.current?.addEventListener('mouseenter', setTrue);
+        dropdownMenu.current?.removeEventListener('mouseleave', setFalse);
+      };
+    }, []);
+
     return (
-      <span ref={ref} className={className} role="menuitem">
-        <HeaderItem {...rest}>{children}</HeaderItem>
-      </span>
+      <div className="inline-block" ref={dropdownMenu}>
+        <span ref={ref} className={className} role="menuitem">
+          <HeaderItem {...rest}>{children}</HeaderItem>
+        </span>
+      </div>
     );
   },
 );

package/mobile/src/components/Header/HeaderTopMenu.tsx

@@ -10,7 +10,7 @@ import { type BlockVersion } from '../../model/BlockVersion';
 import { type ComponentType } from '../../model/ComponentType';
 import { type LogoType } from '../../model/LogoType';
 import { Logo } from '../../ui-kit/Logo/Logo';
-import { DropdownMenu } from './DropdownMenu';
+import { HeaderMoreMenuItem } from './HeaderMoreMenuItem';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderTopMenuItem } from './HeaderTopMenuItem';
 
@@ -80,8 +80,8 @@ export const HeaderTopMenu = JSX<HeaderMenuProps>(
           ))}
         </div>
         {dropDownMenuItems.length ? (
-          <DropdownMenu
-            className="mx-xs"
+          <HeaderMoreMenuItem
+            className="mx-xs rounded-md shadow-blue-gray"
             items={dropDownMenuItems}
             activeItem={activeTopItem}
             ariaLabel={dropdownMenuAriaLabel}

package/mobile/src/components/Header/useDropdownSubMenu.tsx

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
+import { type LinkProps } from '../../model/LinkProps';
+import type { OnCloseProps } from '../../model/OnCloseProps';
+import { usePopupManager } from '../../ui-kit/PopupManager/usePopupManager';
+import { DropdownMenu } from './DropdownMenu';
+
+interface DropdownSubMenuOptions extends OnCloseProps {
+  isOpen?: boolean;
+  activeItem?: LinkProps;
+  items?: LinkProps[];
+}
+
+export function useDropdownSubMenu({ items, activeItem, onClose, isOpen }: DropdownSubMenuOptions) {
+  const popup = usePopupManager();
+
+  useEffect(() => {
+    if (isOpen) {
+      popup.close();
+    }
+  }, [isOpen]);
+
+  const close = useCallback(() => {
+    popup.close();
+    onClose?.();
+  }, [onClose]);
+
+  const parentRef = useRef<HTMLDivElement | null>(null);
+  const popupRef = useOutsideClick<HTMLDivElement>(close);
+
+  useEffect(() => {
+    if (!isOpen || !parentRef.current || !items?.length) {
+      return;
+    }
+
+    const parentElement = parentRef.current;
+    const { top, left, width, height } = parentElement.getBoundingClientRect();
+
+    popup.open({
+      popup: <DropdownMenu dropdownRef={popupRef} items={items} activeItem={activeItem} />,
+      top: top + window.scrollY + height,
+      left,
+      width,
+    });
+  }, [isOpen, items, close]);
+
+  return parentRef;
+}

package/mobile/src/data/NavigationData.ts

@@ -6,6 +6,7 @@ export interface NavigationLinkProps extends LinkProps {
   displayArea?: string;
   dataHeader?: AspectsDef[];
   dataFooter?: AspectsDef[];
+  items?: NavigationLinkProps[];
 }
 
 /**

package/mobile/src/hooks/useInn.ts

@@ -0,0 +1,16 @@
+import { getDaDataHints } from '../retail/api/dadataHints/dadataHints';
+
+const INN_DADATA_URL = 'suggest/party';
+
+interface InnHint {
+  fullName?: string;
+  address?: string;
+  inn?: string;
+}
+
+export const useInn = async (searchQuery: string): Promise<InnHint[]> =>
+  (await getDaDataHints({ url: INN_DADATA_URL, query: searchQuery })).map((_) => ({
+    fullName: _?.value,
+    address: _?.data?.address?.value,
+    inn: _?.data?.inn,
+  }));

package/mobile/src/model/FormTypeFieldDef.ts

@@ -23,4 +23,5 @@ export type FormTypeFieldDef =
   | 'CONT'
   | 'SUPPORT'
   | 'INVESTADVISER'
-  | 'FINOMBUDSMAN';
+  | 'FINOMBUDSMAN'
+  | 'PF';

package/mobile/src/retail/components/Fields/SelectField.tsx

@@ -17,6 +17,7 @@ export interface SelectFieldProps
   source?: DictionaryItem[];
   fieldName: string;
   isSearch?: boolean;
+  isManualInput?: boolean;
 }
 
 export const SelectField = UniBlock<SelectFieldProps>(

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

@@ -0,0 +1,24 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export const CompanyNameByInnField = JSX<CustomFieldProps>(({ field, input }) => {
+  const fieldInn = field('innDadata');
+
+  useEffect(() => {
+    if (fieldInn?.value?.key !== '') {
+      const companyName = fieldInn?.value?.innDaData?.companyName;
+      companyName && field?.('companyNameByInn')?.onChange?.(companyName);
+    }
+  }, [fieldInn?.value]);
+
+  return (
+    <InputControl
+      maxLength={60}
+      label="Полное наименование"
+      {...field(input?.name ?? '')}
+      {...input}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/{RegionPremiumField.tsx → FullRegionField.tsx}

@@ -5,8 +5,13 @@ import { type Option } from '../../Select/Option';
 import { SelectControl } from '../../Select/SelectControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 
-export const RegionPremiumField = JSX<CustomFieldProps>(({ field, input }) => {
-  const branchByRegions = useBranchesByRegions(true);
+export interface FullRegionFieldProps extends CustomFieldProps {
+  isPremium?: boolean;
+}
+
+export const FullRegionField = JSX<FullRegionFieldProps>(({ field, input, params }) => {
+  const isPremium = params?.isPremium as boolean;
+  const branchByRegions = useBranchesByRegions(isPremium);
   const regions = useMemo(
     () =>
       branchByRegions?.map(({ region }) => ({

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

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useAsyncEffect } from '../../../hooks/useAsyncEffect';
+import { useInn } from '../../../hooks/useInn';
+import { SelectControl } from '../../Select/SelectControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+type InnSuggestion = {
+  fullName?: string;
+  address?: string;
+  inn?: string;
+};
+
+export const InnDadataField = JSX<CustomFieldProps>(({ field, input }) => {
+  const [options, setOptions] = useState<InnSuggestion[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useAsyncEffect(async () => {
+    const fieldInns = useInn(searchQuery);
+    setOptions(await fieldInns);
+
+    return options;
+  }, [searchQuery]);
+
+  const getOptions = useMemo(() => {
+    return (options || []).map((item) => ({
+      key: item?.inn ?? '',
+      text: item?.inn,
+      innDaData: {
+        companyName: item?.fullName,
+        companyAddress: item?.address,
+      },
+    }));
+  }, [options]);
+
+  return (
+    <SelectControl
+      label="ИНН"
+      placeholder="Введите ИНН"
+      options={getOptions}
+      {...field(input?.name ?? '')}
+      isSearch
+      isManualInput
+      onSearchQuery={setSearchQuery}
+    />
+  );
+});

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

@@ -0,0 +1,47 @@
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { JSONRefObject } from '../../../data/JSONRefObject';
+import { UniBlock } from '../../../UniBlock/UniBlock';
+import type { UniBlockProps } from '../../../UniBlock/UniBlockProps';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+export interface PartnerSymbolCodeFieldProps extends CustomFieldProps, UniBlockProps {
+  source?: JSONRefObject & {
+    agentsList?: AgentType[];
+  };
+}
+
+export type AgentType = {
+  isActive?: boolean;
+  symbolCode?: string;
+  ID?: string;
+  agentName?: string;
+};
+
+export const PartnerSymbolCodeField = UniBlock<PartnerSymbolCodeFieldProps>(
+  ({ field, input, source }) => {
+    const agentsList = source?.agentsList;
+    const { value: partnerCode } = field('partnerSymbolCode');
+    const [symbolCodeError, setSymbolCodeError] = useState('');
+    const isPartnerCodeExist = agentsList?.some((item) => item?.symbolCode === partnerCode);
+
+    useEffect(() => {
+      setSymbolCodeError(
+        partnerCode && !isPartnerCodeExist
+          ? 'ID партнера не найден. Обратитесь к своему менеджеру'
+          : '',
+      );
+    }, [partnerCode]);
+
+    return (
+      <InputControl
+        label="Идентификатор партнера"
+        isInteger={true}
+        maxLength={12}
+        {...input}
+        {...field(input?.name ?? '')}
+        error={symbolCodeError || field('partnerSymbolCode')?.error}
+      />
+    );
+  },
+);

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

@@ -7,6 +7,7 @@ type NameFieldApplicationDef =
   | 'fullName'
   | 'inn'
   | 'comment'
+  | 'fullRegion'
   | 'region'
   | 'addressBranch'
   | 'typeForm'
@@ -37,6 +38,9 @@ type NameFieldApplicationDef =
   | 'representativeName'
   | 'regionBranch'
   | 'consentToReceiveMaterials'
-  | 'consentDataProcessing';
+  | 'consentDataProcessing'
+  | 'partnerSymbolCode'
+  | 'innDadata'
+  | 'companyNameByInn';
 
 export type NameFieldDef = NameFieldApplicationDef;

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

@@ -13,10 +13,13 @@ import { BankEmpoleeField } from './Fields/BankEmpoleeField';
 import { BirthdayField } from './Fields/BirthdayField';
 import { CollectionCountField } from './Fields/CollectionCountField';
 import { CommentField } from './Fields/CommentField';
+import { CompanyNameByInnField } from './Fields/CompanyNameByInnField';
 import { DesiredMeetingDateField } from './Fields/DesiredMeetingDateField';
 import { EmailField } from './Fields/EmailField';
 import { FeedbackMethodField } from './Fields/FeedbackMethodField';
 import { FullNameField } from './Fields/FullNameField';
+import { FullRegionField } from './Fields/FullRegionField';
+import { InnDadataField } from './Fields/InnDadataField';
 import { InnField } from './Fields/InnField';
 import { IsClientField } from './Fields/IsClientField';
 import { LocalitiesField } from './Fields/LocalitiesField';
@@ -24,11 +27,11 @@ import { MiddleNameField } from './Fields/MiddleNameField';
 import { NameField } from './Fields/NameField';
 import { OnlineCheckoutField } from './Fields/OnlineCheckoutField';
 import { PartnerCommentsField } from './Fields/PartnerCommentsField';
+import { PartnerSymbolCodeField } from './Fields/PartnerSymbolCodeField';
 import { PhoneField } from './Fields/PhoneField';
 import { PosTerminalField } from './Fields/PosTerminalField';
 import { ProductField } from './Fields/ProductField';
 import { RegionField } from './Fields/RegionField';
-import { RegionPremiumField } from './Fields/RegionPremiumField';
 import { RepresentativeNameField } from './Fields/RepresentativeNameField';
 import { SecondaryPhoneField } from './Fields/SecondaryPhoneField';
 import { ServiceDirectionField } from './Fields/ServiceDirectionField';
@@ -46,6 +49,10 @@ const PRODUCT_REF = {
   $ref: '/wcms-resources/outservice-productlist.json',
 };
 
+const AGENTS_REF = {
+  $ref: '/wcms-resources/agenty-dlya-rko.json',
+};
+
 const InputsMap = {
   fullName: FullNameField,
   addressBranch: AddressBranchField,
@@ -70,7 +77,7 @@ const InputsMap = {
   applicationDate: ApplicationDateField,
   region: (props: CustomFieldProps) =>
     getPremium(props?.params?.typeForm as FormTypeFieldDef) ? (
-      <RegionPremiumField {...props} />
+      <FullRegionField {...props} />
     ) : (
       <RegionField {...props} />
     ),
@@ -87,6 +94,12 @@ const InputsMap = {
   email: EmailField,
   inn: InnField,
   comment: CommentField,
+  fullRegion: FullRegionField,
+  partnerSymbolCode: (props: CustomFieldProps) => (
+    <PartnerSymbolCodeField {...props} source={AGENTS_REF} />
+  ),
+  innDadata: InnDadataField,
+  companyNameByInn: CompanyNameByInnField,
 };
 
 export const getField =

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

@@ -6,6 +6,7 @@ import {
   defaultSelectValidator,
   defaultValidator,
   emailValidator,
+  innDadataValidator,
   innValidator,
   nameValidator,
   phoneValidator,
@@ -40,6 +41,9 @@ export const validatorObj: Record<string, Validator> = {
   typeForm: defaultValidator(),
   consentToReceiveMaterials: agreementValidator,
   consentDataProcessing: agreementValidator,
+  partnerSymbolCode: defaultValidator(),
+  innDadata: innDadataValidator('Укажите ИНН'),
+  companyNameByInn: defaultValidator(),
 };
 
 export const getFormValidator = <FormState extends Record<string, any>, F extends BaseFieldDef>(

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

@@ -1,4 +1,4 @@
 import { type ColumnsCount } from '../../model/ColumnCount';
 
 export const inputColumnStyles = (column: ColumnsCount | undefined) =>
-  column === 2 ? '@xl:grid-cols-2' : '';
+  column === 2 ? '@xl:grid-cols-2' : '@xl:grid-cols-1 gap-x-0';

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

@@ -2,6 +2,12 @@ import { isCyrillic } from '../../utils/isCyrilic';
 import { required } from '../../validation/required';
 import { validator } from '../../validation/validator';
 
+interface DadataItem {
+  text?: string;
+  key?: string;
+  innDaData?: any;
+}
+
 const ERROR_MESSAGE = 'Некорректно заполненное поле';
 
 export const defaultValidator = (errorMsg?: string) => required(errorMsg ?? ERROR_MESSAGE);
@@ -15,7 +21,10 @@ export const nameValidator = (errorMsg?: string) =>
   );
 
 export const innValidator = (errorMsg: string) =>
-  validator((_) => typeof _ === 'string' && (_.length === 10 || _.length === 12))(errorMsg);
+  validator((_: string) => isValidInnLength(_))(errorMsg);
+
+export const innDadataValidator = (errorMsg: string) =>
+  validator((_: DadataItem) => Boolean(_?.text) && isValidInnLength(_.text))(errorMsg);
 
 const phoneValidate = (email: string) =>
   /^(\+7)?[\s-]?\(?[0-9]{3}\)?[\s-]?[0-9]{3}[\s-]?[0-9]{2}[\s-]?[0-9]{2}$/.test(email);
@@ -33,3 +42,6 @@ const emailValidate = (email: string) => /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,4}$/.test
 
 export const emailValidator = (errorMsg: string) =>
   validator((_: string) => emailValidate(_))(errorMsg);
+
+const isValidInnLength = (value: string | undefined): boolean =>
+  typeof value === 'string' && (value.length === 10 || value.length === 12);

package/mobile/src/ui-kit/Select/Option.ts

@@ -1,5 +1,11 @@
 import type { TextProps } from '../../model/HeadlineType';
 
+type companyData = {
+  companyName?: string;
+  companyAddress?: string;
+};
+
 export type Option = TextProps & {
   key: string;
+  innDaData?: companyData;
 };