npm - @rh-support/troubleshoot - Versions diffs - 2.6.90 → 2.6.93 - Mend

@rh-support/troubleshoot 2.6.90 → 2.6.93

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/lib/esm/components/AccountInfo/OwnerSelector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OwnerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/OwnerSelector.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAiBxE,UAAU,MAAM;CAAG;AAMnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,~~qBAqSnC~~;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
1	+ {"version":3,"file":"OwnerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/OwnerSelector.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAiBxE,UAAU,MAAM;CAAG;AAMnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBAsSnC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/lib/esm/components/AccountInfo/OwnerSelector.js CHANGED Viewed

@@ -120,6 +120,7 @@ function OwnerSelector(props) {
                 firstName: newOwner.firstName,
                 lastName: newOwner.lastName,
                 fullNameCustom: newOwner.fullNameCustom,
+                manageSupportCases: newOwner.manageSupportCases,
             }, '', abortSignal, abortSignal, false, '', true, true, caseNumber);
             setLocalOwnerChange(true);
             updateNotifyUsersList(newOwner);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"~~AAyCA~~,OAAO,KAA8B,MAAM,OAAO,CAAC;~~AAuBnD~~,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,~~qBAy+BnD~~"}
1	+ {"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkBnD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBA6WnD"}

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

@@ -8,8 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { escalations, publicApi } from '@cee-eng/hydrajs';
-import { Button, Form, FormGroup, FormHelperText, Grid, GridItem, HelperText, HelperTextItem, Modal, ModalBody, ModalHeader, ModalVariant, Radio, TextArea, TextInput, TimePicker, Title, ValidatedOptions, Wizard, WizardNav, WizardNavItem, WizardStep, } from '@patternfly/react-core';
-import { AlertMessage, AlertType, COUNTRY_DATA, getPhoneObj, PhoneInput, SingleSelectDropdown, ToastNotification, useFetch, } from '@rh-support/components';
+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, SingleSelectDropdown, ToastNotification, useFetch, } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
@@ -18,14 +19,12 @@ import { useCaseDispatch } from '../../../context/CaseContext';
 import { useCaseDetailsPageDispatchContext, useCaseDetailsPageStateContext, } from '../../../context/CaseDetailsPageContext';
 import { useCaseDiscussionTabDispatchContext, useCaseDiscussionTabStateContext, } from '../../../context/CaseDiscussionTabContext';
 import { CustomerGEOs } from '../../../enums/customerGEOs';
-import { ESCALATION_SUBJECT_LENGTH_LIMIT, PHONE_LIMIT, TIMEZONE_OPTIONS, } from '../../../reducers/CaseConstNTypes';
+import { ESCALATION_SUBJECT_LENGTH_LIMIT } from '../../../reducers/CaseConstNTypes';
 import { fetchCaseEscalations } from '../../../reducers/CaseDetailsPageReducer';
 import { updateDiscussionStateComments } from '../../../reducers/CaseDiscussionTabReducer';
 import { checkForCaseStatusToggleOnAttachOrComment, fetchCaseDetails } from '../../../reducers/CaseReducer';
-import { removeAllChars, trimAndReplacePlus } from '../../shared/utils';
 const customerGEOKeys = Object.keys(CustomerGEOs);
 export function RequestEscalationModal(props) {
-    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     const { globalMetadataState: { loggedInUser, loggedInUserRights }, } = useGlobalStateContext();
     const { t } = useTranslation();
     const [categories, setCategories] = useState([]);
@@ -36,101 +35,12 @@ export function RequestEscalationModal(props) {
         geo: '',
         businessImpactDescription: '',
         rmeCategory: '',
-        contactName: '',
-        contactTitle: '',
-        contactPreference: '',
-        countryCode: '',
-        phoneNumber: '',
-        timezone: '',
-        preferredTimeFrom: '',
-        preferredTimeTo: '',
     };
     const [formState, setFormState] = useState(initialState);
     const [hasLargeSubject, setHasLargeSubject] = useState(false);
     const [submitButtonIsClicked, setSubmitSaveButtonIsClicked] = useState(false);
-    const [isPhoneInvalid, setIsPhoneInvalid] = useState(false);
-    const isCountryCodeValid = (countryCode) => {
-        // Check if the country code exists in the valid country codes list
-        if (!countryCode)
-            return false;
-        const normalizedCode = trimAndReplacePlus(countryCode);
-        if (isEmpty(normalizedCode))
-            return false;
-        return COUNTRY_DATA.some((country) => country[3] === normalizedCode);
-    };
-    const isPhoneNumberInvalid = (phoneNumber, countryCode) => {
-        var _a;
-        // Check if country code is given but phone number is empty/only has country code
-        return (!isEmpty(phoneNumber) &&
-            isEmpty((_a = removeAllChars(phoneNumber || '')) === null || _a === void 0 ? void 0 : _a.replace(trimAndReplacePlus(countryCode || ''), '')));
-    };
-    const isPhoneLineEmpty = (phoneNumber, countryCode) => {
-        var _a;
-        // Check if both country code and phone line are empty
-        return (isEmpty(trimAndReplacePlus(countryCode || '')) &&
-            isEmpty((_a = (phoneNumber || '')) === null || _a === void 0 ? void 0 : _a.replace(countryCode || '', '')));
-    };
-    const isPhoneNumberValid = (phoneNumber, countryCode) => {
-        const trimmedPhone = (phoneNumber || '').trim();
-        const phoneObject = getPhoneObj(trimmedPhone);
-        const fullPhone = phoneObject.countryCode + ' ' + phoneObject.phoneLine;
-        // Check for various invalid states
-        if (fullPhone.length > PHONE_LIMIT)
-            return false;
-        if (isPhoneLineEmpty(phoneNumber, countryCode))
-            return false;
-        if (isPhoneNumberInvalid(phoneNumber, countryCode))
-            return false;
-        if (isEmpty(trimAndReplacePlus(countryCode || '')))
-            return false;
-        if (!isCountryCodeValid(countryCode))
-            return false;
-        if (trimAndReplacePlus(trimmedPhone) === trimAndReplacePlus(countryCode || ''))
-            return false;
-        if (trimmedPhone.length < 5)
-            return false;
-        return true;
-    };
-    // Function to check if "to" time is after "from" time
-    const isValidTimeRange = (fromTime, toTime) => {
-        if (!fromTime || !toTime)
-            return true; // Don't validate if either is empty
-        // Convert time strings to comparable numbers (HH:MM -> HHMM)
-        const fromMinutes = fromTime.split(':').map(Number);
-        const toMinutes = toTime.split(':').map(Number);
-        if (fromMinutes.length !== 2 || toMinutes.length !== 2)
-            return true;
-        const fromTotal = fromMinutes[0] * 60 + fromMinutes[1];
-        const toTotal = toMinutes[0] * 60 + toMinutes[1];
-        return toTotal > fromTotal;
-    };
     // checks if all the fields have values.
-    const hasRequiredInfo = () => {
-        const requiredFields = [
-            'subject',
-            'description',
-            'expectations',
-            'geo',
-            'businessImpactDescription',
-            'rmeCategory',
-            'contactName',
-            'contactTitle',
-            'contactPreference',
-        ];
-        if (formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') {
-            requiredFields.push('phoneNumber', 'timezone', 'preferredTimeFrom', 'preferredTimeTo');
-        }
-        const hasAllFields = requiredFields.every((field) => formState[field] && formState[field].toString().trim().length > 0);
-        if ((formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') &&
-            formState.preferredTimeFrom &&
-            formState.preferredTimeTo) {
-            return (hasAllFields &&
-                isValidTimeRange(formState.preferredTimeFrom, formState.preferredTimeTo) &&
-                !isPhoneInvalid &&
-                isPhoneNumberValid(formState.phoneNumber, formState.countryCode));
-        }
-        return hasAllFields;
-    };
+    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, {
@@ -173,7 +83,6 @@ export function RequestEscalationModal(props) {
         setSubmitSaveButtonIsClicked(false);
         setFormState(initialState);
         setHasLargeSubject(false);
-        setIsPhoneInvalid(false);
         props.onClose();
     };
     const onSubmit = () => __awaiter(this, void 0, void 0, function* () {
@@ -181,72 +90,14 @@ export function RequestEscalationModal(props) {
         if (!hasRequiredInfo() || hasLargeSubject)
             return;
         try {
-            let contactDetailsString = '\n\n--- Contact Details ---';
-            contactDetailsString += `\nName: ${formState.contactName}`;
-            contactDetailsString += `\nTitle: ${formState.contactTitle}`;
-            const contactPrefMap = {
-                'call-me': 'Call me',
-                'call-if-necessary': 'Call only if necessary',
-                'do-not-call': 'Do not call',
-            };
-            contactDetailsString += `\nContact Preference: ${formState.contactPreference
-                ? contactPrefMap[formState.contactPreference] || formState.contactPreference
-                : ''}`;
-            if (formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') {
-                contactDetailsString += `\nPhone Number: ${formState.phoneNumber}`;
-                contactDetailsString += `\nTimezone: ${formState.timezone}`;
-                contactDetailsString += `\nPreferred Time to Call: ${formState.preferredTimeFrom} to ${formState.preferredTimeTo}`;
-            }
-            const enhancedDescription = formState.description + contactDetailsString;
-            // Use contact phone if provided, otherwise use logged in user's phone
-            const requestorPhone = (formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') &&
-                formState.phoneNumber
-                ? formState.phoneNumber
-                : loggedInUser.data.phone;
-            const res = yield createEscalationFetch.request({
-                subject: formState.subject,
-                description: enhancedDescription,
-                expectations: formState.expectations,
-                geo: formState.geo,
-                businessImpactDescription: formState.businessImpactDescription,
-                rmeCategory: formState.rmeCategory,
-                recordType: 'Active Customer Escalation',
-                escalationSource: 'RME Escalation',
-                status: 'New',
-                accountNumber: loggedInUserRights.data.getAccountNumber(),
-                caseNumber: props.caseNumber,
-                requestor: formState.contactName || `${loggedInUser.data.firstName} ${loggedInUser.data.lastName}`,
-                requestorEmail: loggedInUser.data.email,
-                requestorPhone: requestorPhone,
-                alreadyEscalated: false,
-                severity: props.severity ? props.severity.charAt(0) : '3',
-            });
-            const formattedContactPreference = formState.contactPreference
-                ? contactPrefMap[formState.contactPreference] || formState.contactPreference
-                : '';
-            // Format time to 12-hour format
-            const formatTime = (time24) => {
-                if (!time24)
-                    return '';
-                const [hours, minutes] = time24.split(':');
-                const hour = parseInt(hours);
-                const ampm = hour >= 12 ? 'pm' : 'am';
-                const hour12 = hour % 12 || 12;
-                return `${hour12}:${minutes}${ampm}`;
-            };
-            const fullComment = t('### Request Management Escalation:\n\n**Name**\n{{contactName}}\n\n**Title**\n{{contactTitle}}\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}}\n\n**Contact preference**\n{{contactPreference}}{{phoneDetails}}\n\n', {
+            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}}', {
                 category: formState.rmeCategory,
                 subject: formState.subject,
                 description: formState.description,
                 expectations: formState.expectations,
                 businessImpactDescription: formState.businessImpactDescription,
                 rmeCategory: formState.rmeCategory,
-                contactName: formState.contactName || 'Not provided',
-                contactTitle: formState.contactTitle || 'Not provided',
-                contactPreference: formattedContactPreference || 'Not provided',
-                phoneDetails: formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary'
-                    ? `\n\n**Case owner's phone number**\n${formState.phoneNumber}\nNote: Phone number will be stored in case comments for escalation only – not used for marketing.\n\n**Timezone**\n${formState.timezone}\n\n**Best time to connect regarding escalation**\nFrom ${formatTime(formState.preferredTimeFrom || '')} to ${formatTime(formState.preferredTimeTo || '')}`
-                    : '',
             });
             try {
                 yield submitEscalationComment(res.name, fullComment);
@@ -254,12 +105,6 @@ export function RequestEscalationModal(props) {
             catch (e) {
                 // silently fails, escalation is created but adding comment fails
             }
-            // Reset form state before closing
-            setFormState(initialState);
-            setSubmitSaveButtonIsClicked(false);
-            setHasLargeSubject(false);
-            setIsPhoneInvalid(false);
-            setCreationError(false);
             props.onClose();
         }
         catch (error) {
@@ -267,6 +112,11 @@ export function RequestEscalationModal(props) {
             setCreationError(true);
         }
     });
+    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-v6-u-ml-sm" }))));
     // load rme categories as soon as user opens the modal
     useEffect(() => {
         if (!props.show || categories.length !== 0)
@@ -274,7 +124,7 @@ export function RequestEscalationModal(props) {
         const fetchCategories = () => __awaiter(this, void 0, void 0, function* () {
             try {
                 const categories = yield getRmeCategories();
-                setCategories(((categories === null || categories === void 0 ? void 0 : categories.items) || []));
+                setCategories((categories === null || categories === void 0 ? void 0 : categories.items) || []);
             }
             catch (e) {
                 console.log(e);
@@ -305,251 +155,46 @@ export function RequestEscalationModal(props) {
         value: formState.geo,
         label: findSelectedGeoLabel() || t('Select a location'),
     };
-    // Create custom footer function for wizard
-    const CustomFooter = (activeStep, goToNextStep, goToPrevStep) => {
-        const isLastStep = activeStep.id === 'contact-details';
-        const isFirstStep = activeStep.id === 'escalation-details';
-        const isLoading = isPostingComment || isUpdatingCase || createEscalationFetch.isFetching;
-        // Validate current step
-        const isCurrentStepValid = () => {
-            if (activeStep.id === 'escalation-details') {
-                return ((formState.rmeCategory || '').trim().length > 0 &&
-                    (formState.geo || '').trim().length > 0 &&
-                    (formState.subject || '').trim().length > 0 &&
-                    !hasLargeSubject &&
-                    (formState.description || '').trim().length > 0 &&
-                    (formState.expectations || '').trim().length > 0 &&
-                    (formState.businessImpactDescription || '').trim().length > 0);
-            }
-            else if (activeStep.id === 'contact-details') {
-                const baseValidation = (formState.contactName || '').trim().length > 0 &&
-                    (formState.contactTitle || '').trim().length > 0 &&
-                    (formState.contactPreference || '').trim().length > 0;
-                // Additional validation if call options are selected
-                if (formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') {
-                    return (baseValidation &&
-                        isPhoneNumberValid(formState.phoneNumber, formState.countryCode) &&
-                        !isPhoneInvalid &&
-                        (formState.preferredTimeFrom || '').trim().length > 0 &&
-                        (formState.preferredTimeTo || '').trim().length > 0 &&
-                        (formState.timezone || '').trim().length > 0);
-                }
-                return baseValidation;
-            }
-            return false;
-        };
-        const handleNext = () => {
-            setSubmitSaveButtonIsClicked(true);
-            if (isCurrentStepValid()) {
-                setSubmitSaveButtonIsClicked(false); // Reset validation state when moving to next step
-                goToNextStep({});
-            }
-        };
-        const handleSubmit = () => {
-            setSubmitSaveButtonIsClicked(true);
-            if (isCurrentStepValid()) {
-                onSubmit();
-            }
-        };
-        return (React.createElement("div", { className: "pf-v6-c-wizard__footer" },
-            !isFirstStep && (React.createElement(Button, { variant: "secondary", onClick: () => {
-                    setSubmitSaveButtonIsClicked(false);
-                    goToPrevStep({});
-                }, isDisabled: isLoading, "data-tracking-id": "request-rme-back" }, t('Back'))),
-            React.createElement(Button, { variant: "primary", onClick: isLastStep ? handleSubmit : handleNext, isDisabled: isLoading || (submitButtonIsClicked && !isCurrentStepValid()), isLoading: isLoading, "data-tracking-id": isLastStep ? 'request-rme-submit' : 'request-rme-next' }, isLastStep ? t('Submit') : t('Next')),
-            React.createElement(Button, { variant: "link", onClick: onCancel, isDisabled: isLoading, "data-tracking-id": "request-rme-cancel" }, t('Cancel'))));
-    };
-    const escalationDetailsStep = (React.createElement(WizardStep, { id: "escalation-details", name: t('Escalation details') },
-        React.createElement("div", { className: "wizard-step-content" },
-            React.createElement(Title, { headingLevel: "h2", size: "2xl", className: "pf-v6-u-mb-lg" }, t('Escalation details')),
-            React.createElement(Form, { "aria-label": t('Escalation details form'), className: "request-escalation-form" },
-                React.createElement(Grid, { hasGutter: true },
+    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 && !((_a = formState.rmeCategory) === null || _a === void 0 ? void 0 : _a.trim()), placeholder: t('Select an option that best fits'), onSelect: (option) => setCategoryState(option), isScrollable: true }))),
+                            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 && !((_b = formState.geo) === null || _b === void 0 ? void 0 : _b.trim()), placeholder: t('Select a location'), onSelect: (option) => setGeoState(option) }))),
-                    React.createElement(GridItem, { span: 12 },
-                        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 && !((_c = formState.subject) === null || _c === void 0 ? void 0 : _c.trim())) || 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(GridItem, { span: 12 },
-                        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 && !((_d = formState.description) === null || _d === void 0 ? void 0 : _d.trim())
-                                    ? 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(GridItem, { span: 12 },
-                        React.createElement(FormGroup, { isRequired: true, label: t('Expectations'), fieldId: "escalation-expectations" },
-                            React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('expectations', value), isRequired: true, validated: submitButtonIsClicked && !((_f = formState.expectations) === null || _f === void 0 ? void 0 : _f.trim())
-                                    ? 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(GridItem, { span: 12 },
-                        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 && !((_g = formState.businessImpactDescription) === null || _g === void 0 ? void 0 : _g.trim())
-                                    ? 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" }))))))));
-    // Check if first step is completed
-    const isFirstStepComplete = () => {
-        return ((formState.rmeCategory || '').trim().length > 0 &&
-            (formState.geo || '').trim().length > 0 &&
-            (formState.subject || '').trim().length > 0 &&
-            !hasLargeSubject &&
-            (formState.description || '').trim().length > 0 &&
-            (formState.expectations || '').trim().length > 0 &&
-            (formState.businessImpactDescription || '').trim().length > 0);
-    };
-    const customNav = (isExpanded, steps, activeStep, goToStepByIndex) => (React.createElement(WizardNav, { isExpanded: isExpanded }, steps.map((step, index) => {
-        // Disable the second step if first step is not complete
-        const isDisabled = step.id === 'contact-details' && !isFirstStepComplete();
-        return (React.createElement(WizardNavItem, { key: step.id, id: step.id, content: step.name, isCurrent: activeStep.id === step.id, isDisabled: isDisabled, stepIndex: step.index, onClick: () => !isDisabled && goToStepByIndex(step.index) }));
-    })));
-    const contactDetailsStep = (React.createElement(WizardStep, { id: "contact-details", name: t('Contact details') },
-        React.createElement("div", { className: "wizard-step-content" },
-            React.createElement(Title, { headingLevel: "h2", size: "2xl", className: "pf-v6-u-mb-lg" }, t('Contact details')),
-            React.createElement(Form, { "aria-label": t('Contact details form'), className: "request-escalation-form" },
-                React.createElement(Grid, { hasGutter: true },
-                    React.createElement(GridItem, { span: 6 },
-                        React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
-                                t('Name'),
-                                " "), isRequired: true, fieldId: "contact-name" },
-                            React.createElement(TextInput, { type: "text", validated: submitButtonIsClicked && !((_h = formState.contactName) === null || _h === void 0 ? void 0 : _h.trim())
-                                    ? ValidatedOptions.error
-                                    : ValidatedOptions.default, placeholder: t('Enter your name'), id: "contact-name", value: formState.contactName || '', onChange: (_e, value) => setFormState(Object.assign(Object.assign({}, formState), { contactName: value })), "aria-label": t('Contact name') }),
-                            submitButtonIsClicked && !((_j = formState.contactName) === null || _j === void 0 ? void 0 : _j.trim()) && (React.createElement(FormHelperText, null,
-                                React.createElement(HelperText, null,
-                                    React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Name is required'))))))),
-                    React.createElement(GridItem, { span: 6 },
-                        React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
-                                t('Title'),
-                                " "), isRequired: true, fieldId: "contact-title" },
-                            React.createElement(TextInput, { type: "text", validated: submitButtonIsClicked && !((_k = formState.contactTitle) === null || _k === void 0 ? void 0 : _k.trim())
-                                    ? ValidatedOptions.error
-                                    : ValidatedOptions.default, placeholder: t('Enter your title (e.g. System Admin, DevOps, Project Man..)'), id: "contact-title", value: formState.contactTitle || '', onChange: (_e, value) => setFormState(Object.assign(Object.assign({}, formState), { contactTitle: value })), "aria-label": t('Contact title') }),
-                            submitButtonIsClicked && !((_l = formState.contactTitle) === null || _l === void 0 ? void 0 : _l.trim()) && (React.createElement(FormHelperText, null,
-                                React.createElement(HelperText, null,
-                                    React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Title is required'))))))),
-                    React.createElement(GridItem, { span: 12 },
-                        React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
-                                t('Contact preference'),
-                                " "), isRequired: true, fieldId: "contact-preference", role: "radiogroup" },
-                            React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-flex-direction-row contact-preference-group" },
-                                React.createElement(Radio, { id: "call-me", name: "contact-preference", label: t('Call me'), isChecked: formState.contactPreference === 'call-me', onChange: () => setFormState(Object.assign(Object.assign({}, formState), { contactPreference: 'call-me' })), style: { marginRight: '24px' } }),
-                                React.createElement(Radio, { id: "call-if-necessary", name: "contact-preference", label: t('Call only if necessary'), isChecked: formState.contactPreference === 'call-if-necessary', onChange: () => setFormState(Object.assign(Object.assign({}, formState), { contactPreference: 'call-if-necessary' })), style: { marginRight: '8px' } }),
-                                React.createElement(Radio, { id: "do-not-call", name: "contact-preference", label: t('Do not call'), isChecked: formState.contactPreference === 'do-not-call', onChange: () => setFormState(Object.assign(Object.assign({}, formState), { contactPreference: 'do-not-call', phoneNumber: '', timezone: '', preferredTimeFrom: '', preferredTimeTo: '' })) })),
-                            submitButtonIsClicked && !formState.contactPreference && (React.createElement(FormHelperText, null,
-                                React.createElement(HelperText, null,
-                                    React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Contact preference is required'))))))),
-                    (formState.contactPreference === 'call-me' ||
-                        formState.contactPreference === 'call-if-necessary') && (React.createElement(React.Fragment, null,
-                        React.createElement(GridItem, { span: 12 },
-                            React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
-                                    t("Case owner's phone number"),
-                                    " "), isRequired: true, fieldId: "phone-number" },
-                                React.createElement(PhoneInput, { phoneValue: formState.phoneNumber || '', countryCode: ((_m = formState.countryCode) === null || _m === void 0 ? void 0 : _m.replace('+', '')) || '', onPhoneValueChange: (phone) => setFormState(Object.assign(Object.assign({}, formState), { phoneNumber: phone })), onCountryCodeChange: (code) => setFormState(Object.assign(Object.assign({}, formState), { countryCode: code })), validations: (submitButtonIsClicked &&
-                                        !isPhoneNumberValid(formState.phoneNumber, formState.countryCode)) ||
-                                        isPhoneInvalid ||
-                                        (submitButtonIsClicked &&
-                                            (getPhoneObj(formState.phoneNumber || '').countryCode +
-                                                ' ' +
-                                                getPhoneObj(formState.phoneNumber || '').phoneLine).length > PHONE_LIMIT)
-                                        ? 'error'
-                                        : 'default', isDisabled: false, invalid: isPhoneInvalid, setInvalid: setIsPhoneInvalid }),
-                                !isPhoneInvalid &&
-                                    !((getPhoneObj(formState.phoneNumber || '').countryCode +
-                                        ' ' +
-                                        getPhoneObj(formState.phoneNumber || '').phoneLine).length > PHONE_LIMIT) &&
-                                    !(submitButtonIsClicked &&
-                                        !isPhoneNumberValid(formState.phoneNumber, formState.countryCode)) && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: "default" }, t('Note: A current phone/mobile number with the country code helps us support you better. Phone number will be stored in case comments for escalation only – not used for marketing.'))))),
-                                isPhoneInvalid && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Phone number can only have digits.'))))),
-                                submitButtonIsClicked &&
-                                    (getPhoneObj(formState.phoneNumber || '').countryCode +
-                                        ' ' +
-                                        getPhoneObj(formState.phoneNumber || '').phoneLine).length > PHONE_LIMIT && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Phone number cannot be more than {{limit}} digits.', {
-                                            limit: PHONE_LIMIT,
-                                        }))))),
-                                submitButtonIsClicked &&
-                                    isPhoneLineEmpty(formState.phoneNumber, formState.countryCode) && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Phone number is required'))))),
-                                submitButtonIsClicked &&
-                                    isPhoneNumberInvalid(formState.phoneNumber, formState.countryCode) &&
-                                    !isPhoneInvalid && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Phone number cannot be empty'))))),
-                                submitButtonIsClicked &&
-                                    !isEmpty(trimAndReplacePlus(formState.countryCode || '')) &&
-                                    !isCountryCodeValid(formState.countryCode) && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Country code is invalid'))))),
-                                submitButtonIsClicked &&
-                                    isEmpty(trimAndReplacePlus(formState.countryCode || '')) &&
-                                    !isPhoneLineEmpty(formState.phoneNumber, formState.countryCode) &&
-                                    !isPhoneInvalid && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Phone number is not valid'))))))),
-                        React.createElement(GridItem, { span: 12 },
-                            React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
-                                    t('Timezone'),
-                                    " "), isRequired: true, fieldId: "timezone" },
-                                React.createElement("div", { className: "timezone" },
-                                    React.createElement(SingleSelectDropdown, { selected: TIMEZONE_OPTIONS.find((opt) => opt.value === formState.timezone) || {
-                                            value: '',
-                                            label: 'Select timezone',
-                                        }, options: TIMEZONE_OPTIONS, onSelect: (option) => setFormState(Object.assign(Object.assign({}, formState), { timezone: option.value })), placeholder: t('Select timezone') })),
-                                submitButtonIsClicked && !((_o = formState.timezone) === null || _o === void 0 ? void 0 : _o.trim()) && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Timezone is required'))))))),
-                        React.createElement(GridItem, { span: 12 },
-                            React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
-                                    t('Best time to connect regarding escalation'),
-                                    " "), isRequired: true, fieldId: "preferred-time" },
-                                React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-flex-nowrap time-fields-container" },
-                                    React.createElement("span", { className: "time-label pf-v6-u-mr-sm" }, t('from')),
-                                    React.createElement(TimePicker, { time: formState.preferredTimeFrom || '', onChange: (_event, time) => setFormState(Object.assign(Object.assign({}, formState), { preferredTimeFrom: time })), placeholder: "HH:MM", id: "preferred-time-from", "aria-label": t('Preferred time from'), className: "time-input", is24Hour: true, width: "150px", menuAppendTo: "parent", inputProps: {
-                                            validated: submitButtonIsClicked && !((_p = formState.preferredTimeFrom) === null || _p === void 0 ? void 0 : _p.trim())
-                                                ? ValidatedOptions.error
-                                                : ValidatedOptions.default,
-                                        } }),
-                                    React.createElement("span", { className: "time-label pf-v6-u-mx-md" }, t('to')),
-                                    React.createElement(TimePicker, { time: formState.preferredTimeTo || '', onChange: (_event, time) => setFormState(Object.assign(Object.assign({}, formState), { preferredTimeTo: time })), placeholder: "HH:MM", id: "preferred-time-to", "aria-label": t('Preferred time to'), className: "time-input", is24Hour: true, width: "150px", menuAppendTo: "parent", inputProps: {
-                                            validated: submitButtonIsClicked &&
-                                                (!((_q = formState.preferredTimeTo) === null || _q === void 0 ? void 0 : _q.trim()) ||
-                                                    !isValidTimeRange(formState.preferredTimeFrom || '', formState.preferredTimeTo || ''))
-                                                ? ValidatedOptions.error
-                                                : ValidatedOptions.default,
-                                        } })),
-                                submitButtonIsClicked &&
-                                    (!((_r = formState.preferredTimeFrom) === null || _r === void 0 ? void 0 : _r.trim()) ||
-                                        !((_s = formState.preferredTimeTo) === null || _s === void 0 ? void 0 : _s.trim())) && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Preferred time is required'))))),
-                                submitButtonIsClicked &&
-                                    ((_t = formState.preferredTimeFrom) === null || _t === void 0 ? void 0 : _t.trim()) &&
-                                    ((_u = formState.preferredTimeTo) === null || _u === void 0 ? void 0 : _u.trim()) &&
-                                    !isValidTimeRange(formState.preferredTimeFrom, formState.preferredTimeTo) && (React.createElement(FormHelperText, null,
-                                    React.createElement(HelperText, null,
-                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('End time must be after start time'))))))))))))));
-    return (React.createElement(Modal, { id: "request-mgmt-escalation-modal", className: "request-escalation-modal pf-m-width-auto", isOpen: props.show, onClose: onCancel, "aria-label": t('Request an escalation'), variant: ModalVariant.large },
-        React.createElement("div", { className: "modal-wizard-header" },
-            React.createElement(ModalHeader, { title: t('Request an escalation') }),
-            React.createElement("a", { href: "/support/escalation", target: "_blank", rel: "noopener noreferrer", className: "pf-v6-u-font-size-sm pf-v6-u-color-200" },
-                React.createElement(Trans, null, "Learn more about escalation cases."))),
-        React.createElement(ModalBody, null,
-            creationError && (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(Wizard, { navAriaLabel: t('Escalation request steps'), footer: CustomFooter, nav: customNav },
-                escalationDetailsStep,
-                contactDetailsStep))));
+                            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" },
+                        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" }))))),
+        React.createElement(ModalFooter, null,
+            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')))));
 }

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

	@@ -1 +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;AAmB7G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,~~qBA4OzC~~"}
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;AAmB7G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,qBAgPzC"}

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

@@ -42,6 +42,7 @@ export default function Case(props) {
     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 canManageCase = ability.can(resourceActions.UPDATE, resources.CASE_DETAILS);
     const canSeeExternalTracker = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_EXTERNAL_TRACKER);
     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);
@@ -146,7 +147,7 @@ export default function Case(props) {
             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 })),
+                        (isFetchingCaseDetailsError || !canReadCase) && (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,
@@ -157,7 +158,7 @@ export default function Case(props) {
                             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 }),
+                !isFetchingCaseDetailsError && canReadCase && canManageCase && (React.createElement(CaseDetailsAside, { caseNumber: caseNumber })),
                 React.createElement(CaseDetailsModals, { caseNumber: caseNumber, isSecureSupport: loggedInUsersAccount.data.secureSupport, loggedInUserRights: loggedInUserRights }))))),
         React.createElement(HostnameAwarenessModal, null)));
 }