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

package/src/ui-kit/ConsentBkiDialog/ConsentBkiDialog.tsx

@@ -1,17 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useMobileMode } from '../../hooks/useMobileMode';
 import { noop } from '../../utils/noop';
 import { Button } from '../Button/Button';
 import { Dialog } from '../DialogManager/Dialog';
-import { openDocument } from '../DialogManager/openDocument';
-import { useDialogManager } from '../DialogManager/useDialogManager';
+import { useDocumentDialog } from '../DocumentDialog/uaeDocumentDialog';
 import { Heading } from '../Heading/Heading';
 import { Paragraph } from '../Paragraph/Paragraph';
 import { RadioButtonGroup } from '../RadioButtonGroup/RadioButtonGroup';
 
 export interface ConsentBkiDialogProps {
-  handleSubmit?: (confirmStatus: string) => void;
+  onSubmit?: (confirmStatus: string) => void;
   onClose?: () => void;
 }
 
@@ -25,62 +23,59 @@ const refuseConsentText = {
   description: 'Согласие на запрос в Бюро кредитных историй (БКИ) повысит вероятность одобрения',
 };
 
-export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(function ({
-  handleSubmit = noop,
-  onClose = noop,
-}) {
-  const [confirmStatus, setConfirmStatus] = useState('');
-  const [showRefuceContent, setShowRefuceContent] = useState(false);
-  const { open, close } = useDialogManager();
-  const isMobile = useMobileMode();
-  const handleClose = useCallback(() => {
-    close();
-    handleSubmit(confirmStatus);
-  }, [confirmStatus]);
-
-  const handleConfirmChange = useCallback((value: string) => {
-    setConfirmStatus(value);
-    if (value === 'REFUSE') {
-      setShowRefuceContent(true);
-    }
-  }, []);
-  const consentText = showRefuceContent ? refuseConsentText : defaultConsentText;
-
-  return (
-    <Dialog
-      className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
-      onClose={onClose}
-    >
-      <div className="flex flex-col gap-xl items-center">
-        <div
-          role="button"
-          onClick={() => openDocument({ open, close, id: CONSENT_BKI_ID, convertToPng: isMobile })}
-        >
-          <Heading
-            className="text-center text-balance"
-            headingType="h2"
-            title={consentText.title}
-          />
-        </div>
-        <Paragraph align="text-center">{consentText.description}</Paragraph>
-        <RadioButtonGroup
-          className="whitespace-normal"
-          orientation="horizontal"
-          items={ITEMS}
-          value={confirmStatus}
-          onChange={handleConfirmChange}
-        />
-        <Button disabled={!confirmStatus} type="button" onClick={handleClose}>
-          Продолжить
-        </Button>
-      </div>
-    </Dialog>
-  );
-});
-
 const ITEMS = [
   { id: 'SIGNED', text: 'Подписать' },
   { id: 'REFUSE', text: 'Отказаться' },
 ];
 
 const CONSENT_BKI_ID = 2;
+
+export const ConsentBkiDialog = JSX<ConsentBkiDialogProps>(
+  ({ onSubmit = noop, onClose = noop }) => {
+    const [confirmStatus, setConfirmStatus] = useState('');
+    const [showRefuseContent, setShowRefuseContent] = useState(false);
+
+    const openDocument = useDocumentDialog(CONSENT_BKI_ID);
+
+    const handleSubmit = useCallback(() => {
+      onSubmit(confirmStatus);
+      onClose();
+    }, [onSubmit, confirmStatus]);
+
+    const handleConfirmChange = useCallback((value: string) => {
+      setConfirmStatus(value);
+      if (value === 'REFUSE') {
+        setShowRefuseContent(true);
+      }
+    }, []);
+    const consentText = showRefuseContent ? refuseConsentText : defaultConsentText;
+
+    return (
+      <Dialog
+        className="my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg py-0 px-5xl"
+        onClose={onClose}
+      >
+        <div className="flex flex-col gap-xl items-center">
+          <div role="button" onClick={openDocument}>
+            <Heading
+              className="text-center text-balance"
+              headingType="h2"
+              title={consentText.title}
+            />
+          </div>
+          <Paragraph align="text-center">{consentText.description}</Paragraph>
+          <RadioButtonGroup
+            className="whitespace-normal"
+            orientation="horizontal"
+            items={ITEMS}
+            value={confirmStatus}
+            onChange={handleConfirmChange}
+          />
+          <Button disabled={!confirmStatus} type="button" onClick={handleSubmit}>
+            Продолжить
+          </Button>
+        </div>
+      </Dialog>
+    );
+  },
+);

package/src/ui-kit/ConsentBkiDialog/useConsentBkiDialog.tsx

@@ -1,12 +1,12 @@
 import { updateUserProfile } from '../../api/RetailAPI/updateUserProfile';
 import { formatPhone } from '../../utils/formatPhone';
-import { useDialogManager } from '../DialogManager/useDialogManager';
-import { useVerifyPhoneDialog } from '../VerifyPhoneDialog/useVerifyPhoneDialog';
+import { useDialog } from '../DialogManager/useDialog';
+import { VerifyPhoneDialog } from '../VerifyPhoneDialog/VerifyPhoneDialog';
 import { ConsentBkiDialog } from './ConsentBkiDialog';
 
 export const useConsentBkiDialog = (onClose: () => void) => {
-  const { open, close } = useDialogManager();
-  const verifyPhoneDialog = useVerifyPhoneDialog();
+  const { open } = useDialog(ConsentBkiDialog);
+  const verifyPhoneDialog = useDialog(VerifyPhoneDialog);
 
   const handleSuccessVerify = (profileId?: number) => async (smsCode?: string) => {
     try {
@@ -28,10 +28,11 @@ export const useConsentBkiDialog = (onClose: () => void) => {
 
   const handleSubmitBkiConstent =
     (phone?: string, profileId?: number) => async (confirmStatus: string) => {
-      close();
-
       if (confirmStatus === 'SIGNED' && phone) {
-        verifyPhoneDialog.open(handleSuccessVerify(profileId), verifyPhoneContent(phone));
+        verifyPhoneDialog.open({
+          ...verifyPhoneContent(phone),
+          onClose: handleSuccessVerify(profileId),
+        });
       } else {
         onClose();
       }
@@ -39,12 +40,7 @@ export const useConsentBkiDialog = (onClose: () => void) => {
 
   return {
     open: (phone?: string, profileId?: number) =>
-      open(
-        <ConsentBkiDialog
-          handleSubmit={handleSubmitBkiConstent(phone, profileId)}
-          onClose={onClose}
-        />,
-      ),
+      open({ onSubmit: handleSubmitBkiConstent(phone, profileId), onClose }),
   };
 };
 
@@ -52,7 +48,7 @@ const verifyPhoneContent = (phone: string) => ({
   title: 'Подтвердите номер телефона',
   description: `Мы отправили код на ${phone}`,
   phoneNumber: formatPhone(phone),
-  textButton: 'Отправить',
+  textButton: 'Далее',
   __html: `<span>Вводя код, я подтверждаю, что ознакомлен и подписываю:</span>
               <ul><li>согласие на запрос информации в БКИ</li></ul>`,
 });

package/src/ui-kit/DialogManager/Dialog.tsx

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 import { type PreventableEvent } from '../PreventableEvent';
 import { CloseButton } from './CloseButton';
-import { useDialogManager } from './useDialogManager';
 
 export interface DialogProps {
   className?: string;
@@ -13,25 +11,16 @@ export interface DialogProps {
   onClick?: (e: PreventableEvent) => void;
 }
 
-export const Dialog = JSX<DialogProps>(({ className, head, children, onClose, onClick }) => {
-  const { close } = useDialogManager();
-
-  const handleClose = useCallback(() => {
-    close();
-    onClose && onClose();
-  }, [onClose]);
-
-  return (
-    <div
-      onClick={onClick}
-      className={style('relative min-h-full bg-white pt-0 p-lg', className)}
-      role="dialog"
-    >
-      <div className="sticky py-xl top-0 bg-white z-10">
-        <CloseButton className="absolute top-0 right-0" onClose={handleClose} />
-        <div className="container">{head}</div>
-      </div>
-      <div className="container pb-6xl">{children}</div>
+export const Dialog = JSX<DialogProps>(({ className, head, children, onClose, onClick }) => (
+  <div
+    className={style('relative min-h-full bg-white pt-0 p-lg', className)}
+    role="dialog"
+    onClick={onClick}
+  >
+    <div className="sticky py-xl top-0 bg-white z-10">
+      <CloseButton className="absolute top-0 right-0" onClose={onClose} />
+      <div className="container">{head}</div>
     </div>
-  );
-});
+    <div className="container pb-6xl">{children}</div>
+  </div>
+));

package/src/ui-kit/DialogManager/DialogAction.ts

@@ -1,15 +1,13 @@
-import { type VNode } from '../../model/VNode';
+import type { ActionsMap } from '@redneckz/uni-jsx/lib/EventBus/Action';
+import type { VNode } from '../../model/VNode';
 
-export type DialogAction = DialogOpenAction | DialogCloseAction;
-
-export interface DialogOpenAction {
-  type: 'open';
+export interface DialogOptions {
   id?: string; // Singleton
   dialog: VNode;
-  onClose?: () => void;
 }
 
-export interface DialogCloseAction {
-  type: 'close';
-  all?: boolean;
-}
+export type DialogAction = ActionsMap<{
+  open(options: DialogOptions): void;
+  close(): void;
+  closeAll(): void;
+}>;

package/src/ui-kit/DialogManager/DialogManager.tsx

@@ -1,45 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useOnEscape } from '../../hooks/useOnEscape';
 import { style } from '../../utils/style';
-import { type DialogOpenAction } from './DialogAction';
-import { useDialogManager } from './useDialogManager';
 import { useDialogsList } from './useDialogsList';
 
 export const DialogManager = JSX(() => {
-  const handleCloseAll = useCallback((dialogActions: DialogOpenAction[]) => {
-    for (const _ of dialogActions) {
-      _?.onClose && _.onClose();
-    }
-  }, []);
-
-  const handleClose = useCallback((_: DialogOpenAction) => {
-    _?.onClose && _.onClose();
-  }, []);
-
-  const dialogs = useDialogsList({ onCloseAll: handleCloseAll, onClose: handleClose });
-
-  const { close } = useDialogManager();
-
-  const escapeHandler = useCallback(({ key }: { key: string }) => {
-    if (key === 'Escape') {
-      close();
-    }
-  }, []);
+  const [dialogs, { close }] = useDialogsList();
+  const hasDialogs = Boolean(dialogs.length);
 
-  useEventListener(globalThis.document, 'keydown', escapeHandler);
+  useOnEscape(close);
 
   useEffect(() => {
-    if (dialogs.length) {
-      globalThis.document?.body.classList.add('no-scrollbar');
-      globalThis.document?.body.classList.add('overflow-hidden');
+    if (hasDialogs) {
+      globalThis.document?.body.classList.add('no-scrollbar', 'overflow-hidden');
     } else {
-      globalThis.document?.body.classList.remove('no-scrollbar');
-      globalThis.document?.body.classList.remove('overflow-hidden');
+      globalThis.document?.body.classList.remove('no-scrollbar', 'overflow-hidden');
     }
-  }, [dialogs]);
+  }, [hasDialogs]);
 
-  return dialogs.length ? (
+  return hasDialogs ? (
     <div className="fixed inset-0 z-50" role="dialog">
       {dialogs.map(({ dialog, id }, i) => (
         <div
@@ -47,7 +26,7 @@ export const DialogManager = JSX(() => {
           className={style(
             'absolute inset-0 overflow-x-hidden overflow-y-scroll no-scrollbar bg-black/50',
             {
-              hidden: i !== dialogs.length - 1,
+              hidden: i !== dialogs.length - 1, // TODO Чего?)
             },
           )}
         >

package/src/ui-kit/DialogManager/isDialogOpen.ts

@@ -1,4 +1,4 @@
-import { type DialogOpenAction } from './DialogAction';
+import type { DialogOptions } from './DialogAction';
 
-export const isDialogOpen = (id: string, dialogs: DialogOpenAction[]): boolean =>
+export const isDialogOpen = (id: string, dialogs: DialogOptions[]): boolean =>
   Boolean(dialogs.find((item) => item.id === id, id));

package/src/ui-kit/DialogManager/useDialog.tsx

@@ -0,0 +1,31 @@
+import type { UNIComponent } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { DialogOptions } from './DialogAction';
+import { useDialogManager } from './useDialogManager';
+
+export function useDialog<Props extends { onClose?: () => void }>(
+  Dialog: UNIComponent<Props>,
+  initialProps: Partial<Props> = {},
+) {
+  const { open, close, ...rest } = useDialogManager();
+
+  const openDialog = useCallback(
+    (props: Props, options: Partial<DialogOptions> = {}) =>
+      open({
+        dialog: (
+          <Dialog
+            {...initialProps}
+            {...props}
+            onClose={() => {
+              close();
+              props.onClose?.();
+            }}
+          />
+        ),
+        ...options,
+      }),
+    [Dialog, open, close],
+  );
+
+  return { open: openDialog, close, ...rest };
+}

package/src/ui-kit/DialogManager/useDialogManager.ts

@@ -1,14 +1,4 @@
+import { useEmitterWithActions } from '@redneckz/uni-jsx/lib/EventBus/useEmitterWithActions';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { type VNode } from '../../model/VNode';
 
-export interface DialogOptions {
-  id?: string;
-  onClose?: () => void;
-}
-
-export const useDialogManager = () => ({
-  open: (dialog: VNode, options: DialogOptions = {}) =>
-    defaultEventBus.fire('dialog', { type: 'open', dialog, ...options }),
-  close: () => defaultEventBus.fire('dialog', { type: 'close' }),
-  closeAll: () => defaultEventBus.fire('dialog', { type: 'close', all: true }),
-});
+export const useDialogManager = () => useEmitterWithActions(defaultEventBus.emitter, 'dialog');

package/src/ui-kit/DialogManager/useDialogsList.ts

@@ -1,53 +1,19 @@
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useObservableWithActions } from '@redneckz/uni-jsx/lib/EventBus/useObservableWithActions';
 import { useList } from '@redneckz/uni-jsx/lib/hooks/useList';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { assertUnreachable } from '../../utils/assertUnreachable';
-import { type DialogOpenAction } from './DialogAction';
+import type { DialogOptions } from './DialogAction';
 
-interface DialogsListOptions {
-  onCloseAll?: (dialogs: DialogOpenAction[]) => void;
-  onClose?: (_: DialogOpenAction) => void;
-}
+export const useDialogsList = (): [
+  DialogOptions[],
+  { closeAll: () => void; close: () => void },
+] => {
+  const [dialogs, { push, pop, clear }] = useList<DialogOptions>();
 
-export const useDialogsList = ({
-  onCloseAll,
-  onClose,
-}: DialogsListOptions = {}): DialogOpenAction[] => {
-  const [dialogs, { push, pop, clear }] = useList<DialogOpenAction>();
+  useObservableWithActions(defaultEventBus.observable, 'dialog', {
+    open: push,
+    close: pop,
+    closeAll: clear,
+  });
 
-  const closeAll = useCallback(() => {
-    onCloseAll && onCloseAll(dialogs);
-    clear();
-  }, [dialogs, onCloseAll]);
-
-  const close = useCallback(() => {
-    onClose && onClose(dialogs[dialogs.length - 1]);
-    pop();
-  }, [dialogs, onClose]);
-
-  useEffect(
-    () =>
-      defaultEventBus.subscribe('dialog', (action) => {
-        if (!action) {
-          return;
-        }
-        switch (action.type) {
-          case 'open':
-            push(action);
-            break;
-          case 'close':
-            if (action.all) {
-              closeAll();
-            } else {
-              close();
-            }
-            break;
-          default:
-            assertUnreachable(action);
-        }
-      }),
-    [closeAll, close],
-  );
-
-  return dialogs;
+  return [dialogs, { close: pop, closeAll: clear }];
 };

package/src/ui-kit/DocumentDialog/DocumentDialog.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../Button/Button';
+import { Dialog } from '../DialogManager/Dialog';
+
+export interface DocumentDialogProps {
+  src: string;
+  convertToPng?: boolean;
+  onClose?: () => void;
+}
+
+// TODO Перенесено как есть из openDocument. Требует рефакторинга
+export const DocumentDialog = JSX<DocumentDialogProps>(({ src, convertToPng, onClose }) => (
+  <Dialog className="my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0" onClose={onClose}>
+    {convertToPng ? (
+      <img src={src} />
+    ) : (
+      <iframe src={`${src}#toolbar=0`} className="w-full h-[80vh]" id="iframe-dialog" />
+    )}
+    <Button className="mx-auto mt-m" type="button" onClick={onClose}>
+      Ознакомиться
+    </Button>
+  </Dialog>
+));

package/src/ui-kit/DocumentDialog/uaeDocumentDialog.ts

@@ -0,0 +1,18 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { feedbackById } from '../../api/RetailAPI/feedbackById';
+import { useMobileMode } from '../../hooks/useMobileMode';
+import type { Nullable } from '../../utils/Nullable';
+import { useDialog } from '../DialogManager/useDialog';
+import { DocumentDialog } from './DocumentDialog';
+
+export const useDocumentDialog = (docId: Nullable<number>) => {
+  const { open } = useDialog(DocumentDialog);
+  const isMobileMode = useMobileMode();
+
+  return useCallback(async () => {
+    if (docId) {
+      const src = URL.createObjectURL(await feedbackById(docId, isMobileMode));
+      open({ src });
+    }
+  }, [open, docId, isMobileMode]);
+};

package/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/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/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/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/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>