@rh-support/troubleshoot 2.7.1 → 2.7.10

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

@@ -7,44 +7,30 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useApolloClient } from '@apollo/client/react';
 import { publicApi } from '@cee-eng/hydrajs';
-import { Alert, Button, ButtonVariant, Checkbox, Modal, TextArea, TextInput } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import { Alert, Button, ButtonVariant, Checkbox, Modal, ModalBody, ModalFooter, ModalHeader, Progress, ProgressMeasureLocation, ProgressSize, TextArea, TextInput, } from '@patternfly/react-core';
 import DownloadIcon from '@patternfly/react-icons/dist/js/icons/download-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { ToastNotification, useFetch } from '@rh-support/components';
+import { SingleSelectDropdown, useFetch } from '@rh-support/components';
+import { resolveSalesforceUserIdByFederationId } from '@rh-support/utils';
 import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../context/CaseContext';
-import { useCaseDetailsPageStateContext } from '../../../context/CaseDetailsPageContext';
-import { useCaseDiscussionTabDispatchContext, useCaseDiscussionTabStateContext, } from '../../../context/CaseDiscussionTabContext';
-import { updateDiscussionStateComments } from '../../../reducers/CaseDiscussionTabReducer';
-import { checkForCaseStatusToggleOnAttachOrComment, 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;
-};
+import { GET_CASE_COMMENTS, useCreateCaseComment } from '../../../hooks/useCaseComments';
+import { checkForCaseStatusToggleOnAttachOrComment, updateCaseDetailsGraphQL } from '../../../reducers/CaseReducer';
+import { buildRemoteSessionRequestCaseUpdate, formatSessionLinks, getLocaleNameFromLocalCode, getRemoteSessionFieldProgressVariant, isRemoteSessionFieldOverLimit, isRemoteSessionFormSubmitDisabled, REMOTE_SESSION_FIELD_LENGTH_ERROR, REMOTE_SESSION_FIELD_LENGTH_LIMIT, } from './remoteSessionUtils';
 export function NewEssTermsModal(props) {
     const { t } = useTranslation();
     const { remoteSessionTermsAcked } = useCaseSelector((state) => ({
         remoteSessionTermsAcked: state.caseDetails.remoteSessionTermsAcked,
     }), isEqual);
     const [isTermsChecked, setIsTermsChecked] = useState(false);
+    const existingCaseDetails = useCaseSelector((state) => state.caseDetails, isEqual);
     const { request } = useFetch(publicApi.terms.getRequiredTerms);
-    const [isLangSelectorDropdownOpen, setisLangSelectorDropdownOpen] = useState(false);
     const caseDispatch = useCaseDispatch();
+    const apolloClient = useApolloClient();
     const [selectedTranslation, setSelectedTranslation] = useState({
         id: '5001',
         isDefault: false,
@@ -61,21 +47,24 @@ export function NewEssTermsModal(props) {
     const [sessionExpectations, setSessionExpectations] = useState('');
     const [impact, setImpact] = useState('');
     const [sessionLink, setSessionLink] = useState('');
+    const [hasSubmitted, setHasSubmitted] = 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);
+                if (response) {
+                    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);
@@ -84,50 +73,73 @@ export function NewEssTermsModal(props) {
         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();
+    const client = useApolloClient();
+    const { createComment, loading: isPostingComment } = useCreateCaseComment();
+    const caseSalesforceId = useCaseSelector((state) => state.caseDetails.id, isEqual);
     const updateSessionExpectation = (event, value) => setSessionExpectations(value);
     const updateImpact = (event, value) => setImpact(value);
     const updateSessionLink = (event, value) => setSessionLink(value);
     // To handle modal cancel and close
     const onCancel = () => {
+        if (agreeLoading || isPostingComment)
+            return;
         setIsTermsChecked(false);
         setSessionExpectations('');
         setImpact('');
         setSessionLink('');
-        setIsRemoteSessionForm(false);
+        setIsRemoteSessionForm(remoteSessionTermsAcked);
+        setHasSubmitted(false);
         props.onClose && props.onClose();
     };
+    const languageOptions = Object.keys(allTranslations).map((option) => ({
+        value: option,
+        label: getLocaleNameFromLocalCode(option),
+    }));
+    // Create selected option object based on current selection
+    const selectedLanguage = {
+        value: selectedTranslation.localeCode,
+        label: selectedTranslation.localeCode
+            ? getLocaleNameFromLocalCode(selectedTranslation.localeCode)
+            : t('Select an option that best fits'),
+    };
     // Function to ack remote session terms and post comment
     const submitRemoteSessionAgreement = (pdfId) => __awaiter(this, void 0, void 0, function* () {
-        const requestComment = t(`Submitted a remote session request with following details:\n\n**Preferred Time and Expectations for Remote Session**\n${sessionExpectations}\n\n**Describe the impact to you or the business**\n${impact}\n\n${sessionLink ? `**Remote session link**\n[${sessionLink}](${sessionLink})\n\n` : ''}This action does not initiate a remote session. A Red Hat Associate will get back to you soon.`);
+        const requestComment = t(`<p><strong>Thank you for submitting the request for a remote session. A support manager will review the request, and updates will be provided in the support case. Please continue to provide any data requested by the support engineers in the case prior to the remote session (if applicable).</strong></p><p>Submitted a remote session request with following details:</p><p><strong>Preferred Time and Expectations of remote session</strong></p><p>${sessionExpectations}</p><p><strong>Describe the impact to you or the business</strong></p><p>${impact}</p>${sessionLink
+            ? `<p><strong>Remote session link</strong></p><p>${formatSessionLinks(sessionLink)}</p>`
+            : ''}<p>This action does not initiate a remote session. A Red Hat Associate will get back to you soon.</p>`);
         try {
-            yield updateCaseDetails(caseDispatch, props.caseNumber, {
-                remoteSessionTermsAcked: true,
-                screenSessionRequested: true,
-                waitingOnCallback: true,
-            });
+            const ackedByUserId = yield resolveSalesforceUserIdByFederationId(apolloClient, props.loggedInUser);
+            if (!ackedByUserId) {
+                throw new Error('Salesforce user id is required to request a remote session');
+            }
+            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, props.caseNumber, buildRemoteSessionRequestCaseUpdate(ackedByUserId), false, { existingCaseDetails });
             try {
-                yield postCommentRequest({
+                yield createComment({
+                    caseId: caseSalesforceId,
+                    body: requestComment,
+                    isPublic: true,
+                });
+                client.refetchQueries({ include: [GET_CASE_COMMENTS] });
+                yield checkForCaseStatusToggleOnAttachOrComment(caseDispatch, props.loggedInUserRights.data.isInternal(), props.caseStatus, {
+                    apolloClient,
                     caseNumber: props.caseNumber,
-                    commentBody: requestComment,
-                    contentType: 'markdown',
+                    existingCaseDetails,
                 });
-                updateDiscussionStateComments(dispatchDiscussion, caseDispatch, props.caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
-                checkForCaseStatusToggleOnAttachOrComment(caseDispatch, props.loggedInUserRights.data.isInternal(), props.caseStatus);
-                onCancel();
                 setAgreeLoading(false);
-                ToastNotification.addSuccessMessage(t('Remote session has been requested successfully'), t('Red Hat will add a comment to your case to schedule your remote session.'));
+                setHasSubmitted(true);
+                // ToastNotification.addSuccessMessage(
+                //     t('Remote session has been requested successfully'),
+                //     t('Red Hat will add a comment to your case to schedule your remote session.')
+                // );
             }
             catch (e) {
                 onCancel();
                 setAgreeLoading(false);
                 setIsTermsChecked(false);
-                ToastNotification.addWarningMessage(t('Could not submit a comment'), t('Rest assured, we have noted you have accepted the agreement'));
+                // ToastNotification.addWarningMessage(
+                //     t('Could not submit a comment'),
+                //     t('Rest assured, we have noted you have accepted the agreement')
+                // );
             }
         }
         catch (e) {
@@ -135,16 +147,20 @@ export function NewEssTermsModal(props) {
                 onCancel();
                 setAgreeLoading(false);
                 setIsTermsChecked(false);
-                ToastNotification.addDangerMessage(t('You are not authorized to update this case.'));
+                // ToastNotification.addDangerMessage(t('You are not authorized to update this case.'));
             }
             else {
                 onCancel();
                 setAgreeLoading(false);
                 setIsTermsChecked(false);
-                yield updateCaseDetails(caseDispatch, props.caseNumber, {
-                    screenSessionRequested: false,
+                yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, props.caseNumber, {
+                    remoteSessionTermsAcked: false,
+                    waitingOnCallback: false,
                 });
-                ToastNotification.addDangerMessage(t('Could not submit a request for remote session'), t('Please try again.'));
+                // ToastNotification.addDangerMessage(
+                //     t('Could not submit a request for remote session'),
+                //     t('Please try again.')
+                // );
             }
         }
     });
@@ -159,72 +175,81 @@ export function NewEssTermsModal(props) {
         setIsTermsChecked(value);
     };
     // Handle language change
-    const onLangChange = (event, lang) => {
-        setSelectedTranslation(allTranslations[lang]);
-        setisLangSelectorDropdownOpen(false);
+    const onLangChange = (lang) => {
+        setSelectedTranslation(allTranslations[lang.value]);
     };
-    // To handle dropdown toggle
-    const onDropdownToggle = (toggle) => setisLangSelectorDropdownOpen(toggle);
     // To check and if I agree button is loading
     const isAgreeLoading = agreeLoading || isPostingComment;
-    const modalActions = [
-        React.createElement(Button, { "aria-label": t('I agree'), variant: ButtonVariant.primary, onClick: isRemoteSessionForm || remoteSessionTermsAcked ? onSubmit : toggleRemoteSessionForm, "data-tracking-id": isRemoteSessionForm || remoteSessionTermsAcked
-                ? 'remote-session-details-submission'
-                : 'remote-session-agreement-check', isLoading: isAgreeLoading, isDisabled: (isRemoteSessionForm || remoteSessionTermsAcked
-                ? !sessionExpectations.trim() || !impact.trim()
-                : !isTermsChecked) || isAgreeLoading }, t(isRemoteSessionForm || remoteSessionTermsAcked ? 'Submit' : 'I agree')),
-        React.createElement(Button, { key: "cancel", variant: "link", onClick: onCancel, isDisabled: isAgreeLoading }, "Cancel"),
-    ];
+    const modalActions = hasSubmitted
+        ? [
+            React.createElement(Button, { key: "close", variant: ButtonVariant.primary, onClick: onCancel }, t('Close')),
+        ]
+        : [
+            React.createElement(Button, { "aria-label": t('I agree'), variant: ButtonVariant.primary, onClick: isRemoteSessionForm || remoteSessionTermsAcked ? onSubmit : toggleRemoteSessionForm, "data-tracking-id": "remote-session-agreement-check", isLoading: isAgreeLoading, isDisabled: (isRemoteSessionForm || remoteSessionTermsAcked
+                    ? isRemoteSessionFormSubmitDisabled(sessionExpectations, impact)
+                    : !isTermsChecked) || isAgreeLoading }, t(isRemoteSessionForm || remoteSessionTermsAcked ? 'Submit' : 'I agree')),
+            React.createElement(Button, { key: "cancel", variant: "link", onClick: onCancel, isDisabled: isAgreeLoading }, "Cancel"),
+        ];
     const renderRemoteSessionForm = (React.createElement("div", { id: "remoteSessionForm", className: "form-group" },
         React.createElement(Alert, { variant: "info", isInline: true, title: React.createElement(React.Fragment, null,
                 "What is a Remote Support Session and how to acknowledge the Remote Access Rider?",
                 ' ',
                 React.createElement("a", { href: "https://access.redhat.com/articles/3566571", target: "_blank", rel: "noopener noreferrer" }, "Read more.")) }),
         React.createElement("div", null,
-            React.createElement("label", { className: "pf-v5-u-mt-md" },
+            React.createElement("label", { className: "pf-v6-u-mt-md" },
                 React.createElement(Trans, null, "Preferred Time and Expectations for Remote Session"),
                 React.createElement("span", { className: "form-required", "aria-hidden": "true" }, "*")),
-            React.createElement(TextArea, { value: sessionExpectations, onChange: updateSessionExpectation, rows: 3, placeholder: "Please share anything that will help prepare for our meeting?", isRequired: true, "aria-label": "Preferred Time and Expectations for Remote Session" })),
+            React.createElement(TextArea, { value: sessionExpectations, onChange: updateSessionExpectation, rows: 3, placeholder: "Please share anything that will help prepare for our meeting?", isRequired: true, validated: isRemoteSessionFieldOverLimit(sessionExpectations) ? 'error' : 'default', "aria-invalid": isRemoteSessionFieldOverLimit(sessionExpectations), "aria-label": "Preferred Time and Expectations for Remote Session" }),
+            React.createElement("p", { className: "form-instructions pf-v6-u-danger-color-100" }, isRemoteSessionFieldOverLimit(sessionExpectations) ? REMOTE_SESSION_FIELD_LENGTH_ERROR : ''),
+            React.createElement(Progress, { value: sessionExpectations === null || sessionExpectations === void 0 ? void 0 : sessionExpectations.length, min: 0, max: REMOTE_SESSION_FIELD_LENGTH_LIMIT, size: ProgressSize.sm, label: `${sessionExpectations === null || sessionExpectations === void 0 ? void 0 : sessionExpectations.length} / ${REMOTE_SESSION_FIELD_LENGTH_LIMIT}`, valueText: `${sessionExpectations === null || sessionExpectations === void 0 ? void 0 : sessionExpectations.length} / ${REMOTE_SESSION_FIELD_LENGTH_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${sessionExpectations === null || sessionExpectations === void 0 ? void 0 : sessionExpectations.length} / ${REMOTE_SESSION_FIELD_LENGTH_LIMIT}`, variant: getRemoteSessionFieldProgressVariant(sessionExpectations), title: ' ', className: `pf-v6-u-mt-md kt-progress-bar`, id: "summary-progress-bar" })),
         React.createElement("div", null,
-            React.createElement("label", { className: "pf-v5-u-mt-md" },
+            React.createElement("label", { className: "pf-v6-u-mt-md" },
                 React.createElement(Trans, null, "Describe the impact to you or the business"),
                 React.createElement("span", { className: "form-required", "aria-hidden": "true" }, "*")),
-            React.createElement(TextArea, { value: impact, onChange: updateImpact, rows: 3, placeholder: "Describe the user or financial impact.", isRequired: true, "aria-label": "Describe the impact to you or the business" })),
+            React.createElement(TextArea, { value: impact, onChange: updateImpact, rows: 3, placeholder: "Describe the user or financial impact.", isRequired: true, validated: isRemoteSessionFieldOverLimit(impact) ? 'error' : 'default', "aria-invalid": isRemoteSessionFieldOverLimit(impact), "aria-label": "Describe the impact to you or the business" }),
+            React.createElement("p", { className: "form-instructions pf-v6-u-danger-color-100" }, isRemoteSessionFieldOverLimit(impact) ? REMOTE_SESSION_FIELD_LENGTH_ERROR : ''),
+            React.createElement(Progress, { value: impact === null || impact === void 0 ? void 0 : impact.length, min: 0, max: REMOTE_SESSION_FIELD_LENGTH_LIMIT, size: ProgressSize.sm, label: `${impact === null || impact === void 0 ? void 0 : impact.length} / ${REMOTE_SESSION_FIELD_LENGTH_LIMIT}`, valueText: `${impact === null || impact === void 0 ? void 0 : impact.length} / ${REMOTE_SESSION_FIELD_LENGTH_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${impact === null || impact === void 0 ? void 0 : impact.length} / ${REMOTE_SESSION_FIELD_LENGTH_LIMIT}`, variant: getRemoteSessionFieldProgressVariant(impact), title: ' ', className: `pf-v6-u-mt-md kt-progress-bar`, id: "summary-progress-bar" })),
         React.createElement("div", null,
-            React.createElement("label", { className: "pf-v5-u-mt-md" },
+            React.createElement("label", { className: "pf-v6-u-mt-md" },
                 React.createElement(Trans, null, "Remote session link (optional)")),
             React.createElement(TextInput, { value: sessionLink, onChange: updateSessionLink, type: "text", "aria-label": "Remote session link" }),
             React.createElement("p", { className: "form-instructions" }, "If not provided, the Red Hat Support Associate will share a link with you."))));
     const renderRemoteSessionAgreement = (React.createElement("div", { id: "remoteSessionAgreement" },
-        React.createElement("p", { className: "pf-v5-u-mt-xs" },
+        React.createElement("p", { className: "pf-v6-u-mt-xs" },
             React.createElement(Trans, null,
                 "Your acceptance of this remote session agreement 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-v5-u-mt-md" },
+        React.createElement("p", { className: "pf-v6-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-v5-u-mt-md" },
+        React.createElement("p", { className: "pf-v6-u-mt-md" },
             React.createElement(Trans, null, "Please read and accept the remote session terms below to allow Red Hat to access your network or systems.")),
-        React.createElement("div", null,
-            React.createElement(Select, { className: "pf-v5-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: (_event, toggle) => onDropdownToggle(toggle), 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-v5-u-ml-md", href: selectedTranslation.pdfDownloadUrl, rel: "noopener noreferrer", target: "_blank" },
+        React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-flex-wrap" },
+            React.createElement(SingleSelectDropdown, { className: "pf-v6-u-mt-md", "aria-label": t('Select language'), id: "terms-language-selector", selected: selectedLanguage, onSelect: (option) => onLangChange(option), placeholder: t('Select an option that best fits'), toggleClassName: "pf-v6-u-w-50", options: languageOptions }),
+            React.createElement("a", { "aria-label": t('Download'), "data-tracking-id": "rsa-modal-terms-download", className: "pf-v6-u-ml-md pf-v6-u-display-inline-flex pf-v6-u-align-items-center", href: selectedTranslation.pdfDownloadUrl, rel: "noopener noreferrer", target: "_blank" },
                 t('Download'),
                 " ",
-                React.createElement(DownloadIcon, { className: "pf-v5-u-ml-xs" }))),
+                React.createElement(DownloadIcon, { className: "pf-v6-u-ml-xs" }))),
         React.createElement("div", null,
-            React.createElement(Checkbox, { className: "pf-v5-u-mt-md rsa-checkbox", id: "terms-accept-checkbox", label: React.createElement(React.Fragment, null,
+            React.createElement(Checkbox, { className: "pf-v6-u-mt-md rsa-checkbox", 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-v5-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("a", { className: "pf-v6-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 }))));
+    // Success message content
+    const renderSuccessMessage = (React.createElement("div", null,
+        React.createElement("p", null, t('Thank you for submitting the request for a remote session. A support manager will review the request, and updates will be provided in the support case. Please continue to provide any data requested by the support engineers in the case prior to the remote session (if applicable).'))));
     // Body of ESS RSA Modal
     const EssRSAModalBody = () => {
-        return isRemoteSessionForm || remoteSessionTermsAcked ? renderRemoteSessionForm : renderRemoteSessionAgreement;
+        if (hasSubmitted) {
+            return renderSuccessMessage;
+        }
+        return isRemoteSessionForm ? renderRemoteSessionForm : renderRemoteSessionAgreement;
     };
-    return (React.createElement(Modal, { id: "remote-session-agreement-modal", "aria-label": isRemoteSessionForm || remoteSessionTermsAcked
-            ? t('Request remote session')
-            : t('Remote session agreement'), title: isRemoteSessionForm || remoteSessionTermsAcked
-            ? t('Request remote session')
-            : t('Remote session agreement'), isOpen: props.show, onClose: onCancel, actions: modalActions }, EssRSAModalBody()));
+    return (React.createElement(Modal, { id: "remote-session-agreement-modal", "aria-label": hasSubmitted || isRemoteSessionForm ? t('Request remote session') : t('Remote session agreement'), title: hasSubmitted || isRemoteSessionForm ? t('Request remote session') : t('Remote session agreement'), isOpen: props.show, onClose: onCancel },
+        React.createElement(ModalHeader, null,
+            React.createElement("h2", null, hasSubmitted || isRemoteSessionForm ? t('Request remote session') : t('Remote session agreement'))),
+        React.createElement(ModalBody, null, EssRSAModalBody()),
+        React.createElement(ModalFooter, null, modalActions)));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteSessionAgreement.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreement.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,+EA6FjC,CAAC"}
+{"version":3,"file":"RemoteSessionAgreement.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreement.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,sBAAsB,+EA0HjC,CAAC"}

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

@@ -1,9 +1,10 @@
-import { Button, List, ListItem, Popover, Tooltip } from '@patternfly/react-core';
+import { Button, Card, CardBody, CardHeader, List, ListItem, Popover, Tooltip } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import LockIcon from '@patternfly/react-icons/dist/js/icons/lock-icon';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
 import { TncConstants } from '@rh-support/utils';
 import React, { forwardRef, useContext, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { RemoteSessionAgreementModal } from './RemoteSessionAgreementModal';
 export const RemoteSessionAgreement = forwardRef((props, ref) => {
     const tooltipRef = useRef();
@@ -11,6 +12,8 @@ export const RemoteSessionAgreement = forwardRef((props, ref) => {
     const canEditCase = useCanEditCase();
     const { caseNumber, caseStatus, acceptedRemoteSessionTerms, readOnly, waitingOnCallback } = props;
     const { globalMetadataState: { loggedInUser, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const isExternal = loggedInUserRights.data.isExternal();
+    const isInternal = loggedInUserRights.data.isInternal();
     const [openRequestRemoteSessionModal, setOpenRequestRemoteSessionModal] = useState(false);
     // To toggle RSA Modal
     const toggleRemoteSessionAgreementModal = () => {
@@ -19,20 +22,34 @@ export const RemoteSessionAgreement = forwardRef((props, ref) => {
         setOpenRequestRemoteSessionModal((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-v5-u-display-flex pf-v5-u-justify-content-space-between case-detail-panel-card-heading card-header-bg" },
-            t('Remote session request'),
-            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(List, { className: "pf-v5-u-pl-lg" },
-                React.createElement(ListItem, null, t('Such access will help diagnose and have greater understanding into the issue')),
-                React.createElement(ListItem, null, t('Agreed upon by both Red Hat and you, the end user'))),
-            React.createElement("p", { className: "rrs-light-grey-text" }, t('Red Hat will add a comment to your case to schedule your remote session.')),
-            acceptedRemoteSessionTerms && (React.createElement(Tooltip, { content: t('Remote session has already been requested.'), triggerRef: tooltipRef, "aria-live": 'polite' })),
-            React.createElement(Button, { "aria-label": waitingOnCallback ? t('Remote session requested') : t('Request remote session'), variant: waitingOnCallback ? 'primary' : 'secondary', onClick: toggleRemoteSessionAgreementModal, "data-tracking-id": "accept-remote-session-agreement-trigger", isAriaDisabled: waitingOnCallback, ref: tooltipRef }, waitingOnCallback ? t('Remote session requested') : t('Request remote session')))));
+    const RemoteSessionAgreementSectionBody = (React.createElement(Card, { className: "card-support escalations", ref: ref },
+        React.createElement(CardHeader, null,
+            React.createElement("h3", { className: "card-heading pf-v6-u-display-flex pf-v6-u-justify-content-space-between case-detail-panel-card-heading pf-v6-u-align-items-center" },
+                t('Remote session request'),
+                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, { style: { color: '#5e40be', width: '1rem', height: '1rem' } })))),
+        React.createElement(CardBody, null,
+            isInternal && (React.createElement(React.Fragment, null,
+                React.createElement("p", null,
+                    React.createElement(LockIcon, { style: { marginRight: '8px' } }),
+                    ' ',
+                    React.createElement("strong", null, `${t('Available to customers only')}`)),
+                React.createElement("p", null,
+                    React.createElement(Trans, null,
+                        "Available to customers only. If requested and agreed upon, a remote session will be scheduled and confirmed in a case comment. Refer to the",
+                        ' ',
+                        React.createElement("a", { href: "https://access.redhat.com/articles/3566571", target: "_blank", rel: "noreferrer" }, "Remote session guide"),
+                        ' ',
+                        "for details.")))),
+            isExternal && (React.createElement(React.Fragment, null,
+                React.createElement("p", null,
+                    React.createElement("strong", null, `${t('Red Hat may agree to remotely access your systems if:')}`)),
+                React.createElement(List, { className: "pf-v6-u-pl-lg" },
+                    React.createElement(ListItem, null, t('Such access will help diagnose and have greater understanding into the issue')),
+                    React.createElement(ListItem, null, t('Agreed upon by both Red Hat and you, the end user'))),
+                React.createElement("p", { className: "rrs-light-grey-text" }, t('Red Hat will add a comment to your case to schedule your remote session.')),
+                acceptedRemoteSessionTerms && (React.createElement(Tooltip, { content: t('Remote session has already been requested.'), triggerRef: tooltipRef, "aria-live": 'polite' })),
+                React.createElement(Button, { "aria-label": waitingOnCallback ? t('Remote session requested') : t('Request remote session'), variant: waitingOnCallback ? 'primary' : 'secondary', onClick: toggleRemoteSessionAgreementModal, "data-tracking-id": "accept-remote-session-agreement-trigger", isDisabled: canEditCase.isCaseNotEditable, isAriaDisabled: waitingOnCallback, ref: tooltipRef, className: "remote-session-button" }, waitingOnCallback ? t('Remote session requested') : t('Request remote session')))))));
     return (React.createElement(React.Fragment, null,
         RemoteSessionAgreementSectionBody,
         React.createElement(RemoteSessionAgreementModal, { caseNumber: caseNumber, caseStatus: caseStatus, show: openRequestRemoteSessionModal, onClose: toggleRemoteSessionAgreementModal, siteCode: TncConstants.REMOTE_RIDER_SITE_CODE, eventCode: TncConstants.REMOTER_RIDER_EVENT_CODE, loggedInUser: loggedInUser.data.ssoUsername === undefined ? '' : loggedInUser.data.ssoUsername, loggedInUserRights: loggedInUserRights, readOnly: readOnly })));

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

@@ -1 +1 @@
-{"version":3,"file":"RemoteSessionAgreementModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAgBnD,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;IAClD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAiBD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBAsWxD"}
+{"version":3,"file":"RemoteSessionAgreementModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGxD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAqBnD,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;IAClD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBAuaxD"}