@redneckz/wildless-cms-uni-blocks 0.14.774 → 0.14.776

package/mobile/src/hooks/useExternalNS.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 export const getNS = <NS>(_: string): NS | undefined => (globalThis as any)[_];
 
 export const initializeExternalNS = <NS>(namespaceName: string, url: string, isModule = false) => {
-  const script = document.getElementById(url);
+  const script = globalThis.document.getElementById(url);
 
   if (script) {
     const ns = getNS<NS>(namespaceName);
@@ -19,7 +19,7 @@ export const initializeExternalNS = <NS>(namespaceName: string, url: string, isM
     }
   } else {
     return new Promise<NS | undefined>((resolve, reject) => {
-      const newScript = document.createElement('script');
+      const newScript = globalThis.document.createElement('script');
 
       newScript.src = url;
       newScript.async = true;
@@ -34,17 +34,22 @@ export const initializeExternalNS = <NS>(namespaceName: string, url: string, isM
         reject(error);
       });
 
-      document.head.appendChild(newScript);
+      globalThis.document.head.appendChild(newScript);
     });
   }
 };
 
 export const initializeExternalStylesheet = (url = '') => {
-  const link = document.createElement('link');
-  link.href = url;
-  link.rel = 'stylesheet';
+  const link = globalThis.document.getElementById(url);
 
-  document.head.appendChild(link);
+  if (!link) {
+    const newLink = globalThis.document.createElement('link');
+    newLink.href = url;
+    newLink.id = url;
+    newLink.rel = 'stylesheet';
+
+    globalThis.document.head.appendChild(newLink);
+  }
 };
 
 export function useExternalNS<NS>(
@@ -71,9 +76,9 @@ export function useExternalNS<NS>(
       isMounted = false;
 
       if (unmountNS) {
-        const script = document.getElementById(url);
+        const script = globalThis.document.getElementById(url);
         if (script) {
-          document.head.removeChild(script);
+          globalThis.document.head.removeChild(script);
         }
 
         setExternalNS(undefined);

package/package.json

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

package/src/components/Header/HeaderChatBotButton.tsx

@@ -16,7 +16,7 @@ interface HeaderChatBotButtonProps {
 
 export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>(
   ({ chat = 'personal', iconVersion, className, ariaLabel = 'Чат', version }) => {
-    const load = useChatBot(chat);
+    const { load, isLoading } = useChatBot(chat);
 
     return (
       <HeaderSecondaryMenuButton
@@ -27,6 +27,7 @@ export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>(
         buttonSize="large"
         isGrayBg={true}
         version={version}
+        isLoading={isLoading}
       />
     );
   },

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -16,6 +16,7 @@ export interface HeaderSecondaryMenuButtonProps extends ImageContent, AspectsPro
   ariaLabel?: string;
   onClick?: (ev: PreventableEventWithTarget) => void;
   version?: BlockVersion;
+  isLoading?: boolean;
 }
 
 const BUTTON_SIZE_STYLE = {
@@ -35,6 +36,7 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
     data,
     onClick,
     version,
+    isLoading,
   }) => {
     const grayBg = isGrayBg && !isRounded ? 'bg-main-divider' : '';
     const bgColor = version === 'transparent' ? 'backdrop-opacity-30 bg-white/30' : grayBg;
@@ -58,13 +60,17 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...getAspectsAttributes(data)}
       >
-        <Img
-          image={image}
-          className={style('h-full', {
-            'bg-main-divider/20 rounded-full': isRounded,
-          })}
-          imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
-        />
+        {isLoading ? (
+          <div className="w-full h-full rounded-full border-4 border-r-transparent animate-spin text-primary-main" />
+        ) : (
+          <Img
+            image={image}
+            className={style('h-full', {
+              'bg-main-divider/20 rounded-full': isRounded,
+            })}
+            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
+          />
+        )}
       </button>
     );
   },

package/src/components/Header/useChatBot.ts

@@ -1,4 +1,4 @@
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { initializeExternalNS, initializeExternalStylesheet } from '../../hooks/useExternalNS';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 
@@ -15,40 +15,72 @@ const CHATBOT_URL: Record<string, string> = {
 interface WebChat {
   render?: (id?: string, isOpen?: boolean) => void;
   chatOpen?: () => void;
+  chatClose?: () => void;
 }
 
 export const useChatBot = (chat?: string) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   useEffect(() => globalThis.localStorage?.setItem(CHAT_STORAGE_NAME, String(Date.now())), []);
   const chatUrl = CHATBOT_URL[chat ?? ''];
 
-  return async (ev: PreventableEventWithTarget) => {
-    if (!chatUrl) {
-      return;
-    }
+  const load = useCallback(
+    (ev: PreventableEventWithTarget) => {
+      if (!chatUrl) {
+        return;
+      }
 
-    if (chat !== 'personal') {
-      initializeExternalStylesheet(`${chatUrl}/bundle.css`);
+      setIsLoading(true);
+      if (chat === 'business') {
+        renderBusinessChatBot(chatUrl).finally(() => setIsLoading(false));
+      } else {
+        renderPersonalChatBot(ev, chatUrl).finally(() => setIsLoading(false));
+      }
+    },
+    [chatUrl, chat],
+  );
 
-      const businessChat = (await initializeExternalNS(
-        CHAT_NAMESPACE,
-        `${chatUrl}/bundle.js`,
-        true,
-      )) as WebChat;
+  return { load, isLoading };
+};
 
-      if (businessChat?.render) {
-        businessChat.render(CHAT_FRAME_ID, true);
-      }
-    } else {
-      const target = ev.target as HTMLElement;
+const renderPersonalChatBot = async (ev: PreventableEventWithTarget, chatUrl: string) => {
+  const target = ev.target as HTMLElement;
 
-      if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
-        target?.classList.add(CHAT_BUTTON_EXTERNAL_NAME);
-      }
+  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);
-      }
-    }
-  };
+  const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
+  if (!chatFrame) {
+    await initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+  }
+};
+
+const renderBusinessChatBot = async (chatUrl: string) => {
+  const businessChat = (await initializeExternalNS(
+    CHAT_NAMESPACE,
+    `${chatUrl}/bundle.js`,
+    true,
+  )) as WebChat;
+
+  initializeExternalStylesheet(`${chatUrl}/bundle.css`);
+
+  const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
+  if (chatFrame) {
+    businessChat?.chatOpen?.();
+  } else {
+    createChatFrame();
+
+    businessChat?.render?.(CHAT_FRAME_ID, true);
+  }
+};
+
+const createChatFrame = () => {
+  const chatFrame = globalThis.document.createElement('div');
+  chatFrame.id = CHAT_FRAME_ID;
+  chatFrame.style.position = 'fixed';
+  chatFrame.style.right = '0';
+  chatFrame.style.bottom = '0';
+
+  globalThis.document.body.appendChild(chatFrame);
 };

package/src/hooks/useExternalNS.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 export const getNS = <NS>(_: string): NS | undefined => (globalThis as any)[_];
 
 export const initializeExternalNS = <NS>(namespaceName: string, url: string, isModule = false) => {
-  const script = document.getElementById(url);
+  const script = globalThis.document.getElementById(url);
 
   if (script) {
     const ns = getNS<NS>(namespaceName);
@@ -19,7 +19,7 @@ export const initializeExternalNS = <NS>(namespaceName: string, url: string, isM
     }
   } else {
     return new Promise<NS | undefined>((resolve, reject) => {
-      const newScript = document.createElement('script');
+      const newScript = globalThis.document.createElement('script');
 
       newScript.src = url;
       newScript.async = true;
@@ -34,17 +34,22 @@ export const initializeExternalNS = <NS>(namespaceName: string, url: string, isM
         reject(error);
       });
 
-      document.head.appendChild(newScript);
+      globalThis.document.head.appendChild(newScript);
     });
   }
 };
 
 export const initializeExternalStylesheet = (url = '') => {
-  const link = document.createElement('link');
-  link.href = url;
-  link.rel = 'stylesheet';
+  const link = globalThis.document.getElementById(url);
 
-  document.head.appendChild(link);
+  if (!link) {
+    const newLink = globalThis.document.createElement('link');
+    newLink.href = url;
+    newLink.id = url;
+    newLink.rel = 'stylesheet';
+
+    globalThis.document.head.appendChild(newLink);
+  }
 };
 
 export function useExternalNS<NS>(
@@ -71,9 +76,9 @@ export function useExternalNS<NS>(
       isMounted = false;
 
       if (unmountNS) {
-        const script = document.getElementById(url);
+        const script = globalThis.document.getElementById(url);
         if (script) {
-          document.head.removeChild(script);
+          globalThis.document.head.removeChild(script);
         }
 
         setExternalNS(undefined);