@rh-support/troubleshoot 2.7.1 → 2.32.2-prodBackup

package/lib/esm/components/shared/input/ContactSelectorInternal.js

@@ -8,20 +8,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { contacts } from '@cee-eng/hydrajs';
+import { Button, Label, LabelGroup, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import { haltEvent } from '@rh-support/utils';
 import assign from 'lodash/assign';
 import differenceBy from 'lodash/differenceBy';
 import filter from 'lodash/filter';
 import isEmpty from 'lodash/isEmpty';
 import unionBy from 'lodash/unionBy';
 import React from 'react';
-import { AsyncTypeahead, Highlighter } from 'react-bootstrap-typeahead';
-// https://github.com/ericgio/react-bootstrap-typeahead/blob/master/docs/Props.md
 export class ContactSelectorInternal extends React.Component {
     constructor(props) {
         super(props);
+        this.searchTimeout = null;
+        this.inputRef = React.createRef();
         this.getSelectedLabel = (contact) => {
             if (!contact) {
-                return undefined;
+                return '';
             }
             const userName = contact.internalSso || contact.ssoUsername || '';
             const fullName = contact.fullNameCustom
@@ -31,7 +34,7 @@ export class ContactSelectorInternal extends React.Component {
         };
         this.getContactsSelected = (contacts) => {
             if (!contacts)
-                return undefined;
+                return [];
             return filter(contacts, (c) => this.isValidContactForQuery(c));
         };
         this.isValidContactForQuery = (c) => {
@@ -43,11 +46,6 @@ export class ContactSelectorInternal extends React.Component {
                 this.props.onSelect(contacts);
             }
         });
-        this.onFocus = (event) => {
-            if (!this.state.selectedContacts && isEmpty(this.state.options) && this.props.contactListParams) {
-                this.handleSearch('');
-            }
-        };
         this.handleSearch = (query) => __awaiter(this, void 0, void 0, function* () {
             if (query == null) {
                 return;
@@ -73,7 +71,7 @@ export class ContactSelectorInternal extends React.Component {
                 const response = yield contacts.getSFDCContacts(queryParams, this.controller.signal);
                 const options = response && response.items && response.items.length ? this.getContactsSelected(response.items) : [];
                 this.setState({
-                    options: differenceBy(options, this.props.contactsToExclude, 'ssoUsername'),
+                    options: differenceBy(options, this.props.contactsToExclude || [], 'ssoUsername'),
                     isLoading: false,
                 });
             }
@@ -85,35 +83,147 @@ export class ContactSelectorInternal extends React.Component {
                 });
             }
         });
-        this.renderMenuItemChildren = (option, p) => (React.createElement(Highlighter, { key: option.ssoUsername, search: p.text }, this.getSelectedLabel(option)));
-        this.typeahead = React.createRef();
+        this.handleInputChange = (value) => {
+            this.setState({ searchValue: value });
+            // Clear existing timeout
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+            // Set new timeout for debounced search
+            this.searchTimeout = setTimeout(() => {
+                if (value.length >= (this.props.minLength || 0)) {
+                    this.handleSearch(value);
+                    this.setState({ isOpen: true });
+                }
+                else if (value.length === 0) {
+                    this.setState({ options: [], isOpen: false });
+                }
+            }, this.props.debounceDelay || 300);
+        };
+        this.handleSelect = (event, selection) => {
+            if (this.props.multiple) {
+                const currentSelected = this.state.selectedContacts || [];
+                const isAlreadySelected = currentSelected.some((c) => c.ssoUsername === selection.ssoUsername);
+                if (isAlreadySelected) {
+                    const newSelected = currentSelected.filter((c) => c.ssoUsername !== selection.ssoUsername);
+                    this.onChange(newSelected);
+                }
+                else {
+                    const newSelected = [...currentSelected, selection];
+                    this.onChange(newSelected);
+                }
+                // Clear search value after selection in multiple mode
+                this.setState({ searchValue: '' });
+            }
+            else {
+                this.onChange([selection]);
+                this.setState({ isOpen: false, searchValue: '' });
+            }
+        };
+        this.handleRemoveContact = (contactToRemove) => {
+            const currentSelected = this.state.selectedContacts || [];
+            const newSelected = currentSelected.filter((c) => c.ssoUsername !== contactToRemove.ssoUsername);
+            this.onChange(newSelected);
+        };
+        this.handleKeyDown = (event) => {
+            const { options, focusedItemIndex, isOpen } = this.state;
+            if (!isOpen || options.length === 0)
+                return;
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.setState((prevState) => ({
+                        focusedItemIndex: prevState.focusedItemIndex === null || prevState.focusedItemIndex >= options.length - 1
+                            ? 0
+                            : prevState.focusedItemIndex + 1,
+                    }));
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.setState((prevState) => ({
+                        focusedItemIndex: prevState.focusedItemIndex === null || prevState.focusedItemIndex <= 0
+                            ? options.length - 1
+                            : prevState.focusedItemIndex - 1,
+                    }));
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (focusedItemIndex !== null && options[focusedItemIndex]) {
+                        this.handleSelect(null, options[focusedItemIndex]);
+                    }
+                    break;
+                case 'Escape':
+                    this.setState({ isOpen: false, focusedItemIndex: null });
+                    break;
+            }
+        };
+        this.handleFocus = () => {
+            if (this.state.searchValue.length >= (this.props.minLength || 0)) {
+                this.setState({ isOpen: true });
+            }
+        };
+        this.handleBlur = () => {
+            // Delay closing to allow for clicks on menu items
+            setTimeout(() => {
+                this.setState({ isOpen: false, focusedItemIndex: null });
+            }, 150);
+        };
+        this.handleClear = () => {
+            this.setState({ searchValue: '', options: [], isOpen: false });
+            this.onChange([]);
+        };
+        this.onToggle = () => {
+            this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
+        };
         this.state = {
             isLoading: false,
-            selectedContacts: this.getContactsSelected(props.selectedContacts),
+            selectedContacts: this.getContactsSelected(props.selectedContacts || []),
             options: [],
+            isOpen: false,
+            searchValue: '',
+            focusedItemIndex: null,
         };
     }
     componentDidUpdate(prevProps) {
-        if (!isEmpty(prevProps.selectedContacts) && isEmpty(this.props.selectedContacts)) {
+        if (!isEmpty(prevProps.selectedContacts || []) && isEmpty(this.props.selectedContacts || [])) {
             this.setState({ selectedContacts: [], options: [] });
-            this.typeahead.current.clear();
         }
         if (this.props.showSelectedContacts) {
-            if (prevProps.selectedContacts.length !== this.props.selectedContacts.length) {
-                this.setState({ selectedContacts: this.getContactsSelected(this.props.selectedContacts) });
+            const prevSelected = prevProps.selectedContacts || [];
+            const currentSelected = this.props.selectedContacts || [];
+            if (prevSelected.length !== currentSelected.length) {
+                this.setState({ selectedContacts: this.getContactsSelected(currentSelected) });
             }
             else {
-                const unionOldNew = unionBy(prevProps.selectedContacts, this.props.selectedContacts, 'ssoUsername');
-                if (unionOldNew.length !== this.props.selectedContacts.length ||
-                    prevProps.selectedContacts.length !== this.props.selectedContacts.length) {
-                    this.setState({ selectedContacts: this.getContactsSelected(this.props.selectedContacts) });
+                const unionOldNew = unionBy(prevSelected, currentSelected, 'ssoUsername');
+                if (unionOldNew.length !== currentSelected.length || prevSelected.length !== currentSelected.length) {
+                    this.setState({ selectedContacts: this.getContactsSelected(currentSelected) });
                 }
             }
         }
     }
     render() {
-        const conditionalProps = Object.assign({}, (this.props.renderToken ? { renderToken: this.props.renderToken } : undefined));
-        return (React.createElement(AsyncTypeahead, Object.assign({ id: this.props.id + '-contact-select', className: `${this.props.className} contact-select`, defaultInputValue: "", autoFocus: this.props.autoFocus, clearButton: this.props.clearButton, isLoading: this.state.isLoading || this.props.isUpdating, options: this.state.options, selected: !isEmpty(this.state.selectedContacts) ? this.state.selectedContacts : [], onChange: this.onChange, onFocus: this.onFocus, labelKey: this.getSelectedLabel, onSearch: this.handleSearch, delay: this.props.debounceDelay, maxResults: this.props.maxResults, placeholder: this.props.placeholder, ref: this.typeahead, renderMenuItemChildren: this.renderMenuItemChildren, size: this.props.typeAheadSize, useCache: this.props.useCache, minLength: this.props.minLength, disabled: this.props.disabled || this.props.isUpdating, multiple: this.props.multiple }, conditionalProps)));
+        const { selectedContacts = [], options, isLoading, isOpen, searchValue, focusedItemIndex } = this.state;
+        // For multiple selection, always show the search value so typed text is visible
+        // For single selection, show selected contact label or search value
+        const displayValue = this.props.multiple
+            ? searchValue
+            : selectedContacts[0]
+                ? this.getSelectedLabel(selectedContacts[0])
+                : searchValue;
+        const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: this.onToggle, isExpanded: isOpen, isDisabled: this.props.disabled || this.props.isUpdating, isFullWidth: true },
+            React.createElement(TextInputGroup, { isPlain: true },
+                React.createElement(TextInputGroupMain, { value: displayValue, onChange: (_, value) => this.handleInputChange(value), onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, placeholder: this.props.placeholder || 'Search contact by name or username', ref: this.inputRef, autoComplete: "off", isExpanded: isOpen, role: "combobox" }, this.props.multiple && selectedContacts.length > 0 && (React.createElement(LabelGroup, { "aria-label": "Selected contacts" }, selectedContacts.map((contact, index) => {
+                    var _a, _b;
+                    const isDisabled = !!((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.disableContactRemoval) === null || _b === void 0 ? void 0 : _b.find((v) => v.ssoUsername === contact.ssoUsername));
+                    return (React.createElement(Label, { key: contact.ssoUsername, variant: "outline", color: "blue", onClick: haltEvent, onClose: () => this.handleRemoveContact(contact), isDisabled: isDisabled }, this.getSelectedLabel(contact)));
+                })))),
+                React.createElement(TextInputGroupUtilities, null,
+                    isLoading && React.createElement(Spinner, { size: "sm" }),
+                    this.props.clearButton && (searchValue || selectedContacts.length > 0) && (React.createElement(Button, { variant: "plain", icon: React.createElement(TimesCircleIcon, null), onClick: this.handleClear, "aria-label": "Clear input" }))))));
+        return (React.createElement("div", { className: `${this.props.className} contact-select` },
+            React.createElement(Select, { id: this.props.id + '-contact-select', isOpen: isOpen, selected: this.props.multiple ? selectedContacts : selectedContacts[0] || null, onSelect: this.handleSelect, onOpenChange: (isOpen) => this.setState({ isOpen }), toggle: toggle, shouldFocusFirstItemOnOpen: false, shouldFocusToggleOnSelect: false, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onBlur: this.handleBlur, "data-tracking-id": "external-case-contact-selector" },
+                React.createElement(SelectList, { isAriaMultiselectable: this.props.multiple }, options.length > 0 ? (options.map((contact, index) => (React.createElement(SelectOption, { key: contact.ssoUsername, value: contact, isFocused: focusedItemIndex === index, isSelected: selectedContacts.some((c) => c.ssoUsername === contact.ssoUsername) }, this.getSelectedLabel(contact))))) : (React.createElement(SelectOption, { isDisabled: true }, isLoading ? 'Searching...' : searchValue ? 'No matches found.' : 'Type to search...'))))));
     }
 }
 ContactSelectorInternal.defaultProps = {

package/lib/esm/components/shared/useIsSectionValid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsSectionValid.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/useIsSectionValid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAuB1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAKnE,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,gBAAgB;;;;;EAgR9D"}
+{"version":3,"file":"useIsSectionValid.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/useIsSectionValid.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAuB/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAKnE,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,gBAAgB;;;;;EAmU9D"}

package/lib/esm/components/shared/useIsSectionValid.js

@@ -1,8 +1,18 @@
+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 { GlobalMetadataStateContext } from '@rh-support/react-context';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useCaseSelector } from '../../context/CaseContext';
 import { RecommendationStateContext } from '../../context/RecommendationContext';
@@ -14,7 +24,7 @@ import { AppRouteSections } from '../../reducers/RouteConstNTypes';
 import { AttachmentStateContext } from './fileUpload/reducer/AttachmentReducerContext';
 export function useIsSectionValid(sectionName) {
     var _a, _b;
-    const { caseState, caseType, product, version, contactSSOName, accountNumber, summary, hostname, contactInfo24x7, alternateId, selectedAccountDetails, issue, environment, timeFramesAndUrgency, periodicityOfIssue, ABTestVariation, } = useCaseSelector((state) => ({
+    const { caseState, caseType, product, version, contactSSOName, accountNumber, summary, hostname, contactInfo24x7, alternateId, selectedAccountDetails, issue, environment, timeFramesAndUrgency, periodicityOfIssue, ABTestVariation, ssoUsername, manageSupportCases, } = useCaseSelector((state) => ({
         caseState: state,
         caseType: state.caseDetails.caseType,
         product: state.caseDetails.product,
@@ -31,7 +41,26 @@ export function useIsSectionValid(sectionName) {
         timeFramesAndUrgency: state.caseDetails.timeFramesAndUrgency,
         periodicityOfIssue: state.caseDetails.periodicityOfIssue,
         ABTestVariation: state.ABTestVariation,
+        ssoUsername: state.selectedOwner.data.ssoUsername,
+        manageSupportCases: state.selectedOwner.data.manageSupportCases,
     }), isEqual);
+    const [isEntitlement, setIsEntitlement] = useState(null);
+    useEffect(() => {
+        const fetchContactDetails = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (ssoUsername) {
+                try {
+                    const response = yield contacts.getSFDCContactBySso(ssoUsername);
+                    setIsEntitlement((_a = response === null || response === void 0 ? void 0 : response.isEntitled) !== null && _a !== void 0 ? _a : null);
+                }
+                catch (error) {
+                    console.error('Error fetching contact details:', error);
+                    setIsEntitlement(null);
+                }
+            }
+        });
+        fetchContactDetails();
+    }, [ssoUsername]);
     //&seSessionId=8e8960ac-680b-443e-bf67-9e13f2acd64e
     const isATestvariation = ABTestVariation === 'A';
     const isBTestvariation = ABTestVariation === 'B' || isEmpty(ABTestVariation);
@@ -57,7 +86,9 @@ export function useIsSectionValid(sectionName) {
         let isValid = !isEmpty(caseType) &&
             !isEmpty(accountNumber) &&
             !isEmpty(contactSSOName) &&
-            !selectedAccountDetails.data.subscriptionAbuse;
+            !selectedAccountDetails.data.subscriptionAbuse &&
+            (manageSupportCases !== null && manageSupportCases !== void 0 ? manageSupportCases : true) &&
+            (isEntitlement !== null && isEntitlement !== void 0 ? isEntitlement : true);
         if (isATestvariation) {
             isValid = isValid && !isEmpty(product) && !isEmpty(version);
         }
@@ -130,6 +161,7 @@ export function useIsSectionValid(sectionName) {
                     !isEmpty(version) &&
                     !isEmpty(summary) &&
                     !isEmpty(issue) &&
+                    isEntitlement === true &&
                     isClusterIDValid(caseState, (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult);
                 return isValid;
             }
@@ -199,12 +231,36 @@ export function useIsSectionValid(sectionName) {
             React.createElement("a", { href: "/support/contact/customerService" }, "Customer Service"),
             " for assistance.")) : ('');
     };
+    const getSupportSectionError = () => {
+        if (manageSupportCases === false) {
+            return (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."));
+        }
+        if (isEntitlement === false) {
+            return (React.createElement(Trans, { i18nKey: "i18ValidEntitlementContactCustomerService" },
+                "You need a valid entitlement to create a case.\u00A0 Please contact",
+                ' ',
+                React.createElement("a", { href: "/support/contact/customerService" }, "Customer Service"),
+                " for assistance."));
+        }
+        return '';
+    };
     const activeSectionError = (sectionNameLocal) => {
         if (!sectionNameLocal)
             return '';
         switch (sectionNameLocal) {
             case AppRouteSections.RESOURCES:
-                return recommendationSectionError();
+                if (isCaseCreate === false) {
+                    return getSupportSectionError();
+                }
+                else {
+                    return recommendationSectionError();
+                }
+            case AppRouteSections.GET_SUPPORT:
+                return getSupportSectionError();
             default:
                 return '';
         }

package/lib/esm/components/wizardLayout/GlobalTroubleshootEffects.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalTroubleshootEffects.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/GlobalTroubleshootEffects.tsx"],"names":[],"mappings":"AASA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAWvD,OAAO,EAAqB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAQrF,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,qBAgTtD"}
+{"version":3,"file":"GlobalTroubleshootEffects.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/GlobalTroubleshootEffects.tsx"],"names":[],"mappings":"AASA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAWvD,OAAO,EAAuC,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAYvG,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,qBAuTtD"}

package/lib/esm/components/wizardLayout/GlobalTroubleshootEffects.js

@@ -24,7 +24,8 @@ import { useResetCaseCreate } from '../../hooks/useResetCaseCreate';
 import { CASE_DEATILS_SOURCE_REFERRER_LIMIT } from '../../reducers/CaseConstNTypes';
 import { getDescriptionWOQues } from '../../reducers/CaseHelpers';
 import { setCaseAccountNumber, setCaseDetails, setCaseOwner } from '../../reducers/CaseReducer';
-import { setRouteFlags } from '../../reducers/RouteReducer';
+import { AppRouteSections } from '../../reducers/RouteConstNTypes';
+import { setActiveSectionChanged, setRouteFlags, updateisNextBtnClickedToShowValidationError, } from '../../reducers/RouteReducer';
 import { fetchEdmundAbbottRules } from '../../reducers/RulesReducer';
 import { fetchTopContent } from '../../reducers/TopContentReducer';
 import RouteUtils from '../../utils/routeUtils';
@@ -117,6 +118,8 @@ export function GlobalTroubleshootEffects(props) {
     }, [allProducts.data.productsResult, caseDispatch, props.routeProps]);
     // if you want to hide any section on page load then the logic will go here..
     useEffect(() => {
+        // Reset validation error state when the troubleshoot app loads freshly
+        updateisNextBtnClickedToShowValidationError(dispatchToRouteReducer, false);
         if (!isFirstMount.current && loggedInUser.data && managedAccounts.data)
             return;
         if (isFirstMount.current) {
@@ -143,11 +146,14 @@ export function GlobalTroubleshootEffects(props) {
      */
     useEffect(() => {
         if (props.routeProps.location.pathname === RouteUtils.seBasePath) {
+            // Set the active section to the default section when navigating to base path
+            const defaultSection = isCaseCreate ? AppRouteSections.GET_SUPPORT : AppRouteSections.TROUBLESHOOT;
+            setActiveSectionChanged(dispatchToRouteReducer, defaultSection, '');
             RouteUtils.navigateToDefaltSection(props.routeProps, isCaseCreate, isSearchIntent, false);
             !isSearchIntent && resetCaseCreateState();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dispatchToRouteReducer, props.routeProps, isCaseCreate, isSearchIntent]);
+    }, [dispatchToRouteReducer, props.routeProps.location.pathname, isCaseCreate, isSearchIntent]);
     /**
      * Setting Default AccountNumber and ContactSsoUsername from loggedInUsersAccount
      * Disabling exhaustive-deps rule as we don't want to reset default values if user manually clears these from UI.

package/lib/esm/components/wizardLayout/MainSection.js

@@ -21,7 +21,7 @@ const MainSection = (props) => {
         React.createElement("section", { id: `${props.section}-section`, tabIndex: -1, "aria-labelledby": `${props.section}-heading`, "aria-describedby": `${props.section}-description`, className: `main-step-content ${props.className ? props.className : ''}` },
             isConfirmedStateSideSupport && props.section !== AppRouteSections.SUBMIT_CASE && (React.createElement(Alert, { isInline: true, variant: "warning", title: ((_c = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _c === void 0 ? void 0 : _c.hasConfirmedStatesideSupport)
                     ? 'You have a confirmed stateside support account'
-                    : 'This is a confirmed stateside support account', className: "pf-v5-u-mb-lg" },
+                    : 'This is a confirmed stateside support account', className: "pf-v6-u-mb-lg" },
                 React.createElement("p", null,
                     "To adhere to data regulations, open this case through",
                     ' ',
@@ -31,7 +31,7 @@ const MainSection = (props) => {
                     "instead of traditional support."))),
             React.createElement(LoadingIndicator, { show: props.isLoading, size: "lg" }),
             !props.isLoading && (React.createElement(React.Fragment, null,
-                React.createElement("header", { className: "pf-v5-u-display-none-on-sm" },
+                React.createElement("header", { className: "pf-v6-u-display-none-on-sm" },
                     props.title && (React.createElement("h2", { "aria-label": props.stepNumber &&
                             `Step ${props.stepNumber} of ${props.totalSteps}: ${props.section}`, id: `${props.section}-heading` }, props.title)),
                     props.description && (React.createElement("p", { id: `${props.section}-description`, className: `${props.descriptionClassName ? props.descriptionClassName : ''}` }, props.description))),

package/lib/esm/components/wizardLayout/NewFeatureModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewFeatureModal.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/NewFeatureModal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,QAAA,MAAM,eAAe,yBA8EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"NewFeatureModal.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/NewFeatureModal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,QAAA,MAAM,eAAe,yBA6EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/esm/components/wizardLayout/NewFeatureModal.js

@@ -1,4 +1,4 @@
-import { Button, Checkbox, Modal, Title } from '@patternfly/react-core';
+import { Button, Checkbox, Modal, ModalFooter, Title } from '@patternfly/react-core';
 import { useLocalStorage, useSessionStorage } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { getConfigField, PCM_CONFIG_FIELD_TYPE } from '@rh-support/utils';
@@ -27,12 +27,12 @@ const NewFeatureModal = () => {
     const onBannerCheckboxChange = () => {
         setCheckedToNotShowModal(!checkedToNotShowModal);
     };
-    return (React.createElement(React.Fragment, null, !shouldNotShowModal && isNewFeatureBannerVisible && showModal && (React.createElement(Modal, { className: "newFeatureModal", width: "45%", "aria-label": t('New feature modal'), isOpen: showModal, onClose: handleModalToggle, actions: [
-            React.createElement(Button, { key: "close", variant: "primary", "data-tracking-id": "new-feature-modal-close", onClick: handleModalToggle }, t('Close')),
-        ], showClose: false },
+    return (React.createElement(React.Fragment, null, !shouldNotShowModal && isNewFeatureBannerVisible && showModal && (React.createElement(Modal, { className: "newFeatureModal", width: "45%", "aria-label": t('New feature modal'), isOpen: showModal, onClose: handleModalToggle },
         React.createElement(RedHatCustomerPortalIcon, null),
-        React.createElement(Title, { headingLevel: "h2", className: "pf-v5-u-font-weight-bold" }, t('Change: Application Announcement For KT Question Update')),
+        React.createElement(Title, { headingLevel: "h2", className: "pf-v6-u-font-weight-bold" }, t('Change: Application Announcement For KT Question Update')),
         React.createElement(Trans, null, "Welcome back! To improve your troubleshooting experience, we've updated how you create cases, changed the questions we ask, and given you more chances to edit your problem. We want to help you solve your technical challenges quickly."),
-        React.createElement(Checkbox, { className: "pf-v5-u-mt-md", id: "new-feature-modal-checkbox", label: t(`I don't want to see this modal again`), isChecked: checkedToNotShowModal, onChange: onBannerCheckboxChange, "data-tracking-id": "new-feature-modal-checkbox" })))));
+        React.createElement(Checkbox, { className: "pf-v6-u-mt-md", id: "new-feature-modal-checkbox", label: t(`I don't want to see this modal again`), isChecked: checkedToNotShowModal, onChange: onBannerCheckboxChange, "data-tracking-id": "new-feature-modal-checkbox" }),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { key: "close", variant: "primary", "data-tracking-id": "new-feature-modal-close", onClick: handleModalToggle }, t('Close')))))));
 };
 export default NewFeatureModal;

package/lib/esm/components/wizardLayout/WizardAside.js

@@ -39,14 +39,14 @@ function WizardAside(props) {
         React.createElement("section", { className: "grid-aside-content" },
             canUseSessionManagement && !isCreatingCase && activeSection !== AppRouteSections.SUBMIT_CASE && (React.createElement(SessionRestore, { routeProps: props.routeProps })),
             canShowFileUploadWidget() && React.createElement(InsightsResults, null),
-            canShowFileUploadWidget() && React.createElement(FileDiag, { className: "pf-v5-u-mb-md" }),
+            canShowFileUploadWidget() && React.createElement(FileDiag, { className: "pf-v6-u-mb-lg" }),
             activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT) &&
                 !isCveModalOpened && React.createElement(CveSidebar, null),
             activeSection === AppRouteSections.RESOURCES && React.createElement(CveSidebar, null),
             canShowEARuleWidget && React.createElement(EARuleWidget, null),
-            !(isIdea && activeSection === 'submit-case') && (React.createElement(AsideResults, { routeProps: props.routeProps, className: "pf-v5-u-mb-md pf-v5-u-mt-0" })),
+            !(isIdea && activeSection === 'submit-case') && (React.createElement(AsideResults, { routeProps: props.routeProps, className: "pf-v6-u-mb-lg pf-v6-u-mt-0" })),
             canShowFileRecommendationSectionsWidget && React.createElement(InsightsResults, { isDisplayOnMain: true }),
-            React.createElement(ClusterRecommendations, { showClusterRecommendationsList: canShowClusterIdReportWidget, className: "pf-v5-u-mb-md pf-v5-u-mt-0" }))));
+            React.createElement(ClusterRecommendations, { showClusterRecommendationsList: canShowClusterIdReportWidget, className: "pf-v6-u-mb-lg pf-v6-u-mt-0" }))));
 }
 WizardAside.defaultProps = defaultProps;
 export default WizardAside;

package/lib/esm/components/wizardLayout/WizardMain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WizardMain.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardMain.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAS,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO9D,OAAO,EAAoB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAQpF,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,qBAAqB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5E;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBAgJhC;AACD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"WizardMain.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardMain.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAS,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO9D,OAAO,EAAoB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAOpF,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,qBAAqB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5E;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBAwMhC;AACD,eAAe,UAAU,CAAC"}

package/lib/esm/components/wizardLayout/WizardMain.js

@@ -1,12 +1,23 @@
-import { Wizard, WizardContextConsumer, WizardFooter } from '@patternfly/react-core/deprecated';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Wizard, WizardNav, WizardNavItem, WizardStep, } from '@patternfly/react-core';
 import { LoadingIndicator } from '@rh-support/components';
 import isEqual from 'lodash/isEqual';
-import React, { Suspense, useContext, useRef, useState } from 'react';
+import React, { Suspense, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route } from 'react-router-dom';
 import { useCaseSelector } from '../../context/CaseContext';
 import { RecommendationDispatchContext } from '../../context/RecommendationContext';
-import { RouteDispatchContext } from '../../context/RouteContext';
+import { RouteContext, RouteDispatchContext } from '../../context/RouteContext';
 import { useWizard } from '../../hooks/useWizard';
 import { RecommendationsConstants } from '../../reducers/RecommendationsReducer';
 import { AppRouteSections } from '../../reducers/RouteConstNTypes';
@@ -22,10 +33,15 @@ function WizardMain(props) {
     const { isCreatingCase } = useCaseSelector((state) => ({
         isCreatingCase: state.isCreatingCase,
     }), isEqual);
+    const { routeState: { isCaseCreate }, } = useContext(RouteContext);
     const [userSeenRecommendations, setUserSeenRecommendations] = useState(false);
     const [userClickedNextonRecommendations, setUserClickedNextonRecommendations] = useState(false);
     const [userScrolledLabel, setUserScrolledLabel] = useState(false);
     const [userCanNavigateToTroubleshoot, setUserCanNavigateToTroubleshoot] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [isNextButtonClicked, setIsNextButtonClicked] = useState(false);
+    const isNextButtonClickedRef = useRef(false);
+    const isBackButtonClickedRef = useRef(false);
     const resultsRowRef = useRef(null);
     const { getStepsSequece } = useWizard(props.routeProps, {
         userSeenRecommendationsfn: setUserSeenRecommendations,
@@ -37,6 +53,9 @@ function WizardMain(props) {
     });
     const dispatchToRouteReducer = useContext(RouteDispatchContext);
     const { t } = useTranslation();
+    useEffect(() => {
+        setActiveSectionChanged(dispatchToRouteReducer, isCaseCreate ? AppRouteSections.GET_SUPPORT : AppRouteSections.TROUBLESHOOT, '');
+    }, [isCaseCreate, dispatchToRouteReducer]);
     const renderSubmitCasePage = () => (React.createElement(MainSection, { section: AppRouteSections.SUBMIT_CASE, title: t('Case has been submitted'), isLoading: isCreatingCase, description: t("We'll be in contact with you shortly. Look for updates on this case."), className: "case-submit-page" },
         React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
             React.createElement(SubmitCase, { routeProps: props.routeProps }))));
@@ -54,13 +73,13 @@ function WizardMain(props) {
         // isLoadingRecommendations needs to be set to false on back when the previous step is the summary
         // step because it can cause the next button to be permanently disabled if the debounce is not called
         // before going back a step. This can be caused if navigating quickly to then away from the recommendations page.
-        if (prevStep.prevId === AppRouteSections.SUMMARIZE) {
+        if (prevStep.id === AppRouteSections.SUMMARIZE) {
             recommendationDispatch({
                 type: RecommendationsConstants.setIsLoadingRecommendations,
                 payload: { isLoadingRecommendations: false },
             });
         }
-        var regex = new RegExp('/' + prevStep.prevId + '$');
+        var regex = new RegExp('/' + prevStep.id + '$');
         RouteUtils.navigateToSection(props.routeProps, props.routeProps.location.pathname.replace(regex, ''), false);
     };
     const onSubmit = () => {
@@ -68,26 +87,50 @@ function WizardMain(props) {
         props.submitCaseAndNavigate(false);
         return;
     };
-    const onCurrentStepChanged = (step) => {
-        setActiveSectionChanged(dispatchToRouteReducer, step.id, step.name);
+    const onCurrentStepChanged = (event, currentStep, prevStep, scope) => {
+        if (isNextButtonClickedRef.current) {
+            onNext(currentStep);
+        }
+        if (isBackButtonClickedRef.current) {
+            onBack(currentStep, prevStep);
+        }
+        setActiveSectionChanged(dispatchToRouteReducer, currentStep.id, currentStep.name);
         updateisNextBtnClickedToShowValidationError(dispatchToRouteReducer, false);
+        isNextButtonClickedRef.current = false;
+        isBackButtonClickedRef.current = false;
+        setIsNextButtonClicked(false);
+    };
+    const customNav = (isExpanded, steps, activeStep, goToStepByIndex) => (React.createElement(WizardNav, { isExpanded: isExpanded }, steps.map((step) => {
+        return (React.createElement(WizardNavItem, { key: step.id, id: step.id, content: step.name, isCurrent: activeStep.id === step.id, isDisabled: !step.canJumpTo, stepIndex: step.index, onClick: () => goToStepByIndex(step.index) }));
+    })));
+    const CustomFooter = (activeStep, goToNextStep, goToPrevStep) => {
+        useEffect(() => {
+            if (steps.length > 2 && (activeStep === null || activeStep === void 0 ? void 0 : activeStep.index) === 2 && isNextButtonClicked) {
+                goToNextStep({});
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [activeStep, steps.length, isNextButtonClicked, goToNextStep]);
+        return (React.createElement(WizardNavigation, { routeProps: props.routeProps, onNext: (e) => {
+                isNextButtonClickedRef.current = true;
+                setIsNextButtonClicked(true);
+                goToNextStep(e);
+                focusWizardMainPanel();
+            }, onBack: (e) => {
+                isBackButtonClickedRef.current = true;
+                goToPrevStep(e);
+                focusWizardMainPanel();
+            }, activeStep: activeStep, onSubmit: onSubmit, confirmSupportModal: props.confirmSupportModal, onShowRestUpdate: (flag) => setShowRestFlag(flag), userSeenRecommendations: userSeenRecommendations, setUserSeenRecommendations: setUserSeenRecommendations, userClickedNextonRecommendationsFn: setUserClickedNextonRecommendations, userClickedNextonRecommendationsValue: userClickedNextonRecommendations, setUserCanNavigateToTroubleshoot: setUserCanNavigateToTroubleshoot, resultsRowRef: resultsRowRef, setUserScrolledLabel: setUserScrolledLabel }));
     };
-    const CustomFooter = (React.createElement(WizardFooter, null,
-        React.createElement(WizardContextConsumer, null, ({ activeStep, onNext, onBack }) => {
-            return (React.createElement(WizardNavigation, { routeProps: props.routeProps, onNext: () => {
-                    onNext();
-                    focusWizardMainPanel();
-                }, onBack: () => {
-                    onBack();
-                    focusWizardMainPanel();
-                }, activeStep: activeStep, onSubmit: onSubmit, confirmSupportModal: props.confirmSupportModal, onShowRestUpdate: (flag) => setShowRestFlag(flag), userSeenRecommendations: userSeenRecommendations, setUserSeenRecommendations: setUserSeenRecommendations, userClickedNextonRecommendationsFn: setUserClickedNextonRecommendations, userClickedNextonRecommendationsValue: userClickedNextonRecommendations, setUserCanNavigateToTroubleshoot: setUserCanNavigateToTroubleshoot, resultsRowRef: resultsRowRef, setUserScrolledLabel: setUserScrolledLabel }));
-        })));
+    const steps = getStepsSequece(showRestFlag);
+    const wizardSteps = steps.map((step) => {
+        const { component } = step, rest = __rest(step, ["component"]);
+        return (React.createElement(WizardStep, Object.assign({ key: step.id }, rest), component));
+    });
     // To add a new step to wizard first need to add the component to appRouteConfugurations
     // in useWizard file then add it to step squences in RouteConstNTypes
-    const steps = getStepsSequece(showRestFlag);
     return (React.createElement(React.Fragment, null,
         React.createElement(NewFeatureModal, null),
-        steps.length !== 0 && (React.createElement(Route, { path: `${RouteUtils.seBasePath}/(${steps[0].id}|describe-issue|open-case)`, render: () => (React.createElement(Wizard, { navAriaLabel: ` navAriaLabel steps `, mainAriaLabel: ` mainAriaLabel content `, steps: steps, footer: CustomFooter, onNext: onNext, onBack: onBack, hideClose: true, backButtonText: t('Go back'), onCurrentStepChanged: onCurrentStepChanged })) })),
+        steps.length !== 0 && (React.createElement(Route, { path: `${RouteUtils.seBasePath}/(${steps[0].id}|describe-issue|open-case)`, render: () => (React.createElement(Wizard, { isVisitRequired: true, nav: customNav, navAriaLabel: ` navAriaLabel steps `, footer: CustomFooter, onStepChange: onCurrentStepChanged }, wizardSteps)) })),
         React.createElement(Route, { exact: true, path: `${RouteUtils.seBasePath}/${AppRouteSections.SUBMIT_CASE}`, render: () => renderSubmitCasePage() })));
 }
 export default WizardMain;

package/lib/esm/components/wizardLayout/WizardNavigation.d.ts

@@ -3,8 +3,8 @@ import { RouteComponentProps } from 'react-router-dom';
 import { IRouteUrlParams, ISectionConfiguration } from '../../reducers/RouteConstNTypes';
 interface IProps {
     routeProps: RouteComponentProps<IRouteUrlParams>;
-    onNext: () => void;
-    onBack: () => void;
+    onNext: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onBack: (e: React.MouseEvent<HTMLButtonElement>) => void;
     activeStep: Partial<ISectionConfiguration>;
     onSubmit: () => void;
     confirmSupportModal: (hasPreferredSecureSupportAccount: boolean) => void;

package/lib/esm/components/wizardLayout/WizardNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WizardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardNavigation.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAoB,eAAe,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM3G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC5E,kCAAkC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACpF,qCAAqC,CAAC,EAAE,OAAO,CAAC;IAChD,gCAAgC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACxE;AAGD,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBA6UtC;kBA7UQ,gBAAgB;;;AA+UzB,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"WizardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardNavigation.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAoB,eAAe,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM3G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,UAAU,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC5E,kCAAkC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACpF,qCAAqC,CAAC,EAAE,OAAO,CAAC;IAChD,gCAAgC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACxE;AAGD,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBA8UtC;kBA9UQ,gBAAgB;;;AAgVzB,eAAe,gBAAgB,CAAC"}