@rh-support/react-context 2.5.10 → 2.5.12

package/lib/esm/components/EmbeddedServiceChat/EmbeddedServiceChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedServiceChat.d.ts","sourceRoot":"","sources":["../../../../src/components/EmbeddedServiceChat/EmbeddedServiceChat.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAInC,OAAc,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAM/D,eAAO,MAAM,mBAAmB,EAAE,EAmGjC,CAAC"}
+{"version":3,"file":"EmbeddedServiceChat.d.ts","sourceRoot":"","sources":["../../../../src/components/EmbeddedServiceChat/EmbeddedServiceChat.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAInC,OAAc,EAAE,EAAE,EAAoB,MAAM,OAAO,CAAC;AAMpD,eAAO,MAAM,mBAAmB,EAAE,EAwHjC,CAAC"}

package/lib/esm/components/EmbeddedServiceChat/EmbeddedServiceChat.js

@@ -1,14 +1,15 @@
 import './embeddedServiceChat.css';
 import { Button, ButtonVariant, Popover, PopoverPosition, Spinner } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { FeatureAnnouncementKeys, NewFeaturePopoverAnnouncement, useChatInit } from '../..';
 import { ChatSVGIcon } from './ChatSVGIcon';
 export const EmbeddedServiceChat = () => {
     const componentRef = useRef(null);
-    const { loadingChat, isChatStarted, initEmbedChat, onStartChat, hasChatDomainsBlocked, hasBlockedByBrowser, chatNotLoaded, } = useChatInit();
+    const { loadingChat, isChatStarted, onStartChat, hasChatDomainsBlocked, hasBlockedByBrowser, chatServiceNotAvailable, hasBlockedByCookie, } = useChatInit();
     const [isBlockedErrorBoxVisible, setIsBlockedErrorBoxVisible] = useState(true);
+    const [chatClicked, setChatClicked] = useState(false);
     const { t } = useTranslation();
     const shouldClose = () => {
         setIsBlockedErrorBoxVisible(false);
@@ -16,8 +17,17 @@ export const EmbeddedServiceChat = () => {
     const shouldOpen = () => {
         setIsBlockedErrorBoxVisible(true);
     };
-    const chatErrorMessagePopover = () => (React.createElement("div", { className: "chatButton chatError", id: "chat-blocked-popover-selector" },
-        React.createElement(Popover, { "aria-label": t('Cannot connect to chat support'), alertSeverityVariant: 'danger', position: PopoverPosition.top, hasAutoWidth: true, headerIcon: React.createElement(ExclamationCircleIcon, { className: "pf-v5-u-danger-color-100" }), headerComponent: "h1", headerContent: React.createElement(Trans, null, "Cannot connect to chat support"), bodyContent: React.createElement("p", { className: "pf-v5-u-px-md" },
+    const chatErrorMessagePopover = (param) => (React.createElement("div", { className: "chatButton chatError", id: "chat-blocked-popover-selector" },
+        React.createElement(Popover, { "aria-label": t('Cannot connect to chat support'), alertSeverityVariant: 'danger', position: PopoverPosition.top, hasAutoWidth: true, maxWidth: '420px', headerIcon: React.createElement(ExclamationCircleIcon, { className: "pf-v5-u-danger-color-100" }), headerComponent: "h1", headerContent: React.createElement(Trans, null, "Cannot connect to chat support"), bodyContent: param === 'cookie' ? (React.createElement("p", { className: "pf-v5-u-px-md" },
+                React.createElement(Trans, null,
+                    "Accept functional cookies in your",
+                    ' ',
+                    React.createElement(Button, { variant: ButtonVariant.link, isInline: true, onClick: (e) => {
+                            e.preventDefault();
+                            document.querySelector('#teconsent a[role="link"]').click();
+                        } }, "cookie preferences"),
+                    ' ',
+                    "to enable the Red Hat Chat Support, then refresh page."))) : (React.createElement("p", { className: "pf-v5-u-px-md" },
                 React.createElement(Trans, null, "There are multiple problems that can cause this error."),
                 React.createElement("br", null),
                 React.createElement("a", { href: `https://access.redhat.com/articles/313583#${hasBlockedByBrowser
@@ -25,17 +35,16 @@ export const EmbeddedServiceChat = () => {
                         : hasChatDomainsBlocked
                             ? 'troubleshoot_network'
                             : ''}`, target: "_blank", rel: "noreferrer noopener" },
-                    React.createElement(Trans, null, "See a list of possible causes."))), isVisible: isBlockedErrorBoxVisible, shouldClose: shouldClose, shouldOpen: shouldOpen },
+                    React.createElement(Trans, null, "See a list of possible causes.")))), isVisible: isBlockedErrorBoxVisible, shouldClose: shouldClose, shouldOpen: shouldOpen },
             React.createElement(Button, { variant: ButtonVariant.link, className: "pf-v5-u-m-0 pf-v5-u-p-0" },
                 React.createElement(ChatSVGIcon, null)))));
-    useEffect(() => {
-        initEmbedChat();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    if (chatNotLoaded)
+    if (chatServiceNotAvailable)
         return React.createElement(React.Fragment, null);
     return loadingChat ? (React.createElement("div", { className: "chatButton" },
-        React.createElement(Spinner, { diameter: "28px", className: "pf-v5-u-m-xs" }))) : hasBlockedByBrowser || hasChatDomainsBlocked ? (chatErrorMessagePopover()) : !isChatStarted ? (React.createElement("div", { className: "chatButton", onClick: onStartChat, "data-tracking-id": "embedded-service-chat", ref: componentRef, id: "chat-bot-wrapper" },
+        React.createElement(Spinner, { diameter: "28px", className: "pf-v5-u-m-xs" }))) : hasBlockedByCookie && chatClicked && document.querySelector('#teconsent a[role="link"]') !== null ? (chatErrorMessagePopover('cookie')) : (hasBlockedByBrowser || hasChatDomainsBlocked) && chatClicked ? (chatErrorMessagePopover()) : !isChatStarted ? (React.createElement("div", { className: "chatButton", onClick: () => {
+            onStartChat();
+            setChatClicked(true);
+        }, "data-tracking-id": "embedded-service-chat", ref: componentRef, id: "chat-bot-wrapper" },
         React.createElement(ChatSVGIcon, null),
         React.createElement(NewFeaturePopoverAnnouncement, { "aria-label": t('Support now has a chatbot (beta). Try it if you need help with a case.'), featureName: FeatureAnnouncementKeys.CHAT_BOT, sectionRef: componentRef, bodyContent: React.createElement("div", null,
                 React.createElement(Trans, null, "Support now has a chatbot (beta). Try it if you need help with a case.")), triggerRef: () => document.getElementById('chat-bot-wrapper') }))) : (React.createElement(React.Fragment, null));

package/lib/esm/context/GlobalTranslationProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalTranslationProvider.d.ts","sourceRoot":"","sources":["../../../src/context/GlobalTranslationProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAc,MAAM,mBAAmB,CAAC;AAMlE,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC9C;AAED,UAAU,mBAAmB;IACzB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACtD,mBAAmB,EAAE,OAAO,CAAC;CAChC;AAgBD,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AAEjE,eAAO,MAAM,UAAU,2BAA4E,CAAC;AAEpG,eAAO,MAAM,wBAAwB,oCAAiD,CAAC;AAEvF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,qBAwEtD"}
+{"version":3,"file":"GlobalTranslationProvider.d.ts","sourceRoot":"","sources":["../../../src/context/GlobalTranslationProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAA8B,MAAM,mBAAmB,CAAC;AAIlF,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC9C;AAED,UAAU,mBAAmB;IACzB,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACtD,mBAAmB,EAAE,OAAO,CAAC;CAChC;AAWD,eAAO,MAAM,uBAAuB,4BAA4B,CAAC;AAEjE,eAAO,MAAM,UAAU,2BAA4E,CAAC;AAEpG,eAAO,MAAM,wBAAwB,oCAAiD,CAAC;AAEvF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,qBAwEtD"}

package/lib/esm/context/GlobalTranslationProvider.js

@@ -8,19 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { languageConst } from '@rh-support/components';
-import { CacheUtilsService } from '@rh-support/utils';
+import { CacheUtilsService, getCookieValue } from '@rh-support/utils';
 import i18n from 'i18next';
 import localForageCase from 'localforage';
-import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
-import map from 'lodash/map';
 import React, { useEffect, useState } from 'react';
 import { I18nextProvider, initReactI18next } from 'react-i18next';
-function getCookieValue(key) {
-    var _a, _b;
-    const cookies = map(document.cookie.split(';'), (c) => c.split('='));
-    return (_b = (_a = find(cookies, (c) => c[0].trim() === key.trim())) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '';
-}
 function getRhLocaleLang() {
     const cookieVal = (getCookieValue('rh_locale') || 'en_US').split('_')[0];
     return cookieVal && languageConst[cookieVal] ? cookieVal : 'en';

package/lib/esm/hooks/useChatInit.d.ts

@@ -5,7 +5,8 @@ interface IChatOptions {
     hasChatDomainsBlocked: boolean;
     initEmbedChat: () => void;
     onStartChat: () => void;
-    chatNotLoaded: boolean;
+    chatServiceNotAvailable: boolean;
+    hasBlockedByCookie: boolean;
 }
 /**
  * This hook is used for setting chat up and listing custom event of chat.

package/lib/esm/hooks/useChatInit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useChatInit.d.ts","sourceRoot":"","sources":["../../../src/hooks/useChatInit.ts"],"names":[],"mappings":"AAMA,UAAU,YAAY;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,kBAAkB,OAAO,KAAW,YAoF3D,CAAC"}
+{"version":3,"file":"useChatInit.d.ts","sourceRoot":"","sources":["../../../src/hooks/useChatInit.ts"],"names":[],"mappings":"AAOA,UAAU,YAAY;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,uBAAuB,EAAE,OAAO,CAAC;IACjC,kBAAkB,EAAE,OAAO,CAAC;CAC/B;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,kBAAkB,OAAO,KAAW,YA+G3D,CAAC"}

package/lib/esm/hooks/useChatInit.js

@@ -7,7 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useState } from 'react';
+import { enableScripts, getCookieValue, waitForWindowVariable } from '@rh-support/utils';
+import { useEffect, useState } from 'react';
 import { extraPreChatInfo } from '../components/EmbeddedServiceChat/ExtraPreChatInfo';
 import { useChatConfig } from './useChatConfig';
 import { usePreChatFormDetails } from './usePreChatFormDetails';
@@ -23,27 +24,55 @@ export const useChatInit = (initialState = false) => {
     const [loadingChat, setLoadingChat] = useState(true);
     const [hasBlockedByBrowser, setHasBlockedByBrowser] = useState(false);
     const [hasChatDomainsBlocked, setHasChatDomainsBlocked] = useState(false);
-    const [chatNotLoaded, setChatNotLoaded] = useState(false);
+    const [chatServiceNotAvailable, setChatServiceNotAvailable] = useState(false);
+    const [hasBlockedByCookie, setHasBlockedByCookie] = useState(false);
     const getChatFormDetails = usePreChatFormDetails();
     const { host, sandBox, gslbBaseURL, key, appName, extra } = useChatConfig();
+    useEffect(() => {
+        /*
+        retrieve TrustArc cookie value
+        value is like "permit 1,2,3" when all cookie types are accepted
+        1-> Required Cookies
+        2-> Functional Cookies
+        3-> Advertising Cookies
+        we need to make sure 2 that indicates functional cookies is included in value
+        */
+        var preferences = getCookieValue('cmapi_cookie_privacy');
+        if (preferences && preferences.includes('2')) {
+            // based on TrustArc cookie consent, cookie is allowed
+            enableScripts();
+            const initChatService = () => __awaiter(void 0, void 0, void 0, function* () {
+                try {
+                    yield waitForWindowVariable('embedded_svc', 10000);
+                    initEmbedChat();
+                }
+                catch (e) {
+                    console.error('Error: Chat service not available', e.message);
+                }
+            });
+            initChatService();
+        }
+        else {
+            setHasBlockedByCookie(true);
+        }
+        setLoadingChat(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const onStartChat = () => __awaiter(void 0, void 0, void 0, function* () {
         setLoadingChat(true);
-        // if chat didn't start after a long wait
-        // then we assume browser has blocked the script
-        const blockedTimeOut = setTimeout(() => {
-            if (!window.$Lightning) {
-                setHasBlockedByBrowser(true);
-                setLoadingChat(false);
-            }
-        }, 10000);
-        yield window.embedded_svc.liveAgentAPI.startChat({
-            extraPrechatInfo: extraPreChatInfo,
-            extraPrechatFormDetails: getChatFormDetails(),
-        });
-        clearTimeout(blockedTimeOut);
-        setHasBlockedByBrowser(false);
-        setChatStart(true);
-        setLoadingChat(false);
+        try {
+            yield window.embedded_svc.liveAgentAPI.startChat({
+                extraPrechatInfo: extraPreChatInfo,
+                extraPrechatFormDetails: getChatFormDetails(),
+            });
+            setHasBlockedByBrowser(false);
+            setChatStart(true);
+            setLoadingChat(false);
+        }
+        catch (e) {
+            setLoadingChat(false);
+            setHasBlockedByBrowser(true);
+        }
     });
     const initEmbedChat = () => {
         const extraPreChatFormDetails = getChatFormDetails();
@@ -51,8 +80,8 @@ export const useChatInit = (initialState = false) => {
             initESW(extraPreChatFormDetails);
         }
         catch (e) {
-            // This happens when user didn't whitelist service.force.com
-            setChatNotLoaded(true);
+            setChatServiceNotAvailable(true);
+            console.log(e);
         }
     };
     const initESW = (extraPreChatFormDetails) => {
@@ -88,6 +117,7 @@ export const useChatInit = (initialState = false) => {
         hasBlockedByBrowser,
         initEmbedChat,
         onStartChat,
-        chatNotLoaded,
+        chatServiceNotAvailable,
+        hasBlockedByCookie,
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/react-context",
-    "version": "2.5.10",
+    "version": "2.5.12",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -40,10 +40,10 @@
         "@cee-eng/hydrajs": "4.17.37",
         "@patternfly/react-core": "5.4.2",
         "@patternfly/react-icons": "5.4.2",
-        "@rh-support/components": "2.5.10",
+        "@rh-support/components": "2.5.11",
         "@rh-support/types": "2.0.5",
-        "@rh-support/user-permissions": "2.5.4",
-        "@rh-support/utils": "2.5.4",
+        "@rh-support/user-permissions": "2.5.5",
+        "@rh-support/utils": "2.5.5",
         "i18next": "^23.15.0",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
@@ -93,5 +93,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "044f925f09b47d3c82008b83d41ad8d1a63423c6"
+    "gitHead": "ca3168a03dc728c0eb804e514a58a9b8e887ec14"
 }