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

package/lib/esm/components/ImproveCase/KtQuestions.js

@@ -1,4 +1,4 @@
-import { TextArea } from '@patternfly/react-core';
+import { Progress, ProgressMeasureLocation, ProgressSize, ProgressVariant, TextArea } from '@patternfly/react-core';
 import { InlineEdit } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -6,46 +6,20 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
-import { CASE_DEATILS_ENVIRONMENT_LIMIT, CASE_DEATILS_PERIODICITYOFISSUE_LIMIT, CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT, KtQuestionConstant, LargeDescriptionErrorMessage, MODIFIED_DESCRIPTION_LENGTH_LIMIT, } from '../../reducers/CaseConstNTypes';
+import { CASE_DEATILS_ENVIRONMENT_LIMIT, CASE_DEATILS_PERIODICITYOFISSUE_LIMIT, IDEA_SECOND_KTQUESTION_MAX_LIMIT, KTQ2LengthError, KTQ3LengthError, KTQ4LengthError, KTQ4LengthErrorIfIdea, KTQUESTION_MAX_LIMIT, KtQuestionConstant, } from '../../reducers/CaseConstNTypes';
 import { getUpdatedDescription } from '../../reducers/CaseHelpers';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 const defaultProps = { inlineEditable: false, hideSaveCancel: false, onlyShowKT4: false };
 function KtQuestions(props) {
-    var _a, _b, _c;
     const { t } = useTranslation();
-    const { description, hasLargeCaseDescription, issue, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName, } = useCaseSelector((state) => ({
-        description: state.caseDetails.description,
+    const { issue, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName } = useCaseSelector((state) => ({
         issue: state.caseDetails.issue,
         environment: state.caseDetails.environment,
         periodicityOfIssue: state.caseDetails.periodicityOfIssue,
         timeFramesAndUrgency: state.caseDetails.timeFramesAndUrgency,
-        hasLargeCaseDescription: state.hasLargeCaseDescription,
         v3ClusterName: state.v3ClusterName,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const [isKTQ2TextAreaActive, setKTQ2TextAreaActive] = useState(false);
-    const [hasFocusedLostKT2, setHasFocusedLostKT2] = useState(false);
-    const onKTQ2FocusChange = (e) => {
-        setKTQ2TextAreaActive(e.type === 'focus');
-        e.type === 'blur' && setHasFocusedLostKT2(true);
-    };
-    const [isKTQ3TextAreaActive, setKTQ3TextAreaActive] = useState(false);
-    const [hasFocusedLostKT3, setHasFocusedLostKT3] = useState(false);
-    const onKTQ3FocusChange = (e) => {
-        setKTQ3TextAreaActive(e.type === 'focus');
-        e.type === 'blur' && setHasFocusedLostKT3(true);
-    };
-    const [isKTQ4TextAreaActive, setKTQ4TextAreaActive] = useState(false);
-    const [isKTQ4InValid, setKTQ4InValid] = useState(false);
-    const [hasFocusedLostKT4, setHasFocusedLostKT4] = useState(false);
-    const onKTQ4FocusChange = (e) => {
-        setKTQ4TextAreaActive(e.type === 'focus');
-        e.type !== 'focus' && setKTQ4InValid(isEmpty(description));
-        e.type === 'blur' && setHasFocusedLostKT4(true);
-    };
-    useEffect(() => {
-        hasFocusedLostKT4 && setKTQ4InValid(isEmpty(description) && isEmpty(timeFramesAndUrgency));
-    }, [description, timeFramesAndUrgency, hasFocusedLostKT2, hasFocusedLostKT3, hasFocusedLostKT4]);
     const onCaseDetailsChange = (caseDetails) => {
         setCaseDetails(caseDispatch, caseDetails);
     };
@@ -74,48 +48,78 @@ function KtQuestions(props) {
     const isKT2Required = false;
     const isKT3Required = false;
     const isKT4Required = true;
-    //changing limit to 31000 to account for extra chars added during description combination to backend
-    const descriptionErrorMessage = t(LargeDescriptionErrorMessage, { limit: MODIFIED_DESCRIPTION_LENGTH_LIMIT });
-    const invalidateQT4 = (value) => {
-        return isEmpty(value) && hasFocusedLostKT4;
+    const [isQ4Empty, setIsQ4Empty] = useState(false);
+    const [hasLargeQ4, setHasLargeQ4] = useState(false);
+    const KT4_QUESTION_MAX_LIMIT = props.onlyShowKT4 ? IDEA_SECOND_KTQUESTION_MAX_LIMIT : KTQUESTION_MAX_LIMIT;
+    const KT4_QUESTION_ERROR_MESSAGE = props.onlyShowKT4 ? KTQ4LengthErrorIfIdea : KTQ4LengthError;
+    useEffect(() => {
+        setIsQ4Empty(timeFramesAndUrgency ? isEmpty(timeFramesAndUrgency.trim()) : true);
+        timeFramesAndUrgency && setHasLargeQ4(timeFramesAndUrgency.length > KT4_QUESTION_MAX_LIMIT);
+        // @ts-ignore
+    }, [KT4_QUESTION_MAX_LIMIT, environment, periodicityOfIssue, timeFramesAndUrgency]);
+    const getQ4Invalid = () => hasLargeQ4 || (isNextBtnClickedToShowValidationError && isQ4Empty);
+    const getVariantQ2 = () => {
+        if (!environment || isEmpty(environment))
+            return ProgressVariant.success;
+        if (environment.length > CASE_DEATILS_ENVIRONMENT_LIMIT)
+            return ProgressVariant.danger;
+        if (environment.length > CASE_DEATILS_ENVIRONMENT_LIMIT / 2)
+            return ProgressVariant.warning;
+        return ProgressVariant.success;
+    };
+    const getVariantQ3 = () => {
+        if (!periodicityOfIssue || isEmpty(periodicityOfIssue))
+            return ProgressVariant.success;
+        if (periodicityOfIssue.length > KTQUESTION_MAX_LIMIT)
+            return ProgressVariant.danger;
+        if (periodicityOfIssue.length > KTQUESTION_MAX_LIMIT / 2)
+            return ProgressVariant.warning;
+        return ProgressVariant.success;
+    };
+    const getVariantQ4 = () => {
+        if (getQ4Invalid())
+            return ProgressVariant.danger;
+        if (!timeFramesAndUrgency)
+            return ProgressVariant.success;
+        if (timeFramesAndUrgency.length > KT4_QUESTION_MAX_LIMIT / 2) {
+            return ProgressVariant.warning;
+        }
+        else {
+            return ProgressVariant.success;
+        }
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ4-timeFramesAndUrgency' }, labelContent: React.createElement(React.Fragment, null,
                 t(KtQuestionConstant.timeFramesAndUrgency),
                 ' ',
-                isKT4Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(timeFramesAndUrgency), usePreformattedTag: true, saveOnBlur: true, content: timeFramesAndUrgency },
-            React.createElement(TextArea, { className: `form-control${invalidateQT4(timeFramesAndUrgency) ||
-                    (isNextBtnClickedToShowValidationError && isEmpty(timeFramesAndUrgency)) ||
-                    isKTQ4InValid
-                    ? ' form-invalid'
-                    : ''}`, "aria-invalid": timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT
-                    ? 'true'
-                    : 'false', id: "ktQ4-timeFramesAndUrgency", value: timeFramesAndUrgency, isDisabled: isEmpty(timeFramesAndUrgency) && hasLargeCaseDescription && !isKTQ4TextAreaActive, onChange: onKtQ4Change, onFocus: onKTQ4FocusChange, onBlur: onKTQ4FocusChange, "aria-required": isKT4Required, "data-tracking-id": "get-support-ktQ4-timeFramesAndUrgency", placeholder: t("User or financial impact, and whether there's a legal, national, or medical urgency"), isRequired: isKT4Required }),
-            React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ4-environment" }, `${isKTQ4TextAreaActive && ((_a = timeFramesAndUrgency) === null || _a === void 0 ? void 0 : _a.length) > CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT
-                ? `Description cannot be more than ${CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT} characters`
-                : ''}`),
-            React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-warning-ktQ4-timeFramesAndUrgency" }, `${hasLargeCaseDescription && isKTQ4TextAreaActive ? descriptionErrorMessage : ''}`)),
+                isKT4Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(timeFramesAndUrgency) || timeFramesAndUrgency.length > KT4_QUESTION_MAX_LIMIT, usePreformattedTag: true, saveOnBlur: true, content: timeFramesAndUrgency },
+            React.createElement(TextArea, { validated: getQ4Invalid() ||
+                    (timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > KT4_QUESTION_MAX_LIMIT)
+                    ? 'error'
+                    : 'default', "aria-invalid": timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > KT4_QUESTION_MAX_LIMIT ? 'true' : 'false', id: "ktQ4-timeFramesAndUrgency", value: timeFramesAndUrgency, onChange: (e, value) => onKtQ4Change(value, e), "aria-required": isKT4Required, "data-tracking-id": "get-support-ktQ4-timeFramesAndUrgency", placeholder: t('Describe the user or financial impact. Tell us about any legal, national, or medical urgency.'), isRequired: isKT4Required, resizeOrientation: "vertical", rows: 5 }),
+            React.createElement("p", { className: "form-instructions pf-v5-u-danger-color-100", "data-tracking-id": "large-4k-warning-ktQ4-environment" }, `${(timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > KT4_QUESTION_MAX_LIMIT ? KT4_QUESTION_ERROR_MESSAGE : ''}`),
+            React.createElement(Progress, { value: timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length, min: 0, max: KT4_QUESTION_MAX_LIMIT, size: ProgressSize.sm, label: `${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KT4_QUESTION_MAX_LIMIT}`, valueText: `${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KT4_QUESTION_MAX_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KT4_QUESTION_MAX_LIMIT}`, variant: getVariantQ4(), title: ' ', className: `pf-v5-u-mt-md kt-progress-bar`, id: "summary-progress-bar" })),
         !props.onlyShowKT4 && (React.createElement(React.Fragment, null,
             React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ2-environment' }, labelContent: React.createElement(React.Fragment, null,
                     t(KtQuestionConstant.environment),
                     ' ',
-                    isKT2Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(environment), usePreformattedTag: true, saveOnBlur: true, content: environment },
-                React.createElement(TextArea, { className: `form-control`, id: "ktQ2-environment", value: environment, isDisabled: isEmpty(environment) && hasLargeCaseDescription && !isKTQ2TextAreaActive, onChange: onKtQ2Change, onFocus: onKTQ2FocusChange, onBlur: onKTQ2FocusChange, "aria-required": isKT2Required, isRequired: isKT2Required, "data-tracking-id": "get-support-ktQ2-environment", "aria-invalid": environment && (environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT ? 'true' : 'false' }),
-                React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ2-environment" }, `${isKTQ2TextAreaActive && ((_b = environment) === null || _b === void 0 ? void 0 : _b.length) > CASE_DEATILS_ENVIRONMENT_LIMIT
-                    ? `Description cannot be more than ${CASE_DEATILS_ENVIRONMENT_LIMIT} characters`
-                    : ''}`),
-                React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-warning-ktQ2-environment" }, `${hasLargeCaseDescription && isKTQ2TextAreaActive ? descriptionErrorMessage : ''}`)),
+                    isKT2Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(environment) || environment.length > CASE_DEATILS_ENVIRONMENT_LIMIT, usePreformattedTag: true, saveOnBlur: true, content: environment },
+                React.createElement(TextArea, { id: "ktQ2-environment", validated: environment && (environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT
+                        ? 'error'
+                        : 'default', value: environment, onChange: (e, value) => onKtQ2Change(value, e), "aria-required": isKT2Required, isRequired: isKT2Required, "data-tracking-id": "get-support-ktQ2-environment", "aria-invalid": environment && (environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT ? 'true' : 'false', resizeOrientation: "vertical", placeholder: t('Please provide details about the location, device, software version, etc. where you encounter this issue'), rows: 5 }),
+                React.createElement("p", { className: "form-instructions pf-v5-u-danger-color-100", "data-tracking-id": "large-4k-warning-ktQ2-environment" }, `${(environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT ? KTQ2LengthError : ''}`),
+                React.createElement(Progress, { value: environment === null || environment === void 0 ? void 0 : environment.length, min: 0, max: CASE_DEATILS_ENVIRONMENT_LIMIT, size: ProgressSize.sm, label: `${environment === null || environment === void 0 ? void 0 : environment.length} / ${CASE_DEATILS_ENVIRONMENT_LIMIT}`, valueText: `${environment === null || environment === void 0 ? void 0 : environment.length} / ${CASE_DEATILS_ENVIRONMENT_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${environment === null || environment === void 0 ? void 0 : environment.length} / ${CASE_DEATILS_ENVIRONMENT_LIMIT}`, variant: getVariantQ2(), title: ' ', className: `pf-v5-u-mt-md  kt-progress-bar`, id: "summary-progress-bar" })),
             React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ3-periodicityOfIssue' }, labelContent: React.createElement(React.Fragment, null,
                     t(KtQuestionConstant.periodicityOfIssue),
                     ' ',
-                    isKT3Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(periodicityOfIssue), usePreformattedTag: true, saveOnBlur: true, content: periodicityOfIssue },
-                React.createElement(TextArea, { className: `form-control`, id: "ktQ3-periodicityOfIssue", value: periodicityOfIssue, isDisabled: isEmpty(periodicityOfIssue) && hasLargeCaseDescription && !isKTQ3TextAreaActive, onChange: onKtQ3Change, onFocus: onKTQ3FocusChange, onBlur: onKTQ3FocusChange, "aria-required": isKT3Required, isRequired: isKT3Required, "data-tracking-id": "get-support-ktQ3-periodicityOfIssue", "aria-invalid": periodicityOfIssue && (periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT
+                    isKT3Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(periodicityOfIssue) || periodicityOfIssue.length > KTQUESTION_MAX_LIMIT, usePreformattedTag: true, saveOnBlur: true, content: periodicityOfIssue },
+                React.createElement(TextArea, { id: "ktQ3-periodicityOfIssue", validated: periodicityOfIssue && (periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT
+                        ? 'error'
+                        : 'default', value: periodicityOfIssue, onChange: (e, value) => onKtQ3Change(value, e), "aria-required": isKT3Required, isRequired: isKT3Required, "data-tracking-id": "get-support-ktQ3-periodicityOfIssue", "aria-invalid": periodicityOfIssue && (periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT
                         ? 'true'
-                        : 'false' }),
-                React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ3-environment" }, `${isKTQ3TextAreaActive && ((_c = periodicityOfIssue) === null || _c === void 0 ? void 0 : _c.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT
-                    ? `Description cannot be more than ${CASE_DEATILS_PERIODICITYOFISSUE_LIMIT} characters`
-                    : ''}`),
-                React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-warning-ktQ3-periodicityOfIssue" }, `${hasLargeCaseDescription && isKTQ3TextAreaActive ? descriptionErrorMessage : ''}`))))));
+                        : 'false', resizeOrientation: "vertical", placeholder: t('Describe when and how often the problem occurs, e.g., daily, after specific actions, at particular times of day, etc.'), rows: 5 }),
+                React.createElement("p", { className: "form-instructions pf-v5-u-danger-color-100", "data-tracking-id": "large-4k-warning-ktQ3-environment" }, `${(periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT ? KTQ3LengthError : ''}`),
+                React.createElement(Progress, { value: periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length, min: 0, max: KTQUESTION_MAX_LIMIT, size: ProgressSize.sm, label: `${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, valueText: `${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, variant: getVariantQ3(), title: ' ', className: `pf-v5-u-mt-md kt-progress-bar`, id: "summary-progress-bar" }))))));
 }
 KtQuestions.defaultProps = defaultProps;
 export default KtQuestions;

package/lib/esm/components/OpenCase/CaseTypeIcons/BugIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     height?: number;
     width?: number;
     fillColor?: string;
 }
-export declare const BugIcon: (props: IconProps) => JSX.Element;
+export declare const BugIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=BugIcon.d.ts.map

package/lib/esm/components/OpenCase/CaseTypeIcons/BugIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BugIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/BugIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,UAAW,SAAS,gBAWvC,CAAC"}
+{"version":3,"file":"BugIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/BugIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,UAAW,SAAS,sBAWvC,CAAC"}

package/lib/esm/components/OpenCase/CaseTypeIcons/CertificationIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const CertificationIcon: (props: IconProps) => JSX.Element;
+export declare const CertificationIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=CertificationIcon.d.ts.map

package/lib/esm/components/OpenCase/CaseTypeIcons/CertificationIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CertificationIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/CertificationIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAAW,SAAS,gBAuBjD,CAAC"}
+{"version":3,"file":"CertificationIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/CertificationIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAAW,SAAS,sBAuBjD,CAAC"}

package/lib/esm/components/OpenCase/CaseTypeIcons/CustomerServiceIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const CustomerServiceIcon: (props: IconProps) => JSX.Element;
+export declare const CustomerServiceIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=CustomerServiceIcon.d.ts.map

package/lib/esm/components/OpenCase/CaseTypeIcons/CustomerServiceIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomerServiceIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/CustomerServiceIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,UAAW,SAAS,gBAmBnD,CAAC"}
+{"version":3,"file":"CustomerServiceIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/CustomerServiceIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,UAAW,SAAS,sBAmBnD,CAAC"}

package/lib/esm/components/OpenCase/CaseTypeIcons/DocumentationIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const DocumentationIcon: (props: IconProps) => JSX.Element;
+export declare const DocumentationIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=DocumentationIcon.d.ts.map

package/lib/esm/components/OpenCase/CaseTypeIcons/DocumentationIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentationIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/DocumentationIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAAW,SAAS,gBAWjD,CAAC"}
+{"version":3,"file":"DocumentationIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/DocumentationIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAAW,SAAS,sBAWjD,CAAC"}

package/lib/esm/components/OpenCase/CaseTypeIcons/GearIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const GearIcon: (props: IconProps) => JSX.Element;
+export declare const GearIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=GearIcon.d.ts.map

package/lib/esm/components/OpenCase/CaseTypeIcons/GearIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GearIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/GearIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,gBAexC,CAAC"}
+{"version":3,"file":"GearIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/GearIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,sBAexC,CAAC"}

package/lib/esm/components/OpenCase/CaseTypeIcons/IdeaIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const IdeaIcon: (props: IconProps) => JSX.Element;
+export declare const IdeaIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=IdeaIcon.d.ts.map

package/lib/esm/components/OpenCase/CaseTypeIcons/IdeaIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IdeaIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/IdeaIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,gBAexC,CAAC"}
+{"version":3,"file":"IdeaIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/IdeaIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,sBAexC,CAAC"}

package/lib/esm/components/OpenCase/CaseTypeIcons/RcaIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const RcaIcon: (props: IconProps) => JSX.Element;
+export declare const RcaIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=RcaIcon.d.ts.map

package/lib/esm/components/OpenCase/CaseTypeIcons/RcaIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RcaIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/RcaIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,UAAW,SAAS,gBAevC,CAAC"}
+{"version":3,"file":"RcaIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/CaseTypeIcons/RcaIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,UAAW,SAAS,sBAevC,CAAC"}

package/lib/esm/components/OpenCase/OpenCase.d.ts

@@ -1,7 +1,11 @@
+import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
 export interface IProps {
     routeProps: RouteComponentProps<IRouteUrlParams>;
+    userSeenRecommendations?: (value: React.SetStateAction<boolean>) => void;
+    userClickedNextonRecommendations: boolean;
+    resultsRowRef: React.MutableRefObject<HTMLDivElement | null>;
 }
-export default function OpenCase(props: IProps): JSX.Element;
+export default function OpenCase(props: IProps): React.JSX.Element;
 //# sourceMappingURL=OpenCase.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OpenCase.d.ts","sourceRoot":"","sources":["../../../../src/components/OpenCase/OpenCase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAKlE,MAAM,WAAW,MAAM;IACnB,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,MAAM,eAiB7C"}
+{"version":3,"file":"OpenCase.d.ts","sourceRoot":"","sources":["../../../../src/components/OpenCase/OpenCase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAMlE,MAAM,WAAW,MAAM;IACnB,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,EAAE,OAAO,CAAC;IAC1C,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAChE;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,MAAM,qBAuC7C"}

package/lib/esm/components/OpenCase/OpenCase.js

@@ -1,13 +1,22 @@
 import { ability, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
+import isEqual from 'lodash/isEqual';
 import React from 'react';
+import { useCaseSelector } from '../../context/CaseContext';
 import { AccountSelector } from '../AccountInfo/AccountSelector';
 import { OwnerSelector } from '../AccountInfo/OwnerSelector';
+import ProductSelector from '../ProductSelector/ProductSelector';
 import SupportTypeSelectorPage from './SupportTypeSelectorPage';
 export default function OpenCase(props) {
     const canChangeAccountInfo = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.ACCOUNT_AND_OWNER);
+    const { ABTestVariation } = useCaseSelector((state) => ({
+        ABTestVariation: state.ABTestVariation,
+    }), isEqual);
+    const isATestvariation = ABTestVariation === 'A';
     return (React.createElement("form", null,
         canChangeAccountInfo && (React.createElement(React.Fragment, null,
             React.createElement(AccountSelector, { "data-tracking-id": "get-support-account-selector" }),
             React.createElement(OwnerSelector, { "data-tracking-id": "get-support-owner-selector" }))),
+        isATestvariation && (React.createElement("div", { className: "form-group" },
+            React.createElement(ProductSelector, { routeProps: props.routeProps, userSeenRecommendations: props.userSeenRecommendations, userClickedNextonRecommendations: props.userClickedNextonRecommendations, resultsRowRef: props.resultsRowRef, isOnGetSupportPage: true }))),
         React.createElement(SupportTypeSelectorPage, null)));
 }

package/lib/esm/components/OpenCase/SupportTypeIcons/BugIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     height?: number;
     width?: number;
     fillColor?: string;
 }
-export declare const BugIcon: (props: IconProps) => JSX.Element;
+export declare const BugIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=BugIcon.d.ts.map

package/lib/esm/components/OpenCase/SupportTypeIcons/BugIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BugIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/BugIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,UAAW,SAAS,gBAWvC,CAAC"}
+{"version":3,"file":"BugIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/BugIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,UAAW,SAAS,sBAWvC,CAAC"}

package/lib/esm/components/OpenCase/SupportTypeIcons/CertificationIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const CertificationIcon: (props: IconProps) => JSX.Element;
+export declare const CertificationIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=CertificationIcon.d.ts.map

package/lib/esm/components/OpenCase/SupportTypeIcons/CertificationIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CertificationIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/CertificationIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAAW,SAAS,gBAuBjD,CAAC"}
+{"version":3,"file":"CertificationIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/CertificationIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAAW,SAAS,sBAuBjD,CAAC"}

package/lib/esm/components/OpenCase/SupportTypeIcons/CustomerServiceIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const CustomerServiceIcon: (props: IconProps) => JSX.Element;
+export declare const CustomerServiceIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=CustomerServiceIcon.d.ts.map

package/lib/esm/components/OpenCase/SupportTypeIcons/CustomerServiceIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomerServiceIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/CustomerServiceIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,UAAW,SAAS,gBAmBnD,CAAC"}
+{"version":3,"file":"CustomerServiceIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/CustomerServiceIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,UAAW,SAAS,sBAmBnD,CAAC"}

package/lib/esm/components/OpenCase/SupportTypeIcons/DocumentationIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const DocumentationIcon: (props: IconProps) => JSX.Element;
+export declare const DocumentationIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=DocumentationIcon.d.ts.map

package/lib/esm/components/OpenCase/SupportTypeIcons/DocumentationIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentationIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/DocumentationIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAAW,SAAS,gBAWjD,CAAC"}
+{"version":3,"file":"DocumentationIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/DocumentationIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAAW,SAAS,sBAWjD,CAAC"}

package/lib/esm/components/OpenCase/SupportTypeIcons/GearIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const GearIcon: (props: IconProps) => JSX.Element;
+export declare const GearIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=GearIcon.d.ts.map

package/lib/esm/components/OpenCase/SupportTypeIcons/GearIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GearIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/GearIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,gBAexC,CAAC"}
+{"version":3,"file":"GearIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/GearIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,sBAexC,CAAC"}

package/lib/esm/components/OpenCase/SupportTypeIcons/IdeaIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const IdeaIcon: (props: IconProps) => JSX.Element;
+export declare const IdeaIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=IdeaIcon.d.ts.map

package/lib/esm/components/OpenCase/SupportTypeIcons/IdeaIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IdeaIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/IdeaIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,gBAexC,CAAC"}
+{"version":3,"file":"IdeaIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/IdeaIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,SAAS,sBAexC,CAAC"}

package/lib/esm/components/OpenCase/SupportTypeIcons/RcaIcon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface IconProps {
     width?: number;
     height?: number;
     fillColor?: string;
 }
-export declare const RcaIcon: (props: IconProps) => JSX.Element;
+export declare const RcaIcon: (props: IconProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=RcaIcon.d.ts.map

package/lib/esm/components/OpenCase/SupportTypeIcons/RcaIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RcaIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/RcaIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,UAAW,SAAS,gBAevC,CAAC"}
+{"version":3,"file":"RcaIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/OpenCase/SupportTypeIcons/RcaIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,SAAS;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,UAAW,SAAS,sBAevC,CAAC"}

package/lib/esm/components/OpenCase/SupportTypeSelectorPage.d.ts

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

package/lib/esm/components/OpenCase/SupportTypeSelectorPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SupportTypeSelectorPage.d.ts","sourceRoot":"","sources":["../../../../src/components/OpenCase/SupportTypeSelectorPage.tsx"],"names":[],"mappings":"AAqBA,MAAM,CAAC,OAAO,UAAU,uBAAuB,gBAwL9C"}
+{"version":3,"file":"SupportTypeSelectorPage.d.ts","sourceRoot":"","sources":["../../../../src/components/OpenCase/SupportTypeSelectorPage.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAgB/D,MAAM,CAAC,OAAO,UAAU,uBAAuB,sBAwL9C"}

package/lib/esm/components/OpenCase/SupportTypeSelectorPage.js

@@ -15,7 +15,7 @@ export default function SupportTypeSelectorPage() {
     const globalDispatch = useGlobalDispatchContext();
     const [selectedSupportType, setSelectedSupportType] = useState('');
     const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
-    const { caseType, isFetchingSelectedAccountDetails, selectedAccountDetails } = useCaseSelector((state) => ({
+    const { caseType, isFetchingSelectedAccountDetails } = useCaseSelector((state) => ({
         caseType: state.caseDetails.caseType,
         isFetchingSelectedAccountDetails: state.selectedAccountDetails.isFetching,
         selectedAccountDetails: state.selectedAccountDetails,
@@ -122,18 +122,15 @@ export default function SupportTypeSelectorPage() {
             React.createElement(Trans, null, "What can we help you with?"),
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
         (allCaseTypes.isFetching || (isFetchingSelectedAccountDetails && haventLoadedMetadata(allCaseTypes))) && (React.createElement(LoadingIndicator, { size: "lg", show: true })),
-        React.createElement(Gallery, { hasGutter: true, className: "pf-u-mt-sm" }, SupportTypesArray.map((supportTypesArrayValues) => {
-            var _a;
-            return (React.createElement(GalleryItem, { key: supportTypesArrayValues.id },
-                React.createElement(Card, { id: supportTypesArrayValues.oldSupportType, key: supportTypesArrayValues.oldSupportType, className: `support-types-card${isNextBtnClickedToShowValidationError && !caseType ? ' support-types-invalid' : ''}`, onKeyDown: onKeyDown, onClick: onSupportTypeClick, onSelectableInputChange: onChange, isSelected: !!caseType && supportTypesArrayValues.oldSupportType === caseType, hasSelectableInput: true, isSelectable: true, isSelectableRaised: true, isFullHeight: true, isDisabledRaised: ((_a = selectedAccountDetails === null || selectedAccountDetails === void 0 ? void 0 : selectedAccountDetails.data) === null || _a === void 0 ? void 0 : _a.subscriptionAbuse) || false, selectableInputAriaLabel: t(supportTypesArrayValues.supportTypeHeading), "data-tracking-id": supportTypesArrayValues.dataTrackingID },
-                    React.createElement(CardBody, null, supportTypesArrayValues.icon ? (React.createElement(Split, null,
-                        React.createElement(SplitItem, { className: "pf-u-pr-lg" },
-                            React.createElement(Bullseye, null, supportTypesArrayValues.icon && supportTypesArrayValues.icon)),
-                        React.createElement(SplitItem, { isFilled: true },
-                            React.createElement("header", { className: "pf-u-font-family-redhatVF-heading-sans-serif" },
-                                React.createElement(Trans, null, supportTypesArrayValues.supportTypeHeading)),
-                            React.createElement(Trans, null, supportTypesArrayValues.supportTypeDescription)))) : (React.createElement(Bullseye, null,
-                        React.createElement("header", { className: "pf-u-font-family-redhatVF-heading-sans-serif" },
-                            React.createElement(Trans, null, supportTypesArrayValues.supportTypeHeading))))))));
-        }))));
+        React.createElement(Gallery, { hasGutter: true, className: "pf-v5-u-mt-sm" }, SupportTypesArray.map((supportTypesArrayValues) => (React.createElement(GalleryItem, { key: supportTypesArrayValues.id },
+            React.createElement(Card, { id: supportTypesArrayValues.oldSupportType, key: supportTypesArrayValues.oldSupportType, className: `support-types-card${isNextBtnClickedToShowValidationError && !caseType ? ' support-types-invalid' : ''}`, isSelectable: true, isSelectableRaised: true, onKeyDown: onKeyDown, onClick: onSupportTypeClick, onSelectableInputChange: (_event, labelledById) => onChange(labelledById, _event), isSelected: !!caseType && supportTypesArrayValues.oldSupportType === caseType, hasSelectableInput: true, isFullHeight: true, selectableInputAriaLabel: t(supportTypesArrayValues.supportTypeHeading), "data-tracking-id": supportTypesArrayValues.dataTrackingID, tabIndex: 0 },
+                React.createElement(CardBody, null, supportTypesArrayValues.icon ? (React.createElement(Split, null,
+                    React.createElement(SplitItem, { className: "pf-v5-u-pr-lg" },
+                        React.createElement(Bullseye, null, supportTypesArrayValues.icon && supportTypesArrayValues.icon)),
+                    React.createElement(SplitItem, { isFilled: true },
+                        React.createElement("header", { className: "pf-v5-u-font-family-redhatVF-heading-sans-serif" },
+                            React.createElement(Trans, null, supportTypesArrayValues.supportTypeHeading)),
+                        React.createElement(Trans, null, supportTypesArrayValues.supportTypeDescription)))) : (React.createElement(Bullseye, null,
+                    React.createElement("header", { className: "pf-v5-u-font-family-redhatVF-heading-sans-serif" },
+                        React.createElement(Trans, null, supportTypesArrayValues.supportTypeHeading))))))))))));
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router';
+import { RouteComponentProps } from 'react-router-dom';
 import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
 interface IProps {
     setIsDropdownSelected?: (flag: boolean) => void;
@@ -7,6 +7,10 @@ interface IProps {
     loadTCOnChange?: boolean;
     showTCAfterButtonClicked?: boolean;
     checkEntitledProduct?: boolean;
+    isOnSummaryPage?: boolean;
+    isOnGetSupportPage?: boolean;
+    isOnReviewPage?: boolean;
+    caseCreateExperience?: boolean;
 }
 /**
  * Renders a dropdown list to select all products.

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

@@ -1 +1 @@
-{"version":3,"file":"AllProductsSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/AllProductsSelector.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAqB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAMrF,UAAU,MAAM;IACZ,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAQD;;;;;;;GAOG;AACH,QAAA,MAAM,mBAAmB,4EAqIvB,CAAC;AAGH,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"AllProductsSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/AllProductsSelector.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAuC,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAMvG,UAAU,MAAM;IACZ,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAClC;AAQD;;;;;;;GAOG;AACH,QAAA,MAAM,mBAAmB,4EA0KvB,CAAC;AAGH,OAAO,EAAE,mBAAmB,EAAE,CAAC"}