@rh-support/troubleshoot 2.2.120 → 2.2.122

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

@@ -1 +1 @@
-{"version":3,"file":"OwnerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/OwnerSelector.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAkB/D,UAAU,MAAM;CAAG;AAEnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBA2VnC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"OwnerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/OwnerSelector.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAkB/D,UAAU,MAAM;CAAG;AAEnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBAqYnC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -28,7 +28,7 @@ import { getChangedValueTooltip } from '../shared/utils';
 function OwnerSelector(props) {
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const { accountNumber, caseNumber, selectedNotificationContacts, selectedOwner, selectedCaseGroupUsers, isCaseOwnerUpdating, caseDetailes, } = useCaseSelector((state) => ({
+    const { accountNumber, caseNumber, selectedNotificationContacts, selectedOwner, selectedCaseGroupUsers, isCaseOwnerUpdating, caseDetailes, hasLoggedInUserConfirmedPhoneNumber, } = useCaseSelector((state) => ({
         accountNumber: state.caseDetails.accountNumberRef,
         caseNumber: state.caseDetails.caseNumber,
         selectedNotificationContacts: state.selectedNotificationContacts,
@@ -36,6 +36,7 @@ function OwnerSelector(props) {
         selectedCaseGroupUsers: state.selectedCaseGroupUsers,
         isCaseOwnerUpdating: state.isCaseOwnerUpdating,
         caseDetailes: state.caseDetails,
+        hasLoggedInUserConfirmedPhoneNumber: state.hasLoggedInUserConfirmedPhoneNumber,
     }), isEqual);
     const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
     const caseDispatch = useCaseDispatch();
@@ -59,7 +60,10 @@ function OwnerSelector(props) {
                 setCaseDetails(caseDispatch, {
                     phoneAreaCodePrefixLineNumber: loggedInUser.data.supportPhoneAreaCodePrefixLineNumber,
                     phoneCountryCode: loggedInUser.data.supportPhoneCountryCode,
-                    suppliedPhoneNumberVerified: 'True',
+                    suppliedPhoneNumberVerified: isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') || //hasLoggedInUserConfirmedPhoneNumber: global verification phone state for contactSSOName === loggedInUser.data.ssoUsername
+                        isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                        ? hasLoggedInUserConfirmedPhoneNumber
+                        : 'False',
                 });
             }
             else {
@@ -68,7 +72,10 @@ function OwnerSelector(props) {
                 setCaseDetails(caseDispatch, {
                     phoneAreaCodePrefixLineNumber: phoneLine,
                     phoneCountryCode: countryCode,
-                    suppliedPhoneNumberVerified: phoneLine && countryCode ? 'True' : 'False',
+                    suppliedPhoneNumberVerified: isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
+                        isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                        ? hasLoggedInUserConfirmedPhoneNumber
+                        : 'False',
                 });
             }
         }
@@ -101,7 +108,7 @@ function OwnerSelector(props) {
     });
     const updatePhone = (phoneSetting) => __awaiter(this, void 0, void 0, function* () {
         yield updateCaseDetails(caseDispatch, caseNumber, phoneSetting);
-        setCaseDetails(caseDispatch, Object.assign(Object.assign({}, caseDetailes), phoneSetting));
+        setCaseDetails(caseDispatch, Object.assign({}, phoneSetting));
     });
     // set owner on updating a case
     const updateContactPhoneNumber = (sso) => __awaiter(this, void 0, void 0, function* () {
@@ -109,18 +116,25 @@ function OwnerSelector(props) {
             // logged in user and case owner are the same
             if (sso === loggedInUser.data.ssoUsername) {
                 try {
-                    if (loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) {
+                    const loggedInUserContact = yield (contacts === null || contacts === void 0 ? void 0 : contacts.getSFDCContactBySso(sso)); // to get updated loggedIn user contact details
+                    if (loggedInUserContact.supportPhoneAreaCodePrefixLineNumber) {
                         yield updatePhone({
-                            phoneAreaCodePrefixLineNumber: loggedInUser.data.supportPhoneAreaCodePrefixLineNumber,
-                            phoneCountryCode: loggedInUser.data.supportPhoneCountryCode,
-                            suppliedPhoneNumberVerified: 'True',
+                            phoneAreaCodePrefixLineNumber: loggedInUserContact.supportPhoneAreaCodePrefixLineNumber || '',
+                            phoneCountryCode: loggedInUserContact.supportPhoneCountryCode || '',
+                            suppliedPhoneNumberVerified: isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') || //hasLoggedInUserConfirmedPhoneNumber: global verification phone state for contactSSOName === loggedInUser.data.ssoUsername
+                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                                ? hasLoggedInUserConfirmedPhoneNumber
+                                : 'False',
                         });
                     }
                     else {
                         yield updatePhone({
-                            phoneAreaCodePrefixLineNumber: getPhoneObj(loggedInUser.data.phone).phoneLine || '',
-                            phoneCountryCode: getPhoneObj(loggedInUser.data.phone).countryCode || '',
-                            suppliedPhoneNumberVerified: 'False',
+                            phoneAreaCodePrefixLineNumber: getPhoneObj(loggedInUserContact.phone).phoneLine || '',
+                            phoneCountryCode: getPhoneObj(loggedInUserContact.phone).countryCode || '',
+                            suppliedPhoneNumberVerified: isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') || //hasLoggedInUserConfirmedPhoneNumber: global verification phone state for contactSSOName === loggedInUser.data.ssoUsername
+                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                                ? hasLoggedInUserConfirmedPhoneNumber
+                                : 'False',
                         });
                     }
                 }
@@ -212,6 +226,9 @@ function OwnerSelector(props) {
         setCaseState(caseDispatch, { isCaseOwnerUpdating: true });
         try {
             yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
+            setCaseDetails(caseDispatch, {
+                contactSSOName: newOwner.ssoUsername,
+            });
             const abortSignal = new AbortController().signal;
             yield setCaseOwner(caseDispatch, {
                 ssoUsername: newOwner.ssoUsername,
@@ -221,9 +238,9 @@ function OwnerSelector(props) {
             }, '', abortSignal);
             setLocalOwnerChange(true);
             updateNotifyUsersList(newOwner);
+            ToastNotification.addSuccessMessage(t(`Owner has been successfully updated`));
             yield updateContactPhoneNumber(newOwner.ssoUsername);
             setCaseState(caseDispatch, { isCaseOwnerUpdating: false });
-            ToastNotification.addSuccessMessage(t(`Owner has been successfully updated`));
         }
         catch (e) {
             setCaseState(caseDispatch, { isCaseOwnerUpdating: false });
@@ -269,6 +286,26 @@ function OwnerSelector(props) {
             users.length > 0 && setUsersWithGroupAccess(sortHydraContacts(users));
         }
     }, [selectedCaseGroupUsers, caseNumber]);
+    // to populate the phone number with the logged in user data
+    useEffect(() => {
+        if (caseDetailes.contactSSOName === loggedInUser.data.ssoUsername) {
+            if (loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) {
+                setCaseDetails(caseDispatch, {
+                    phoneAreaCodePrefixLineNumber: loggedInUser.data.supportPhoneAreaCodePrefixLineNumber,
+                    phoneCountryCode: loggedInUser.data.supportPhoneCountryCode,
+                });
+            }
+            else {
+                const phoneLine = getPhoneObj(loggedInUser.data.phone).phoneLine || '';
+                const countryCode = getPhoneObj(loggedInUser.data.phone).countryCode;
+                setCaseDetails(caseDispatch, {
+                    phoneAreaCodePrefixLineNumber: phoneLine,
+                    phoneCountryCode: countryCode,
+                });
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const showUsersWithSelectedGroupAccess = caseNumber &&
         (selectedCaseGroupUsers.isFetching ||
             (!selectedCaseGroupUsers.isFetching && (selectedCaseGroupUsers.data || []).length > 0));

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

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsTabs.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAwBlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAqN5C"}
+{"version":3,"file":"CaseDetailsTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsTabs.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAyBlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAiO5C"}

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

@@ -11,6 +11,7 @@ import { useCaseSelector } from '../../context/CaseContext';
 import { useCaseDetailsPageStateContext } from '../../context/CaseDetailsPageContext';
 import { PDFContext } from './PDFContainer';
 import CaseDetailsManagement from './Tabs/CaseDetails/CaseDetailsManagement';
+import CaseHistory from './Tabs/CaseHistory/CaseHistory';
 const RelatedTasks = React.lazy(() => import(/* webpackChunkName: 'CaseBugzilla' */ './Tabs/RelatedTasks/RelatedTasks'));
 const CaseActionPlan = React.lazy(() => import(/* webpackChunkName: 'CaseActionPlan' */ './Tabs/CaseActionPlan/CaseActionPlan'));
 const CasePrivateNotes = React.lazy(() => import(/* webpackChunkName: 'CasePrivateNotes' */ './Tabs/CasePrivateNotes/CasePrivateNotes'));
@@ -45,6 +46,7 @@ export function CaseDetailsTabs(props) {
     const actionPlanTabRef = useRef(null);
     const escalationTabRef = useRef(null);
     const relatedTasksRef = useRef(null);
+    const caseHistoryTabRef = useRef(null);
     const tabsToRender = [];
     const handleTabClick = (event, tabIndex) => {
         setActiveTabKey(tabIndex);
@@ -102,6 +104,15 @@ export function CaseDetailsTabs(props) {
             routePath: 'escalation',
             component: (React.createElement(RMEEscalationList, { escalations: caseEscalations.data, caseNumber: caseNumber, caseStatus: status, accountNumber: loggedInUserRights.data.getAccountNumber(), isInternal: loggedInUserRights.data.isInternal() })),
         });
+    false && //Don't add this component to 'tabsToRender' for now, pending QA release
+        tabsToRender.push({
+            'data-tracking-id': 'case-history-tab',
+            title: CaseDetailsTabsEnum.HISTORY,
+            key: 'history',
+            routePath: 'history',
+            ref: caseHistoryTabRef,
+            component: React.createElement(CaseHistory, { caseNumber: caseNumber }),
+        });
     const getActiveTabKey = () => {
         if (!activeTab)
             return activeTabKey;

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

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

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

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { contacts } from '@cee-eng/hydrajs';
 import { InputGroupText, ValidatedOptions } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
+import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { getPhoneObj, PhoneInput, ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
@@ -21,7 +22,7 @@ import { PHONE_INSTRUCTION, PHONE_IS_NOT_VALID, PHONE_LINE_CANNOT_BE_EMPTY, PHON
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
 import { PHONE_LIMIT } from '../../../../reducers/CaseConstNTypes';
-import { updateCaseDetails } from '../../../../reducers/CaseReducer';
+import { setCaseState, updateCaseDetails } from '../../../../reducers/CaseReducer';
 import { ContactPhoneNumberPopOver } from '../../../CaseInformation/ContactPhoneNumberPopOver';
 import { trimAndReplacePlus } from '../../../shared/utils';
 import { PDFContext } from '../../PDFContainer';
@@ -38,6 +39,7 @@ export function CaseContactPhoneNumber() {
     const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const canEditCase = useCanEditCase();
     const [isCasePhoneUpdating, setCasePhoneUpdating] = useState(false);
+    const [isEditting, setIsEditting] = useState(false);
     const [localFullPhoneState, setLocalFullPhoneState] = useState(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
     const [localCountryCodeState, setLocalCountryCodeState] = useState(phoneCountryCode);
     const [invalid, setInvalid] = useState(false);
@@ -58,6 +60,12 @@ export function CaseContactPhoneNumber() {
             return;
         setLocalCountryCodeState(countryCode);
     };
+    const regex = /[()\s-]/g; // to have only digits in phone
+    // To check if country code is given but phone number empty
+    const isPhoneNumberInvalid = !isEmpty(localFullPhoneState) &&
+        isEmpty(localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.replace(regex, '').replace(localCountryCodeState, ''));
+    const isPhoneLineEmpty = isEmpty(trimAndReplacePlus(localCountryCodeState)) &&
+        isEmpty(localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.replace(localCountryCodeState, ''));
     const onSave = () => __awaiter(this, void 0, void 0, function* () {
         setIsSavedClicked(true);
         if (isPhoneValueCannotBeSaved)
@@ -73,6 +81,7 @@ export function CaseContactPhoneNumber() {
             setIsSavedClicked(false);
             setCasePhoneUpdating(false);
             ToastNotification.addSuccessMessage(t(`Phone number has been successfully updated`));
+            setIsEditting(false);
             try {
                 // update logged-in user contact info
                 if (contactSSOName === loggedInUser.data.ssoUsername && !isEmpty(phoneLine) && !isEmpty(countryCode)) {
@@ -94,47 +103,59 @@ export function CaseContactPhoneNumber() {
     const onClear = () => __awaiter(this, void 0, void 0, function* () {
         setLocalFullPhoneState('');
         setLocalCountryCodeState('');
-        setCasePhoneUpdating(true);
-        try {
-            yield updateCaseDetails(caseDispatch, caseNumber, {
-                phoneCountryCode: '',
-                phoneAreaCodePrefixLineNumber: '',
-                clearPhoneNumber: true,
-                suppliedPhoneNumberVerified: 'False',
-            });
-            setCasePhoneUpdating(false);
-            ToastNotification.addSuccessMessage(t(`Phone number has been successfully updated`));
-        }
-        catch (e) {
-            setCasePhoneUpdating(false);
-            caseUpdateError.showError(e, t(`Phone number failed to update`));
-        }
     });
     const maxLengthErrorMessage = t('Phone number cannot be more than {{limit}} digits.', {
         limit: PHONE_LIMIT,
     });
-    const isPhoneNeedsReview = contactSSOName === loggedInUser.data.ssoUsername && suppliedPhoneNumberVerified === 'Deferred';
-    // To check if country code is given but phone number empty
-    const isPhoneLineEmpty = !isEmpty(localFullPhoneState) && isEmpty(localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.replace(localCountryCodeState, ''));
-    const isPhoneNumberInvalid = isEmpty(localCountryCodeState) && !isEmpty(localFullPhoneState);
+    const isPhoneNeedsReview = !isEmpty(contactSSOName) &&
+        contactSSOName === loggedInUser.data.ssoUsername &&
+        suppliedPhoneNumberVerified === 'Deferred' &&
+        !isCaseOwnerUpdating &&
+        !isCasePhoneUpdating &&
+        !isEmpty(localFullPhoneState);
     const isPhoneNumberValid = (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT
         ? ValidatedOptions.error
         : isPhoneNeedsReview
             ? ValidatedOptions.warning
-            : isSaveClicked && (isPhoneLineEmpty || isPhoneNumberInvalid)
+            : isSaveClicked &&
+                (isPhoneLineEmpty || isPhoneNumberInvalid || isEmpty(trimAndReplacePlus(localCountryCodeState)))
                 ? ValidatedOptions.error
                 : invalid
                     ? ValidatedOptions.error
                     : ValidatedOptions.default;
-    const isPhoneValueCannotBeSaved = isPhoneLineEmpty || isPhoneNumberInvalid || localFullPhoneState.trim() === localCountryCodeState.trim();
-    // should be removed when old phone field is removed by CCM team
+    const isPhoneValueCannotBeSaved = isPhoneLineEmpty ||
+        isPhoneNumberInvalid ||
+        isEmpty(trimAndReplacePlus(localCountryCodeState)) ||
+        trimAndReplacePlus(localFullPhoneState) === trimAndReplacePlus(localCountryCodeState);
     useEffect(() => {
+        if (isEqual(localFullPhoneState.trim(), '+')) {
+            setLocalFullPhoneState('');
+        }
+        if (isEqual(localCountryCodeState.trim(), '+')) {
+            setLocalCountryCodeState('');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [localFullPhoneState]);
+    const updatePhone = () => __awaiter(this, void 0, void 0, function* () {
         var _a, _b;
         if (isEmpty(phoneCountryCode) && isEmpty(phoneAreaCodePrefixLineNumber) && !isEmpty(phone)) {
             const oldPhoneline = ((_a = getPhoneObj(phone)) === null || _a === void 0 ? void 0 : _a.phoneLine) || '';
             const oldCountryCode = ((_b = getPhoneObj(phone)) === null || _b === void 0 ? void 0 : _b.countryCode) || '';
             if (!isEmpty(oldPhoneline.trim()) && !isEmpty(trimAndReplacePlus(oldCountryCode))) {
                 setLocalFullPhoneState(oldCountryCode + ' ' + oldPhoneline);
+                setLocalCountryCodeState(oldCountryCode);
+                setCasePhoneUpdating(true);
+                try {
+                    yield updateCaseDetails(caseDispatch, caseNumber, {
+                        phoneCountryCode: oldCountryCode,
+                        phoneAreaCodePrefixLineNumber: oldPhoneline,
+                    });
+                    setCasePhoneUpdating(false);
+                }
+                catch (e) {
+                    setCasePhoneUpdating(false);
+                    caseUpdateError.showError(e, t(`Phone number failed to update`));
+                }
             }
             else {
                 setIsShowOldPhone(true);
@@ -144,20 +165,40 @@ export function CaseContactPhoneNumber() {
             setLocalFullPhoneState((phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber).trim());
             setIsShowOldPhone(false);
         }
+    });
+    // should be removed when old phone field is removed by CCM team
+    useEffect(() => {
+        updatePhone();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [phone, phoneAreaCodePrefixLineNumber, phoneCountryCode]);
+    useEffect(() => {
+        if (contactSSOName === loggedInUser.data.ssoUsername) {
+            // edge case: when loggedInUser === contactSSOName while opening a case confirms or deffers the phone
+            // we need to save the verification state globallly so that we don't show the phone review banner again
+            // to the user where he changes it to another owner and then again assigns himself as the case owner
+            setCaseState(caseDispatch, {
+                hasLoggedInUserConfirmedPhoneNumber: suppliedPhoneNumberVerified,
+            });
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [suppliedPhoneNumberVerified]);
     return (React.createElement("div", { className: "form-group pf-v5-u-pb-md", style: { minWidth: '200px' } },
         React.createElement("h3", { className: `subheading subheading-sm ${isExportingPDF ? 'expand-input' : ''}` },
             React.createElement(Trans, null, "Case owner's phone number"),
+            React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true }, "*"),
             !isExportingPDF ? ContactPhoneNumberPopOver() : ''),
         React.createElement(InputGroupText, null,
-            React.createElement(PhoneInput, { phoneValue: localFullPhoneState, onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: isPhoneNumberValid, isDisabled: isCasePhoneUpdating || isCaseOwnerUpdating, isLoading: isCasePhoneUpdating, "data-tracking-id": "case-details-page-supplied-phone", invalid: invalid, setInvalid: setInvalid }),
-            React.createElement("button", { className: "btn btn-app btn-link pf-v5-u-ml-sm", type: "button", "data-tracking-id": "case-details-page-supplied-phone-save", onClick: () => onSave(), "aria-label": "Save", disabled: (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT ||
-                    localFullPhoneState === phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber ||
-                    (isSaveClicked && isPhoneValueCannotBeSaved), style: { display: isExportingPDF ? 'none' : '' } },
-                React.createElement(CheckIcon, null)),
-            React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: onClear, "data-tracking-id": "case-details-page-supplied-phone-cancel", style: { display: isExportingPDF ? 'none' : '' }, disabled: isEmpty(localFullPhoneState), "aria-label": "Clear" },
-                React.createElement(TimesIcon, { color: "#6A6E73" }))),
+            React.createElement(PhoneInput, { phoneValue: localFullPhoneState, onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: isPhoneNumberValid, isDisabled: isCasePhoneUpdating || isCaseOwnerUpdating || !isEditting, isLoading: isCasePhoneUpdating || isCaseOwnerUpdating, "data-tracking-id": "case-details-page-supplied-phone", invalid: invalid, setInvalid: setInvalid }),
+            isEditting ? (React.createElement(React.Fragment, null,
+                React.createElement("button", { className: "btn btn-app btn-link pf-v5-u-ml-sm", type: "button", "data-tracking-id": "case-details-page-supplied-phone-save", onClick: () => onSave(), "aria-label": "Save", disabled: (isSaveClicked && isPhoneValueCannotBeSaved) ||
+                        (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT ||
+                        localFullPhoneState === phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber ||
+                        isCaseOwnerUpdating ||
+                        isCasePhoneUpdating, style: { display: isExportingPDF ? 'none' : '' } },
+                    React.createElement(CheckIcon, null)),
+                React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: onClear, "data-tracking-id": "case-details-page-supplied-phone-cancel", style: { display: isExportingPDF ? 'none' : '' }, disabled: isEmpty(localFullPhoneState) || isCaseOwnerUpdating || isCasePhoneUpdating, "aria-label": "Clear" },
+                    React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: () => setIsEditting(true), "data-tracking-id": "case-details-page-supplied-phone-edit", style: { display: isExportingPDF ? 'none' : '' }, "aria-label": "Edit" },
+                React.createElement(PencilAltIcon, null)))),
         !invalid &&
             (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) < PHONE_LIMIT &&
             !(isSaveClicked && isPhoneValueCannotBeSaved) &&
@@ -166,9 +207,11 @@ export function CaseContactPhoneNumber() {
         invalid && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null, PHONE_NO_CHAR_ERROR))),
         (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT && (React.createElement("p", { className: "form-instructions form-invalid" }, maxLengthErrorMessage)),
-        isSaveClicked && (isPhoneLineEmpty || localFullPhoneState.trim() === localCountryCodeState.trim()) && (React.createElement("p", { className: "form-instructions form-invalid" },
-            React.createElement(Trans, null, PHONE_LINE_CANNOT_BE_EMPTY))),
+        isSaveClicked && isPhoneLineEmpty && (React.createElement("p", { className: "form-instructions form-invalid" },
+            React.createElement(Trans, null, PHONE_INSTRUCTION))),
         isSaveClicked && isPhoneNumberInvalid && (React.createElement("p", { className: "form-instructions form-invalid" },
+            React.createElement(Trans, null, PHONE_LINE_CANNOT_BE_EMPTY))),
+        isSaveClicked && isEmpty(trimAndReplacePlus(localCountryCodeState)) && !isPhoneLineEmpty && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null, PHONE_IS_NOT_VALID))),
         isShowOldPhone && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null,

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

@@ -1 +1 @@
-{"version":3,"file":"CasePhoneNumberConfirmAlert.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CasePhoneNumberConfirmAlert.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAUpD,UAAU,MAAM;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBAoGxD"}
+{"version":3,"file":"CasePhoneNumberConfirmAlert.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CasePhoneNumberConfirmAlert.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAUpD,UAAU,MAAM;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,MAAM,qBAuGxD"}

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

@@ -11,6 +11,7 @@ import { Alert, AlertVariant, Button, ButtonVariant } from '@patternfly/react-co
 import { ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { scrollIntoView } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -22,10 +23,11 @@ import { PDFContext } from '../../PDFContainer';
 export function CaseContactPhoneNumberAlert(props) {
     const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const [isCaseUpdating, setCasUpdating] = useState(false);
-    const { caseNumber, suppliedPhoneNumberVerified, contactSSOName, severity } = useCaseSelector((state) => ({
+    const { caseNumber, suppliedPhoneNumberVerified, contactSSOName, isCaseOwnerUpdating, severity } = useCaseSelector((state) => ({
         caseNumber: state.caseDetails.caseNumber,
         suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
         contactSSOName: state.caseDetails.contactSSOName,
+        isCaseOwnerUpdating: state.isCaseOwnerUpdating,
         severity: state.caseDetails.severity,
     }), isEqual);
     const { t } = useTranslation();
@@ -47,8 +49,10 @@ export function CaseContactPhoneNumberAlert(props) {
     const goToPhoneField = () => {
         scrollIntoView(props.tabRef);
     };
-    const isPhoneNeedsReview = contactSSOName === loggedInUser.data.ssoUsername &&
+    const isPhoneNeedsReview = !isEmpty(contactSSOName) &&
+        contactSSOName === loggedInUser.data.ssoUsername &&
         suppliedPhoneNumberVerified === 'Deferred' &&
+        !isCaseOwnerUpdating &&
         severity !== "1 (Urgent)" /* SeverityLevelsInternal.SEV_1 */; // we show another alert when sev is 1
     const NEW_OWNER_MSG = 'You are the new owner for this case. Is the new phone number correct?';
     if (!isPhoneNeedsReview)

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

@@ -1 +1 @@
-{"version":3,"file":"CasePhoneNumberSev1ConfirmAlert.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CasePhoneNumberSev1ConfirmAlert.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAUpD,UAAU,MAAM;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AAMD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,MAAM,qBAoG5D"}
+{"version":3,"file":"CasePhoneNumberSev1ConfirmAlert.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CasePhoneNumberSev1ConfirmAlert.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAUpD,UAAU,MAAM;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AAMD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,MAAM,qBAuG5D"}

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

@@ -11,6 +11,7 @@ import { Alert, AlertVariant, Button, ButtonVariant } from '@patternfly/react-co
 import { ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { scrollIntoView } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -26,11 +27,12 @@ On case detail page when case owner changes the sevirity to sev1, this alert wil
 export function CasePhoneNumberSev1ConfirmAlert(props) {
     const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const [isCaseUpdating, setCasUpdating] = useState(false);
-    const { caseNumber, suppliedPhoneNumberVerified, contactSSOName, severity } = useCaseSelector((state) => ({
+    const { caseNumber, suppliedPhoneNumberVerified, contactSSOName, severity, isCaseOwnerUpdating } = useCaseSelector((state) => ({
         caseNumber: state.caseDetails.caseNumber,
         suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
         contactSSOName: state.caseDetails.contactSSOName,
         severity: state.caseDetails.severity,
+        isCaseOwnerUpdating: state.isCaseOwnerUpdating,
     }), isEqual);
     const { t } = useTranslation();
     const caseDispatch = useCaseDispatch();
@@ -51,9 +53,11 @@ export function CasePhoneNumberSev1ConfirmAlert(props) {
     const goToPhoneField = () => {
         scrollIntoView(props.tabRef);
     };
-    const isPhoneNeedsConfirm = contactSSOName === loggedInUser.data.ssoUsername &&
+    const isPhoneNeedsConfirm = !isEmpty(contactSSOName) &&
+        contactSSOName === loggedInUser.data.ssoUsername &&
         severity === "1 (Urgent)" /* SeverityLevelsInternal.SEV_1 */ &&
-        suppliedPhoneNumberVerified !== 'True';
+        suppliedPhoneNumberVerified !== 'True' &&
+        !isCaseOwnerUpdating;
     const SEV1_MSG = 'This case severity is urgent. Please confirm the phone number we have on file is correct.';
     if (!isPhoneNeedsConfirm)
         return React.createElement(React.Fragment, null);

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CaseExternalTrackerUpdate.js

@@ -17,7 +17,7 @@ const CaseExternalTrackerUpdate = React.forwardRef((props, ref) => {
     const canSeePrivateComments = ability.can(resourceActions.PATCH, resources.CASE_COMMENTS, CaseDiscussionFields.VIEW_PRIVATE_COMMENT);
     const sanitize = (markdown) => {
         const htmlString = markdownToHTML(markdown, { openLinksInNewTab: true });
-        return { __html: DOMPurify.sanitize(htmlString) };
+        return { __html: DOMPurify.sanitize(htmlString, { FORBID_TAGS: ['style'] }) };
     };
     const onJumpToComment = (externalTrackerId) => () => props.showJumpToComment && props.onJumpToComment && props.onJumpToComment(externalTrackerId);
     // To check and set if a comment is private or not

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/CaseHistory.d.ts

@@ -1,6 +1,8 @@
+import './CaseHistory.css';
 import React from 'react';
 interface IProps {
+    caseNumber: string;
 }
-export default function CaseHistory(props: IProps): React.JSX.Element;
-export {};
+declare const CaseHistory: (props: IProps) => React.JSX.Element;
+export default CaseHistory;
 //# sourceMappingURL=CaseHistory.d.ts.map

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/CaseHistory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,MAAM;CAAG;AAEnB,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,qBAEhD"}
+{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,UAAW,MAAM,sBAMjC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/CaseHistory.js

@@ -1,4 +1,8 @@
+import './CaseHistory.css';
 import React from 'react';
-export default function CaseHistory(props) {
-    return React.createElement(React.Fragment, null, "CaseHistory");
-}
+import Timeline from './Timeline';
+const CaseHistory = (props) => {
+    return (React.createElement("div", null,
+        React.createElement(Timeline, { caseNumber: props.caseNumber })));
+};
+export default CaseHistory;