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

package/bundle/bundle.umd.js

@@ -1006,7 +1006,7 @@
 
     function LeadServiceAPI() {
         async function send(body, isIndividualType = false) {
-            const { typeForm, region, phone = '', email, birthday, desiredMeetingDate, inn, addressBranch, secondaryPhone = '', bankEmpolee, applicationDate, serviceDirection, ...staticBody } = body;
+            const { typeForm, region, phone = '', email, birthday, desiredMeetingDate, inn, innDadata, fullRegion, addressBranch, secondaryPhone = '', bankEmpolee, applicationDate, serviceDirection, partnerSymbolCode, companyNameByInn, ...staticBody } = body;
             const isNaturalPerson = isIndividualType && serviceDirection !== 'Юридическое лицо / ИП';
             const url = `${API_BASE_URI$1}${isNaturalPerson ? '/lead' : '/sendcorporatelead'}`;
             const submitBody = {
@@ -1024,6 +1024,7 @@
                         applicationDate,
                         ...getSecondaryPhone(secondaryPhone),
                     }),
+                ...formatPFForm(typeForm, { innDadata, fullRegion, partnerSymbolCode, companyNameByInn }),
                 ...staticBody,
             };
             try {
@@ -1054,11 +1055,17 @@
     const getEmail = (email, isNaturalPerson = true) => ({
         [isNaturalPerson ? 'email' : 'mail']: email,
     });
-    const getSecondaryPhone = (secondaryPhone = '') => {
-        return !secondaryPhone || secondaryPhone === '+7 ('
-            ? {}
-            : { secondaryPhoneNumber: formatPhone(secondaryPhone) };
-    };
+    const getSecondaryPhone = (secondaryPhone = '') => !secondaryPhone || secondaryPhone === '+7 ('
+        ? {}
+        : { secondaryPhoneNumber: formatPhone(secondaryPhone) };
+    const formatPFForm = (typeForm, data) => typeForm === 'PF'
+        ? {
+            inn: data?.innDadata,
+            region: data?.fullRegion,
+            partnerComments: data?.partnerSymbolCode,
+            fullname: data?.companyNameByInn,
+        }
+        : {};
 
     const handleAspects = async ({ aspectsAttributes, aspects, ev }) => {
         for (const { aspectName, params } of aspectsAttributes ?? []) {
@@ -1249,6 +1256,22 @@
 
     const renderErrorText = (error) => (jsx("div", { className: "h-6", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null }));
 
+    const debounce = (fn, delay = 600) => {
+        let timerId;
+        const debouncedCallback = (...args) => {
+            debouncedCallback.dispose();
+            timerId = setTimeout(() => {
+                fn(...args);
+            }, delay);
+        };
+        debouncedCallback.dispose = () => {
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+        };
+        return debouncedCallback;
+    };
+
     const inputValidStyle = 'border border-solid outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text rounded';
 
     const getValidStyle = (valid) => (valid ? inputValidStyle : 'border-error');
@@ -1309,16 +1332,17 @@
         return options.filter((_) => _.text?.toLocaleLowerCase().includes(query?.trim().toLocaleLowerCase()));
     };
 
-    const SelectPopup = JSX(({ popupRef, options, value, query, onChange, iconVersion }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", ref: popupRef, children: filterOptions(options, query).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", "aria-selected": option.key === value?.key, onClick: (e) => {
+    const SelectPopup = JSX(({ popupRef, options, value, query, onChange, iconVersion, onChangeQuery }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", ref: popupRef, children: filterOptions(options, query).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", "aria-selected": option.key === value?.key, onClick: (e) => {
                 e.stopPropagation();
                 if (onChange) {
+                    onChangeQuery?.('');
                     onChange(option);
                 }
-            }, children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", iconVersion: iconVersion, className: style('absolute right-4 pt-3xs', {
+            }, children: [option?.innDaData ? (jsxs("span", { children: [jsx(Text, { size: "text-s", children: option?.innDaData?.companyName }), jsxs("div", { className: "space-x-2", children: [jsx(Text, { size: "text-s", font: "font-light", children: formatOption(option) }), jsx(Text, { size: "text-s", font: "font-light", children: option?.innDaData?.companyAddress })] })] })) : (jsx("span", { className: "min-h-6", children: formatOption(option) })), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", iconVersion: iconVersion, className: style('absolute right-4 pt-3xs', {
                         hidden: option.key !== value?.key,
                     }) })] }, option.key))) })) : null);
 
-    function useSelectPopup({ isOpen, options, value, query, onChange, onClose, iconVersion, }) {
+    function useSelectPopup({ isOpen, options, value, query, onChange, onClose, iconVersion, onChangeQuery, }) {
         const popup = usePopupManager();
         const close = useCallback(() => {
             popup.close();
@@ -1327,6 +1351,7 @@
         const handleChange = useCallback((option) => {
             close();
             onChange && onChange(option);
+            onChangeQuery && onChangeQuery('');
         }, [close, onChange]);
         const inputRef = useRef(null);
         const popupRef = useOutsideClick(close);
@@ -1337,7 +1362,7 @@
             const inputElement = inputRef.current;
             const { top, left, width, height } = inputElement.getBoundingClientRect();
             popup.open({
-                popup: (jsx(SelectPopup, { popupRef: popupRef, options: options, value: value, query: query, onChange: handleChange, iconVersion: iconVersion })),
+                popup: (jsx(SelectPopup, { popupRef: popupRef, options: options, value: value, query: query, onChange: handleChange, iconVersion: iconVersion, onChangeQuery: onChangeQuery })),
                 top: top + window.scrollY + height,
                 left,
                 width,
@@ -1346,19 +1371,26 @@
         return inputRef;
     }
 
-    const Select = JSX(({ className, label, options = [], value, valid = true, isBorder = true, placeholder = '', isSearch = false, disabled = false, iconVersion = 'black', onChange, }) => {
+    const Select = JSX(({ className, label, options = [], value, valid = true, 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;
             }
             open();
         }, [isDisabled]);
+        const handleChangeQuery = (newQuery) => {
+            setQuery(newQuery);
+            setOption(newQuery, onChange);
+            debouncedOnSearchQuery && debouncedOnSearchQuery(newQuery);
+        };
         const handleClose = useCallback(() => {
-            setQuery('');
+            !isManualInput && setQuery('');
             close();
         }, []);
         const inputRef = useSelectPopup({
@@ -1369,12 +1401,26 @@
             onChange,
             onClose: handleClose,
             iconVersion,
+            onChangeQuery: setQuery,
         });
-        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel$1(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : handleOpen, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: formatOption(value) || placeholder }), renderIcon$1(hasOpen, iconVersion)] }), isSearch && hasOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", value: query, autoFocus: true, disabled: isDisabled, onChange: setQuery }) })) : null] })] }));
+        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel$1(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 [&>*]:p-m pr-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : handleOpen, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: useRenderOptionText({ isManualInput, query, value, placeholder }) }), isIconHidden ? '' : renderIcon$1(hasOpen, iconVersion)] }), isSearch && hasOpen ? renderSearchInput(query, isDisabled, handleChangeQuery) : null] })] }));
     });
+    const useRenderOptionText = (data) => 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, isDisabled, onChangeQuery) => (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", value: query, autoFocus: true, disabled: isDisabled, onChange: (value) => onChangeQuery(value) }) }));
     const renderIcon$1 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-0 flex self-center', { 'rotate-180': !isOpen }), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
     const getStyle = (isBorder, valid, disabled) => style(isBorder ? 'border rounded-md ' : '', isBorder && !disabled ? 'hover:border-primary-hover' : '', disabled ? 'bg-main-divider' : 'cursor-pointer ', valid ? 'border-gray' : 'border-error');
-    const getDisabled = (disabled, length) => disabled || length === 0;
+    // TODO Нужен рефактор и декомпозиция компонента getDisabled, setOption, getIconHidden
+    const getDisabled = (disabled, length, isManualInput) => disabled || (!isManualInput && length === 0);
+    const setOption = (query, onChange) => {
+        onChange && query.trim() !== '' && onChange({ key: query, text: query, innDaData: {} });
+    };
+    const getIconHidden = (isManualInput, options) => isManualInput && !options.length;
+    const getDebouncedSearchQuery = (onSearchQuery) => debounce((searchValue) => onSearchQuery(searchValue), 300);
 
     const SelectControl = JSX(({ className = '', label, error, errors, ...rest }) => (jsxs("div", { className: className, children: [jsx(Select, { ...rest, valid: !error, label: getRequiredLabel({ label, errors }) }), renderErrorText(error)] })));
 
@@ -1911,6 +1957,17 @@
 
     const CommentField = JSX(({ field, input }) => (jsx(InputControl, { className: "col-span-2", ...field(input?.name ?? ''), placeholder: "\u0412\u0430\u0448\u0435 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435", isTextarea: true })));
 
+    const CompanyNameByInnField = JSX(({ 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 (jsx(InputControl, { maxLength: 60, label: "\u041F\u043E\u043B\u043D\u043E\u0435 \u043D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435", ...field(input?.name ?? ''), ...input }));
+    });
+
     const DesiredMeetingDateField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0416\u0435\u043B\u0430\u0435\u043C\u0430\u044F \u0434\u0430\u0442\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0438", ...field(input?.name ?? '') })));
 
     const EmailField$1 = JSX(({ field, input }) => {
@@ -1931,6 +1988,89 @@
 
     const FullNameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0424\u0418\u041E", ...field(input?.name ?? ''), ...input })));
 
+    const FullRegionField = JSX(({ field, input, params }) => {
+        const isPremium = params?.isPremium;
+        const branchByRegions = useBranchesByRegions(isPremium);
+        const regions = useMemo(() => branchByRegions?.map(({ region }) => ({
+            key: region,
+            text: region,
+        })), [branchByRegions]);
+        return (jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions, ...field(input?.name ?? '') }));
+    });
+
+    function useAsyncEffect(effect, deps) {
+        useEffect(() => {
+            const free = effect();
+            return () => {
+                free.then((_) => {
+                    _ instanceof Function && _();
+                });
+            };
+        }, deps);
+    }
+
+    const DEFAULT_HINTS_COUNT = 10;
+    const defaultResponseItemHandler = (item) => item?.value || '';
+    const getResponseHandler = (itemHandler) => (response) => {
+        const responseData = response?.suggestions || [];
+        return responseData.map((item) => {
+            const value = itemHandler(item);
+            return {
+                ...item,
+                processedValue: value,
+            };
+        });
+    };
+    const getDaDataHints = (options) => {
+        const { url, query, queryPrefix, requestData = {}, responseItemHandler = defaultResponseItemHandler, } = options;
+        const responseHandler = getResponseHandler(responseItemHandler);
+        const queryPrefixValue = queryPrefix ? `${queryPrefix}, ` : '';
+        const combinedQuery = `${queryPrefixValue}${query}`;
+        return globalThis
+            ?.fetch?.(`/api/v1/suggestions/${url}`, {
+            method: 'POST',
+            mode: 'cors',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                count: DEFAULT_HINTS_COUNT,
+                ...requestData,
+                query: combinedQuery,
+            }),
+        })
+            .then((response) => response.json())
+            .then(responseHandler);
+    };
+
+    const INN_DADATA_URL = 'suggest/party';
+    const useInn = async (searchQuery) => (await getDaDataHints({ url: INN_DADATA_URL, query: searchQuery })).map((_) => ({
+        fullName: _?.value,
+        address: _?.data?.address?.value,
+        inn: _?.data?.inn,
+    }));
+
+    const InnDadataField = JSX(({ field, input }) => {
+        const [options, setOptions] = useState([]);
+        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 (jsx(SelectControl, { label: "\u0418\u041D\u041D", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0418\u041D\u041D", options: getOptions, ...field(input?.name ?? ''), isSearch: true, isManualInput: true, onSearchQuery: setSearchQuery }));
+    });
+
     const InnField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0418\u041D\u041D", isInteger: true, maxLength: 12, ...input, ...field(input?.name ?? '') })));
 
     const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
@@ -2005,6 +2145,19 @@
 
     const PartnerCommentsField = JSX(({ field, input }) => (jsx(InputControl, { ...field(input?.name ?? ''), placeholder: "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u0430\u0441 \u0432\u043E\u043F\u0440\u043E\u0441", isTextarea: true, ...input })));
 
+    const PartnerSymbolCodeField = UniBlock(({ 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 (jsx(InputControl, { label: "\u0418\u0434\u0435\u043D\u0442\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u043F\u0430\u0440\u0442\u043D\u0435\u0440\u0430", isInteger: true, maxLength: 12, ...input, ...field(input?.name ?? ''), error: symbolCodeError || field('partnerSymbolCode')?.error }));
+    });
+
     const isPlaceholder = (_) => _ === '_';
     const isDigit = (_) => /\d/.test(_);
     const isWildcard = (_) => isPlaceholder(_) || isDigit(_);
@@ -2058,15 +2211,6 @@
         return (jsx(SelectControl, { label: input?.label || 'Филиал', placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0438\u043B\u0438\u0430\u043B", isSearch: true, options: useMemo(() => regions?.map(({ code = '', name = '' }) => ({ key: code, text: name })), [regions]), ...field(input?.name ?? '') }));
     });
 
-    const RegionPremiumField = JSX(({ field, input }) => {
-        const branchByRegions = useBranchesByRegions(true);
-        const regions = useMemo(() => branchByRegions?.map(({ region }) => ({
-            key: region,
-            text: region,
-        })), [branchByRegions]);
-        return (jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions, ...field(input?.name ?? '') }));
-    });
-
     const RepresentativeNameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0424\u0418\u041E \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044F", ...input, ...field('representativeName') })));
 
     const withValidator = (props, validator) => {
@@ -2088,12 +2232,14 @@
     const defaultValidator = (errorMsg) => required(errorMsg ?? ERROR_MESSAGE$1);
     const defaultSelectValidator = (errorMsg) => validator((_) => _?.key && _?.key !== '')(errorMsg ?? ERROR_MESSAGE$1);
     const nameValidator = (errorMsg) => validator((_) => typeof _ === 'string' && _.length > 1 && isCyrillic(_))(errorMsg ?? ERROR_MESSAGE$1);
-    const innValidator = (errorMsg) => validator((_) => typeof _ === 'string' && (_.length === 10 || _.length === 12))(errorMsg);
+    const innValidator = (errorMsg) => validator((_) => isValidInnLength(_))(errorMsg);
+    const innDadataValidator = (errorMsg) => validator((_) => Boolean(_?.text) && isValidInnLength(_.text))(errorMsg);
     const phoneValidate = (email) => /^(\+7)?[\s-]?\(?[0-9]{3}\)?[\s-]?[0-9]{3}[\s-]?[0-9]{2}[\s-]?[0-9]{2}$/.test(email);
     const phoneValidator = (errorMsg) => validator(phoneValidate)(errorMsg);
     const agreementValidator = validator((_) => typeof _ === 'boolean' && _)('Согласие обязательно');
     const emailValidate = (email) => /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,4}$/.test(email);
     const emailValidator = (errorMsg) => validator((_) => emailValidate(_))(errorMsg);
+    const isValidInnLength = (value) => typeof value === 'string' && (value.length === 10 || value.length === 12);
 
     const validatorObj$1 = {
         fullName: defaultValidator(),
@@ -2124,6 +2270,9 @@
         typeForm: defaultValidator(),
         consentToReceiveMaterials: agreementValidator,
         consentDataProcessing: agreementValidator,
+        partnerSymbolCode: defaultValidator(),
+        innDadata: innDadataValidator('Укажите ИНН'),
+        companyNameByInn: defaultValidator(),
     };
     const getFormValidator = (fieldDefs, externalValidatorObj = {}) => {
         const requiredFields = fieldDefs.filter((_) => Boolean(_?.required && _?.name));
@@ -2219,6 +2368,9 @@
     const PRODUCT_REF = {
         $ref: '/wcms-resources/outservice-productlist.json',
     };
+    const AGENTS_REF = {
+        $ref: '/wcms-resources/agenty-dlya-rko.json',
+    };
     const InputsMap$1 = {
         fullName: FullNameField,
         addressBranch: AddressBranchField,
@@ -2241,7 +2393,7 @@
         bankEmpolee: BankEmpoleeField,
         secondaryPhone: SecondaryPhoneField,
         applicationDate: ApplicationDateField,
-        region: (props) => getPremium(props?.params?.typeForm) ? (jsx(RegionPremiumField, { ...props })) : (jsx(RegionField, { ...props })),
+        region: (props) => getPremium(props?.params?.typeForm) ? (jsx(FullRegionField, { ...props })) : (jsx(RegionField, { ...props })),
         consentToReceiveMaterials: ConsentToReceiveMaterialsField,
         sufferedFrom: SufferedFromField,
         situationDescription: SituationDescriptionField,
@@ -2255,6 +2407,10 @@
         email: EmailField$1,
         inn: InnField,
         comment: CommentField,
+        fullRegion: FullRegionField,
+        partnerSymbolCode: (props) => (jsx(PartnerSymbolCodeField, { ...props, source: AGENTS_REF })),
+        innDadata: InnDadataField,
+        companyNameByInn: CompanyNameByInnField,
     };
     const getField = (field, params, externalInputs = {}) => (input, i) => {
         const fieldsRegister = {
@@ -2265,7 +2421,7 @@
         return shouldRenderField({ input, field }) && Component ? (jsx("div", { children: jsx(Component, { field: field, input: input, params: params }) }, i)) : null;
     };
 
-    const inputColumnStyles = (column) => column === 2 ? '@xl:grid-cols-2' : '';
+    const inputColumnStyles = (column) => column === 2 ? '@xl:grid-cols-2' : '@xl:grid-cols-1 gap-x-0';
 
     const renderTitle = (title) => title ? (jsx("div", { className: "@xl:text-center @xl:col-span-2 mb-m", children: jsx(Text, { size: "text-h6", children: title }) })) : null;
 
@@ -2415,7 +2571,7 @@
     const renderContacts = () => (jsxs("div", { className: "space-y-m", children: [jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "@xl:text-center" }), jsxs("div", { className: "flex sm:justify-center gap-xl", children: [jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", href: `tel:8 (800) 200-78-70`, "aria-label": "\u0442\u0435\u043B\u0435\u0444\u043E\u043D 8 (800) 200-78-70", children: [jsx(Img, { image: { icon: 'PhoneIcon' }, width: "24", height: "24" }), jsx("span", { children: "8 (800) 200-78-70" })] }), jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", "aria-label": "\u043F\u043E\u0447\u0442\u0430 ved@rshb.ru", href: `mailto:ved@rshb.ru`, children: [jsx(Img, { image: { icon: 'MailIcon' }, width: "24", height: "24" }), jsx("span", { children: "ved@rshb.ru" })] })] })] }));
 
     const API = LeadServiceAPI();
-    const ApplicationForm = JSX(({ className, title, typeForm = '', sections = [], button, link, endpoint, additionalParams, isContacts, data, ...rest }) => {
+    const ApplicationForm = UniBlock(({ className, title, typeForm = '', sections = [], button, link, endpoint, additionalParams, isContacts, data, ...rest }) => {
         const inputs = useMemo(() => (sections?.flatMap((_) => _?.inputs) || []), [sections]);
         const initialFormState = useMemo(() => getInitialFormState$2(inputs, typeForm), [inputs, typeForm]);
         const formValidator = useMemo(() => getFormValidator(inputs), [inputs]);
@@ -2435,8 +2591,9 @@
             onSubmit: handleSubmit,
         });
         const fieldName = getConsentDataProcessing(inputs)?.name;
-        return (jsxs(ApplicationFormLayout, { className: style('container space-y-m', className), title: title, ...rest, children: [jsxs("form", { onSubmit: onSubmit, children: [sections.map((_, i) => (jsxs("div", { className: style(inputColumnStyles(_.columns), 'grid gap-x-m'), children: [renderTitle(_.title), (_?.inputs || [])?.map(getField(field, { typeForm }))] }, `section-${i}`))), renderAgreementSubmit(fieldName ? field('consentDataProcessing') : undefined, link, button)] }), isContacts ? renderContacts() : null] }));
+        return (jsxs(ApplicationFormLayout, { className: style('container space-y-m', className), title: title, ...rest, children: [jsxs("form", { onSubmit: onSubmit, children: [renderSections(sections, field, { typeForm, additionalParams }), renderAgreementSubmit(fieldName ? field('consentDataProcessing') : undefined, link, button)] }), isContacts ? renderContacts() : null] }));
     });
+    const renderSections = (sections, field, { typeForm, additionalParams }) => sections.map((_, i) => (jsxs("div", { className: style(inputColumnStyles(_.columns), 'grid gap-x-m'), children: [renderTitle(_.title), (_?.inputs || [])?.map(getField(field, { typeForm, ...additionalParams }))] }, `section-${i}`)));
 
     const NoConsentDialog = JSX(({ attempts, onClose = noop }) => {
         const navigator = locationNavigator();
@@ -2768,56 +2925,6 @@
         return (jsxs("div", { className: "flex gap-lg items-center rounded-md bg-main-gray p-4xl", children: [jsxs("div", { className: "flex flex-col justify-around w-full", children: [jsx("p", { className: "mb-m text-xl", children: "\u0417\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435 \u0447\u0435\u0440\u0435\u0437 \u0413\u043E\u0441\u0443\u0441\u043B\u0443\u0433\u0438" }), jsxs("ul", { className: "list-disc list-inside mb-4xl", children: [jsx("li", { children: "\u0412\u0435\u0440\u043E\u044F\u0442\u043D\u043E\u0441\u0442\u044C \u043E\u0434\u043E\u0431\u0440\u0435\u043D\u0438\u044F \u0432\u044B\u0448\u0435" }), jsx("li", { children: "\u0411\u0435\u0437 \u0441\u043F\u0440\u0430\u0432\u043E\u043A \u043E \u0434\u043E\u0445\u043E\u0434\u0430\u0445 \u0438 \u0442\u0440\u0443\u0434\u043E\u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0435" }), jsx("li", { children: "\u0421 \u0437\u0430\u0449\u0438\u0442\u043E\u0439 \u0412\u0430\u0448\u0438\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" })] }), jsx(Img, { className: "block mb-xl self-center @md:hidden", image: { icon: 'GosUslugiIcon', iconVersion: 'normal' }, height: "80", width: "80" }), jsx(Button, { type: "button", onClick: handleAuth, className: "w-full @md:w-fit", children: "\u0417\u0430\u043F\u043E\u043B\u043D\u0438\u0442\u044C" })] }), jsx(Img, { className: "hidden @md:block", image: { icon: 'GosUslugiIcon', iconVersion: 'normal' }, height: "164" })] }));
     });
 
-    const debounce = (fn, delay = 600) => {
-        let timerId;
-        const debouncedCallback = (...args) => {
-            debouncedCallback.dispose();
-            timerId = setTimeout(() => {
-                fn(...args);
-            }, delay);
-        };
-        debouncedCallback.dispose = () => {
-            if (timerId) {
-                clearTimeout(timerId);
-            }
-        };
-        return debouncedCallback;
-    };
-
-    const DEFAULT_HINTS_COUNT = 10;
-    const defaultResponseItemHandler = (item) => item?.value || '';
-    const getResponseHandler = (itemHandler) => (response) => {
-        const responseData = response?.suggestions || [];
-        return responseData.map((item) => {
-            const value = itemHandler(item);
-            return {
-                ...item,
-                processedValue: value,
-            };
-        });
-    };
-    const getDaDataHints = (options) => {
-        const { url, query, queryPrefix, requestData = {}, responseItemHandler = defaultResponseItemHandler, } = options;
-        const responseHandler = getResponseHandler(responseItemHandler);
-        const queryPrefixValue = queryPrefix ? `${queryPrefix}, ` : '';
-        const combinedQuery = `${queryPrefixValue}${query}`;
-        return globalThis
-            ?.fetch?.(`/api/v1/suggestions/${url}`, {
-            method: 'POST',
-            mode: 'cors',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                count: DEFAULT_HINTS_COUNT,
-                ...requestData,
-                query: combinedQuery,
-            }),
-        })
-            .then((response) => response.json())
-            .then(responseHandler);
-    };
-
     const NAME_HINTS_LIST_OPTIONS = {
         url: 'suggest/fio',
         requestData: {
@@ -4789,17 +4896,6 @@
         return (jsx(DaDataInputControl, { label: "\u0414\u043E\u043B\u044F \u0443\u0447\u0430\u0441\u0442\u0438\u044F \u0432 \u0431\u0438\u0437\u043D\u0435\u0441\u0435", placeholder: "\u0432 %", isInteger: true, maxLength: 3, ...field(input?.name ?? ''), ...input, onChange: onChange }));
     });
 
-    function useAsyncEffect(effect, deps) {
-        useEffect(() => {
-            const free = effect();
-            return () => {
-                free.then((_) => {
-                    _ instanceof Function && _();
-                });
-            };
-        }, deps);
-    }
-
     const getPaymentSystems = async (creditProgramId) => {
         const data = await fetchRetailJSON('/public-data/creditProgramConditions', 'POST', {
             creditProgramId,
@@ -10068,47 +10164,6 @@
         return isURL(href) ? globalThis?.location?.href : joinPath(basePath, router.pathname);
     };
 
-    const DropdownMenu = JSX(({ className = '', items, activeItem, ariaLabel = 'Меню' }) => {
-        const [isVisible, { setFalse, toggle }] = useBool(false);
-        const ref = useOutsideClick(setFalse);
-        const dropdownRef = useRef(null);
-        const changeDropdownPosition = useCallback(({ isOpened, buttonRef, menuRef }) => {
-            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 (jsxs("div", { className: style(isVisible ? 'rounded-md shadow-blue-gray' : '', className), ref: ref, role: "navigation", children: [jsx("button", { type: "button", className: "group/btn flex justify-between items-center h-6", "aria-label": ariaLabel, onClick: toggle, role: "button", "aria-labelledby": "labeldiv", children: Array(3)
-                        .fill(null)
-                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("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, children: renderDropdownItems(items, activeItem) })] }));
-    });
-    const DropdownMenuItem = JSX(({ isActive, ...rest }) => {
-        const link = useLink();
-        const { text, href, target, onClick } = link(rest);
-        return (jsx("a", { className: style('text-l font-light pb-m hover:text-primary-main', {
-                'text-primary-main': isActive,
-            }), href: href, target: target, onClick: onClick, role: "link", ...getAspectsAttributes(rest?.data), children: text }));
-    });
-    const renderDropdownItems = (items, activeItem) => items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i))));
-
     const BUTTON_SIZE_STYLE = {
         default: 'w-6 h-6',
         medium: 'w-10 h-10',
@@ -10139,6 +10194,64 @@
         return (jsx(HeaderSecondaryMenuButton, { className: className, image: { icon: 'ChatBotIcon', iconVersion }, ariaLabel: ariaLabel, onClick: handleClick, buttonSize: buttonSize, isGrayBg: true, version: version, isLoading: isLoading, disabled: isLoading, dataTestId: "chat icon" }));
     });
 
+    const DropdownMenu = ({ dropdownRef, items = [], activeItem, ariaLabel, }) => (jsx("div", { ref: dropdownRef, className: "absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40", "aria-label": ariaLabel, children: renderDropdownItems(items, activeItem) }));
+    const DropdownMenuItem = JSX(({ isActive, ...rest }) => {
+        const link = useLink();
+        const { text, href, target, onClick } = link(rest);
+        return (jsx("a", { className: style('text-l font-light pb-m hover:text-primary-main', {
+                'text-primary-main': isActive,
+            }), href: href, target: target, onClick: onClick, role: "link", ...getAspectsAttributes(rest?.data), children: text }));
+    });
+    const renderDropdownItems = (items, activeItem) => items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i))));
+
+    function useDropdownSubMenu({ items, activeItem, onClose, isOpen }) {
+        const popup = usePopupManager();
+        useEffect(() => {
+            if (isOpen) {
+                popup.close();
+            }
+        }, [isOpen]);
+        const close = useCallback(() => {
+            popup.close();
+            onClose?.();
+        }, [onClose]);
+        const parentRef = useRef(null);
+        const popupRef = useOutsideClick(close);
+        useEffect(() => {
+            if (!isOpen || !parentRef.current || !items?.length) {
+                return;
+            }
+            const parentElement = parentRef.current;
+            const { top, left, width, height } = parentElement.getBoundingClientRect();
+            popup.open({
+                popup: jsx(DropdownMenu, { dropdownRef: popupRef, items: items, activeItem: activeItem }),
+                top: top + window.scrollY + height,
+                left,
+                width,
+            });
+        }, [isOpen, items, close]);
+        return parentRef;
+    }
+
+    const HeaderMoreMenuItem = JSX(({ 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 (jsx("div", { className: style(isOpenDropdown ? 'rounded-md shadow-blue-gray' : '', className), ref: dropdownMenu, role: "navigation", children: jsx("button", { type: "button", className: "group/btn flex justify-between items-center h-6", "aria-label": ariaLabel, onClick: toggle, role: "button", "aria-labelledby": "labeldiv", children: Array(3)
+                    .fill(null)
+                    .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }) }));
+    });
+
     const HeaderItem = JSX(({ className = '', active, dataItemName, children, data, ...rest }) => {
         const link = useLink();
         const { href, target, text, onClick } = link(rest);
@@ -10146,7 +10259,8 @@
     });
     const getTextStyle$1 = (active = false) => style('font-sans text-l lg:font-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
 
-    const HeaderSubMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
+    const HeaderSubMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, items, activeItem, ...rest }) => {
+        const [isOpenDropdown, { setFalse, setTrue }] = useBool(false);
         const observerCallback = useCallback((entries) => {
             if (!entries.length || !onVisibilityChange) {
                 return;
@@ -10156,7 +10270,21 @@
             onVisibilityChange(entry.isIntersecting);
         }, [onVisibilityChange]);
         const ref = useIntersectionObserver(observerCallback, observerOptions);
-        return (jsx("span", { ref: ref, className: className, role: "menuitem", children: jsx(HeaderItem, { ...rest, children: children }) }));
+        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 (jsx("div", { className: "inline-block", ref: dropdownMenu, children: jsx("span", { ref: ref, className: className, role: "menuitem", children: jsx(HeaderItem, { ...rest, children: children }) }) }));
     });
 
     const BUTTON_STYLE = {
@@ -10181,7 +10309,7 @@
                 ? handleIntersectionActivation$1(index)
                 : handleIntersectionDeactivation$1(index));
         }), [subItems]);
-        return (jsxs("nav", { className: "mt-s flex gap-s items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-s mt-xs space-x-lg", role: "menu", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { items: dropDownMenuItems, activeItem: activeSubItem, ariaLabel: dropdownMenuAriaLabel })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { version: version, iconVersion: iconVersion, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] }));
+        return (jsxs("nav", { className: "mt-s flex gap-s items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-s mt-xs space-x-lg", role: "menu", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeSubItem, activeItem: activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(HeaderMoreMenuItem, { items: dropDownMenuItems, activeItem: activeSubItem, ariaLabel: dropdownMenuAriaLabel })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { version: version, iconVersion: iconVersion, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] }));
     });
     const handleIntersectionActivation$1 = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation$1 = (index) => (prev) => Math.min(prev, index);
@@ -10306,7 +10434,7 @@
         }), [navigationItems]);
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { dataFooter, dataHeader, ...logoProps } = logo ?? {};
-        return (jsxs("div", { className: "flex items-center justify-between", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: logoProps, data: dataHeader, showTitle: false }), jsx("div", { ref: topItemsListRef, className: "overflow-hidden min-w-40 pb-xs mt-xs", role: "menu", children: navigationItems.map((_, i) => (jsx(HeaderTopMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeTopItem, observerOptions: observerOptions, onVisibilityChange: topItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "mx-xs", items: dropDownMenuItems, activeItem: activeTopItem, ariaLabel: dropdownMenuAriaLabel })) : null, jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", search: search, navigationItems: navigationItems, ...headerData })] }));
+        return (jsxs("div", { className: "flex items-center justify-between", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: logoProps, data: dataHeader, showTitle: false }), jsx("div", { ref: topItemsListRef, className: "overflow-hidden min-w-40 pb-xs mt-xs", role: "menu", children: navigationItems.map((_, i) => (jsx(HeaderTopMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeTopItem, observerOptions: observerOptions, onVisibilityChange: topItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(HeaderMoreMenuItem, { className: "mx-xs rounded-md shadow-blue-gray", items: dropDownMenuItems, activeItem: activeTopItem, ariaLabel: dropdownMenuAriaLabel })) : null, jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", search: search, navigationItems: navigationItems, ...headerData })] }));
     });
     const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
@@ -11179,7 +11307,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.874";
+    const packageVersion = "0.14.876";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;