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

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

@@ -1378,5 +1378,89 @@
         }
       }
     }
+  ],
+  [
+    "Онлайн-заявка от партнера",
+    {
+      "content": {
+        "version": "primary",
+        "title": "Онлайн-заявка от партнера",
+        "typeForm": "PF",
+        "endpoint": "sendcorporatedlead",
+        "sections": [
+          {
+            "title": "Информация о партнере",
+            "inputs": [
+              {
+                "name": "partnerSymbolCode",
+                "required": true
+              }
+            ]
+          },
+          {
+            "title": "Информация о компании",
+            "columns": 2,
+            "inputs": [
+              {
+                "name": "innDadata",
+                "required": true
+              },
+              {
+                "name": "companyNameByInn",
+                "required": true
+              }
+            ]
+          },
+          {
+            "title": "Данные контактного лица",
+            "columns": 2,
+            "inputs": [
+              {
+                "name": "surname",
+                "required": true
+              },
+              {
+                "name": "name",
+                "required": true
+              },
+              {
+                "name": "phone",
+                "required": true
+              },
+              {
+                "name": "email"
+              }
+            ]
+          },
+          {
+            "title": "Регион компании",
+            "inputs": [
+              {
+                "name": "fullRegion",
+                "required": true
+              }
+            ]
+          },
+          {
+            "title": "Комментарий",
+            "inputs": [
+              {
+                "name": "comment"
+              }
+            ]
+          }
+        ],
+        "button": {
+          "text": "Отправить заявку",
+          "version": "primary"
+        },
+        "link": {
+          "text": "Согласен на обработку персональных данных",
+          "href": "/privacy-policy",
+          "target": "_blank"
+        },
+        "isPremium": false
+      }
+    }
   ]
 ]

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

@@ -844,4 +844,51 @@ export default {
       <DialogManager />
     </div>
   ),
+  partner: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Онлайн-заявка от партнера"
+        typeForm="PF"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            title: 'Информация о партнере',
+            inputs: [{ name: 'partnerSymbolCode', required: true }],
+          },
+          {
+            title: 'Информация о компании',
+            columns: 2,
+            inputs: [
+              { name: 'innDadata', required: true },
+              { name: 'companyNameByInn', required: true },
+            ],
+          },
+          {
+            title: 'Данные контактного лица',
+            columns: 2,
+            inputs: [
+              { name: 'surname', required: true },
+              { name: 'name', required: true },
+              { name: 'phone', required: true },
+              { name: 'email' },
+            ],
+          },
+          {
+            title: 'Регион компании',
+            inputs: [{ name: 'fullRegion', required: true }],
+          },
+          {
+            title: 'Комментарий',
+            inputs: [{ name: 'comment' }],
+          },
+        ]}
+        button={button}
+        link={linkCorp}
+        additionalParams={{ isPremium: false }}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
 };

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -839,4 +839,51 @@ export default {
       <DialogManager />
     </div>
   ),
+  partner: (
+    <div className="container grid grid-cols-12">
+      <ApplicationForm
+        className="col-span-12"
+        title="Онлайн-заявка от партнера"
+        typeForm="PF"
+        endpoint="sendcorporatelead"
+        sections={[
+          {
+            title: 'Информация о партнере',
+            inputs: [{ name: 'partnerSymbolCode', required: true }],
+          },
+          {
+            title: 'Информация о компании',
+            columns: 2,
+            inputs: [
+              { name: 'innDadata', required: true },
+              { name: 'companyNameByInn', required: true },
+            ],
+          },
+          {
+            title: 'Данные контактного лица',
+            columns: 2,
+            inputs: [
+              { name: 'surname', required: true },
+              { name: 'name', required: true },
+              { name: 'phone', required: true },
+              { name: 'email' },
+            ],
+          },
+          {
+            title: 'Регион компании',
+            inputs: [{ name: 'fullRegion', required: true }],
+          },
+          {
+            title: 'Комментарий',
+            inputs: [{ name: 'comment' }],
+          },
+        ]}
+        button={button}
+        link={linkCorp}
+        additionalParams={{ isPremium: false }}
+      />
+      <PopupManager />
+      <DialogManager />
+    </div>
+  ),
 };

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -1,9 +1,10 @@
-import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { LeadServiceAPI } from '../../api/LeadServiceAPI';
 import { handleAspects } from '../../hooks/useAspects/handleAspects';
 import { useAspects } from '../../hooks/useAspects/useAspects';
-import { useForm } from '../../hooks/useForm/useForm';
+import { useForm, type FormFieldRegisterer } from '../../hooks/useForm/useForm';
+import { type FormTypeFieldDef } from '../../model/FormTypeFieldDef';
+import { type SectionsProps } from '../../model/InputSectionsType';
 import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
 import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { getConsentDataProcessing } from '../../ui-kit/FormField/getConsentDataProcessing';
@@ -13,19 +14,29 @@ import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
 import { renderTitle } from '../../ui-kit/FormField/renderTitle';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { ResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/ResponseTypeDialog';
+import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { type ApplicationFormContent, type FieldDef } from './ApplicationFormContent';
+import {
+  type additionalParamsType,
+  type ApplicationFormContent,
+  type FieldDef,
+} from './ApplicationFormContent';
 import { getFormatData } from './getFormatData';
 import { getInitialFormState, type FormState } from './getInitialFormState';
 import { renderAgreementSubmit } from './renderAgreementSubmit';
 import { renderContacts } from './renderContacts';
 
-interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
+export interface ApplicationFormProps extends ApplicationFormContent, UniBlockProps {}
+
+type renderSectionsType = {
+  typeForm: FormTypeFieldDef;
+  additionalParams?: additionalParamsType;
+};
 
 const API = LeadServiceAPI();
 
-export const ApplicationForm = JSX<ApplicationFormProps>(
+export const ApplicationForm = UniBlock<ApplicationFormProps>(
   ({
     className,
     title,
@@ -80,15 +91,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>(
         {...rest}
       >
         <form onSubmit={onSubmit}>
-          {sections.map((_, i) => (
-            <div
-              key={`section-${i}`}
-              className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}
-            >
-              {renderTitle(_.title)}
-              {(_?.inputs || [])?.map(getField<FieldDef>(field, { typeForm }))}
-            </div>
-          ))}
+          {renderSections(sections, field, { typeForm, additionalParams })}
           {renderAgreementSubmit(
             fieldName ? field('consentDataProcessing') : undefined,
             link,
@@ -100,3 +103,15 @@ export const ApplicationForm = JSX<ApplicationFormProps>(
     );
   },
 );
+
+const renderSections = (
+  sections: SectionsProps[],
+  field: FormFieldRegisterer<Record<string, any>>,
+  { typeForm, additionalParams }: renderSectionsType,
+) =>
+  sections.map((_, i) => (
+    <div key={`section-${i}`} className={style(inputColumnStyles(_.columns), 'grid gap-x-m')}>
+      {renderTitle(_.title)}
+      {(_?.inputs || [])?.map(getField<FieldDef>(field, { typeForm, ...additionalParams }))}
+    </div>
+  ));

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -1,6 +1,3 @@
-/* eslint-disable max-lines */
-/* eslint-disable max-len */
-
 import { type AspectsProps } from '../../model/AspectsProps';
 import { type ColumnsCount } from '../../model/ColumnCount';
 import { type FormTypeFieldDef } from '../../model/FormTypeFieldDef';
@@ -71,11 +68,16 @@ type productType = {
   product?: string;
 };
 
+type premiumForm = {
+  /** @title Форма для премиума */
+  isPremium?: boolean;
+};
+
 /**
  * @title Отображать выбор продукта
  * @default { "showProduct": "" }
  */
-type additionalParamsType = hideProductDef | showProductDef;
+export type additionalParamsType = premiumForm | hideProductDef | showProductDef;
 
 /**
  * @title Форма заявки настраиваемая

package/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/src/model/FormTypeFieldDef.ts

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

package/src/retail/adaptors/getPersonalInfoData.tsx

@@ -37,7 +37,7 @@ export const getPersonalInfoData = (formData: LeadFormState): Partial<Participan
     dulIssuedBy,
     dulNumber,
     dulSerie,
-    dulSubdivisionCode,
+    dulSubdivisionCode: dulSubdivisionCode?.replace('-', ''),
     educationLevelCd: education,
     registrationDate: participantDateRegistration
       ? formatDate(participantDateRegistration, true)

package/src/retail/api/dadataHints/dadataHints.ts

@@ -2,19 +2,29 @@ import { type DaDataSuggestion, type ListRequestOption } from './dadataHintsType
 
 const DEFAULT_HINTS_COUNT = 10;
 
-const defaultResponseItemHandler = (item?: DaDataSuggestion): string => item?.value || '';
+const defaultResponseItemHandler = (item?: DaDataSuggestion) => ({
+  value: item?.value || '',
+});
 
 const getResponseHandler =
-  (itemHandler: (item?: DaDataSuggestion) => string) =>
+  (
+    itemHandler: (item?: DaDataSuggestion) => {
+      value: string;
+      additionalValue?: string;
+    },
+    responseFilter?: (item?: DaDataSuggestion) => boolean,
+  ) =>
   (response: { suggestions: Array<DaDataSuggestion> }) => {
     const responseData: Array<DaDataSuggestion> = response?.suggestions || [];
+    const filteredData = responseFilter ? responseData.filter(responseFilter) : responseData;
 
-    return responseData.map((item) => {
-      const value = itemHandler(item);
+    return filteredData.map((item) => {
+      const data = itemHandler(item);
 
       return {
         ...item,
-        processedValue: value,
+        processedValue: data.value,
+        additionalValue: data.additionalValue,
       };
     });
   };
@@ -26,8 +36,9 @@ export const getDaDataHints = (options: ListRequestOption): Promise<Array<DaData
     queryPrefix,
     requestData = {},
     responseItemHandler = defaultResponseItemHandler,
+    responseFilter,
   } = options;
-  const responseHandler = getResponseHandler(responseItemHandler);
+  const responseHandler = getResponseHandler(responseItemHandler, responseFilter);
   const queryPrefixValue = queryPrefix ? `${queryPrefix}, ` : '';
   const combinedQuery = `${queryPrefixValue}${query}`;
 

package/src/retail/api/dadataHints/dadataHintsType.ts

@@ -1,11 +1,11 @@
 import { type Nullable } from '@redneckz/uni-jsx/lib/utils/ts/Nullable';
-import { type HintOption } from './hintsListsOptions';
 
 export interface DaDataSuggestion {
   value: string;
   unrestricted_value: string;
   data: DaDataResponseItem;
   processedValue: string;
+  additionalValue?: string;
 }
 
 type DaDataGender = 'MALE' | 'FEMALE' | 'UNKNOWN';
@@ -74,6 +74,13 @@ export interface ListRequestOption {
   url: string;
   query?: string;
   queryPrefix?: string;
-  requestData?: HintOption['requestData'];
-  responseItemHandler?: (item?: DaDataSuggestion) => string;
+  requestData?: {
+    parts?: string[];
+    gender?: string;
+  };
+  responseItemHandler?: (item?: DaDataSuggestion) => {
+    value: string;
+    additionalValue?: string;
+  };
+  responseFilter?: (item?: DaDataSuggestion) => boolean;
 }

package/src/retail/api/dadataHints/hintsListsOptions.ts

@@ -1,4 +1,4 @@
-import { type DaDataSuggestion } from './dadataHintsType';
+import { type DaDataSuggestion, type ListRequestOption } from './dadataHintsType';
 
 const NAME_HINTS_LIST_OPTIONS = {
   url: 'suggest/fio',
@@ -34,23 +34,39 @@ const PASSPORT_FMS_HINTS_LIST_OPTIONS = {
 
 const PASSPORT_CODE_HINTS_LIST_OPTIONS = {
   url: 'suggest/fms_unit',
-  responseItemHandler: (item?: DaDataSuggestion) => item?.data?.code?.replace('-', '') || '',
+  responseItemHandler: (item?: DaDataSuggestion) => ({
+    value: item?.data?.code || '',
+    additionalValue: item?.data?.name,
+  }),
 };
 
 const ORGANIZATION_NAME_HINTS_LIST_OPTIONS = {
   url: 'suggest/party',
+  responseItemHandler: (item?: DaDataSuggestion) => {
+    const inn = item?.data?.inn;
+    const address = item?.data?.address?.value || '';
+    const additionalValue = address ? `${inn} ${address}` : inn;
+
+    return {
+      value: item?.value || '',
+      additionalValue,
+    };
+  },
 };
 
 const ORGANIZATION_INN_HINTS_LIST_OPTIONS = {
   url: 'suggest/party',
-  responseItemHandler: (item?: DaDataSuggestion) => item?.data?.inn || '',
+  responseItemHandler: (item?: DaDataSuggestion) => ({
+    value: item?.data?.inn || '',
+  }),
 };
 
 const ADDRESS_HINTS_LIST_OPTIONS = {
   url: 'suggest/address',
+  responseFilter: (item?: DaDataSuggestion) => Boolean(item?.data?.postal_code),
 };
 
-export type HintsListOptions = Record<string, HintOption>;
+export type HintsListOptions = Record<string, ListRequestOption>;
 
 export const hintsListsOptions: HintsListOptions = {
   name: NAME_HINTS_LIST_OPTIONS,
@@ -66,12 +82,3 @@ export const hintsListsOptions: HintsListOptions = {
   organizationAddress: ADDRESS_HINTS_LIST_OPTIONS,
   addressCourier: ADDRESS_HINTS_LIST_OPTIONS,
 };
-
-export type HintOption = {
-  url: string;
-  requestData?: {
-    parts?: string[];
-    gender?: string;
-  };
-  responseItemHandler?: (item?: DaDataSuggestion) => string;
-};

package/src/retail/components/DaDataInputControl/DaDataInputControl.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { type InputProps } from '../../../ui-kit/Input/InputProps';
 import { InputWrapper } from '../../../ui-kit/Input/InputWrapper';
@@ -20,6 +21,7 @@ export const DaDataInputControl = JSX<DaDataInputProps>(
     name = '',
     daDataQueryPrefix,
     dadata = false,
+    type,
     ...rest
   }) => {
     const [isOpen, { setFalse: close, setTrue: open }] = useBool();
@@ -33,10 +35,22 @@ export const DaDataInputControl = JSX<DaDataInputProps>(
       onDaDataChange,
     });
 
+    const handleChange = useCallback(
+      (e?: string) => {
+        let formattedValue = e ?? '';
+
+        if (type === 'number') {
+          formattedValue = formattedValue.replace(/^0+(?=\d)/, '');
+        }
+        onChange?.(formattedValue);
+      },
+      [onChange],
+    );
+
     return (
       <InputWrapper
         value={value}
-        onChange={onChange}
+        onChange={handleChange}
         inputRef={inputRef}
         isOpen={isOpen}
         onOpen={open}

package/src/retail/components/DaDataInputControl/InputPopup.tsx

@@ -47,13 +47,16 @@ export const InputPopup = JSX<InputPopupProps>(({ options, container, onChange }
       {options?.map((item, key) => (
         <div
           key={key.toString()}
-          className={style('flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative', {
+          className={style('px-m py-xs cursor-pointer hover:bg-main-divider relative', {
             'bg-main-divider': listItemActive === key,
           })}
           role="listitem"
           onMouseDown={() => onChange(item)}
         >
-          <span className="min-h-6">{item.processedValue}</span>
+          <p>{item.processedValue}</p>
+          {item.additionalValue ? (
+            <p className="text-xs text-secondary-text">{item.additionalValue}</p>
+          ) : null}
         </div>
       ))}
     </div>

package/src/retail/components/DaDataInputControl/useInputPopup.tsx

@@ -57,6 +57,7 @@ export function useInputPopup({
       const result = await getDaDataHints({
         url: defaultHintsListOptions.url,
         responseItemHandler: defaultHintsListOptions.responseItemHandler,
+        responseFilter: defaultHintsListOptions.responseFilter,
         requestData: {
           ...defaultHintsListOptions?.requestData,
         },

package/src/retail/components/Fields/BirthPlaceField.tsx

@@ -6,6 +6,7 @@ import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 export const BirthPlaceField = JSX<CustomFieldProps>(({ field, input }) => (
   <DaDataInputControl
     label="Место рождения"
+    maxLength={100}
     {...field(input?.name ?? '')}
     {...input}
     disabled={isEsiaAuthorize(field, input)}

package/src/retail/components/Fields/ChildrenField.tsx

@@ -7,6 +7,7 @@ export const ChildrenField = JSX<CustomFieldProps>(({ field, input }) => (
     label="Количество детей до 18 лет"
     placeholder="Введите значение"
     isInteger={true}
+    type="number"
     {...field(input?.name ?? '')}
     {...input}
   />

package/src/retail/components/Fields/CodeWordField.tsx

@@ -3,5 +3,10 @@ import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProp
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
 export const CodeWordField = JSX<CustomFieldProps>(({ field, input }) => (
-  <DaDataInputControl label="Кодовое слово" {...field(input?.name ?? '')} {...input} />
+  <DaDataInputControl
+    label="Кодовое слово"
+    maxLength={20}
+    {...field(input?.name ?? '')}
+    {...input}
+  />
 ));

package/src/retail/components/Fields/DependentsField.tsx

@@ -8,6 +8,7 @@ export const DependentsField = JSX<CustomFieldProps>(({ field, input }) => (
     placeholder="За исключением детей до 18 лет"
     isInteger={true}
     maxLength={2}
+    type="number"
     {...field(input?.name ?? '')}
     {...input}
   />

package/src/retail/components/Fields/DulIssueDateField.tsx

@@ -17,6 +17,7 @@ export const DulIssueDateField = JSX<CustomFieldProps>(({ field, input }) => {
       {...field(input?.name ?? '')}
       disabled={isEsiaAuthorize(field, input)}
       minDate={startDulIssueDate}
+      maxDate={new Date()}
     />
   );
 });

package/src/retail/components/Fields/DulIssuedByField.tsx

@@ -10,13 +10,14 @@ export const DulIssuedByField = JSX<CustomFieldProps>(({ field, input }) => {
     field('dulSubdivisionCode');
 
   const onDaDataChange = useCallback((item: DaDataSuggestion) => {
-    changeDulSubdivisionCode?.(item?.data?.code?.replace('-', ''));
+    changeDulSubdivisionCode?.(item?.data?.code);
   }, []);
 
   return (
     <DaDataInputControl
       disabled={isEsiaAuthorize(field, input)}
       label="Кем выдан"
+      maxLength={200}
       {...input}
       {...field(input?.name ?? '')}
       onDaDataChange={onDaDataChange}

package/src/retail/components/Fields/DulSubdivisionCodeField.tsx

@@ -1,23 +1,41 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
+import { normalizeWithMask } from '../../../utils/normalizeWithMask';
 import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
 import { isEsiaAuthorize } from '../../utils/isEsiaAuthorize';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
+const MAX_LENGTH = 7;
+
 export const DulSubdivisionCodeField = JSX<CustomFieldProps>(({ field, input }) => {
   const onDaDataChange = useCallback((item: DaDataSuggestion) => {
     field?.('dulIssuedBy')?.onChange?.(item?.data?.name);
   }, []);
 
+  const handleChange = useCallback((v: string) => {
+    const formattedValue = v.replace(/[^\d-]/g, '');
+
+    formattedValue.length <= MAX_LENGTH &&
+      field?.('dulSubdivisionCode')?.onChange?.(normalizeWithMask(formattedValue, '___-___'));
+  }, []);
+
+  useEffect(() => {
+    const value = field?.('dulSubdivisionCode')?.value as string;
+
+    if (value) {
+      handleChange(value);
+    }
+  }, []);
+
   return (
     <DaDataInputControl
       disabled={isEsiaAuthorize(field, input)}
       label="Код подразделения"
-      isInteger={true}
-      maxLength={6}
       {...input}
       {...field(input?.name ?? '')}
+      placeholder="___-___"
+      onChange={handleChange}
       onDaDataChange={onDaDataChange}
     />
   );

package/src/retail/components/Fields/EmailField.tsx

@@ -2,6 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
 import { DaDataInputControl } from '../DaDataInputControl/DaDataInputControl';
 
-export const EmailField = JSX<CustomFieldProps>(({ field, input }) => {
-  return <DaDataInputControl label="Электронная почта" {...field(input?.name ?? '')} {...input} />;
-});
+export const EmailField = JSX<CustomFieldProps>(({ field, input }) => (
+  <DaDataInputControl
+    label="Электронная почта"
+    maxLength={50}
+    {...field(input?.name ?? '')}
+    {...input}
+  />
+));