From a16149b9a4688fa7ef763161d5d2bbee7119054b Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Tue, 16 Apr 2024 16:02:30 +0530 Subject: [PATCH 1/6] remove workflowFinishState --- .../src/components/WorkflowFinishState.tsx | 47 ------------------- login-workflow/src/components/index.ts | 1 - .../SuccessScreen/SuccessScreenBase.tsx | 37 +++++++++++++-- 3 files changed, 34 insertions(+), 51 deletions(-) delete mode 100644 login-workflow/src/components/WorkflowFinishState.tsx diff --git a/login-workflow/src/components/WorkflowFinishState.tsx b/login-workflow/src/components/WorkflowFinishState.tsx deleted file mode 100644 index 3c6b4242..00000000 --- a/login-workflow/src/components/WorkflowFinishState.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { EmptyStateProps, EmptyState } from '@brightlayer-ui/react-components'; -import Box from '@mui/material/Box'; - -/** - * Component that renders a EmptyState component indicating completion of a user flow. - * - * @param props all props will be passed to the EmptyState component, except for style - * which is applied to the root element - * - * @category Component - */ - -export const WorkflowFinishState: React.FC>> = ( - props -) => { - const { classes: emptyStateClasses = {}, style, sx, ...emptyStateProps } = props; - - return ( - - - - ); -}; diff --git a/login-workflow/src/components/index.ts b/login-workflow/src/components/index.ts index 17e17799..c939a928 100644 --- a/login-workflow/src/components/index.ts +++ b/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'; diff --git a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx index 0c53d650..4b8a1934 100644 --- a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx +++ b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx @@ -7,7 +7,8 @@ import { WorkflowCardInstructions, } from '../../components/WorkflowCard'; import { SuccessScreenProps } from './types'; -import { WorkflowFinishState } from '../../components'; +import { EmptyState } from '@brightlayer-ui/react-components'; +import Box from '@mui/material/Box'; /** * Component that renders a success screen @@ -27,7 +28,15 @@ import { WorkflowFinishState } from '../../components'; */ export const SuccessScreenBase: React.FC = (props) => { - const { icon, messageTitle = '', message = '', dismissButtonLabel = '', canDismiss, onDismiss } = props; + const { + icon, + messageTitle = '', + message = '', + dismissButtonLabel = '', + canDismiss, + onDismiss, + ...emptyStateProps + } = props; const cardBaseProps = props.WorkflowCardBaseProps || {}; const headerProps = props.WorkflowCardHeaderProps || {}; @@ -39,7 +48,29 @@ export const SuccessScreenBase: React.FC = (props) => { {Object.keys(instructionsProps).length !== 0 && } - + + + Date: Mon, 22 Apr 2024 15:48:09 +0530 Subject: [PATCH 2/6] adding emptyState props --- .../ChangePasswordDialog.tsx | 8 ++-- .../ExistingAccountSuccessScreen.tsx | 15 ++++--- .../ForgotPasswordScreen.tsx | 37 +++++++++------- .../RegistrationSuccessScreen.tsx | 43 ++++++++++--------- .../ResetPasswordScreen.tsx | 8 ++-- .../SuccessScreen/SuccessScreenBase.tsx | 29 +++++-------- .../src/screens/SuccessScreen/types.ts | 15 ++----- 7 files changed, 76 insertions(+), 79 deletions(-) diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx index c5a95da6..365435d8 100644 --- a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx +++ b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx @@ -161,9 +161,11 @@ export const ChangePasswordDialog: React.FC = (props) slots={slots} slotProps={{ SuccessScreen: { - icon: , - messageTitle: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'), - message: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'), + EmptyStateProps: { + icon: , + title: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'), + description: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'), + }, onDismiss: (): void => { onFinish?.(); }, diff --git a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx index af89ba2b..45776143 100644 --- a/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx +++ b/login-workflow/src/screens/ExistingAccountSuccessScreen/ExistingAccountSuccessScreen.tsx @@ -22,13 +22,11 @@ export const ExistingAccountSuccessScreen: React.FC = (props const { navigate, routeConfig } = useRegistrationContext(); const { - icon = , - 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 = (props }, }; + const emptyStateProps = { + icon: , + title: t('bluiCommon:MESSAGES.WELCOME'), + description: t('bluiRegistration:REGISTRATION.SUCCESS_EXISTING'), + ...EmptyStateProps, + }; + return ( ); diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx index add83a7f..410963a6 100644 --- a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx +++ b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx @@ -148,22 +148,27 @@ export const ForgotPasswordScreen: React.FC = (props) slots={slots} slotProps={{ SuccessScreen: { - icon: , - messageTitle: t('bluiCommon:MESSAGES.EMAIL_SENT'), - message: ( - - - Link has been sent to {emailInput}. - - - ), + EmptyStateProps: { + icon: , + title: t('bluiCommon:MESSAGES.EMAIL_SENT'), + description: ( + + + Link has been sent to {emailInput}. + + + ), + }, WorkflowCardHeaderProps: { title: t('bluiAuth:HEADER.FORGOT_PASSWORD'), }, diff --git a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx index edcff8c6..66fc0869 100644 --- a/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx +++ b/login-workflow/src/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.tsx @@ -33,27 +33,11 @@ export const RegistrationSuccessScreen: React.FC = (props) = } = useRegistrationWorkflowContext(); const { - icon = , - messageTitle = `${t('bluiCommon:MESSAGES.WELCOME')}, ${firstName} ${lastName}!`, - message = ( - - - Your account has successfully been created with the email {email} belonging to the - {` ${String(organization)}`} org. - - - ), onDismiss = (): void => navigate(routeConfig.LOGIN as string), canDismiss = true, WorkflowCardHeaderProps, WorkflowCardActionsProps, + EmptyStateProps, ...otherRegistrationSuccessScreenProps } = props; @@ -74,13 +58,32 @@ export const RegistrationSuccessScreen: React.FC = (props) = }, }; + const emptyStateProps = { + icon: , + title: `${t('bluiCommon:MESSAGES.WELCOME')}, ${firstName} ${lastName}!`, + description: ( + + + Your account has successfully been created with the email {email} belonging to the + {` ${String(organization)}`} org. + + + ), + ...EmptyStateProps, + }; + return ( ); diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx index 8c090682..8298accf 100644 --- a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx +++ b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx @@ -181,9 +181,11 @@ export const ResetPasswordScreen: React.FC = (props) = slots={slots} slotProps={{ SuccessScreen: { - icon: , - messageTitle: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'), - message: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'), + EmptyStateProps: { + icon: , + title: t('bluiAuth:PASSWORD_RESET.SUCCESS_MESSAGE'), + description: t('bluiAuth:CHANGE_PASSWORD.SUCCESS_MESSAGE'), + }, WorkflowCardActionsProps: { showPrevious: false, fullWidthButton: true, diff --git a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx index 4b8a1934..a2a7108b 100644 --- a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx +++ b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx @@ -28,15 +28,7 @@ import Box from '@mui/material/Box'; */ export const SuccessScreenBase: React.FC = (props) => { - const { - icon, - messageTitle = '', - message = '', - dismissButtonLabel = '', - canDismiss, - onDismiss, - ...emptyStateProps - } = props; + const { EmptyStateProps, dismissButtonLabel = '', canDismiss, onDismiss } = props; const cardBaseProps = props.WorkflowCardBaseProps || {}; const headerProps = props.WorkflowCardHeaderProps || {}; @@ -60,16 +52,15 @@ export const SuccessScreenBase: React.FC = (props) => { }, ]} > - + {EmptyStateProps && ( + + )} Date: Mon, 22 Apr 2024 15:55:14 +0530 Subject: [PATCH 3/6] adding emptyStateprops --- login-workflow/src/screens/SuccessScreen/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/login-workflow/src/screens/SuccessScreen/types.ts b/login-workflow/src/screens/SuccessScreen/types.ts index e7470f33..56e8f93e 100644 --- a/login-workflow/src/screens/SuccessScreen/types.ts +++ b/login-workflow/src/screens/SuccessScreen/types.ts @@ -1,4 +1,3 @@ -import { ReactNode } from 'react'; import { ErrorManagerProps } from '../../components/Error'; import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types'; import { EmptyStateProps } from '@brightlayer-ui/react-components'; From 8cbece5d0746c0a1eff5c209fc090b9939c33fc0 Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Mon, 22 Apr 2024 17:42:42 +0530 Subject: [PATCH 4/6] update docs --- login-workflow/docs/customization.md | 39 ++++++++++--------- login-workflow/docs/screens/success.md | 15 +++---- .../src/screens/SuccessScreen/types.ts | 2 +- 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/login-workflow/docs/customization.md b/login-workflow/docs/customization.md index eb224f79..83309f11 100644 --- a/login-workflow/docs/customization.md +++ b/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 - + @@ -31,15 +30,15 @@ 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 {/* Create Account screen will now come before the Eula screen */} - - - - + + + + ``` @@ -47,7 +46,7 @@ When passing children to the `RegistrationWorkflow` component, you can easily ad 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 ( - - ); + return ( + + ); }; -} /> +} />; ``` 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. \ No newline at end of file + +For more details on customizing our screens, refer to our [Screens](./screens/README.md) documentation. diff --git a/login-workflow/docs/screens/success.md b/login-workflow/docs/screens/success.md index 9b27ceb4..279c26ea 100644 --- a/login-workflow/docs/screens/success.md +++ b/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. - \ No newline at end of file diff --git a/login-workflow/src/screens/SuccessScreen/types.ts b/login-workflow/src/screens/SuccessScreen/types.ts index 56e8f93e..7d0a7ad9 100644 --- a/login-workflow/src/screens/SuccessScreen/types.ts +++ b/login-workflow/src/screens/SuccessScreen/types.ts @@ -4,7 +4,7 @@ import { EmptyStateProps } from '@brightlayer-ui/react-components'; export type SuccessScreenProps = WorkflowCardProps & { /** - * To pass EmptyStateProps i.e icon, title, description... etc + * EmptyStateProps, which include properties such as icon, title, and description etc. */ EmptyStateProps?: EmptyStateProps; From 6681c25b6dbddfd71a737c924594a3e8f8ca933b Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Wed, 24 Apr 2024 15:50:36 +0530 Subject: [PATCH 5/6] testcase on EulaScreen --- .../screens/EulaScreen/EulaScreen.test.tsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/login-workflow/src/screens/EulaScreen/EulaScreen.test.tsx b/login-workflow/src/screens/EulaScreen/EulaScreen.test.tsx index 0eb396fe..f88648db 100644 --- a/login-workflow/src/screens/EulaScreen/EulaScreen.test.tsx +++ b/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( + {}, + 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()), + }, + }} + > + + + + + ); + + await waitFor(() => expect(screen.queryByText('Loading...')).toBeNull()); + fireEvent.click(await findByText('Retry')); + expect(loadFn).toBeCalled(); + }, 10000); }); From 3fdd34bc6945751fb838d39fa5bf9bc615178a8b Mon Sep 17 00:00:00 2001 From: priyankakmEaton Date: Wed, 24 Apr 2024 17:26:27 +0530 Subject: [PATCH 6/6] emptyStateprops --- login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx index a2a7108b..2cff2df3 100644 --- a/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx +++ b/login-workflow/src/screens/SuccessScreen/SuccessScreenBase.tsx @@ -54,11 +54,11 @@ export const SuccessScreenBase: React.FC = (props) => { > {EmptyStateProps && ( )}