@redneckz/wildless-cms-uni-blocks 0.14.249 → 0.14.251

package/mobile/src/components/Header/HeaderChatBotButton.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { type IconVersion } from '../../model/IconVersion';
-import { style } from '../../utils/style';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 import { useChatBot } from './useChatBot';
 
@@ -9,36 +8,22 @@ interface HeaderChatBotButtonProps {
   className?: string;
   iconVersion?: IconVersion;
   chat?: string;
-  onClick?: () => void;
+  onClick?: (ev: PreventableEvent & { target: EventTarget | null }) => void;
 }
 
-const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
+export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>(
+  ({ chat = 'personal', iconVersion, className }) => {
+    const load = useChatBot(chat);
 
-export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>((props) => {
-  const [loadRequested, { setTrue: load }] = useBool();
-
-  return loadRequested ? (
-    <HeaderChatBotButtonWithLoader {...props} />
-  ) : (
-    renderChatBotButton({ ...props, onClick: load })
-  );
-});
-
-const HeaderChatBotButtonWithLoader = JSX<HeaderChatBotButtonProps>(
-  ({ chat = 'personal', ...rest }) => {
-    useChatBot(chat);
-
-    return renderChatBotButton(rest);
+    return (
+      <HeaderSecondaryMenuButton
+        className={className}
+        image={{ icon: 'HeadphonesIcon', iconVersion }}
+        ariaLabel="Чат"
+        onClick={load}
+        buttonSize="large"
+        isGrayBg={true}
+      />
+    );
   },
 );
-
-const renderChatBotButton = ({ className, iconVersion, onClick }: HeaderChatBotButtonProps) => (
-  <HeaderSecondaryMenuButton
-    className={style(CHAT_BUTTON_EXTERNAL_NAME, className)}
-    image={{ icon: 'HeadphonesIcon', iconVersion }}
-    ariaLabel="Чат"
-    onClick={onClick}
-    buttonSize="large"
-    isGrayBg={true}
-  />
-);

package/mobile/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
 import { type ImageContent } from '../../ui-kit/Img/ImgProps';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
 export interface HeaderSecondaryMenuButtonProps extends ImageContent {
@@ -10,7 +11,7 @@ export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   isGrayBg?: boolean;
   disabled?: boolean;
   ariaLabel?: string;
-  onClick?: () => void;
+  onClick?: (ev: PreventableEvent & { target: EventTarget | null }) => void;
 }
 
 const BUTTON_SIZE_STYLE = {

package/mobile/src/components/Header/useChatBot.ts

@@ -1,15 +1,39 @@
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { useExternalNS } from '../../hooks/useExternalNS';
+import { initializeExternalNS } from '../../hooks/useExternalNS';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 
-const CHATBOT_NAMESPACE = 'chatbot';
+const CHAT_NAMESPACE = 'chatbot';
+const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
+const CHAT_FRAME_ID = 'webchat-js-container:webchat_rshb';
+const CHAT_STORAGE_NAME = 'webchat-keep-open';
 
 const CHATBOT_URL: Record<string, string> = {
   personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
   business: '', //TODO: add url business chat
 };
 
-export const useChatBot = (chat: string) => {
-  useEffect(() => globalThis.localStorage?.setItem('webchat-keep-open', String(Date.now())), []);
+export const useChatBot = (chat?: string) => {
+  useEffect(() => globalThis.localStorage?.setItem(CHAT_STORAGE_NAME, String(Date.now())), []);
+  const chatUrl = CHATBOT_URL[chat ?? ''];
 
-  return useExternalNS(CHATBOT_NAMESPACE, CHATBOT_URL[chat]);
+  return (ev: PreventableEvent & { target: EventTarget | null }) => {
+    if (!chatUrl) {
+      return;
+    }
+
+    if (chat !== 'personal') {
+      initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+    } else {
+      const target = ev.target as HTMLElement;
+
+      if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
+        target?.classList.add(CHAT_BUTTON_EXTERNAL_NAME);
+      }
+
+      const chatFrame = document.getElementById(CHAT_FRAME_ID);
+      if (!chatFrame) {
+        initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+      }
+    }
+  };
 };

package/mobile/src/hooks/useExternalNS.ts

@@ -1,44 +1,74 @@
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 
 export const getNS = <NS>(_: string): NS | undefined => (globalThis as any)[_];
 
-export function useExternalNS<NS>(namespaceName: string, url: string): NS | undefined {
-  const [externalNS, setExternalNS] = useState<NS>();
+export const initializeExternalNS = <NS>(namespaceName: string, url: string) => {
+  const script = document.getElementById(url);
 
-  const setNS = useCallback(() => setExternalNS(getNS<NS>(namespaceName)), [namespaceName]);
+  if (script) {
+    const ns = getNS<NS>(namespaceName);
 
-  useEffect(() => {
-    const script = document.getElementById(url);
-
-    if (script) {
-      if (getNS<NS>(namespaceName)) {
-        setNS();
-      } else {
-        script.addEventListener('load', setNS);
-
-        return () => {
-          script.removeEventListener('load', setNS);
-        };
-      }
+    if (ns) {
+      return Promise.resolve(ns);
     } else {
+      return new Promise<NS | undefined>((resolve) => {
+        script.addEventListener('load', () => {
+          resolve(getNS<NS>(namespaceName));
+        });
+      });
+    }
+  } else {
+    return new Promise<NS | undefined>((resolve, reject) => {
       const newScript = document.createElement('script');
 
       newScript.src = url;
       newScript.async = true;
       newScript.id = url;
-      newScript.addEventListener('load', setNS);
+      newScript.addEventListener('load', () => {
+        resolve(getNS<NS>(namespaceName));
+      });
+      newScript.addEventListener('error', (error) => {
+        reject(error);
+      });
 
       document.head.appendChild(newScript);
+    });
+  }
+};
 
-      return () => {
-        document.head.removeChild(newScript);
+export function useExternalNS<NS>(
+  namespaceName: string,
+  url: string,
+  unmountNS = true,
+): NS | undefined {
+  const [externalNS, setExternalNS] = useState<NS | undefined>(undefined);
 
-        setExternalNS(undefined);
-      };
-    }
+  useEffect(() => {
+    let isMounted = true;
+
+    initializeExternalNS<NS>(namespaceName, url)
+      .then((ns) => {
+        if (isMounted) {
+          setExternalNS(ns);
+        }
+      })
+      .catch((error) => {
+        console.error(`Failed to initialize external namespace: ${error}`);
+      });
+
+    return () => {
+      isMounted = false;
 
-    return undefined;
-  }, [namespaceName, url]);
+      if (unmountNS) {
+        const script = document.getElementById(url);
+        if (script) {
+          document.head.removeChild(script);
+        }
+
+        setExternalNS(undefined);
+      }
+    };
+  }, [namespaceName, url, unmountNS]);
 
   return externalNS;
 }

package/mobile/src/hooks/useNavigateHandler.ts

@@ -1,5 +1,6 @@
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
+import { useChatBot } from '../components/Header/useChatBot';
 import { type Target } from '../model/LinkProps';
 import { projectSettings } from '../ProjectSettings';
 import { type PreventableEvent } from '../ui-kit/PreventableEvent';
@@ -10,35 +11,45 @@ import { isURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 
 export type NavigateElement = Element | null;
+export type MethodsMap = Record<string, (params: any) => any>;
 
 export const useNavigateHandler = handlerDecorator(() => {
   useEffect(() => {
     getSessionQuery(); //? Call first time for save query in sessionStorage
   }, []);
 
-  useEventListener(globalThis, 'click', navigationHandler);
-});
+  const loadBot = useChatBot(projectSettings.CHAT_BOT);
 
-const navigationHandler = (ev: PreventableEvent & { target: EventTarget | null }) => {
-  const element = getAnchorElement(ev.target as NavigateElement);
+  const reachGoalYM = (targetName?: string) => {
+    const [ymID] = projectSettings.YANDEX_METRIKA_ID?.split(',').reverse() ?? [];
 
-  const [ymID] = projectSettings._.YANDEX_METRIKA_ID?.split(',').reverse() ?? [];
-  const targetName = element?.dataset?.ymtarget;
+    if ([ymID, targetName, globalThis.ym].every(Boolean)) {
+      globalThis.ym(ymID, 'reachGoal', targetName);
+    }
+  };
 
-  if ([ymID, targetName, globalThis.ym].every(Boolean)) {
-    globalThis.ym(ymID, 'reachGoal', targetName);
-  }
+  useEventListener(globalThis, 'click', navigationHandler({ loadBot, reachGoalYM }));
+});
 
-  if (isURL(element?.href) && !element?.href?.startsWith(globalThis.location?.origin)) {
-    ev.preventDefault();
-    ev.stopPropagation();
+const navigationHandler =
+  (methods: MethodsMap) => (ev: PreventableEvent & { target: EventTarget | null }) => {
+    const element = getAnchorElement(ev.target as NavigateElement);
 
-    const url = adjustSessionQuery(element?.href) || element?.href;
-    if (url) {
-      goTransition(element?.target as Target)?.(url);
+    for (const key in element?.dataset) {
+      getScenario(key)?.(element as HTMLElement, methods);
     }
-  }
-};
+
+    if (isURL(element?.href) && !element?.href?.startsWith(globalThis.location?.origin)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      const url = adjustSessionQuery(element?.href) || element?.href;
+      if (url) {
+        const transition = getTransition(element?.target as Target);
+        transition?.(url);
+      }
+    }
+  };
 
 const getAnchorElement = (target: NavigateElement) => {
   let _target = target;
@@ -49,7 +60,7 @@ const getAnchorElement = (target: NavigateElement) => {
   return _target as HTMLAnchorElement | null;
 };
 
-const goTransition = tableFunc<Target, (url: string) => void>([
+const getTransition = tableFunc<Target, (url: string) => void>([
   [(_) => _ === '_blank', (url) => globalThis.open(url, '_blank')],
   [(_) => _ === '_parent', (url) => globalThis.parent && (globalThis.parent.location.href = url)],
   [
@@ -60,3 +71,8 @@ const goTransition = tableFunc<Target, (url: string) => void>([
   ],
   [() => true, (url) => globalThis.location && (globalThis.location.href = url)],
 ]);
+
+const getScenario = tableFunc<string, (target: HTMLElement | null, methods: MethodsMap) => void>([
+  [(_) => _ === 'ymtarget', (target, methods) => methods?.reachGoalYM(target?.dataset?.ymtarget)],
+  [(_) => _ === 'chatbot', (target, methods) => methods?.loadBot({ target })],
+]);

package/mobile/src/model/LinkProps.ts

@@ -14,6 +14,8 @@ export type Target = '' | '_self' | '_blank' | '_parent' | '_top';
 export type DataAttributes = {
   /** @title Имя цели для Яндекс Метрики */
   ymTarget?: string;
+  /** @title Открыть чат бот */
+  chatbot?: boolean;
 };
 
 export interface LinkCommonProps {

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

@@ -35,7 +35,7 @@ export const Select = JSX<SelectProps>(
     isBorder = true,
     placeholder = '',
     isSearch = false,
-    iconVersion,
+    iconVersion = 'black',
     onChange,
     disabled,
   }) => {

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

@@ -19,7 +19,7 @@ export const SelectPopup = JSX<SelectPopupProps>(
   ({ popupRef, options, value, query, onChange, iconVersion }) =>
     options?.length ? (
       <div
-        className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md"
+        className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
         role="list"
         ref={popupRef}
       >

package/mobile/src/ui-kit/YandexMap/useYandexMaps.ts

@@ -9,5 +9,5 @@ export const useYandexMaps = () => {
     projectSettings.YANDEX_MAP_API_KEY || ''
   }&lang=ru_RU`;
 
-  return useExternalNS<typeof ymaps>(YMAPS_NAMESPACE, url);
+  return useExternalNS<typeof ymaps>(YMAPS_NAMESPACE, url, false);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.249",
+  "version": "0.14.251",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Header/HeaderChatBotButton.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { type IconVersion } from '../../model/IconVersion';
-import { style } from '../../utils/style';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 import { useChatBot } from './useChatBot';
 
@@ -9,36 +8,22 @@ interface HeaderChatBotButtonProps {
   className?: string;
   iconVersion?: IconVersion;
   chat?: string;
-  onClick?: () => void;
+  onClick?: (ev: PreventableEvent & { target: EventTarget | null }) => void;
 }
 
-const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
+export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>(
+  ({ chat = 'personal', iconVersion, className }) => {
+    const load = useChatBot(chat);
 
-export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>((props) => {
-  const [loadRequested, { setTrue: load }] = useBool();
-
-  return loadRequested ? (
-    <HeaderChatBotButtonWithLoader {...props} />
-  ) : (
-    renderChatBotButton({ ...props, onClick: load })
-  );
-});
-
-const HeaderChatBotButtonWithLoader = JSX<HeaderChatBotButtonProps>(
-  ({ chat = 'personal', ...rest }) => {
-    useChatBot(chat);
-
-    return renderChatBotButton(rest);
+    return (
+      <HeaderSecondaryMenuButton
+        className={className}
+        image={{ icon: 'HeadphonesIcon', iconVersion }}
+        ariaLabel="Чат"
+        onClick={load}
+        buttonSize="large"
+        isGrayBg={true}
+      />
+    );
   },
 );
-
-const renderChatBotButton = ({ className, iconVersion, onClick }: HeaderChatBotButtonProps) => (
-  <HeaderSecondaryMenuButton
-    className={style(CHAT_BUTTON_EXTERNAL_NAME, className)}
-    image={{ icon: 'HeadphonesIcon', iconVersion }}
-    ariaLabel="Чат"
-    onClick={onClick}
-    buttonSize="large"
-    isGrayBg={true}
-  />
-);

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
 import { type ImageContent } from '../../ui-kit/Img/ImgProps';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
 export interface HeaderSecondaryMenuButtonProps extends ImageContent {
@@ -10,7 +11,7 @@ export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   isGrayBg?: boolean;
   disabled?: boolean;
   ariaLabel?: string;
-  onClick?: () => void;
+  onClick?: (ev: PreventableEvent & { target: EventTarget | null }) => void;
 }
 
 const BUTTON_SIZE_STYLE = {

package/src/components/Header/useChatBot.ts

@@ -1,15 +1,39 @@
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { useExternalNS } from '../../hooks/useExternalNS';
+import { initializeExternalNS } from '../../hooks/useExternalNS';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 
-const CHATBOT_NAMESPACE = 'chatbot';
+const CHAT_NAMESPACE = 'chatbot';
+const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
+const CHAT_FRAME_ID = 'webchat-js-container:webchat_rshb';
+const CHAT_STORAGE_NAME = 'webchat-keep-open';
 
 const CHATBOT_URL: Record<string, string> = {
   personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
   business: '', //TODO: add url business chat
 };
 
-export const useChatBot = (chat: string) => {
-  useEffect(() => globalThis.localStorage?.setItem('webchat-keep-open', String(Date.now())), []);
+export const useChatBot = (chat?: string) => {
+  useEffect(() => globalThis.localStorage?.setItem(CHAT_STORAGE_NAME, String(Date.now())), []);
+  const chatUrl = CHATBOT_URL[chat ?? ''];
 
-  return useExternalNS(CHATBOT_NAMESPACE, CHATBOT_URL[chat]);
+  return (ev: PreventableEvent & { target: EventTarget | null }) => {
+    if (!chatUrl) {
+      return;
+    }
+
+    if (chat !== 'personal') {
+      initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+    } else {
+      const target = ev.target as HTMLElement;
+
+      if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
+        target?.classList.add(CHAT_BUTTON_EXTERNAL_NAME);
+      }
+
+      const chatFrame = document.getElementById(CHAT_FRAME_ID);
+      if (!chatFrame) {
+        initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+      }
+    }
+  };
 };

package/src/hooks/useExternalNS.ts

@@ -1,44 +1,74 @@
-import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 
 export const getNS = <NS>(_: string): NS | undefined => (globalThis as any)[_];
 
-export function useExternalNS<NS>(namespaceName: string, url: string): NS | undefined {
-  const [externalNS, setExternalNS] = useState<NS>();
+export const initializeExternalNS = <NS>(namespaceName: string, url: string) => {
+  const script = document.getElementById(url);
 
-  const setNS = useCallback(() => setExternalNS(getNS<NS>(namespaceName)), [namespaceName]);
+  if (script) {
+    const ns = getNS<NS>(namespaceName);
 
-  useEffect(() => {
-    const script = document.getElementById(url);
-
-    if (script) {
-      if (getNS<NS>(namespaceName)) {
-        setNS();
-      } else {
-        script.addEventListener('load', setNS);
-
-        return () => {
-          script.removeEventListener('load', setNS);
-        };
-      }
+    if (ns) {
+      return Promise.resolve(ns);
     } else {
+      return new Promise<NS | undefined>((resolve) => {
+        script.addEventListener('load', () => {
+          resolve(getNS<NS>(namespaceName));
+        });
+      });
+    }
+  } else {
+    return new Promise<NS | undefined>((resolve, reject) => {
       const newScript = document.createElement('script');
 
       newScript.src = url;
       newScript.async = true;
       newScript.id = url;
-      newScript.addEventListener('load', setNS);
+      newScript.addEventListener('load', () => {
+        resolve(getNS<NS>(namespaceName));
+      });
+      newScript.addEventListener('error', (error) => {
+        reject(error);
+      });
 
       document.head.appendChild(newScript);
+    });
+  }
+};
 
-      return () => {
-        document.head.removeChild(newScript);
+export function useExternalNS<NS>(
+  namespaceName: string,
+  url: string,
+  unmountNS = true,
+): NS | undefined {
+  const [externalNS, setExternalNS] = useState<NS | undefined>(undefined);
 
-        setExternalNS(undefined);
-      };
-    }
+  useEffect(() => {
+    let isMounted = true;
+
+    initializeExternalNS<NS>(namespaceName, url)
+      .then((ns) => {
+        if (isMounted) {
+          setExternalNS(ns);
+        }
+      })
+      .catch((error) => {
+        console.error(`Failed to initialize external namespace: ${error}`);
+      });
+
+    return () => {
+      isMounted = false;
 
-    return undefined;
-  }, [namespaceName, url]);
+      if (unmountNS) {
+        const script = document.getElementById(url);
+        if (script) {
+          document.head.removeChild(script);
+        }
+
+        setExternalNS(undefined);
+      }
+    };
+  }, [namespaceName, url, unmountNS]);
 
   return externalNS;
 }