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

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.875",
+  "version": "0.14.877",
   "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,
+      }
+    : {};

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/components/Header/DropdownButton.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type ButtonProps } from '../../ui-kit/Button/Button';
+
+export const DropdownButton = JSX<ButtonProps>(({ onClick, children, ariaLabel }) => {
+  if (children) {
+    return children;
+  }
+
+  return (
+    <button
+      type="button"
+      className="flex justify-between items-center group/btn h-6 gap-2xs"
+      aria-label={ariaLabel}
+      onClick={onClick}
+      role="button"
+      aria-labelledby="labeldiv"
+    >
+      {Array.from({ length: 3 }, (_, i) => (
+        <div
+          key={i}
+          className="w-[3px] h-[3px] rounded bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white"
+        />
+      ))}
+    </button>
+  );
+});