remove workflowFinishState

login-workflow/docs/customization.md

@@ -6,7 +6,6 @@ These workflows are designed to work out of the box without any additional confi
 
 All of the screens in the workflow support various levels of customization. Refer to the [Screens](./screens/README.md) documentation for specific options available on each screen.
 
-
 ## Customizing Registration Workflow
 
 The Registration is provided as a single component that will provide the default behavior without requiring any configuration or props.
@@ -22,7 +21,7 @@ If you wish to customize any aspects of the workflow screens, you will need to p
 <RegistrationWorkflow>
     <EulaScreen />
     <CreateAccountScreen />
-    <VerifyCodeScreen codeValidator={customValidator}/>
+    <VerifyCodeScreen codeValidator={customValidator} />
     <CreatePasswordScreen />
     <AccountDetailsScreen />
 </RegistrationWorkflow>
@@ -31,23 +30,23 @@ If you wish to customize any aspects of the workflow screens, you will need to p
 ### Customizing the Screen Order
 
 When passing children to the `RegistrationWorkflow` component, you can easily adjust the order of screens by simply placing them in the order you wish for them to appear.
-  
+
 ```tsx
 <RegistrationWorkflow>
     {/* Create Account screen will now come before the Eula screen */}
     <CreateAccountScreen />
-    <EulaScreen />           
-    <VerifyCodeScreen />  
-    <CreatePasswordScreen />   
-    <AccountDetailsScreen /> 
+    <EulaScreen />
+    <VerifyCodeScreen />
+    <CreatePasswordScreen />
+    <AccountDetailsScreen />
 </RegistrationWorkflow>
 ```
 
 ### Removing / Injecting Screens
 
 If you want to skip a particular screen in the workflow, simply omit it in the list of children. Likewise, if you wish to add your own custom screens into the workflow, you simply pass them as another child element.
 
-When passing custom children, it is important to match the look and feel of the other steps in the workflow. In order to support this, we provide several WorkflowCard components that you can use to create your custom screens. For more information on how to use these components, refer to our [WorkflowCard](./components/workflow-card.md) component documentation. 
+When passing custom children, it is important to match the look and feel of the other steps in the workflow. In order to support this, we provide several WorkflowCard components that you can use to create your custom screens. For more information on how to use these components, refer to our [WorkflowCard](./components/workflow-card.md) component documentation.
 
 Your custom implementation, removing the EulaScreen and VerifyCodeScreen, and adding a custom screen, might look like this:
 
@@ -65,26 +64,28 @@ Your custom implementation, removing the EulaScreen and VerifyCodeScreen, and ad
 ```
 
 ### Customizing the Success Screen
+
 You may provide a custom success screen to be shown upon successful completion of the [Registration Workflow](./components/registration-workflow.md). The [Success Screen](./screens/success.md) is used by default, but may be customized via props. If you wish to build your own success screen it may look something like this:
 
 ```jsx
 import { SuccessScreenBase } from '@brightlayer-ui/react-auth-workflow';
 
 const MyCustomSuccessScreen = () => {
-  return (
-    <SuccessScreenBase 
-        messageTitle={'Congratulations!'}
-        message={'You have been registered successfully'}
-    />
-  );
+    return (
+        <SuccessScreenBase
+            EmptyStateProps={{
+                title: 'Congratulations!',
+                description: 'You have been registered successfully',
+            }}
+        />
+    );
 };
 
-<RegistrationWorkflow successScreen={<MyCustomSuccessScreen />} />
+<RegistrationWorkflow successScreen={<MyCustomSuccessScreen />} />;
 ```
 
 A similar prop exists for `existingAccountSuccessScreen` which will be used if the account being registered already exists.
 
-
 ## Customizing the Language Support
 
 For information about supporting multiple languages and customizing the translations, refer to our [Language Support](./language-support.md) guidelines.
@@ -94,7 +95,9 @@ For information about supporting multiple languages and customizing the translat
 For information about handling errors in your application, refer to our [Error Management](./error-management.md) documentation.
 
 ## Components
-For more details on customizing our components, refer to our [Components](./components/README.md) documentation. 
+
+For more details on customizing our components, refer to our [Components](./components/README.md) documentation.
 
 ## Screens
-For more details on customizing our screens, refer to our [Screens](./screens/README.md) documentation.
+
+For more details on customizing our screens, refer to our [Screens](./screens/README.md) documentation.

login-workflow/docs/screens/success.md

@@ -16,14 +16,11 @@ import { SuccessScreenBase } from '@brightlayer-ui/react-auth-workflow';
 
 ## API
 
-| Prop Name | Type | Description | Default |
-|---|---|---|---|
-| icon | `React.ReactNode` | The icon to be displayed on the screen. |  |
-| messageTitle | `string` | The title of the success message. |  |
-| message | `ReactNode` | The success message to be displayed on the screen. |  |
-| dismissButtonLabel | `string` | The label of the dismiss button. |  |
-| canDismiss | `boolean` | A boolean determining if the screen can be dismissed. |  |
-| onDismiss | `() => void` | A function to be called when the screen is dismissed. |  |
+| Prop Name          | Type              | Description                                                                         | Default |
+| ------------------ | ----------------- | ----------------------------------------------------------------------------------- | ------- |
+| dismissButtonLabel | `string`          | The label of the dismiss button.                                                    |         |
+| canDismiss         | `boolean`         | A boolean determining if the screen can be dismissed.                               |         |
+| EmptyStateProps    | `EmptyStateProps` | EmptyStateProps, which include properties such as icon, title, and description etc. |         |
+| onDismiss          | `() => void`      | A function to be called when the screen is dismissed.                               |         |
 
 This screen also extends the `WorkflowCardProps` type for updating the title, instructions, buttons, etc. See [Workflow Card](../components/workflow-card.md) for more details.
-

login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx

@@ -161,9 +161,11 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
             slots={slots}
             slotProps={{
                 SuccessScreen: {
-                    icon: <CheckCircle color="primary" sx={{ fontSize: 100 }} />,
-                    messageTitle: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'),
-                    message: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'),
+                    EmptyStateProps: {
+                        icon: <CheckCircle color="primary" sx={{ fontSize: 100 }} />,
+                        title: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'),
+                        description: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'),
+                    },
                     onDismiss: (): void => {
                         onFinish?.();
                     },

login-workflow/src/components/index.ts

@@ -1,7 +1,6 @@
 export * from './Dialog';
 export * from './PasswordTextField';
 export * from './WorkflowCard';
-export * from './WorkflowFinishState';
 export * from './RegistrationWorkflow';
 export * from './SetPassword';
 export * from './ChangePasswordDialog';

login-workflow/src/screens/EulaScreen/EulaScreen.test.tsx

@@ -6,6 +6,7 @@ import { RegistrationContextProvider } from '../../contexts';
 import { EulaScreenProps } from './types';
 import { RegistrationWorkflow } from '../../components';
 import { registrationContextProviderProps } from '../../testUtils';
+import { i18nRegistrationInstance } from '../../contexts/RegistrationContext/i18nRegistrationInstance';
 
 afterEach(cleanup);
 
@@ -100,4 +101,35 @@ describe('Eula Screen', () => {
         fireEvent.click(backButton);
         expect(mockOnPrevious).toHaveBeenCalled();
     });
+
+    it('should throw error in eula and clicking refresh button should call loadEula', async () => {
+        const loadFn = jest.fn().mockRejectedValue(new Error('qwertyuiop'));
+        const { findByText } = render(
+            <RegistrationContextProvider
+                {...{
+                    language: 'en',
+                    i18n: i18nRegistrationInstance,
+                    navigate: (): void => {},
+                    routeConfig: {},
+                    actions: {
+                        loadEula: loadFn,
+                        acceptEula: jest.fn(),
+                        requestRegistrationCode: jest.fn(),
+                        validateUserRegistrationRequest: jest.fn(),
+                        createPassword: jest.fn(),
+                        setAccountDetails: jest.fn(),
+                        completeRegistration: jest.fn().mockImplementation(() => Promise.resolve()),
+                    },
+                }}
+            >
+                <RegistrationWorkflow>
+                    <EulaScreen />
+                </RegistrationWorkflow>
+            </RegistrationContextProvider>
+        );
+
+        await waitFor(() => expect(screen.queryByText('Loading...')).toBeNull());
+        fireEvent.click(await findByText('Retry'));
+        expect(loadFn).toBeCalled();
+    }, 10000);
 });

login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx

@@ -22,13 +22,11 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
     const { navigate, routeConfig } = useRegistrationContext();
 
     const {
-        icon = <Person color={'primary'} sx={{ fontSize: 100, mb: 2 }} />,
-        messageTitle = t('bluiCommon:MESSAGES.WELCOME'),
-        message = t('bluiRegistration:REGISTRATION.SUCCESS_EXISTING'),
         canDismiss = true,
         onDismiss = (): void => navigate(routeConfig.LOGIN as string),
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
+        EmptyStateProps,
         ...otherExistingAccountSuccessScreenProps
     } = props;
 
@@ -49,13 +47,18 @@ export const ExistingAccountSuccessScreen: React.FC<SuccessScreenProps> = (props
         },
     };
 
+    const emptyStateProps = {
+        icon: <Person color={'primary'} sx={{ fontSize: 100, mb: 2 }} />,
+        title: t('bluiCommon:MESSAGES.WELCOME'),
+        description: t('bluiRegistration:REGISTRATION.SUCCESS_EXISTING'),
+        ...EmptyStateProps,
+    };
+
     return (
         <SuccessScreenBase
             WorkflowCardHeaderProps={workflowCardHeaderProps}
             WorkflowCardActionsProps={workflowCardActionsProps}
-            icon={icon}
-            messageTitle={messageTitle}
-            message={message}
+            EmptyStateProps={emptyStateProps}
             {...otherExistingAccountSuccessScreenProps}
         />
     );

login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx

@@ -148,22 +148,27 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
             slots={slots}
             slotProps={{
                 SuccessScreen: {
-                    icon: <CheckCircle color={'primary'} sx={{ fontSize: 100, mb: 5 }} />,
-                    messageTitle: t('bluiCommon:MESSAGES.EMAIL_SENT'),
-                    message: (
-                        <Box
-                            sx={{
-                                overflow: 'hidden',
-                                whiteSpace: 'normal',
-                                wordBreak: 'break-word',
-                            }}
-                            component={'span'}
-                        >
-                            <Trans i18nKey={'bluiAuth:FORGOT_PASSWORD.LINK_SENT_ALT'} values={{ email: emailInput }}>
-                                Link has been sent to <b>{emailInput}</b>.
-                            </Trans>
-                        </Box>
-                    ),
+                    EmptyStateProps: {
+                        icon: <CheckCircle color={'primary'} sx={{ fontSize: 100, mb: 5 }} />,
+                        title: t('bluiCommon:MESSAGES.EMAIL_SENT'),
+                        description: (
+                            <Box
+                                sx={{
+                                    overflow: 'hidden',
+                                    whiteSpace: 'normal',
+                                    wordBreak: 'break-word',
+                                }}
+                                component={'span'}
+                            >
+                                <Trans
+                                    i18nKey={'bluiAuth:FORGOT_PASSWORD.LINK_SENT_ALT'}
+                                    values={{ email: emailInput }}
+                                >
+                                    Link has been sent to <b>{emailInput}</b>.
+                                </Trans>
+                            </Box>
+                        ),
+                    },
                     WorkflowCardHeaderProps: {
                         title: t('bluiAuth:HEADER.FORGOT_PASSWORD'),
                     },

login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx

@@ -33,27 +33,11 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
     } = useRegistrationWorkflowContext();
 
     const {
-        icon = <CheckCircle color={'primary'} sx={{ fontSize: 100, mb: 2 }} />,
-        messageTitle = `${t('bluiCommon:MESSAGES.WELCOME')}, ${firstName} ${lastName}!`,
-        message = (
-            <Typography variant="subtitle2">
-                <Trans
-                    i18nKey={
-                        email
-                            ? 'bluiRegistration:REGISTRATION.SUCCESS_MESSAGE_ALT'
-                            : 'bluiRegistration:REGISTRATION.SUCCESS_MESSAGE_ALT_WITHOUT_EMAIL_PROVIDED'
-                    }
-                    values={{ email, organization }}
-                >
-                    Your account has successfully been created with the email <b>{email}</b> belonging to the
-                    <b>{` ${String(organization)}`}</b> org.
-                </Trans>
-            </Typography>
-        ),
         onDismiss = (): void => navigate(routeConfig.LOGIN as string),
         canDismiss = true,
         WorkflowCardHeaderProps,
         WorkflowCardActionsProps,
+        EmptyStateProps,
         ...otherRegistrationSuccessScreenProps
     } = props;
 
@@ -74,13 +58,32 @@ export const RegistrationSuccessScreen: React.FC<SuccessScreenProps> = (props) =
         },
     };
 
+    const emptyStateProps = {
+        icon: <CheckCircle color={'primary'} sx={{ fontSize: 100, mb: 2 }} />,
+        title: `${t('bluiCommon:MESSAGES.WELCOME')}, ${firstName} ${lastName}!`,
+        description: (
+            <Typography variant="subtitle2">
+                <Trans
+                    i18nKey={
+                        email
+                            ? 'bluiRegistration:REGISTRATION.SUCCESS_MESSAGE_ALT'
+                            : 'bluiRegistration:REGISTRATION.SUCCESS_MESSAGE_ALT_WITHOUT_EMAIL_PROVIDED'
+                    }
+                    values={{ email, organization }}
+                >
+                    Your account has successfully been created with the email <b>{email}</b> belonging to the
+                    <b>{` ${String(organization)}`}</b> org.
+                </Trans>
+            </Typography>
+        ),
+        ...EmptyStateProps,
+    };
+
     return (
         <SuccessScreenBase
             WorkflowCardHeaderProps={workflowCardHeaderProps}
             WorkflowCardActionsProps={workflowCardActionsProps}
-            icon={icon}
-            messageTitle={messageTitle}
-            message={message}
+            EmptyStateProps={emptyStateProps}
             {...otherRegistrationSuccessScreenProps}
         />
     );

login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx

@@ -181,9 +181,11 @@ export const ResetPasswordScreen: React.FC<ResetPasswordScreenProps> = (props) =
             slots={slots}
             slotProps={{
                 SuccessScreen: {
-                    icon: <CheckCircle color="primary" sx={{ fontSize: 100 }} />,
-                    messageTitle: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'),
-                    message: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'),
+                    EmptyStateProps: {
+                        icon: <CheckCircle color="primary" sx={{ fontSize: 100 }} />,
+                        title: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'),
+                        description: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'),
+                    },
                     WorkflowCardActionsProps: {
                         showPrevious: false,
                         fullWidthButton: true,