@rh-support/troubleshoot 2.7.1 → 2.7.11

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

@@ -1,8 +1,5 @@
-import { Modal, ModalVariant } from '@patternfly/react-core';
-import { AlertMessage, AlertType } from '@rh-support/components';
+import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
-import filter from 'lodash/filter';
-import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { forwardRef, useContext, useEffect, useState } from 'react';
@@ -19,7 +16,6 @@ import { ProductVersionDropdownSelector } from './ProductVersionDropdownSelector
 const defaultProps = {
     loadTCOnChange: false,
     showTCAfterButtonClicked: false,
-    checkEntitledProduct: false,
 };
 /**
  * Renders a dropdown list to select all products.
@@ -30,14 +26,11 @@ const defaultProps = {
  * @param props
  */
 const AllProductsSelector = forwardRef((props, ref) => {
-    var _a, _b;
-    const { globalMetadataState: { allProducts, loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
     const caseDispatch = useCaseDispatch();
-    const { product, version, contactSSOName, ABTestVariation } = useCaseSelector((state) => ({
+    const { product, version } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
         version: state.caseDetails.version,
-        contactSSOName: state.caseDetails.contactSSOName,
-        ABTestVariation: state.ABTestVariation,
     }), isEqual);
     const { topContentState: { topContent }, } = useContext(TCStateContext);
     const { routeState: { activeSection, isCaseCreate }, } = useContext(RouteContext);
@@ -46,7 +39,6 @@ const AllProductsSelector = forwardRef((props, ref) => {
     const [showModalButton, setShowModalButton] = useState(false);
     const [isProductChanged, setProductChanged] = useState(false);
     const { t } = useTranslation();
-    const isEntitledProduct = (_b = find((_a = allProducts === null || allProducts === void 0 ? void 0 : allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult, (p) => p.product === product)) === null || _b === void 0 ? void 0 : _b.isEntitledProduct;
     useEffect(() => {
         // after TC data is loaded we open the modal
         const showTCPopUpModalOnProductChange = props.loadTCOnChange && !props.showTCAfterButtonClicked && showModal;
@@ -79,48 +71,37 @@ const AllProductsSelector = forwardRef((props, ref) => {
         };
         RouteUtils.updateQueryParams(props.routeProps, newParams);
     }
-    const entitledProducts = filter(allProducts.data.productsResult, (p) => p.isEntitledProduct);
-    const isATestvariation = ABTestVariation === 'A';
-    const isBTestvariation = ABTestVariation === 'B' || isEmpty(ABTestVariation);
-    // Determine whether to render the ProductVersionDropdownSelector
     const renderProductVersionDropdownSelector = (activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT) &&
         !props.caseCreateExperience) ||
         activeSection === AppRouteSections.GET_SUPPORT ||
-        isBTestvariation ||
-        (isATestvariation && (props.isOnGetSupportPage || props.isOnReviewPage));
-    // Determine whether to render the OpenCaseIssue component
-    const renderOpenCaseIssue = (isBTestvariation &&
-        (activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT) ||
-            activeSection === AppRouteSections.REVIEW ||
-            activeSection === AppRouteSections.SUBMIT_CASE)) ||
-        (isATestvariation &&
-            (activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT) ||
-                activeSection === AppRouteSections.REVIEW ||
-                activeSection === AppRouteSections.SUBMIT_CASE)) ||
-        (!props.caseCreateExperience &&
-            activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT));
+        props.isOnGetSupportPage ||
+        props.isOnReviewPage;
+    const renderOpenCaseIssue = activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT) ||
+        activeSection === AppRouteSections.REVIEW ||
+        activeSection === AppRouteSections.SUBMIT_CASE;
     return (React.createElement(React.Fragment, null,
         renderProductVersionDropdownSelector && (React.createElement("div", { className: "form-group product-selector-wrapper" },
             React.createElement("div", { className: "all-product-selector-dropdown" },
-                React.createElement(ProductVersionDropdownSelector, { isLoading: allProducts.isFetching, products: props.checkEntitledProduct ? entitledProducts : allProducts.data.productsResult, onProductChange: onProductChange, onVersionChange: onVersionChange, ref: ref, isOnSummaryPage: props.isOnSummaryPage, loadTCOnChange: props.loadTCOnChange, isFetching: topContent.isFetching })))),
+                React.createElement(ProductVersionDropdownSelector, { isLoading: allProducts.isFetching, products: allProducts.data.productsResult, onProductChange: onProductChange, onVersionChange: onVersionChange, ref: ref, isOnSummaryPage: props.isOnSummaryPage, loadTCOnChange: props.loadTCOnChange, isFetching: topContent.isFetching })))),
         renderOpenCaseIssue && (React.createElement("div", { className: "case-details-summary" },
-            React.createElement(OpenCaseIssue, { inlineEditable: false, required: true, isOnSummaryPage: props.isOnSummaryPage }))),
-        React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "pf-v5-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(OpenCaseIssue, { inlineEditable: false, required: true, isOnSummaryPage: props.isOnSummaryPage, isOnGetSupportPage: props.isOnGetSupportPage }))),
         showModalButton &&
             !isEmpty(product) &&
             !isEmpty(version) &&
             !topContent.isFetching &&
             topContent.data.length !== 0 && (React.createElement("button", { className: "btn btn-bordered-blue btn-slim pull-top-narrow push-bottom-narrow", "data-tracking-id": "suggested-fixes-trigger", onClick: toggleTCModal, type: "button" },
             React.createElement(Trans, null, "Suggested fixes"))),
-        props.loadTCOnChange && !topContent.isFetching && topContent.data.length !== 0 && (React.createElement(Modal, { className: "feedback-modal", title: t('Suggested fixes'), description: t('There are new updates to suggested fixes after changing your product.'), "aria-describedby": "Feedback Form", isOpen: isModalOpen, variant: ModalVariant.large, onClose: toggleTCModal, actions: [
+        props.loadTCOnChange && !topContent.isFetching && topContent.data.length !== 0 && (React.createElement(Modal, { className: "feedback-modal", "aria-describedby": "Feedback Form", isOpen: isModalOpen, variant: ModalVariant.large },
+            React.createElement(ModalHeader, null,
+                React.createElement("h2", null, t('Suggested fixes'))),
+            React.createElement(ModalBody, null,
+                React.createElement("p", null, t('There are new updates to suggested fixes after changing your product.')),
+                React.createElement("span", null,
+                    React.createElement(Trans, null, "Here are some common suggestions:")),
+                React.createElement(Suggestions, { showTitleDescription: false, showMax: 6 })),
+            React.createElement(ModalFooter, null,
                 React.createElement("button", { key: "cancel", onClick: toggleTCModal, className: "btn btn-app btn-primary", type: "button" },
-                    React.createElement(Trans, null, "Cancel")),
-            ] },
-            React.createElement("span", null,
-                React.createElement(Trans, null, "Here are some common suggestions:")),
-            React.createElement(Suggestions, { showTitleDescription: false, showMax: 6 })))));
+                    React.createElement(Trans, null, "Cancel")))))));
 });
 AllProductsSelector.defaultProps = defaultProps;
 export { AllProductsSelector };

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

@@ -9,5 +9,5 @@ interface IProps {
     isLoading?: boolean;
 }
 export declare const NewProductDropdownSelector: (props: IProps) => React.JSX.Element;
-export {};
+export default NewProductDropdownSelector;
 //# sourceMappingURL=NewProductDropdownSelector.d.ts.map

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;AAMpE,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,UAAU,MAAM;IACZ,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAOD,eAAO,MAAM,0BAA0B,UAAW,MAAM,sBAyHvD,CAAC"}
+{"version":3,"file":"NewProductDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAiBpE,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,UAAU,MAAM;IACZ,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,0BAA0B,GAAI,OAAO,MAAM,sBA+JvD,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

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

@@ -1,81 +1,89 @@
-import { Divider } from '@patternfly/react-core';
-import { Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
-import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { Button, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { useSelectKeyboardNavigator } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useCaseSelector } from '../../context/CaseContext';
-const isProductSupportedForCustomer = (productName, productResults) => {
-    const foundItem = productResults.filter((item) => item.name === productName)[0];
-    return foundItem ? foundItem.supportedForCustomer : false;
-};
 export const NewProductDropdownSelector = (props) => {
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [showValidationLocal, setShowValidationLocal] = useState(props.isNextBtnClickedToShowValidationError);
-    const [isSelectedProductSupportedForCustomer, setIsSelectedProductSupportedForCustomer] = useState(true);
+    const [filteredProducts, setFilteredProducts] = useState(props.products);
+    const [shouldFilter, setShouldFilter] = useState(false);
+    const textInputRef = useRef();
     const { product } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
     }), isEqual);
-    const { globalMetadataState: { allProducts }, } = useContext(GlobalMetadataStateContext);
+    const [inputValue, setInputValue] = useState('');
     useEffect(() => {
         setShowValidationLocal(props.isNextBtnClickedToShowValidationError);
-        // 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-v5-c-select__menu-wrapper", "data-tracking-id": `${product.name ? product.name.replace(/\s+/g, '') : ''}-${type}-dropdown` }));
-    };
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
-    const getOptions = () => {
-        const topProductOptions = allProducts.data.topProducts
-            .filter((p) => p.isEntitledProduct)
-            .map((p, id) => createOption(p, id, 'topProduct'))
-            .slice(0, 3);
-        const productOptions = props.products.map((p, id) => createOption(p, id, 'product'));
-        const allProductsTroubleshootOptions = allProducts.data.productsResult.map((p, id) => createOption(p, id, 'product'));
-        return [
-            React.createElement(SelectGroup, { label: t('Top products'), key: "topProducts", value: '', className: "product-selector-group" }),
-            ...topProductOptions,
-            React.createElement(Divider, { key: "all-product-divider" }),
-            React.createElement(SelectGroup, { label: t('All products'), key: "AllProducts", value: '', className: "product-selector-group" }),
-            ...(props.isCaseCreate ? productOptions : allProductsTroubleshootOptions),
-        ];
-    };
-    const onFilter = (e, textInput) => {
-        if (textInput === '') {
-            return getOptions();
+    useEffect(() => {
+        if (product && product !== inputValue) {
+            setInputValue(product);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [product]);
+    useEffect(() => {
+        if (!isEmpty(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())) {
+            const filtered = props.products.filter((p) => { var _a; return (_a = p.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase()); });
+            setFilteredProducts(filtered);
         }
         else {
-            let finalFilteredProducts = [];
-            let filteredProducts = props.products.filter((product) => { var _a; return (_a = product.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textInput.toLowerCase()); });
-            filteredProducts.forEach((product, index) => {
-                let selectProductItem = createOption(product, index, 'product');
-                finalFilteredProducts.push(selectProductItem);
-            });
-            return finalFilteredProducts;
+            setFilteredProducts(props.products);
         }
+    }, [inputValue, props.products]);
+    const onToggleClick = () => {
+        var _a;
+        setIsOpen(!isOpen);
+        (_a = textInputRef === null || textInputRef === void 0 ? void 0 : textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const onSelect = (event, selection) => {
-        if (isEqual(selection, product)) {
-            props.onProductChange(''); // To unselect a product when user clicks on the same selected product
-            setIsOpen(false);
-            return;
+    const onSelect = (selection) => {
+        if (!isEqual(selection.name, product)) {
+            props.onProductChange(selection.name);
+            setInputValue(selection.name);
         }
-        props.onProductChange(selection);
         setIsOpen(false);
     };
-    useEffect(() => {
-        product &&
-            props.isOnSummaryPage &&
-            setIsSelectedProductSupportedForCustomer(isProductSupportedForCustomer(product, allProducts.data.productsResult));
-    }, [allProducts.data.productsResult, product, props.isOnSummaryPage]);
+    const onTextInputChange = (_event, value) => {
+        setInputValue(value);
+        setShouldFilter(value.trim().length > 0);
+        if (value === '') {
+            props.onProductChange('');
+        }
+    };
+    const onClear = () => {
+        setInputValue('');
+        props.onProductChange('');
+        setShouldFilter(false);
+    };
+    const { onInputKeyDown, focusedItemIndex } = useSelectKeyboardNavigator({
+        list: filteredProducts,
+        isOpen,
+        setIsOpen,
+        onSelect: (item) => {
+            props.onProductChange(item.name);
+            setInputValue(item.name);
+            setIsOpen(false);
+        },
+    });
+    const renderProductOptions = () => {
+        const productsToShow = shouldFilter ? filteredProducts : props.products;
+        return productsToShow.length > 0 ? (React.createElement(React.Fragment, null, productsToShow.map((prod, index) => {
+            var _a;
+            return (React.createElement(SelectOption, { key: `product-${index}`, value: prod, isFocused: focusedItemIndex === index, className: "pf-v6-c-select__menu-wrapper", "data-tracking-id": `${(_a = prod.name) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, '')}-product-dropdown`, isSelected: prod.name === product }, prod.name));
+        }))) : (React.createElement(SelectOption, { key: '', value: '', className: "pf-v6-c-select__menu-wrapper", isDisabled: true }, "No Results Found"));
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: onToggleClick, isExpanded: isOpen, isFullWidth: true, isDisabled: props.isLoading, status: isEmpty(inputValue) && showValidationLocal ? 'danger' : undefined },
+        React.createElement(TextInputGroup, { isPlain: true },
+            React.createElement(TextInputGroupMain, { value: inputValue, onClick: onToggleClick, onChange: onTextInputChange, onKeyDown: onInputKeyDown, autoComplete: "off", innerRef: textInputRef, placeholder: t('Search for or select a product'), role: "combobox", isExpanded: isOpen, "aria-controls": "product-selector-listbox" }),
+            props.isLoading ? (React.createElement(TextInputGroupUtilities, null,
+                React.createElement(Spinner, { size: "md" }))) : (React.createElement(TextInputGroupUtilities, Object.assign({}, (!inputValue ? { style: { display: 'none' } } : {})),
+                React.createElement(Button, { icon: React.createElement(TimesIcon, { "aria-hidden": true }), variant: "plain", onClick: onClear, "aria-label": "Clear input value" }))))));
     return (React.createElement("div", null,
-        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Search for or select a product'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, isOpen: isOpen, placeholderText: t('Search for or select a product'), "aria-labelledby": t('Product-selector'), onFilter: onFilter, selections: product, validated: isEmpty(product) && showValidationLocal ? 'error' : 'default', "data-tracking-id": "get-support-product-dropdown-selector", isDisabled: props.isLoading }, getOptions()),
-        !props.isLoading && !isSelectedProductSupportedForCustomer && (React.createElement("div", { className: "pf-v5-u-ml-xs pf-v5-u-mt-sm form-instructions" },
-            React.createElement(Trans, null, "Red Hat must confirm your subscription status before providing support."),
-            React.createElement("br", null),
-            React.createElement(Trans, null, "We'll contact you if we have any questions.")))));
+        React.createElement(Select, { id: "product-selector", isOpen: isOpen, onSelect: (e, selection) => onSelect(selection), onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, selected: product, shouldFocusFirstItemOnOpen: false, isScrollable: true, "data-tracking-id": "get-support-product-dropdown-selector" },
+            React.createElement(SelectList, { id: "product-selector-listbox" }, renderProductOptions()))));
 };
+export default NewProductDropdownSelector;

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

@@ -1 +1 @@
-{"version":3,"file":"NewProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductVersionSelector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,UAAU,MAAM;IACZ,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;CAClD;AAED,eAAO,MAAM,yBAAyB,UAAW,MAAM,sBAoItD,CAAC"}
+{"version":3,"file":"NewProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/NewProductVersionSelector.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAOxE,UAAU,MAAM;IACZ,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qCAAqC,EAAE,OAAO,CAAC;CAClD;AAED,eAAO,MAAM,yBAAyB,GAAI,OAAO,MAAM,sBAwGtD,CAAC"}

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

@@ -1,20 +1,19 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { useApolloClient } from '@apollo/client/react';
+import { SingleSelectDropdown } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { getUniqueSortedVersions } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
-import { getVersionsDetails } from '../../reducers/CaseReducer';
+import { getVersionsDetails, setCaseState } from '../../reducers/CaseReducer';
 import { getProductObj } from '../shared/utils';
 export const NewProductVersionSelector = (props) => {
     const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectVersionOptions, setSelectVersionOptions] = useState([]);
     const [showValidationLocal, setShowValidationLocal] = useState(props.isNextBtnClickedToShowValidationError);
-    const [isSEProductApiIsDown, setIsSEProductApiIsDown] = useState(false);
     const caseDispatch = useCaseDispatch();
+    const apolloClient = useApolloClient();
     const { versionsDetails, product, version } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
         version: state.caseDetails.version,
@@ -25,71 +24,63 @@ export const NewProductVersionSelector = (props) => {
         setShowValidationLocal(props.isNextBtnClickedToShowValidationError);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.isNextBtnClickedToShowValidationError]);
-    // when user selects a product, we need to fetch versions
     useEffect(() => {
         if (isEmpty(product))
             return;
         const productObj = getProductObj(allProducts.data.productsResult, product);
-        if (productObj.versions) {
-            const productVersions = productObj.hasComponentsInsteadOfVersions
-                ? productObj.versions.sort()
-                : productObj.versions;
-            // if versions array has one value set that value as selected
-            if (productVersions.length === 1) {
-                props.onVersionChange(productVersions[0]);
-            }
-            setSelectVersionOptions(productObj.versions);
-        }
-        else {
-            setIsSEProductApiIsDown(true);
+        if (productObj.productId) {
+            getVersionsDetails(caseDispatch, apolloClient, productObj.productId, productObj.name || product);
         }
-        const getVersions = () => getVersionsDetails(caseDispatch, product);
-        // call sfdc version api version flags that is used in severity and submit components
-        getVersions();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [product]);
+    }, [product, allProducts.data.productsResult]);
     useEffect(() => {
-        if (!product)
+        var _a;
+        if (versionsDetails.isFetching || !((_a = versionsDetails.data) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        if (versionsDetails.data.length === 1) {
+            props.onVersionChange(versionsDetails.data[0].name);
+            setCaseState(caseDispatch, { selectedVersionId: versionsDetails.data[0].id });
             return;
-        const productObj = getProductObj(allProducts.data.productsResult, product);
-        if (productObj.versions) {
-            const productVersions = productObj.hasComponentsInsteadOfVersions
-                ? productObj.versions.sort()
-                : productObj.versions;
-            setSelectVersionOptions(productVersions);
         }
-        else {
-            setIsSEProductApiIsDown(true);
+        if (version) {
+            const versionObj = versionsDetails.data.find((v) => v.name === version);
+            if (versionObj === null || versionObj === void 0 ? void 0 : versionObj.id) {
+                setCaseState(caseDispatch, { selectedVersionId: versionObj.id });
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [version]);
-    // observe when fetched versions are available
-    useEffect(() => {
-        if (!isSEProductApiIsDown)
-            return;
-        const fetchedVersions = versionsDetails.data.map(({ name }) => name);
-        // if versions array has one value set that value as selected
-        if (fetchedVersions.length === 1) {
-            props.onVersionChange(fetchedVersions[0]);
-        }
+    }, [versionsDetails.data]);
+    const sortedVersionNames = useMemo(() => {
+        var _a;
+        if (!((_a = versionsDetails.data) === null || _a === void 0 ? void 0 : _a.length))
+            return [];
+        const versionNames = versionsDetails.data.map((v) => v.name);
         const productObj = getProductObj(allProducts.data.productsResult, product);
-        const sfdcVersions = getUniqueSortedVersions(fetchedVersions);
-        const productVersions = (productObj === null || productObj === void 0 ? void 0 : productObj.hasComponentsInsteadOfVersions) ? sfdcVersions.sort() : sfdcVersions;
-        setSelectVersionOptions(productVersions);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [versionsDetails.data, isSEProductApiIsDown]);
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
-    const onSelect = (event, selection) => {
+        if (productObj === null || productObj === void 0 ? void 0 : productObj.hasComponentsInsteadOfVersions) {
+            return [...versionNames].sort();
+        }
+        const numeric = versionNames.filter((v) => /^\d/.test(v));
+        const alpha = versionNames.filter((v) => !/^\d/.test(v));
+        return [...getUniqueSortedVersions(numeric), ...alpha.sort()];
+    }, [versionsDetails.data, allProducts.data.productsResult, product]);
+    const onSelect = (selectedOption) => {
+        const selection = selectedOption.value;
         if (isEqual(selection, version)) {
-            props.onVersionChange(''); // To unselect a version when user clicks on the same selected product version
-            setIsOpen(false);
+            props.onVersionChange('');
+            setCaseState(caseDispatch, { selectedVersionId: undefined });
             return;
         }
         props.onVersionChange(selection);
-        setIsOpen(false);
+        const versionObj = versionsDetails.data.find((v) => v.name === selection);
+        setCaseState(caseDispatch, { selectedVersionId: versionObj === null || versionObj === void 0 ? void 0 : versionObj.id });
     };
-    const titleId = 'version-selector';
-    return (React.createElement(Select, Object.assign({ variant: SelectVariant.single, onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, isOpen: isOpen, placeholderText: t('Select a version'), toggleAriaLabel: t('Select a version'), "aria-labelledby": titleId, selections: version, validated: isEmpty(version) && showValidationLocal ? 'error' : 'default', isDisabled: isEmpty(product) || allProducts.isFetching, "data-tracking-id": "get-support-version-dropdown-selector" }, (isSEProductApiIsDown && versionsDetails.isFetching && { loadingVariant: 'spinner' })), selectVersionOptions.map((version, index) => (React.createElement(SelectOption, { key: index, value: version })))));
+    const getSelectedOption = () => ({
+        label: version || '',
+        value: version || '',
+    });
+    const getDropdownOptions = () => sortedVersionNames.map((versionOption) => ({
+        label: versionOption,
+        value: versionOption,
+    }));
+    return (React.createElement(SingleSelectDropdown, { onSelect: onSelect, selected: getSelectedOption(), options: getDropdownOptions(), placeholder: t('Select a version'), ariaLabel: t('Select a version'), isInvalid: isEmpty(version) && showValidationLocal, isDisabled: isEmpty(product) || allProducts.isFetching, dataTrackingId: "get-support-version-dropdown-selector", isLoading: versionsDetails.isFetching }));
 };

package/lib/esm/components/ProductSelector/ProductNotEntitledWarning.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProductNotEntitledWarning.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductNotEntitledWarning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,yBAAyB,sBAcxC"}

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

@@ -0,0 +1,9 @@
+import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+export function ProductNotEntitledWarning() {
+    const { t } = useTranslation();
+    return (React.createElement(FormHelperText, null,
+        React.createElement(HelperText, null,
+            React.createElement(HelperTextItem, { variant: "warning" }, t('We cannot locate an active support subscription associated with your account for the selected product. You can still proceed, but your case may not receive full support coverage.')))));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"ProductSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductSelector.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAOlE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACzE,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,aAAa,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBA0GpD"}
+{"version":3,"file":"ProductSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductSelector.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAKlE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACzE,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,aAAa,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBAiGpD"}

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

@@ -7,14 +7,12 @@ import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
-import { RouteContext } from '../../context/RouteContext';
+import { useAB } from '../../hooks/useAB';
 import { useFetchCVEData } from '../../hooks/useFetchCVEData';
 import { setCaseState } from '../../reducers/CaseReducer';
 import { CveModal } from '../Cve/CveModal';
-import { EARuleWidget } from '../Recommendations/EARules/EARuleWidget';
 import Recommendations from '../Recommendations/Recommendations';
 import { AllProductsSelector } from './AllProductsSelector';
-import { ProductSelectorLoader } from './ProductSelectorLoader';
 /**
  * Responsible for:
  * # Setting case state with product version from url.
@@ -26,18 +24,15 @@ import { ProductSelectorLoader } from './ProductSelectorLoader';
 export default function ProductSelector(props) {
     const { cveRecommendation } = useFetchCVEData();
     const { t } = useTranslation();
+    const { isVariationA } = useAB();
     const { globalMetadataState: { allProducts, pcmConfig }, } = useContext(GlobalMetadataStateContext);
-    const { product, version, ABTestVariation } = useCaseSelector((state) => ({
+    const { product, version } = useCaseSelector((state) => ({
         product: state.caseDetails.product,
         version: state.caseDetails.version,
-        ABTestVariation: state.ABTestVariation,
     }), isEqual);
-    const { routeState: { isCaseCreate }, } = useContext(RouteContext);
     const caseDispatch = useCaseDispatch();
     const cveModalEnabledConfig = getConfigField(pcmConfig.data, 'isCVEModalEnabled', PCM_CONFIG_FIELD_TYPE.STRING);
     const isCVEModalEnabled = cveModalEnabledConfig === '1';
-    const isATestvariation = ABTestVariation === 'A';
-    const isBTestvariation = ABTestVariation === 'B' || isEmpty(ABTestVariation);
     useEffect(() => {
         if (!isCVEModalEnabled) {
             setCaseState(caseDispatch, {
@@ -54,13 +49,10 @@ export default function ProductSelector(props) {
     const productSelectorRef = useRef(null);
     const rederProductSelect = (React.createElement("form", null,
         (cveRecommendation === null || cveRecommendation === void 0 ? void 0 : cveRecommendation.length) !== 0 && isCVEModalEnabled && React.createElement(CveModal, null),
-        React.createElement(AllProductsSelector, { routeProps: props.routeProps, checkEntitledProduct: isCaseCreate ? true : false, ref: productSelectorRef, isOnSummaryPage: true, isOnGetSupportPage: props === null || props === void 0 ? void 0 : props.isOnGetSupportPage, caseCreateExperience: props.caseCreateExperience })));
+        React.createElement(AllProductsSelector, { routeProps: props.routeProps, ref: productSelectorRef, isOnSummaryPage: true, isOnGetSupportPage: props === null || props === void 0 ? void 0 : props.isOnGetSupportPage, caseCreateExperience: props.caseCreateExperience })));
     return (React.createElement(React.Fragment, null,
-        isBTestvariation && allProducts.isFetching && React.createElement(ProductSelectorLoader, null),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", title: t('There was an error loading products.'), show: allProducts.isError }),
-        isBTestvariation
-            ? !allProducts.isFetching && !allProducts.isError && rederProductSelect
-            : isATestvariation && rederProductSelect,
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v6-u-mt-lg", title: t('There was an error loading products.'), show: allProducts.isError }),
+        rederProductSelect,
         product === 'Subscription Watch' && (React.createElement(Alert, { isInline: true, variant: AlertVariant.warning, title: React.createElement(Trans, null,
                 ' ',
                 "If you're having a subscription issue that doesn't relate to",
@@ -71,8 +63,7 @@ export default function ProductSelector(props) {
                 React.createElement("a", { href: "/support/contact", "data-tracking-id": "contact-customer-service" }, "customer service"),
                 ' ',
                 "for help.") })),
-        isBTestvariation && React.createElement(EARuleWidget, null),
-        !(props === null || props === void 0 ? void 0 : props.isOnGetSupportPage) && (React.createElement("div", { className: "suggestions-result-section" },
+        !isVariationA && !(props === null || props === void 0 ? void 0 : props.isOnGetSupportPage) && (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, { routeProps: props.routeProps, userSeenRecommendations: props.userSeenRecommendations, userClickedNextonRecommendationsValue: props.userClickedNextonRecommendations, resultsRowRef: props.resultsRowRef }))))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ProductVersionDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductVersionDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAEpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAiC,MAAM,OAAO,CAAC;AAOtD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAOD,QAAA,MAAM,8BAA8B,wEAuDlC,CAAC;AAEH,OAAO,EAAE,8BAA8B,EAAE,CAAC"}
+{"version":3,"file":"ProductVersionDropdownSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductVersionDropdownSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAEpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAAiC,MAAM,OAAO,CAAC;AAStD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAOD,QAAA,MAAM,8BAA8B,wEA+DlC,CAAC;AAEH,OAAO,EAAE,8BAA8B,EAAE,CAAC"}

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

@@ -1,27 +1,35 @@
 import { LoadingIndicator } from '@rh-support/components';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
 import React, { forwardRef, useContext } from 'react';
 import { Trans } from 'react-i18next';
+import { useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
 import { NewProductDropdownSelector } from './NewProductDropdownSelector';
 import { NewProductVersionSelector } from './NewProductVersionSelector';
+import { ProductNotEntitledWarning } from './ProductNotEntitledWarning';
 const defaultProps = {
     disabled: false,
     htmlForId: '',
 };
 const ProductVersionDropdownSelector = forwardRef((props, ref) => {
     const { routeState: { isCaseCreate, isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
+    const { isProductNotEntitled, product } = useCaseSelector((state) => ({
+        isProductNotEntitled: state.isProductNotEntitled,
+        product: state.caseDetails.product,
+    }), isEqual);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "product-selector-wrapper" },
             React.createElement("label", { htmlFor: "product-selector-dropdown-search", ref: ref },
                 React.createElement(Trans, null, "Product"),
                 ' ',
                 React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-            React.createElement("div", { className: "pf-v5-u-display-flex pf-v5-u-align-items-center" },
-                React.createElement("div", { className: "pf-v5-u-flex-1" },
+            React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-align-items-center" },
+                React.createElement("div", { className: "pf-v6-u-flex-1" },
                     React.createElement(NewProductDropdownSelector, { products: props.products, onProductChange: props.onProductChange, isNextBtnClickedToShowValidationError: isNextBtnClickedToShowValidationError, isCaseCreate: isCaseCreate, isOnSummaryPage: props.isOnSummaryPage, isLoading: props.isLoading })),
-                props.isLoading && (React.createElement("div", { className: "pf-v5-u-flex-basis-auto" },
-                    React.createElement(LoadingIndicator, { className: "pf-v5-u-ml-sm", isInline: true, show: props.isLoading, size: "sm" })))),
-            React.createElement(React.Fragment, null)),
+                props.isLoading && (React.createElement("div", { className: "pf-v6-u-flex-basis-auto" },
+                    React.createElement(LoadingIndicator, { className: "pf-v6-u-ml-sm", isInline: true, show: props.isLoading, size: "sm" })))),
+            isProductNotEntitled && !isEmpty(product) && React.createElement(ProductNotEntitledWarning, null)),
         React.createElement("div", { className: "version-selector-wrapper" },
             React.createElement("label", { htmlFor: "version-selector-dropdown-toggle" },
                 React.createElement(Trans, null, "Version"),

package/lib/esm/components/Recommendations/AsideResults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AsideResults.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AsideResults.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,EAAE,eAAe,EAAsC,MAAM,iCAAiC,CAAC;AAUtG,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,qBAsMzC"}
+{"version":3,"file":"AsideResults.d.ts","sourceRoot":"","sources":["../../../../src/components/Recommendations/AsideResults.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAUvD,OAAO,EAAoB,eAAe,EAAsC,MAAM,iCAAiC,CAAC;AAWxH,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,qBA6MzC"}