@redneckz/wildless-cms-uni-blocks 0.14.687 → 0.14.689

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

@@ -1,47 +1,43 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { Headline } from '../../components/Headline/Headline';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
-import { useDialogManager } from '../DialogManager/useDialogManager';
 import { Img } from '../Img/Img';
+
 export interface ResponseNotificationProps {
   responseType?: 'OK' | 'Fail';
   typeForm?: string;
+  onClose?: () => void;
 }
 
-export const ResponseTypeDialog = JSX<ResponseNotificationProps>(function ({
-  responseType,
-  typeForm,
-}) {
-  const responseOK = responseType === 'OK';
-  const statusIcon = responseOK ? 'ResponseOKIcon' : 'ResponseFailIcon';
-  const { close } = useDialogManager();
-  const handleClose = useCallback(() => {
-    close();
-  }, []);
-  const responseOKDescription =
-    typeForm === 'ANTIFRAUD'
-      ? `Сообщение отправлено. Для уточнения информации с Вами могут связаться работники Банка либо Вы
+export const ResponseTypeDialog = JSX<ResponseNotificationProps>(
+  ({ responseType, typeForm, onClose }) => {
+    const responseOK = responseType === 'OK';
+    const statusIcon = responseOK ? 'ResponseOKIcon' : 'ResponseFailIcon';
+
+    const responseOKDescription =
+      typeForm === 'ANTIFRAUD'
+        ? `Сообщение отправлено. Для уточнения информации с Вами могут связаться работники Банка либо Вы
   можете самостоятельно позвонить по номеру контакт-центра +78001000100. Будьте внимательны, работники Банка
    не звонят с использованием мессенджеров.`
-      : 'Совсем скоро мы с вами свяжемся';
+        : 'Совсем скоро мы с вами свяжемся';
 
-  return (
-    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto ">
-      <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
-        <Img image={{ icon: statusIcon, iconVersion: 'normal' }} width="136" height="136" />
-        <Headline
-          className="w-full"
-          title={responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
-          description={responseOK ? responseOKDescription : 'Пожалуйста, повторите позднее'}
-          headlineVersion="XS"
-          isEmbedded={true}
-        />
-        <Button type="button" onClick={handleClose}>
-          Хорошо
-        </Button>
-      </div>
-    </Dialog>
-  );
-});
+    return (
+      <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto" onClose={onClose}>
+        <div className="flex flex-col gap-lg items-center rounded-md space-x-m">
+          <Img image={{ icon: statusIcon, iconVersion: 'normal' }} width="136" height="136" />
+          <Headline
+            className="w-full"
+            title={responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку'}
+            description={responseOK ? responseOKDescription : 'Пожалуйста, повторите позднее'}
+            headlineVersion="XS"
+            isEmbedded={true}
+          />
+          <Button type="button" onClick={onClose}>
+            Хорошо
+          </Button>
+        </div>
+      </Dialog>
+    );
+  },
+);

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

@@ -4,8 +4,9 @@ import { type SearchHeaderProps } from '../../data/CommonData';
 import { type TopMenuItemProps } from '../../data/NavigationData';
 import { style } from '../../utils/style';
 import { CloseButton } from '../DialogManager/CloseButton';
+import { useDialog } from '../DialogManager/useDialog';
+import { SearchDialog } from '../SearchDialog/SearchDialog';
 import { SearchInput } from '../SearchDialog/SearchInput';
-import { useSearchDialog } from '../SearchDialog/useSearchDialog';
 
 interface SearchBarProps {
   search?: SearchHeaderProps;
@@ -19,13 +20,13 @@ export const SearchBar = JSX<SearchBarProps>(({ className, search, ...rest }) =>
   const [value, setValue] = useState('');
 
   const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
-  const searchDialog = useSearchDialog(rest);
+  const searchDialog = useDialog(SearchDialog, rest);
 
   const handleInitialInputChange = useCallback(
     (_: string) => {
       setValue(_);
       if (isQueryLongEnough(_)) {
-        searchDialog.open({ initialQuery: _ }, { onClose: resetQueryOnDialogClose });
+        searchDialog.open({ initialQuery: _, onClose: resetQueryOnDialogClose });
       }
     },
     [resetQueryOnDialogClose, searchDialog],

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

@@ -12,9 +12,10 @@ import { SearchInput } from './SearchInput';
 export interface SearchDialogProps {
   initialQuery?: string;
   navigationItems?: TopMenuItemProps[];
+  onClose?: () => void;
 }
 
-export const SearchDialog = JSX<SearchDialogProps>(({ initialQuery, navigationItems }) => {
+export const SearchDialog = JSX<SearchDialogProps>(({ initialQuery, navigationItems, onClose }) => {
   const basePathList = useMemo(() => navigationItems?.map((_) => _.href || '/'), [navigationItems]);
   const [searchResult, searchInputProps] = useSearch({
     basePathList,
@@ -27,7 +28,7 @@ export const SearchDialog = JSX<SearchDialogProps>(({ initialQuery, navigationIt
   );
 
   return (
-    <Dialog head={<SearchInput autoFocus={true} {...searchInputProps} />}>
+    <Dialog head={<SearchInput autoFocus={true} {...searchInputProps} />} onClose={onClose}>
       <Sitemap navigationItems={searchItems} />
     </Dialog>
   );

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

@@ -44,21 +44,21 @@ export function useSelectPopup({
     const inputElement = inputRef.current;
     const { top, left, width, height } = inputElement.getBoundingClientRect();
 
-    popup.update(
-      <SelectPopup
-        popupRef={popupRef}
-        options={options}
-        value={value}
-        query={query}
-        onChange={handleChange}
-        iconVersion={iconVersion}
-      />,
-      {
-        top: top + window.scrollY + height,
-        left,
-        width,
-      },
-    );
+    popup.open({
+      popup: (
+        <SelectPopup
+          popupRef={popupRef}
+          options={options}
+          value={value}
+          query={query}
+          onChange={handleChange}
+          iconVersion={iconVersion}
+        />
+      ),
+      top: top + window.scrollY + height,
+      left,
+      width,
+    });
   }, [isOpen, options, value, query, handleChange]);
 
   return inputRef;

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

@@ -3,8 +3,9 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { sendCode } from '../../api/RetailAPI/sendCode';
 import { Headline } from '../../components/Headline/Headline';
 import { noop } from '../../utils/noop';
-import { useCaptchaDialog } from '../CaptchaDialog/useCaptchaDialog';
+import { CaptchaDialog } from '../CaptchaDialog/CaptchaDialog';
 import { Dialog } from '../DialogManager/Dialog';
+import { useDialog } from '../DialogManager/useDialog';
 import { LinkButton } from '../LinkButton/LinkButton';
 import { Loader } from '../Loader/Loader';
 import { RichText } from '../RichText/RichText';
@@ -14,8 +15,6 @@ import { SubmitButton } from './SubmitButton';
 import { useVerifyPhoneDialogSubmit } from './useVerifyPhoneDialogSubmit';
 
 export interface VerifyPhoneDialogProps {
-  close?: (smsCode?: string) => void;
-  onClose?: () => void;
   title?: string;
   description?: string;
   code?: boolean;
@@ -23,19 +22,21 @@ export interface VerifyPhoneDialogProps {
   codeLength?: number;
   textButton?: string;
   phoneNumber?: string;
+  onSuccess?: (smsCode?: string) => void;
+  onClose?: () => void;
 }
 
 export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
   ({
-    close = noop,
-    onClose = noop,
     title,
     description,
     __html,
     code = true,
     codeLength = 4,
-    textButton = '',
+    textButton = 'Далее',
     phoneNumber = '+79999999999',
+    onSuccess = noop,
+    onClose = noop,
   }) => {
     const [values, setValues] = useState(Array(codeLength).fill(''));
 
@@ -48,31 +49,35 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
       isSubmitButtonDisabled,
       setTimeNextReq,
       setIsTimerStarted,
-      setAttemps,
-    } = useVerifyPhoneDialogSubmit({ values, close });
+      setAttempts,
+    } = useVerifyPhoneDialogSubmit({ values, onSuccess });
+
+    const captchaDialog = useDialog(CaptchaDialog);
 
     const handleSendCode = useCallback(async () => {
       const isSuccessSendCode = await sendCode({
-        phoneNumber: phoneNumber,
+        phoneNumber,
         smsCodesSetName: { key: 'AUTHENTICATION' },
       });
 
       if (isSuccessSendCode) {
-        setAttemps(0);
+        setAttempts(0);
         setTimeNextReq(180);
         setIsTimerStarted(true);
       } else {
-        captchaDialog.open();
+        captchaDialog.open({ phoneNumber, sendCode: handleSendCode, onClose });
       }
-    }, []);
-    const captchaDialog = useCaptchaDialog({ phoneNumber, sendCode: handleSendCode }, onClose);
+    }, [phoneNumber, onClose]);
 
     useEffect(() => {
       handleSendCode();
     }, []);
 
     return (
-      <Dialog className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl px-5xl py-0">
+      <Dialog
+        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl px-5xl py-0"
+        onClose={onClose}
+      >
         <div className="flex flex-col gap-xl items-center rounded-md">
           <Headline
             className="w-full"

package/mobile/src/ui-kit/VerifyPhoneDialog/useVerifyPhoneDialogSubmit.tsx

@@ -1,71 +1,58 @@
-import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { checkCode } from '../../api/RetailAPI/checkCode';
 
 type useVerifyPhoneDialogSubmitProps = {
   values: string[];
-  close?: (smsCode?: string) => void;
+  onSuccess?: (smsCode?: string) => void;
 };
 
-export const useVerifyPhoneDialogSubmit = ({ close, values }: useVerifyPhoneDialogSubmitProps) => {
-  const [hasError, setHasError] = useState(false);
+export const useVerifyPhoneDialogSubmit = ({
+  values,
+  onSuccess,
+}: useVerifyPhoneDialogSubmitProps) => {
   const [errorText, setErrorText] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [timeNextReq, setTimeNextReq] = useState<number>(0);
+  const [timeNextReq, setTimeNextReq] = useState(0);
   const [isTimerStarted, setIsTimerStarted] = useState(false);
-  const [attemps, setAttemps] = useState(0);
+  const [attempts, setAttempts] = useState(0);
 
-  const resetError = useCallback(() => {
-    setHasError(false);
-    setErrorText('');
-  }, []);
+  const resetError = useCallback(() => setErrorText(''), []);
 
-  const isTimeExpired = useMemo(
-    () => timeNextReq === 0 && isTimerStarted,
-    [timeNextReq, isTimerStarted],
-  );
-
-  const isSubmitButtonDisabled = useMemo(
-    () => attemps > 2 || !values.every(Boolean) || isTimeExpired,
-    [values],
-  );
+  const isTimeExpired = Boolean(timeNextReq === 0 && isTimerStarted);
+  const isSubmitButtonDisabled = attempts > 2 || isTimeExpired || !values.every(Boolean);
 
   const handleSubmit = useCallback(async () => {
     try {
       setIsTimerStarted(false);
       setTimeNextReq(0);
-      setAttemps(attemps + 1);
+      setAttempts((_) => _ + 1);
       setIsLoading(true);
       await checkCode({
         smsText: values.join(''),
         smsCodesSetName: { key: 'AUTHENTICATION' },
       });
       resetError();
-      close && close(values.join(''));
+      onSuccess?.(values.join(''));
     } catch {
+      setErrorText(attempts > 1 ? 'Исчерпан лимит ввода смс-кода' : 'Неверный код');
+    } finally {
       setIsLoading(false);
-      attemps > 1 ? setErrorText('Исчерпан лимит ввода смс-кода') : setErrorText('Неверный код');
-      setHasError(true);
     }
-  }, [values, attemps]);
+  }, [values, attempts]);
 
   useEffect(() => {
-    if (isTimeExpired) {
-      setHasError(true);
-      setErrorText('Код просрочен');
-    } else {
-      setHasError(false);
-    }
+    setErrorText(isTimeExpired ? 'Код просрочен' : '');
   }, [isTimeExpired]);
 
   return {
     handleSubmit,
-    hasError,
+    hasError: Boolean(errorText),
     errorText,
     isLoading,
     timeNextReq,
     isSubmitButtonDisabled,
     setTimeNextReq,
     setIsTimerStarted,
-    setAttemps,
+    setAttempts,
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.687",
+  "version": "0.14.689",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -139,7 +139,7 @@
   "dependencies": {
     "@redneckz/json-op": "^0.0.12",
     "@redneckz/json-ref": "^0.0.14",
-    "@redneckz/uni-jsx": "^2.6.3",
+    "@redneckz/uni-jsx": "^2.6.4",
     "@tailwindcss/container-queries": "^0.1.0",
     "@types/json-schema": "^7.0.11",
     "glob": "^8.0.3",

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -5,13 +5,14 @@ import { handleAspects } from '../../hooks/useAspects/handleAspects';
 import { useAspects } from '../../hooks/useAspects/useAspects';
 import { useForm } from '../../hooks/useForm';
 import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { getConsentDataProcessing } from '../../ui-kit/FormField/getConsentDataProcessing';
 import { getField } from '../../ui-kit/FormField/getField';
 import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
 import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
 import { renderTitle } from '../../ui-kit/FormField/renderTitle';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
-import { useResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/useResponseTypeDialog';
+import { ResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/ResponseTypeDialog';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { objectValidator } from '../../validation/objectValidator';
@@ -44,7 +45,9 @@ export const ApplicationForm = JSX<ApplicationFormProps>(
     const inputs = (sections?.flatMap((_) => _?.inputs) || []) as FieldDef[];
     const initialFormState = getInitialFormState(inputs, typeForm);
     const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
-    const responseTypeDialog = useResponseTypeDialog({ typeForm });
+
+    const responseTypeDialog = useDialog(ResponseTypeDialog);
+
     const handleSubmit = useCallback(
       async (formData: FormState, ev: PreventableEventWithTarget) => {
         const inputsFiltered = getFilteredInputs(inputs, formData);
@@ -57,7 +60,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>(
         setResponseType(status);
 
         if (status) {
-          responseTypeDialog.open({ responseType: status });
+          responseTypeDialog.open({ typeForm, responseType: status });
         }
         if (status === 'OK' && data) {
           const aspects = useAspects();
@@ -66,7 +69,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>(
 
         return status;
       },
-      [],
+      [typeForm],
     );
 
     const [, { field, onSubmit, reset }] = useForm(initialFormState, { onSubmit: handleSubmit });

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -1,12 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { ApplicationFormLayout } from '../../ui-kit/ApplicationFormLayout/ApplicationFormLayout';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { inputColumnStyles } from '../../ui-kit/FormField/inputColumnStyle';
 import { renderTitle } from '../../ui-kit/FormField/renderTitle';
 import { Loader } from '../../ui-kit/Loader/Loader';
-import { useResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/useResponseTypeDialog';
+import { ResponseTypeDialog } from '../../ui-kit/ResponseTypeDialog/ResponseTypeDialog';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { renderInputs } from '../ApplicationForm/renderInputs';
@@ -22,7 +23,6 @@ interface ApplicationLeadFormProps extends ApplicationLeadFormContent, UniBlockP
 export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
   ({ className, title, programId = '', nextStepLink = '/credit-lead', button, ...rest }) => {
     const inputs = (applicationFormData?.flatMap((_) => _?.inputs) || []) as FieldDef[];
-    const [responseType, setResponseType] = useState<'OK' | 'Fail' | ''>('');
 
     const { isLoading } = useInitApplicationLead(nextStepLink);
     const [leadForm, setLeadForm] = useLocalStorage<FormState>('leadForm');
@@ -34,19 +34,14 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
       saveForm: setLeadForm,
     });
 
-    if (responseStatus) {
-      const responseTypeDialog = useResponseTypeDialog({ responseType: responseStatus });
-      responseTypeDialog.open();
-    }
-
-    const [, { field, onSubmit, reset }] = useForm(initialFormState, { onSubmit: handleSubmit });
+    const [, { field, onSubmit }] = useForm(initialFormState, { onSubmit: handleSubmit });
 
+    const responseTypeDialog = useDialog(ResponseTypeDialog);
     useEffect(() => {
-      if (responseType === 'OK') {
-        setResponseType('');
-        reset();
+      if (responseStatus) {
+        responseTypeDialog.open({ responseType: responseStatus });
       }
-    }, [responseType]);
+    }, [responseStatus]);
 
     return (
       <ApplicationFormLayout

package/src/components/ApplicationLeadForm/useApplicationLeadApi.ts

@@ -6,9 +6,10 @@ import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
 import { getUpdateUserProfileData } from '../../api/RetailAPI/utils/getUpdateUserProfile';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { useConsentBkiDialog } from '../../ui-kit/ConsentBkiDialog/useConsentBkiDialog';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { useEsiaLoginDialog } from '../../ui-kit/EsiaLoginDialog/useEsiaLoginDialog';
 import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
-import { useVerifyPhoneDialog } from '../../ui-kit/VerifyPhoneDialog/useVerifyPhoneDialog';
+import { VerifyPhoneDialog } from '../../ui-kit/VerifyPhoneDialog/VerifyPhoneDialog';
 import { formatPhone } from '../../utils/formatPhone';
 import { objectValidator } from '../../validation/objectValidator';
 import { isValidationSuccess } from '../../validation/validator';
@@ -42,9 +43,10 @@ export const useApplicationLeadApi = ({
   const [, setProfileId] = useLocalStorage<number>('profileId');
   const [, setParticipantId] = useLocalStorage<number>('participantId');
   const [, setProgramId] = useLocalStorage<string>('programId');
-  const esiaLoginDialog = useEsiaLoginDialog(nextStepLink);
-  const consentBkiDialog = useConsentBkiDialog(esiaLoginDialog.open);
-  const verifyPhoneDialog = useVerifyPhoneDialog();
+
+  const openEsiaLoginDialog = useEsiaLoginDialog(nextStepLink);
+  const consentBkiDialog = useConsentBkiDialog(openEsiaLoginDialog);
+  const verifyPhoneDialog = useDialog(VerifyPhoneDialog);
 
   const saveUserData = useCallback(
     ({ participantId, taskId, profileId, programId: programNumber }: UserData) => {
@@ -60,7 +62,7 @@ export const useApplicationLeadApi = ({
   const handleSubmit = useCallback(async (formData: FormState) => {
     const feedbackValidator = objectValidator(getObjectValidator(inputs));
     if (!isValidationSuccess(feedbackValidator(formData))) {
-      return console.warn('validation fail');
+      return;
     }
 
     try {
@@ -89,10 +91,10 @@ export const useApplicationLeadApi = ({
           .filter((_) => formData[_])
           .map((_) => CONSENTS[_]?.text);
 
-        verifyPhoneDialog.open(
-          handleSuccessVerify,
-          verifyPhoneContent(formData?.phone, acceptedConsents),
-        );
+        verifyPhoneDialog.open({
+          ...verifyPhoneContent(formData?.phone, acceptedConsents),
+          onSuccess: handleSuccessVerify,
+        });
       }
     } catch {
       setResponseStatus('Fail');
@@ -148,7 +150,7 @@ const verifyPhoneContent = (phone: string, consents: string[]) => ({
   title: 'Подтвердите номер телефона',
   description: `Мы отправили код на ${phone}`,
   phoneNumber: formatPhone(phone),
-  textButton: 'Оформить',
+  textButton: 'Далее',
   __html: `<span>Вводя код, я подтверждаю, что ознакомлен и подписываю:</span>${consentsToList(
     consents,
   )}`,

package/src/components/ApplicationLeadForm/useInitApplicationLead.ts

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateProfileEsia } from '../../api/RetailAPI/updateProfileEsia';
 import { locationNavigator } from '../../external/locationNavigator';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
@@ -8,36 +8,43 @@ import { parseEsiaProfile } from './pasreEsiaProfile';
 
 export const useInitApplicationLead = (nextStepLink: string) => {
   const navigator = locationNavigator();
-  const [isLoading, setIsLoading] = useState(false);
-  const [profileId] = useLocalStorage<string>('profileId');
-  const [leadForm, setLeadForm] = useLocalStorage<FormState>('leadForm');
-  const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
-  const code = params.get('code');
-  const state = params.get('state');
-
-  const updateEsiaProfile = useCallback(async () => {
-    if (profileId && code && state) {
-      const data = await updateProfileEsia({
-        profileId: profileId,
-        code,
-        state,
-        redirectUri: navigator.href,
-      });
+  const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
+  const [, setLeadForm] = useLocalStorage<FormState>('leadForm');
 
-      data &&
-        setLeadForm({
-          ...leadForm,
-          ...parseEsiaProfile(data),
+  const updateEsiaProfile = useCallback(
+    async (profileId: string, code: string, state: string) => {
+      startLoading();
+      try {
+        const data = await updateProfileEsia({
+          profileId,
+          code,
+          state,
+          redirectUri: globalThis.location?.href,
         });
 
-      navigator.assign(nextStepLink);
-    }
-  }, []);
+        if (data) {
+          setLeadForm((_) => ({
+            ..._,
+            ...parseEsiaProfile(data),
+          }));
+        }
+
+        navigator.assign(nextStepLink);
+      } finally {
+        endLoading();
+      }
+    },
+    [nextStepLink],
+  );
 
   useEffect(() => {
-    if (code) {
-      setIsLoading(true);
-      updateEsiaProfile();
+    const profileId: string = JSON.parse(globalThis.localStorage?.getItem('profileId') ?? 'null');
+    const params = new URLSearchParams(decodeURIComponent(globalThis.location?.search));
+    const code = params.get('code');
+    const state = params.get('state');
+
+    if (profileId && code && state) {
+      updateEsiaProfile(profileId, code, state);
     } else {
       sessionStorage.removeItem('accessToken');
       sessionStorage.removeItem('refreshToken');

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -7,8 +7,9 @@ import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspects
 import { useLocation } from '../../hooks/useLocation';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
-import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
-import { useSearchDialog } from '../../ui-kit/SearchDialog/useSearchDialog';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
+import { LocationDialog } from '../../ui-kit/LocationDialog/LocationDialog';
+import { SearchDialog } from '../../ui-kit/SearchDialog/SearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
@@ -24,11 +25,11 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
 
     const currentLocation = useLocation(rest?.branches?.default);
 
-    const searchDialog = useSearchDialog(rest);
-    const locationDialog = useLocationDialog(rest);
+    const searchDialog = useDialog(SearchDialog, rest);
+    const locationDialog = useDialog(LocationDialog, rest);
 
-    const openSearchDialog = useCallback(() => searchDialog.open(), [searchDialog]);
-    const openLocationDialog = useCallback(() => locationDialog.open(), [locationDialog]);
+    const openSearchDialog = useCallback(() => searchDialog.open({}), [searchDialog]);
+    const openLocationDialog = useCallback(() => locationDialog.open({}), [locationDialog]);
 
     return (
       <div

package/src/components/LinkDocs/LinkDocs.tsx

@@ -14,7 +14,7 @@ import {
   type LinkDocsContent,
 } from './LinkDocsContent';
 import { renderDefaultItem } from './renderDefaultItem';
-import { ReportDialogButton } from './RepordDialogButton';
+import { ReportDialogButton } from './ReportDialogButton';
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
   double: 'sm:flex-wrap sm:flex-row',