@rh-support/react-context 2.5.9 → 2.5.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/esm/components/EmbeddedServiceChat/EmbeddedServiceChat.d.ts.map +1 -1
- package/lib/esm/components/EmbeddedServiceChat/EmbeddedServiceChat.js +20 -11
- package/lib/esm/context/GlobalTranslationProvider.d.ts.map +1 -1
- package/lib/esm/context/GlobalTranslationProvider.js +1 -8
- package/lib/esm/hooks/useChatInit.d.ts +2 -1
- package/lib/esm/hooks/useChatInit.d.ts.map +1 -1
- package/lib/esm/hooks/useChatInit.js +52 -21
- package/package.json +7 -7
|
@@ -1 +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,
|
|
1
|
+
{"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"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import './embeddedServiceChat.css';
|
|
2
2
|
import { Button, ButtonVariant, Popover, PopoverPosition, Spinner } from '@patternfly/react-core';
|
|
3
3
|
import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
|
|
4
|
-
import React, {
|
|
4
|
+
import React, { useRef, useState } from 'react';
|
|
5
5
|
import { Trans, useTranslation } from 'react-i18next';
|
|
6
6
|
import { FeatureAnnouncementKeys, NewFeaturePopoverAnnouncement, useChatInit } from '../..';
|
|
7
7
|
import { ChatSVGIcon } from './ChatSVGIcon';
|
|
8
8
|
export const EmbeddedServiceChat = () => {
|
|
9
9
|
const componentRef = useRef(null);
|
|
10
|
-
const { loadingChat, isChatStarted,
|
|
10
|
+
const { loadingChat, isChatStarted, onStartChat, hasChatDomainsBlocked, hasBlockedByBrowser, chatServiceNotAvailable, hasBlockedByCookie, } = useChatInit();
|
|
11
11
|
const [isBlockedErrorBoxVisible, setIsBlockedErrorBoxVisible] = useState(true);
|
|
12
|
+
const [chatClicked, setChatClicked] = useState(false);
|
|
12
13
|
const { t } = useTranslation();
|
|
13
14
|
const shouldClose = () => {
|
|
14
15
|
setIsBlockedErrorBoxVisible(false);
|
|
@@ -16,8 +17,17 @@ export const EmbeddedServiceChat = () => {
|
|
|
16
17
|
const shouldOpen = () => {
|
|
17
18
|
setIsBlockedErrorBoxVisible(true);
|
|
18
19
|
};
|
|
19
|
-
const chatErrorMessagePopover = () => (React.createElement("div", { className: "chatButton chatError", id: "chat-blocked-popover-selector" },
|
|
20
|
-
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" },
|
|
20
|
+
const chatErrorMessagePopover = (param) => (React.createElement("div", { className: "chatButton chatError", id: "chat-blocked-popover-selector" },
|
|
21
|
+
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" },
|
|
22
|
+
React.createElement(Trans, null,
|
|
23
|
+
"Accept functional cookies in your",
|
|
24
|
+
' ',
|
|
25
|
+
React.createElement(Button, { variant: ButtonVariant.link, isInline: true, onClick: (e) => {
|
|
26
|
+
e.preventDefault();
|
|
27
|
+
document.querySelector('#teconsent a[role="link"]').click();
|
|
28
|
+
} }, "cookie preferences"),
|
|
29
|
+
' ',
|
|
30
|
+
"to enable the Red Hat Chat Support, then refresh page."))) : (React.createElement("p", { className: "pf-v5-u-px-md" },
|
|
21
31
|
React.createElement(Trans, null, "There are multiple problems that can cause this error."),
|
|
22
32
|
React.createElement("br", null),
|
|
23
33
|
React.createElement("a", { href: `https://access.redhat.com/articles/313583#${hasBlockedByBrowser
|
|
@@ -25,17 +35,16 @@ export const EmbeddedServiceChat = () => {
|
|
|
25
35
|
: hasChatDomainsBlocked
|
|
26
36
|
? 'troubleshoot_network'
|
|
27
37
|
: ''}`, target: "_blank", rel: "noreferrer noopener" },
|
|
28
|
-
React.createElement(Trans, null, "See a list of possible causes."))), isVisible: isBlockedErrorBoxVisible, shouldClose: shouldClose, shouldOpen: shouldOpen },
|
|
38
|
+
React.createElement(Trans, null, "See a list of possible causes.")))), isVisible: isBlockedErrorBoxVisible, shouldClose: shouldClose, shouldOpen: shouldOpen },
|
|
29
39
|
React.createElement(Button, { variant: ButtonVariant.link, className: "pf-v5-u-m-0 pf-v5-u-p-0" },
|
|
30
40
|
React.createElement(ChatSVGIcon, null)))));
|
|
31
|
-
|
|
32
|
-
initEmbedChat();
|
|
33
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
34
|
-
}, []);
|
|
35
|
-
if (chatNotLoaded)
|
|
41
|
+
if (chatServiceNotAvailable)
|
|
36
42
|
return React.createElement(React.Fragment, null);
|
|
37
43
|
return loadingChat ? (React.createElement("div", { className: "chatButton" },
|
|
38
|
-
React.createElement(Spinner, { diameter: "28px", className: "pf-v5-u-m-xs" }))) : hasBlockedByBrowser || hasChatDomainsBlocked ? (chatErrorMessagePopover()) : !isChatStarted ? (React.createElement("div", { className: "chatButton", onClick:
|
|
44
|
+
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: () => {
|
|
45
|
+
onStartChat();
|
|
46
|
+
setChatClicked(true);
|
|
47
|
+
}, "data-tracking-id": "embedded-service-chat", ref: componentRef, id: "chat-bot-wrapper" },
|
|
39
48
|
React.createElement(ChatSVGIcon, null),
|
|
40
49
|
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,
|
|
41
50
|
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));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalTranslationProvider.d.ts","sourceRoot":"","sources":["../../../src/context/GlobalTranslationProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,
|
|
1
|
+
{"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"}
|
|
@@ -8,19 +8,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
10
|
import { languageConst } from '@rh-support/components';
|
|
11
|
-
import { CacheUtilsService } from '@rh-support/utils';
|
|
11
|
+
import { CacheUtilsService, getCookieValue } from '@rh-support/utils';
|
|
12
12
|
import i18n from 'i18next';
|
|
13
13
|
import localForageCase from 'localforage';
|
|
14
|
-
import find from 'lodash/find';
|
|
15
14
|
import isEmpty from 'lodash/isEmpty';
|
|
16
|
-
import map from 'lodash/map';
|
|
17
15
|
import React, { useEffect, useState } from 'react';
|
|
18
16
|
import { I18nextProvider, initReactI18next } from 'react-i18next';
|
|
19
|
-
function getCookieValue(key) {
|
|
20
|
-
var _a, _b;
|
|
21
|
-
const cookies = map(document.cookie.split(';'), (c) => c.split('='));
|
|
22
|
-
return (_b = (_a = find(cookies, (c) => c[0].trim() === key.trim())) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '';
|
|
23
|
-
}
|
|
24
17
|
function getRhLocaleLang() {
|
|
25
18
|
const cookieVal = (getCookieValue('rh_locale') || 'en_US').split('_')[0];
|
|
26
19
|
return cookieVal && languageConst[cookieVal] ? cookieVal : 'en';
|
|
@@ -5,7 +5,8 @@ interface IChatOptions {
|
|
|
5
5
|
hasChatDomainsBlocked: boolean;
|
|
6
6
|
initEmbedChat: () => void;
|
|
7
7
|
onStartChat: () => void;
|
|
8
|
-
|
|
8
|
+
chatServiceNotAvailable: boolean;
|
|
9
|
+
hasBlockedByCookie: boolean;
|
|
9
10
|
}
|
|
10
11
|
/**
|
|
11
12
|
* This hook is used for setting chat up and listing custom event of chat.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useChatInit.d.ts","sourceRoot":"","sources":["../../../src/hooks/useChatInit.ts"],"names":[],"mappings":"
|
|
1
|
+
{"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,YAgH3D,CAAC"}
|
|
@@ -7,7 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
-
import {
|
|
10
|
+
import { enableScripts, getCookieValue, waitForWindowVariable } from '@rh-support/utils';
|
|
11
|
+
import { useEffect, useState } from 'react';
|
|
11
12
|
import { extraPreChatInfo } from '../components/EmbeddedServiceChat/ExtraPreChatInfo';
|
|
12
13
|
import { useChatConfig } from './useChatConfig';
|
|
13
14
|
import { usePreChatFormDetails } from './usePreChatFormDetails';
|
|
@@ -23,27 +24,56 @@ export const useChatInit = (initialState = false) => {
|
|
|
23
24
|
const [loadingChat, setLoadingChat] = useState(true);
|
|
24
25
|
const [hasBlockedByBrowser, setHasBlockedByBrowser] = useState(false);
|
|
25
26
|
const [hasChatDomainsBlocked, setHasChatDomainsBlocked] = useState(false);
|
|
26
|
-
const [
|
|
27
|
+
const [chatServiceNotAvailable, setChatServiceNotAvailable] = useState(false);
|
|
28
|
+
const [hasBlockedByCookie, setHasBlockedByCookie] = useState(false);
|
|
27
29
|
const getChatFormDetails = usePreChatFormDetails();
|
|
28
30
|
const { host, sandBox, gslbBaseURL, key, appName, extra } = useChatConfig();
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
/*
|
|
33
|
+
retrieve TrustArc cookie value
|
|
34
|
+
value is like "permit 1,2,3" when all cookie types are accepted
|
|
35
|
+
1-> Required Cookies
|
|
36
|
+
2-> Functional Cookies
|
|
37
|
+
3-> Advertising Cookies
|
|
38
|
+
we need to make sure 2 that indicates functional cookies is included in value
|
|
39
|
+
*/
|
|
40
|
+
var preferences = getCookieValue('cmapi_cookie_privacy');
|
|
41
|
+
if (preferences && preferences.includes('2')) {
|
|
42
|
+
// based on TrustArc cookie consent, cookie is allowed
|
|
43
|
+
enableScripts();
|
|
44
|
+
const initChatService = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
45
|
+
try {
|
|
46
|
+
yield waitForWindowVariable('embedded_svc', 10000);
|
|
47
|
+
initEmbedChat();
|
|
48
|
+
}
|
|
49
|
+
catch (e) {
|
|
50
|
+
console.error('Error: Chat service not available', e.message);
|
|
51
|
+
setChatServiceNotAvailable(true);
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
initChatService();
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
setHasBlockedByCookie(true);
|
|
58
|
+
}
|
|
59
|
+
setLoadingChat(false);
|
|
60
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
61
|
+
}, []);
|
|
29
62
|
const onStartChat = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
30
63
|
setLoadingChat(true);
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
setHasBlockedByBrowser(false);
|
|
45
|
-
setChatStart(true);
|
|
46
|
-
setLoadingChat(false);
|
|
64
|
+
try {
|
|
65
|
+
yield window.embedded_svc.liveAgentAPI.startChat({
|
|
66
|
+
extraPrechatInfo: extraPreChatInfo,
|
|
67
|
+
extraPrechatFormDetails: getChatFormDetails(),
|
|
68
|
+
});
|
|
69
|
+
setHasBlockedByBrowser(false);
|
|
70
|
+
setChatStart(true);
|
|
71
|
+
setLoadingChat(false);
|
|
72
|
+
}
|
|
73
|
+
catch (e) {
|
|
74
|
+
setLoadingChat(false);
|
|
75
|
+
setHasBlockedByBrowser(true);
|
|
76
|
+
}
|
|
47
77
|
});
|
|
48
78
|
const initEmbedChat = () => {
|
|
49
79
|
const extraPreChatFormDetails = getChatFormDetails();
|
|
@@ -51,8 +81,8 @@ export const useChatInit = (initialState = false) => {
|
|
|
51
81
|
initESW(extraPreChatFormDetails);
|
|
52
82
|
}
|
|
53
83
|
catch (e) {
|
|
54
|
-
|
|
55
|
-
|
|
84
|
+
setChatServiceNotAvailable(true);
|
|
85
|
+
console.log(e);
|
|
56
86
|
}
|
|
57
87
|
};
|
|
58
88
|
const initESW = (extraPreChatFormDetails) => {
|
|
@@ -88,6 +118,7 @@ export const useChatInit = (initialState = false) => {
|
|
|
88
118
|
hasBlockedByBrowser,
|
|
89
119
|
initEmbedChat,
|
|
90
120
|
onStartChat,
|
|
91
|
-
|
|
121
|
+
chatServiceNotAvailable,
|
|
122
|
+
hasBlockedByCookie,
|
|
92
123
|
};
|
|
93
124
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rh-support/react-context",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public",
|
|
6
6
|
"registry": "https://registry.npmjs.org"
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"lib/**/*"
|
|
27
27
|
],
|
|
28
28
|
"peerDependencies": {
|
|
29
|
-
"@cee-eng/hydrajs": "4.
|
|
29
|
+
"@cee-eng/hydrajs": "4.17.37",
|
|
30
30
|
"@patternfly/react-core": "5.4.2",
|
|
31
31
|
"@patternfly/react-icons": "5.4.2",
|
|
32
32
|
"i18next": "^23.15.0",
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
"react-test-renderer": "18.2.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@cee-eng/hydrajs": "4.
|
|
40
|
+
"@cee-eng/hydrajs": "4.17.37",
|
|
41
41
|
"@patternfly/react-core": "5.4.2",
|
|
42
42
|
"@patternfly/react-icons": "5.4.2",
|
|
43
|
-
"@rh-support/components": "2.5.
|
|
43
|
+
"@rh-support/components": "2.5.11",
|
|
44
44
|
"@rh-support/types": "2.0.5",
|
|
45
|
-
"@rh-support/user-permissions": "2.5.
|
|
46
|
-
"@rh-support/utils": "2.5.
|
|
45
|
+
"@rh-support/user-permissions": "2.5.5",
|
|
46
|
+
"@rh-support/utils": "2.5.5",
|
|
47
47
|
"i18next": "^23.15.0",
|
|
48
48
|
"localforage": "^1.10.0",
|
|
49
49
|
"lodash": "^4.17.21",
|
|
@@ -93,5 +93,5 @@
|
|
|
93
93
|
"defaults and supports es6-module",
|
|
94
94
|
"maintained node versions"
|
|
95
95
|
],
|
|
96
|
-
"gitHead": "
|
|
96
|
+
"gitHead": "6d28894151078ac3dba647ba3c6df142a3dbe16f"
|
|
97
97
|
}
|