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

package/bundle/bundle.umd.js

@@ -1000,7 +1000,7 @@
         return options.filter((_) => _.text?.toLocaleLowerCase().includes(query?.trim().toLocaleLowerCase()));
     };
 
-    const SelectPopup = JSX(({ popupRef, options, value, query, onChange, iconVersion }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md", role: "list", ref: popupRef, children: filterOptions(options, query).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", "aria-selected": option.key === value?.key, onClick: (e) => {
+    const SelectPopup = JSX(({ popupRef, options, value, query, onChange, iconVersion }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", ref: popupRef, children: filterOptions(options, query).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", "aria-selected": option.key === value?.key, onClick: (e) => {
                 e.stopPropagation();
                 if (onChange) {
                     onChange(option);
@@ -1036,7 +1036,7 @@
 
     const Select = JSX(
     // eslint-disable-next-line complexity
-    ({ className, label, options = [], value, valid = true, isBorder = true, placeholder = '', isSearch = false, iconVersion, onChange, disabled, }) => {
+    ({ className, label, options = [], value, valid = true, isBorder = true, placeholder = '', isSearch = false, iconVersion = 'black', onChange, disabled, }) => {
         const [isOpen, { setFalse: close, setTrue: open }] = useBool();
         const [query, setQuery] = useState('');
         const isDisabled = disabled || options.length === 0;
@@ -4259,59 +4259,99 @@
     };
 
     const getNS = (_) => globalThis[_];
-    function useExternalNS(namespaceName, url) {
-        const [externalNS, setExternalNS] = useState();
-        const setNS = useCallback(() => setExternalNS(getNS(namespaceName)), [namespaceName]);
-        useEffect(() => {
-            const script = document.getElementById(url);
-            if (script) {
-                if (getNS(namespaceName)) {
-                    setNS();
-                }
-                else {
-                    script.addEventListener('load', setNS);
-                    return () => {
-                        script.removeEventListener('load', setNS);
-                    };
-                }
+    const initializeExternalNS = (namespaceName, url) => {
+        const script = document.getElementById(url);
+        if (script) {
+            const ns = getNS(namespaceName);
+            if (ns) {
+                return Promise.resolve(ns);
             }
             else {
+                return new Promise((resolve) => {
+                    script.addEventListener('load', () => {
+                        resolve(getNS(namespaceName));
+                    });
+                });
+            }
+        }
+        else {
+            return new Promise((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(namespaceName));
+                });
+                newScript.addEventListener('error', (error) => {
+                    reject(error);
+                });
                 document.head.appendChild(newScript);
-                return () => {
-                    document.head.removeChild(newScript);
+            });
+        }
+    };
+    function useExternalNS(namespaceName, url, unmountNS = true) {
+        const [externalNS, setExternalNS] = useState(undefined);
+        useEffect(() => {
+            let isMounted = true;
+            initializeExternalNS(namespaceName, url)
+                .then((ns) => {
+                if (isMounted) {
+                    setExternalNS(ns);
+                }
+            })
+                .catch((error) => {
+                console.error(`Failed to initialize external namespace: ${error}`);
+            });
+            return () => {
+                isMounted = false;
+                if (unmountNS) {
+                    const script = document.getElementById(url);
+                    if (script) {
+                        document.head.removeChild(script);
+                    }
                     setExternalNS(undefined);
-                };
-            }
-            return undefined;
-        }, [namespaceName, url]);
+                }
+            };
+        }, [namespaceName, url, unmountNS]);
         return externalNS;
     }
 
-    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 = {
         personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
         business: '', //TODO: add url business chat
     };
     const useChatBot = (chat) => {
-        useEffect(() => globalThis.localStorage?.setItem('webchat-keep-open', String(Date.now())), []);
-        return useExternalNS(CHATBOT_NAMESPACE, CHATBOT_URL[chat]);
+        useEffect(() => globalThis.localStorage?.setItem(CHAT_STORAGE_NAME, String(Date.now())), []);
+        const chatUrl = CHATBOT_URL[chat ?? ''];
+        return (ev) => {
+            if (!chatUrl) {
+                return;
+            }
+            if (chat !== 'personal') {
+                initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+            }
+            else {
+                const target = ev.target;
+                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 CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
-    const HeaderChatBotButton = JSX((props) => {
-        const [loadRequested, { setTrue: load }] = useBool();
-        return loadRequested ? (jsx(HeaderChatBotButtonWithLoader, { ...props })) : (renderChatBotButton({ ...props, onClick: load }));
+    const HeaderChatBotButton = JSX(({ chat = 'personal', iconVersion, className }) => {
+        const load = useChatBot(chat);
+        return (jsx(HeaderSecondaryMenuButton, { className: className, image: { icon: 'HeadphonesIcon', iconVersion }, ariaLabel: "\u0427\u0430\u0442", onClick: load, buttonSize: "large", isGrayBg: true }));
     });
-    const HeaderChatBotButtonWithLoader = JSX(({ chat = 'personal', ...rest }) => {
-        useChatBot(chat);
-        return renderChatBotButton(rest);
-    });
-    const renderChatBotButton = ({ className, iconVersion, onClick }) => (jsx(HeaderSecondaryMenuButton, { className: style(CHAT_BUTTON_EXTERNAL_NAME, className), image: { icon: 'HeadphonesIcon', iconVersion }, ariaLabel: "\u0427\u0430\u0442", onClick: onClick, buttonSize: "large", isGrayBg: true }));
 
     const HeaderItem = JSX(({ className = '', active, dataItemName, children, ...rest }) => {
         const link = useLink();
@@ -4743,7 +4783,7 @@
     const YMAPS_NAMESPACE = 'ymaps';
     const useYandexMaps = () => {
         const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY || ''}&lang=ru_RU`;
-        return useExternalNS(YMAPS_NAMESPACE, url);
+        return useExternalNS(YMAPS_NAMESPACE, url, false);
     };
 
     const styles = {
@@ -5900,21 +5940,27 @@
         useEffect(() => {
             getSessionQuery(); //? Call first time for save query in sessionStorage
         }, []);
-        useEventListener(globalThis, 'click', navigationHandler);
+        const loadBot = useChatBot(projectSettings.CHAT_BOT);
+        const reachGoalYM = (targetName) => {
+            const [ymID] = projectSettings.YANDEX_METRIKA_ID?.split(',').reverse() ?? [];
+            if ([ymID, targetName, globalThis.ym].every(Boolean)) {
+                globalThis.ym(ymID, 'reachGoal', targetName);
+            }
+        };
+        useEventListener(globalThis, 'click', navigationHandler({ loadBot, reachGoalYM }));
     });
-    const navigationHandler = (ev) => {
+    const navigationHandler = (methods) => (ev) => {
         const element = getAnchorElement(ev.target);
-        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);
+        for (const key in element?.dataset) {
+            getScenario(key)?.(element, methods);
         }
         if (isURL(element?.href) && !element?.href?.startsWith(globalThis.location?.origin)) {
             ev.preventDefault();
             ev.stopPropagation();
             const url = adjustSessionQuery(element?.href) || element?.href;
             if (url) {
-                goTransition(element?.target)?.(url);
+                const transition = getTransition(element?.target);
+                transition?.(url);
             }
         }
     };
@@ -5925,7 +5971,7 @@
         }
         return _target;
     };
-    const goTransition = tableFunc([
+    const getTransition = tableFunc([
         [(_) => _ === '_blank', (url) => globalThis.open(url, '_blank')],
         [(_) => _ === '_parent', (url) => globalThis.parent && (globalThis.parent.location.href = url)],
         [
@@ -5936,6 +5982,10 @@
         ],
         [() => true, (url) => globalThis.location && (globalThis.location.href = url)],
     ]);
+    const getScenario = tableFunc([
+        [(_) => _ === 'ymtarget', (target, methods) => methods?.reachGoalYM(target?.dataset?.ymtarget)],
+        [(_) => _ === 'chatbot', (target, methods) => methods?.loadBot({ target })],
+    ]);
 
     const COOKIE_DIALOG_ID = 'cookie';
     const DIALOG_INITIAL_DELAY = 3 * 1000;
@@ -6087,7 +6137,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.248";
+    const packageVersion = "0.14.250";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;