@rh-support/troubleshoot 2.4.10-beta.8 → 2.5.1

package/lib/esm/components/CaseInformation/ContactPhoneNumber.js

@@ -1,42 +1,77 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { contacts } from '@cee-eng/hydrajs';
 import { ValidatedOptions } from '@patternfly/react-core';
 import { getPhoneObj, PhoneInput } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import { ability, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
+import isUndefined from 'lodash/isUndefined';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PHONE_INSTRUCTION, PHONE_IS_NOT_VALID, PHONE_LINE_CANNOT_BE_EMPTY, PHONE_NO_CHAR_ERROR, } from '../../constants/caseDetailsConstants';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
 import { PHONE_LIMIT } from '../../reducers/CaseConstNTypes';
-import { setCaseDetails } from '../../reducers/CaseReducer';
-import { trimAndReplacePlus } from '../shared/utils';
+import { setCaseDetails, setCaseState } from '../../reducers/CaseReducer';
+import { PDFContext } from '../CaseEditView/PDFContainer';
+import { removeAllChars, trimAndReplacePlus } from '../shared/utils';
 import { ContactPhoneNumberPopOver } from './ContactPhoneNumberPopOver';
 export function ContactPhoneNumber() {
-    const { suppliedPhoneNumberVerified, severity, phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', } = useCaseSelector((state) => ({
+    const { suppliedPhoneNumberVerified, phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', hasLoggedInUserConfirmedPhoneNumber, contactSSOName, shouldNotSetPhoneCountryCode, isCasePhoneUpdating, } = useCaseSelector((state) => ({
         suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
-        severity: state.caseDetails.severity,
         phoneCountryCode: state.caseDetails.phoneCountryCode,
         phoneAreaCodePrefixLineNumber: state.caseDetails.phoneAreaCodePrefixLineNumber,
+        hasLoggedInUserConfirmedPhoneNumber: state.hasLoggedInUserConfirmedPhoneNumber,
+        contactSSOName: state.caseDetails.contactSSOName,
+        shouldNotSetPhoneCountryCode: state.shouldNotSetPhoneCountryCode,
+        isCasePhoneUpdating: state.isCasePhoneUpdating,
     }), isEqual);
     const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
     const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const [invalid, setInvalid] = useState(false);
-    const [localFullPhone, setLocalFullPhone] = useState(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
-    const canChangeAccountInfo = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.ACCOUNT_AND_OWNER);
-    const getPhone = () => phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber;
+    const [portalPhone, setPortalPhone] = useState('');
+    const [localFullPhone, setLocalFullPhone] = useState('');
+    const [isFetchingSso, setIsFetchingSso] = useState(false);
+    const { isExportingPDF } = useContext(PDFContext);
+    const getPhone = phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber;
     const caseDispatch = useCaseDispatch();
     const { t } = useTranslation();
+    const checkingPlusInLocalFullPhone = (_localFullPhone) => {
+        if (isEqual(_localFullPhone.trim(), '+')) {
+            return '';
+        }
+        else if (!isEmpty(_localFullPhone.trim()) && !_localFullPhone.trim().startsWith('+')) {
+            return '+' + _localFullPhone.trim();
+        }
+        else {
+            return _localFullPhone.trim();
+        }
+    };
     const onPhoneChange = (fullPhone) => {
-        setLocalFullPhone(fullPhone);
-        if (isEmpty(fullPhone)) {
-            setInvalid(false);
+        setLocalFullPhone(checkingPlusInLocalFullPhone(fullPhone));
+        if (!shouldNotSetPhoneCountryCode) {
+            setCaseDetails(caseDispatch, {
+                phoneAreaCodePrefixLineNumber: getPhoneObj(fullPhone).phoneLine,
+                phoneCountryCode: getPhoneObj(fullPhone).countryCode,
+            });
+        }
+        else {
+            if (!isEmpty(fullPhone) && !isEqual(removeAllChars(portalPhone), removeAllChars(fullPhone))) {
+                setCaseState(caseDispatch, { shouldNotSetPhoneCountryCode: false });
+            }
+            setCaseDetails(caseDispatch, {
+                phoneAreaCodePrefixLineNumber: checkingPlusInLocalFullPhone(fullPhone),
+                phoneCountryCode: '',
+            });
         }
-        setCaseDetails(caseDispatch, {
-            phoneAreaCodePrefixLineNumber: getPhoneObj(fullPhone).phoneLine,
-            phoneCountryCode: getPhoneObj(fullPhone).countryCode,
-        });
     };
     const onCountryCodeChange = (phoneCountryCode) => {
         setCaseDetails(caseDispatch, { phoneCountryCode });
@@ -44,67 +79,207 @@ export function ContactPhoneNumber() {
     const maxLengthErrorMessage = t('Phone number cannot be more than {{limit}} digits.', {
         limit: PHONE_LIMIT,
     });
-    const isPhoneNumberInvalid = isEmpty(trimAndReplacePlus(phoneCountryCode)) && !isEmpty(phoneAreaCodePrefixLineNumber.trim());
     // To check if country code is given but phone number empty
-    const isPhoneNumberEmpty = !isEmpty(trimAndReplacePlus(phoneCountryCode)) &&
+    const isPhoneNumberInvalid = !isEmpty(trimAndReplacePlus(phoneCountryCode)) &&
+        isEmpty(phoneAreaCodePrefixLineNumber === null || phoneAreaCodePrefixLineNumber === void 0 ? void 0 : phoneAreaCodePrefixLineNumber.replace(phoneCountryCode, ''));
+    const isPhoneNumberEmpty = isEmpty(trimAndReplacePlus(phoneCountryCode)) &&
         isEmpty(phoneAreaCodePrefixLineNumber === null || phoneAreaCodePrefixLineNumber === void 0 ? void 0 : phoneAreaCodePrefixLineNumber.replace(phoneCountryCode, ''));
-    const isPhoneNumberValid = getPhone().length > PHONE_LIMIT
-        ? ValidatedOptions.error
-        : severity === "1 (Urgent)" /* SEV_1 */ && isEmpty(suppliedPhoneNumberVerified)
-            ? ValidatedOptions.warning
-            : isNextBtnClickedToShowValidationError && (isPhoneNumberEmpty || isPhoneNumberInvalid)
+    const isPhoneNumberValid = !isEmpty(phoneAreaCodePrefixLineNumber) &&
+        !isNextBtnClickedToShowValidationError &&
+        !isEmpty(trimAndReplacePlus(phoneCountryCode)) &&
+        (isEqual(suppliedPhoneNumberVerified, 'False') || isUndefined(suppliedPhoneNumberVerified))
+        ? ValidatedOptions.warning
+        : getPhone.length > PHONE_LIMIT
+            ? ValidatedOptions.error
+            : isNextBtnClickedToShowValidationError &&
+                (isPhoneNumberEmpty || isPhoneNumberInvalid || isEmpty(trimAndReplacePlus(phoneCountryCode)))
                 ? ValidatedOptions.error
-                : invalid
-                    ? ValidatedOptions.error
-                    : ValidatedOptions.default;
+                : isNextBtnClickedToShowValidationError && !isPhoneNumberEmpty
+                    ? ValidatedOptions.success
+                    : invalid
+                        ? ValidatedOptions.error
+                        : ValidatedOptions.default;
+    // This useEffect initialize phone number inputbox
+    // - User open case for first time for herself/himself -> show portal phone number
+    // - User open case for NOT first time for herself/himself -> show phone number that we have on user contact in SF
     useEffect(() => {
-        // when canChangeAccountInfo is false OwnerSelector is hidden
-        // need to set phone on load here instead of OwnerSelector
-        if (!canChangeAccountInfo && (isEmpty(phoneCountryCode) || isEmpty(phoneAreaCodePrefixLineNumber))) {
-            if (loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) {
+        if (isEmpty(contactSSOName)) {
+            setLocalFullPhone('');
+            return;
+        }
+        const getPhoneInfo = () => __awaiter(this, void 0, void 0, function* () {
+            if (isEmpty(loggedInUser.data.phone) &&
+                isEmpty(loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) &&
+                isEmpty(loggedInUser.data.supportPhoneCountryCode))
+                setLocalFullPhone('');
+            setCaseState(caseDispatch, { isCasePhoneUpdating: true });
+            const initContactPhoneNumber = () => __awaiter(this, void 0, void 0, function* () {
+                let _phoneAreaCodePrefixLineNumber;
+                let _phoneCountryCode;
+                let _suppliedPhoneNumberVerified;
+                // logged in user and case owner are the same
+                if (contactSSOName === loggedInUser.data.ssoUsername) {
+                    if (loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) {
+                        // User has opened a case before and has phone and area code in her/his contact on SF
+                        _phoneAreaCodePrefixLineNumber = loggedInUser.data.supportPhoneAreaCodePrefixLineNumber;
+                        _phoneCountryCode = loggedInUser.data.supportPhoneCountryCode;
+                        _suppliedPhoneNumberVerified =
+                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
+                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                                ? hasLoggedInUserConfirmedPhoneNumber
+                                : 'False';
+                    }
+                    else {
+                        // User is openning a case for the first time
+                        const phoneLength = trimAndReplacePlus(removeAllChars(loggedInUser.data.phone)).length;
+                        // For first time user whose phone is fetched from portal without country code
+                        // For phone length less or equal to 10 country code shouldn't be fetched to avoid faulty phone population
+                        if (phoneLength > 10) {
+                            const phoneLine = getPhoneObj(loggedInUser.data.phone).phoneLine || '';
+                            const countryCode = getPhoneObj(loggedInUser.data.phone).countryCode;
+                            _phoneAreaCodePrefixLineNumber = phoneLine;
+                            _phoneCountryCode = countryCode;
+                        }
+                        else {
+                            setCaseState(caseDispatch, {
+                                shouldNotSetPhoneCountryCode: true,
+                            });
+                            _phoneAreaCodePrefixLineNumber = loggedInUser.data.phone;
+                            _phoneCountryCode = '';
+                            setPortalPhone(loggedInUser.data.phone);
+                        }
+                        _suppliedPhoneNumberVerified =
+                            isEqual(hasLoggedInUserConfirmedPhoneNumber, 'True') ||
+                                isEqual(hasLoggedInUserConfirmedPhoneNumber, 'Deferred')
+                                ? hasLoggedInUserConfirmedPhoneNumber
+                                : 'False';
+                    }
+                }
+                else {
+                    // user is openning case for others (use is partner or red hatter)
+                    try {
+                        if (!contactSSOName)
+                            return;
+                        setIsFetchingSso(true);
+                        const selectedContact = yield contacts.getSFDCContactBySso(contactSSOName);
+                        setIsFetchingSso(false);
+                        if (selectedContact.supportPhoneAreaCodePrefixLineNumber) {
+                            _phoneAreaCodePrefixLineNumber = selectedContact.supportPhoneAreaCodePrefixLineNumber;
+                            _phoneCountryCode = selectedContact.supportPhoneCountryCode;
+                            _suppliedPhoneNumberVerified = 'Deferred';
+                        }
+                        else {
+                            const phoneLength = trimAndReplacePlus(removeAllChars(selectedContact.phone)).length;
+                            if (phoneLength > 10) {
+                                _phoneAreaCodePrefixLineNumber = getPhoneObj(selectedContact.phone).phoneLine || '';
+                                _phoneCountryCode = getPhoneObj(selectedContact.phone).countryCode || '';
+                            }
+                            else {
+                                _phoneAreaCodePrefixLineNumber = selectedContact.phone;
+                                _phoneCountryCode = '';
+                                setCaseState(caseDispatch, { shouldNotSetPhoneCountryCode: true });
+                                setPortalPhone(selectedContact.phone);
+                            }
+                            _suppliedPhoneNumberVerified = 'Deferred';
+                        }
+                    }
+                    catch (e) {
+                        _phoneAreaCodePrefixLineNumber = '';
+                        _phoneCountryCode = '';
+                        _suppliedPhoneNumberVerified = 'False';
+                        setIsFetchingSso(false);
+                        setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+                    }
+                }
                 setCaseDetails(caseDispatch, {
-                    phoneAreaCodePrefixLineNumber: loggedInUser.data.supportPhoneAreaCodePrefixLineNumber,
-                    phoneCountryCode: loggedInUser.data.supportPhoneCountryCode,
-                    suppliedPhoneNumberVerified: 'True',
+                    phoneAreaCodePrefixLineNumber: _phoneAreaCodePrefixLineNumber,
+                    phoneCountryCode: _phoneCountryCode,
+                    suppliedPhoneNumberVerified: _suppliedPhoneNumberVerified,
                 });
+                let _localFullPhone = _phoneCountryCode + ' ' + _phoneAreaCodePrefixLineNumber;
+                setLocalFullPhone(checkingPlusInLocalFullPhone(_localFullPhone));
+                setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+            });
+            // if phone not initialized with portal and user contact value, initialize it else populate phone inputbox
+            if (isEmpty(phoneAreaCodePrefixLineNumber) && isEmpty(phoneCountryCode)) {
+                initContactPhoneNumber();
             }
             else {
-                const phoneLine = getPhoneObj(loggedInUser.data.phone).phoneLine || '';
-                const countryCode = getPhoneObj(loggedInUser.data.phone).countryCode || '';
-                setCaseDetails(caseDispatch, {
-                    phoneAreaCodePrefixLineNumber: phoneLine,
-                    phoneCountryCode: countryCode,
-                    suppliedPhoneNumberVerified: phoneLine && countryCode ? 'True' : 'False',
+                let phoneLength;
+                let portalPhone;
+                let supportPhone;
+                setCaseState(caseDispatch, { isCasePhoneUpdating: true });
+                const getSelectedContactPhoneInfo = () => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        if (!contactSSOName)
+                            return;
+                        const selectedContact = yield contacts.getSFDCContactBySso(contactSSOName);
+                        if (isEmpty(selectedContact.supportPhoneAreaCodePrefixLineNumber) &&
+                            !isEmpty(selectedContact.phone)) {
+                            portalPhone = selectedContact.phone;
+                            phoneLength = trimAndReplacePlus(removeAllChars(portalPhone)).length;
+                            supportPhone = selectedContact.supportPhoneAreaCodePrefixLineNumber;
+                        }
+                    }
+                    catch (e) {
+                        portalPhone = '';
+                        supportPhone = '';
+                        phoneLength = 0;
+                        setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+                    }
                 });
+                // logged in user and case owner are the same
+                if (contactSSOName === loggedInUser.data.ssoUsername) {
+                    if (isEmpty(loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) &&
+                        !isEmpty(loggedInUser.data.phone)) {
+                        portalPhone = loggedInUser.data.phone;
+                        phoneLength = trimAndReplacePlus(removeAllChars(portalPhone)).length;
+                        supportPhone = loggedInUser.data.supportPhoneAreaCodePrefixLineNumber;
+                    }
+                }
+                else {
+                    // user is openning case for others (use is partner or red hatter)
+                    try {
+                        yield getSelectedContactPhoneInfo();
+                    }
+                    catch (error) {
+                        console.log(error);
+                        setCaseState(caseDispatch, { isCasePhoneUpdating: false });
+                    }
+                }
+                if ((isUndefined(supportPhone) || isEmpty(supportPhone)) &&
+                    isEqual(removeAllChars(portalPhone), removeAllChars(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber)) &&
+                    phoneLength <= 10) {
+                    setPortalPhone(portalPhone);
+                }
+                setLocalFullPhone(checkingPlusInLocalFullPhone((phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber).trim()));
+                setCaseState(caseDispatch, { isCasePhoneUpdating: false });
             }
-        }
-        setLocalFullPhone(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useEffect(() => {
-        if (isEqual(localFullPhone.trim(), '+')) {
-            setLocalFullPhone('');
-        }
-        else if (!isEmpty(localFullPhone) && !localFullPhone.startsWith('+')) {
-            setLocalFullPhone('+' + localFullPhone.replace(' ', ''));
-        }
+        });
+        getPhoneInfo();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [localFullPhone]);
+    }, [contactSSOName, shouldNotSetPhoneCountryCode]);
     return (React.createElement("div", { className: "form-group", style: { minWidth: '200px' } },
         React.createElement("label", null,
             React.createElement(Trans, null, "Case owner's phone number"),
+            React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true }, "*"),
             ContactPhoneNumberPopOver()),
-        React.createElement(PhoneInput, { phoneValue: localFullPhone, onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: isPhoneNumberValid, invalid: invalid, setInvalid: setInvalid }),
+        React.createElement(PhoneInput, { phoneValue: localFullPhone, countryCode: phoneCountryCode, onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: isPhoneNumberValid, invalid: invalid, setInvalid: setInvalid, isLoading: isFetchingSso || isCasePhoneUpdating, shouldNotSetCountryCode: shouldNotSetPhoneCountryCode, isDisabled: isFetchingSso || isCasePhoneUpdating }),
         !invalid &&
-            getPhone().length < PHONE_LIMIT &&
+            getPhone.length <= PHONE_LIMIT &&
             !(isPhoneNumberEmpty && isNextBtnClickedToShowValidationError) &&
-            !(isNextBtnClickedToShowValidationError && isPhoneNumberInvalid) && (React.createElement("p", { className: "form-instructions" },
+            !(isNextBtnClickedToShowValidationError &&
+                (isPhoneNumberInvalid || isEmpty(trimAndReplacePlus(phoneCountryCode)))) && (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))),
-        getPhone().length > PHONE_LIMIT && (React.createElement("p", { className: "form-instructions form-invalid" }, maxLengthErrorMessage)),
+        getPhone.length > PHONE_LIMIT && React.createElement("p", { className: "form-instructions form-invalid" }, maxLengthErrorMessage),
         isPhoneNumberEmpty && isNextBtnClickedToShowValidationError && (React.createElement("p", { className: "form-instructions form-invalid" },
-            React.createElement(Trans, null, PHONE_LINE_CANNOT_BE_EMPTY))),
+            React.createElement(Trans, null, PHONE_INSTRUCTION))),
         isNextBtnClickedToShowValidationError && isPhoneNumberInvalid && (React.createElement("p", { className: "form-instructions form-invalid" },
+            React.createElement(Trans, null, PHONE_LINE_CANNOT_BE_EMPTY))),
+        isNextBtnClickedToShowValidationError &&
+            isEmpty(trimAndReplacePlus(phoneCountryCode)) &&
+            !isPhoneNumberEmpty && (React.createElement("p", { className: "form-instructions form-invalid" },
             React.createElement(Trans, null, PHONE_IS_NOT_VALID)))));
 }

package/lib/esm/components/CaseInformation/ContactPhoneNumberAlert.d.ts

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

package/lib/esm/components/CaseInformation/ContactPhoneNumberAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPhoneNumberAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumberAlert.tsx"],"names":[],"mappings":"AAYA,wBAAgB,uBAAuB,gBA0DtC"}
+{"version":3,"file":"ContactPhoneNumberAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumberAlert.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAQrD,wBAAgB,uBAAuB,sBAqFtC"}

package/lib/esm/components/CaseInformation/ContactPhoneNumberAlert.js

@@ -1,35 +1,54 @@
 import { Alert, AlertVariant, Button, ButtonVariant } from '@patternfly/react-core';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
+import isUndefined from 'lodash/isUndefined';
 import React, { useContext, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
-import { setCaseDetails } from '../../reducers/CaseReducer';
+import { setCaseDetails, setCaseState } from '../../reducers/CaseReducer';
 import { PDFContext } from '../CaseEditView/PDFContainer';
+import { trimAndReplacePlus } from '../shared/utils';
 export function ContactPhoneNumberAlert() {
     const { t } = useTranslation();
     const caseDispatch = useCaseDispatch();
-    const { caseDetails } = useCaseSelector((state) => ({
-        caseDetails: state.caseDetails,
+    const { phoneCountryCode, phoneAreaCodePrefixLineNumber, contactSSOName, suppliedPhoneNumberVerified } = useCaseSelector((state) => ({
+        phoneCountryCode: state.caseDetails.phoneCountryCode,
+        phoneAreaCodePrefixLineNumber: state.caseDetails.phoneAreaCodePrefixLineNumber,
+        contactSSOName: state.caseDetails.contactSSOName,
+        suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
     }), isEqual);
+    const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const { isExportingPDF } = useContext(PDFContext);
-    const onCaseDetailsChange = (caseDetails) => {
-        setCaseDetails(caseDispatch, caseDetails);
+    const onSuppliedPhoneNumberVerifiedChange = (suppliedPhoneNumberVerified) => {
+        setCaseDetails(caseDispatch, { suppliedPhoneNumberVerified });
+        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,
+            });
+        }
     };
+    const isPhoneNumberEmpty = isEmpty(trimAndReplacePlus(phoneCountryCode)) &&
+        isEmpty(phoneAreaCodePrefixLineNumber === null || phoneAreaCodePrefixLineNumber === void 0 ? void 0 : phoneAreaCodePrefixLineNumber.replace(phoneCountryCode, ''));
     useEffect(() => {
-        if (caseDetails.severity === "1 (Urgent)" /* SEV_1 */ && !caseDetails.suppliedPhoneNumberVerified) {
-            onCaseDetailsChange({ suppliedPhoneNumberVerified: undefined });
+        if (isPhoneNumberEmpty && !suppliedPhoneNumberVerified) {
+            onSuppliedPhoneNumberVerifiedChange(undefined);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [caseDetails.severity]);
-    const hideAlert = caseDetails.severity !== "1 (Urgent)" /* SEV_1 */ || !isEmpty(caseDetails.suppliedPhoneNumberVerified);
-    if (hideAlert)
+    }, []);
+    const phoneAndCountryHaveValues = !isEmpty(phoneAreaCodePrefixLineNumber) && !isEmpty(trimAndReplacePlus(phoneCountryCode));
+    const phoneNotVerifiedOrVerificationIsUndefined = isEqual(suppliedPhoneNumberVerified, 'False') || isUndefined(suppliedPhoneNumberVerified);
+    const showAlert = phoneNotVerifiedOrVerificationIsUndefined && phoneAndCountryHaveValues;
+    if (!showAlert)
         return React.createElement(React.Fragment, null);
-    return (React.createElement(Alert, { className: `form-group ${isExportingPDF ? 'hide-in-pdf' : ''}`, isInline: true, variant: AlertVariant.warning, title: t('Review phone number'), actionLinks: [
-            React.createElement(Button, { variant: ButtonVariant.link, isInline: true, onClick: () => onCaseDetailsChange({ suppliedPhoneNumberVerified: 'True' }), "data-tracking-id": "case-contact-phone-number-confirm" },
+    return (React.createElement(Alert, { className: `form-group ${isExportingPDF ? 'hide-in-pdf' : ''} phone-review-banner`, isInline: true, variant: AlertVariant.warning, title: t('Review phone number'), actionLinks: [
+            React.createElement(Button, { variant: ButtonVariant.link, isInline: true, onClick: () => onSuppliedPhoneNumberVerifiedChange('True'), "data-tracking-id": "case-contact-phone-number-confirm", key: "case-contact-phone-number-confirm" },
                 React.createElement(Trans, null, "Confirm phone number")),
-            React.createElement(Button, { variant: ButtonVariant.link, isInline: true, onClick: () => onCaseDetailsChange({ suppliedPhoneNumberVerified: 'Deferred' }), "data-tracking-id": "case-contact-phone-number-dont-know" },
+            React.createElement(Button, { variant: ButtonVariant.link, isInline: true, onClick: () => onSuppliedPhoneNumberVerifiedChange('Deferred'), "data-tracking-id": "case-contact-phone-number-dont-know", key: "case-contact-phone-number-dont-know" },
                 React.createElement(Trans, null, "I don't know")),
         ] },
-        React.createElement(Trans, null, "You are opening an urgent severity case, please confirm the phone number we have on file is correct.")));
+        React.createElement(Trans, null, "Please confirm the phone number we have on file is correct.")));
 }

package/lib/esm/components/CaseInformation/ContactPhoneNumberPopOver.d.ts

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

package/lib/esm/components/CaseInformation/ContactPhoneNumberPopOver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPhoneNumberPopOver.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumberPopOver.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,yBAAyB,mBAkBrC,CAAC"}
+{"version":3,"file":"ContactPhoneNumberPopOver.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumberPopOver.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,yBAAyB,yBAkBrC,CAAC"}

package/lib/esm/components/CaseInformation/ContactPhoneNumberPopOver.js

@@ -5,5 +5,5 @@ import { Trans } from 'react-i18next';
 export const ContactPhoneNumberPopOver = () => {
     return (React.createElement(Popover, { "aria-label": "Support Severity Level info", position: PopoverPosition.right, bodyContent: React.createElement("p", null,
             React.createElement(Trans, null, "When you change the phone number, it affects both this case and your contact info in the Red Hat support system.")), closeBtnAriaLabel: "Close" },
-        React.createElement(QuestionCircleIcon, { className: "pf-u-ml-xs icon-size", "aria-label": "Contact Phone Number Info" })));
+        React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs icon-size", "aria-label": "Contact Phone Number Info" })));
 };

package/lib/esm/components/CaseInformation/Description.d.ts

@@ -1,8 +1,10 @@
+import React from 'react';
 interface IProps {
     inlineEditable?: boolean;
     hideSaveCancel?: boolean;
     customTitle?: string;
+    isSummarizeInvalid?: boolean;
 }
-export default function Description(props: IProps): JSX.Element;
+export default function Description(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=Description.d.ts.map

package/lib/esm/components/CaseInformation/Description.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Description.tsx"],"names":[],"mappings":"AAkBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,eAyGhD"}
+{"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Description.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,qBAqKhD"}

package/lib/esm/components/CaseInformation/Description.js

@@ -1,55 +1,85 @@
-import { TextArea } from '@patternfly/react-core';
-import { InlineEdit } from '@rh-support/components';
+import { Popover, TextArea } from '@patternfly/react-core';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
+// import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon'; This will be used for the Learn More button
+import { InlineEdit, useBreakpoint } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
-import { RouteContext } from '../../context/RouteContext';
-import { CASE_DEATILS_ISSUE_LIMIT, LargeDescriptionErrorMessage, MODIFIED_DESCRIPTION_LENGTH_LIMIT, } from '../../reducers/CaseConstNTypes';
+import { CASE_DETAILS_ISSUE_LIMIT } from '../../reducers/CaseConstNTypes';
 import { getUpdatedDescription } from '../../reducers/CaseHelpers';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 export default function Description(props) {
     const { t } = useTranslation();
-    const { hasLargeCaseDescription, issue, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName } = useCaseSelector((state) => ({
+    const { issue, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName, version, product, summary } = useCaseSelector((state) => ({
         description: state.caseDetails.description,
         issue: state.caseDetails.issue,
         environment: state.caseDetails.environment,
+        version: state.caseDetails.version,
         periodicityOfIssue: state.caseDetails.periodicityOfIssue,
         timeFramesAndUrgency: state.caseDetails.timeFramesAndUrgency,
         hasLargeCaseDescription: state.hasLargeCaseDescription,
         v3ClusterName: state.v3ClusterName,
+        product: state.caseDetails.product,
+        summary: state.caseDetails.summary,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const [hasFocusedLostKT4, setHasFocusedLostKT4] = useState(false);
-    const [isIssueTextAreaFocused, setIssueTextAreaFocused] = useState(false);
-    const onKTQ1IssueFocusChange = (e) => {
-        setIssueTextAreaFocused(e.type === 'focus');
-        e.type === 'blur' && setHasFocusedLostKT4(true);
-    };
+    const breakPoint = useBreakpoint();
+    const isLgScreenHeight = breakPoint.lgh; // min-height: 1100px
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasShownPopover, setHasShownPopover] = useState(false);
+    const textAreaRef = useRef(null);
+    useEffect(() => {
+        const hasShown = localStorage.getItem('hasShownDescriptionPopover');
+        setHasShownPopover(hasShown === 'true');
+    }, []);
     const onCaseDetailsChange = (caseDetails) => {
         setCaseDetails(caseDispatch, caseDetails);
     };
-    const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
     const onKTQ1IssueChange = (value, e) => {
         const ktQ1Local = isEmpty(value === null || value === void 0 ? void 0 : value.trim()) ? '' : value;
         const newDescription = getUpdatedDescription(ktQ1Local, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName);
         onCaseDetailsChange({ issue: ktQ1Local, description: newDescription });
     };
-    const isKT1Required = true;
-    //changing limit to 31000 to account for extra chars added during description combination to backend.  True limit is 32000
-    const descriptionErrorMessage = t(LargeDescriptionErrorMessage, { limit: MODIFIED_DESCRIPTION_LENGTH_LIMIT });
-    const isDescriptionInvalid = (issue) => {
-        return hasFocusedLostKT4 && isEmpty(issue);
+    const handleTextAreaClick = () => {
+        if (!hasShownPopover) {
+            setIsOpen(true);
+            setHasShownPopover(true);
+            localStorage.setItem('hasShownDescriptionPopover', 'true');
+        }
+    };
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
     };
-    return (React.createElement(InlineEdit, { labelContent: React.createElement(React.Fragment, null,
-            props.customTitle ? (props.customTitle) : (React.createElement(Trans, null, "What are you experiencing? What are you expecting to happen?")),
-            isKT1Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), labelProps: { htmlFor: 'get-support-ktQ1-issue' }, content: issue, allowInlineEdit: !!props.inlineEditable, hideSaveCancel: !!props.hideSaveCancel, initialIsEditing: isEmpty(issue), usePreformattedTag: true, saveOnBlur: true },
-        React.createElement(TextArea, { id: "get-support-ktQ1-issue", name: "get-support-ktQ1-issue", className: `form-control${isDescriptionInvalid(issue) || (isNextBtnClickedToShowValidationError && isEmpty(issue))
-                ? ' form-invalid'
-                : ''}`, "aria-invalid": (issue === null || issue === void 0 ? void 0 : issue.length) > CASE_DEATILS_ISSUE_LIMIT ? 'true' : 'false', "aria-required": isKT1Required, isRequired: isKT1Required, value: issue, isDisabled: isEmpty(issue) && hasLargeCaseDescription && !setIssueTextAreaFocused, onChange: onKTQ1IssueChange, onFocus: onKTQ1IssueFocusChange, onBlur: onKTQ1IssueFocusChange, "data-tracking-id": "get-support-ktQ1-issue", placeholder: t('Please enter an elaborate description'), rows: 5 }),
-        React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-20k-warning-ktQ1-environment" }, `${(issue === null || issue === void 0 ? void 0 : issue.length) > CASE_DEATILS_ISSUE_LIMIT
-            ? `Description cannot be more than ${CASE_DEATILS_ISSUE_LIMIT} characters`
-            : ''}`),
-        React.createElement("p", { className: "form-instructions" }, `${hasLargeCaseDescription && isIssueTextAreaFocused ? descriptionErrorMessage : ''}`)));
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const isKT1Required = true;
+    const headerPopoverContent = (React.createElement("div", null,
+        React.createElement(Trans, null, "Tips for describing your problem")));
+    const PopoverContent = (React.createElement("div", { className: "popover-body-info-description" },
+        React.createElement(Trans, null, "Example:"),
+        React.createElement("p", { className: "pf-v5-u-color-200" },
+            React.createElement(Trans, null,
+                "I'm unable to start the SSHD service receiving the error message",
+                React.createElement("br", null),
+                "\"Bad yes/no argument for ShowPatchLevel parameter\"")),
+        React.createElement(Trans, null, "To expedite your case, include these details:"),
+        React.createElement("p", { className: "pf-v5-u-color-200" },
+            React.createElement(Trans, null,
+                "Problem",
+                React.createElement("br", null),
+                "Steps you've taken",
+                React.createElement("br", null),
+                "Error Messages"))));
+    return (React.createElement(InlineEdit, { labelContent: React.createElement(React.Fragment, null, props.customTitle ? (props.customTitle) : (React.createElement(React.Fragment, null,
+            React.createElement(Trans, null, "Describe your problem. Include specific actions and error messages."),
+            isKT1Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
+            React.createElement(Popover, { isVisible: isOpen, shouldClose: handleClose, headerContent: headerPopoverContent, bodyContent: PopoverContent },
+                React.createElement(OutlinedQuestionCircleIcon, { className: "pf-v5-u-ml-xs icon-size", onClick: handleToggle }))))), labelProps: { htmlFor: 'get-support-ktQ1-issue' }, content: issue, allowInlineEdit: !!props.inlineEditable, hideSaveCancel: !!props.hideSaveCancel, initialIsEditing: isEmpty(issue), usePreformattedTag: true, saveOnBlur: true },
+        React.createElement(TextArea, { id: "get-support-ktQ1-issue", name: "get-support-ktQ1-issue", className: `description-textarea ${isEmpty(version) || isEmpty(summary) || isEmpty(product) ? 'kt1-disabled' : ''}`, "aria-invalid": (issue === null || issue === void 0 ? void 0 : issue.length) > CASE_DETAILS_ISSUE_LIMIT ? 'true' : 'false', "aria-required": isKT1Required, isRequired: isKT1Required, value: issue, disabled: isEmpty(version) || isEmpty(summary) || isEmpty(product), onChange: (e, value) => onKTQ1IssueChange(value, e), "data-tracking-id": "get-support-ktQ1-issue", placeholder: t(`The more detail that you include, the easier it is for us to help you. \nExample: \nI'm unable to start the SSHD service and am receiving the error message "Bad yes/no \nargument for ShowPatchLevel parameter"`), resizeOrientation: "vertical", validated: props.isSummarizeInvalid ? 'error' : 'default', rows: isLgScreenHeight ? 10 : 4, ref: textAreaRef, onClick: handleTextAreaClick }),
+        React.createElement("p", { className: "form-instructions pf-v5-u-danger-color-100", "data-tracking-id": "large-20k-warning-ktQ1-environment" }, `${(issue === null || issue === void 0 ? void 0 : issue.length) > CASE_DETAILS_ISSUE_LIMIT
+            ? `This description exceeds ${CASE_DETAILS_ISSUE_LIMIT} characters. Try shortening it.`
+            : ''}`)));
 }

package/lib/esm/components/CaseInformation/FileDiag.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 interface IProps {
     className?: string;
 }
-export declare function FileDiag(props: IProps): JSX.Element;
+export declare function FileDiag(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=FileDiag.d.ts.map

package/lib/esm/components/CaseInformation/FileDiag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileDiag.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/FileDiag.tsx"],"names":[],"mappings":"AAYA,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,eAqCrC"}
+{"version":3,"file":"FileDiag.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/FileDiag.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,qBAqCrC"}

package/lib/esm/components/CaseInformation/Fts.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 interface IProps {
     inlineEditable: boolean;
     hideSaveCancel: boolean;
     initialIsEditing?: boolean;
 }
-declare function Fts(props: IProps): JSX.Element;
+declare function Fts(props: IProps): React.JSX.Element;
 declare namespace Fts {
     var defaultProps: Partial<IProps>;
 }

package/lib/esm/components/CaseInformation/Fts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fts.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Fts.tsx"],"names":[],"mappings":"AAoBA,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAQD,iBAAS,GAAG,CAAC,KAAK,EAAE,MAAM,eAsLzB;kBAtLQ,GAAG;;;AAyLZ,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Fts.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Fts.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAS/D,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAQD,iBAAS,GAAG,CAAC,KAAK,EAAE,MAAM,qBA6OzB;kBA7OQ,GAAG;;;AAgPZ,eAAe,GAAG,CAAC"}