@rh-support/troubleshoot 2.1.21 → 2.2.0

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

@@ -31,7 +31,7 @@ function ManagedAccountsDropdown(props) {
             React.createElement(InfoCircleIcon, null),
             " ",
             React.createElement(Trans, null, "Subscription abuse"))))), children: (React.createElement(React.Fragment, null, account.subscriptionAbuse ? (React.createElement("span", { className: "form-instructions form-invalid" }, getLabelForAccountOption(account))) : (getLabelForAccountOption(account)))) }, account))) || [];
-    return (React.createElement(Dropdown, { className: `push-top ${props.className}`, id: props.id, placeholder: "Select a managed account", list: toOptions(managedAccountsOptions, {
+    return (React.createElement(Dropdown, { className: `margin-top ${props.className}`, id: props.id, placeholder: "Select a managed account", list: toOptions(managedAccountsOptions, {
             childrenKey: 'children',
             actionItemKey: 'actionItem',
         }), selectedItem: selectedItem, title: `Select a managed account`, onChange: props.onManagedAccountChange, disabled: props.disabled || managedAccountsOptions.length === 0 }));

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":"AAqCA,UAAU,MAAM;CAAG;AAEnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eA0RnC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"OwnerSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/OwnerSelector.tsx"],"names":[],"mappings":"AAqCA,UAAU,MAAM;CAAG;AAEnB,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,eA6TnC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -52,22 +52,41 @@ function OwnerSelector(props) {
     const canEditCase = useCanEditCase();
     const setContactPhoneNumber = (sso) => __awaiter(this, void 0, void 0, function* () {
         if (sso === loggedInUser.data.ssoUsername) {
-            setCaseDetails(caseDispatch, {
-                phone: loggedInUser.data.phone,
-                suppliedPhoneNumberVerified: 'True',
-            });
+            if (loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) {
+                setCaseDetails(caseDispatch, {
+                    phoneAreaCodePrefixLineNumber: loggedInUser.data.supportPhoneAreaCodePrefixLineNumber,
+                    phoneCountryCode: loggedInUser.data.supportPhoneCountryCode,
+                    suppliedPhoneNumberVerified: 'True',
+                });
+            }
+            else {
+                setCaseDetails(caseDispatch, {
+                    phone: loggedInUser.data.phone,
+                    suppliedPhoneNumberVerified: 'True',
+                });
+            }
         }
         else {
             try {
                 const selectedContact = yield contacts.getSFDCContactBySso(sso);
-                setCaseDetails(caseDispatch, {
-                    phone: selectedContact.phone,
-                    suppliedPhoneNumberVerified: 'Deferred',
-                });
+                if (selectedContact.supportPhoneAreaCodePrefixLineNumber) {
+                    setCaseDetails(caseDispatch, {
+                        phoneAreaCodePrefixLineNumber: selectedContact.supportPhoneAreaCodePrefixLineNumber,
+                        phoneCountryCode: selectedContact.supportPhoneCountryCode,
+                        suppliedPhoneNumberVerified: 'True',
+                    });
+                }
+                else {
+                    setCaseDetails(caseDispatch, {
+                        phone: selectedContact.phone,
+                        suppliedPhoneNumberVerified: 'Deferred',
+                    });
+                }
             }
             catch (e) {
                 setCaseDetails(caseDispatch, {
-                    phone: '',
+                    phoneAreaCodePrefixLineNumber: '',
+                    phoneCountryCode: '',
                     suppliedPhoneNumberVerified: 'Deferred',
                 });
             }
@@ -76,22 +95,41 @@ function OwnerSelector(props) {
     const updateContactPhoneNumber = (sso) => __awaiter(this, void 0, void 0, function* () {
         try {
             if (sso === loggedInUser.data.ssoUsername) {
-                yield updateCaseDetails(caseDispatch, caseNumber, {
-                    phone: loggedInUser.data.phone,
-                    suppliedPhoneNumberVerified: 'Deferred',
-                });
+                if (loggedInUser.data.supportPhoneAreaCodePrefixLineNumber) {
+                    updateCaseDetails(caseDispatch, caseNumber, {
+                        phoneAreaCodePrefixLineNumber: loggedInUser.data.supportPhoneAreaCodePrefixLineNumber,
+                        phoneCountryCode: loggedInUser.data.supportPhoneCountryCode,
+                        suppliedPhoneNumberVerified: 'True',
+                    });
+                }
+                else {
+                    yield updateCaseDetails(caseDispatch, caseNumber, {
+                        phone: loggedInUser.data.phone,
+                        suppliedPhoneNumberVerified: 'Deferred',
+                    });
+                }
             }
             else {
                 try {
                     const selectedContact = yield contacts.getSFDCContactBySso(sso);
-                    yield updateCaseDetails(caseDispatch, caseNumber, {
-                        phone: selectedContact.phone,
-                        suppliedPhoneNumberVerified: 'Deferred',
-                    });
+                    if (selectedContact.supportPhoneAreaCodePrefixLineNumber) {
+                        updateCaseDetails(caseDispatch, caseNumber, {
+                            phoneAreaCodePrefixLineNumber: selectedContact.supportPhoneAreaCodePrefixLineNumber,
+                            phoneCountryCode: selectedContact.supportPhoneCountryCode,
+                            suppliedPhoneNumberVerified: 'True',
+                        });
+                    }
+                    else {
+                        yield updateCaseDetails(caseDispatch, caseNumber, {
+                            phone: selectedContact.phone,
+                            suppliedPhoneNumberVerified: 'Deferred',
+                        });
+                    }
                 }
                 catch (e) {
                     yield updateCaseDetails(caseDispatch, caseNumber, {
-                        phone: '',
+                        phoneAreaCodePrefixLineNumber: '',
+                        phoneCountryCode: '',
                         suppliedPhoneNumberVerified: 'Deferred',
                     });
                 }
@@ -209,7 +247,7 @@ function OwnerSelector(props) {
     const showUsersWithSelectedGroupAccess = caseNumber &&
         (selectedCaseGroupUsers.isFetching ||
             (!selectedCaseGroupUsers.isFetching && (selectedCaseGroupUsers.data || []).length > 0));
-    return (React.createElement("div", { className: "form-group" },
+    return (React.createElement("div", { className: "form-group get-support-owner-wapper" },
         React.createElement("label", { htmlFor: "get-support-owner" },
             React.createElement(Trans, null, "Owner"),
             React.createElement(ValueChangedIcon, { afterLocalChange: afterLocalChange, comparator: ownerComparator, isLocalChange: localOwnerChange, value: selectedOwner.data, getTooltipContent: getChangedValueTooltip(() => CaseValuesToWatch.owner, (v) => v.fullNameCustom) }),

package/lib/esm/components/AccountInfo/css/accountSelector.css

@@ -1,3 +1,7 @@
 .preview-case .account-selector-wrapper .account-selector {
     width: 100%;
 }
+
+.get-support-owner-wapper input {
+    min-height: 36px;
+}

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":"AAgBA,wBAAgB,sBAAsB,gBA8GrC"}
+{"version":3,"file":"CaseContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseContactPhoneNumber.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,sBAAsB,gBAuKrC"}

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

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { contacts } from '@cee-eng/hydrajs';
 import { InputGroupText, InputGroupTextVariant, ValidatedOptions } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
@@ -15,7 +16,6 @@ import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-co
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { PHONE_INSTRUCTION } from '../../../../constants/caseDetailsConstants';
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
 import { PHONE_LIMIT } from '../../../../reducers/CaseConstNTypes';
@@ -23,8 +23,9 @@ import { updateCaseDetails } from '../../../../reducers/CaseReducer';
 import { ContactPhoneNumberPopOver } from '../../../CaseInformation/ContactPhoneNumberPopOver';
 import { PDFContext } from '../../PDFContainer';
 export function CaseContactPhoneNumber() {
-    const { phone, caseNumber, contactSSOName, suppliedPhoneNumberVerified, isCaseOwnerUpdating } = useCaseSelector((state) => ({
-        phone: state.caseDetails.phone || '',
+    const { phoneCountryCode, phoneAreaCodePrefixLineNumber, caseNumber, contactSSOName, suppliedPhoneNumberVerified, isCaseOwnerUpdating, } = useCaseSelector((state) => ({
+        phoneCountryCode: state.caseDetails.phoneCountryCode || '',
+        phoneAreaCodePrefixLineNumber: state.caseDetails.phoneAreaCodePrefixLineNumber || '',
         caseNumber: state.caseDetails.caseNumber,
         contactSSOName: state.caseDetails.contactSSOName,
         suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
@@ -33,51 +34,94 @@ export function CaseContactPhoneNumber() {
     const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const canEditCase = useCanEditCase();
     const [isCasePhoneUpdating, setCasePhoneUpdating] = useState(false);
-    const [localPhoneState, setLocalPhoneState] = useState(phone);
+    const [localFullPhoneState, setLocalFullPhoneState] = useState(phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber);
+    const [localCountryCodeState, setLocalCountryCodeState] = useState(phoneCountryCode);
     const caseDispatch = useCaseDispatch();
     const caseUpdateError = useCaseUpdateErrorMessage();
     const { t } = useTranslation();
     const { isExportingPDF } = useContext(PDFContext);
     // To handle phone change
-    const onPhoneChange = (phone) => __awaiter(this, void 0, void 0, function* () {
+    const onPhoneChange = (fullPhone) => __awaiter(this, void 0, void 0, function* () {
         if (canEditCase.alert())
             return;
-        setLocalPhoneState(phone);
+        setLocalFullPhoneState(fullPhone);
     });
+    const onCountryCodeChange = (countryCode) => {
+        if (canEditCase.alert())
+            return;
+        setLocalCountryCodeState(countryCode);
+    };
     const onSave = () => __awaiter(this, void 0, void 0, function* () {
         setCasePhoneUpdating(true);
+        const phoneLine = localFullPhoneState
+            .substring(localCountryCodeState.length, localFullPhoneState.length)
+            .trim();
+        const countryCode = localCountryCodeState.trim();
         try {
-            yield updateCaseDetails(caseDispatch, caseNumber, { phone: localPhoneState.trim() });
+            yield updateCaseDetails(caseDispatch, caseNumber, {
+                phoneCountryCode: countryCode,
+                phoneAreaCodePrefixLineNumber: phoneLine,
+            });
             setCasePhoneUpdating(false);
             ToastNotification.addSuccessMessage(t(`Phone number has been successfully updated`));
+            try {
+                contacts.updateContactBySSO(loggedInUser.data.ssoUsername, {
+                    supportPhoneCountryCode: countryCode,
+                    supportPhoneAreaCodePrefixLineNumber: phoneLine,
+                });
+            }
+            catch (e) {
+                // silently fails
+            }
+        }
+        catch (e) {
+            setCasePhoneUpdating(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: '',
+            });
+            setCasePhoneUpdating(false);
+            ToastNotification.addSuccessMessage(t(`Phone number has been successfully updated`));
+            try {
+                contacts.updateContactBySSO(loggedInUser.data.ssoUsername, {
+                    clearPhoneNumber: true,
+                });
+            }
+            catch (e) {
+                // silently fails
+            }
         }
         catch (e) {
             setCasePhoneUpdating(false);
             caseUpdateError.showError(e, t(`Phone number failed to update`));
         }
     });
-    const onClear = () => {
-        setLocalPhoneState('');
-        onSave();
-    };
     const maxLengthErrorMessage = t('Phone number cannot be more than {{limit}} characters.', {
         limit: PHONE_LIMIT,
     });
     const isPhoneNeedsReview = contactSSOName === loggedInUser.data.ssoUsername && suppliedPhoneNumberVerified === 'Deferred';
-    return (React.createElement("div", { className: "form-group", style: { minWidth: '200px' } },
+    return (React.createElement("div", { className: "form-group pf-u-pb-lg", style: { minWidth: '200px' } },
         React.createElement("h3", { className: `subheading subheading-sm ${isExportingPDF ? 'expand-input' : ''}` },
             React.createElement(Trans, null, "Case owner's phone number"),
             !isExportingPDF ? ContactPhoneNumberPopOver() : ''),
         React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
-            React.createElement(PhoneInput, { phoneValue: localPhoneState, onPhoneValueChange: onPhoneChange, validations: (localPhoneState === null || localPhoneState === void 0 ? void 0 : localPhoneState.length) > PHONE_LIMIT
+            React.createElement(PhoneInput, { phoneValue: localFullPhoneState, onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT
                     ? ValidatedOptions.error
                     : isPhoneNeedsReview
                         ? ValidatedOptions.warning
                         : ValidatedOptions.default, isDisabled: isCasePhoneUpdating || isCaseOwnerUpdating, isLoading: isCasePhoneUpdating, "data-tracking-id": "case-details-page-supplied-phone" }),
-            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: (localPhoneState === null || localPhoneState === void 0 ? void 0 : localPhoneState.length) > PHONE_LIMIT || localPhoneState === phone, style: { display: isExportingPDF ? 'none' : '' } },
+            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, 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' : '' } },
                 React.createElement(TimesIcon, { color: "#6A6E73" }))),
-        (localPhoneState === null || localPhoneState === void 0 ? void 0 : localPhoneState.length) > PHONE_LIMIT ? (React.createElement("p", { className: "form-instructions form-invalid" }, maxLengthErrorMessage)) : (React.createElement("p", { className: "form-instructions" },
-            React.createElement(Trans, null, PHONE_INSTRUCTION)))));
+        (localFullPhoneState === null || localFullPhoneState === void 0 ? void 0 : localFullPhoneState.length) > PHONE_LIMIT && (React.createElement("p", { className: "form-instructions form-invalid" }, maxLengthErrorMessage))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseInformation.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AASvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eAyGpD"}
+{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseInformation.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AASvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eA8GpD"}

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

@@ -60,14 +60,14 @@ export default function CaseInformation(props) {
     ]);
     return (React.createElement(React.Fragment, null,
         React.createElement(LoadingIndicator, { show: isMetadataLoading(), size: "lg" }),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "push-top", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError() }),
-        React.createElement(AlertMessage, { show: !canManageCase(loggedInUserJwtToken), variant: AlertType.DANGER, className: "push-top" },
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-u-mt-lg", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError() }),
+        React.createElement(AlertMessage, { show: !canManageCase(loggedInUserJwtToken), variant: AlertType.DANGER, className: "pf-u-mt-lg" },
             React.createElement(Trans, { i18nKey: "i18ManageCaseContactCustomerService" },
                 "You need additional access to manage cases.\u00A0 Please contact",
                 ' ',
                 React.createElement("a", { href: "/support/contact/customerService" }, "Customer Service"),
                 " for assistance.")),
-        React.createElement(AlertMessage, { show: hasInvalidEntitlements, variant: AlertType.DANGER, className: "push-top", isInline: true },
+        React.createElement(AlertMessage, { show: hasInvalidEntitlements, variant: AlertType.DANGER, className: "pf-u-mt-lg", isInline: true },
             React.createElement(Trans, { i18nKey: "i18ValidEntitlementContactCustomerService" },
                 "You need a valid entitlement to create a case.\u00A0 Please contact",
                 ' ',

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

@@ -1 +1 @@
-{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAaA,wBAAgB,kBAAkB,gBA8CjC"}
+{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAYA,wBAAgB,kBAAkB,gBAuDjC"}

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

@@ -4,35 +4,42 @@ import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { PHONE_INSTRUCTION } from '../../constants/caseDetailsConstants';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { PHONE_LIMIT } from '../../reducers/CaseConstNTypes';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 import { ContactPhoneNumberPopOver } from './ContactPhoneNumberPopOver';
 export function ContactPhoneNumber() {
     var _a, _b;
-    const { caseDetails } = useCaseSelector((state) => ({
-        caseDetails: state.caseDetails,
-        selectedOwner: state.selectedOwner,
+    const { suppliedPhoneNumberVerified, severity, phoneCountryCode, phoneAreaCodePrefixLineNumber } = useCaseSelector((state) => ({
+        suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
+        severity: state.caseDetails.severity,
+        phoneCountryCode: state.caseDetails.phoneCountryCode,
+        phoneAreaCodePrefixLineNumber: state.caseDetails.phoneAreaCodePrefixLineNumber,
     }), isEqual);
+    const getPhone = () => phoneCountryCode + ' ' + phoneAreaCodePrefixLineNumber;
     const caseDispatch = useCaseDispatch();
     const { t } = useTranslation();
-    const onPhoneChange = (phone) => {
-        setCaseDetails(caseDispatch, { phone });
+    const onPhoneChange = (fullPhone) => {
+        setCaseDetails(caseDispatch, {
+            phoneAreaCodePrefixLineNumber: phoneCountryCode
+                ? fullPhone.substring(phoneCountryCode.length, fullPhone.length).trim()
+                : fullPhone.trim(),
+        });
+    };
+    const onCountryCodeChange = (phoneCountryCode) => {
+        setCaseDetails(caseDispatch, { phoneCountryCode });
     };
     const maxLengthErrorMessage = t('Phone number cannot be more than {{limit}} characters.', {
         limit: PHONE_LIMIT,
     });
-    return (React.createElement("div", { className: "form-group", style: { minWidth: '200px' } },
-        React.createElement("label", { className: "subheading subheading-sm" },
+    return (React.createElement("div", { className: "form-group pf-u-pb-xl", style: { minWidth: '200px' } },
+        React.createElement("label", null,
             React.createElement(Trans, null, "Case owner's phone number"),
             ContactPhoneNumberPopOver()),
-        React.createElement(PhoneInput, { phoneValue: caseDetails.phone, onPhoneValueChange: onPhoneChange, validations: ((_a = caseDetails.phone) === null || _a === void 0 ? void 0 : _a.length) > PHONE_LIMIT
+        React.createElement(PhoneInput, { phoneValue: getPhone(), onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: ((_a = getPhone) === null || _a === void 0 ? void 0 : _a.length) > PHONE_LIMIT
                 ? ValidatedOptions.error
-                : caseDetails.severity === "1 (Urgent)" /* SEV_1 */ &&
-                    isEmpty(caseDetails.suppliedPhoneNumberVerified)
+                : severity === "1 (Urgent)" /* SEV_1 */ && isEmpty(suppliedPhoneNumberVerified)
                     ? ValidatedOptions.warning
                     : ValidatedOptions.default }),
-        ((_b = caseDetails.phone) === null || _b === void 0 ? void 0 : _b.length) > PHONE_LIMIT ? (React.createElement("p", { className: "form-instructions form-invalid" }, maxLengthErrorMessage)) : (React.createElement("p", { className: "form-instructions" },
-            React.createElement(Trans, null, PHONE_INSTRUCTION)))));
+        ((_b = getPhone()) === null || _b === void 0 ? void 0 : _b.length) > PHONE_LIMIT && (React.createElement("p", { className: "form-instructions form-invalid" }, maxLengthErrorMessage))));
 }

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,wBAAgB,yBAAyB,gBA2BxC"}
+{"version":3,"file":"ContactPhoneNumberPopOver.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumberPopOver.tsx"],"names":[],"mappings":"AAKA,wBAAgB,yBAAyB,gBAexC"}

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

@@ -4,10 +4,6 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 export function ContactPhoneNumberPopOver() {
     return (React.createElement(Popover, { "aria-label": "Support Severity Level info", position: PopoverPosition.right, bodyContent: React.createElement("p", null,
-            React.createElement(Trans, null,
-                "These changes to your phone number affect only this case. To update your phone number for all future cases, go to",
-                ' ',
-                React.createElement("a", { href: "https://www.redhat.com/wapps/ugc/protected/personalInfo.html", "data-tracking-id": "case-contact-phone-number-account-details", target: "_blank", rel: "noopener noreferrer" }, "your account details"),
-                ".")), closeBtnAriaLabel: "Close" },
+            React.createElement(Trans, null, "These changes to your phone number affect only this case.")), closeBtnAriaLabel: "Close" },
         React.createElement(QuestionCircleIcon, { className: "pf-u-ml-xs icon-size", "aria-label": "Contact Phone Number Info" })));
 }

package/lib/esm/components/CaseManagement/CaseManagement.js

@@ -19,12 +19,12 @@ export default function CaseManagement(props) {
         setCaseDetails(caseDispatch, payload);
     };
     return (React.createElement("form", null,
-        React.createElement(SupportLevel, null),
-        React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' } },
+        React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' }, className: "severity-flex-case-management" },
             React.createElement(FlexItem, { flex: { default: 'flex_1' } },
-                React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange })),
+                React.createElement(SupportLevel, null)),
             React.createElement(FlexItem, { flex: { default: 'flex_1' } },
-                React.createElement(ContactPhoneNumber, null))),
+                React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange }))),
+        React.createElement(ContactPhoneNumber, null),
         React.createElement(ContactPhoneNumberAlert, null),
         React.createElement(Fts, { inlineEditable: false }),
         React.createElement(CaseLanguageSelector, { isManageStep: true }),

package/lib/esm/components/CaseManagement/Cep.js

@@ -137,7 +137,7 @@ export function Cep(props) {
     if (!canUseCep) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement("div", { className: "form-group push-top" },
+    return (React.createElement("div", { className: "form-group pf-u-mt-lg" },
         React.createElement("input", { type: "checkbox", id: "get-support-cep", name: "get-support-cep", checked: isEqual(cep, undefined) ? false : cep, onChange: onCepChange, "data-tracking-id": "get-support-cep" }),
         React.createElement("label", { htmlFor: "get-support-cep" },
             React.createElement(Trans, null, "Consultant has been engaged")),

package/lib/esm/components/IdeaInformation/IdeaInformtion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IdeaInformtion.d.ts","sourceRoot":"","sources":["../../../../src/components/IdeaInformation/IdeaInformtion.tsx"],"names":[],"mappings":"AA8BA,MAAM,CAAC,OAAO,UAAU,eAAe,gBAsItC"}
+{"version":3,"file":"IdeaInformtion.d.ts","sourceRoot":"","sources":["../../../../src/components/IdeaInformation/IdeaInformtion.tsx"],"names":[],"mappings":"AA8BA,MAAM,CAAC,OAAO,UAAU,eAAe,gBAyItC"}

package/lib/esm/components/IdeaInformation/IdeaInformtion.js

@@ -93,12 +93,12 @@ export default function IdeaInformation() {
             React.createElement("form", null,
                 React.createElement(Description, { inlineEditable: false, customTitle: t('Please describe your request') }),
                 React.createElement(KtQuestions, { onlyShowKT4: true }),
-                React.createElement(SupportLevel, null),
-                React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' } },
+                React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' }, className: "severity-flex-case-management" },
                     React.createElement(FlexItem, { flex: { default: 'flex_1' } },
-                        React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange })),
+                        React.createElement(SupportLevel, null)),
                     React.createElement(FlexItem, { flex: { default: 'flex_1' } },
-                        React.createElement(ContactPhoneNumber, null))),
+                        React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange }))),
+                React.createElement(ContactPhoneNumber, null),
                 React.createElement(ContactPhoneNumberAlert, null),
                 React.createElement(CaseLanguageSelector, { isManageStep: true }),
                 React.createElement(CaseGroup, { init: true }),

package/lib/esm/components/ProductSelector/AllProductsSelector.js

@@ -122,11 +122,11 @@ const AllProductsSelector = forwardRef((props, ref) => {
     }, [caseDispatch, product]);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "form-group product-selector-wrapper" },
-            React.createElement("div", { className: "case-details-summary push-bottom-narrow" },
+            React.createElement("div", { className: "case-details-summary" },
                 React.createElement(OpenCaseIssue, { inlineEditable: false, required: true })),
             React.createElement("div", { className: "all-product-selector-dropdown" },
                 React.createElement(ProductVersionDropdownSelector, { isLoading: allProducts.isFetching, products: props.checkEntitledProduct ? entitledProducts : allProducts.data.productsResult, selectedProduct: selectedProductForDropdown, onProductChange: onProductChange, onVersionChange: onVersionChange, version: version, ref: ref }))),
-        React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "push-top", title: t(`${loggedInUserRights.data.isSSOUsernameSameAsLoggedInUser(contactSSOName)
+        React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "pf-u-mt-lg", title: t(`${loggedInUserRights.data.isSSOUsernameSameAsLoggedInUser(contactSSOName)
                 ? 'You are'
                 : 'Selected owner is'} not allowed to create case on this product.`), show: !allProducts.isFetching && props.checkEntitledProduct && !isEntitledProduct && !isEmpty(product) }),
         React.createElement(LoadingIndicator, { show: topContent.isFetching && props.loadTCOnChange }),

package/lib/esm/components/ProductSelector/NewProductDropdownSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewProductDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAOpE,UAAU,MAAM;IACZ,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC;IACvD,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,0BAA0B,UAAW,MAAM,gBA0GvD,CAAC"}
+{"version":3,"file":"NewProductDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAOpE,UAAU,MAAM;IACZ,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC;IACvD,eAAe,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,0BAA0B,UAAW,MAAM,gBAiHvD,CAAC"}

package/lib/esm/components/ProductSelector/NewProductDropdownSelector.js

@@ -20,7 +20,7 @@ export const NewProductDropdownSelector = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.isNextBtnClickedToShowValidationError]);
     const createOption = (product, id, type) => {
-        return React.createElement(SelectOption, { key: `${type}-${id}`, value: product.name, className: "pf-c-select__menu-wrapper" });
+        return (React.createElement(SelectOption, { key: `${type}-${id}`, value: product.name, className: "pf-c-select__menu-wrapper", "data-tracking-id": `${product.name ? product.name.replace(/\s+/g, '') : ''}-${type}-dropdown` }));
     };
     const onToggle = (isOpen) => {
         setIsOpen(isOpen);

package/lib/esm/components/ProductSelector/NewProductVersionSelector.js

@@ -33,7 +33,7 @@ export const NewProductVersionSelector = (props) => {
         renderVersions();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.selectedProduct]);
-    let options = [React.createElement(SelectGroup, { label: "Version", key: "productVersions" }), ...selectVersionOptions];
+    let options = [React.createElement(SelectGroup, { key: "productVersions" }), ...selectVersionOptions];
     const onToggle = (isOpen) => {
         setIsOpen(isOpen);
     };

package/lib/esm/components/ProductSelector/ProductSelector.js

@@ -35,7 +35,7 @@ export default function ProductSelector(props) {
     const productSelectorRef = useRef(null);
     return (React.createElement(React.Fragment, null,
         allProducts.isFetching && React.createElement(ProductSelectorLoader, null),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "push-top", title: t('There was an error loading products.'), show: allProducts.isError }),
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-u-mt-lg", title: t('There was an error loading products.'), show: allProducts.isError }),
         !allProducts.isFetching && !allProducts.isError && (React.createElement(React.Fragment, null,
             React.createElement("form", null,
                 React.createElement(AllProductsSelector, { isDropdownSelected: true, routeProps: props.routeProps, checkEntitledProduct: isCaseCreate ? true : false, ref: productSelectorRef }),
@@ -50,7 +50,7 @@ export default function ProductSelector(props) {
                         ' ',
                         "for help.") })),
                 React.createElement(EARuleWidget, null)),
-            React.createElement("div", { className: "push-top" },
+            React.createElement("div", { className: "suggestions-result-section" },
                 React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading recommendations') } }, !isEmpty(version) && (React.createElement("div", { className: "common-suggestions" },
                     React.createElement(Recommendations, { renderOnlyRecommendations: true })))))))));
 }

package/lib/esm/components/Recommendations/AsideResults.js

@@ -129,7 +129,7 @@ export function AsideResults() {
     if (!canShowSideRecommendations())
         return React.createElement(React.Fragment, null);
     return (React.createElement("div", { className: "card card-white card-support top-recommendations" },
-        React.createElement("h3", { className: "card-heading popular-solutions" }, isIdea ? React.createElement(Trans, null, "Search recommendations") : React.createElement(Trans, null, "Knowledgebase recommendations")),
+        React.createElement("h3", { className: "card-heading popular-solutions green-card-heading" }, isIdea ? React.createElement(Trans, null, "Search recommendations") : React.createElement(Trans, null, "Knowledgebase recommendations")),
         React.createElement("div", { className: "card-body" },
             React.createElement("ul", { className: "list-flat" }, recommendationState.sideRecommendation.map((doc, index) => {
                 var _a, _b;

package/lib/esm/components/SubmitCase/SubmitCase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitCase.d.ts","sourceRoot":"","sources":["../../../../src/components/SubmitCase/SubmitCase.tsx"],"names":[],"mappings":"AA4BA,MAAM,CAAC,OAAO,UAAU,UAAU,gBA2RjC"}
+{"version":3,"file":"SubmitCase.d.ts","sourceRoot":"","sources":["../../../../src/components/SubmitCase/SubmitCase.tsx"],"names":[],"mappings":"AA4BA,MAAM,CAAC,OAAO,UAAU,UAAU,gBAqSjC"}

package/lib/esm/components/SubmitCase/SubmitCase.js

@@ -1,5 +1,5 @@
 import { Env, publicApi } from '@cee-eng/hydrajs';
-import { ActionList, ActionListItem, Button, Text, TextVariants } from '@patternfly/react-core';
+import { ActionList, ActionListItem, Button, Text, TextVariants, Tooltip } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { AlertMessage, AlertType, useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
@@ -83,8 +83,8 @@ export default function SubmitCase() {
         : attachmentState.caseFiles.selectedLocalFiles.every((localFile) => !isUploadedAndAnalyzed(localFile));
     const isNotAnIdea = caseType !== PreviousCaseTypes.FEATURE_ENHANCEMENT;
     return (React.createElement("article", { className: "gird-main" },
-        React.createElement(AlertMessage, { className: "push-top", title: t('Failed to add user.'), variant: AlertType.DANGER, show: addNotifiedUserError }),
-        React.createElement(AlertMessage, { className: "push-top", variant: AlertType.DANGER, show: caseCreationError, title: t("Sorry, we're experiencing an error"), isInline: true },
+        React.createElement(AlertMessage, { className: "pf-u-mt-lg", title: t('Failed to add user.'), variant: AlertType.DANGER, show: addNotifiedUserError }),
+        React.createElement(AlertMessage, { className: "pf-u-mt-lg", variant: AlertType.DANGER, show: caseCreationError, title: t("Sorry, we're experiencing an error"), isInline: true },
             React.createElement(React.Fragment, null, caseCreationErrorMessage)),
         !isCreatingCase && !caseCreationError && (React.createElement(React.Fragment, null,
             showRemoteRiderBanner && !loggedInUser.data.isInternal && (React.createElement(RemoteRiderBanner, { onConfirm: onRemoteRiderConfirm, onClose: onRemoteRiderClose, caseNumber: caseNumber, isSecureSupport: loggedInUsersAccount.data.secureSupport })),
@@ -92,7 +92,7 @@ export default function SubmitCase() {
                 React.createElement("p", { className: "kicker kicker-sm pf-u-mb-sm" }, !isEmpty(RouteUtils.seBasePath) &&
                     !isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles) ? (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "submit-page-title pf-u-mb-lg" },
-                        React.createElement(CheckCircleIcon, { size: "lg" }),
+                        React.createElement(CheckCircleIcon, { className: "submit-case-check-icon", size: "lg" }),
                         ' ',
                         React.createElement(Text, { className: "pf-u-ml-md pf-u-mb-0", component: TextVariants.h1 },
                             React.createElement(Trans, null, "We've added your case to our queue"))),
@@ -101,7 +101,7 @@ export default function SubmitCase() {
                         "\u00A0",
                         React.createElement(Link, { to: `/case/${caseNumber}`, "data-tracking-id": "get-support-queued-case-number", className: viewDisabled ? 'case-link-disabled' : '' }, caseNumber)))) : (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "submit-page-title" },
-                        React.createElement(CheckCircleIcon, { size: "lg" }),
+                        React.createElement(CheckCircleIcon, { className: "submit-case-check-icon", size: "lg" }),
                         ' ',
                         React.createElement(Text, { component: TextVariants.h1 },
                             React.createElement(Trans, null, "We\u2019ve added your case to our queue"))),
@@ -132,9 +132,11 @@ export default function SubmitCase() {
                 React.createElement("div", null,
                     React.createElement(ActionList, null,
                         React.createElement(ActionListItem, null,
-                            React.createElement(Button, { component: "a", href: `${getRedhatDotComHost(Env.getEnvName())}/wapps/ugc/protected/${'personalInfo.html'}`, target: "_blank", variant: "secondary", "data-tracking-id": "get-support-update-info" }, "Update info")),
+                            React.createElement(Button, { component: "a", href: `${getRedhatDotComHost(Env.getEnvName())}/wapps/ugc/protected/${'personalInfo.html'}`, target: "_blank", variant: "secondary", "data-tracking-id": "get-support-update-info", className: "update-info-button" }, "Update info")),
                         React.createElement(ActionListItem, null,
-                            React.createElement(Button, { className: "pf-u-ml-md", component: (props) => React.createElement(Link, Object.assign({}, props, { to: `/case/${caseNumber}` })), href: getCaseURL(), variant: "primary", "data-tracking-id": "get-support-view-case", isDisabled: viewDisabled }, "View case"))))),
+                            React.createElement(Tooltip, { content: React.createElement("div", null, "File upload in progress."), position: "bottom", isVisible: viewDisabled },
+                                React.createElement("div", null,
+                                    React.createElement(Button, { className: "pf-u-ml-md", component: (props) => (React.createElement(Link, Object.assign({}, props, { to: `/case/${caseNumber}` }))), variant: "primary", "data-tracking-id": "get-support-view-case", isDisabled: viewDisabled }, "View case"))))))),
             !isEmpty(attachmentState.caseFiles.selectedLocalFiles) && (React.createElement(FileUploader, { idToUploadTo: caseNumber, isSessionId: false, isSecureSupport: loggedInUsersAccount.data.secureSupport })),
             React.createElement("div", null,
                 (!isEmpty(topContent.data) || !rulesState.EARules.rules || !clusterRecommendations) &&

package/lib/esm/components/Suggestions/Suggestions.js

@@ -45,7 +45,7 @@ export default function Suggestions(props) {
     return (React.createElement("div", null,
         showTitleDescription && (React.createElement("div", { className: "card card-support" },
             !isTCSearchEnabled && (React.createElement(Trans, null,
-                React.createElement("h3", { className: "card-heading popular-solutions" }, props.title ? props.title : t('i18nKeyPopularSolutions', 'Popular solutions and docs')))),
+                React.createElement("h3", { className: "card-heading popular-solutions green-card-heading" }, props.title ? props.title : t('i18nKeyPopularSolutions', 'Popular solutions and docs')))),
             isTCSearchEnabled && (React.createElement("div", { className: "card-body" },
                 React.createElement(TopContentSearch, { topContentData: topContent.data, topContentResultsWrapperRef: accordionRef, onSearch: onSearchChange, dataTrackingId: "top-content-filter-troubleshoot", enableEventTracking: true }))))),
         React.createElement("pfe-accordion", { ref: accordionRef }, map(filteredTC.slice(0, maxTC), (sug, index) => {

package/lib/esm/components/TroubleshootSection/TroubleshootSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TroubleshootSection.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/TroubleshootSection.tsx"],"names":[],"mappings":"AAkBA,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AASD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,eA0GzC;kBA1GQ,mBAAmB;;;AA6G5B,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"TroubleshootSection.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/TroubleshootSection.tsx"],"names":[],"mappings":"AAmBA,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AASD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,eAqHzC;kBArHQ,mBAAmB;;;AAwH5B,eAAe,mBAAmB,CAAC"}