From ca0bee41e4a0da370980a41f6e04dd88ed567244 Mon Sep 17 00:00:00 2001
From: ektaghag-eaton <EktaNGhag@eaton.com>
Date: Mon, 11 Sep 2023 17:16:41 +0530
Subject: [PATCH 1/8] Pass WorkflowCard props to every screen component

---
 .../docs/components/workflow-card.md          |   6 +-
 .../example/src/navigation/AppRouter.tsx      | 156 +++++++++++++++++-
 .../WorkflowCard/WorkflowCard.types.ts        |   5 -
 .../WorkflowCard/WorkflowCardActions.tsx      |   2 +-
 .../WorkflowCard/WorkflowCardInstructions.tsx |   3 +-
 .../AccountDetailsScreenBase.tsx              |   4 +-
 .../ContactScreen/ContactSupportScreen.tsx    |   6 +-
 .../ContactSupportScreenBase.tsx              |  13 +-
 .../CreateAccountScreenBase.tsx               |   3 +-
 .../src/screens/EulaScreen/EulaScreen.tsx     |   5 +
 .../src/screens/EulaScreen/EulaScreenBase.tsx |  11 +-
 .../src/screens/EulaScreen/types.ts           |   2 +-
 .../ExistingAccountSuccessScreen.tsx          |   4 +
 .../ForgotPasswordScreenBase.tsx              |   3 +-
 .../RegistrationSuccessScreen.tsx             |   6 +-
 .../SuccessScreen/SuccessScreenBase.tsx       |  12 +-
 .../VerifyCodeScreen/VerifyCodeScreenBase.tsx |   3 +-
 17 files changed, 211 insertions(+), 33 deletions(-)

diff --git a/login-workflow/docs/components/workflow-card.md b/login-workflow/docs/components/workflow-card.md
index e4f3fa92..922dc89d 100644
--- a/login-workflow/docs/components/workflow-card.md
+++ b/login-workflow/docs/components/workflow-card.md
@@ -10,7 +10,7 @@ import { WorkflowCard, WorkflowCardHeader, WorkflowCardBody, WorkflowCardInstruc
 
 <WorkflowCard {...cardBaseProps}>
   <WorkflowCardHeader {...headerProps} />
-  <WorkflowCardInstructions {...instructionsProps} divider />
+  <WorkflowCardInstructions {...instructionsProps} />
   <WorkflowCardBody>
     {/* Your Screen Contents */}          
   </WorkflowCardBody>
@@ -48,7 +48,7 @@ This component is a simple wrapper that is used for layout. Instructions and you
 | Prop Name | Type | Description | Default |
 |---|---|---|---|
 | instructions | `string \| JSX.Element` | The instructions to display in the card. |  |
-| divider | `boolean` | If true, a dividing line will be displayed below the instruction text | `false` |
+| divider | `boolean` | If true, a dividing line will be displayed below the instruction text | `true` |
 
 The properties of the underlying MUI [Typography](https://mui.com/components/typography/) component are also available.
 
@@ -58,7 +58,7 @@ The WorkflowCardActions is used to configure the buttons that appear at the bott
 
 | Prop Name | Type | Description | Default |
 |---|---|---|---|
-| divider | `boolean` | If true, a dividing line will be displayed above the button panel | `false` |
+| divider | `boolean` | If true, a dividing line will be displayed above the button panel | `true` |
 | showPrevious | `boolean` | Indicates whether the previous button should be displayed | `true` |
 | canGoPrevious | `boolean \| (() => boolean)` | A boolean or function that indicates whether the previous button should be enabled. | `true` |
 | previousLabel | `string` | The label on the previous button |  |
diff --git a/login-workflow/example/src/navigation/AppRouter.tsx b/login-workflow/example/src/navigation/AppRouter.tsx
index 3d384b4b..9142f7df 100644
--- a/login-workflow/example/src/navigation/AppRouter.tsx
+++ b/login-workflow/example/src/navigation/AppRouter.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import {
     AuthContextProvider,
@@ -8,6 +9,10 @@ import {
     RegistrationContextProvider,
     ResetPasswordScreen,
     RegistrationWorkflow,
+    EulaScreen,
+    AccountDetailsScreen,
+    CreateAccountScreen,
+    VerifyCodeScreen,
 } from '@brightlayer-ui/react-auth-workflow';
 import { useApp } from '../contexts/AppContextProvider';
 import { useNavigate } from 'react-router';
@@ -19,6 +24,8 @@ import { routes } from './Routing';
 import { ExampleHome } from '../screens/ExampleHome';
 import i18nAppInstance from '../translations/i18n';
 import { ChangePassword } from '../components/ChangePassword';
+import EatonLogo from '../assets/images/eaton_stacked_logo.png';
+import { Home } from '@mui/icons-material';
 
 export const AppRouter: React.FC = () => {
     const navigate = useNavigate();
@@ -54,7 +61,25 @@ export const AppRouter: React.FC = () => {
                     path={'/forgot-password'}
                     element={
                         <ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
-                            <ForgotPasswordScreen />
+                            <ForgotPasswordScreen
+                                WorkflowCardInstructionProps={{
+                                    instructions: 'Test Instruction',
+                                    divider: false,
+                                }}
+                                WorkflowCardHeaderProps={{
+                                    avatar: <Home />,
+                                }}
+                                WorkflowCardBaseProps={{
+                                    loading: true,
+                                    backgroundImage: EatonLogo,
+                                }}
+                                WorkflowCardActionsProps={{
+                                    nextLabel: 'Go',
+                                    fullWidthButton: true,
+                                    showPrevious: false,
+                                    divider: true,
+                                }}
+                            />
                         </ReactRouterGuestGuard>
                     }
                 />
@@ -62,7 +87,25 @@ export const AppRouter: React.FC = () => {
                     path={'/contact-support'}
                     element={
                         <ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
-                            <ContactSupportScreen />
+                            <ContactSupportScreen
+                                WorkflowCardInstructionProps={{
+                                    instructions: 'Test Instruction',
+                                    divider: false,
+                                }}
+                                WorkflowCardHeaderProps={{
+                                    avatar: <Home />,
+                                }}
+                                WorkflowCardBaseProps={{
+                                    loading: true,
+                                    backgroundImage: EatonLogo,
+                                }}
+                                WorkflowCardActionsProps={{
+                                    nextLabel: 'Go',
+                                    fullWidthButton: true,
+                                    showPrevious: false,
+                                    divider: false,
+                                }}
+                            />
                         </ReactRouterGuestGuard>
                     }
                 />
@@ -70,7 +113,25 @@ export const AppRouter: React.FC = () => {
                     path={'/reset-password'}
                     element={
                         <ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
-                            <ResetPasswordScreen />
+                            <ResetPasswordScreen
+                                WorkflowCardInstructionProps={{
+                                    instructions: 'Test Instruction',
+                                    divider: false,
+                                }}
+                                WorkflowCardHeaderProps={{
+                                    avatar: <Home />,
+                                }}
+                                WorkflowCardBaseProps={{
+                                    loading: true,
+                                    backgroundImage: EatonLogo,
+                                }}
+                                WorkflowCardActionsProps={{
+                                    nextLabel: 'Go',
+                                    fullWidthButton: true,
+                                    showPrevious: false,
+                                    divider: false,
+                                }}
+                            />
                         </ReactRouterGuestGuard>
                     }
                 />
@@ -116,7 +177,94 @@ export const AppRouter: React.FC = () => {
                     </RegistrationContextProvider>
                 }
             >
-                <Route path={'/self-registration'} element={<RegistrationWorkflow />} />
+                <Route
+                    path={'/self-registration'}
+                    element={
+                        <RegistrationWorkflow>
+                            {/* Eula Screen */}
+                            {/* <EulaScreen 
+                        WorkflowCardInstructionProps={{
+                            instructions: 'Test Instruction',
+                            divider: true,
+                        }}
+                        WorkflowCardHeaderProps={{
+                            avatar: <Home/>,
+                            title: 'Test Title',
+                        }}
+                        WorkflowCardBaseProps={{
+                            loading: true,
+                            backgroundImage: EatonLogo,
+                        }}
+                        WorkflowCardActionsProps={{
+                            nextLabel: 'Go',
+                            fullWidthButton: true,
+                            showPrevious: false,
+                            divider: true,
+                        }}
+                    /> */}
+                            {/* AccountDetailsScreen */}
+                            {/* <AccountDetailsScreen
+                        WorkflowCardInstructionProps={{
+                            instructions: 'Test Instruction',
+                            divider: false,
+                        }}
+                        WorkflowCardHeaderProps={{
+                            avatar: <Home/>
+                        }}
+                        WorkflowCardBaseProps={{
+                            loading: false,
+                            backgroundImage: EatonLogo,
+                        }}
+                        WorkflowCardActionsProps={{
+                            nextLabel: 'Go',
+                            fullWidthButton: true,
+                            showPrevious: false,
+                            divider: false,
+                        }}
+                    /> */}
+                            {/* CreateAccountScreen */}
+                            {/* <CreateAccountScreen
+                        WorkflowCardInstructionProps={{
+                            instructions: 'Test Instruction',
+                            divider: false,
+                        }}
+                        WorkflowCardHeaderProps={{
+                            avatar: <Home/>
+                        }}
+                        WorkflowCardBaseProps={{
+                            loading: false,
+                            backgroundImage: EatonLogo,
+                        }}
+                        WorkflowCardActionsProps={{
+                            nextLabel: 'Go',
+                            fullWidthButton: true,
+                            showPrevious: false,
+                            divider: false,
+                        }}
+                    /> */}
+                            {/* Verify code Screen */}
+                            <VerifyCodeScreen
+                                WorkflowCardInstructionProps={{
+                                    instructions: 'Test Instruction',
+                                    divider: false,
+                                }}
+                                WorkflowCardHeaderProps={{
+                                    avatar: <Home />,
+                                }}
+                                WorkflowCardBaseProps={{
+                                    loading: true,
+                                    backgroundImage: EatonLogo,
+                                }}
+                                WorkflowCardActionsProps={{
+                                    nextLabel: 'Go',
+                                    fullWidthButton: true,
+                                    showPrevious: false,
+                                    divider: false,
+                                }}
+                            />
+                        </RegistrationWorkflow>
+                    }
+                />
                 <Route path={'/register-by-invite'} element={<RegistrationWorkflow isInviteRegistration />} />
             </Route>
         </Routes>
diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts b/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
index f262149e..b99d565d 100644
--- a/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
+++ b/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
@@ -18,11 +18,6 @@ export type WorkflowCardBaseProps = BoxProps & {
      * A custom background to render behind the card
      */
     backgroundImage?: string;
-
-    /**
-     * An error message to render for the card
-     */
-    error?: boolean | string;
 };
 
 export type WorkflowCardHeaderProps = CardHeaderProps;
diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx
index c6b1498f..853f7f1e 100644
--- a/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx
+++ b/login-workflow/src/components/WorkflowCard/WorkflowCardActions.tsx
@@ -42,7 +42,7 @@ const useUtilityClasses = (ownerState: WorkflowCardActionsProps): Record<Workflo
 
 export const WorkflowCardActions: React.FC<WorkflowCardActionsProps> = (props) => {
     const {
-        divider = false,
+        divider = true,
         canGoPrevious,
         showPrevious,
         previousLabel,
diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx b/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx
index d8c97e80..e83384cc 100644
--- a/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx
+++ b/login-workflow/src/components/WorkflowCard/WorkflowCardInstructions.tsx
@@ -13,8 +13,7 @@ import { WorkflowCardInstructionProps } from './WorkflowCard.types';
  */
 
 export const WorkflowCardInstructions: React.FC<WorkflowCardInstructionProps> = (props) => {
-    const { instructions, divider, ...otherProps } = props;
-
+    const { instructions, divider = true, ...otherProps } = props;
     return (
         <>
             {typeof instructions === 'string' ? (
diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
index 827ceb07..f45779d1 100644
--- a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
+++ b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
@@ -101,7 +101,7 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
-            <WorkflowCardInstructions {...instructionsProps} divider />
+            <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>
                 <ErrorManager {...errorDisplayConfig}>
                     <TextField
@@ -156,7 +156,7 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
             <WorkflowCardActions
                 {...actionsProps}
                 canGoNext={actionsProps.canGoNext && isFirstNameValid && isLastNameValid}
-                divider
+                // divider
             />
         </WorkflowCard>
     );
diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
index 6c1a802b..fe2191de 100644
--- a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
+++ b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
@@ -40,6 +40,8 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
         contactEmail = 'something@email.com',
         contactPhone = '1-800-123-4567',
         dismissButtonLabel = t('bluiCommon:ACTIONS.OKAY'),
+        WorkflowCardBaseProps,
+        WorkflowCardInstructionProps,
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
     } = props;
@@ -63,14 +65,16 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
 
     return (
         <ContactSupportScreenBase
+            WorkflowCardBaseProps={WorkflowCardBaseProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
+            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
+            WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             emailSupportTitle={emailSupportTitle}
             phoneSupportTitle={phoneSupportTitle}
             contactEmail={contactEmail}
             contactPhone={contactPhone}
             dismissButtonLabel={dismissButtonLabel}
-            WorkflowCardActionsProps={workflowCardActionsProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx
index 450d01fc..7bf23212 100644
--- a/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx
+++ b/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { Divider, Typography } from '@mui/material';
-import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader } from '../../components/WorkflowCard';
+import { Typography } from '@mui/material';
+import {
+    WorkflowCard,
+    WorkflowCardActions,
+    WorkflowCardBody,
+    WorkflowCardHeader,
+    WorkflowCardInstructions,
+} from '../../components/WorkflowCard';
 import { ContactSupportScreenProps } from './types';
 import Box, { BoxProps } from '@mui/material/Box';
 import { ContactScreenClassKey, getContactScreenUtilityClass } from './utilityClasses';
@@ -67,11 +73,13 @@ export const ContactSupportScreenBase: React.FC<ContactSupportScreenProps> = (pr
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
     const headerProps = props.WorkflowCardHeaderProps || {};
+    const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
 
     return (
         <WorkflowCard {...cardBaseProps} className={defaultClasses.root} data-testid={defaultClasses.root}>
             <WorkflowCardHeader {...headerProps} className={defaultClasses.title} data-testid={defaultClasses.title} />
+            {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             {icon && (
                 <Box sx={{ m: 3, mb: 5, textAlign: 'center' }} className={defaultClasses.icon}>
                     {icon}
@@ -161,7 +169,6 @@ export const ContactSupportScreenBase: React.FC<ContactSupportScreenProps> = (pr
                     </Typography>
                 )}
             </WorkflowCardBody>
-            <Divider />
             <WorkflowCardActions
                 {...actionsProps}
                 nextLabel={dismissButtonLabel || actionsProps.nextLabel}
diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx
index 441bf97a..d6ca51f8 100644
--- a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx
+++ b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx
@@ -69,7 +69,7 @@ export const CreateAccountScreenBase: React.FC<
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
-            <WorkflowCardInstructions {...instructionsProps} divider />
+            <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>
                 <ErrorManager {...errorDisplayConfig}>
                     <TextField
@@ -104,7 +104,6 @@ export const CreateAccountScreenBase: React.FC<
             </WorkflowCardBody>
             <WorkflowCardActions
                 {...actionsProps}
-                divider
                 canGoNext={emailInput.length > 0 && isEmailValid && actionsProps.canGoNext}
             ></WorkflowCardActions>
         </WorkflowCard>
diff --git a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx
index d0dae5d5..95abe8b8 100644
--- a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx
+++ b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx
@@ -19,6 +19,7 @@ import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
  * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component
  * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component
  * @param errorDisplayConfig configuration for customizing how errors are displayed
+ * @param onRefetch used to refetch Eula content.
  *
  * @category Component
  */
@@ -38,7 +39,9 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {
     const regWorkflow = useRegistrationWorkflowContext();
     const { nextScreen, previousScreen, screenData, currentScreen, totalScreens, isInviteRegistration } = regWorkflow;
     const {
+        WorkflowCardBaseProps,
         WorkflowCardHeaderProps,
+        WorkflowCardInstructionProps,
         WorkflowCardActionsProps,
         eulaContent,
         checkboxLabel = t('bluiRegistration:REGISTRATION.EULA.AGREE_TERMS'),
@@ -160,10 +163,12 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {
 
     return (
         <EulaScreenBase
+            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
             eulaContent={eulaData}
             WorkflowCardBaseProps={{
                 loading: isLoading,
+                ...WorkflowCardBaseProps,
             }}
             checkboxLabel={checkboxLabel}
             checkboxProps={checkboxProps}
diff --git a/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx b/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx
index 43f8043f..c5da4fd4 100644
--- a/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx
+++ b/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx
@@ -1,6 +1,12 @@
 import React, { useCallback, useState } from 'react';
 import { EulaScreenProps } from './types';
-import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader } from '../../components/WorkflowCard';
+import {
+    WorkflowCard,
+    WorkflowCardActions,
+    WorkflowCardBody,
+    WorkflowCardHeader,
+    WorkflowCardInstructions,
+} from '../../components/WorkflowCard';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
 import Box from '@mui/material/Box';
@@ -23,6 +29,7 @@ import ReplaySharpIcon from '@mui/icons-material/ReplaySharp';
  * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component
  * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component
  * @param errorDisplayConfig configuration for customizing how errors are displayed
+ * @param onRefetch used to refetch Eula content.
  *
  * @category Component
  */
@@ -41,6 +48,7 @@ export const EulaScreenBase: React.FC<EulaScreenProps> = (props) => {
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
     const headerProps = props.WorkflowCardHeaderProps || {};
+    const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
 
     const [eulaAccepted, setEulaAccepted] = useState(initialCheckboxValue ?? false);
@@ -61,6 +69,7 @@ export const EulaScreenBase: React.FC<EulaScreenProps> = (props) => {
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
+            {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             <WorkflowCardBody>
                 {checkboxProps?.disabled ? (
                     <Box
diff --git a/login-workflow/src/screens/EulaScreen/types.ts b/login-workflow/src/screens/EulaScreen/types.ts
index 71df09d4..5befc015 100644
--- a/login-workflow/src/screens/EulaScreen/types.ts
+++ b/login-workflow/src/screens/EulaScreen/types.ts
@@ -43,7 +43,7 @@ export type EulaScreenProps = WorkflowCardProps & {
     errorDisplayConfig?: ErrorManagerProps;
 
     /**
-     * Function to refectch verify code for retry link
+     * Function to refetch Eula content
      * @returns void
      */
     onRefetch?: () => void;
diff --git a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
index 3e54f638..07951481 100644
--- a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
+++ b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
@@ -29,6 +29,8 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
         onDismiss = (): void => navigate(routeConfig.LOGIN),
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
+        WorkflowCardBaseProps,
+        WorkflowCardInstructionProps,
     } = props;
 
     const workflowCardHeaderProps = {
@@ -50,7 +52,9 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
 
     return (
         <SuccessScreenBase
+            WorkflowCardBaseProps={WorkflowCardBaseProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
+            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
             icon={icon}
             messageTitle={messageTitle}
             message={message}
diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
index 8b1cea9f..ba02a1d7 100644
--- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
+++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
@@ -82,7 +82,7 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
             ) : (
                 <WorkflowCard {...cardBaseProps}>
                     <WorkflowCardHeader {...headerProps} />
-                    <WorkflowCardInstructions {...instructionsProps} divider />
+                    <WorkflowCardInstructions {...instructionsProps} />
                     <WorkflowCardBody>
                         <ErrorManager {...errorDisplayConfig}>
                             <TextField
@@ -108,7 +108,6 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
                         </ErrorManager>
                     </WorkflowCardBody>
                     <WorkflowCardActions
-                        divider
                         {...actionsProps}
                         canGoNext={emailInput.length > 0 && isEmailValid && actionsProps.canGoNext}
                         onNext={handleOnNext}
diff --git a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
index 96ce66c0..32d4f616 100644
--- a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
+++ b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
@@ -53,6 +53,8 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
         canDismiss = true,
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
+        WorkflowCardBaseProps,
+        WorkflowCardInstructionProps,
     } = props;
 
     const workflowCardHeaderProps = {
@@ -74,11 +76,13 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
 
     return (
         <SuccessScreenBase
+            WorkflowCardBaseProps={WorkflowCardBaseProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
+            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
+            WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             messageTitle={messageTitle}
             message={message}
-            WorkflowCardActionsProps={workflowCardActionsProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx
index 7cfb37a9..0c53d650 100644
--- a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx
+++ b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
-import { Divider } from '@mui/material';
-import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader } from '../../components/WorkflowCard';
+import {
+    WorkflowCard,
+    WorkflowCardActions,
+    WorkflowCardBody,
+    WorkflowCardHeader,
+    WorkflowCardInstructions,
+} from '../../components/WorkflowCard';
 import { SuccessScreenProps } from './types';
 import { WorkflowFinishState } from '../../components';
 
@@ -26,15 +31,16 @@ export const SuccessScreenBase: React.FC<SuccessScreenProps> = (props) => {
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
     const headerProps = props.WorkflowCardHeaderProps || {};
+    const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
 
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
+            {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             <WorkflowCardBody>
                 <WorkflowFinishState icon={icon} title={messageTitle} description={message} />
             </WorkflowCardBody>
-            <Divider />
             <WorkflowCardActions
                 {...actionsProps}
                 nextLabel={dismissButtonLabel || actionsProps.nextLabel}
diff --git a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx
index 8bf08ecf..79eb10ca 100644
--- a/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx
+++ b/login-workflow/src/screens/VerifyCodeScreen/VerifyCodeScreenBase.tsx
@@ -83,7 +83,7 @@ export const VerifyCodeScreenBase: React.FC<React.PropsWithChildren<VerifyCodeSc
     return (
         <WorkflowCard {...cardBaseProps}>
             <WorkflowCardHeader {...headerProps} />
-            <WorkflowCardInstructions {...instructionsProps} divider />
+            <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>
                 <ErrorManager {...errorDisplayConfig}>
                     <TextField
@@ -120,7 +120,6 @@ export const VerifyCodeScreenBase: React.FC<React.PropsWithChildren<VerifyCodeSc
             </WorkflowCardBody>
             <WorkflowCardActions
                 {...actionsProps}
-                divider
                 canGoNext={verifyCode.length > 0 && isCodeValid && actionsProps.canGoNext}
                 onNext={handleOnNext}
                 onPrevious={handleOnPrevious}

From 8c21cd9b9b3def0bd55aeb5aea1063c9466252f8 Mon Sep 17 00:00:00 2001
From: ektaghag-eaton <EktaNGhag@eaton.com>
Date: Tue, 12 Sep 2023 17:32:00 +0530
Subject: [PATCH 2/8] Update unused proos as otherProps

---
 .../AccountDetailsScreen/AccountDetailsScreenBase.tsx       | 1 -
 .../src/screens/ContactScreen/ContactSupportScreen.tsx      | 6 ++----
 login-workflow/src/screens/EulaScreen/EulaScreen.tsx        | 4 ++--
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
index f45779d1..d85737db 100644
--- a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
+++ b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
@@ -156,7 +156,6 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
             <WorkflowCardActions
                 {...actionsProps}
                 canGoNext={actionsProps.canGoNext && isFirstNameValid && isLastNameValid}
-                // divider
             />
         </WorkflowCard>
     );
diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
index fe2191de..b725fae0 100644
--- a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
+++ b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
@@ -40,10 +40,9 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
         contactEmail = 'something@email.com',
         contactPhone = '1-800-123-4567',
         dismissButtonLabel = t('bluiCommon:ACTIONS.OKAY'),
-        WorkflowCardBaseProps,
-        WorkflowCardInstructionProps,
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
+        ...otherContactSupportProps
     } = props;
 
     const workflowCardHeaderProps = {
@@ -65,9 +64,7 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
 
     return (
         <ContactSupportScreenBase
-            WorkflowCardBaseProps={WorkflowCardBaseProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
-            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
             WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             emailSupportTitle={emailSupportTitle}
@@ -75,6 +72,7 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
             contactEmail={contactEmail}
             contactPhone={contactPhone}
             dismissButtonLabel={dismissButtonLabel}
+            {...otherContactSupportProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx
index 95abe8b8..aa2ae491 100644
--- a/login-workflow/src/screens/EulaScreen/EulaScreen.tsx
+++ b/login-workflow/src/screens/EulaScreen/EulaScreen.tsx
@@ -41,12 +41,12 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {
     const {
         WorkflowCardBaseProps,
         WorkflowCardHeaderProps,
-        WorkflowCardInstructionProps,
         WorkflowCardActionsProps,
         eulaContent,
         checkboxLabel = t('bluiRegistration:REGISTRATION.EULA.AGREE_TERMS'),
         html,
         initialCheckboxValue,
+        ...otherEulaScreenProps
     } = props;
 
     const eulaAccepted = initialCheckboxValue ? initialCheckboxValue : screenData.Eula.accepted;
@@ -163,7 +163,6 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {
 
     return (
         <EulaScreenBase
-            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
             eulaContent={eulaData}
             WorkflowCardBaseProps={{
@@ -178,6 +177,7 @@ export const EulaScreen: React.FC<EulaScreenProps> = (props) => {
             WorkflowCardActionsProps={workflowCardActionsProps}
             errorDisplayConfig={errorDisplayConfig}
             onRefetch={onRefetch}
+            {...otherEulaScreenProps}
         />
     );
 };

From 2769d8e1c6dcb912bfd97d0ea82cb982c12ef02f Mon Sep 17 00:00:00 2001
From: ektaghag-eaton <EktaNGhag@eaton.com>
Date: Wed, 13 Sep 2023 14:05:26 +0530
Subject: [PATCH 3/8] fix other props

---
 .../ExistingAccountSuccessScreen.tsx                          | 4 +++-
 .../RegistrationSuccessScreen/RegistrationSuccessScreen.tsx   | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
index 07951481..1759ac1e 100644
--- a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
+++ b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
@@ -31,6 +31,7 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
         WorkflowCardActionsProps,
         WorkflowCardBaseProps,
         WorkflowCardInstructionProps,
+        ...otherExistingAccountSuccessScreenProps
     } = props;
 
     const workflowCardHeaderProps = {
@@ -55,10 +56,11 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
             WorkflowCardBaseProps={WorkflowCardBaseProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
             WorkflowCardInstructionProps={WorkflowCardInstructionProps}
+            WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             messageTitle={messageTitle}
             message={message}
-            WorkflowCardActionsProps={workflowCardActionsProps}
+            {...otherExistingAccountSuccessScreenProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
index 32d4f616..64a416f7 100644
--- a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
+++ b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
@@ -55,6 +55,7 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
         WorkflowCardActionsProps,
         WorkflowCardBaseProps,
         WorkflowCardInstructionProps,
+        ...otherRegistrationSuccessScreenProps
     } = props;
 
     const workflowCardHeaderProps = {
@@ -83,6 +84,7 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
             icon={icon}
             messageTitle={messageTitle}
             message={message}
+            {...otherRegistrationSuccessScreenProps}
         />
     );
 };

From c5a4536656c00597bb7f0baf19da833cef95b6dd Mon Sep 17 00:00:00 2001
From: ektaghag-eaton <EktaNGhag@eaton.com>
Date: Wed, 13 Sep 2023 15:36:03 +0530
Subject: [PATCH 4/8] Fix otherProps for success screen

---
 .../src/screens/ContactScreen/ContactSupportScreen.tsx          | 2 --
 .../ExistingAccountSuccessScreen.tsx                            | 2 --
 .../RegistrationSuccessScreen/RegistrationSuccessScreen.tsx     | 2 --
 3 files changed, 6 deletions(-)

diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
index 5b0551cb..c2a3cce6 100644
--- a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
+++ b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
@@ -66,9 +66,7 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
 
     return (
         <ContactSupportScreenBase
-            WorkflowCardBaseProps={WorkflowCardBaseProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
-            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
             WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             emailSupportTitle={emailSupportTitle}
diff --git a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
index 1759ac1e..5a4a37f9 100644
--- a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
+++ b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
@@ -53,9 +53,7 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
 
     return (
         <SuccessScreenBase
-            WorkflowCardBaseProps={WorkflowCardBaseProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
-            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
             WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             messageTitle={messageTitle}
diff --git a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
index 64a416f7..111e5819 100644
--- a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
+++ b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
@@ -77,9 +77,7 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
 
     return (
         <SuccessScreenBase
-            WorkflowCardBaseProps={WorkflowCardBaseProps}
             WorkflowCardHeaderProps={workflowCardHeaderProps}
-            WorkflowCardInstructionProps={WorkflowCardInstructionProps}
             WorkflowCardActionsProps={workflowCardActionsProps}
             icon={icon}
             messageTitle={messageTitle}

From d0fa294a19071bc53778c179d9df4dfc60f7e63a Mon Sep 17 00:00:00 2001
From: ektaghag-eaton <EktaNGhag@eaton.com>
Date: Fri, 15 Sep 2023 11:45:06 +0530
Subject: [PATCH 5/8] Add test case for default divider

---
 .../src/components/WorkflowCard/Workflow.test.tsx           | 6 ++++++
 .../src/components/WorkflowCard/WorkflowCard.types.ts       | 1 +
 .../src/screens/ContactScreen/ContactSupportScreen.tsx      | 2 --
 .../ExistingAccountSuccessScreen.tsx                        | 2 --
 .../RegistrationSuccessScreen/RegistrationSuccessScreen.tsx | 2 --
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/login-workflow/src/components/WorkflowCard/Workflow.test.tsx b/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
index 1699166d..4fa71796 100644
--- a/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
+++ b/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
@@ -132,6 +132,12 @@ describe('WorkflowCardInstructions tests', () => {
         render(<WorkflowCardInstructions instructions="Test" divider={true} />);
         expect(screen.getByText('Test')).toBeInTheDocument();
     });
+
+    it('renders with divider', () => {
+        const {container} = render(<WorkflowCardInstructions instructions="Test" />);
+        expect(screen.getByText('Test')).toBeInTheDocument();
+        expect(container.getElementsByClassName('MuiDivider-root').length).toBe(1);
+    });
 });
 
 describe('ErrorState tests', () => {
diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts b/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
index b99d565d..51d5dc6d 100644
--- a/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
+++ b/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
@@ -30,6 +30,7 @@ export type WorkflowCardInstructionProps = TypographyProps & {
 
     /**
      * Whether or not to show a divider below the instructions
+     * @default true
      */
     divider?: boolean;
 };
diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
index c2a3cce6..6439fc2c 100644
--- a/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
+++ b/login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
@@ -40,8 +40,6 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
         contactPhone = '1-800-123-4567',
         dismissButtonLabel = t('bluiCommon:ACTIONS.OKAY'),
         onDismiss,
-        WorkflowCardBaseProps,
-        WorkflowCardInstructionProps,
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
         ...otherContactSupportProps
diff --git a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
index 5a4a37f9..026c043e 100644
--- a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
+++ b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx
@@ -29,8 +29,6 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
         onDismiss = (): void => navigate(routeConfig.LOGIN),
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
-        WorkflowCardBaseProps,
-        WorkflowCardInstructionProps,
         ...otherExistingAccountSuccessScreenProps
     } = props;
 
diff --git a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
index 111e5819..a425dde5 100644
--- a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
+++ b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx
@@ -53,8 +53,6 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
         canDismiss = true,
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
-        WorkflowCardBaseProps,
-        WorkflowCardInstructionProps,
         ...otherRegistrationSuccessScreenProps
     } = props;
 

From c8bca9deb369c2e3ac3fbedd812db43af78ab109 Mon Sep 17 00:00:00 2001
From: ektaghag-eaton <EktaNGhag@eaton.com>
Date: Sat, 16 Sep 2023 11:13:34 +0530
Subject: [PATCH 6/8] Fix prettier

---
 login-workflow/src/components/WorkflowCard/Workflow.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/login-workflow/src/components/WorkflowCard/Workflow.test.tsx b/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
index 4fa71796..2394a28d 100644
--- a/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
+++ b/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
@@ -134,7 +134,7 @@ describe('WorkflowCardInstructions tests', () => {
     });
 
     it('renders with divider', () => {
-        const {container} = render(<WorkflowCardInstructions instructions="Test" />);
+        const { container } = render(<WorkflowCardInstructions instructions="Test" />);
         expect(screen.getByText('Test')).toBeInTheDocument();
         expect(container.getElementsByClassName('MuiDivider-root').length).toBe(1);
     });

From 39c2cc1dbbdb64c001817111b2c58d420530b4ad Mon Sep 17 00:00:00 2001
From: ektaghag-eaton <EktaNGhag@eaton.com>
Date: Wed, 20 Sep 2023 15:40:22 +0530
Subject: [PATCH 7/8] Remove test code

---
 .../example/src/navigation/AppRouter.tsx      | 136 +-----------------
 1 file changed, 4 insertions(+), 132 deletions(-)

diff --git a/login-workflow/example/src/navigation/AppRouter.tsx b/login-workflow/example/src/navigation/AppRouter.tsx
index 1a312dc1..783ce828 100644
--- a/login-workflow/example/src/navigation/AppRouter.tsx
+++ b/login-workflow/example/src/navigation/AppRouter.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable */
 import React from 'react';
 import {
     AuthContextProvider,
@@ -9,10 +8,6 @@ import {
     RegistrationContextProvider,
     ResetPasswordScreen,
     RegistrationWorkflow,
-    EulaScreen,
-    AccountDetailsScreen,
-    CreateAccountScreen,
-    VerifyCodeScreen,
 } from '@brightlayer-ui/react-auth-workflow';
 import { useApp } from '../contexts/AppContextProvider';
 import { useNavigate } from 'react-router';
@@ -59,25 +54,7 @@ export const AppRouter: React.FC = () => {
                     path={'/forgot-password'}
                     element={
                         <ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
-                            <ForgotPasswordScreen
-                                WorkflowCardInstructionProps={{
-                                    instructions: 'Test Instruction',
-                                    divider: false,
-                                }}
-                                WorkflowCardHeaderProps={{
-                                    avatar: <Home />,
-                                }}
-                                WorkflowCardBaseProps={{
-                                    loading: true,
-                                    backgroundImage: EatonLogo,
-                                }}
-                                WorkflowCardActionsProps={{
-                                    nextLabel: 'Go',
-                                    fullWidthButton: true,
-                                    showPrevious: false,
-                                    divider: true,
-                                }}
-                            />
+                            <ForgotPasswordScreen />
                         </ReactRouterGuestGuard>
                     }
                 />
@@ -93,25 +70,7 @@ export const AppRouter: React.FC = () => {
                     path={'/reset-password'}
                     element={
                         <ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
-                            <ResetPasswordScreen
-                                WorkflowCardInstructionProps={{
-                                    instructions: 'Test Instruction',
-                                    divider: false,
-                                }}
-                                WorkflowCardHeaderProps={{
-                                    avatar: <Home />,
-                                }}
-                                WorkflowCardBaseProps={{
-                                    loading: true,
-                                    backgroundImage: EatonLogo,
-                                }}
-                                WorkflowCardActionsProps={{
-                                    nextLabel: 'Go',
-                                    fullWidthButton: true,
-                                    showPrevious: false,
-                                    divider: false,
-                                }}
-                            />
+                            <ResetPasswordScreen />
                         </ReactRouterGuestGuard>
                     }
                 />
@@ -157,96 +116,9 @@ export const AppRouter: React.FC = () => {
                     </RegistrationContextProvider>
                 }
             >
-                <Route
-                    path={'/self-registration'}
-                    element={
-                        <RegistrationWorkflow>
-                            {/* Eula Screen */}
-                            {/* <EulaScreen 
-                        WorkflowCardInstructionProps={{
-                            instructions: 'Test Instruction',
-                            divider: true,
-                        }}
-                        WorkflowCardHeaderProps={{
-                            avatar: <Home/>,
-                            title: 'Test Title',
-                        }}
-                        WorkflowCardBaseProps={{
-                            loading: true,
-                            backgroundImage: EatonLogo,
-                        }}
-                        WorkflowCardActionsProps={{
-                            nextLabel: 'Go',
-                            fullWidthButton: true,
-                            showPrevious: false,
-                            divider: true,
-                        }}
-                    /> */}
-                            {/* AccountDetailsScreen */}
-                            {/* <AccountDetailsScreen
-                        WorkflowCardInstructionProps={{
-                            instructions: 'Test Instruction',
-                            divider: false,
-                        }}
-                        WorkflowCardHeaderProps={{
-                            avatar: <Home/>
-                        }}
-                        WorkflowCardBaseProps={{
-                            loading: false,
-                            backgroundImage: EatonLogo,
-                        }}
-                        WorkflowCardActionsProps={{
-                            nextLabel: 'Go',
-                            fullWidthButton: true,
-                            showPrevious: false,
-                            divider: false,
-                        }}
-                    /> */}
-                            {/* CreateAccountScreen */}
-                            {/* <CreateAccountScreen
-                        WorkflowCardInstructionProps={{
-                            instructions: 'Test Instruction',
-                            divider: false,
-                        }}
-                        WorkflowCardHeaderProps={{
-                            avatar: <Home/>
-                        }}
-                        WorkflowCardBaseProps={{
-                            loading: false,
-                            backgroundImage: EatonLogo,
-                        }}
-                        WorkflowCardActionsProps={{
-                            nextLabel: 'Go',
-                            fullWidthButton: true,
-                            showPrevious: false,
-                            divider: false,
-                        }}
-                    /> */}
-                            {/* Verify code Screen */}
-                            <VerifyCodeScreen
-                                WorkflowCardInstructionProps={{
-                                    instructions: 'Test Instruction',
-                                    divider: false,
-                                }}
-                                WorkflowCardHeaderProps={{
-                                    avatar: <Home />,
-                                }}
-                                WorkflowCardBaseProps={{
-                                    loading: true,
-                                    backgroundImage: EatonLogo,
-                                }}
-                                WorkflowCardActionsProps={{
-                                    nextLabel: 'Go',
-                                    fullWidthButton: true,
-                                    showPrevious: false,
-                                    divider: false,
-                                }}
-                            />
-                        </RegistrationWorkflow>
-                    }
-                />
+                <Route path={'/self-registration'} element={<RegistrationWorkflow />} />
                 <Route path={'/register-by-invite'} element={<RegistrationWorkflow isInviteRegistration />} />
             </Route>
         </Routes>
     );
-};
+};
\ No newline at end of file

From 41a34809fef111e16dc8521d5aacabfc11df19f6 Mon Sep 17 00:00:00 2001
From: ektaghag-eaton <EktaNGhag@eaton.com>
Date: Wed, 20 Sep 2023 15:48:11 +0530
Subject: [PATCH 8/8] Add test case for divider

---
 login-workflow/example/src/navigation/AppRouter.tsx         | 2 +-
 .../src/components/WorkflowCard/Workflow.test.tsx           | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/login-workflow/example/src/navigation/AppRouter.tsx b/login-workflow/example/src/navigation/AppRouter.tsx
index 783ce828..3d384b4b 100644
--- a/login-workflow/example/src/navigation/AppRouter.tsx
+++ b/login-workflow/example/src/navigation/AppRouter.tsx
@@ -121,4 +121,4 @@ export const AppRouter: React.FC = () => {
             </Route>
         </Routes>
     );
-};
\ No newline at end of file
+};
diff --git a/login-workflow/src/components/WorkflowCard/Workflow.test.tsx b/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
index 2394a28d..446d3009 100644
--- a/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
+++ b/login-workflow/src/components/WorkflowCard/Workflow.test.tsx
@@ -138,6 +138,12 @@ describe('WorkflowCardInstructions tests', () => {
         expect(screen.getByText('Test')).toBeInTheDocument();
         expect(container.getElementsByClassName('MuiDivider-root').length).toBe(1);
     });
+
+    it('renders without divider', () => {
+        const { container } = render(<WorkflowCardInstructions instructions="Test" divider={false} />);
+        expect(screen.getByText('Test')).toBeInTheDocument();
+        expect(container.getElementsByClassName('MuiDivider-root').length).toBe(0);
+    });
 });
 
 describe('ErrorState tests', () => {