@rh-support/troubleshoot 2.4.10-beta.7 → 2.5.0

package/lib/esm/components/CaseEditView/ShareCase/PartnerShare.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { accounts, kase } from '@cee-eng/hydrajs';
+import { Button } from '@patternfly/react-core';
 import { ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { ability, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
@@ -16,8 +17,6 @@ import find from 'lodash/find';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import map from 'lodash/map';
-import merge from 'lodash/merge';
 import React, { useContext, useEffect, useState } from 'react';
 import { Typeahead } from 'react-bootstrap-typeahead';
 import { Trans, useTranslation } from 'react-i18next';
@@ -26,6 +25,7 @@ import { getTnCUrl } from './TnC';
 export function ShareWithPartner(props) {
     const [selected, setSelected] = useState([]);
     const [TnCUrl, setTnCUrl] = useState('');
+    const [isUpdating, setIsUpdating] = useState(false);
     const { accountNumber, caseNumber } = useCaseSelector((state) => ({
         accountNumber: state.caseDetails.accountNumberRef,
         caseNumber: state.caseDetails.caseNumber,
@@ -41,41 +41,41 @@ export function ShareWithPartner(props) {
         .map((account) => account.accountNum)
         .includes(props.accountNumber);
     const canShareWithPartner = hasPartnerShareAccess && !isManagedAccountForLoggedInUser;
+    const populatePartners = (caseNumber, caseAccountNumber) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const _partners = loggedInUserRights.data.isAccountSameAsLoggedInAccount(accountNumber)
+                ? accountManagers
+                : yield accounts.getPartnerAccountsForACustomer(caseAccountNumber, null, true);
+            const partners = get(_partners, 'data'); // to check
+            if (!isEmpty(partners)) {
+                const response = yield kase.access.getCaseAccessList(caseNumber);
+                const hasAccountLevelAccess = (access) => access.accessScope === 'Account' && access.permission === 'Write';
+                const hasCaseLevelAccess = (access) => access.accessScope === 'Case' && access.permission === 'Write';
+                const getAccountName = (partnerAccess) => {
+                    var _a;
+                    const account = find(partners, (p) => p.accountNum === partnerAccess.accountNumber);
+                    return (_a = account === null || account === void 0 ? void 0 : account.name) !== null && _a !== void 0 ? _a : '';
+                };
+                const appendAccountName = (list) => list.map((partnerAccess) => (Object.assign(Object.assign({}, partnerAccess), { accountName: getAccountName(partnerAccess) })));
+                const savedPartners = appendAccountName(filter(response.accessList, (p) => hasCaseLevelAccess(p)));
+                // remove partner accounts that already have access to case
+                const eligiblePartnerAccessList = filter(response.accessList, (access) => {
+                    return !hasAccountLevelAccess(access) && !hasCaseLevelAccess(access);
+                });
+                setPartners({ savedPartners, eligiblePartners: appendAccountName(eligiblePartnerAccessList) });
+                savedPartners.length > 0 && setSelected(savedPartners);
+            }
+        }
+        catch (e) {
+            ToastNotification.addDangerMessage(t('Failed to fetch partners'));
+        }
+    });
     useEffect(() => {
         if (!canShareWithPartner) {
             return;
         }
-        const populatePartners = (caseNumber, caseAccountNumber) => __awaiter(this, void 0, void 0, function* () {
-            try {
-                const _partners = loggedInUserRights.data.isAccountSameAsLoggedInAccount(accountNumber)
-                    ? accountManagers
-                    : yield accounts.getPartnerAccountsForACustomer(caseAccountNumber);
-                const partners = get(_partners, 'data'); // to check
-                if (!isEmpty(partners)) {
-                    const response = yield kase.access.getCaseAccessList(caseNumber);
-                    const hasAccountLevelAccess = (access) => access.accessScope === 'Account' && access.permission === 'Write';
-                    const hasCaseLevelAccess = (access) => access.accessScope === 'Case' && access.permission === 'Write';
-                    const getAccountName = (partnerAccess) => {
-                        var _a;
-                        const account = find(partners, (p) => p.accountNum === partnerAccess.accountNumber);
-                        return (_a = account === null || account === void 0 ? void 0 : account.name) !== null && _a !== void 0 ? _a : '';
-                    };
-                    const appendAccountName = (list) => map(list, (partnerAccess) => merge({}, partnerAccess, {
-                        accountName: getAccountName(partnerAccess),
-                    }));
-                    const savedPartners = appendAccountName(filter(response.accessList, (p) => hasCaseLevelAccess(p)));
-                    const eligiblePartnerAccessList = filter(response.accessList, (access) => {
-                        return !hasAccountLevelAccess(access) && !hasCaseLevelAccess(access);
-                    });
-                    setPartners({ savedPartners, eligiblePartners: appendAccountName(eligiblePartnerAccessList) });
-                    savedPartners.length > 0 && setSelected(savedPartners);
-                }
-            }
-            catch (e) {
-                ToastNotification.addDangerMessage(t('Failed to fetch partners'));
-            }
-        });
         !props.isUpdatingPartner && populatePartners(caseNumber, accountNumber);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         accountNumber,
         caseNumber,
@@ -98,13 +98,37 @@ export function ShareWithPartner(props) {
         const url = getTnCUrl(partnerAccNumber);
         setTnCUrl(url);
     };
+    const removePartnerAccess = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setIsUpdating(true);
+            const body = {
+                access: {
+                    accessScope: 'Case',
+                    permission: 'none',
+                    accountNumber: partners.savedPartners[0].accountNumber,
+                },
+            };
+            //@ts-ignore
+            yield kase.access.patchCaseAccess(caseNumber, body);
+            yield populatePartners(caseNumber, accountNumber);
+            setSelected([]);
+            setIsUpdating(false);
+            ToastNotification.addSuccessMessage(t('Partner access removed successfully'));
+        }
+        catch (e) {
+            setIsUpdating(false);
+            ToastNotification.addDangerMessage(t('Failed to remove partner access'));
+        }
+    });
     if (!canShareWithPartner || (partners.savedPartners.length === 0 && partners.eligiblePartners.length === 0)) {
         return null;
     }
     return (React.createElement("div", { className: `form-group` },
-        React.createElement("label", { "html-for": "share-with-partner" },
-            React.createElement(Trans, null, "Share with partner")),
-        React.createElement(Typeahead, { id: "share-with-partner", labelKey: (option) => `${option.accountName} (${option.accountNumber})`, multiple: false, filterBy: ['accountName', 'accountNumber'], options: partners.eligiblePartners, onChange: onPartnerSelect, selected: selected, disabled: partners.savedPartners.length > 0, "data-tracking-id": "share-with-partner" }),
+        React.createElement("label", { className: "react-typeahead-label-wrapper", "html-for": "share-with-partner" },
+            React.createElement(Trans, null, "Share with partner"),
+            React.createElement(Typeahead, { id: "share-with-partner", labelKey: (option) => `${option.accountName} (${option.accountNumber})`, multiple: false, filterBy: ['accountName', 'accountNumber'], options: partners.eligiblePartners, onChange: onPartnerSelect, selected: selected, disabled: props.isUpdatingPartner || partners.savedPartners.length > 0, "data-tracking-id": "share-with-partner", className: "partner-share-bootstrap-typeahead", isLoading: props.isUpdatingPartner })),
+        partners.savedPartners.length > 0 && (React.createElement(Button, { onClick: removePartnerAccess, "aria-label": t('Remove'), isLoading: isUpdating, isDisabled: isUpdating },
+            React.createElement(Trans, null, "Remove"))),
         TnCUrl && (React.createElement("a", { href: TnCUrl, className: "btn btn-app btn-info" },
             React.createElement(Trans, null, "Share")))));
 }

package/lib/esm/components/CaseEditView/ShareCase/TnC.d.ts

@@ -1,4 +1,4 @@
-import { RouteComponentProps } from 'react-router';
+import { RouteComponentProps } from 'react-router-dom';
 export declare function getTnCUrl(accountNumber: any): string;
 export declare const handleTnCQueryParams: (caseNumber: string, routeProps: RouteComponentProps) => Promise<void>;
 //# sourceMappingURL=TnC.d.ts.map

package/lib/esm/components/CaseEditView/ShareCase/TnC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TnC.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ShareCase/TnC.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEnD,wBAAgB,SAAS,CAAC,aAAa,KAAA,UAQtC;AAMD,eAAO,MAAM,oBAAoB,eAAsB,MAAM,cAAc,mBAAmB,kBAc7F,CAAC"}
+{"version":3,"file":"TnC.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ShareCase/TnC.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,SAAS,CAAC,aAAa,KAAA,UAQtC;AAMD,eAAO,MAAM,oBAAoB,eAAsB,MAAM,cAAc,mBAAmB,kBAc7F,CAAC"}

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

@@ -1,7 +1,8 @@
+import React from 'react';
 interface IProps {
     caseNumber: string;
 }
-declare function CaseActionPlan(props: IProps): JSX.Element;
+declare function CaseActionPlan(props: IProps): React.JSX.Element;
 declare namespace CaseActionPlan {
     var defaultProps: Partial<IProps>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CaseActionPlan.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseActionPlan/CaseActionPlan.tsx"],"names":[],"mappings":"AAqBA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,cAAc,CAAC,KAAK,EAAE,MAAM,eAyIpC;kBAzIQ,cAAc;;;AA4IvB,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CaseActionPlan.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseActionPlan/CaseActionPlan.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,cAAc,CAAC,KAAK,EAAE,MAAM,qBAqHpC;kBArHQ,cAAc;;;AAwHvB,eAAe,cAAc,CAAC"}

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

@@ -7,11 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { parseCommentMarkdown } from '@cee-eng/ui-toolkit';
+import { CodeBlock, CodeBlockCode } from '@patternfly/react-core'; // Import PatternFly CodeBlock components
 import { AlertMessage, AlertType, LoadingIndicator, TextAreaResizable, ToastNotification, } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { AbilityContext, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
-import DOMPurify from 'dompurify';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -71,32 +70,21 @@ function CaseActionPlan(props) {
     };
     const isInternalWithoutSFDCUser = loggedInUserRights.data.isInternalWithoutSFDCUser();
     const isActionPlanEmpty = isEmpty(actionPlanState === null || actionPlanState === void 0 ? void 0 : actionPlanState.trim());
-    // To parse comment from markdown to html for action plan comments
-    // DOMPurify - a XSS sanitizer for HTML, MathML and SVG.
-    const commentMarkdown = (markdown) => {
-        if (isEmpty(markdown)) {
-            return { __html: t('No action plan to display.') };
-        }
-        var cleanMarkdown = DOMPurify.sanitize(markdown);
-        const htmlString = parseCommentMarkdown(cleanMarkdown, { showButtonForAttachmentLink: true }, { openLinksInNewTab: true, gfm: true, breaks: true });
-        return { __html: htmlString };
-    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(AlertMessage, { show: isInternalWithoutSFDCUser, variant: AlertType.WARNING, isInline: true, className: "pf-u-mb-lg", title: t('You need a Salesforce (SFDC) user to edit the action plan.') }),
+        React.createElement(AlertMessage, { show: isInternalWithoutSFDCUser, variant: AlertType.WARNING, isInline: true, className: "pf-v5-u-mb-lg", title: t('You need a Salesforce (SFDC) user to edit the action plan.') }),
         React.createElement("label", { htmlFor: "rha-action-plan", className: "sr-only" },
             React.createElement(Trans, null, "Action plan")),
-        !canUpdateActionPlan && (React.createElement("pre", { "aria-label": t('Case Action Plan'), dangerouslySetInnerHTML: commentMarkdown(actionPlan), style: { fontFamily: isExportingPDF ? 'DejaVu Sans' : '' } })),
-        canUpdateActionPlan && (React.createElement("form", null,
-            React.createElement("div", { className: isExportingPDF ? 'hide-in-pdf' : '' },
-                React.createElement(TextAreaResizable, { className: "form-control", id: "rha-action-plan", disabled: isUpdating || isInternalWithoutSFDCUser, maxLength: 32768, name: "actionPlan", value: actionPlanState, onChange: onChange, rowsMin: 3 })),
+        !canUpdateActionPlan ? (React.createElement(CodeBlock, null,
+            React.createElement(CodeBlockCode, null, isEmpty(actionPlan) ? t('No action plan to display.') : actionPlan))) : (React.createElement("form", null,
+            React.createElement(TextAreaResizable, { id: "rha-action-plan", disabled: isUpdating || isInternalWithoutSFDCUser, maxLength: 32768, name: "actionPlan", value: actionPlanState, onChange: onChange, rowsMin: 3 }),
             !isInternalWithoutSFDCUser && (React.createElement("div", { className: `${isExportingPDF ? 'hide-in-pdf' : ''} push-top-narrow` },
-                React.createElement("button", { className: "btn btn-app btn-primary", onClick: updateCase, disabled: isActionPlanEmpty || isUpdating || !formIsDirty },
+                React.createElement("button", { className: "btn btn-app btn-primary", onClick: updateCase, disabled: isActionPlanEmpty || isUpdating || !formIsDirty, type: "button" },
                     React.createElement(Trans, null, "Submit"),
                     " ",
                     React.createElement(LoadingIndicator, { show: isUpdating, isInline: true })),
-                React.createElement("button", { className: "btn btn-app btn-link", onClick: discardActionPlan, disabled: isUpdating || !formIsDirty },
+                React.createElement("button", { className: "btn btn-app btn-link", onClick: discardActionPlan, disabled: isUpdating || !formIsDirty, type: "button" },
                     React.createElement(Trans, null, "Cancel")))),
-            React.createElement("p", { className: "pf-u-mt-xl" },
+            React.createElement("p", { className: "pf-v5-u-mt-xl" },
                 React.createElement(Trans, null,
                     "Updates to the action plan are ",
                     React.createElement("strong", null, "customer-facing"),

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

@@ -1,2 +1,3 @@
-export declare function CaseContactPhoneNumber(): JSX.Element;
+import React from 'react';
+export declare function CaseContactPhoneNumber(): React.JSX.Element;
 //# sourceMappingURL=CaseContactPhoneNumber.d.ts.map

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":"AAwBA,wBAAgB,sBAAsB,gBAkPrC"}
+{"version":3,"file":"CaseContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.tsx"],"names":[],"mappings":"AASA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAgB/D,wBAAgB,sBAAsB,sBAoYrC"}

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

@@ -8,8 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { contacts } from '@cee-eng/hydrajs';
-import { InputGroupText, InputGroupTextVariant, ValidatedOptions } from '@patternfly/react-core';
+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,28 +22,30 @@ 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 { removeAllChars, trimAndReplacePlus } from '../../../shared/utils';
 import { PDFContext } from '../../PDFContainer';
 export function CaseContactPhoneNumber() {
-    const { phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', caseNumber, contactSSOName, suppliedPhoneNumberVerified, isCaseOwnerUpdating, phone, } = useCaseSelector((state) => ({
+    var _a;
+    const { phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', caseNumber, contactSSOName, suppliedPhoneNumberVerified, isCaseOwnerUpdating, hasLoggedInUserConfirmedPhoneNumber, isCasePhoneUpdating, } = useCaseSelector((state) => ({
         phoneCountryCode: state.caseDetails.phoneCountryCode || '',
         phoneAreaCodePrefixLineNumber: state.caseDetails.phoneAreaCodePrefixLineNumber || '',
         caseNumber: state.caseDetails.caseNumber,
         contactSSOName: state.caseDetails.contactSSOName,
         suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
         isCaseOwnerUpdating: state.isCaseOwnerUpdating,
-        phone: state.caseDetails.phone,
+        hasLoggedInUserConfirmedPhoneNumber: state.hasLoggedInUserConfirmedPhoneNumber,
+        isCasePhoneUpdating: state.isCasePhoneUpdating,
     }), isEqual);
     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);
     const [isSaveClicked, setIsSavedClicked] = useState(false);
-    const [isShowOldPhone, setIsShowOldPhone] = useState(false);
+    const [isFetchingSSO, setIsFetchingSSO] = useState(false);
     const caseDispatch = useCaseDispatch();
     const caseUpdateError = useCaseUpdateErrorMessage();
     const { t } = useTranslation();
@@ -58,21 +61,30 @@ export function CaseContactPhoneNumber() {
             return;
         setLocalCountryCodeState(countryCode);
     };
+    // To check if country code is given but phone number empty
+    const isPhoneNumberInvalid = !isEmpty(localFullPhoneState) &&
+        isEmpty((_a = removeAllChars(localFullPhoneState)) === null || _a === void 0 ? void 0 : _a.replace(localCountryCodeState, ''));
+    const isPhoneLineEmpty = isEmpty(trimAndReplacePlus(localCountryCodeState)) &&
+        isEmpty(localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.replace(localCountryCodeState, ''));
+    const showInvalidPhoneError = !isCasePhoneUpdating &&
+        !isEmpty(localFullPhoneState) &&
+        !isEmpty(phoneAreaCodePrefixLineNumber) &&
+        isEmpty(phoneCountryCode); // country code empty
     const onSave = () => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
         setIsSavedClicked(true);
         if (isPhoneValueCannotBeSaved)
             return;
-        setCasePhoneUpdating(true);
-        const phoneLine = localFullPhoneState
-            .substring(localCountryCodeState.length, localFullPhoneState.length)
-            .trim();
-        const countryCode = trimAndReplacePlus(localCountryCodeState);
+        setCaseState(caseDispatch, { isCasePhoneUpdating: true });
+        const phoneLine = (_a = getPhoneObj(localFullPhoneState)) === null || _a === void 0 ? void 0 : _a.phoneLine;
+        const countryCode = (_b = getPhoneObj(localFullPhoneState)) === null || _b === void 0 ? void 0 : _b.countryCode;
         try {
             // update case contact info
             yield updateCaseDetails(caseDispatch, caseNumber, Object.assign(Object.assign({ phoneCountryCode: countryCode, phoneAreaCodePrefixLineNumber: phoneLine }, (contactSSOName === loggedInUser.data.ssoUsername && { suppliedPhoneNumberVerified: 'True' })), (!countryCode && !phoneLine && { clearPhoneNumber: true, suppliedPhoneNumberVerified: 'False' })));
             setIsSavedClicked(false);
-            setCasePhoneUpdating(false);
+            setCaseState(caseDispatch, { isCasePhoneUpdating: 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)) {
@@ -83,96 +95,205 @@ export function CaseContactPhoneNumber() {
                 }
             }
             catch (e) {
-                // silently fails
+                setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+                setIsEditting(false);
             }
         }
         catch (e) {
-            setCasePhoneUpdating(false);
+            setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+            setIsEditting(false);
             caseUpdateError.showError(e, t(`Phone number failed to update`));
         }
     });
     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`));
-        }
+        setIsEditting(false);
+        setLocalFullPhoneState(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
     });
     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 isPhoneNumberValid = (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT
+    const phoneObject = getPhoneObj(localFullPhoneState);
+    const localFullPhone = phoneObject.countryCode + ' ' + phoneObject.phoneLine;
+    const isPhoneNeedsReview = !isEmpty(contactSSOName) &&
+        contactSSOName === loggedInUser.data.ssoUsername &&
+        suppliedPhoneNumberVerified === 'Deferred' &&
+        !isCaseOwnerUpdating &&
+        !isCasePhoneUpdating &&
+        !isEmpty(localFullPhoneState);
+    const isPhoneNumberValid = (localFullPhone === null || localFullPhone === void 0 ? void 0 : localFullPhone.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);
+    const checkingPlusInLocalFullPhone = (_localFullPhone) => {
+        if (isEqual(_localFullPhone.trim(), '+')) {
+            return '';
+        }
+        else if (!isEmpty(_localFullPhone.trim()) && !_localFullPhone.trim().startsWith('+')) {
+            return '+' + _localFullPhone.replace(' ', '');
+        }
+        else {
+            return _localFullPhone;
+        }
+    };
     useEffect(() => {
-        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);
+        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 globally 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,
+            });
+        }
+        else {
+            // when loggedInUser !== contactSSOName while opening a case, we need to save the verification deferred state globally
+            // so that when the owner is again changed back to loggedInUser, we show the phone review banner again
+            // if he has not previously responded to the banner
+            setCaseState(caseDispatch, {
+                hasLoggedInUserConfirmedPhoneNumber: !isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True')
+                    ? 'Deferred'
+                    : 'True',
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [suppliedPhoneNumberVerified]);
+    useEffect(() => {
+        if (isEmpty(contactSSOName)) {
+            setLocalFullPhoneState('');
+            return;
+        }
+        const initContactPhoneNumber = () => __awaiter(this, void 0, void 0, function* () {
+            let _phoneAreaCodePrefixLineNumber;
+            let _phoneCountryCode;
+            let _suppliedPhoneNumberVerified;
+            setCaseState(caseDispatch, { isCasePhoneUpdating: true });
+            // logged in user and case owner are the same
+            if (contactSSOName === loggedInUser.data.ssoUsername) {
+                try {
+                    setIsFetchingSSO(true);
+                    const loggedInUserContact = yield (contacts === null || contacts === void 0 ? void 0 : contacts.getSFDCContactBySso(contactSSOName));
+                    setIsFetchingSSO(false);
+                    if (loggedInUserContact.supportPhoneAreaCodePrefixLineNumber) {
+                        // User has opened a case before and has phone and area code in her/his contact on SF
+                        _phoneAreaCodePrefixLineNumber = loggedInUserContact.supportPhoneAreaCodePrefixLineNumber;
+                        _phoneCountryCode = loggedInUserContact.supportPhoneCountryCode;
+                        _suppliedPhoneNumberVerified =
+                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
+                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                                ? hasLoggedInUserConfirmedPhoneNumber
+                                : 'False';
+                    }
+                    else {
+                        const phoneLine = getPhoneObj(loggedInUserContact.phone).phoneLine || '';
+                        const countryCode = getPhoneObj(loggedInUserContact.phone).countryCode;
+                        _phoneAreaCodePrefixLineNumber = phoneLine;
+                        _phoneCountryCode = countryCode;
+                        _suppliedPhoneNumberVerified =
+                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
+                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                                ? hasLoggedInUserConfirmedPhoneNumber
+                                : 'False';
+                    }
+                }
+                catch (_a) {
+                    _phoneAreaCodePrefixLineNumber = '';
+                    _phoneCountryCode = '';
+                    _suppliedPhoneNumberVerified = 'False';
+                    setIsFetchingSSO(false);
+                    setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+                }
             }
             else {
-                setIsShowOldPhone(true);
+                // user is openning case for others (use is partner or red hatter)
+                try {
+                    setIsFetchingSSO(true);
+                    const selectedContact = yield contacts.getSFDCContactBySso(contactSSOName);
+                    setIsFetchingSSO(false);
+                    if (selectedContact.supportPhoneAreaCodePrefixLineNumber) {
+                        _phoneAreaCodePrefixLineNumber = selectedContact.supportPhoneAreaCodePrefixLineNumber;
+                        _phoneCountryCode = selectedContact.supportPhoneCountryCode;
+                        _suppliedPhoneNumberVerified = 'Deferred';
+                    }
+                    else {
+                        _phoneAreaCodePrefixLineNumber = getPhoneObj(selectedContact.phone).phoneLine || '';
+                        _phoneCountryCode = getPhoneObj(selectedContact.phone).countryCode || '';
+                        _suppliedPhoneNumberVerified = 'Deferred';
+                    }
+                }
+                catch (e) {
+                    _phoneAreaCodePrefixLineNumber = '';
+                    _phoneCountryCode = '';
+                    _suppliedPhoneNumberVerified = 'False';
+                    setIsFetchingSSO(false);
+                    setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+                }
+            }
+            try {
+                yield updateCaseDetails(caseDispatch, caseNumber, {
+                    phoneAreaCodePrefixLineNumber: _phoneAreaCodePrefixLineNumber,
+                    phoneCountryCode: _phoneCountryCode,
+                    suppliedPhoneNumberVerified: _suppliedPhoneNumberVerified,
+                });
             }
+            catch (error) {
+                setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+                console.log(error);
+            }
+            let _localFullPhone = _phoneCountryCode + ' ' + _phoneAreaCodePrefixLineNumber;
+            setLocalFullPhoneState(checkingPlusInLocalFullPhone(_localFullPhone));
+            setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+        });
+        if (isEmpty(phoneCountryCode) && isEmpty(phoneAreaCodePrefixLineNumber)) {
+            initContactPhoneNumber();
         }
         else {
-            setLocalFullPhoneState((phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber).trim());
-            setIsShowOldPhone(false);
+            setLocalFullPhoneState(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (React.createElement("div", { className: "form-group pf-u-pb-md", style: { minWidth: '200px' } },
+    }, [contactSSOName]);
+    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, { variant: InputGroupTextVariant.plain },
-            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-u-ml-sm", type: "button", "data-tracking-id": "case-details-page-supplied-phone-save", onClick: () => onSave(), 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) },
-                React.createElement(TimesIcon, { color: "#6A6E73" }))),
+        React.createElement(InputGroupText, null,
+            React.createElement(PhoneInput, { phoneValue: localFullPhoneState, onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: isPhoneNumberValid, isDisabled: isCasePhoneUpdating || isCaseOwnerUpdating || !isEditting, isLoading: isCasePhoneUpdating || isCaseOwnerUpdating || isFetchingSSO, "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) ||
+                        (localFullPhone === null || localFullPhone === void 0 ? void 0 : localFullPhone.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: isCaseOwnerUpdating || isCasePhoneUpdating, "aria-label": "Clear" },
+                    React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: () => setIsEditting(true), "data-tracking-id": "case-details-page-supplied-phone-edit", style: { display: isExportingPDF ? 'none' : '' }, "aria-label": "Edit", disabled: isCaseOwnerUpdating || isCasePhoneUpdating },
+                React.createElement(PencilAltIcon, null)))),
         !invalid &&
-            (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) < PHONE_LIMIT &&
+            (localFullPhone === null || localFullPhone === void 0 ? void 0 : localFullPhone.length) <= PHONE_LIMIT &&
             !(isSaveClicked && isPhoneValueCannotBeSaved) &&
-            !isShowOldPhone && (React.createElement("p", { className: "form-instructions" },
+            !showInvalidPhoneError && (React.createElement("p", { className: "form-instructions" },
             React.createElement(Trans, null, PHONE_INSTRUCTION))),
         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))),
+        (localFullPhone === null || localFullPhone === void 0 ? void 0 : localFullPhone.length) > PHONE_LIMIT && (React.createElement("p", { className: "form-instructions form-invalid" }, maxLengthErrorMessage)),
+        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" },
+        showInvalidPhoneError && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null,
                 "The phone number on case is ",
-                phone,
+                localFullPhoneState,
                 ". The format of the phone field is changed and this phone does not fit.")))));
 }

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

@@ -1,11 +1,11 @@
 import { IDClassNameProps } from '@rh-support/types/shared';
 import React from 'react';
-import { RouteComponentProps } from 'react-router';
+import { RouteComponentProps } from 'react-router-dom';
 interface IProps extends IDClassNameProps {
     caseNumber: string;
     routeProps: RouteComponentProps;
     tabRef: React.MutableRefObject<HTMLDivElement>;
 }
-export default function CaseDetailsManagement(props: IProps): JSX.Element;
+export default function CaseDetailsManagement(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CaseDetailsManagement.d.ts.map

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

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