@redneckz/wildless-cms-uni-blocks 0.14.795 → 0.14.797

package/mobile/bundle/bundle.umd.js

@@ -3422,6 +3422,16 @@
             });
         }
     };
+    const initializeExternalStylesheet = (url = '') => {
+        const link = globalThis.document.getElementById(url);
+        if (!link) {
+            const newLink = globalThis.document.createElement('link');
+            newLink.href = url;
+            newLink.id = url;
+            newLink.rel = 'stylesheet';
+            globalThis.document.head.appendChild(newLink);
+        }
+    };
     function useExternalNS(namespaceName, url, unmountNS = true) {
         const [externalNS, setExternalNS] = useState(undefined);
         useEffect(() => {
@@ -9108,6 +9118,83 @@
         return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container space-y-m", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "@xl:text-center" }) : null, regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ name = '' }) => ({ key: name, text: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(Link, { className: style('w-full @xl:w-auto'), href: regionHref, target: "_blank", version: button?.version ?? 'primary', data: getAspectsWithInclude(data, region?.key), children: button?.text ? button.text : 'Перейти' }) })) : null] }) }));
     });
 
+    const BUTTON_SIZE_STYLE = {
+        default: 'w-6 h-6',
+        medium: 'w-10 h-10',
+        large: 'w-12 h-12',
+    };
+    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, buttonSize = 'default', isGrayBg = false, disabled, ariaLabel = 'Меню второго уровня', image, data, onClick, version, isLoading, dataTestId = '', }) => {
+        const grayBg = isGrayBg && !isRounded ? 'bg-main-divider' : '';
+        const bgColor = version === 'transparent' ? 'backdrop-opacity-30 bg-white/30' : grayBg;
+        return (jsx("button", { className: style('group/btn border-0 flex shrink-0 items-center', isGrayBg ? 'p-s rounded-full' : 'p-0 bg-inherit', bgColor, isRounded
+                ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
+                : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, ...getDataTestIdAttribute(dataTestId), ...getAspectsAttributes(data), children: isLoading ? (jsx("div", { className: "w-full h-full rounded-full border-4 border-r-transparent animate-spin text-primary-main" })) : (jsx(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" })) }));
+    });
+    const getDataTestIdAttribute = (dataTestId) => dataTestId ? { 'data-test-id': dataTestId } : null;
+
+    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 BUSINESS_CHAT_PREFIX = '/webchat-api';
+    const CHATBOT_URL = {
+        personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
+        business: '/webchat',
+    };
+    const useChatBot = (chat) => {
+        const [isLoading, setIsLoading] = useState(false);
+        useEffect(() => globalThis.localStorage?.setItem(CHAT_STORAGE_NAME, String(Date.now())), []);
+        const chatUrl = CHATBOT_URL[chat ?? ''];
+        const load = useCallback((ev) => {
+            if (!chatUrl) {
+                return;
+            }
+            setIsLoading(true);
+            if (chat === 'business') {
+                renderBusinessChatBot(chatUrl).finally(() => setIsLoading(false));
+            }
+            else {
+                renderPersonalChatBot(ev, chatUrl).finally(() => setIsLoading(false));
+            }
+        }, [chatUrl, chat]);
+        return { load, isLoading };
+    };
+    const renderPersonalChatBot = async (ev, chatUrl) => {
+        const target = ev.target;
+        if (!target?.classList.contains(CHAT_BUTTON_EXTERNAL_NAME)) {
+            target?.classList.add(CHAT_BUTTON_EXTERNAL_NAME);
+        }
+        const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
+        if (!chatFrame) {
+            await initializeExternalNS(CHAT_NAMESPACE, chatUrl);
+        }
+    };
+    const renderBusinessChatBot = async (chatUrl) => {
+        const businessChat = (await initializeExternalNS(CHAT_NAMESPACE, `${chatUrl}/bundle.js`, true));
+        initializeExternalStylesheet(`${chatUrl}/bundle.css`);
+        const chatFrame = globalThis.document.getElementById(CHAT_FRAME_ID);
+        if (chatFrame) {
+            businessChat?.chatOpen?.();
+        }
+        else {
+            createChatFrame();
+            businessChat?.render?.(CHAT_FRAME_ID, true, BUSINESS_CHAT_PREFIX);
+        }
+    };
+    const createChatFrame = () => {
+        const chatFrame = globalThis.document.createElement('div');
+        chatFrame.id = CHAT_FRAME_ID;
+        chatFrame.className = 'fixed right-0 bottom-0 h-full w-full z-10 @3xl:w-auto h-fit';
+        globalThis.document.body.appendChild(chatFrame);
+    };
+
+    const HeaderChatBotButton = JSX(({ chat = 'personal', iconVersion, className, ariaLabel = 'Чат', version, buttonSize = 'large', }) => {
+        const { load, isLoading } = useChatBot(chat);
+        return (jsx(HeaderSecondaryMenuButton, { className: className, image: { icon: 'HeadphonesIcon', iconVersion }, ariaLabel: ariaLabel, onClick: load, buttonSize: buttonSize, isGrayBg: true, version: version, isLoading: isLoading, dataTestId: "chat icon" }));
+    });
+
     const BUTTON_STYLE = {
         default: 'bg-main-divider text-primary-main rounded hover:text-primary-main',
         transparent: 'backdrop-opacity-30 bg-white/30 hover:text-primary-hover text-white',
@@ -9121,12 +9208,13 @@
     const HeaderTop = JSX(({ bgColor, logo, alwaysShowLogo, internetBankButton, version, backwardButton }) => {
         const router = useRouter();
         const isRootLocation = router.pathname === '/';
+        const iconVersion = version === 'transparent' ? 'white' : 'black';
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { dataFooter, dataHeader, ...logoProps } = logo ?? {};
         const onClick = useCallback(() => {
             router.back();
         }, [router]);
-        return (jsxs("div", { className: "flex items-center justify-between w-full", children: [alwaysShowLogo || isRootLocation ? (jsx("div", { children: jsx(Logo, { className: "my-2xs", bgColor: bgColor, logo: logoProps, data: dataHeader, showTitle: false }) })) : (renderBackButton(onClick, backwardButton)), jsx(InternetBankButton, { version: version, ...internetBankButton })] }));
+        return (jsxs("div", { className: "flex items-center justify-between w-full", children: [alwaysShowLogo || isRootLocation ? (jsx("div", { children: jsx(Logo, { className: "my-2xs", bgColor: bgColor, logo: logoProps, data: dataHeader, showTitle: false }) })) : (renderBackButton(onClick, backwardButton)), jsxs("div", { className: "flex gap-lg items-center", children: [projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { version: version, iconVersion: iconVersion, chat: projectSettings.CHAT_BOT, buttonSize: "medium" })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] })] }));
     });
     const renderBackButton = (onClick, text) => text ? (jsxs("button", { className: "flex items-center text-l my-2xs", onClick: onClick, type: "button", "aria-label": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043D\u0430\u0437\u0430\u0434", children: [jsx(Icon, { name: "ChevronLeftIcon", iconVersion: "black", width: "24", height: "24" }), text] })) : null;
 
@@ -10520,7 +10608,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.794";
+    const packageVersion = "0.14.796";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;