@redneckz/wildless-cms-uni-blocks 0.14.876 → 0.14.878

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/Input/renderErrorText.tsx

@@ -1,7 +1,7 @@
 import { Text } from '../Text/Text';
 
 export const renderErrorText = (error: string | undefined) => (
-  <div className="h-6">
+  <div className="min-h-6">
     {error ? (
       <Text size="text-xs" font="font-light" color="text-error">
         {error}

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;
 };

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

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { type ControlProps } from '../../model/ControlProps';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type IconVersion } from '../../model/IconVersion';
+import { debounce } from '../../utils/debounce';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
@@ -17,9 +18,18 @@ export interface SelectProps extends DefaultControlType, ControlProps<Option> {
   valid?: boolean;
   isBorder?: boolean;
   isSearch?: boolean;
+  isManualInput?: boolean;
   iconVersion?: IconVersion;
+  onSearchQuery?: (value: string) => void;
 }
 
+type renderOptionTextProps = {
+  isManualInput?: boolean;
+  query?: string;
+  value?: Option;
+  placeholder?: string;
+};
+
 export const Select = JSX<SelectProps>(
   ({
     className,
@@ -30,15 +40,23 @@ export const Select = JSX<SelectProps>(
     isBorder = true,
     placeholder = '',
     isSearch = false,
+    isManualInput = false,
     disabled = false,
     iconVersion = 'black',
     onChange,
+    onSearchQuery,
   }) => {
     const [isOpen, { setFalse: close, setTrue: open }] = useBool();
     const [query, setQuery] = useState('');
-    const isDisabled = getDisabled(disabled, options.length);
+    const isDisabled = getDisabled(disabled, options.length, isManualInput);
+    const isIconHidden = getIconHidden(isManualInput, options);
     const hasOpen = isOpen && !isDisabled;
 
+    const debouncedOnSearchQuery = useMemo(
+      () => onSearchQuery && getDebouncedSearchQuery(onSearchQuery),
+      [onSearchQuery],
+    );
+
     const handleOpen = useCallback(() => {
       if (isDisabled) {
         return;
@@ -47,8 +65,14 @@ export const Select = JSX<SelectProps>(
       open();
     }, [isDisabled]);
 
+    const handleChangeQuery = (newQuery: string) => {
+      setQuery(newQuery);
+      setOption(newQuery, onChange);
+      debouncedOnSearchQuery && debouncedOnSearchQuery(newQuery);
+    };
+
     const handleClose = useCallback(() => {
-      setQuery('');
+      !isManualInput && setQuery('');
       close();
     }, []);
 
@@ -60,6 +84,7 @@ export const Select = JSX<SelectProps>(
       onChange,
       onClose: handleClose,
       iconVersion,
+      onChangeQuery: setQuery,
     });
 
     return (
@@ -73,26 +98,43 @@ export const Select = JSX<SelectProps>(
             )}
             onClick={hasOpen ? handleClose : handleOpen}
           >
-            <p className="line-clamp-2 text-ellipsis">{formatOption(value) || placeholder}</p>
-            {renderIcon(hasOpen, iconVersion)}
+            <p className="line-clamp-2 text-ellipsis">
+              {useRenderOptionText({ isManualInput, query, value, placeholder })}
+            </p>
+            {isIconHidden ? '' : renderIcon(hasOpen, iconVersion)}
           </div>
-          {isSearch && hasOpen ? (
-            <div className={style('absolute top-0 w-full z-20')}>
-              <Input
-                type="text"
-                value={query}
-                autoFocus
-                disabled={isDisabled}
-                onChange={setQuery}
-              />
-            </div>
-          ) : null}
+          {isSearch && hasOpen ? renderSearchInput(query, isDisabled, handleChangeQuery) : null}
         </div>
       </div>
     );
   },
 );
 
+const useRenderOptionText = (data: renderOptionTextProps) =>
+  useMemo(() => {
+    if (data.isManualInput && data.query) {
+      return data.query;
+    }
+
+    return formatOption(data.value) || data.placeholder;
+  }, [data.isManualInput, data.query, data.value, data.placeholder]);
+
+const renderSearchInput = (
+  query: string,
+  isDisabled: boolean,
+  onChangeQuery: (value: string) => void,
+) => (
+  <div className={style('absolute top-0 w-full z-20')}>
+    <Input
+      type="text"
+      value={query}
+      autoFocus
+      disabled={isDisabled}
+      onChange={(value) => onChangeQuery(value)}
+    />
+  </div>
+);
+
 const renderIcon = (isOpen: boolean, iconVersion?: IconVersion) => (
   <Icon
     className={style('absolute right-0 flex self-center', { 'rotate-180': !isOpen })}
@@ -111,4 +153,16 @@ const getStyle = (isBorder: boolean, valid: boolean, disabled: boolean) =>
     valid ? 'border-gray' : 'border-error',
   );
 
-const getDisabled = (disabled: boolean, length: number) => disabled || length === 0;
+// TODO Нужен рефактор и декомпозиция компонента getDisabled, setOption, getIconHidden
+const getDisabled = (disabled: boolean, length: number, isManualInput: boolean) =>
+  disabled || (!isManualInput && length === 0);
+
+const setOption = (query: string, onChange?: (data: Option) => void) => {
+  onChange && query.trim() !== '' && onChange({ key: query, text: query, innDaData: {} });
+};
+
+const getIconHidden = (isManualInput: boolean, options: Option[]) =>
+  isManualInput && !options.length;
+
+const getDebouncedSearchQuery = (onSearchQuery: (value: string) => void) =>
+  debounce((searchValue: string) => onSearchQuery(searchValue), 300);

package/mobile/src/ui-kit/Select/SelectPopup.tsx

@@ -3,6 +3,7 @@ import { type ControlProps } from '../../model/ControlProps';
 import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
+import { Text } from '../Text/Text';
 import { filterOptions } from './filterOptions';
 import { formatOption } from './formatOption';
 import { type Option } from './Option';
@@ -12,10 +13,11 @@ export interface SelectPopupProps extends ControlProps<Option> {
   options?: Option[];
   popupRef?: { current: HTMLDivElement | null };
   query?: string;
+  onChangeQuery?: (value: string) => void;
 }
 
 export const SelectPopup = JSX<SelectPopupProps>(
-  ({ popupRef, options, value, query, onChange, iconVersion }) =>
+  ({ popupRef, options, value, query, onChange, iconVersion, onChangeQuery }) =>
     options?.length ? (
       <div
         className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
@@ -31,11 +33,27 @@ export const SelectPopup = JSX<SelectPopupProps>(
             onClick={(e) => {
               e.stopPropagation();
               if (onChange) {
+                onChangeQuery?.('');
                 onChange(option);
               }
             }}
           >
-            <span className="min-h-6">{formatOption(option)}</span>
+            {option?.innDaData ? (
+              <span>
+                <Text size="text-s">{option?.innDaData?.companyName}</Text>
+                <div className="space-x-2">
+                  <Text size="text-s" font="font-light">
+                    {formatOption(option)}
+                  </Text>
+                  <Text size="text-s" font="font-light">
+                    {option?.innDaData?.companyAddress}
+                  </Text>
+                </div>
+              </span>
+            ) : (
+              <span className="min-h-6">{formatOption(option)}</span>
+            )}
+
             <Icon
               name="DoneSimpleIcon"
               width="16"

package/mobile/src/ui-kit/Select/useSelectPopup.tsx

@@ -7,6 +7,7 @@ import { SelectPopup, type SelectPopupProps } from './SelectPopup';
 
 interface SelectPopupOptions extends SelectPopupProps, OnCloseProps {
   isOpen?: boolean;
+  onChangeQuery?: (value: string) => void;
 }
 
 export function useSelectPopup({
@@ -17,6 +18,7 @@ export function useSelectPopup({
   onChange,
   onClose,
   iconVersion,
+  onChangeQuery,
 }: SelectPopupOptions) {
   const popup = usePopupManager();
 
@@ -29,6 +31,7 @@ export function useSelectPopup({
     (option: Option) => {
       close();
       onChange && onChange(option);
+      onChangeQuery && onChangeQuery('');
     },
     [close, onChange],
   );
@@ -53,6 +56,7 @@ export function useSelectPopup({
           query={query}
           onChange={handleChange}
           iconVersion={iconVersion}
+          onChangeQuery={onChangeQuery}
         />
       ),
       top: top + window.scrollY + height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.876",
+  "version": "0.14.878",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -204,7 +204,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "94 kB",
+      "limit": "95 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/LeadServiceAPI.ts

@@ -9,7 +9,18 @@ export type LeadRequest = Record<string, JSONRecord | JSONScalar | null> & {
   phone?: string;
   email?: string;
   inn?: string;
+  innDadata?: string;
+  fullRegion?: string;
   secondaryPhoneNumber?: string;
+  partnerSymbolCode?: string;
+  companyNameByInn?: string;
+};
+
+type PFFormData = {
+  innDadata?: string;
+  fullRegion?: string;
+  partnerSymbolCode?: string;
+  companyNameByInn?: string;
 };
 
 export function LeadServiceAPI() {
@@ -22,11 +33,15 @@ export function LeadServiceAPI() {
       birthday,
       desiredMeetingDate,
       inn,
+      innDadata,
+      fullRegion,
       addressBranch,
       secondaryPhone = '',
       bankEmpolee,
       applicationDate,
       serviceDirection,
+      partnerSymbolCode,
+      companyNameByInn,
       ...staticBody
     } = body;
     const isNaturalPerson = isIndividualType && serviceDirection !== 'Юридическое лицо / ИП';
@@ -46,6 +61,7 @@ export function LeadServiceAPI() {
             applicationDate,
             ...getSecondaryPhone(secondaryPhone as string),
           }),
+      ...formatPFForm(typeForm, { innDadata, fullRegion, partnerSymbolCode, companyNameByInn }),
       ...staticBody,
     };
 
@@ -85,8 +101,17 @@ const getEmail = (email?: string, isNaturalPerson = true) => ({
   [isNaturalPerson ? 'email' : 'mail']: email,
 });
 
-const getSecondaryPhone = (secondaryPhone = '') => {
-  return !secondaryPhone || secondaryPhone === '+7 ('
+const getSecondaryPhone = (secondaryPhone = '') =>
+  !secondaryPhone || secondaryPhone === '+7 ('
     ? {}
     : { secondaryPhoneNumber: formatPhone(secondaryPhone) };
-};
+
+const formatPFForm = (typeForm?: string, data?: PFFormData) =>
+  typeForm === 'PF'
+    ? {
+        inn: data?.innDadata,
+        region: data?.fullRegion,
+        partnerComments: data?.partnerSymbolCode,
+        fullname: data?.companyNameByInn,
+      }
+    : {};