adding emptyState props

etn-ccis · Apr 22, 2024 · 393fd9f · 393fd9f
1 parent a16149b
commit 393fd9f
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 79 deletions.
diff --git 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<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?.();
                     },

diff --git 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<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}
         />
     );

diff --git 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<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'),
                     },

diff --git 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<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}
         />
     );

diff --git 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<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,

diff --git 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<SuccessScreenProps> = (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<SuccessScreenProps> = (props) => {
                         },
                     ]}
                 >
-                    <EmptyState
-                        {...emptyStateProps}
-                        icon={icon}
-                        title={messageTitle}
-                        description={message}
-                        sx={{
-                            color: 'inherit',
-                            p: 0,
-                        }}
-                    />
+                    {EmptyStateProps && (
+                        <EmptyState
+                            {...EmptyStateProps}
+                            sx={{
+                                color: 'inherit',
+                                p: 0,
+                            }}
+                        />
+                    )}
                 </Box>
             </WorkflowCardBody>
             <WorkflowCardActions

diff --git a/login-workflow/src/screens/SuccessScreen/types.ts b/login-workflow/src/screens/SuccessScreen/types.ts
@@ -1,22 +1,13 @@
 import { ReactNode } from 'react';
 import { ErrorManagerProps } from '../../components/Error';
 import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types';
+import { EmptyStateProps } from '@brightlayer-ui/react-components';
 
 export type SuccessScreenProps = WorkflowCardProps & {
     /**
-     * The icon to display in the header
+     * To pass EmptyStateProps i.e icon, title, description... etc
      */
-    icon?: JSX.Element;
-
-    /**
-     * The title of the success message
-     */
-    messageTitle?: string;
-
-    /**
-     * The success message to be displayed on the screen
-     */
-    message?: ReactNode;
+    EmptyStateProps?: EmptyStateProps;
 
     /**
      * To display label for the button