@rh-support/troubleshoot 2.0.5 → 2.0.7

package/lib/esm/css/app.css

@@ -1,423 +1,6 @@
 /* Main CSS file
 ============================================ */
 
-/* mobile first - excludes aside */
-/* #se-solution-engine .se-grid {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-rows: 1fr auto;
-    grid-template-rows: 1fr auto;
-    grid-template-areas: "main"
-                         "nav";
-    min-height: 90vh;
-    margin-top: -2.5rem;
-    margin-bottom: -2.5rem;
-    padding: 0;
-}
-
-#se-solution-engine .se-grid #wizard-main {
-  -ms-grid-row: 1;
-  -ms-grid-column: 1;
-  grid-area: main;
-  padding: 1rem 2rem;
-  border-right: 1px solid #e7e7e7;
-  min-height: 100vh;
-  min-width: 0;
-}
-
-#se-solution-engine .se-grid #wizard-navigation {
-  -ms-grid-row: 2;
-  -ms-grid-column: 1;
-  grid-area: nav;
-  position: -webkit-sticky;
-  position: sticky;
-  bottom: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 1rem 1rem 1rem 3rem;
-  background-color: #fff;
-  border: 1px solid #e7e7e7;
-  border-bottom: initial;
-  border-left: initial;
-  z-index: 999;
-}
-
-#se-solution-engine .se-grid #wizard-progress,
-#se-solution-engine .se-grid #wizard-aside {
-  display: none;
-}
-
-/* larger devices - add progress */
-/* @media (min-width: 768px) {
-  #se-solution-engine .se-grid {
-      -ms-grid-columns: .1fr 2fr;
-      grid-template-columns: .1fr 2fr;
-      -ms-grid-rows: 1fr auto;
-      grid-template-rows: 1fr auto;
-      grid-template-areas: "progress main"
-                           "progress nav";
-  }
-
-  #se-solution-engine .se-grid #wizard-progress {
-    display: inline-block;
-    grid-area: progress;
-    border-right: 1px solid #e7e7e7;
-    padding: .2rem;
-  }
-  #se-solution-engine .se-grid #wizard-main {
-    -ms-grid-row: 1;
-    -ms-grid-column: 2;
-  }
-  #se-solution-engine .se-grid #wizard-navigation {
-    -ms-grid-row: 2;
-    -ms-grid-column: 2;
-  }
-} */
-
-/* larger devices - add aside */
-/* @media (min-width: 992px) {
-  #se-solution-engine .se-grid {
-      -ms-grid-columns: .4fr 2.5fr 1.5fr;
-      grid-template-columns: .4fr 2.5fr 1.5fr;
-      -ms-grid-rows: 1fr auto;
-      grid-template-rows: 1fr auto;
-      grid-template-areas: "progress main aside"
-                           "progress nav aside";
-  }
-
-  #se-solution-engine .se-grid #wizard-main,
-  #se-solution-engine .se-grid #wizard-navigation {
-    border-right: initial;
-  }
-
-  #se-solution-engine .se-grid #wizard-aside {
-    display: inline-block;
-    grid-area: aside;
-    background-color: #e7e7e7;
-    padding: 1em;
-  }
-
-  #se-solution-engine .se-grid #wizard-aside .wizard-aside-content {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    padding: 2em 1em;
-    max-width: 600px;
-  }
-  #se-solution-engine .se-grid #wizard-main {
-    -ms-grid-row: 1;
-    -ms-grid-column: 2;
-  }
-  #se-solution-engine .se-grid #wizard-navigation {
-    -ms-grid-row: 2;
-    -ms-grid-column: 2;
-  }
-  #se-solution-engine .se-grid #wizard-progress {
-    -ms-grid-row: 1;
-    -ms-grid-row-span: 2;
-    -ms-grid-column: 1;
-  }
-}
-@media (min-width: 768px) {
-  #se-solution-engine .se-grid #wizard-progress {
-    -ms-grid-row: 1;
-    -ms-grid-row-span: 2;
-    -ms-grid-column: 1;
-  }
-}
-@media (min-width: 992px) {
-  #se-solution-engine .se-grid #wizard-aside {
-    -ms-grid-row: 1;
-    -ms-grid-row-span: 2;
-    -ms-grid-column: 3;
-  }
-}
-
-@media (min-width: 1350px) {
-  #se-solution-engine .se-grid {
-      -ms-grid-columns: 13.5% 2.5fr 2fr;
-      grid-template-columns: 13.5% 2.5fr 2fr;
-  }
-}
-
-@media (min-width: 1680px) {
-  #se-solution-engine .se-grid {
-      -ms-grid-columns: 20% 2.5fr 2fr;
-      grid-template-columns: 20% 2.5fr 2fr;
-  }
-}
-
-
-@media (min-width: 2000px) {
-  #se-solution-engine .se-grid {
-      -ms-grid-columns: 25% 2.5fr 2fr;
-      grid-template-columns: 25% 2.5fr 2fr;
-  }
-} */
-
-/* Reorganize all of the CSS (prime example) */
-/* #se-solution-engine .se-grid button.btn-app,
-#se-solution-engine .se-grid .btn-app[role="button"] {
-  padding: .375rem 1rem;
-  border-radius: 4px;
-} */
-
-/* Layout - progress section */
-/* #se-solution-engine .se-grid #wizard-progress .wizard-progress-content {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    -webkit-box-align: end;
-        -ms-flex-align: end;
-            align-items: flex-end;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-    margin: 0;
-    padding: 2.5rem 2rem;
-    list-style: none;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li {
-    position: relative;
-    padding-bottom: 1rem;
-    width: 1.5rem;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li::after {
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 11px;
-    content: "";
-    background-color: #8b8d8f;
-    height: 1rem;
-    width: 1px;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li:last-child::after {
-    display: none;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li button {
-    display: block;
-    width: 1.5rem;
-    height: 1.5rem;
-    background-color: #d2d2d2;
-    border: 1px solid #d2d2d2;
-    border-radius: 50%;
-    padding: inherit;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li.on button {
-    background-color: #06c;
-    border-color: #06c;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li.next button,
-.se-grid #wizard-progress .wizard-progress-content li.future button {
-    background-color: #8b8d8f;
-    border-color: #8b8d8f;
-} */
-
-/* .se-grid #wizard-progress .wizard-progress-content li.next::after,
-.se-grid #wizard-progress .wizard-progress-content li.future::after {
-  background-color: #8b8d8f;
-} */
-
-/* .se-grid #wizard-progress .wizard-progress-content li.completed button {
-  background-color: #06c;
-  border-color: #06c;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li.completed button::before {
-  position: absolute;
-  top: 6px;
-  left: 6px;
-  color: #fff;
-  content: "\61";
-  font-family: "portalicons";
-  font-size: 12px;
-  line-height: 1;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li.completed::after {
-  background-color: #06c;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li button[disabled] {
-  background-color: #d2d2d2;
-  border-color: #8b8d8f;
-  color: #8b8d8f;
-}
-
-.se-grid #wizard-progress .wizard-progress-content li.completed button[disabled]::before {
-  color: #8d8e8f;
-}
-
-.se-grid #wizard-progress.section-disabled .wizard-progress-content li.completed::after {
-  background-color: #d2d2d2;
-} */
-
-/* Layout - main section */
-/* #wizard-main > .wizard-main-section {
-  min-height: 50vh;
-  padding: 2rem .5rem;
-  outline: none;
-}
-
-#wizard-main > .wizard-main-active-section {
-  min-height: 100vh;
-  outline: none;
-}
-
-#wizard-main > .visited-line,
-#wizard-main > .togo-line {
-  margin-bottom: 5rem;
-} /* ONLY until step refactoring */
-
-/* #wizard-main > .wizard-main-section > header {
-  margin-bottom: 1.8rem;
-} */
-
-/* .wizard-main-section header + p {
-  margin-bottom: .65rem;
-} */
-
-/* Layout - navigation section */
-/* #se-solution-engine .se-grid #wizard-navigation button:first-child {
-  margin-right: 1em;
-}
-
-#se-solution-engine .se-grid #wizard-navigation button:last-child {
-  margin-left: auto;
-} */
-
-/* Layout - aside section */
-/* .wizard-aside-content header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  margin-bottom: 1rem;
-}
-
-.wizard-aside-content header h3 {
-  margin-bottom: 0;
-}
-
-.wizard-aside-content header h2 {
-  margin-bottom: 0;
-  font-size: 18px;
-}
-
-.wizard-aside-content header button {
-  height: 28px;
-  margin-left: auto;
-  padding: 5px 1rem;
-  border: 0;
-  background: none;
-}
-
-.wizard-aside-content header button:hover,
-.wizard-aside-content header button:focus {
-  color: #06c;
-}
-
-.wizard-aside-content header button .fa {
-  font-size: 20px;
-} 
-
-@font-face {
-    font-family: 'Red Hat Text';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatText-Regular.ttf') format('truetype');
-    font-weight: 300;
-    font-style: 'normal';
-    text-rendering: optimizeLegibility;
-}
-
-@font-face {
-    font-family: 'Red Hat Text';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatText-Medium.ttf') format('truetype');
-    font-weight: 500;
-    font-style: 'normal';
-    text-rendering: optimizeLegibility;
-}
-
-@font-face {
-    font-family: 'Red Hat Text';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatText-MediumItalic.ttf') format('truetype');
-    font-weight: 500;
-    font-style: italic;
-    text-rendering: optimizeLegibility;
-}
-
-@font-face {
-    font-family: 'Red Hat Text';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatText-Medium.ttf') format('truetype');
-    font-weight: 700;
-    font-style: 'normal';
-    text-rendering: optimizeLegibility;
-}
-
-@font-face {
-    font-family: 'Red Hat Text';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatText-MediumItalic.ttf') format('truetype');
-    font-weight: 700;
-    font-style: italic;
-    text-rendering: optimizeLegibility;
-}
-
-@font-face {
-    font-family: 'Red Hat Display';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatDisplay-Regular.ttf') format('truetype');
-    font-weight: 300;
-    font-style: 'normal';
-    text-rendering: optimizeLegibility;
-}
-
-@font-face {
-    font-family: 'Red Hat Display';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatDisplay-Regular.ttf') format('truetype');
-    font-weight: 400;
-    font-style: 'normal';
-    text-rendering: optimizeLegibility;
-}
-
-@font-face {
-    font-family: 'Red Hat Display';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatDisplay-Medium.ttf') format('truetype');
-    font-weight: 700;
-    font-style: 'normal';
-    text-rendering: optimizeLegibility;
-}
-
-@font-face {
-    font-family: 'Red Hat Display';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatDisplay-MediumItalic.ttf') format('truetype');
-    font-weight: 700;
-    font-style: italic;
-    text-rendering: optimizeLegibility;
-}
-
-@font-face {
-    font-family: 'Red Hat Display';
-    src: url('/webassets/avalon/f/nimbus/redhat/RedHatDisplay-Bold.ttf') format('truetype');
-    font-weight: 900;
-    font-style: 'normal';
-    text-rendering: optimizeLegibility;
-}*/
-
 /* Open Case section */
 .open-case-product-wrapper {
     display: -webkit-box;
@@ -661,21 +244,6 @@ input[type='checkbox'] {
     cursor: pointer;
 }
 
-/* .more::after,
-.less::after {
-  margin-left: 8px;
-  font-family: 'FontAwesome';
-  color: #06c;
-}
-
-.more::after {
-  content: '\f103';
-}
-
-.less::after {
-  content: '\f102';
-} */
-
 .text-error {
     margin-top: 1rem;
     color: #c9190b !important;
@@ -686,19 +254,6 @@ input[type='checkbox'] {
     overflow-y: visible;
 }
 
-/* .more-less-wrapper:not(.open)::after {
-  content: "";
-  position: absolute;
-  bottom: 50px;
-  height: 50px;
-  width: 100%;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)),to(#ffffff));
-  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,#ffffff 100%);
-  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,#ffffff 100%);
-  display: block;
-  background-size: 100%;
-} */
-
 #review h3 {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -712,11 +267,6 @@ input[type='checkbox'] {
     align-items: center;
 }
 
-/* #review [role="button"] {
-  padding: 0 !important;
-  margin-left: auto;
-} */
-
 #review .list-flat pre {
     margin-bottom: 0.5rem;
     padding: 0.2rem 0;

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

@@ -1 +1 @@
-{"version":3,"file":"useResetCaseCreate.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResetCaseCreate.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,kBAAkB;;EAsCjC"}
+{"version":3,"file":"useResetCaseCreate.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResetCaseCreate.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,kBAAkB;;EAoCjC"}

package/lib/esm/hooks/useResetCaseCreate.js

@@ -4,14 +4,12 @@ import { AttachmentDispatchContext, resetAttachment } from '../components/shared
 import { useCaseDispatch } from '../context/CaseContext';
 import { ClusterRecommendationsDispatchContext } from '../context/ClusterRecommendationsContext';
 import { useRecommendationDispatchContext } from '../context/RecommendationContext';
-import { RouteDispatchContext } from '../context/RouteContext';
 import { RulesDispatchContext } from '../context/RulesContext';
 import { TCDispatchContext } from '../context/TopContentContext';
 import { CaseReducerConstants } from '../reducers/CaseConstNTypes';
 import { setCaseAccountNumber, setCaseOwner } from '../reducers/CaseReducer';
 import { resetClusterRecommendations } from '../reducers/ClusterRecommendationsReducer';
 import { resetRecommendations } from '../reducers/RecommendationsReducer';
-import { RouteReducerConstants } from '../reducers/RouteReducer';
 import { resetEARules } from '../reducers/RulesReducer';
 import { resetTopContent } from '../reducers/TopContentReducer';
 export function useResetCaseCreate() {
@@ -20,7 +18,6 @@ export function useResetCaseCreate() {
     const recommendationsDispatch = useRecommendationDispatchContext();
     const caseDispatch = useCaseDispatch();
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
-    const dispatchToRouteReducer = useContext(RouteDispatchContext);
     const rulesDispatch = useContext(RulesDispatchContext);
     const clusterRecommendationsDispatch = useContext(ClusterRecommendationsDispatchContext);
     const { globalMetadataState: { loggedInUsersAccount, loggedInUserRights, loggedInUserJwtToken }, } = useContext(GlobalMetadataStateContext);
@@ -34,7 +31,6 @@ export function useResetCaseCreate() {
         fetchLoggedInUsersAccount(dispatchToGlobalMetadataReducer, loggedInUserJwtToken, true);
         setCaseAccountNumber(caseDispatch, loggedInUserRights.data.getAccountNumber(), true, loggedInUsersAccount.data);
         setCaseOwner(caseDispatch, loggedInUserRights.data.getHydraContactFromLoggedInUser(), '', undefined, undefined, true);
-        dispatchToRouteReducer({ type: RouteReducerConstants.resetRouteState });
         resetEARules(rulesDispatch);
         resetClusterRecommendations(clusterRecommendationsDispatch);
     };

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

@@ -0,0 +1,4 @@
+export declare function useWizard(routeProps: any): {
+    getStepsSequece: (showRest?: boolean) => any;
+};
+//# sourceMappingURL=useWizard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useWizard.d.ts","sourceRoot":"","sources":["../../../src/hooks/useWizard.tsx"],"names":[],"mappings":"AA+BA,wBAAgB,SAAS,CAAC,UAAU,KAAA;iCAuNG,OAAO;EAwC7C"}

package/lib/esm/hooks/useWizard.js

@@ -0,0 +1,128 @@
+import { AlertMessage, AlertType, LoadingIndicator } from '@rh-support/components';
+import { PreviousCaseTypes } from '@rh-support/utils';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import React, { Suspense, useContext } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import CaseInformation from '../components/CaseInformation/CaseInformation';
+import CaseManagement from '../components/CaseManagement/CaseManagement';
+import IdeaInformation from '../components/IdeaInformation/IdeaInformtion';
+import OpenCase from '../components/OpenCase/OpenCase';
+import ProductSelector from '../components/ProductSelector/ProductSelector';
+import Review from '../components/Review/Review';
+import { useIsSectionValid } from '../components/shared/useIsSectionValid';
+import TroubleshootSection from '../components/TroubleshootSection/TroubleshootSection';
+import MainSection from '../components/wizardLayout/MainSection';
+import { useCaseSelector } from '../context/CaseContext';
+import { RecommendationStateContext } from '../context/RecommendationContext';
+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';
+export function useWizard(routeProps) {
+    const { routeState: { activeSection, isSearchIntent, isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
+    // state value was available later - reading dirctly from url
+    const isCaseCreate = RouteUtils.getQueryParams(routeProps).caseCreate === 'true';
+    const { recommendationState: { isLoadingRecommendations }, } = useContext(RecommendationStateContext);
+    const { topContentState: { topContent }, } = useContext(TCStateContext);
+    const { isSelectedAccounntSecureSupport, summary, caseType } = useCaseSelector((state) => ({
+        isSelectedAccounntSecureSupport: state.selectedAccountDetails.data.secureSupport,
+        summary: state.caseDetails.summary,
+        caseType: state.caseDetails.caseType,
+    }), isEqual);
+    const { t } = useTranslation();
+    const { isSectionValidFn, isActiveSectionValid } = useIsSectionValid(activeSection);
+    const isIdea = caseType === PreviousCaseTypes.FEATURE_ENHANCEMENT;
+    const defaultRouteConfiguration = {
+        canJumpTo: true,
+        enableNext: false,
+        nextButtonLabel: 'Continue',
+    };
+    const alertMessage = () => {
+        // alert title and variant based on multiple conditions for two different sections
+        const title = topContent.isFetching || (isLoadingRecommendations && summary)
+            ? t('Please wait while recommendations are loading')
+            : t('Please address the errors to proceed');
+        return (React.createElement(AlertMessage, { show: isNextBtnClickedToShowValidationError && !isActiveSectionValid, variant: (isLoadingRecommendations && summary) || topContent.isFetching ? AlertType.INFO : AlertType.DANGER, isInline: true, title: title, className: "pf-u-mb-lg" }));
+    };
+    // components that are used in wizard steps
+    const appRouteConfugurations = {
+        [AppRouteSections.GET_SUPPORT]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.GET_SUPPORT, name: 'Get support', component: (React.createElement(MainSection, { section: AppRouteSections.GET_SUPPORT, title: t('Why are you opening a case?'), description: t('Select the best category for your issue.') },
+                React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
+                    alertMessage(),
+                    React.createElement(OpenCase, { routeProps: routeProps })))), canJumpTo: isSectionValidFn(AppRouteSections.GET_SUPPORT) || activeSection === AppRouteSections.GET_SUPPORT }),
+        [AppRouteSections.SUMMARIZE]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.SUMMARIZE, name: 'Summarize', component: (React.createElement(MainSection, { section: AppRouteSections.SUMMARIZE, title: t('What are you having an issue with?') },
+                React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
+                    alertMessage(),
+                    React.createElement(ProductSelector, { routeProps: routeProps })))), canJumpTo: isSectionValidFn(AppRouteSections.SUMMARIZE) || activeSection === AppRouteSections.SUMMARIZE }),
+        [AppRouteSections.TROUBLESHOOT]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.TROUBLESHOOT, name: 'Troubleshoot', component: (React.createElement(MainSection, { section: AppRouteSections.TROUBLESHOOT, title: t('Recommendations') },
+                React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
+                    alertMessage(),
+                    React.createElement(TroubleshootSection, null)))), canJumpTo: isSectionValidFn(AppRouteSections.TROUBLESHOOT) || activeSection === AppRouteSections.TROUBLESHOOT, nextButtonLabel: isCaseCreate ? t('Continue') : t('Get support') }),
+        [AppRouteSections.DESCRIBE_MORE]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.DESCRIBE_MORE, name: 'Describe more', component: (React.createElement(MainSection, { section: AppRouteSections.DESCRIBE_MORE, title: React.createElement(React.Fragment, null,
+                    t('Case information'),
+                    isEmpty(RouteUtils.seBasePath) && isSelectedAccounntSecureSupport && (React.createElement("span", { className: "secured-support" },
+                        React.createElement(Trans, null, "Secured Support")))), description: t('Provide the details of your issue.') },
+                React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
+                    alertMessage(),
+                    React.createElement(CaseInformation, { routeProps: routeProps })))), canJumpTo: isSectionValidFn(AppRouteSections.DESCRIBE_MORE) || activeSection === AppRouteSections.DESCRIBE_MORE }),
+        [AppRouteSections.DESCRIBE_IDEA]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.DESCRIBE_IDEA, name: 'Describe more', component: (React.createElement(MainSection, { section: AppRouteSections.DESCRIBE_IDEA, title: t('Idea information'), description: t("We'll be in contact with you shortly. Look for updates on this case.") },
+                React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
+                    alertMessage(),
+                    React.createElement(IdeaInformation, null)))), canJumpTo: isSectionValidFn(AppRouteSections.DESCRIBE_IDEA) || activeSection === AppRouteSections.DESCRIBE_IDEA, nextButtonLabel: 'Submit', disableOtherSections: false }),
+        [AppRouteSections.MANAGEMENT]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.MANAGEMENT, name: 'Management', component: (React.createElement(MainSection, { section: AppRouteSections.MANAGEMENT, title: t('Case management'), descriptionClassName: "text-medium-grey" },
+                React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
+                    alertMessage(),
+                    React.createElement(CaseManagement, null)))), canJumpTo: isSectionValidFn(AppRouteSections.MANAGEMENT) || activeSection === AppRouteSections.MANAGEMENT }),
+        [AppRouteSections.REVIEW]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.REVIEW, name: 'Review', component: (React.createElement(MainSection, { section: AppRouteSections.REVIEW, title: t('Preview case'), description: t('Before submitting, review the information you entered.') },
+                React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
+                    alertMessage(),
+                    React.createElement(Review, { routeProps: routeProps })))), canJumpTo: isSectionValidFn(AppRouteSections.REVIEW) || activeSection === AppRouteSections.REVIEW, nextButtonLabel: 'Submit' }),
+        [AppRouteSections.BREAK]: Object.assign(Object.assign({}, defaultRouteConfiguration), { id: AppRouteSections.BREAK, name: 'break', component: React.createElement(React.Fragment, null) }),
+    };
+    const getSteps = (routeSequence, showRest) => {
+        if (showRest)
+            return routeSequence.filter((r) => r.id !== AppRouteSections.BREAK);
+        const steps = [];
+        for (let i = 0, max = routeSequence.length; i < max; i++) {
+            if (routeSequence[i].id === AppRouteSections.BREAK) {
+                break;
+            }
+            else {
+                steps.push(routeSequence[i]);
+            }
+        }
+        return steps;
+    };
+    // get wizard steps
+    const getStepsSequece = (showRest = false) => {
+        let routeSequence = isSearchIntent
+            ? searchIntentRouteSectionSequence
+            : isCaseCreate
+                ? openCaseRouteSectionSequence
+                : troubleshootRouteSectionsSequence;
+        if (isIdea) {
+            if (isCaseCreate) {
+                routeSequence = openCaseNonTechnicalSequence;
+            }
+            else {
+                routeSequence = troubleshootNonTechnicalSequence;
+            }
+        }
+        const stepsArray = [];
+        // here we add showRestOnNext and hidRestOnBack properties to step object
+        // these two properties used to partially hide or show steps based on position of
+        // AppRouteSections.BREAK in steps sequence
+        for (let j = 0, maxArr = routeSequence.length; j < maxArr; j++) {
+            stepsArray[j] = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, appRouteConfugurations[routeSequence[j]]), { order: j }), (j === routeSequence.length - 1 && { isLastStep: true })), (routeSequence[j + 1] &&
+                routeSequence[j + 2] &&
+                routeSequence[j + 1] === AppRouteSections.BREAK && { showRestOnNext: true })), (routeSequence[j - 1] &&
+                routeSequence[j - 2] &&
+                routeSequence[j - 1] === AppRouteSections.BREAK && { hidRestOnBack: true }));
+        }
+        return getSteps(stepsArray, showRest);
+    };
+    return {
+        getStepsSequece,
+    };
+}

package/lib/esm/reducers/RouteConstNTypes.d.ts

@@ -1,3 +1,4 @@
+import { WizardStep } from '@patternfly/react-core';
 export interface IRouteQueryParams {
     product?: string;
     version?: string;
@@ -6,6 +7,19 @@ export interface IRouteQueryParams {
     seSessionId?: string;
     summary?: string;
 }
+export interface ISectionConfiguration extends WizardStep {
+    id: number | string;
+    stepName: string;
+    nextButtonLabel: string;
+    order: number;
+    isLastStep?: boolean;
+    revealNextStep?: boolean;
+    hidRestOnBack?: boolean;
+    showRestOnNext?: boolean;
+}
+export interface ISectionConfigurations {
+    [key: string]: Partial<ISectionConfiguration>;
+}
 export interface IRouteUrlParams {
 }
 export declare enum AppRouteSections {
@@ -16,8 +30,14 @@ export declare enum AppRouteSections {
     DESCRIBE_IDEA = "describe-idea",
     MANAGEMENT = "management",
     REVIEW = "review",
-    SUBMIT_CASE = "submit-case"
+    SUBMIT_CASE = "submit-case",
+    BREAK = "break"
 }
+export declare const openCaseNonTechnicalSequence: AppRouteSections[];
+export declare const troubleshootNonTechnicalSequence: AppRouteSections[];
+export declare const troubleshootRouteSectionsSequence: AppRouteSections[];
+export declare const searchIntentRouteSectionSequence: AppRouteSections[];
+export declare const openCaseRouteSectionSequence: AppRouteSections[];
 export declare const sessionRestoreCardSections: AppRouteSections[];
 export declare const hideFileUploadSidebarWidgetSections: AppRouteSections[];
 export declare const showSidebarRecommendationsSections: AppRouteSections[];