@rh-support/troubleshoot 1.0.25 → 1.0.26

package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveCustomerEscalation.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAMpD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,+EAkHnC,CAAC"}
+{"version":3,"file":"ActiveCustomerEscalation.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,+EA4HnC,CAAC"}

package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/ActiveCustomerEscalation.js

@@ -17,18 +17,18 @@ export const ActiveCustomerEscalation = forwardRef((props, ref) => {
     const isInternalElements = (React.createElement("div", { className: "card card-white card-support escalations", ref: ref },
         React.createElement("h3", { className: "card-heading" },
             React.createElement(Trans, null, "Active Customer Escalation (ACE)"),
-            React.createElement("a", { href: "/support/escalation", target: "_blank" },
+            React.createElement("a", { href: "/support/escalation", target: "_blank", "aria-label": t('Learn more about Red Hat support case escalation') },
                 React.createElement(InfoCircleIcon, null))),
         React.createElement("div", { className: "card-body" },
             React.createElement("p", null,
-                React.createElement("strong", null, `${t('Red Hat associates can open an ACE escalation when')}`),
+                React.createElement("strong", null, t('Red Hat associates can open an ACE escalation when')),
                 ":"),
             React.createElement("ul", null,
                 React.createElement("li", null, t('The customer wants an update')),
                 React.createElement("li", null, t('The customer thinks the case is not moving appropriately')),
                 React.createElement("li", null, t('The customer wants a new resource')),
                 React.createElement("li", null, t('The issue is more severe than originally thought'))),
-            React.createElement("a", { href: `/watchlist/internal/aces/new?caseNumber=${props.caseNumber}`, className: "pf-c-button pf-m-tertiary", target: "_blank", rel: "noopener noreferrer", "data-tracking-id": "request-ace-trigger" }, t('Request an escalation')))));
+            React.createElement("a", { href: `/watchlist/internal/aces/new?caseNumber=${props.caseNumber}`, className: "pf-c-button pf-m-tertiary", target: "_blank", rel: "noopener noreferrer", "data-tracking-id": "request-ace-trigger", "aria-label": t('Request an escalation') }, t('Request an escalation')))));
     const [openRequestEscalationModal, setOpenRequestEscalationModal] = useState(false);
     const toggleModal = () => {
         if (canEditCase.alert())
@@ -39,19 +39,19 @@ export const ActiveCustomerEscalation = forwardRef((props, ref) => {
         React.createElement("h3", { className: "card-heading" },
             t('Request an escalation'),
             React.createElement("div", { style: { marginLeft: 'auto' } },
-                React.createElement(Popover, { showClose: false, position: 'left', hasAutoWidth: true, bodyContent: (hide) => (React.createElement("a", { href: "/support/escalation", target: "_blank" },
+                React.createElement(Popover, { showClose: false, position: 'left', hasAutoWidth: true, bodyContent: (hide) => (React.createElement("a", { href: "/support/escalation", target: "_blank", "aria-label": t('Learn more about escalation cases.') },
                         React.createElement(Trans, null, "Learn more about escalation cases."))) },
                     React.createElement(InfoCircleIcon, { title: t('Learn more about escalation cases popover') })))),
         React.createElement("div", { className: "card-body" },
             React.createElement("p", null,
-                React.createElement("strong", null, `${t('Request a management escalation if your issue')}`),
+                React.createElement("strong", null, t('Request a management escalation if your issue')),
                 ":"),
             React.createElement("ul", null,
-                React.createElement("li", null, t(`Isn't being resolved appropriately`)),
-                React.createElement("li", null, t('Needs a senior resource')),
-                React.createElement("li", null, t('Is more severe or should be a higher priority'))),
+                React.createElement("li", null, t(`Isn't being resolved appropriately.`)),
+                React.createElement("li", null, t('Needs a senior resource.')),
+                React.createElement("li", null, t('Is more severe or should be a higher priority.'))),
             commonElements,
-            React.createElement(Button, { className: "pf-c-button pf-m-tertiary", onClick: toggleModal, "data-tracking-id": "request-rme-trigger" }, t('Request an escalation')))));
+            React.createElement(Button, { className: "pf-c-button pf-m-tertiary", onClick: toggleModal, "data-tracking-id": "request-rme-trigger", "aria-label": t('Request an escalation') }, t('Request an escalation')))));
     return (React.createElement(React.Fragment, null,
         React.createElement(RequestEscalationModal, { caseNumber: props.caseNumber, severity: props.caseSeverity, caseStatus: props.caseStatus, show: openRequestEscalationModal, onClose: toggleModal }),
         React.createElement(Can, { do: resourceActions.CREATE, on: resources.ICE_ESCALATION, passThrough: true }, (canCreateICE) => canCreateICE ? isInternalElements : isCreateRMEVisible ? isNotInternalElements : React.createElement(React.Fragment, null))));

package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"AAwCA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,eAsWnD"}
+{"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"AAwCA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,eA0WnD"}

package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.js

@@ -120,15 +120,15 @@ export function RequestEscalationModal(props) {
     });
     const modalActions = [
         React.createElement(Button, { key: "submit", variant: "primary", onClick: onSubmit, "data-tracking-id": "request-rme-submit", isDisabled: submitButtonIsClicked &&
-                (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching || !hasRequiredInfo()) },
+                (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching || !hasRequiredInfo()), "aria-label": t('Submit') },
             (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching) && (React.createElement(LoadingIndicator, { key: "loading", isInline: true })),
             ' ',
             t('Submit')),
-        React.createElement(Button, { key: "cancel", variant: "link", onClick: onCancel, "data-tracking-id": "request-rme-cancel", isDisabled: createEscalationFetch.isFetching || isPostingComment || isUpdatingCase }, t('Cancel')),
+        React.createElement(Button, { key: "cancel", variant: "link", onClick: onCancel, "data-tracking-id": "request-rme-cancel", isDisabled: createEscalationFetch.isFetching || isPostingComment || isUpdatingCase, "aria-label": t('Cancel') }, t('Cancel')),
     ];
     const header = (React.createElement(Title, { id: "custom-header-label", headingLevel: "h1" },
         React.createElement(Trans, null, "Request an escalation"),
-        React.createElement(Popover, { showClose: false, position: 'top', hasAutoWidth: true, bodyContent: () => (React.createElement("a", { href: "/support/escalation", target: "_blank" },
+        React.createElement(Popover, { showClose: false, position: 'top', hasAutoWidth: true, bodyContent: () => (React.createElement("a", { href: "/support/escalation", target: "_blank", "aria-label": t('Learn more about escalation cases.') },
                 React.createElement(Trans, null, "Learn more about escalation cases."))) },
             React.createElement(InfoCircleIcon, { className: "pf-u-ml-sm" }))));
     // load rme categories as soon as user opens the modal
@@ -147,10 +147,10 @@ export function RequestEscalationModal(props) {
         fetchCategories();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.show]);
-    return (React.createElement(Modal, { id: "request-mgmt-escalation-modal", className: "request-escalation-modal", isOpen: props.show, onClose: onCancel, actions: modalActions, header: header },
+    return (React.createElement(Modal, { id: "request-mgmt-escalation-modal", className: "request-escalation-modal", isOpen: props.show, onClose: onCancel, actions: modalActions, header: header, "aria-label": t('Request an escalation') },
         React.createElement("p", { className: "pf-u-mb-md" },
             React.createElement(Trans, { i18nKey: "i18RequestEscalationDescription" }, "Submit an escalation if an issue has become more severe or you feel the case needs a higher priority. A support manager will review your escalation request.")),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create case escalation'), show: creationError, onClose: onErrorClose, isInline: true, className: "pf-u-mb-md" }),
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create case escalation'), show: creationError, onClose: onErrorClose, isInline: true, className: "pf-u-mb-md", "aria-label": t('Could not create case escalation') }),
         React.createElement(Form, { "aria-label": t('form'), className: "request-escalation-form" },
             React.createElement(Grid, { hasGutter: true, md: 12 },
                 React.createElement(GridItem, { span: 6 },

package/lib/esm/components/CaseEditView/CaseDetailsAside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsAside.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsAside.tsx"],"names":[],"mappings":"AA2BA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAoS7C"}
+{"version":3,"file":"CaseDetailsAside.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsAside.tsx"],"names":[],"mappings":"AA4BA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eA0T7C"}

package/lib/esm/components/CaseEditView/CaseDetailsAside.js

@@ -27,14 +27,16 @@ import { useCaseDetailsPageStateContext } from '../../context/CaseDetailsPageCon
 import { useRecommendationStateContext } from '../../context/RecommendationContext';
 import { ActiveCustomerEscalation } from './ActiveCustomerEscalation';
 import { CaseSolutions } from './CaseSolutions';
+import { RemoteSessionAgreement } from './RequestRemoteSession';
 export function CaseDetailsAside(props) {
     var _a;
     const { t } = useTranslation();
-    const { severity, status, isFetchingCaseDetails, isFetchingCaseDetailsError } = useCaseSelector((state) => ({
+    const { severity, status, isFetchingCaseDetails, isFetchingCaseDetailsError, acceptedRemoteSessionTerms } = useCaseSelector((state) => ({
         severity: state.caseDetails.severity,
         status: state.caseDetails.status,
         isFetchingCaseDetails: state.isFetchingCaseDetails,
         isFetchingCaseDetailsError: state.isFetchingCaseDetailsError,
+        acceptedRemoteSessionTerms: state.caseDetails.remoteSessionTermsAcked,
     }), isEqual);
     const { caseDetailsPageState: { caseEscalations }, } = useCaseDetailsPageStateContext();
     const isCreateRMEVisible = (caseEscalations.data || []).length === 0 || caseEscalations.data.every((item) => item.status === 'Closed');
@@ -54,8 +56,10 @@ export function CaseDetailsAside(props) {
     const isXLScreen = breakPoint.xl;
     const toggleCustomerViewRef = useRef(null);
     const isFirstMountRef = useRef(true);
-    const { globalMetadataState: { navBarRef, viewAsCustomer, loggedInUsersAccount }, } = useGlobalStateContext();
+    const { globalMetadataState: { navBarRef, viewAsCustomer, loggedInUsersAccount, loggedInUserRights }, } = useGlobalStateContext();
     const isSecureSupportAccount = loggedInUsersAccount.data.secureSupport;
+    // To enable RSA Section for non-internal users
+    const isInternal = loggedInUserRights.data.isInternal();
     const onToggleAside = (ev) => {
         var _a;
         toggleAside(!((_a = caseDetailsAsidePanelRef.current) === null || _a === void 0 ? void 0 : _a.expanded));
@@ -128,7 +132,7 @@ export function CaseDetailsAside(props) {
             }
             else if (viewAsInternalPref === undefined) {
                 yield updateOriginalCaseView(viewAsCustomer);
-                // the else is to initialize a value for the pref.  If user does not have one (undefined) we initialize with the default permission (viewascustomer).
+                // The else is to initialize a value for the pref.  If user does not have one (undefined) we initialize with the default permission (View As Customer).
             }
             ToastNotification.addSuccessMessage(t('Successfully set the default case view'), React.createElement("p", null,
                 React.createElement(Trans, null,
@@ -191,5 +195,7 @@ export function CaseDetailsAside(props) {
                 React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading top solutions') } },
                     React.createElement(CaseSolutions, { caseNumber: caseNumber, ref: topSolutionsRef, isSecureSupportAccount: isSecureSupportAccount })),
                 !caseEscalations.isFetching && canViewACESection && (React.createElement(ErrorBoundary, null,
-                    React.createElement(ActiveCustomerEscalation, { caseNumber: caseNumber, caseSeverity: severity, caseStatus: status, ref: createEscalationRef })))))));
+                    React.createElement(ActiveCustomerEscalation, { caseNumber: caseNumber, caseSeverity: severity, caseStatus: status, ref: createEscalationRef }))),
+                !isInternal && (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading remote session agreement') } },
+                    React.createElement(RemoteSessionAgreement, { caseNumber: caseNumber, caseSeverity: severity, caseStatus: status, ref: createEscalationRef, acceptedRemoteSessionTerms: acceptedRemoteSessionTerms })))))));
 }

package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreement.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IProps {
+    caseNumber: string;
+    caseSeverity: string;
+    caseStatus: string;
+    acceptedRemoteSessionTerms: boolean;
+}
+export declare const RemoteSessionAgreement: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=RemoteSessionAgreement.d.ts.map

package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteSessionAgreement.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreement.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,OAAO,CAAC;CACvC;AAED,eAAO,MAAM,sBAAsB,+EA6FjC,CAAC"}

package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreement.js

@@ -0,0 +1,39 @@
+import { Button, Popover, Tooltip } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
+import React, { forwardRef, useContext, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TnC } from '../../../constants/tncConstants';
+import { RemoteSessionAgreementModal } from './RemoteSessionAgreementModal';
+export const RemoteSessionAgreement = forwardRef((props, ref) => {
+    const tooltipRef = useRef();
+    const { t } = useTranslation();
+    const canEditCase = useCanEditCase();
+    const { caseNumber, caseStatus, acceptedRemoteSessionTerms } = props;
+    const { globalMetadataState: { loggedInUser, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const [openRequestRemoteSessionModal, setOpenRequestRemoteSessionnModal] = useState(false);
+    // To toggle RSA Modal
+    const toggleRemoteSessionAgreementModal = () => {
+        if (canEditCase.alert())
+            return;
+        setOpenRequestRemoteSessionnModal((openRequestRemoteSessionModal) => !openRequestRemoteSessionModal);
+    };
+    // RSA Aside Section Body
+    const RemoteSessionAgreementSectionBody = (React.createElement("div", { className: "card card-white card-support escalations", ref: ref },
+        React.createElement("h3", { className: "card-heading pf-u-display-flex pf-u-justify-content-space-between" },
+            t('Remote session'),
+            React.createElement(Popover, { "aria-label": t('Remote Session Helper Info'), bodyContent: t('Before Red Hat logs into your systems to analyze your support issue during a remote session, Red Hat needs your approval and authorization for such remote access.'), footerContent: React.createElement("a", { href: "/articles/3566571", target: "_blank", rel: "noopener noreferrer", "aria-label": t('Read more about remote sessions') }, t('Read more about remote sessions')) },
+                React.createElement(InfoCircleIcon, null))),
+        React.createElement("div", { className: "card-body" },
+            React.createElement("p", null,
+                React.createElement("strong", null, `${t('Red Hat may agree to remotely access your systems if:')}`)),
+            React.createElement("ul", null,
+                React.createElement("li", null, t(`Such access helps diagnose, debug or lead to the resolution of a software defect.`)),
+                React.createElement("li", null, t('Both you and Red Hat agree to remote access.'))),
+            React.createElement("p", { className: "rrs-light-grey-text" }, t('This action does not initiate a remote session. Please make a case comment if you would like to submit a request.')),
+            acceptedRemoteSessionTerms && (React.createElement(Tooltip, { content: t('Remote session agreement has already has been accepted.'), reference: tooltipRef, "aria-live": 'polite' })),
+            React.createElement(Button, { "aria-label": acceptedRemoteSessionTerms ? t('Agreement accepted') : t('Accept agreement'), variant: "primary", onClick: toggleRemoteSessionAgreementModal, "data-tracking-id": "accept-remote-session-agreement-trigger", isAriaDisabled: acceptedRemoteSessionTerms, ref: tooltipRef }, acceptedRemoteSessionTerms ? t('Agreement accepted') : t('Accept agreement')))));
+    return (React.createElement(React.Fragment, null,
+        RemoteSessionAgreementSectionBody,
+        React.createElement(RemoteSessionAgreementModal, { caseNumber: caseNumber, caseStatus: caseStatus, show: openRequestRemoteSessionModal, onClose: toggleRemoteSessionAgreementModal, siteCode: TnC.REMOTE_RIDER_SITE_CODE, eventCode: TnC.REMOTER_RIDER_EVENT_CODE, loggedInUser: loggedInUser.data.ssoUsername === undefined ? '' : loggedInUser.data.ssoUsername, loggedInUserRights: loggedInUserRights })));
+});

package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.d.ts

@@ -0,0 +1,16 @@
+import { IApiResponseDetails } from '@rh-support/types/shared';
+import { UserAuth } from '@rh-support/user-permissions';
+interface IProps {
+    caseNumber: string;
+    onClose?: () => void;
+    termsAcked?: boolean;
+    siteCode: string;
+    eventCode: string;
+    loggedInUser: string;
+    caseStatus: string;
+    show: boolean;
+    loggedInUserRights: IApiResponseDetails<UserAuth>;
+}
+export declare function RemoteSessionAgreementModal(props: IProps): JSX.Element;
+export {};
+//# sourceMappingURL=RemoteSessionAgreementModal.d.ts.map

package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteSessionAgreementModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAiBxD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,kBAAkB,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACrD;AAiBD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,eAkPxD"}

package/lib/esm/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.js

@@ -0,0 +1,168 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { publicApi } from '@cee-eng/hydrajs';
+import { Button, ButtonVariant, Checkbox, Modal, Select, SelectOption } from '@patternfly/react-core';
+import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { ToastNotification, useFetch } from '@rh-support/components';
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useCaseDispatch } from '../../../context/CaseContext';
+import { useCaseDetailsPageStateContext } from '../../../context/CaseDetailsPageContext';
+import { useCaseDiscussionTabDispatchContext, useCaseDiscussionTabStateContext, } from '../../../context/CaseDiscussionTabContext';
+import { updateDiscussionStateComments } from '../../../reducers/CaseDiscussionTabReducer';
+import { checkForCaseStatusToggleOnAttachOrComment, setRemoteRiderFlag, updateCaseDetails, } from '../../../reducers/CaseReducer';
+const getLocaleNameFromLocalCode = (localeCode) => {
+    if ('Intl' in window && 'DisplayNames' in Intl) {
+        try {
+            const [lang, locale] = localeCode.includes('_') ? localeCode.split('_') : localeCode.split('-');
+            // https://github.com/microsoft/TypeScript/issues/41338
+            const langName = new Intl.DisplayNames([lang], { type: 'language' });
+            const regionNamesInLang = new Intl.DisplayNames([lang], { type: 'region' });
+            return `${regionNamesInLang.of(locale)} (${langName.of(lang)})`;
+        }
+        catch (e) {
+            return localeCode;
+        }
+    }
+    return localeCode;
+};
+export function RemoteSessionAgreementModal(props) {
+    const { t } = useTranslation();
+    const [isTermsChecked, setIsTermsChecked] = useState(false);
+    const [isSubmitDisabled, setSubmitDisabled] = useState(false);
+    const { request } = useFetch(publicApi.terms.getRequiredTerms);
+    const [isLangSelectorDropdownOpen, setisLangSelectorDropdownOpen] = useState(false);
+    const caseDispatch = useCaseDispatch();
+    const [selectedTranslation, setSelectedTranslation] = useState({
+        id: '5001',
+        isDefault: false,
+        localeCode: 'en_US',
+        pdfDownloadUrl: '/wapps/tnc/viewterms/7275e6f5-5f32-4d9c-aeaf-c796b56817fd',
+        termsPdfId: '7275e6f5-5f32-4d9c-aeaf-c796b56817fd',
+        translatedDescription: 'Your acceptance of this Remote Access Rider is required when you request Red Hat’s support team to remotely access your network or systems. Remote access to your network or systems is not a standard Red Hat problem resolution process. Before Red Hat logs onto your systems to analyze your support issue, Red Hat needs your approval and authorization for such remote access.',
+        translatedInstructions: 'Please read and accept the Remote Access Rider terms below to allow Red Hat to access your network or systems.',
+        translatedTermsName: 'Remote Access Rider',
+    });
+    const [allTranslations, setAllTranslations] = useState({});
+    const [agreeLoading, setAgreeLoading] = useState(false);
+    useEffect(() => {
+        const fetchTerms = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const { siteCode, eventCode, loggedInUser } = props;
+                const response = yield request(siteCode, eventCode, loggedInUser);
+                let defaultTranslation = response[0].translations[0];
+                const translationLangInfoMap = response[0].translations.reduce((allTranslationsmap, translation) => {
+                    if (translation.isDefault) {
+                        defaultTranslation = translation;
+                    }
+                    allTranslationsmap[translation['localeCode']] = translation;
+                    return allTranslationsmap;
+                }, {});
+                setSelectedTranslation(defaultTranslation);
+                setAllTranslations(translationLangInfoMap);
+            }
+            catch (e) {
+                console.log(e);
+            }
+        });
+        fetchTerms();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const { request: postCommentRequest, isFetching: isPostingComment } = useFetch(publicApi.kase.postComment, {
+        propgateErrors: true,
+    });
+    const dispatchDiscussion = useCaseDiscussionTabDispatchContext();
+    const { sort, allDiscussions, discussionFiltersListState } = useCaseDiscussionTabStateContext();
+    const { caseDetailsPageState: { caseFeedbacksHydra }, } = useCaseDetailsPageStateContext();
+    // To handle modal cancel and close
+    const onCancel = () => {
+        props.onClose && props.onClose();
+    };
+    // Function to ack remote session terms and post comment
+    const submitRequestRemoteSessionRequest = (pdfId) => __awaiter(this, void 0, void 0, function* () {
+        const requestComment = t('#### A Remote Session request has been submitted. We will review the request and confirm via case comment.\n\n This action does not initiate a remote session. Please make a case comment if you would like to submit a request.');
+        try {
+            yield updateCaseDetails(caseDispatch, props.caseNumber, { remoteSessionTermsAcked: true });
+            setRemoteRiderFlag(caseDispatch, true);
+            try {
+                yield postCommentRequest({
+                    caseNumber: props.caseNumber,
+                    commentBody: requestComment,
+                    contentType: 'markdown',
+                });
+                updateDiscussionStateComments(dispatchDiscussion, props.caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
+                checkForCaseStatusToggleOnAttachOrComment(caseDispatch, props.loggedInUserRights.data.isInternal(), props.caseStatus);
+                setAgreeLoading(false);
+                ToastNotification.addSuccessMessage(t('Remote Access Rider agreement has been accepted'), t('This action does not initiate a remote session. Please make a case comment if you would like to submit a request.'));
+            }
+            catch (e) {
+                ToastNotification.addWarningMessage(t('Could not submit a comment'), t('Rest assured, we have noted you have accepted the agreement'));
+                props.onClose();
+            }
+            props.onClose();
+        }
+        catch (e) {
+            ToastNotification.addDangerMessage(t('Could not accept the remote access rider agreement'), t('Please try again.'));
+            props.onClose();
+        }
+    });
+    // To check if terms acked and if not disable submit button
+    const onSubmit = () => {
+        if (isTermsChecked) {
+            setAgreeLoading(true);
+            submitRequestRemoteSessionRequest(selectedTranslation.termsPdfId);
+        }
+        else {
+            setSubmitDisabled(true);
+        }
+    };
+    // Handle terms checkbox
+    const onCheckBoxChange = (value) => {
+        setIsTermsChecked(value);
+        setSubmitDisabled(!value);
+    };
+    // Handle language change
+    const onLangChange = (event, lang) => {
+        setSelectedTranslation(allTranslations[lang]);
+        setisLangSelectorDropdownOpen(false);
+    };
+    // To handle dropdown toggle
+    const onDropdownToggle = (toggle) => setisLangSelectorDropdownOpen(toggle);
+    // RSA Modal Actions
+    const modalActions = [
+        React.createElement(Button, { "aria-label": t('I agree'), variant: ButtonVariant.primary, onClick: onSubmit, "data-tracking-id": "remote-session-agreement-check", isLoading: agreeLoading || isPostingComment, isDisabled: isSubmitDisabled || isPostingComment }, t('I agree')),
+    ];
+    // Body of RSA Modal
+    const RemoteSessionAgreementModalBody = (React.createElement(React.Fragment, null,
+        React.createElement("p", { className: "pf-u-mt-xs" },
+            React.createElement(Trans, null,
+                "Your acceptance of this Remote Access Rider is required ",
+                React.createElement("strong", null, "for each case"),
+                " when you request Red Hat\u2019s support team to directly access your network or systems.")),
+        React.createElement("p", { className: "pf-u-mt-md" },
+            React.createElement(Trans, null, "Remote access to your network or systems is not a standard Red Hat problem resolution process. Before Red Hat logs into your systems to analyze your support issue during a remote session, Red Hat needs your approval and authorization for such remote access.")),
+        React.createElement("p", { className: "pf-u-mt-md" },
+            React.createElement(Trans, null, "Please read and accept the Remote Access Rider terms below to allow Red Hat to access your network or systems.")),
+        React.createElement("div", null,
+            React.createElement(Select, { className: "pf-u-mt-md", "aria-label": t('Select language'), id: "terms-language-selector", selections: selectedTranslation.localeCode, onSelect: onLangChange, isOpen: isLangSelectorDropdownOpen, menuAppendTo: document.body, placeholderText: t('Select an option that best fits'), onToggle: onDropdownToggle, width: 350 }, Object.keys(allTranslations).map((option, index) => (React.createElement(SelectOption, { key: index, value: option }, getLocaleNameFromLocalCode(option))))),
+            React.createElement("a", { "aria-label": t('Download'), "data-tracking-id": "rsa-modal-terms-download", className: "pf-u-ml-md", href: selectedTranslation.pdfDownloadUrl, rel: "noopener noreferrer", target: "_blank" },
+                t('Download'),
+                " ",
+                React.createElement(DownloadIcon, { className: "pf-u-ml-xs" }))),
+        React.createElement("div", null,
+            React.createElement(Checkbox, { className: "pf-u-mt-md", id: "terms-accept-checkbox", label: React.createElement(React.Fragment, null,
+                    React.createElement(Trans, null, "I have read and agree to the"),
+                    ' ',
+                    React.createElement("a", { className: "pf-c-button pf-m-link pf-m-inline align-link-items", rel: "noopener noreferrer", target: "_blank", href: selectedTranslation.pdfDownloadUrl, "data-tracking-id": "case-details-request-remote-session-terms" },
+                        React.createElement(Trans, null, "terms "),
+                        React.createElement(ExternalLinkAltIcon, null))), isChecked: isTermsChecked, "aria-label": t('I have read and agree to the terms'), onChange: onCheckBoxChange }))));
+    return (React.createElement(Modal, { id: "remote-session-agreement-modal", "aria-label": t('Remote Session Agreement'), title: t('Remote Session Agreement'), isOpen: props.show, onClose: onCancel, actions: modalActions }, RemoteSessionAgreementModalBody));
+}

package/lib/esm/components/CaseEditView/RequestRemoteSession/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RemoteSessionAgreement';
+//# sourceMappingURL=index.d.ts.map

package/lib/esm/components/CaseEditView/RequestRemoteSession/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/lib/esm/components/CaseEditView/RequestRemoteSession/index.js

@@ -0,0 +1 @@
+export * from './RemoteSessionAgreement';

package/lib/esm/scss/_main.scss

@@ -915,7 +915,7 @@ div.pf-c-alert.ea-rule-alert > div.pf-c-alert__description > p {
 .customer-view-switch-label {
     font-size: 15px;
     font-weight: 700;
-    color: #6a6e73;
+    color: var(--pf-global--palette--black-600);
 }
 
 #case-details-aside-content[pfe-expanded] {
@@ -959,5 +959,9 @@ p.pref-case-popover-text {
 }
 
 .blueLock {
-    color: #06c;
+    color: var(--pf-global--palette--blue-400);
+}
+
+.rrs-light-grey-text {
+    color: var(--pf-global--palette--black-600);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "1.0.25",
+    "version": "1.0.26",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -73,8 +73,8 @@
         "@patternfly/react-core": "4.264.0",
         "@progress/kendo-drawing": "^1.6.0",
         "@progress/kendo-react-pdf": "^3.12.0",
-        "@rh-support/components": "1.2.12",
-        "@rh-support/react-context": "1.0.14",
+        "@rh-support/components": "1.2.13",
+        "@rh-support/react-context": "1.0.15",
         "@rh-support/types": "0.2.0",
         "@rh-support/user-permissions": "1.0.10",
         "@rh-support/utils": "1.0.8",
@@ -142,5 +142,5 @@
         "not ie <= 11",
         "not op_mini all"
     ],
-    "gitHead": "e37bef728cf73aec23bea1060d855aeb01ae62b6"
+    "gitHead": "8e9b0b138cec4a9e71180e96ee391702b6754236"
 }