@rh-support/troubleshoot 2.6.354 → 2.6.357

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

@@ -7,8 +7,9 @@ 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, ModalBody, ModalFooter, ModalHeader, TextArea, TextInput, } from '@patternfly/react-core';
+import { Alert, Button, ButtonVariant, Checkbox, Modal, ModalBody, ModalFooter, ModalHeader, Progress, ProgressMeasureLocation, ProgressSize, ProgressVariant, 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 { SingleSelectDropdown, useFetch } from '@rh-support/components';
@@ -16,41 +17,19 @@ 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;
-};
-const formatSessionLinks = (sessionLink) => {
-    const links = sessionLink
-        .split(/[;,| \n\r\t]+/)
-        .map((link) => link.trim())
-        .filter(Boolean);
-    const formattedLinks = links.map((link) => `[${link}](${link})`).join('\n');
-    return formattedLinks;
-};
+import { GET_CASE_COMMENTS, useCreateCaseComment } from '../../../hooks/useCaseComments';
+import { checkForCaseStatusToggleOnAttachOrComment, updateCaseDetailsGraphQL } from '../../../reducers/CaseReducer';
+import { formatSessionLinks, getLocaleNameFromLocalCode, 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 caseDispatch = useCaseDispatch();
+    const apolloClient = useApolloClient();
     const [selectedTranslation, setSelectedTranslation] = useState({
         id: '5001',
         isDefault: false,
@@ -93,15 +72,32 @@ 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);
+    const getVariantSessionExpectations = () => {
+        if (!sessionExpectations)
+            return ProgressVariant.success;
+        if (sessionExpectations.length > REMOTE_SESSION_FIELD_LENGTH_LIMIT / 2) {
+            return ProgressVariant.warning;
+        }
+        else {
+            return ProgressVariant.success;
+        }
+    };
+    const getVariantImpact = () => {
+        if (!impact)
+            return ProgressVariant.success;
+        if (impact.length > REMOTE_SESSION_FIELD_LENGTH_LIMIT / 2) {
+            return ProgressVariant.warning;
+        }
+        else {
+            return ProgressVariant.success;
+        }
+    };
     // To handle modal cancel and close
     const onCancel = () => {
         if (agreeLoading || isPostingComment)
@@ -127,21 +123,26 @@ export function NewEssTermsModal(props) {
     };
     // Function to ack remote session terms and post comment
     const submitRemoteSessionAgreement = (pdfId) => __awaiter(this, void 0, void 0, function* () {
-        const requestComment = t(`\n**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).**\n\nSubmitted a remote session request with following details:\n\n**Preferred Time and Expectations of remote session**\n${sessionExpectations}\n\n**Describe the impact to you or the business**\n${impact}\n\n${sessionLink ? `**Remote session link**\n${formatSessionLinks(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, {
+            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, props.caseNumber, {
                 remoteSessionTermsAcked: true,
-                screenSessionRequested: true,
                 waitingOnCallback: true,
-            });
+            }, 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);
                 setAgreeLoading(false);
                 setHasSubmitted(true);
                 // ToastNotification.addSuccessMessage(
@@ -170,8 +171,9 @@ export function NewEssTermsModal(props) {
                 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'),
@@ -215,12 +217,14 @@ export function NewEssTermsModal(props) {
             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, maxLength: REMOTE_SESSION_FIELD_LENGTH_LIMIT, "aria-label": "Preferred Time and Expectations for Remote Session" }),
+            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: getVariantSessionExpectations(), title: ' ', className: `pf-v6-u-mt-md kt-progress-bar`, id: "summary-progress-bar" })),
         React.createElement("div", null,
             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, maxLength: REMOTE_SESSION_FIELD_LENGTH_LIMIT, "aria-label": "Describe the impact to you or the business" }),
+            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: getVariantImpact(), title: ' ', className: `pf-v6-u-mt-md kt-progress-bar`, id: "summary-progress-bar" })),
         React.createElement("div", null,
             React.createElement("label", { className: "pf-v6-u-mt-md" },
                 React.createElement(Trans, null, "Remote session link (optional)")),

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":"AAiBA,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;AA4BD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBA0XxD"}
+{"version":3,"file":"RemoteSessionAgreementModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/RemoteSessionAgreementModal.tsx"],"names":[],"mappings":"AAsBA,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;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBAibxD"}

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

@@ -7,8 +7,9 @@ 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, ModalBody, ModalFooter, ModalHeader, TextArea, TextInput, } from '@patternfly/react-core';
+import { Alert, Button, ButtonVariant, Checkbox, Modal, ModalBody, ModalFooter, ModalHeader, Progress, ProgressMeasureLocation, ProgressSize, ProgressVariant, 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 { SingleSelectDropdown, useFetch } from '@rh-support/components';
@@ -16,41 +17,19 @@ 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, 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;
-};
-const formatSessionLinks = (sessionLink) => {
-    const links = sessionLink
-        .split(/[;,| \n\r\t]+/)
-        .map((link) => link.trim())
-        .filter(Boolean);
-    const formattedLinks = links.map((link) => `[${link}](${link})`).join('\n');
-    return formattedLinks;
-};
+import { GET_CASE_COMMENTS, useCreateCaseComment } from '../../../hooks/useCaseComments';
+import { checkForCaseStatusToggleOnAttachOrComment, setRemoteRiderFlag, updateCaseDetailsGraphQL, } from '../../../reducers/CaseReducer';
+import { formatSessionLinks, getLocaleNameFromLocalCode, REMOTE_SESSION_FIELD_LENGTH_LIMIT, } from './remoteSessionUtils';
 export function RemoteSessionAgreementModal(props) {
     const { t } = useTranslation();
     const { remoteSessionTermsAcked } = useCaseSelector((state) => ({
         remoteSessionTermsAcked: state.caseDetails.remoteSessionTermsAcked,
+        caseDetails: state.caseDetails,
     }), isEqual);
     const [isTermsChecked, setIsTermsChecked] = useState(false);
     const { request } = useFetch(publicApi.terms.getRequiredTerms);
     const caseDispatch = useCaseDispatch();
+    const apolloClient = useApolloClient();
     const [selectedTranslation, setSelectedTranslation] = useState({
         id: '5001',
         isDefault: false,
@@ -93,15 +72,32 @@ export function RemoteSessionAgreementModal(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);
+    const getVariantSessionExpectations = () => {
+        if (!sessionExpectations)
+            return ProgressVariant.success;
+        if (sessionExpectations.length > REMOTE_SESSION_FIELD_LENGTH_LIMIT / 2) {
+            return ProgressVariant.warning;
+        }
+        else {
+            return ProgressVariant.success;
+        }
+    };
+    const getVariantImpact = () => {
+        if (!impact)
+            return ProgressVariant.success;
+        if (impact.length > REMOTE_SESSION_FIELD_LENGTH_LIMIT / 2) {
+            return ProgressVariant.warning;
+        }
+        else {
+            return ProgressVariant.success;
+        }
+    };
     // To handle modal cancel and close
     const onCancel = () => {
         if (agreeLoading || isPostingComment)
@@ -115,23 +111,30 @@ export function RemoteSessionAgreementModal(props) {
         props.onClose && props.onClose();
     };
     const toggleRemoteSessionForm = () => setIsRemoteSessionForm(true);
+    const existingCaseDetails = useCaseSelector((state) => state.caseDetails, isEqual);
     // Function to ack remote session terms and post comment
     const submitRemoteSessionAgreement = (pdfId) => __awaiter(this, void 0, void 0, function* () {
-        const requestComment = t(`\n**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).**\n\nSubmitted a remote session request with following details:\n\n**Preferred Time and Expectations of remote session**\n${sessionExpectations}\n\n**Describe the impact to you or the business**\n${impact}\n\n${sessionLink ? `**Remote session link**\n${formatSessionLinks(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, {
+            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, props.caseNumber, {
                 remoteSessionTermsAcked: true,
                 waitingOnCallback: true,
-            });
+            }, false, { existingCaseDetails });
             setRemoteRiderFlag(caseDispatch, true);
             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: client,
                     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);
                 setAgreeLoading(false);
                 setHasSubmitted(true);
                 // ToastNotification.addSuccessMessage(
@@ -198,12 +201,14 @@ export function RemoteSessionAgreementModal(props) {
             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, maxLength: REMOTE_SESSION_FIELD_LENGTH_LIMIT, "aria-label": "Preferred Time and Expectations for Remote Session" }),
+            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: getVariantSessionExpectations(), title: ' ', className: `pf-v6-u-mt-md kt-progress-bar`, id: "summary-progress-bar" })),
         React.createElement("div", null,
             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, maxLength: REMOTE_SESSION_FIELD_LENGTH_LIMIT, "aria-label": "Describe the impact to you or the business" }),
+            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: getVariantImpact(), title: ' ', className: `pf-v6-u-mt-md kt-progress-bar`, id: "summary-progress-bar" })),
         React.createElement("div", null,
             React.createElement("label", { className: "pf-v6-u-mt-md" },
                 React.createElement(Trans, null, "Remote session link (optional)")),

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

@@ -0,0 +1,4 @@
+export declare const REMOTE_SESSION_FIELD_LENGTH_LIMIT = 2000;
+export declare const getLocaleNameFromLocalCode: (localeCode: string) => string;
+export declare const formatSessionLinks: (sessionLink: string) => string;
+//# sourceMappingURL=remoteSessionUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"remoteSessionUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/RequestRemoteSession/remoteSessionUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iCAAiC,OAAO,CAAC;AAEtD,eAAO,MAAM,0BAA0B,GAAI,YAAY,MAAM,KAAG,MAa/D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,aAAa,MAAM,KAAG,MAOxD,CAAC"}

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

@@ -0,0 +1,23 @@
+export const REMOTE_SESSION_FIELD_LENGTH_LIMIT = 2000;
+export 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 const formatSessionLinks = (sessionLink) => {
+    const links = sessionLink
+        .split(/[;,| \n\r\t]+/)
+        .map((link) => link.trim())
+        .filter(Boolean);
+    return links.map((link) => `<a href="${link}">${link}</a>`).join('<br>');
+};

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.tsx"],"names":[],"mappings":"AASA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAgB/D,wBAAgB,sBAAsB,sBAoYrC"}
+{"version":3,"file":"CaseContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAuC/D,wBAAgB,sBAAsB,sBAgYrC"}

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { useApolloClient } from '@apollo/client/react';
 import { contacts } from '@cee-eng/hydrajs';
 import { InputGroupText, ValidatedOptions } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
@@ -14,6 +15,7 @@ import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { getPhoneObj, PhoneInput, ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
+import { GET_ACCOUNT_CONTACTS } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useState } from 'react';
@@ -22,21 +24,43 @@ import { PHONE_INSTRUCTION, PHONE_IS_NOT_VALID, PHONE_LINE_CANNOT_BE_EMPTY, PHON
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
 import { PHONE_LIMIT } from '../../../../reducers/CaseConstNTypes';
-import { setCaseState, updateCaseDetails } from '../../../../reducers/CaseReducer';
+import { setCaseState, updateCaseDetails, updateCaseDetailsGraphQL } from '../../../../reducers/CaseReducer';
 import { ContactPhoneNumberPopOver } from '../../../CaseInformation/ContactPhoneNumberPopOver';
 import { removeAllChars, trimAndReplacePlus } from '../../../shared/utils';
 import { PDFContext } from '../../PDFContainer';
+function fetchContactBySSO(apolloClient, accountNumber, ssoUsername) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const { data } = yield apolloClient.query({
+            query: GET_ACCOUNT_CONTACTS,
+            variables: {
+                accountNumber: { eq: accountNumber },
+                contactsWhere: { SSOUserName__c: { eq: ssoUsername } },
+                first: 1,
+            },
+            fetchPolicy: 'network-only',
+        });
+        const response = data;
+        const contactNode = (_j = (_h = (_g = (_f = (_e = (_d = (_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.redhat_support_uiapi) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.RedHatSupportAccount) === null || _c === void 0 ? void 0 : _c.edges) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.node) === null || _f === void 0 ? void 0 : _f.Contacts) === null || _g === void 0 ? void 0 : _g.edges) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.node;
+        return {
+            phone: (_l = (_k = contactNode === null || contactNode === void 0 ? void 0 : contactNode.Phone) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : '',
+        };
+    });
+}
 export function CaseContactPhoneNumber() {
     var _a;
-    const { phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', caseNumber, contactSSOName, suppliedPhoneNumberVerified, isCaseOwnerUpdating, hasLoggedInUserConfirmedPhoneNumber, isCasePhoneUpdating, } = useCaseSelector((state) => ({
+    const apolloClient = useApolloClient();
+    const { phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', caseNumber, contactSSOName, accountNumberRef, suppliedPhoneNumberVerified, isCaseOwnerUpdating, hasLoggedInUserConfirmedPhoneNumber, isCasePhoneUpdating, existingCaseDetails, } = useCaseSelector((state) => ({
         phoneCountryCode: state.caseDetails.phoneCountryCode || '',
         phoneAreaCodePrefixLineNumber: state.caseDetails.phoneAreaCodePrefixLineNumber || '',
         caseNumber: state.caseDetails.caseNumber,
         contactSSOName: state.caseDetails.contactSSOName,
+        accountNumberRef: state.caseDetails.accountNumberRef,
         suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
         isCaseOwnerUpdating: state.isCaseOwnerUpdating,
         hasLoggedInUserConfirmedPhoneNumber: state.hasLoggedInUserConfirmedPhoneNumber,
         isCasePhoneUpdating: state.isCasePhoneUpdating,
+        existingCaseDetails: state.caseDetails,
     }), isEqual);
     const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const canEditCase = useCanEditCase();
@@ -79,8 +103,10 @@ export function CaseContactPhoneNumber() {
         const phoneLine = (_a = getPhoneObj(localFullPhoneState)) === null || _a === void 0 ? void 0 : _a.phoneLine;
         const countryCode = (_b = getPhoneObj(localFullPhoneState)) === null || _b === void 0 ? void 0 : _b.countryCode;
         try {
-            // update case contact info
-            yield updateCaseDetails(caseDispatch, caseNumber, Object.assign(Object.assign({ phoneCountryCode: countryCode, phoneAreaCodePrefixLineNumber: phoneLine }, (contactSSOName === loggedInUser.data.ssoUsername && { suppliedPhoneNumberVerified: 'True' })), (!countryCode && !phoneLine && { clearPhoneNumber: true, suppliedPhoneNumberVerified: 'False' })));
+            yield updateCaseDetailsGraphQL(caseDispatch, apolloClient, caseNumber, {
+                phoneCountryCode: countryCode,
+                phoneAreaCodePrefixLineNumber: phoneLine,
+            }, false, { existingCaseDetails });
             setIsSavedClicked(false);
             setCaseState(caseDispatch, { isCasePhoneUpdating: false });
             ToastNotification.addSuccessMessage(t(`Phone number has been successfully updated`));
@@ -167,6 +193,10 @@ export function CaseContactPhoneNumber() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [suppliedPhoneNumberVerified]);
     useEffect(() => {
+        if (!isEmpty(phoneCountryCode) || !isEmpty(phoneAreaCodePrefixLineNumber)) {
+            setLocalFullPhoneState(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
+            return;
+        }
         if (isEmpty(contactSSOName)) {
             setLocalFullPhoneState('');
             return;
@@ -180,29 +210,17 @@ export function CaseContactPhoneNumber() {
             if (contactSSOName === loggedInUser.data.ssoUsername) {
                 try {
                     setIsFetchingSSO(true);
-                    const loggedInUserContact = yield (contacts === null || contacts === void 0 ? void 0 : contacts.getSFDCContactBySso(contactSSOName));
+                    const loggedInUserContact = yield fetchContactBySSO(apolloClient, accountNumberRef, contactSSOName);
                     setIsFetchingSSO(false);
-                    if (loggedInUserContact.supportPhoneAreaCodePrefixLineNumber) {
-                        // User has opened a case before and has phone and area code in her/his contact on SF
-                        _phoneAreaCodePrefixLineNumber = loggedInUserContact.supportPhoneAreaCodePrefixLineNumber;
-                        _phoneCountryCode = loggedInUserContact.supportPhoneCountryCode;
-                        _suppliedPhoneNumberVerified =
-                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
-                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
-                                ? hasLoggedInUserConfirmedPhoneNumber
-                                : 'False';
-                    }
-                    else {
-                        const phoneLine = getPhoneObj(loggedInUserContact.phone).phoneLine || '';
-                        const countryCode = getPhoneObj(loggedInUserContact.phone).countryCode;
-                        _phoneAreaCodePrefixLineNumber = phoneLine;
-                        _phoneCountryCode = countryCode;
-                        _suppliedPhoneNumberVerified =
-                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
-                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
-                                ? hasLoggedInUserConfirmedPhoneNumber
-                                : 'False';
-                    }
+                    const phoneLine = getPhoneObj(loggedInUserContact.phone).phoneLine || '';
+                    const countryCode = getPhoneObj(loggedInUserContact.phone).countryCode;
+                    _phoneAreaCodePrefixLineNumber = phoneLine;
+                    _phoneCountryCode = countryCode;
+                    _suppliedPhoneNumberVerified =
+                        isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
+                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                            ? hasLoggedInUserConfirmedPhoneNumber
+                            : 'False';
                 }
                 catch (_a) {
                     _phoneAreaCodePrefixLineNumber = '';
@@ -216,18 +234,11 @@ export function CaseContactPhoneNumber() {
                 // user is openning case for others (use is partner or red hatter)
                 try {
                     setIsFetchingSSO(true);
-                    const selectedContact = yield contacts.getSFDCContactBySso(contactSSOName);
+                    const selectedContact = yield fetchContactBySSO(apolloClient, accountNumberRef, contactSSOName);
                     setIsFetchingSSO(false);
-                    if (selectedContact.supportPhoneAreaCodePrefixLineNumber) {
-                        _phoneAreaCodePrefixLineNumber = selectedContact.supportPhoneAreaCodePrefixLineNumber;
-                        _phoneCountryCode = selectedContact.supportPhoneCountryCode;
-                        _suppliedPhoneNumberVerified = 'Deferred';
-                    }
-                    else {
-                        _phoneAreaCodePrefixLineNumber = getPhoneObj(selectedContact.phone).phoneLine || '';
-                        _phoneCountryCode = getPhoneObj(selectedContact.phone).countryCode || '';
-                        _suppliedPhoneNumberVerified = 'Deferred';
-                    }
+                    _phoneAreaCodePrefixLineNumber = getPhoneObj(selectedContact.phone).phoneLine || '';
+                    _phoneCountryCode = getPhoneObj(selectedContact.phone).countryCode || '';
+                    _suppliedPhoneNumberVerified = 'Deferred';
                 }
                 catch (e) {
                     _phoneAreaCodePrefixLineNumber = '';
@@ -252,14 +263,9 @@ export function CaseContactPhoneNumber() {
             setLocalFullPhoneState(checkingPlusInLocalFullPhone(_localFullPhone));
             setCaseState(caseDispatch, { isCasePhoneUpdating: false });
         });
-        if (isEmpty(phoneCountryCode) && isEmpty(phoneAreaCodePrefixLineNumber)) {
-            initContactPhoneNumber();
-        }
-        else {
-            setLocalFullPhoneState(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
-        }
+        initContactPhoneNumber();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [contactSSOName]);
+    }, [contactSSOName, phoneCountryCode, phoneAreaCodePrefixLineNumber]);
     return (React.createElement("div", { className: "form-group", style: { minWidth: '200px' } },
         React.createElement("h3", { className: `subheading subheading-sm ${isExportingPDF ? 'expand-input' : ''}` },
             React.createElement(Trans, null, "Case owner's phone number"),
@@ -275,7 +281,7 @@ export function CaseContactPhoneNumber() {
                         isCasePhoneUpdating, style: { display: isExportingPDF ? 'none' : '' } },
                     React.createElement(CheckIcon, null)),
                 React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: onClear, "data-tracking-id": "case-details-page-supplied-phone-cancel", style: { display: isExportingPDF ? 'none' : '' }, disabled: isCaseOwnerUpdating || isCasePhoneUpdating, "aria-label": "Clear" },
-                    React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: () => setIsEditting(true), "data-tracking-id": "case-details-page-supplied-phone-edit", style: { display: isExportingPDF ? 'none' : '' }, "aria-label": "Edit", disabled: isCaseOwnerUpdating || isCasePhoneUpdating },
+                    React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: () => setIsEditting(true), "data-tracking-id": "case-details-page-supplied-phone-edit", style: { display: isExportingPDF ? 'none' : '' }, "aria-label": "Edit", disabled: isCaseOwnerUpdating || isCasePhoneUpdating || canEditCase.isCaseNotEditable },
                 React.createElement(PencilAltIcon, null)))),
         !invalid &&
             (localFullPhone === null || localFullPhone === void 0 ? void 0 : localFullPhone.length) <= PHONE_LIMIT &&

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsManagement.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAkBvD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBAgE1D"}
+{"version":3,"file":"CaseDetailsManagement.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAqBvD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBAwF1D"}