@rh-support/troubleshoot 2.6.103 → 2.6.118

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

@@ -22,9 +22,10 @@ import { Env } from '@cee-eng/hydrajs';
 import { getRHDirectHealthCheck, getRHDirectStatusCheck, } from '@ifd-ui/ask-redhat-core';
 import { Wizard, WizardNav, WizardNavItem, WizardStep, } from '@patternfly/react-core';
 import { LoadingIndicator } from '@rh-support/components';
+import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import trim from 'lodash/trim';
-import React, { Suspense, useContext, useEffect, useRef, useState } from 'react';
+import React, { Suspense, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route } from 'react-router-dom';
 import { useAIResponseState } from '../../context/AIResponseContext';
@@ -32,6 +33,7 @@ import { useCaseSelector } from '../../context/CaseContext';
 import { RecommendationDispatchContext } from '../../context/RecommendationContext';
 import { RouteContext, RouteDispatchContext } from '../../context/RouteContext';
 import { SessionRestoreDispatchContext, SessionRestoreStateContext } from '../../context/SessionRestoreContext';
+import { useAB } from '../../hooks/useAB';
 import { useARHResponse } from '../../hooks/useARHResponse';
 import { useWizard } from '../../hooks/useWizard';
 import { appSourceId_ARH, excludedCaseTypesforARH } from '../../reducers/CaseConstNTypes';
@@ -88,7 +90,8 @@ export const generateAIQuestion = (activeSection, product, version, summary, iss
     return `${prefix} ${baseMessageMap[lang] || baseMessageMap.en}`;
 };
 function WizardMain(props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
+    const { isVariationA } = useAB();
     const [showRestFlag, setShowRestFlag] = useState(false);
     const [aiServicesAvailable, setAIServicesAvailable] = useState(false); // default to false until services are confirmed available
     const recommendationDispatch = useContext(RecommendationDispatchContext);
@@ -101,24 +104,6 @@ function WizardMain(props) {
     }), isEqual);
     const { routeState: { isCaseCreate, activeSection }, } = useContext(RouteContext);
     const aiResponseState = useAIResponseState();
-    const config = {
-        appSourceId: appSourceId_ARH,
-        authToken: (_b = (_a = window === null || window === void 0 ? void 0 : window.sessionjs) === null || _a === void 0 ? void 0 : _a.getEncodedToken()) !== null && _b !== void 0 ? _b : '',
-        packageVersion: (_c = window === null || window === void 0 ? void 0 : window.supportVersionInfo) === null || _c === void 0 ? void 0 : _c.packageVersion,
-        appEnv: Env.getEnvName(),
-    };
-    const { fetchARHResponse } = useARHResponse({
-        activeSection,
-        product: caseDetails.product,
-        version: caseDetails.version,
-        summary: caseDetails.summary,
-        issue: caseDetails.issue,
-        caseType: caseDetails.caseType,
-        config,
-    });
-    const isTroubleshootSection = activeSection === AppRouteSections.TROUBLESHOOT;
-    const isResourcesSection = activeSection === AppRouteSections.RESOURCES;
-    const isSummarizeSection = activeSection === AppRouteSections.SUMMARIZE;
     const [userSeenRecommendations, setUserSeenRecommendations] = useState(false);
     const [userClickedNextonRecommendations, setUserClickedNextonRecommendations] = useState(false);
     const [userScrolledLabel, setUserScrolledLabel] = useState(false);
@@ -127,17 +112,68 @@ function WizardMain(props) {
     const isNextButtonClickedRef = useRef(false);
     const isBackButtonClickedRef = useRef(false);
     const resultsRowRef = useRef(null);
+    const goToPrevStepRef = useRef(null);
+    //to track the previous ARH fields
     const previousARHFieldsRef = useRef({
-        product: caseDetails.product,
-        version: caseDetails.version,
-        summary: caseDetails.summary,
-        issue: caseDetails.issue,
-        caseType: caseDetails.caseType,
+        product: '',
+        version: '',
+        summary: '',
+        issue: '',
+        caseType: '',
     });
     const haveARHFieldsChangedRef = useRef(false);
     const handleChatWithAIClick = () => {
         props.setIsAIChatMode(true);
     };
+    const handleOnBackForExpandedARH = (e) => {
+        if (goToPrevStepRef.current) {
+            isBackButtonClickedRef.current = true;
+            goToPrevStepRef.current(e);
+            focusWizardMainPanel();
+        }
+    };
+    // Callback for TroubleshootSection to reset the flag on unmount
+    const resetARHFieldsChanged = useCallback(() => {
+        haveARHFieldsChangedRef.current = false;
+    }, []);
+    // Check if any of the ARH-related fields have changed
+    useEffect(() => {
+        var _a;
+        const prev = previousARHFieldsRef.current;
+        const curr = {
+            product: caseDetails.product,
+            version: caseDetails.version,
+            summary: trim(caseDetails.summary),
+            issue: trim(caseDetails.issue),
+            caseType: caseDetails.caseType,
+        };
+        const hasChanged = prev.product !== curr.product ||
+            prev.version !== curr.version ||
+            prev.summary !== curr.summary ||
+            prev.issue !== curr.issue ||
+            prev.caseType !== curr.caseType;
+        if (hasChanged) {
+            const previousHadValues = !isEmpty(prev.product) || !isEmpty(prev.version) || !isEmpty(prev.summary) || !isEmpty(prev.issue);
+            const hasExistingConversation = !isEmpty((_a = aiResponseState.aiResponse) === null || _a === void 0 ? void 0 : _a.conversationId);
+            if (previousHadValues && hasExistingConversation) {
+                haveARHFieldsChangedRef.current = true;
+            }
+            previousARHFieldsRef.current = {
+                product: curr.product,
+                version: curr.version,
+                summary: curr.summary,
+                issue: curr.issue,
+                caseType: curr.caseType,
+            };
+        }
+    }, [
+        caseDetails.product,
+        caseDetails.version,
+        caseDetails.summary,
+        caseDetails.issue,
+        caseDetails.caseType,
+        (_a = aiResponseState.aiResponse) === null || _a === void 0 ? void 0 : _a.conversationId,
+    ]);
     const { getStepsSequece } = useWizard(props.routeProps, {
         userSeenRecommendationsfn: setUserSeenRecommendations,
         userSeenRecommendationsValue: userSeenRecommendations,
@@ -151,47 +187,15 @@ function WizardMain(props) {
         aiServicesAvailable: aiServicesAvailable,
         isSecureSupport: props.isSecureSupport,
         hasConfirmedStatesideSupport: props.hasConfirmedStatesideSupport,
+        onBack: handleOnBackForExpandedARH,
+        haveARHFieldsChanged: haveARHFieldsChangedRef.current,
+        resetARHFieldsChanged,
     });
     const dispatchToRouteReducer = useContext(RouteDispatchContext);
     const { t } = useTranslation();
     useEffect(() => {
         setActiveSectionChanged(dispatchToRouteReducer, isCaseCreate ? AppRouteSections.GET_SUPPORT : AppRouteSections.TROUBLESHOOT, '');
     }, [isCaseCreate, dispatchToRouteReducer]);
-    const shouldEnableARHServices = () => {
-        // Check if the current section is relevant for AI services
-        const isRelevantSection = isTroubleshootSection || isSummarizeSection || isResourcesSection;
-        // Check if the case type is allowed (not in the excluded list)
-        const isCaseTypeAllowed = !excludedCaseTypesforARH.includes(caseDetails.caseType || '');
-        // Check if user is not a secure support or confirmed stateside support user
-        const isNotSecureOrStatesideUser = !props.isSecureSupport && !props.hasConfirmedStatesideSupport;
-        // Check if the ARH fields have changed
-        const isARHFieldsChanged = haveARHFieldsChangedRef.current;
-        // Check if user is external and has invalid entitlements
-        const isNotUnentitledExternalUser = !(props.isUserExternal && props.hasInvalidEntitlements);
-        return (isRelevantSection &&
-            isCaseTypeAllowed &&
-            isNotSecureOrStatesideUser &&
-            isARHFieldsChanged &&
-            isNotUnentitledExternalUser);
-    };
-    // Check if any of the ARH-related fields have changed
-    useEffect(() => {
-        const hasChanged = previousARHFieldsRef.current.product !== caseDetails.product ||
-            previousARHFieldsRef.current.version !== caseDetails.version ||
-            previousARHFieldsRef.current.summary !== trim(caseDetails.summary) ||
-            previousARHFieldsRef.current.issue !== trim(caseDetails.issue) ||
-            previousARHFieldsRef.current.caseType !== caseDetails.caseType;
-        if (hasChanged) {
-            previousARHFieldsRef.current = {
-                product: caseDetails.product,
-                version: caseDetails.version,
-                summary: caseDetails.summary,
-                issue: caseDetails.issue,
-                caseType: caseDetails.caseType,
-            };
-            haveARHFieldsChangedRef.current = true;
-        }
-    }, [caseDetails.product, caseDetails.version, caseDetails.summary, caseDetails.issue, caseDetails.caseType]);
     useEffect(() => {
         if (!activeSection) {
             return;
@@ -247,10 +251,10 @@ function WizardMain(props) {
         RouteUtils.navigateToSection(props.routeProps, `${props.routeProps.location.pathname}/${step.id}`, false);
     };
     const onBack = (step, prevStep) => {
-        // 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
+        // isLoadingRecommendations needs to be set to false when going back TO 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.id === AppRouteSections.SUMMARIZE) {
+        if (step.id === AppRouteSections.SUMMARIZE) {
             recommendationDispatch({
                 type: RecommendationsConstants.setIsLoadingRecommendations,
                 payload: { isLoadingRecommendations: false },
@@ -264,6 +268,47 @@ function WizardMain(props) {
         props.submitCaseAndNavigate(false);
         return;
     };
+    const config = {
+        appSourceId: appSourceId_ARH,
+        authToken: (_c = (_b = window === null || window === void 0 ? void 0 : window.sessionjs) === null || _b === void 0 ? void 0 : _b.getEncodedToken()) !== null && _c !== void 0 ? _c : '',
+        packageVersion: (_d = window === null || window === void 0 ? void 0 : window.supportVersionInfo) === null || _d === void 0 ? void 0 : _d.packageVersion,
+        appEnv: Env.getEnvName(),
+    };
+    const { fetchARHResponse } = useARHResponse({
+        activeSection,
+        product: caseDetails.product,
+        version: caseDetails.version,
+        summary: caseDetails.summary,
+        issue: caseDetails.issue,
+        caseType: caseDetails.caseType,
+        config,
+    });
+    const isTroubleshootSection = activeSection === AppRouteSections.TROUBLESHOOT;
+    const isResourcesSection = activeSection === AppRouteSections.RESOURCES;
+    const isSummarizeSection = activeSection === AppRouteSections.SUMMARIZE;
+    const shouldEnableARHServices = () => {
+        // Check if the current section is relevant for AI services
+        const isRelevantSection = isTroubleshootSection || isSummarizeSection || isResourcesSection;
+        // Check if the case type is allowed (not in the excluded list)
+        const isCaseTypeAllowed = !excludedCaseTypesforARH.includes(caseDetails.caseType || '');
+        // Check if user is not a secure support or confirmed stateside support user
+        const isNotSecureOrStatesideUser = !props.isSecureSupport && !props.hasConfirmedStatesideSupport;
+        // Check if the ARH fields have changed
+        const isARHFieldsChanged = haveARHFieldsChangedRef.current;
+        // Check if user is external and has invalid entitlements
+        const isNotUnentitledExternalUser = !(props.isUserExternal && props.hasInvalidEntitlements);
+        // For variation B, check if we have valid fields to make the API call (even if fields haven't changed)
+        const hasValidFieldsForVariationB = !isVariationA &&
+            !isEmpty(caseDetails.product) &&
+            !isEmpty(caseDetails.version) &&
+            !isEmpty(trim(caseDetails.summary)) &&
+            !isEmpty(trim(caseDetails.issue));
+        return (isRelevantSection &&
+            isCaseTypeAllowed &&
+            isNotSecureOrStatesideUser &&
+            (isARHFieldsChanged || hasValidFieldsForVariationB) &&
+            isNotUnentitledExternalUser);
+    };
     const onCurrentStepChanged = (event, currentStep, prevStep, scope) => {
         if (isNextButtonClickedRef.current) {
             onNext(currentStep);
@@ -292,6 +337,7 @@ function WizardMain(props) {
         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) => {
+        goToPrevStepRef.current = goToPrevStep;
         useEffect(() => {
             if (steps.length > 2 && (activeStep === null || activeStep === void 0 ? void 0 : activeStep.index) === 2 && isNextButtonClicked) {
                 goToNextStep({});
@@ -305,7 +351,7 @@ function WizardMain(props) {
             goToNextStep({});
             focusWizardMainPanel();
             // Fetch ARH response if conditions are met
-            if (shouldEnableARHServices() && aiServicesAvailable) {
+            if (shouldEnableARHServices() && aiServicesAvailable && !isVariationA) {
                 yield fetchARHResponse();
                 haveARHFieldsChangedRef.current = false;
             }

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":"AAcA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAQvD,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;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAGD,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBA8XtC;kBA9XQ,gBAAgB;;;AAgYzB,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;AAUvD,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;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAGD,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAqatC;kBAraQ,gBAAgB;;;AAuazB,eAAe,gBAAgB,CAAC"}

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

@@ -17,10 +17,12 @@ import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useAIResponseState } from '../../context/AIResponseContext';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RecommendationStateContext } from '../../context/RecommendationContext';
 import { RouteContext, RouteDispatchContext } from '../../context/RouteContext';
 import { SessionRestoreStateContext } from '../../context/SessionRestoreContext';
+import { useAB } from '../../hooks/useAB';
 import { excludedCaseTypesforARH } from '../../reducers/CaseConstNTypes';
 import { setCaseState } from '../../reducers/CaseReducer';
 import { AppRouteSections } from '../../reducers/RouteConstNTypes';
@@ -32,22 +34,21 @@ const defaultProps = {};
 function WizardNavigation(props) {
     var _a, _b;
     const { t } = useTranslation();
+    const { isVariationA } = useAB();
     const canCreateCase = useCanCreateCase();
     const { recommendationState } = useContext(RecommendationStateContext);
+    const aiResponseState = useAIResponseState();
     const { routeState: { activeSection, isNextBtnClickedToShowValidationError, noValidEntitlement, isSearchIntent, isCaseCreate, }, } = useContext(RouteContext);
     const { globalMetadataState: { loggedInUsersAccount, allProducts, navBarRef }, } = useContext(GlobalMetadataStateContext);
-    const { caseState, ABTestVariation, issue, summary, product, version, caseType, manageSupportCases } = useCaseSelector((state) => ({
+    const { caseState, issue, summary, product, version, caseType } = useCaseSelector((state) => ({
         caseState: state,
         issue: state.caseDetails.issue,
         summary: state.caseDetails.summary,
-        ABTestVariation: state.ABTestVariation,
         product: state.caseDetails.product,
         version: state.caseDetails.version,
         caseType: state.caseDetails.caseType,
         manageSupportCases: state.selectedOwner.data.manageSupportCases,
     }), isEqual);
-    const isATestvariation = ABTestVariation === 'A';
-    const isBTestvariation = ABTestVariation === 'B' || isEmpty(ABTestVariation);
     // To check if the user is entitled or not
     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 === caseState.caseDetails.product)) === null || _b === void 0 ? void 0 : _b.isEntitledProduct;
     const dispatchToRouteReducer = useContext(RouteDispatchContext);
@@ -78,18 +79,37 @@ function WizardNavigation(props) {
                 behavior: 'instant',
             });
         }
+        // Reset scroll state when navigating based on isVariationA
+        const resetScrollSection = isVariationA
+            ? AppRouteSections.RESOURCES
+            : isCaseCreate
+                ? AppRouteSections.SUMMARIZE
+                : AppRouteSections.TROUBLESHOOT;
+        if (props.activeStep.id === resetScrollSection) {
+            setHasUserScrolled(false);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [previousStep === null || previousStep === void 0 ? void 0 : previousStep.id, props.activeStep.id]);
     const [hasUserScrolled, setHasUserScrolled] = useState(false);
+    const [shouldOpenChatbot, setShouldOpenChatbot] = useState(false);
     useEffect(() => {
-        var _a;
+        var _a, _b;
         if (activeSection !== AppRouteSections.RESOURCES && props.isAIChatMode) {
             (_a = props.setIsAIChatMode) === null || _a === void 0 ? void 0 : _a.call(props, false);
         }
+        if (activeSection === AppRouteSections.RESOURCES && shouldOpenChatbot) {
+            (_b = props.setIsAIChatMode) === null || _b === void 0 ? void 0 : _b.call(props, true);
+            setShouldOpenChatbot(false);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeSection]);
+    }, [activeSection, shouldOpenChatbot]);
     useEffect(() => {
-        if (props.activeStep.id !== (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT)) {
+        const validSteps = isVariationA
+            ? [AppRouteSections.RESOURCES]
+            : isCaseCreate
+                ? [AppRouteSections.SUMMARIZE]
+                : [AppRouteSections.TROUBLESHOOT];
+        if (!validSteps.includes(props.activeStep.id)) {
             return;
         }
         const observer = new IntersectionObserver(([entry]) => {
@@ -147,13 +167,21 @@ function WizardNavigation(props) {
                 observer.unobserve(resultsRowElement);
             }
         };
-    }, [recommendationState.numFound, hasUserScrolled, props, isCaseCreate]);
+    }, [recommendationState.numFound, hasUserScrolled, props, isCaseCreate, isVariationA]);
     const onNext = (e) => {
         var _a;
         updateisNextBtnClickedToShowValidationError(dispatchToRouteReducer, true);
-        //handle the new changes for 13406:
-        if (props.activeStep.id === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT) &&
-            recommendationState.numFound > 2) {
+        if (isVariationA &&
+            activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT)) {
+            setShouldOpenChatbot(true);
+        }
+        // Handle scroll behavior based on isVariationA
+        const scrollSection = isVariationA
+            ? AppRouteSections.RESOURCES
+            : isCaseCreate
+                ? AppRouteSections.SUMMARIZE
+                : AppRouteSections.TROUBLESHOOT;
+        if (props.activeStep.id === scrollSection && recommendationState.numFound > 2) {
             if (!hasUserScrolled) {
                 scrollIntoView(props.resultsRowRef, {
                     navBarRef,
@@ -223,60 +251,38 @@ function WizardNavigation(props) {
         const isLoadingARH = props.isLoadingARH &&
             props.activeStep.id === AppRouteSections.RESOURCES &&
             !excludedCaseTypesforARH.includes(caseType || '');
-        if (isBTestvariation) {
-            let value = isLoadingARH ||
-                ((isEmpty(summary) || isEmpty(issue) || isEmpty(product) || isEmpty(version)) &&
-                    props.activeStep.id ===
-                        (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT)) ||
-                (!isEntitledProductLocal && props.activeStep.nextButtonLabel === 'Get support') ||
-                props.activeStep.nextButtonLabel === 'Troubleshoot' ||
-                (!isSectionValidFn(props.activeStep.id) && isNextBtnClickedToShowValidationError) ||
-                (noValidEntitlement && props.activeStep.id != AppRouteSections.TROUBLESHOOT) ||
-                (!manageSupportCases && props.activeStep.id === AppRouteSections.GET_SUPPORT) ||
-                recommendationState.isLoadingRecommendations;
-            return value;
-        }
-        else if (isATestvariation) {
-            let value = isLoadingARH ||
-                ((isEmpty(summary) || isEmpty(issue) || isEmpty(product) || isEmpty(version)) &&
-                    props.activeStep.id ===
-                        (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT)) ||
-                (!isEntitledProductLocal && props.activeStep.nextButtonLabel === 'Get support') ||
-                props.activeStep.nextButtonLabel === 'Troubleshoot' ||
-                (!isSectionValidFn(props.activeStep.id) && isNextBtnClickedToShowValidationError) ||
-                (noValidEntitlement && props.activeStep.id != AppRouteSections.TROUBLESHOOT) ||
-                (!manageSupportCases && props.activeStep.id === AppRouteSections.GET_SUPPORT) ||
-                recommendationState.isLoadingRecommendations;
-            return value;
-        }
-        else if (isATestvariation && !isCaseCreate) {
-            let value = isLoadingARH ||
-                isEmpty(summary) ||
-                isEmpty(issue) ||
-                (!isEntitledProductLocal && props.activeStep.nextButtonLabel === 'Get support') ||
-                (!isSectionValidFn(props.activeStep.id) && isNextBtnClickedToShowValidationError) ||
-                (noValidEntitlement && props.activeStep.id != AppRouteSections.TROUBLESHOOT) ||
-                (!manageSupportCases && props.activeStep.id === AppRouteSections.GET_SUPPORT) ||
-                recommendationState.isLoadingRecommendations;
-            return value;
-        }
+        const shouldCheckRecommendationsLoading = !isVariationA && recommendationState.isLoadingRecommendations;
+        let value = isLoadingARH ||
+            ((isEmpty(summary) || isEmpty(issue) || isEmpty(product) || isEmpty(version)) &&
+                props.activeStep.id === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT)) ||
+            (!isEntitledProductLocal && props.activeStep.nextButtonLabel === 'Get support') ||
+            props.activeStep.nextButtonLabel === 'Troubleshoot' ||
+            (isSectionValidFn && !isSectionValidFn(props.activeStep.id) && isNextBtnClickedToShowValidationError) ||
+            noValidEntitlement ||
+            shouldCheckRecommendationsLoading;
+        return value;
     };
     const isDisabledGoBack = () => {
-        if (isBTestvariation || isEmpty(ABTestVariation))
-            return false;
-        if (isATestvariation && props.activeStep.id === 'get-support') {
+        if (props.activeStep.id === 'get-support') {
             return isEmpty(product) || isEmpty(version);
         }
+        return false;
     };
+    const shouldShowNewARHFlowFooterButtons = isVariationA && props.isAIChatMode && activeSection === AppRouteSections.RESOURCES;
+    const shouldShowBackToAIButton = isVariationA && !props.isAIChatMode && activeSection === AppRouteSections.RESOURCES;
     // To handle entitled products
     return (React.createElement(React.Fragment, null,
         React.createElement(WizardFooterWrapper, null,
-            props.isAIChatMode && activeSection === AppRouteSections.RESOURCES ? (isCaseCreate ? (React.createElement("span", null,
+            shouldShowNewARHFlowFooterButtons ? (React.createElement(React.Fragment, null,
+                props.activeStep.order !== 0 && (React.createElement("button", { onClick: () => onBack({}), className: "btn btn-app btn-open-white main-nav-button", "data-tracking-id": `prev-of-${activeSection}`, type: "button" }, t('Go back'))),
+                React.createElement("button", { onClick: () => { var _a; return (_a = props.setIsAIChatMode) === null || _a === void 0 ? void 0 : _a.call(props, false); }, className: "btn btn-app btn-primary main-nav-button", type: "button", disabled: !aiResponseState.hasChunkReceived }, t('See more resources')))) : props.isAIChatMode && activeSection === AppRouteSections.RESOURCES ? (isCaseCreate ? (React.createElement("span", null,
                 React.createElement(Trans, { i18nKey: "<span>Return to</span> <button>case creation</button>", components: {
                         span: React.createElement("span", { className: "return-to-case-text" }),
                         button: (React.createElement(Button, { className: "return-to-case-btn", variant: "link", component: "a", onClick: props.onReturnToCaseCreation })),
                     } }))) : (React.createElement(Button, { onClick: props.onReturnToCaseCreation, variant: "link", className: "return-to-resources-btn" }, t('Back to resources')))) : (React.createElement(React.Fragment, null,
-                props.activeStep.order !== 0 && (React.createElement("button", { onClick: () => onBack({}), className: "btn btn-app btn-open-white main-nav-button", "data-tracking-id": `prev-of-${activeSection}`, type: "button", disabled: isDisabledGoBack() }, t('Go back'))),
+                props.activeStep.order !== 0 && (React.createElement("button", { onClick: shouldShowBackToAIButton
+                        ? () => { var _a; return (_a = props.setIsAIChatMode) === null || _a === void 0 ? void 0 : _a.call(props, true); }
+                        : () => onBack({}), className: "btn btn-app btn-open-white main-nav-button", "data-tracking-id": `prev-of-${activeSection}`, type: "button", disabled: !shouldShowBackToAIButton && isDisabledGoBack() }, shouldShowBackToAIButton ? t('Back to AI') : t('Go back'))),
                 React.createElement("button", { disabled: nextButtonDisabledLogic(), onClick: onNext, className: "btn btn-app btn-primary main-nav-button", "data-tracking-id": `next-of-${activeSection}`, type: "button" }, t(props.activeStep.nextButtonLabel)),
                 activeSection === AppRouteSections.RESOURCES && isFileRecommendationsTriggered && (React.createElement(Button, { onClick: handleFileRecsSelfSolved, variant: ButtonVariant.secondary, className: "issue-solved-button solved-issue-button", "data-tracking-id": "troubleshoot-self-solved-issue" }, t('I solved my issue'))))),
             React.createElement(RecommendationFeedbackModal, { isModalOpen: isRecsModalVisible, handleModalToggle: onRecsFeedbackModalToggle, modalContent: t(`Great, we're glad that resolved your issue`) }),

package/lib/esm/css/AskRedHat.css

@@ -331,7 +331,7 @@
 }
 
 .pf-chatbot--fullscreen .pf-chatbot-container {
-    height: calc(100vh - 255px) !important;
+    height: calc(100vh - 277px) !important;
 }
 
 .fullscreen-chat-footer {
@@ -339,7 +339,7 @@
     bottom: 0 !important;
     left: 0 !important;
     right: 0 !important;
-    height: 42px !important;
+    height: 57px !important;
     background: #f6f6f6 !important;
     border-top: 1px solid #d1d1d1 !important;
     align-items: center !important;
@@ -354,6 +354,13 @@ body:has(.pf-chatbot--fullscreen) .pf-v6-c-wizard__footer {
 
 body:has(.pf-chatbot--fullscreen) .fullscreen-chat-footer {
     display: flex !important;
+    gap: 10px;
+}
+
+.fullscreen-chat-footer .btn.btn-app {
+    padding: 0.375rem 1rem;
+    border-radius: var(--global-border-radius-pill, 999px);
+    border: var(--global-border-width-regular, 1px) solid var(--global-border-color-brand-default, #06c);
 }
 
 body:has(.pf-chatbot--fullscreen) .main-section {

package/lib/esm/hooks/useAB.d.ts

@@ -0,0 +1,22 @@
+export interface IUseABOptions {
+    defaultVariation?: ABEnum;
+}
+export interface IUseABReturn {
+    variation: ABEnum;
+    isVariationA: boolean;
+    isVariationB: boolean;
+}
+export interface IUseABComponentOptions extends IUseABOptions {
+    A: JSX.Element | null;
+    B: JSX.Element | null;
+}
+export interface IUseABComponentReturn extends IUseABReturn {
+    component: JSX.Element | null;
+}
+export declare enum ABEnum {
+    A = "A",
+    B = "B"
+}
+export declare function useAB(options?: IUseABOptions): IUseABReturn;
+export declare function useABComponent(options: IUseABComponentOptions): IUseABComponentReturn;
+//# sourceMappingURL=useAB.d.ts.map

package/lib/esm/hooks/useAB.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAB.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAB.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IACzD,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACvD,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;CACjC;AAED,oBAAY,MAAM;IACd,CAAC,MAAM;IACP,CAAC,MAAM;CACV;AAED,wBAAgB,KAAK,CAAC,OAAO,GAAE,aAAkB,GAAG,YAAY,CAkC/D;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,sBAAsB,GAAG,qBAAqB,CAMrF"}

package/lib/esm/hooks/useAB.js

@@ -0,0 +1,37 @@
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { getConfigField, PCM_CONFIG_FIELD_TYPE } from '@rh-support/utils';
+import { useContext, useEffect, useState } from 'react';
+export var ABEnum;
+(function (ABEnum) {
+    ABEnum["A"] = "A";
+    ABEnum["B"] = "B";
+})(ABEnum || (ABEnum = {}));
+export function useAB(options = {}) {
+    const { globalMetadataState: { pcmConfig, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
+    const [testVariation, setTestVariation] = useState((options === null || options === void 0 ? void 0 : options.defaultVariation) || ABEnum.A);
+    useEffect(() => {
+        if (loggedInUsersAccount.data.hasConfirmedStatesideSupport || loggedInUsersAccount.data.secureSupport) {
+            setTestVariation(ABEnum.B);
+            return;
+        }
+        const variantAAccountNumbers = getConfigField(pcmConfig.data, 'askRedHatAccountsA', PCM_CONFIG_FIELD_TYPE.STRING);
+        const userAccountNumber = loggedInUsersAccount.data.accountNumber;
+        const isUserInVariantAAccountNumbers = variantAAccountNumbers === null || variantAAccountNumbers === void 0 ? void 0 : variantAAccountNumbers.includes(userAccountNumber);
+        if ((variantAAccountNumbers === null || variantAAccountNumbers === void 0 ? void 0 : variantAAccountNumbers.length) && userAccountNumber && isUserInVariantAAccountNumbers) {
+            setTestVariation(ABEnum.A);
+        }
+        else {
+            setTestVariation(ABEnum.B);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pcmConfig.data, loggedInUsersAccount.data.accountNumber]);
+    return {
+        variation: testVariation,
+        isVariationA: testVariation === ABEnum.A,
+        isVariationB: testVariation === ABEnum.B,
+    };
+}
+export function useABComponent(options) {
+    const variationObject = useAB(options);
+    return Object.assign(Object.assign({}, variationObject), { component: variationObject.isVariationA ? options.A : options.B });
+}

package/lib/esm/hooks/useWizard.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface IProps {
     userSeenRecommendationsfn?: any;
     userSeenRecommendationsValue: boolean;
@@ -11,6 +12,9 @@ interface IProps {
     aiServicesAvailable: boolean;
     isSecureSupport?: boolean;
     hasConfirmedStatesideSupport?: boolean;
+    onBack?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    haveARHFieldsChanged?: boolean;
+    resetARHFieldsChanged?: () => void;
 }
 export declare function useWizard(routeProps: any, props?: IProps): {
     getStepsSequece: (showRest?: boolean) => any;

package/lib/esm/hooks/useWizard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWizard.d.ts","sourceRoot":"","sources":["../../../src/hooks/useWizard.tsx"],"names":[],"mappings":"AAgCA,UAAU,MAAM;IACZ,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,OAAO,CAAC;IACtC,6BAA6B,EAAE,OAAO,CAAC;IACvC,qCAAqC,EAAE,OAAO,CAAC;IAC/C,aAAa,EAAE,GAAG,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4BAA4B,CAAC,EAAE,OAAO,CAAC;CAC1C;AAED,wBAAgB,SAAS,CAAC,UAAU,KAAA,EAAE,KAAK,CAAC,EAAE,MAAM;iCAqSb,OAAO;EAwC7C"}
+{"version":3,"file":"useWizard.d.ts","sourceRoot":"","sources":["../../../src/hooks/useWizard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+B,MAAM,OAAO,CAAC;AA4BpD,UAAU,MAAM;IACZ,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,4BAA4B,EAAE,OAAO,CAAC;IACtC,6BAA6B,EAAE,OAAO,CAAC;IACvC,qCAAqC,EAAE,OAAO,CAAC;IAC/C,aAAa,EAAE,GAAG,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC;AAED,wBAAgB,SAAS,CAAC,UAAU,KAAA,EAAE,KAAK,CAAC,EAAE,MAAM;iCAwTb,OAAO;EAwC7C"}

package/lib/esm/hooks/useWizard.js

@@ -20,7 +20,9 @@ import { RouteContext } from '../context/RouteContext';
 import { TCStateContext } from '../context/TopContentContext';
 import { AppRouteSections, openCaseNonTechnicalSequence, openCaseRouteSectionSequence, searchIntentRouteSectionSequence, troubleshootNonTechnicalSequence, troubleshootRouteSectionsSequence, } from '../reducers/RouteConstNTypes';
 import RouteUtils from '../utils/routeUtils';
+import { useAB } from './useAB';
 export function useWizard(routeProps, props) {
+    const { isVariationA } = useAB();
     const { routeState: { activeSection, isSearchIntent, isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
     // state value was available later - reading dirctly from url
     const isCaseCreate = RouteUtils.getQueryParams(routeProps).caseCreate === 'true';
@@ -69,17 +71,29 @@ export function useWizard(routeProps, props) {
                     alertMessage(),
                     !props.isSecureSupport && !props.hasConfirmedStatesideSupport && aiInformationAlert(),
                     React.createElement(ProductSelector, { routeProps: routeProps, userSeenRecommendations: props.userSeenRecommendationsfn, userClickedNextonRecommendations: props.userClickedNextonRecommendationsValue, resultsRowRef: props.resultsRowRef, isOnGetSupportPage: false, caseCreateExperience: isCaseCreate })))), canJumpTo: isSectionValidFn(isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT) ||
-                activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT), nextButtonLabel: ((summarizeNextButtonLabelLogic() || ((props === null || props === void 0 ? void 0 : props.userSeenRecommendationsValue) && numFound < 3)) &&
-                !isEmpty(issue)) ||
-                numFound === 0 // do this so that when user refreshes tab and state persists we don't cause edge 'continue' render
+                activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT), nextButtonLabel: isVariationA
                 ? t('Continue')
-                : t('See more options') }),
+                : ((summarizeNextButtonLabelLogic() || ((props === null || props === void 0 ? void 0 : props.userSeenRecommendationsValue) && numFound < 3)) &&
+                    !isEmpty(issue)) ||
+                    numFound === 0
+                    ? t('Continue')
+                    : t('See more options') }),
         [AppRouteSections.RESOURCES]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.RESOURCES, name: isCaseCreate ? t('Resources') : t('Resources'), component: (React.createElement(MainSection, { stepNumber: 3, totalSteps: 6, section: AppRouteSections.RESOURCES, title: t('Recommendations') },
                 React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
                     alertMessage(),
-                    React.createElement(TroubleshootSection, { isAIChatMode: props.isAIChatMode, setIsAIChatMode: props.setIsAIChatMode, onChatWithAIClick: props.onChatWithAIClick, aiServicesAvailable: props.aiServicesAvailable, isSecureSupport: props.isSecureSupport, hasConfirmedStatesideSupport: props.hasConfirmedStatesideSupport })))), canJumpTo: isSectionValidFn(AppRouteSections.RESOURCES || activeSection === AppRouteSections.RESOURCES) &&
+                    React.createElement(TroubleshootSection, { isAIChatMode: props.isAIChatMode, setIsAIChatMode: props.setIsAIChatMode, onChatWithAIClick: props.onChatWithAIClick, aiServicesAvailable: props.aiServicesAvailable, isSecureSupport: props.isSecureSupport, hasConfirmedStatesideSupport: props.hasConfirmedStatesideSupport, onBack: props.onBack, routeProps: routeProps, userSeenRecommendations: props.userSeenRecommendationsfn, userClickedNextonRecommendations: props.userClickedNextonRecommendationsValue, resultsRowRef: props.resultsRowRef, haveARHFieldsChanged: props.haveARHFieldsChanged, resetARHFieldsChanged: props.resetARHFieldsChanged })))), canJumpTo: isSectionValidFn(AppRouteSections.RESOURCES || activeSection === AppRouteSections.RESOURCES) &&
                 (props === null || props === void 0 ? void 0 : props.userSeenRecommendationsValue) &&
-                (props === null || props === void 0 ? void 0 : props.userCanNavigateToTroubleshoot), nextButtonLabel: isCaseCreate ? t('Continue') : t('Convert to case') }),
+                (props === null || props === void 0 ? void 0 : props.userCanNavigateToTroubleshoot), nextButtonLabel: isVariationA
+                ? ((summarizeNextButtonLabelLogic() || ((props === null || props === void 0 ? void 0 : props.userSeenRecommendationsValue) && numFound < 3)) &&
+                    !isEmpty(issue)) ||
+                    numFound === 0
+                    ? t('Continue')
+                    : isCaseCreate
+                        ? t('See more options')
+                        : t('Convert to case')
+                : isCaseCreate
+                    ? t('Continue')
+                    : t('Convert to case') }),
         [AppRouteSections.ADDITIONAL_INFORMATION]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.ADDITIONAL_INFORMATION, name: t('Additional information'), component: (React.createElement(MainSection, { stepNumber: 4, totalSteps: 6, section: AppRouteSections.ADDITIONAL_INFORMATION, title: React.createElement(React.Fragment, null,
                     t('Case information'),
                     isEmpty(RouteUtils.seBasePath) && isSelectedAccounntSecureSupport && (React.createElement("span", { className: "secured-support" },