@redneckz/wildless-cms-uni-blocks 0.14.688 → 0.14.690

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

@@ -7,24 +7,23 @@ import { Dialog } from '../DialogManager/Dialog';
 import { Img } from '../Img/Img';
 
 export interface EsiaLoginDialogProps {
-  handleClose?: () => void;
+  onClose?: () => void;
 }
 
-export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(function ({ handleClose }) {
+export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(({ onClose }) => {
   const navigator = locationNavigator();
-
   const handleAuth = useCallback(async () => {
     const resp = await getLink({
       redirectUri: navigator.href,
     });
 
-    if (resp) {
+    if (resp?.link) {
       navigator.assign(resp.link);
     }
   }, []);
 
   return (
-    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg" onClose={handleClose}>
+    <Dialog className="my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg" onClose={onClose}>
       <div className="flex flex-col gap-lg items-center rounded-md">
         <div className="flex items-center justify-around w-full">
           <ul className="list-disc">
@@ -38,7 +37,7 @@ export const EsiaLoginDialog = JSX<EsiaLoginDialogProps>(function ({ handleClose
           <Button type="button" onClick={handleAuth}>
             Заполнить через Госуслуги
           </Button>
-          <Button type="button" version="secondary" onClick={handleClose}>
+          <Button type="button" version="secondary" onClick={onClose}>
             Пропустить
           </Button>
         </div>

package/mobile/src/ui-kit/EsiaLoginDialog/useEsiaLoginDialog.tsx

@@ -1,25 +1,13 @@
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { locationNavigator } from '../../external/locationNavigator';
-import { useDialogManager, type DialogOptions } from '../DialogManager/useDialogManager';
+import { useDialog } from '../DialogManager/useDialog';
 import { EsiaLoginDialog } from './EsiaLoginDialog';
 
-export interface EsiaLoginDialogProps {
-  responseType?: 'OK' | 'Fail';
-  typeForm?: string;
-}
-
 export const useEsiaLoginDialog = (nextStepLink: string) => {
-  const { open, close } = useDialogManager();
+  const { open } = useDialog(EsiaLoginDialog);
   const navigator = locationNavigator();
 
-  const handleClose = useCallback(() => {
-    close();
-    navigator.assign(nextStepLink);
-  }, []);
-
-  return {
-    open: (options: DialogOptions = {}) =>
-      open(<EsiaLoginDialog handleClose={handleClose} />, options),
-    close,
-  };
+  return useCallback(() => {
+    open({ onClose: () => navigator.assign(nextStepLink) });
+  }, [open, nextStepLink]);
 };

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

@@ -33,8 +33,21 @@ export const AddressField = JSX<CustomFieldProps>(({ field, input }) => {
 
   const onChange = useCallback((value: string) => {
     field?.(fieldName)?.onChange?.({
-      ...field(fieldName).value,
+      apartment: '',
+      city: '',
+      district: '',
       fullAddress: value,
+      fiasCode: '',
+      house: '',
+      locality: '',
+      okatoRegionCode: '',
+      postcode: '',
+      region: '',
+      regionCode: '',
+      street: '',
+      qc: '',
+      qcComplete: '',
+      qcHouse: '',
     });
   }, []);
 

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

@@ -3,8 +3,8 @@ import { useLeadFormData } from '../../../hooks/useLeadFormData';
 import { type CustomFieldProps } from '../CustomFieldProps';
 import { SelectField } from '../SelectField';
 
-const LABEL_TEXT = `Имеет ли юридическое лицо, акционером / участником / членом / пайщиком / 
-    вкладчиком с долей участия более 20% уставного капитала руководителем, 
+const LABEL_TEXT = `Имеет ли юридическое лицо, акционером / участником / членом / пайщиком /
+    вкладчиком с долей участия более 20% уставного капитала руководителем,
     которого Вы являетесь, кредит в АО «Россельхозбанк»`;
 
 export const CreditInRshbCdField = JSX<CustomFieldProps>(({ field, input }) => {
@@ -17,6 +17,7 @@ export const CreditInRshbCdField = JSX<CustomFieldProps>(({ field, input }) => {
       label={LABEL_TEXT}
       fieldName="creditInRshbCd"
       input={input}
+      disabled={!field?.('shareholderFlg')?.value}
     />
   );
 });

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

@@ -10,6 +10,7 @@ export const LegalEntityNameField = JSX<CustomFieldProps>(({ field, input }) =>
       label="Наименование юридического лица"
       {...input}
       {...getValidation(field('legalEntityName'), validatorObj.legalEntityName, input?.required)}
+      disabled={!field?.('shareholderFlg')?.value}
     />
   );
 });

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

@@ -20,17 +20,19 @@ export interface SelectFieldProps extends CustomFieldProps, UniBlockProps {
   fieldName: string;
   placeholder?: string;
   isSearch?: boolean;
+  disabled?: boolean;
 }
 
 export const SelectField = UniBlock<SelectFieldProps>(
   ({
     field,
     source,
-    label,
     fieldName,
     input,
     placeholder = 'Выберите из списка',
-    isSearch = false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    options,
+    ...rest
   }) => {
     const leadOptions: Option[] =
       source?.map((_: LeadProps) => ({
@@ -41,10 +43,9 @@ export const SelectField = UniBlock<SelectFieldProps>(
     return (
       <SelectControl
         placeholder={placeholder}
-        label={label}
         options={leadOptions}
-        isSearch={isSearch}
         {...getValidation(field(fieldName), validatorObj[fieldName], input?.required)}
+        {...rest}
       />
     );
   },

package/mobile/src/ui-kit/Input/useInputPopup.tsx

@@ -86,7 +86,8 @@ export function useInputPopup({
       prevInputValue.current = value;
     }
 
-    popup.update(<InputPopup options={hintsList} value={value} onChange={handleChange} />, {
+    popup.open({
+      popup: <InputPopup options={hintsList} value={value} onChange={handleChange} />,
       top: top + globalThis.scrollY + height,
       left,
       width,

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

@@ -6,7 +6,6 @@ import { useRegions, type Region } from '../../hooks/useRegions';
 import { groupBy } from '../../utils/groupBy';
 import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
 import { Dialog } from '../DialogManager/Dialog';
-import { useDialogManager } from '../DialogManager/useDialogManager';
 import { Text } from '../Text/Text';
 import { renderForeignOffices } from './renderForeignOffices';
 import { renderRegion } from './renderRegion';
@@ -19,9 +18,10 @@ const SEARCH_TERM_MIN_LENGTH = 3;
 export interface LocationDialogProps {
   foreignOffices?: ForeignOfficeProps[];
   branches?: BranchesHeader;
+  onClose?: () => void;
 }
 
-export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branches }) => {
+export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branches, onClose }) => {
   const locationStore = useDefaultLocation(branches?.default);
 
   const [query, setQuery] = useState('');
@@ -36,14 +36,12 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
     [regions],
   );
 
-  const { close } = useDialogManager();
-
   const handleChangeLocation = useCallback(
     (_: Region) => {
       locationStore.location = _;
-      close();
+      onClose?.();
     },
-    [locationStore],
+    [locationStore, onClose],
   );
 
   return (
@@ -58,6 +56,7 @@ export const LocationDialog = JSX<LocationDialogProps>(({ foreignOffices, branch
           <SearchBar onSearch={setQuery} searchTerm={query} />
         </div>
       }
+      onClose={onClose}
     >
       {query && query.length >= SEARCH_TERM_MIN_LENGTH ? (
         <div>

package/mobile/src/ui-kit/PopupManager/PopupAction.ts

@@ -1,20 +1,15 @@
-import { type VNode } from '../../model/VNode';
-
-export type PopupAction = PopupOpenAction | PopupCloseAction;
+import type { ActionsMap } from '@redneckz/uni-jsx/lib/EventBus/Action';
+import type { VNode } from '../../model/VNode';
 
 export interface PopupOptions {
+  popup: VNode;
   top: number;
   left: number;
   width?: number;
   fixed?: boolean;
 }
 
-export interface PopupOpenAction extends PopupOptions {
-  type: 'open' | 'update';
-  popup: VNode;
-  fixed?: boolean;
-}
-
-export interface PopupCloseAction {
-  type: 'close';
-}
+export type PopupAction = ActionsMap<{
+  open(options: PopupOptions): void;
+  close(): void;
+}>;

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

@@ -1,49 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
+import { useObservableWithActions } from '@redneckz/uni-jsx/lib/EventBus/useObservableWithActions';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { assertUnreachable } from '../../utils/assertUnreachable';
+import { useOnEscape } from '../../hooks/useOnEscape';
 import { style } from '../../utils/style';
-import { type PopupOpenAction } from './PopupAction';
+import { type PopupOptions } from './PopupAction';
 
 export const PopupManager = JSX(() => {
-  const [popup, setPopup] = useState<PopupOpenAction | null>(null);
+  const [popup, setPopup] = useState<PopupOptions | null>(null);
 
   const close = useCallback(() => {
     setPopup(null);
   }, []);
 
-  useEffect(
-    () =>
-      defaultEventBus.subscribe('popup', (action) => {
-        if (!action) {
-          return;
-        }
-        switch (action.type) {
-          case 'open':
-          case 'update':
-            setPopup(action);
-            break;
-          case 'close':
-            close();
-            break;
-          default:
-            assertUnreachable(action);
-        }
-      }),
-    [],
-  );
+  useObservableWithActions(defaultEventBus.observable, 'popup', {
+    open: setPopup,
+    close,
+  });
 
-  const escapeHandler = useCallback(
-    ({ key }: { key: string }) => {
-      if (key === 'Escape') {
-        close();
-      }
-    },
-    [close],
-  );
-
-  useEventListener(globalThis.document, 'keydown', escapeHandler);
+  useOnEscape(close);
 
   return popup ? (
     <div

package/mobile/src/ui-kit/PopupManager/usePopupManager.tsx

@@ -1,11 +1,4 @@
+import { useEmitterWithActions } from '@redneckz/uni-jsx/lib/EventBus/useEmitterWithActions';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { type VNode } from '../../model/VNode';
-import { type PopupOptions } from './PopupAction';
 
-export const usePopupManager = () => ({
-  open: (popup: VNode, options: PopupOptions) =>
-    defaultEventBus.fire('popup', { type: 'open', popup, ...options }),
-  update: (popup: VNode, options: PopupOptions) =>
-    defaultEventBus.fire('popup', { type: 'update', popup, ...options }),
-  close: () => defaultEventBus.fire('popup', { type: 'close' }),
-});
+export const usePopupManager = () => useEmitterWithActions(defaultEventBus.emitter, 'popup');

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

@@ -1,30 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type LinkDoc } from '../../components/LinkDocs/LinkDocsContent';
 import { useRouter } from '../../external/useRouter';
 import { type Picture } from '../../model/Picture';
 import { adjustHref } from '../../utils/adjustHref';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
-import { useDialogManager } from '../DialogManager/useDialogManager';
 import { LinkButton } from '../LinkButton/LinkButton';
 import { RichText } from '../RichText/RichText';
 
 export interface ReportDialogProps extends LinkDoc {
   __html?: string;
   icon?: Picture;
+  onClose?: () => void;
 }
 
-export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target }) => {
-  const { close } = useDialogManager();
+export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target, onClose }) => {
   const router = useRouter();
   const adjustedHref = adjustHref(router)(href);
-  const handleClose = useCallback(() => {
-    close();
-  }, []);
 
   return (
-    <Dialog className="my-6xl min-h-fit w-fit mx-auto">
+    <Dialog className="my-6xl min-h-fit w-fit mx-auto" onClose={onClose}>
       {__html ? <RichText __html={__html} /> : null}
       <div className="flex flex-row mx-auto w-fit gap-lg py-lg">
         <LinkButton
@@ -32,9 +27,9 @@ export const ReportDialog = JSX<ReportDialogProps>(({ href, __html, target }) =>
           version="primary"
           target={target}
           href={adjustedHref}
-          onClick={handleClose}
+          onClick={onClose}
         />
-        <Button type="button" version="secondary" onClick={handleClose}>
+        <Button type="button" version="secondary" onClick={onClose}>
           Я не согласен
         </Button>
       </div>

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,12 +22,12 @@ 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,
@@ -36,6 +35,8 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
     codeLength = 4,
     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"