@redneckz/wildless-cms-uni-blocks 0.14.913 → 0.14.915

package/mobile/src/components/ApplicationForm/ApplicationForm.example.json

@@ -28,12 +28,12 @@
             "columns": 2,
             "inputs": [
               {
-                "name": "fullName",
+                "name": "dadataPartyNameSelect",
                 "required": true,
                 "label": "Наименование организации"
               },
               {
-                "name": "inn",
+                "name": "dadataPartyInnSelect",
                 "required": true
               },
               {
@@ -205,7 +205,7 @@
                 "required": true
               },
               {
-                "name": "inn",
+                "name": "dadataPartyInnSelect",
                 "required": true
               },
               {
@@ -339,7 +339,7 @@
           {
             "inputs": [
               {
-                "name": "fullName",
+                "name": "companyNameDadata",
                 "required": true,
                 "label": "Наименование организации"
               }
@@ -407,7 +407,7 @@
             "columns": 2,
             "inputs": [
               {
-                "name": "fullName",
+                "name": "dadataPartyNameSelect",
                 "required": true,
                 "label": "Наименование организации"
               },
@@ -416,7 +416,7 @@
                 "required": true
               },
               {
-                "name": "inn",
+                "name": "dadataPartyInnSelect",
                 "required": true
               },
               {
@@ -659,9 +659,7 @@
                 "required": true,
                 "condition": {
                   "name": "serviceDirection",
-                  "values": [
-                    "Юридическое лицо / ИП"
-                  ]
+                  "values": ["Юридическое лицо / ИП"]
                 }
               },
               {
@@ -669,9 +667,7 @@
                 "label": "Наименование организации",
                 "condition": {
                   "name": "serviceDirection",
-                  "values": [
-                    "Юридическое лицо / ИП"
-                  ]
+                  "values": ["Юридическое лицо / ИП"]
                 }
               },
               {
@@ -926,9 +922,7 @@
                 "required": true,
                 "condition": {
                   "name": "vedTypes",
-                  "values": [
-                    "currencyControl"
-                  ]
+                  "values": ["currencyControl"]
                 }
               }
             ]
@@ -937,18 +931,15 @@
             "columns": 2,
             "inputs": [
               {
-                "name": "inn",
+                "name": "innDadata",
                 "required": true,
                 "condition": {
                   "name": "vedTypes",
-                  "values": [
-                    "currencyControl",
-                    "documentOperations"
-                  ]
+                  "values": ["currencyControl", "documentOperations"]
                 }
               },
               {
-                "name": "fullName",
+                "name": "dadataPartyNameSelect",
                 "required": true,
                 "label": "Наименование организации"
               },
@@ -966,11 +957,7 @@
                 "required": true,
                 "condition": {
                   "name": "vedTypes",
-                  "values": [
-                    "documentOperations",
-                    "conversionTransactions",
-                    "otherIssues"
-                  ]
+                  "values": ["documentOperations", "conversionTransactions", "otherIssues"]
                 }
               }
             ]
@@ -1137,7 +1124,7 @@
                 "required": true
               },
               {
-                "name": "inn",
+                "name": "dadataPartyInnSelect",
                 "required": true
               }
             ]
@@ -1181,7 +1168,7 @@
                 "required": true
               },
               {
-                "name": "inn"
+                "name": "dadataPartyInnSelect"
               }
             ]
           }
@@ -1354,9 +1341,7 @@
                 "required": true,
                 "condition": {
                   "name": "serviceDirection",
-                  "values": [
-                    "Юридическое лицо / ИП"
-                  ]
+                  "values": ["Юридическое лицо / ИП"]
                 }
               },
               {
@@ -1364,9 +1349,7 @@
                 "label": "Наименование организации",
                 "condition": {
                   "name": "serviceDirection",
-                  "values": [
-                    "Юридическое лицо / ИП"
-                  ]
+                  "values": ["Юридическое лицо / ИП"]
                 }
               },
               {
@@ -1383,9 +1366,7 @@
                 "label": "Ваше сообщение",
                 "condition": {
                   "name": "serviceDirection",
-                  "values": [
-                    "Физическое лицо"
-                  ]
+                  "values": ["Физическое лицо"]
                 }
               },
               {
@@ -1394,9 +1375,7 @@
                 "required": true,
                 "condition": {
                   "name": "serviceDirection",
-                  "values": [
-                    "Юридическое лицо / ИП"
-                  ]
+                  "values": ["Юридическое лицо / ИП"]
                 }
               }
             ]
@@ -1448,11 +1427,11 @@
             "columns": 2,
             "inputs": [
               {
-                "name": "innDadata",
+                "name": "dadataPartyNameSelect",
                 "required": true
               },
               {
-                "name": "companyNameByInn",
+                "name": "dadataPartyInnSelect",
                 "required": true
               }
             ]
@@ -1553,4 +1532,4 @@
       }
     }
   ]
-]
+]

package/mobile/src/components/ApplicationForm/getFormatData.tsx

@@ -22,6 +22,9 @@ export const getFormatData = (data: FormState): Record<string, any> => {
     situationDescription,
     applierType,
     isPremium,
+    dadataPartyNameSelect,
+    partnerSymbolCode,
+    dadataPartyInnSelect,
     ...usedData
   } = data;
   const partnerComments = acquiringType || annualRevenue ? getPartnerComments(data) : null;
@@ -34,6 +37,10 @@ export const getFormatData = (data: FormState): Record<string, any> => {
     ...(serviceType ? { typeForm: serviceType } : {}),
     ...getIncidentComment(sufferedFrom?.text, situationDescription),
     ...getIsClient(applierType),
+    ...getDadataValues([
+      [dadataPartyInnSelect, 'inn'],
+      [dadataPartyNameSelect, 'fullName'],
+    ]),
   };
 
   return Object.fromEntries(
@@ -58,3 +65,12 @@ const getVedTypes = (vedTypes?: string): { vedTypes?: Record<string, boolean> }
         vedTypes: Object.fromEntries(VED_TYPES.map(({ id }) => [id, id === vedTypes])),
       }
     : {};
+
+const getDadataValues = (fields: [Option | undefined, string][]): Record<string, string> =>
+  fields.reduce((acc, [field, name]) => {
+    if (field?.text && name) {
+      acc[name] = field.text;
+    }
+
+    return acc;
+  }, {});

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

@@ -34,6 +34,9 @@ export interface FormState {
   situationDescription?: string;
   applierType?: ApplierType;
   isPremium?: boolean;
+  partnerSymbolCode?: string;
+  dadataPartyInnSelect?: Option;
+  dadataPartyNameSelect?: Option;
 }
 
 const initialFormState = {

package/mobile/src/hooks/{useInn.ts → useDadataParty.ts}

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

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

@@ -94,7 +94,7 @@ export const BaseTile = JSX<BaseTileProps>(
 
 const renderMiddleContent = (insetTitle: VNode, children: VNode) =>
   insetTitle || children ? (
-    <div className="grow space-y-lg w-fit">
+    <div className="space-y-lg">
       {insetTitle}
       {children}
     </div>

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

@@ -0,0 +1,150 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useAsyncEffect } from '../../../hooks/useAsyncEffect';
+import { useDadataParty, type DaDataPartyHint } from '../../../hooks/useDadataParty';
+import { type OptionWithData } from '../../Select/Option';
+import { SelectControl } from '../../Select/SelectControl';
+import { Text } from '../../Text/Text';
+import { type CustomFieldProps } from '../CustomFieldProps';
+
+type FieldType = 'dadataPartyInnSelect' | 'dadataPartyNameSelect';
+
+type FieldConfig = {
+  label: string;
+  placeholder: string;
+  inputProps?: {
+    isInteger?: boolean;
+    maxLength?: number;
+  };
+};
+
+type FieldMappingValue = {
+  fieldValue: string;
+  linkedFieldName: string;
+  linkedFieldValue: string;
+};
+
+const FIELD_MAPPING: Record<FieldType, FieldMappingValue> = {
+  dadataPartyInnSelect: {
+    fieldValue: 'inn',
+    linkedFieldName: 'dadataPartyNameSelect',
+    linkedFieldValue: 'fullName',
+  },
+  dadataPartyNameSelect: {
+    fieldValue: 'fullName',
+    linkedFieldName: 'dadataPartyInnSelect',
+    linkedFieldValue: 'inn',
+  },
+};
+
+const FIELD_CONFIG: Record<FieldType, FieldConfig> = {
+  dadataPartyInnSelect: {
+    label: 'ИНН',
+    placeholder: 'Введите ИНН',
+    inputProps: {
+      isInteger: true,
+      maxLength: 12,
+    },
+  },
+  dadataPartyNameSelect: {
+    label: 'Полное наименование',
+    placeholder: 'Введите полное наименование',
+  },
+};
+
+export const DadataPartySelectField = JSX<CustomFieldProps>(({ field, input = {} }) => {
+  const fieldName = input.name ?? '';
+
+  const linkedField = FIELD_MAPPING[fieldName].linkedFieldName;
+  const linkedFieldValue = field(linkedField).value;
+  const linkedFieldValueData = linkedFieldValue?.data;
+
+  useAsyncEffect(async () => {
+    if (
+      linkedFieldValueData?.fullName &&
+      linkedFieldValueData?.fullName !== field(fieldName)?.value?.data?.fullName
+    ) {
+      const fieldValues = getFieldValues(linkedFieldValue as OptionWithData<DaDataPartyHint>);
+      const { fullName, address, inn } = fieldValues;
+
+      const optionTextValue = getLinkedFieldValue(fieldValues, linkedField as string);
+      const dadataFields = useDadataParty(optionTextValue);
+      setSearchQuery(optionTextValue);
+
+      setOptions(await dadataFields);
+
+      field(fieldName)?.onChange?.({
+        key: inn,
+        text: optionTextValue,
+        data: {
+          fullName,
+          address,
+        },
+      });
+    }
+  }, [linkedFieldValueData]);
+
+  const [options, setOptions] = useState<DaDataPartyHint[]>([]); // InnSuggestion
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useAsyncEffect(async () => {
+    const dadataFields = useDadataParty(searchQuery);
+    setOptions(await dadataFields);
+
+    return options;
+  }, [searchQuery]);
+
+  const getOptions = useMemo(
+    () =>
+      (options || []).map((item = {}) => ({
+        key: item.inn ?? '',
+        text: item[FIELD_MAPPING[fieldName].fieldValue],
+        data: {
+          fullName: item.fullName,
+          address: item.address,
+        },
+      })),
+    [options],
+  );
+
+  return (
+    <SelectControl
+      {...FIELD_CONFIG[fieldName]}
+      options={getOptions}
+      {...field(input.name ?? '')}
+      isSearch
+      isManualInput
+      disableFilterOptions={true}
+      onSearchQuery={setSearchQuery}
+      renderOptions={renderOptions}
+    />
+  );
+});
+
+export type CompanyDataProps = {
+  fullName?: string;
+  address?: string;
+};
+
+const getFieldValues = (value: OptionWithData<CompanyDataProps>): DaDataPartyHint => ({
+  inn: value?.key,
+  fullName: value?.data?.fullName,
+  address: value?.data?.address,
+});
+
+const renderOptions = (option: OptionWithData<CompanyDataProps>) => (
+  <span>
+    <Text size="text-s">{option?.data?.fullName}</Text>
+    <div className="space-x-2">
+      <Text size="text-s" font="font-light">
+        {option?.key}
+      </Text>
+      <Text size="text-s" font="font-light">
+        {option?.data?.address}
+      </Text>
+    </div>
+  </span>
+);
+
+const getLinkedFieldValue = (fieldValues: DaDataPartyHint, linkedField: string): string =>
+  fieldValues?.[FIELD_MAPPING[linkedField].linkedFieldValue];

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

@@ -40,8 +40,8 @@ type NameFieldApplicationDef =
   | 'consentToReceiveMaterials'
   | 'consentDataProcessing'
   | 'partnerSymbolCode'
-  | 'innDadata'
-  | 'companyNameByInn'
-  | 'partnerName';
+  | 'partnerName'
+  | 'dadataPartyNameSelect'
+  | 'dadataPartyInnSelect';
 
 export type NameFieldDef = NameFieldApplicationDef;

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

@@ -13,13 +13,12 @@ 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 { DadataPartySelectField } from './Fields/DadataPartySelectField';
 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';
@@ -100,9 +99,9 @@ const InputsMap = {
   partnerSymbolCode: (props: CustomFieldProps) => (
     <PartnerSymbolCodeField {...props} source={AGENTS_REF} />
   ),
-  innDadata: InnDadataField,
-  companyNameByInn: CompanyNameByInnField,
   partnerName: (props: CustomFieldProps) => <PartnerNameField {...props} source={AGENTS_REF} />,
+  dadataPartyNameSelect: DadataPartySelectField,
+  dadataPartyInnSelect: DadataPartySelectField,
 };
 
 export const getField =

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

@@ -41,9 +41,9 @@ export const validatorObj: Record<string, Validator> = {
   typeForm: defaultValidator(),
   consentToReceiveMaterials: agreementValidator,
   consentDataProcessing: agreementValidator,
-  partnerSymbolCode: defaultValidator(),
-  innDadata: innDadataValidator('Укажите ИНН'),
-  companyNameByInn: defaultValidator(),
+  partnerSymbolCode: defaultValidator('Укажите идентификатор партнёра'),
+  dadataPartyInnSelect: innDadataValidator('Укажите ИНН'),
+  dadataPartyNameSelect: defaultValidator('Укажите наименование организации'),
 };
 
 export const getFormValidator = <FormState extends Record<string, any>, F extends BaseFieldDef>(

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

@@ -1,11 +1,9 @@
 import type { TextProps } from '../../model/HeadlineType';
 
-type companyData = {
-  companyName?: string;
-  companyAddress?: string;
-};
-
 export type Option = TextProps & {
   key: string;
-  innDaData?: companyData;
+};
+
+export type OptionWithData<T = unknown> = Option & {
+  data?: T;
 };

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

@@ -8,7 +8,7 @@ import { debounce } from '../../utils/debounce';
 import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
 import { renderLabel } from '../Input/renderLabel';
-import { type Option } from './Option';
+import { type Option, type OptionWithData } from './Option';
 import { renderSearchInput } from './renderSearchInput';
 import { renderSelectContainer } from './renderSelectContainer';
 import { useSelectPopup } from './useSelectPopup';
@@ -23,6 +23,7 @@ export interface SelectProps extends DefaultControlType, ControlProps<Option> {
   inputProps?: InputTypeProps;
   disableFilterOptions?: boolean;
   onSearchQuery?: (value: string) => void;
+  renderOptions?: (option?: OptionWithData) => void;
 }
 
 export type InputTypeProps = {
@@ -44,6 +45,7 @@ export const Select = JSX<SelectProps>(
     onSearchQuery = noop,
     inputProps,
     disableFilterOptions = false,
+    renderOptions,
     ...rest
   }) => {
     const [isOpen, { setFalse: close, setTrue: open }] = useBool();
@@ -61,19 +63,19 @@ export const Select = JSX<SelectProps>(
     }, [isDisabled]);
 
     const handleClose = useCallback(() => {
-      !isManualInput && setQuery('');
+      !isSearch && setQuery('');
       close();
     }, [isManualInput]);
 
     const handleChangeQuery = useCallback(
       (newQuery: string) => {
         setQuery(newQuery);
-        isManualInput && onChange?.({ key: newQuery, text: newQuery, innDaData: {} });
+        isManualInput && onChange?.({ key: newQuery, text: newQuery });
         debouncedOnSearchQuery?.(newQuery);
       },
       [isManualInput, onChange, debouncedOnSearchQuery],
     );
-    const selectState = { query, value, options, isOpen, iconVersion };
+    const selectState = { query, value, options, isOpen, iconVersion, renderOptions, isSearch };
     const inputRef = useSelectPopup({
       onChange,
       onClose: handleClose,

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

@@ -3,15 +3,18 @@ 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';
+import { type Option, type OptionWithData } from './Option';
 
-export interface SelectPopupProps extends ControlProps<Option> {
+export interface SelectPopupProps extends ControlProps<Option>, SelectSearchProps {
   iconVersion?: IconVersion;
   options?: Option[];
   popupRef?: { current: HTMLDivElement | null };
+  renderOptions?: (option: OptionWithData) => void;
+}
+
+interface SelectSearchProps {
   query?: string;
   onChangeQuery?: (value: string) => void;
   disableFilterOptions?: boolean;
@@ -22,11 +25,13 @@ export const SelectPopup = JSX<SelectPopupProps>(
     popupRef,
     options,
     value,
-    query,
     iconVersion,
-    disableFilterOptions,
     onChange,
+    renderOptions = renderDefaultOptions,
+    // TODO: вынести в хук отвечающий за фильтрацию
+    query,
     onChangeQuery,
+    disableFilterOptions,
   }) =>
     options?.length ? (
       <div
@@ -48,22 +53,7 @@ export const SelectPopup = JSX<SelectPopupProps>(
               }
             }}
           >
-            {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>
-            )}
-
+            {renderOptions(option)}
             <Icon
               name="DoneSimpleIcon"
               width="16"
@@ -78,3 +68,7 @@ export const SelectPopup = JSX<SelectPopupProps>(
       </div>
     ) : null,
 );
+
+const renderDefaultOptions = (option: Option) => (
+  <span className="min-h-6">{formatOption(option)}</span>
+);

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

@@ -10,6 +10,7 @@ interface SelectPopupOptions extends SelectPopupProps, OnCloseProps {
   isOpen?: boolean;
   onChangeQuery?: (value: string) => void;
   disableFilterOptions?: boolean;
+  isSearch?: boolean;
 }
 
 export function useSelectPopup({
@@ -22,6 +23,8 @@ export function useSelectPopup({
   iconVersion,
   disableFilterOptions = false,
   onChangeQuery = noop,
+  renderOptions,
+  isSearch = false,
 }: SelectPopupOptions) {
   const popup = usePopupManager();
 
@@ -34,11 +37,15 @@ export function useSelectPopup({
     (option: Option) => {
       close();
       onChange(option);
-      onChangeQuery('');
+      onChangeQuery(isSearch && option?.text ? option.text : '');
     },
     [close, onChange],
   );
 
+  useEffect(() => {
+    onChangeQuery(isSearch && value?.text ? value.text : '');
+  }, [value]);
+
   const inputRef = useRef<HTMLDivElement | null>(null);
   const popupRef = useOutsideClick<HTMLDivElement>(close);
 
@@ -61,6 +68,7 @@ export function useSelectPopup({
           disableFilterOptions={disableFilterOptions}
           onChange={handleChange}
           onChangeQuery={onChangeQuery}
+          renderOptions={renderOptions}
         />
       ),
       top: top + window.scrollY + height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.913",
+  "version": "0.14.915",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/api/LeadServiceAPI.ts

@@ -13,7 +13,6 @@ export type LeadRequest = Record<string, JSONRecord | JSONScalar | null> & {
   fullRegion?: string;
   secondaryPhoneNumber?: string;
   partnerSymbolCode?: string;
-  companyNameByInn?: string;
   partnerName?: string;
 };