Merge branch 'dev' of https://github.com/etn-ccis/blui-react-workflows …

…into fix/update-i18next-version
etn-ccis · Sep 27, 2023 · b642941 · b642941
2 parents 593cdd0 + 45d0d7e
commit b642941
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 56 deletions.
diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialog.tsx
@@ -47,6 +47,8 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
         ErrorDialogProps,
         loading,
         currentPasswordTextFieldProps,
+        slots = {},
+        slotProps = {},
     } = props;
 
     const [currentInput, setCurrentInput] = useState('');
@@ -156,6 +158,7 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
             onSubmit={async (): Promise<void> => {
                 await changePasswordSubmit();
             }}
+            slots={slots}
             slotProps={{
                 SuccessScreen: {
                     icon: <CheckCircle color="primary" sx={{ fontSize: 100 }} />,
@@ -173,6 +176,7 @@ export const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props)
                             onFinish?.();
                         },
                     },
+                    ...slotProps.SuccessScreen,
                 },
             }}
             showSuccessScreen={showSuccessScreen}

diff --git a/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx b/login-workflow/src/components/ChangePasswordDialog/ChangePasswordDialogBase.tsx
@@ -153,7 +153,7 @@ export const ChangePasswordDialogBase: React.FC<ChangePasswordDialogProps> = (pr
                     <DialogActions
                         sx={{
                             justifyContent: 'flex-end',
-                            p: { md: 3, sm: 2 },
+                            p: { xs: 2, md: 3 },
                         }}
                     >
                         <Grid

diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx
@@ -5,7 +5,6 @@ import { useAuthContext } from '../../contexts';
 import { ForgotPasswordScreenBase } from './ForgotPasswordScreenBase';
 import { ForgotPasswordScreenProps } from './types';
 import Typography from '@mui/material/Typography';
-import { SuccessScreenBase } from '../SuccessScreen';
 import CheckCircle from '@mui/icons-material/CheckCircle';
 import { LinkStyles } from '../../styles';
 import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
@@ -76,8 +75,8 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
         WorkflowCardInstructionProps,
         WorkflowCardActionsProps,
         showSuccessScreen: enableSuccessScreen = true,
-        slotProps = { SuccessScreen: {} },
-        slots,
+        slots = {},
+        slotProps = {},
         emailTextFieldProps,
     } = props;
 
@@ -141,49 +140,39 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
             emailValidator={emailValidator}
             emailTextFieldProps={emailTextFieldProps}
             showSuccessScreen={enableSuccessScreen && showSuccessScreen}
-            slots={{
-                SuccessScreen:
-                    slots?.SuccessScreen ??
-                    ((): JSX.Element => (
-                        <SuccessScreenBase
-                            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>
-                            }
-                            {...slotProps.SuccessScreen}
-                            WorkflowCardHeaderProps={{
-                                title: t('bluiAuth:HEADER.FORGOT_PASSWORD'),
-                                ...slotProps?.SuccessScreen?.WorkflowCardHeaderProps,
+            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',
                             }}
-                            WorkflowCardActionsProps={{
-                                showNext: true,
-                                nextLabel: t('bluiCommon:ACTIONS.DONE'),
-                                canGoNext: true,
-                                fullWidthButton: true,
-                                ...slotProps?.SuccessScreen?.WorkflowCardActionsProps,
-                                onNext: (): void => {
-                                    navigate(routeConfig.LOGIN as string);
-                                    if (slotProps?.SuccessScreen?.WorkflowCardActionsProps)
-                                        slotProps?.SuccessScreen?.WorkflowCardActionsProps?.onNext?.();
-                                },
-                            }}
-                        />
-                    )),
+                            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'),
+                    },
+                    WorkflowCardActionsProps: {
+                        showNext: true,
+                        nextLabel: t('bluiCommon:ACTIONS.DONE'),
+                        canGoNext: true,
+                        fullWidthButton: true,
+                        onNext: (): void => {
+                            navigate(routeConfig.LOGIN as string);
+                        },
+                    },
+                    ...slotProps.SuccessScreen,
+                },
             }}
             errorDisplayConfig={errorDisplayConfig}
         />

diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
@@ -8,13 +8,9 @@ import {
     WorkflowCardInstructions,
 } from '../../components';
 import { ForgotPasswordScreenProps } from './types';
-import { SuccessScreenProps } from '../SuccessScreen';
+import { SuccessScreenBase, SuccessScreenProps } from '../SuccessScreen';
 import ErrorManager from '../../components/Error/ErrorManager';
 
-type ForgotPasswordScreenBaseProps = Omit<ForgotPasswordScreenProps, 'slots'> & {
-    slots: { SuccessScreen: (props: SuccessScreenProps) => JSX.Element };
-};
-
 /**
  * Component renders a screen with forgot password for support with the application.
  *
@@ -35,7 +31,7 @@ type ForgotPasswordScreenBaseProps = Omit<ForgotPasswordScreenProps, 'slots'> &
  * @category Component
  */
 
-export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPasswordScreenBaseProps>> = (props) => {
+export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPasswordScreenProps>> = (props) => {
     const [emailInput, setEmailInput] = useState(props.initialEmailValue ?? '');
 
     const {
@@ -79,10 +75,15 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
         }
     };
 
+    const getSuccessScreen = (
+        _props: SuccessScreenProps,
+        SuccessScreen?: (props: SuccessScreenProps) => JSX.Element
+    ): JSX.Element => (SuccessScreen ? SuccessScreen(_props) : <SuccessScreenBase {..._props} />);
+
     return (
         <>
             {showSuccessScreen ? (
-                <slots.SuccessScreen {...slotProps.SuccessScreen} />
+                getSuccessScreen(slotProps?.SuccessScreen, slots?.SuccessScreen)
             ) : (
                 <WorkflowCard {...cardBaseProps}>
                     <WorkflowCardHeader {...headerProps} />

diff --git a/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx b/login-workflow/src/screens/ResetPasswordScreen/ResetPasswordScreen.tsx
@@ -40,8 +40,8 @@ export const ResetPasswordScreen: React.FC<ResetPasswordScreenProps> = (props) =
         WorkflowCardActionsProps,
         PasswordProps,
         errorDisplayConfig = errorManagerConfig,
-        slots,
-        slotProps,
+        slots = {},
+        slotProps = {},
     } = props;
 
     const [passwordInput, setPasswordInput] = useState(PasswordProps?.initialNewPasswordValue ?? '');
@@ -184,8 +184,8 @@ export const ResetPasswordScreen: React.FC<ResetPasswordScreenProps> = (props) =
                             navigate(routeConfig.LOGIN as string);
                         },
                     },
+                    ...slotProps.SuccessScreen,
                 },
-                ...slotProps,
             }}
             errorDisplayConfig={{
                 ...errorDisplayConfig,