@rh-support/react-context 0.3.8-beta.0 → 0.3.8-beta.3

package/lib/esm/GlobalContextWrapper.d.ts

@@ -10,6 +10,7 @@ declare global {
         Raven: any;
         chrometwo_ready: any;
         embedded_svc: any;
+        $Lightning: any;
     }
     interface Document {
         documentMode: any;

package/lib/esm/GlobalContextWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalContextWrapper.d.ts","sourceRoot":"","sources":["../../src/GlobalContextWrapper.tsx"],"names":[],"mappings":"AAmBA,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACzC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,MAAM,OAAA,KAAK,GAAG,KAAK,GAAG,CAAC;QAC9E,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,eAAe,EAAE,GAAG,CAAC;QACrB,YAAY,EAAE,GAAG,CAAC;KACrB;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AA6FD,eAAO,MAAM,oBAAoB,UAAW,MAAM,gBAKjD,CAAC"}
+{"version":3,"file":"GlobalContextWrapper.d.ts","sourceRoot":"","sources":["../../src/GlobalContextWrapper.tsx"],"names":[],"mappings":"AAmBA,UAAU,MAAM;IACZ,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACzC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,MAAM,OAAA,KAAK,GAAG,KAAK,GAAG,CAAC;QAC9E,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,eAAe,EAAE,GAAG,CAAC;QACrB,YAAY,EAAE,GAAG,CAAC;QAClB,UAAU,EAAE,GAAG,CAAC;KACnB;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;CACJ;AA6FD,eAAO,MAAM,oBAAoB,UAAW,MAAM,gBAKjD,CAAC"}

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;AAEnC,OAAc,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAK7C,eAAO,MAAM,mBAAmB,EAAE,EAiBjC,CAAC"}
+{"version":3,"file":"EmbeddedServiceChat.d.ts","sourceRoot":"","sources":["../../../../src/components/EmbeddedServiceChat/EmbeddedServiceChat.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAInC,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAMvD,eAAO,MAAM,mBAAmB,EAAE,EAwDjC,CAAC"}

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

@@ -1,13 +1,32 @@
 import './embeddedServiceChat.css';
-import React, { useEffect } from 'react';
+import { Button, ButtonVariant, Popover, PopoverPosition, Spinner } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useChatInit } from '../..';
 import { ChatSVGIcon } from './ChatSVGIcon';
 export const EmbeddedServiceChat = () => {
-    const { loadingChat, isChatStarted, initEmbedChat, onStartChat } = useChatInit();
+    const { loadingChat, isChatStarted, initEmbedChat, onStartChat, hasBlocked } = useChatInit();
+    const [isBlockedErrorBoxVisible, setIsBlockedErrorBoxVisible] = useState(true);
+    const { t } = useTranslation();
+    const shouldClose = () => {
+        setIsBlockedErrorBoxVisible(false);
+    };
+    const shouldOpen = () => {
+        setIsBlockedErrorBoxVisible(true);
+    };
     useEffect(() => {
         initEmbedChat();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return !isChatStarted ? (React.createElement("div", { className: `chatButton ${loadingChat && 'chatLoading'}`, onClick: onStartChat, "data-tracking-id": "embedded-service-chat" },
-        React.createElement(ChatSVGIcon, null))) : null;
+    return loadingChat ? (React.createElement("div", { className: "chatButton" },
+        React.createElement(Spinner, { isSVG: true, diameter: "28px", className: "pf-u-m-xs" }))) : hasBlocked ? (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.left, hasAutoWidth: true, headerIcon: React.createElement(ExclamationCircleIcon, { className: "pf-u-danger-color-100" }), headerComponent: "h1", headerContent: React.createElement(Trans, null, "Cannot connect to chat support"), bodyContent: React.createElement("p", { className: "pf-u-mb-3xl pf-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://redhat.com", target: "_blank", rel: "noreferrer noopener" },
+                    React.createElement(Trans, null, "See a list of possible causes."))), isVisible: isBlockedErrorBoxVisible, shouldClose: shouldClose, shouldOpen: shouldOpen },
+            React.createElement(Button, { variant: ButtonVariant.link, className: "pf-u-m-0 pf-u-p-0" },
+                React.createElement(ChatSVGIcon, null))))) : !isChatStarted ? (React.createElement("div", { className: "chatButton", onClick: onStartChat, "data-tracking-id": "embedded-service-chat" },
+        React.createElement(ChatSVGIcon, null))) : (React.createElement(React.Fragment, null));
 };

package/lib/esm/components/EmbeddedServiceChat/embeddedServiceChat.css

@@ -11,9 +11,8 @@
     height: 44px;
 }
 
-.chatLoading {
+.chatError {
     opacity: 0.7;
-    pointer-events: none;
 }
 
 /* Requested by CCM team */
@@ -42,3 +41,18 @@
     text-align: left;
     font-family: 'Red Hat Text', 'RedHatText', 'Overpass', Overpass, Arial, sans-serif;
 }
+/* red hat chat icon */
+.embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 {
+    background-image: url('https://access.redhat.com/chrome_themes/nimbus/img/red-hat-customer-portal.svg');
+    background-repeat: no-repeat;
+    background-size: 420% !important;
+    font-size: 0 !important;
+    background-color: #fff !important;
+}
+
+/* user chat bubble */
+.chasitor.chat-content[CLWCP-lwcchatpack_lwcchatpack] {
+    background: #fff !important;
+    color: #0066cc !important;
+    border: #0066cc 1px solid !important;
+}

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

@@ -1,6 +1,7 @@
 interface IChatOptions {
     loadingChat: boolean;
     isChatStarted: boolean;
+    hasBlocked: boolean;
     initEmbedChat: () => void;
     onStartChat: () => void;
 }

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,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,kBAAkB,OAAO,KAAW,YAmD3D,CAAC"}
+{"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,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,kBAAkB,OAAO,KAAW,YAiE3D,CAAC"}

package/lib/esm/hooks/useChatInit.js

@@ -21,14 +21,25 @@ export const useChatInit = (initialState = false) => {
     const [isChatStarted, setChatStart] = useState(initialState);
     // Need to set loading status true as it will prevent starting chat before loading necessary dependencies
     const [loadingChat, setLoadingChat] = useState(true);
+    const [hasBlocked, setHasBlocked] = useState(false);
     const getChatFormDetails = usePreChatFormDetails();
     const { host, sandBox, gslbBaseURL, key, appName, extra } = useChatConfig();
     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) {
+                setHasBlocked(true);
+                setLoadingChat(false);
+            }
+        }, 10000);
         yield window.embedded_svc.liveAgentAPI.startChat({
             extraPrechatInfo: extraPreChatInfo,
             extraPrechatFormDetails: getChatFormDetails(),
         });
+        clearTimeout(blockedTimeOut);
+        setHasBlocked(false);
         setChatStart(true);
         setLoadingChat(false);
     });
@@ -56,6 +67,7 @@ export const useChatInit = (initialState = false) => {
     return {
         loadingChat,
         isChatStarted,
+        hasBlocked,
         initEmbedChat,
         onStartChat,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/react-context",
-    "version": "0.3.8-beta.0",
+    "version": "0.3.8-beta.3",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -44,10 +44,10 @@
         "@cee-eng/hydrajs": "4.12.7",
         "@patternfly/react-core": "4.202.16",
         "@patternfly/react-icons": "4.53.16",
-        "@rh-support/components": "1.1.84",
+        "@rh-support/components": "1.1.84-beta.3",
         "@rh-support/types": "0.2.0",
-        "@rh-support/user-permissions": "0.2.68",
-        "@rh-support/utils": "0.2.50",
+        "@rh-support/user-permissions": "0.2.68-beta.3",
+        "@rh-support/utils": "0.2.50-beta.3",
         "i18next": "^19.0.1",
         "localforage": "^1.7.3",
         "lodash": "^4.17.21",
@@ -87,5 +87,5 @@
         "not ie <= 11",
         "not op_mini all"
     ],
-    "gitHead": "68d80a3ed373e7ac6c7049611965294310126c2b"
+    "gitHead": "6c731cc33decd0c98d591d2117b95638306ef6c5"
 }