@rh-support/troubleshoot 2.7.0 → 2.7.10

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

@@ -7,31 +7,30 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { escalations, publicApi } from '@cee-eng/hydrajs';
-import { Button, Form, FormGroup, FormHelperText, Grid, GridItem, HelperText, HelperTextItem, Modal, Popover, TextArea, TextInput, Title, ValidatedOptions, } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import { useApolloClient } from '@apollo/client/react';
+import { escalations } from '@cee-eng/hydrajs';
+import { Button, Form, FormGroup, FormHelperText, Grid, GridItem, HelperText, HelperTextItem, Modal, ModalBody, ModalFooter, ModalHeader, Popover, TextArea, TextInput, Title, ValidatedOptions, } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { AlertMessage, AlertType, LoadingIndicator, ToastNotification, useFetch } from '@rh-support/components';
-import { useGlobalStateContext } from '@rh-support/react-context';
+import { AlertMessage, AlertType, LoadingIndicator, SingleSelectDropdown, ToastNotification, useFetch, } from '@rh-support/components';
+import { fetchCaseDetails, useGlobalStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useCaseDispatch } from '../../../context/CaseContext';
-import { useCaseDetailsPageDispatchContext, useCaseDetailsPageStateContext, } from '../../../context/CaseDetailsPageContext';
-import { useCaseDiscussionTabDispatchContext, useCaseDiscussionTabStateContext, } from '../../../context/CaseDiscussionTabContext';
+import { useCaseDispatch, useCaseSelector } from '../../../context/CaseContext';
+import { useCaseDetailsPageDispatchContext } from '../../../context/CaseDetailsPageContext';
 import { CustomerGEOs } from '../../../enums/customerGEOs';
-import { ESCALATION_SUBJECT_LENGTH_LIMIT } from '../../../reducers/CaseConstNTypes';
+import { CREATE_RME_CASE_ESCALATION, } from '../../../graphql';
+import { GET_CASE_COMMENTS, useCreateCaseComment } from '../../../hooks/useCaseComments';
+import { ESCALATION_BUSINESS_IMPACT_LENGTH_LIMIT, ESCALATION_DESCRIPTION_LENGTH_LIMIT, ESCALATION_EXPECTATIONS_LENGTH_LIMIT, ESCALATION_SUBJECT_LENGTH_LIMIT, } from '../../../reducers/CaseConstNTypes';
 import { fetchCaseEscalations } from '../../../reducers/CaseDetailsPageReducer';
-import { updateDiscussionStateComments } from '../../../reducers/CaseDiscussionTabReducer';
-import { checkForCaseStatusToggleOnAttachOrComment, fetchCaseDetails } from '../../../reducers/CaseReducer';
+import { checkForCaseStatusToggleOnAttachOrComment, setCaseAccountNumber } from '../../../reducers/CaseReducer';
 const customerGEOKeys = Object.keys(CustomerGEOs);
+const ESCALATION_DESCRIPTION_EXPECTATIONS_SEPARATOR = '\n\nExpectations:\n';
 export function RequestEscalationModal(props) {
-    const { globalMetadataState: { loggedInUser, loggedInUserRights }, } = useGlobalStateContext();
+    const { globalMetadataState: { loggedInUserRights, loggedInUsersAccount }, } = useGlobalStateContext();
     const { t } = useTranslation();
-    const [showGeoDropdown, setGeoShowDropdown] = useState(false);
-    const onGeoDropdownToggle = (toggle) => setGeoShowDropdown(toggle);
-    const [showCategoryDropdown, setCategoryShowDropdown] = useState(false);
-    const onCategoryDropdownToggle = (toggle) => setCategoryShowDropdown(toggle);
+    const apolloClient = useApolloClient();
     const [categories, setCategories] = useState([]);
     const initialState = {
         subject: '',
@@ -43,39 +42,43 @@ export function RequestEscalationModal(props) {
     };
     const [formState, setFormState] = useState(initialState);
     const [hasLargeSubject, setHasLargeSubject] = useState(false);
+    const [hasLargeDescription, setHasLargeDescription] = useState(false);
+    const [hasLargeExpectations, setHasLargeExpectations] = useState(false);
+    const [hasLargeBusinessImpact, setHasLargeBusinessImpact] = useState(false);
     const [submitButtonIsClicked, setSubmitSaveButtonIsClicked] = useState(false);
+    const hasFormLengthErrors = hasLargeSubject || hasLargeDescription || hasLargeExpectations || hasLargeBusinessImpact;
     // checks if all the fields have values.
     const hasRequiredInfo = () => Object.keys(formState).reduce((accumulator, currentValue) => { var _a; return !accumulator ? accumulator : formState[currentValue].length > 0 && ((_a = formState[currentValue]) === null || _a === void 0 ? void 0 : _a.trim()); }, true);
-    const setFormStateValue = (key, value) => setFormState((pre) => (Object.assign(Object.assign({}, pre), { [key]: value })));
-    const createEscalationFetch = useFetch(escalations.createIceEscalation, { propgateErrors: true });
-    const { request: postCommentRequest, isFetching: isPostingComment } = useFetch(publicApi.kase.postComment, {
-        propgateErrors: true,
-    });
-    const { request: updateCaseRequest, isFetching: isUpdatingCase } = useFetch(publicApi.kase.updateCase);
+    const [isCreatingEscalation, setIsCreatingEscalation] = useState(false);
+    const { createComment, loading: isPostingComment } = useCreateCaseComment();
     const { request: getRmeCategories, isFetching: isCategoriesFetching } = useFetch(escalations.getEscalationCategories, { propgateErrors: true });
-    const { sort, allDiscussions, discussionFiltersListState } = useCaseDiscussionTabStateContext();
-    const dispatchDiscussion = useCaseDiscussionTabDispatchContext();
-    const { caseDetailsPageState: { caseFeedbacksHydra }, } = useCaseDetailsPageStateContext();
+    const client = useApolloClient();
     const caseDetailsPageDispatch = useCaseDetailsPageDispatchContext();
     const caseDispatch = useCaseDispatch();
+    const caseSalesforceId = useCaseSelector((state) => state.caseDetails.id, isEqual);
+    const existingCaseDetails = useCaseSelector((state) => state.caseDetails, isEqual);
     const [creationError, setCreationError] = useState(false);
     const onErrorClose = () => setCreationError(false);
-    const setGeoState = (event, selection) => {
-        setFormState(Object.assign(Object.assign({}, formState), { geo: selection }));
-        onGeoDropdownToggle(false);
+    const setGeoState = (selection) => {
+        setFormState(Object.assign(Object.assign({}, formState), { geo: selection.value }));
     };
-    const setCategoryState = (event, selection) => {
-        setFormState(Object.assign(Object.assign({}, formState), { rmeCategory: selection }));
-        onCategoryDropdownToggle(false);
+    const setCategoryState = (selection) => {
+        setFormState(Object.assign(Object.assign({}, formState), { rmeCategory: selection.value }));
     };
-    const submitEscalationComment = (escalationNum, comment) => __awaiter(this, void 0, void 0, function* () {
-        escalationNum &&
-            fetchCaseEscalations(caseDetailsPageDispatch, props.caseNumber, loggedInUserRights.data.getAccountNumber(), false);
-        yield postCommentRequest({ caseNumber: props.caseNumber, commentBody: comment, contentType: 'markdown' });
-        updateDiscussionStateComments(dispatchDiscussion, caseDispatch, props.caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
-        yield updateCaseRequest(props.caseNumber, { customerEscalation: true });
-        checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), props.caseStatus);
-        yield fetchCaseDetails(caseDispatch, props.caseNumber, loggedInUserRights.data, loggedInUser.data);
+    const submitEscalationComment = (escalationNum, comment, caseId) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        yield createComment({ caseId, body: comment, isPublic: true });
+        client.refetchQueries({ include: [GET_CASE_COMMENTS] });
+        // await updateCaseRequest(props.caseNumber, { customerEscalation: true });
+        yield checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), props.caseStatus, {
+            apolloClient,
+            caseNumber: props.caseNumber,
+            existingCaseDetails,
+        });
+        yield fetchCaseDetails((action) => caseDispatch(action), apolloClient, props.caseNumber, setCaseAccountNumber, Boolean((_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.secureSupport));
+        if (escalationNum && caseSalesforceId) {
+            yield fetchCaseEscalations(caseDetailsPageDispatch, caseSalesforceId, apolloClient, false, Boolean((_b = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _b === void 0 ? void 0 : _b.secureSupport), 'network-only');
+        }
         escalationNum &&
             ToastNotification.addSuccessMessage(t('Your escalation request has been successfully submitted.'));
     });
@@ -84,21 +87,59 @@ export function RequestEscalationModal(props) {
         setHasLargeSubject(isSubjectLarge);
         setFormState(Object.assign(Object.assign({}, formState), { subject }));
     };
+    const onDescriptionChange = (description) => {
+        setHasLargeDescription(description.length > ESCALATION_DESCRIPTION_LENGTH_LIMIT);
+        setFormState(Object.assign(Object.assign({}, formState), { description }));
+    };
+    const onExpectationsChange = (expectations) => {
+        setHasLargeExpectations(expectations.length > ESCALATION_EXPECTATIONS_LENGTH_LIMIT);
+        setFormState(Object.assign(Object.assign({}, formState), { expectations }));
+    };
+    const onBusinessImpactChange = (businessImpactDescription) => {
+        setHasLargeBusinessImpact(businessImpactDescription.length > ESCALATION_BUSINESS_IMPACT_LENGTH_LIMIT);
+        setFormState(Object.assign(Object.assign({}, formState), { businessImpactDescription }));
+    };
     const onCancel = () => {
-        if (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching)
+        if (isPostingComment || isCreatingEscalation)
             return;
         setSubmitSaveButtonIsClicked(false);
         setFormState(initialState);
         setHasLargeSubject(false);
+        setHasLargeDescription(false);
+        setHasLargeExpectations(false);
+        setHasLargeBusinessImpact(false);
         props.onClose();
     };
     const onSubmit = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c, _d;
         setSubmitSaveButtonIsClicked(true);
-        if (!hasRequiredInfo() || hasLargeSubject)
+        if (!hasRequiredInfo() || hasFormLengthErrors)
             return;
         try {
-            const res = yield createEscalationFetch.request(Object.assign(Object.assign({}, formState), { recordType: 'Active Customer Escalation', escalationSource: 'RME Escalation', status: 'New', accountNumber: loggedInUserRights.data.getAccountNumber(), caseNumber: props.caseNumber, requestor: `${loggedInUser.data.firstName} ${loggedInUser.data.lastName}`, requestorEmail: loggedInUser.data.email, requestorPhone: loggedInUser.data.phone, alreadyEscalated: false, severity: props.severity ? props.severity.charAt(0) : '3' }));
-            const fullComment = t('### Request Management Escalation:\n\n**Subject**\n{{subject}}\n\n**Category**\n{{rmeCategory}}\n\n**Description**\n{{description}}\n\n**Expectations**\n{{expectations}}\n\n**Business Impact**\n{{businessImpactDescription}}', {
+            setIsCreatingEscalation(true);
+            if (!caseSalesforceId)
+                throw new Error('Could not find parent case ID');
+            // GraphQL CaseCreate has no Expectations field; serialize into Description for the payload.
+            const serializedDescription = `${formState.description}${ESCALATION_DESCRIPTION_EXPECTATIONS_SEPARATOR}${formState.expectations}`;
+            const { data: escalationData } = yield apolloClient.mutate({
+                mutation: CREATE_RME_CASE_ESCALATION,
+                variables: {
+                    caseInput: {
+                        Subject: formState.subject,
+                        Description: serializedDescription,
+                        Status: 'In Progress',
+                        Origin: 'Portal RME',
+                        Priority: props.severity || '3 (Medium)',
+                        Type: 'RME',
+                        RecordTypeId: '012Ek00000JUtx5IAD',
+                        ParentId: caseSalesforceId,
+                        EscalationCategory__c: formState.rmeCategory,
+                        ImpactOnUserOrBusiness__c: formState.businessImpactDescription,
+                    },
+                },
+            });
+            const createdCaseNumber = (_d = (_c = (_b = (_a = escalationData === null || escalationData === void 0 ? void 0 : escalationData.redhat_support_uiapi) === null || _a === void 0 ? void 0 : _a.CaseCreate) === null || _b === void 0 ? void 0 : _b.RedHatSupportRecord) === null || _c === void 0 ? void 0 : _c.CaseNumber__c) === null || _d === void 0 ? void 0 : _d.value;
+            const fullComment = t('<h3>Request Management Escalation:</h3><p><strong>Subject</strong></p><p>{{subject}}</p><p><strong>Category</strong></p><p>{{rmeCategory}}</p><p><strong>Description</strong></p><p>{{description}}</p><p><strong>Expectations</strong></p><p>{{expectations}}</p><p><strong>Business Impact</strong></p><p>{{businessImpactDescription}}</p>', {
                 category: formState.rmeCategory,
                 subject: formState.subject,
                 description: formState.description,
@@ -107,7 +148,7 @@ export function RequestEscalationModal(props) {
                 rmeCategory: formState.rmeCategory,
             });
             try {
-                yield submitEscalationComment(res.name, fullComment);
+                yield submitEscalationComment(createdCaseNumber, fullComment, caseSalesforceId);
             }
             catch (e) {
                 // silently fails, escalation is created but adding comment fails
@@ -115,23 +156,17 @@ export function RequestEscalationModal(props) {
             props.onClose();
         }
         catch (error) {
-            //=> handle error
             setCreationError(true);
         }
+        finally {
+            setIsCreatingEscalation(false);
+        }
     });
-    const modalActions = [
-        React.createElement(Button, { key: "submit", variant: "primary", onClick: onSubmit, "data-tracking-id": "request-rme-submit", isDisabled: submitButtonIsClicked &&
-                (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, "aria-label": t('Cancel') }, t('Cancel')),
-    ];
-    const header = (React.createElement(Title, { className: "pf-v5-u-mb-0", id: "custom-header-label", headingLevel: "h1" },
+    const header = (React.createElement(Title, { className: "pf-v6-u-mb-0", 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", "aria-label": t('Learn more about escalation cases.') },
                 React.createElement(Trans, null, "Learn more about escalation cases."))) },
-            React.createElement(InfoCircleIcon, { className: "pf-v5-u-ml-sm" }))));
+            React.createElement(InfoCircleIcon, { className: "pf-v6-u-ml-sm" }))));
     // load rme categories as soon as user opens the modal
     useEffect(() => {
         if (!props.show || categories.length !== 0)
@@ -148,41 +183,83 @@ 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, "aria-label": t('Request an escalation') },
-        React.createElement("p", { className: "pf-v5-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-v5-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 },
-                    React.createElement(FormGroup, { isRequired: true, label: t('Category'), fieldId: "escalation-category" },
-                        React.createElement(Select, Object.assign({ "aria-label": t('Category'), id: "customer-category-select", selections: formState.rmeCategory, validated: submitButtonIsClicked && isEmpty(formState.rmeCategory)
+    const categoryOptions = categories.map((value) => ({
+        value: value,
+        label: value,
+    }));
+    // Create selected option object based on current selection
+    const selectedCategory = {
+        value: formState.rmeCategory,
+        label: formState.rmeCategory || t('Select an option that best fits'),
+    };
+    const geoOptions = customerGEOKeys.map((key) => ({
+        value: CustomerGEOs[key].value,
+        label: t(CustomerGEOs[key].label),
+    }));
+    // Create selected option object based on current selection
+    const findSelectedGeoLabel = () => {
+        const selectedKey = customerGEOKeys.find((key) => CustomerGEOs[key].value === formState.geo);
+        return selectedKey ? t(CustomerGEOs[selectedKey].label) : '';
+    };
+    const selectedGeo = {
+        value: formState.geo,
+        label: findSelectedGeoLabel() || t('Select a location'),
+    };
+    return (React.createElement(Modal, { id: "request-mgmt-escalation-modal", className: "request-escalation-modal", isOpen: props.show, onClose: onCancel, "aria-label": t('Request an escalation') },
+        React.createElement(ModalHeader, null, header),
+        React.createElement(ModalBody, null,
+            React.createElement("p", { className: "pf-v6-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-v6-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 },
+                        React.createElement(FormGroup, { isRequired: true, label: t('Category'), fieldId: "escalation-category" },
+                            React.createElement(SingleSelectDropdown, { id: "customer-category-select", ariaLabel: t('Category'), selected: selectedCategory, options: categoryOptions, isDisabled: false, isLoading: isCategoriesFetching, isInvalid: submitButtonIsClicked && isEmpty(formState.rmeCategory), placeholder: t('Select an option that best fits'), onSelect: (option) => setCategoryState(option), isScrollable: true }))),
+                    React.createElement(GridItem, { span: 6 },
+                        React.createElement(FormGroup, { isRequired: true, label: t('My region'), fieldId: "escalation-region" },
+                            React.createElement(SingleSelectDropdown, { ariaLabel: t('My region'), id: "customer-geo-select", selected: selectedGeo, options: geoOptions, isInvalid: submitButtonIsClicked && isEmpty(formState.geo), placeholder: t('Select a location'), onSelect: (option) => setGeoState(option) }))),
+                    React.createElement(FormGroup, { isRequired: true, label: t('Subject'), fieldId: "escalation-subject" },
+                        submitButtonIsClicked && hasLargeSubject && (React.createElement(FormHelperText, null,
+                            React.createElement(HelperText, null,
+                                React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Subject cannot be more than {{limit}} characters', {
+                                    limit: ESCALATION_SUBJECT_LENGTH_LIMIT,
+                                }))))),
+                        React.createElement(TextInput, { isRequired: true, validated: (submitButtonIsClicked && isEmpty(formState.subject)) || hasLargeSubject
+                                ? ValidatedOptions.error
+                                : ValidatedOptions.default, type: "text", placeholder: t('Enter a subject for your request'), id: "subject-input", name: "subject-input", value: formState.subject, onChange: (_event, subject) => onSubjectChange(subject), "aria-label": t('Subject') })),
+                    React.createElement(FormGroup, { isRequired: true, label: t('Description'), fieldId: "escalation-description" },
+                        submitButtonIsClicked && hasLargeDescription && (React.createElement(FormHelperText, null,
+                            React.createElement(HelperText, null,
+                                React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Description cannot be more than {{limit}} characters.', {
+                                    limit: ESCALATION_DESCRIPTION_LENGTH_LIMIT,
+                                }))))),
+                        React.createElement(TextArea, { value: formState.description, onChange: (_event, value) => onDescriptionChange(value), isRequired: true, validated: (submitButtonIsClicked && isEmpty(formState.description)) || hasLargeDescription
+                                ? ValidatedOptions.error
+                                : ValidatedOptions.default, "aria-label": t('Description'), id: "description-textarea", placeholder: t('Provide a detailed comment for us to best assist you'), resizeOrientation: "vertical" })),
+                    React.createElement(FormGroup, { isRequired: true, label: t('Expectations'), fieldId: "escalation-expectations" },
+                        submitButtonIsClicked && hasLargeExpectations && (React.createElement(FormHelperText, null,
+                            React.createElement(HelperText, null,
+                                React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Expectations cannot be more than {{limit}} characters.', {
+                                    limit: ESCALATION_EXPECTATIONS_LENGTH_LIMIT,
+                                }))))),
+                        React.createElement(TextArea, { onChange: (_event, value) => onExpectationsChange(value), isRequired: true, validated: (submitButtonIsClicked && isEmpty(formState.expectations)) || hasLargeExpectations
                                 ? ValidatedOptions.error
-                                : ValidatedOptions.default, "aria-invalid": submitButtonIsClicked && isEmpty(formState.rmeCategory), onSelect: setCategoryState, isOpen: showCategoryDropdown, placeholderText: t('Select an option that best fits'), onToggle: (_event, toggle) => onCategoryDropdownToggle(toggle) }, (isCategoriesFetching && { loadingVariant: 'spinner' })), categories.map((value, index) => (React.createElement(SelectOption, { key: index, value: value }, value)))))),
-                React.createElement(GridItem, { span: 6 },
-                    React.createElement(FormGroup, { isRequired: true, label: t('My region'), fieldId: "escalation-region" },
-                        React.createElement(Select, { "aria-label": t('My region'), id: "customer-geo-select", selections: formState.geo, onSelect: setGeoState, isOpen: showGeoDropdown, validated: submitButtonIsClicked && isEmpty(formState.geo)
+                                : ValidatedOptions.default, placeholder: t('What do you expect to happen with this escalation?'), id: "expectations-input", value: formState.expectations, "aria-label": t('Expectations'), resizeOrientation: "vertical" })),
+                    React.createElement(FormGroup, { isRequired: true, label: t('Business impact'), fieldId: "escalation-business-impact" },
+                        submitButtonIsClicked && hasLargeBusinessImpact && (React.createElement(FormHelperText, null,
+                            React.createElement(HelperText, null,
+                                React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Business impact cannot be more than {{limit}} characters.', {
+                                    limit: ESCALATION_BUSINESS_IMPACT_LENGTH_LIMIT,
+                                }))))),
+                        React.createElement(TextArea, { onChange: (_event, value) => onBusinessImpactChange(value), isRequired: true, validated: (submitButtonIsClicked && isEmpty(formState.businessImpactDescription)) ||
+                                hasLargeBusinessImpact
                                 ? ValidatedOptions.error
-                                : ValidatedOptions.default, placeholderText: t('Select a location'), onToggle: (_event, toggle) => onGeoDropdownToggle(toggle), "aria-invalid": submitButtonIsClicked && isEmpty(formState.geo) }, customerGEOKeys.map((key, index) => (React.createElement(SelectOption, { key: index, value: CustomerGEOs[key].value }, t(CustomerGEOs[key].label))))))),
-                React.createElement(FormGroup, { isRequired: true, label: t('Subject'), fieldId: "escalation-subject" },
-                    submitButtonIsClicked && hasLargeSubject && (React.createElement(FormHelperText, null,
-                        React.createElement(HelperText, null,
-                            React.createElement(HelperTextItem, { variant: ValidatedOptions.error, hasIcon: true }, t('Subject cannot be more than {{limit}} characters', {
-                                limit: ESCALATION_SUBJECT_LENGTH_LIMIT,
-                            }))))),
-                    React.createElement(TextInput, { isRequired: true, validated: (submitButtonIsClicked && isEmpty(formState.subject)) || hasLargeSubject
-                            ? ValidatedOptions.error
-                            : ValidatedOptions.default, type: "text", placeholder: t('Enter a subject for your request'), id: "subject-input", name: "subject-input", value: formState.subject, onChange: (_event, subject) => onSubjectChange(subject), "aria-label": t('Subject') })),
-                React.createElement(FormGroup, { isRequired: true, label: t('Description'), fieldId: "escalation-description" },
-                    React.createElement(TextArea, { value: formState.description, onChange: (e, value) => setFormStateValue('description', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.description)
-                            ? ValidatedOptions.error
-                            : ValidatedOptions.default, "aria-label": t('Description'), id: "description-textarea", placeholder: t('Provide a detailed comment for us to best assist you'), resizeOrientation: "vertical" })),
-                React.createElement(FormGroup, { isRequired: true, label: t('Expectations'), fieldId: "escalation-expectations" },
-                    React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('expectations', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.expectations)
-                            ? ValidatedOptions.error
-                            : ValidatedOptions.default, placeholder: t('What do you expect to happen with this escalation?'), id: "expectations-input", value: formState.expectations, "aria-label": t('Expectations'), resizeOrientation: "vertical" })),
-                React.createElement(FormGroup, { isRequired: true, label: t('Business impact'), fieldId: "escalation-business-impact" },
-                    React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('businessImpactDescription', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.businessImpactDescription)
-                            ? ValidatedOptions.error
-                            : ValidatedOptions.default, placeholder: t('Does your business impact change with this escalation? Please describe how it changed.'), id: "business-impact-input", value: formState.businessImpactDescription, "aria-label": t('Business impact'), resizeOrientation: "vertical" }))))));
+                                : ValidatedOptions.default, placeholder: t('Does your business impact change with this escalation? Please describe how it changed.'), id: "business-impact-input", value: formState.businessImpactDescription, "aria-label": t('Business impact'), resizeOrientation: "vertical" }))))),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { key: "submit", variant: "primary", onClick: onSubmit, "data-tracking-id": "request-rme-submit", isDisabled: submitButtonIsClicked && (isPostingComment || isCreatingEscalation || !hasRequiredInfo()), "aria-label": t('Submit') },
+                (isPostingComment || isCreatingEscalation) && 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: isCreatingEscalation || isPostingComment, "aria-label": t('Cancel') }, t('Cancel')))));
 }

package/lib/esm/components/CaseEditView/ArchivedCaseBanner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ArchivedCaseBannerProps {
+    caseStatus?: string;
+}
+export declare function ArchivedCaseBanner({ caseStatus }: ArchivedCaseBannerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ArchivedCaseBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchivedCaseBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/ArchivedCaseBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,uBAAuB;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,wBAAgB,kBAAkB,CAAC,EAAE,UAAU,EAAE,EAAE,uBAAuB,qBAUzE"}

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

@@ -0,0 +1,12 @@
+import { Alert, AlertVariant } from '@patternfly/react-core';
+import { isCaseArchivedStatus } from '@rh-support/utils';
+import React from 'react';
+import { Trans } from 'react-i18next';
+const ARCHIVED_CASE_BODY = 'This case is archived and locked for editing.';
+export function ArchivedCaseBanner({ caseStatus }) {
+    if (!isCaseArchivedStatus(caseStatus)) {
+        return null;
+    }
+    return (React.createElement(Alert, { className: "pf-v6-u-mb-md", isInline: true, variant: AlertVariant.info, title: React.createElement(Trans, null, "Archived case") },
+        React.createElement(Trans, null, ARCHIVED_CASE_BODY)));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"Case.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/Case.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAS,mBAAmB,EAAiD,MAAM,kBAAkB,CAAC;AAkB7G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,qBA6LzC"}
+{"version":3,"file":"Case.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/Case.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAS,mBAAmB,EAAiD,MAAM,kBAAkB,CAAC;AAoB7G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,qBAgRzC"}

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

@@ -1,5 +1,15 @@
+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 { useApolloClient } from '@apollo/client/react';
 import { CoverSpinner, ErrorBoundary, OverviewContentLoader, ToastNotification, useDocumentTitle, usePrevious, } from '@rh-support/components';
-import { GlobalMetadataStateContext, HostnameAwarenessModal } from '@rh-support/react-context';
+import { CaseStatusProvider, fetchCaseDetails, GlobalMetadataStateContext, HostnameAwarenessModal, } from '@rh-support/react-context';
 import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import { getUrlParsedParams, isValidCaseNumber } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
@@ -9,8 +19,13 @@ import { useTranslation } from 'react-i18next';
 import { Route, Switch, useLocation, useParams, useRouteMatch } from 'react-router-dom';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { useCaseDetailsPageDispatchContext } from '../../context/CaseDetailsPageContext';
-import { fetchAttachments, fetchCaseEscalations, fetchExternalTrackers, fetchFeedbacks, } from '../../reducers/CaseDetailsPageReducer';
-import { fetchCaseDetails, setCaseAccountNumber } from '../../reducers/CaseReducer';
+import { CaseReducerConstants } from '../../reducers/CaseConstNTypes';
+import { fetchAttachments, fetchCaseEscalations,
+// fetchExternalTrackers,
+// fetchFeedbacks,
+ } from '../../reducers/CaseDetailsPageReducer';
+import { setCaseAccountNumber } from '../../reducers/CaseReducer';
+import { ArchivedCaseBanner } from './ArchivedCaseBanner';
 import { CaseDetailsAside } from './CaseDetailsAside';
 import { CaseDetailsErrorMessage } from './CaseDetailsErrorMessage';
 import CaseDetailsModals from './CaseDetailsModals';
@@ -18,24 +33,36 @@ import { CaseDetailsTabs } from './CaseDetailsTabs';
 import CaseOverview from './CaseOverview';
 import { PDFContext } from './PDFContainer';
 export default function Case(props) {
-    const { globalMetadataState: { loggedInUserRights, loggedInUsersAccount, loggedInUser }, } = useContext(GlobalMetadataStateContext);
+    var _a;
+    const { globalMetadataState: { loggedInUserRights, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const caseDetailsPageDispatch = useCaseDetailsPageDispatchContext();
+    const apolloClient = useApolloClient();
+    const includeSecureSupportCases = Boolean((_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.secureSupport);
     const { t } = useTranslation();
     // The `path` lets us build <Route> paths that are
     // relative to the parent route, while the `url` lets
-    // us build relative links.
+    //us build relative links.
     const { path, url } = useRouteMatch();
     const { caseNumber } = useParams();
     const queryParams = getUrlParsedParams(useLocation().search);
     const ability = useContext(AbilityContext);
     const caseDetailsTabsRef = useRef(null);
+    const currentCaseRef = useRef();
     const canSeeFeedbackButtons = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_FEEDBACK_BUTTONS);
     const canReadCase = ability.can(resourceActions.READ, resources.CASE_DETAILS);
-    const canSeeExternalTracker = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_EXTERNAL_TRACKER);
+    const canManageCase = ability.can(resourceActions.UPDATE, resources.CASE_DETAILS);
+    // TODO: Re-enable after GraphQL migration of external trackers
+    // const canSeeExternalTracker = ability.can(
+    //     resourceActions.PATCH,
+    //     resources.CASE_DETAILS,
+    //     CaseDetailsFields.CASE_DETAILS_EXTERNAL_TRACKER
+    // );
+    // TODO: Re-enable after GraphQL migration of attachments
     const canSeeAttachments = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_SEE_ATTACHMENTS);
     const canSeeRMEs = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_RMES);
-    const { product, isFetchingCaseDetails, isFetchingCaseDetailsError, caseDetailsError, selectedAccountDetails } = useCaseSelector((state) => ({
+    const { product, status, isFetchingCaseDetails, isFetchingCaseDetailsError, caseDetailsError, selectedAccountDetails, } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
+        status: state.caseDetails.status,
         isFetchingCaseDetails: state.isFetchingCaseDetails,
         isFetchingCaseDetailsError: state.isFetchingCaseDetailsError,
         caseDetailsError: state.caseDetailsError,
@@ -67,6 +94,7 @@ export default function Case(props) {
     useEffect(() => {
         if (!isEmpty(loggedInUsersAccount.data) &&
             !isEmpty(selectedAccountDetails.data) &&
+            selectedAccountDetails.data.accountNumber &&
             loggedInUserRights.data.isAccountSameAsLoggedInAccount(selectedAccountDetails.data.accountNumber) &&
             !isEqual(loggedInUsersAccount.data, selectedAccountDetails.data)) {
             setCaseAccountNumber(caseDispatch, loggedInUsersAccount.data.accountNumber, true, loggedInUsersAccount.data);
@@ -80,19 +108,55 @@ export default function Case(props) {
             props.routeProps.history.replace('/case/list');
             return;
         }
-        if (caseNumber) {
-            fetchCaseDetails(caseDispatch, caseNumber, loggedInUserRights.data, loggedInUser.data);
-            canSeeRMEs &&
-                fetchCaseEscalations(caseDetailsPageDispatch, caseNumber, loggedInUserRights.data.getAccountNumber());
-            // fetch data in advance
-            canSeeAttachments &&
-                fetchAttachments(caseDetailsPageDispatch, caseNumber, loggedInUsersAccount.data.secureSupport);
-            canSeeExternalTracker && fetchExternalTrackers(caseDetailsPageDispatch, caseNumber);
-            checkRemoteSessionFlag();
-        }
-        if (canSeeFeedbackButtons && caseNumber) {
-            // fetch data in advance
-            fetchFeedbacks(caseDetailsPageDispatch, caseNumber);
+        const targetCaseNumber = caseNumber;
+        caseDispatch({ type: CaseReducerConstants.resetCaseState });
+        // Update reference after reset
+        currentCaseRef.current = targetCaseNumber;
+        const safeFetchCaseDetails = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                // Check that we're still on the intended case before fetching
+                if (currentCaseRef.current !== targetCaseNumber)
+                    return;
+                const safeDispatch = (action) => {
+                    // Only dispatch if we're still working with the target case number
+                    if (currentCaseRef.current === targetCaseNumber) {
+                        caseDispatch(action);
+                    }
+                };
+                const caseDetails = yield fetchCaseDetails(safeDispatch, apolloClient, targetCaseNumber, setCaseAccountNumber, includeSecureSupportCases);
+                if (currentCaseRef.current !== targetCaseNumber)
+                    return;
+                const caseSalesforceId = typeof (caseDetails === null || caseDetails === void 0 ? void 0 : caseDetails.id) === 'string' ? caseDetails.id : undefined;
+                if (canSeeRMEs && caseSalesforceId) {
+                    fetchCaseEscalations((action) => currentCaseRef.current === targetCaseNumber && caseDetailsPageDispatch(action), caseSalesforceId, apolloClient, true, includeSecureSupportCases);
+                }
+                if (canSeeAttachments) {
+                    fetchAttachments((action) => currentCaseRef.current === targetCaseNumber && caseDetailsPageDispatch(action), targetCaseNumber, apolloClient, caseSalesforceId, includeSecureSupportCases);
+                }
+                // TODO: Re-enable after GraphQL migration of external trackers
+                // if (canSeeExternalTracker) {
+                //     fetchExternalTrackers(
+                //         (action) => currentCaseRef.current === targetCaseNumber && caseDetailsPageDispatch(action),
+                //         targetCaseNumber
+                //     );
+                // }
+                // TODO: Re-enable after GraphQL migration of feedback
+                // if (canSeeFeedbackButtons) {
+                //     fetchFeedbacks(
+                //         (action) => currentCaseRef.current === targetCaseNumber && caseDetailsPageDispatch(action),
+                //         targetCaseNumber
+                //     );
+                // }
+                if (currentCaseRef.current === targetCaseNumber) {
+                    checkRemoteSessionFlag();
+                }
+            }
+            catch (error) {
+                console.error('Error fetching case details:', error);
+            }
+        });
+        if (canManageCase) {
+            safeFetchCaseDetails();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
@@ -106,22 +170,24 @@ export default function Case(props) {
     ]);
     return (React.createElement(React.Fragment, null,
         isExportingPDF && React.createElement(CoverSpinner, null),
-        React.createElement("div", { id: "rh-support-case" },
-            React.createElement("div", { className: "support-grid-case-details support-case" }, isFetchingCaseDetails && !isFetchingCaseDetailsError && isEmpty(product) ? (React.createElement(OverviewContentLoader, null)) : (React.createElement(React.Fragment, null,
-                React.createElement("article", { className: "grid-main" },
-                    React.createElement("section", { className: "grid-main-section" },
-                        (isFetchingCaseDetailsError || !canReadCase) && (React.createElement(CaseDetailsErrorMessage, { isError: isFetchingCaseDetailsError, errorDetails: caseDetailsError, canReadCase: canReadCase, caseNumber: caseNumber, isInlineError: true })),
-                        canReadCase &&
-                            (!isFetchingCaseDetails || !isEmpty(product)) &&
-                            !isFetchingCaseDetailsError && (React.createElement(React.Fragment, null,
-                            React.createElement(ErrorBoundary, { errorMsgInfo: {
-                                    message: t('There was an error loading cases. Please try refreshing the page.'),
-                                } },
-                                React.createElement(CaseOverview, { caseNumber: caseNumber, tabsRef: caseDetailsTabsRef })),
-                            React.createElement(Switch, null,
-                                React.createElement(Route, { path: `${path}/:activeTab?` },
-                                    React.createElement(CaseDetailsTabs, { basePath: url, caseNumber: caseNumber, routeProps: props.routeProps, tabdRef: caseDetailsTabsRef }))))))),
-                React.createElement(CaseDetailsAside, { caseNumber: caseNumber }),
-                React.createElement(CaseDetailsModals, { caseNumber: caseNumber, isSecureSupport: loggedInUsersAccount.data.secureSupport, loggedInUserRights: loggedInUserRights }))))),
+        React.createElement(CaseStatusProvider, { caseStatus: status },
+            React.createElement("div", { id: "rh-support-case" },
+                React.createElement("div", { className: "support-grid-case-details support-case" }, isFetchingCaseDetails && !isFetchingCaseDetailsError ? (React.createElement(OverviewContentLoader, null)) : (React.createElement(React.Fragment, null,
+                    React.createElement("article", { className: "grid-main" },
+                        React.createElement("section", { className: "grid-main-section" },
+                            (isFetchingCaseDetailsError || !canReadCase || !canManageCase) && (React.createElement(CaseDetailsErrorMessage, { isError: isFetchingCaseDetailsError, errorDetails: caseDetailsError, canReadCase: canReadCase, canManageCase: canManageCase, caseNumber: caseNumber, isInlineError: true })),
+                            canReadCase &&
+                                (!isFetchingCaseDetails || !isEmpty(product)) &&
+                                !isFetchingCaseDetailsError && (React.createElement(React.Fragment, null,
+                                React.createElement(ArchivedCaseBanner, { caseStatus: status }),
+                                React.createElement(ErrorBoundary, { errorMsgInfo: {
+                                        message: t('There was an error loading cases. Please try refreshing the page.'),
+                                    } },
+                                    React.createElement(CaseOverview, { caseNumber: caseNumber, tabsRef: caseDetailsTabsRef })),
+                                React.createElement(Switch, null,
+                                    React.createElement(Route, { path: `${path}/:activeTab?` },
+                                        React.createElement(CaseDetailsTabs, { basePath: url, caseNumber: caseNumber, routeProps: props.routeProps, tabdRef: caseDetailsTabsRef }))))))),
+                    !isFetchingCaseDetailsError && canReadCase && canManageCase && (React.createElement(CaseDetailsAside, { caseNumber: caseNumber })),
+                    React.createElement(CaseDetailsModals, { caseNumber: caseNumber, isSecureSupport: loggedInUsersAccount.data.secureSupport, loggedInUserRights: loggedInUserRights })))))),
         React.createElement(HostnameAwarenessModal, null)));
 }

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":"AAkBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAYvE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAqX7C"}
+{"version":3,"file":"CaseDetailsAside.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsAside.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAYhF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBA8Y7C"}