merge props and update providers

etn-ccis · Mar 6, 2024 · a4234c8 · a4234c8
1 parent ec39c8e
commit a4234c8
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 47 deletions.
diff --git a/login-workflow/example/src/actions/AuthUIActions.tsx b/login-workflow/example/src/actions/AuthUIActions.tsx
@@ -11,7 +11,7 @@ function getRandomInt(max: number): number {
 
 function isRandomFailure(): boolean {
     const randomResponseNumber = getRandomInt(100);
-    return false; // randomResponseNumber < 10;
+    return true; // randomResponseNumber < 10;
 }
 
 type AuthUIActionsWithApp = (appHelper: AppContextType) => AuthUIActions;

diff --git a/login-workflow/example/src/screens/Login.tsx b/login-workflow/example/src/screens/Login.tsx
@@ -9,7 +9,7 @@ export const Login = (): JSX.Element => (
         projectImage={<img src={EatonLogo} alt="logo" style={{ maxHeight: 80 }} />}
         header={<DebugComponent />}
         errorDisplayConfig={{
-            mode: 'message-box',
+            mode: 'dialog',
             messageBoxConfig: {
                 dismissible: true,
                 position: 'top',

diff --git a/login-workflow/src/components/Error/ErrorManager.tsx b/login-workflow/src/components/Error/ErrorManager.tsx
@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import { BasicDialog } from '../Dialog/BasicDialog';
 import ErrorMessageBox from './ErrorMessageBox';
 import { SxProps, Theme } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
 
 export type AuthError = { cause: { title: string; errorMessage: string } };
 
@@ -17,11 +16,6 @@ export type ErrorManagerProps = {
      */
     title?: string;
 
-    /**
-     * The label on the dismiss button in dialog mode
-     */
-    dismissLabel?: string;
-
     /**
      * The function to call when the close/dismiss button is clicked
      * @returns void
@@ -75,13 +69,11 @@ export type ErrorManagerProps = {
  */
 
 const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
-    const { t } = useTranslation();
     const {
         children,
         mode = 'dialog',
         title,
         error = '',
-        dismissLabel,
         onClose = (): void => {},
         dialogConfig,
         messageBoxConfig = {
@@ -93,31 +85,31 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
         (): JSX.Element => (
             <BasicDialog
                 open={error.length > 0}
-                title={dialogConfig?.title ?? title ?? t('bluiCommon:MESSAGES.ERROR')}
-                body={t(error)}
+                title={dialogConfig?.title ?? title ?? 'Error' }
+                body={(error)}
                 onClose={onClose}
-                dismissButtonText={dialogConfig?.dismissLabel ?? dismissLabel ?? t('bluiCommon:ACTIONS.OKAY')}
+                dismissButtonText={dialogConfig?.dismissLabel ?? 'Okay'}
                 sx={dialogConfig?.sx}
             />
         ),
-        [dialogConfig, dismissLabel, title, error, onClose, t]
+        [dialogConfig, title, error, onClose]
     );
 
     const ErrorMessageBoxWithProps = useCallback((): JSX.Element => {
         const { dismissible = true, fontColor, backgroundColor, sx } = messageBoxConfig;
 
         return (
             <ErrorMessageBox
-                title={messageBoxConfig?.title ?? title ?? t('bluiCommon:MESSAGES.ERROR')}
-                errorMessage={t(error)}
+                title={messageBoxConfig?.title ?? title ?? 'Error'}
+                errorMessage={error}
                 dismissible={dismissible}
                 sx={sx}
                 backgroundColor={backgroundColor}
                 fontColor={fontColor}
                 onClose={onClose}
             />
         );
-    }, [error, title, t, messageBoxConfig, onClose]);
+    }, [error, title, messageBoxConfig, onClose]);
 
     return mode === 'dialog' && error.length > 0 ? (
         <>

diff --git a/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx b/login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx
@@ -54,17 +54,24 @@ export type RegistrationWorkflowProps = {
 };
 
 export const RegistrationWorkflow: React.FC<React.PropsWithChildren<RegistrationWorkflowProps>> = (props) => {
+    const { errorDisplayConfig: registrationWorkflowErrorConfig } = props;
     const [isAccountExist, setIsAccountExist] = useState(false);
-    const { triggerError, errorManagerConfig } = useErrorManager();
+    const { triggerError, errorManagerConfig: globalErrorManagerConfig } = useErrorManager();
     const { actions, navigate } = useRegistrationContext();
+    const { messageBoxConfig: workflowMessageBoxConfig, dialogConfig: workflowDialogConfig, onClose:workflowOnClose, ...otherWorkflowErrorConfig } = registrationWorkflowErrorConfig ?? {};
+    const { messageBoxConfig: globalMessageBoxConfig, dialogConfig: globalDialogConfig, onClose:globalOnClose, ...otherGlobalErrorConfig } = globalErrorManagerConfig;
 
-    const errorDisplayConfig = {
-        ...errorManagerConfig,
-        ...props.errorDisplayConfig,
+
+    const errorDisplayConfig: ErrorManagerProps = {
+        messageBoxConfig: { ...globalMessageBoxConfig, ...workflowMessageBoxConfig },
+        dialogConfig: { ...globalDialogConfig, ...workflowDialogConfig },
         onClose: (): void => {
-            if (props.errorDisplayConfig && props.errorDisplayConfig.onClose) props.errorDisplayConfig.onClose();
-            if (errorManagerConfig.onClose) errorManagerConfig?.onClose();
+            workflowOnClose?.();
+            globalOnClose?.();
         },
+
+        ...otherGlobalErrorConfig,
+        ...otherWorkflowErrorConfig,
     };
     const {
         initialScreenIndex = 0,
@@ -73,17 +80,17 @@ export const RegistrationWorkflow: React.FC<React.PropsWithChildren<Registration
         isInviteRegistration = false,
         children = isInviteRegistration
             ? [
-                  <EulaScreen key="EulaScreen" />,
-                  <CreatePasswordScreen key="CreatePasswordScreen" />,
-                  <AccountDetailsScreen key="AccountDetailsScreen" />,
-              ]
+                <EulaScreen key="EulaScreen" />,
+                <CreatePasswordScreen key="CreatePasswordScreen" />,
+                <AccountDetailsScreen key="AccountDetailsScreen" />,
+            ]
             : [
-                  <EulaScreen key="EulaScreen" />,
-                  <CreateAccountScreen key="CreateAccountScreen" />,
-                  <VerifyCodeScreen key="VerifyCodeScreen" />,
-                  <CreatePasswordScreen key="CreatePasswordScreen" />,
-                  <AccountDetailsScreen key="AccountDetailsScreen" />,
-              ],
+                <EulaScreen key="EulaScreen" />,
+                <CreateAccountScreen key="CreateAccountScreen" />,
+                <VerifyCodeScreen key="VerifyCodeScreen" />,
+                <CreatePasswordScreen key="CreatePasswordScreen" />,
+                <AccountDetailsScreen key="AccountDetailsScreen" />,
+            ],
     } = props;
 
     const screens = [...(Array.isArray(children) ? children : [children])];

diff --git a/login-workflow/src/contexts/AuthContext/provider.tsx b/login-workflow/src/contexts/AuthContext/provider.tsx
@@ -6,20 +6,18 @@
 import React, { useEffect } from 'react';
 import { AuthContextProviderProps } from './types';
 import { AuthContext } from './context';
-import { I18nextProvider } from 'react-i18next';
+import { I18nextProvider, useTranslation } from 'react-i18next';
 import { i18nAuthInstance } from './i18nAuthInstance';
 import { ErrorContext } from '../ErrorContext';
 import { AuthDictionaries } from './AuthDictionaries';
 import { SharedDictionaries } from '../SharedDictionaries';
+import { ErrorManagerProps } from '../../components/Error';
 
 export const AuthContextProvider: React.FC<
     React.PropsWithChildren<AuthContextProviderProps & { PasswordDialog?: JSX.Element }>
 > = (props) => {
     const i18nInstance = props.i18n ?? i18nAuthInstance;
-
-    const { children, ...authContextProps } = props;
-
-    const { language, i18n = i18nInstance, errorConfig } = props;
+    const { language, i18n = i18nInstance, children, ...other } = props;
 
     if (props.i18n) {
         i18n.addResourceBundle('zh', 'bluiAuth', AuthDictionaries.chinese.translation, true, false);
@@ -40,9 +38,36 @@ export const AuthContextProvider: React.FC<
 
     return (
         <I18nextProvider i18n={i18n}>
-            <AuthContext.Provider value={{ ...authContextProps }}>
-                <ErrorContext.Provider value={errorConfig!}>{children}</ErrorContext.Provider>
-            </AuthContext.Provider>
+            <AuthContextProviderContent {
+                ...other
+            }
+                language={language}
+
+            >{children}</AuthContextProviderContent>
         </I18nextProvider>
     );
 };
+
+const AuthContextProviderContent: React.FC<
+    React.PropsWithChildren<Omit<AuthContextProviderProps, 'i18n'> & { PasswordDialog?: JSX.Element }>
+> = (props) => {
+    const { children, errorConfig, ...authContextProps } = props;
+    const { t } = useTranslation();
+    const mergedErrorConfig: ErrorManagerProps = {
+        title: t('bluiCommon:MESSAGES.ERROR'),
+        error: t('bluiAuth:LOGIN.INVALID_CREDENTIALS'),
+        ...errorConfig,
+        dialogConfig: {
+            dismissLabel:t('bluiCommon:ACTIONS.OKAY'),
+            ...errorConfig?.dialogConfig ?? {},
+        }
+    }
+
+    return (
+        <AuthContext.Provider value={{ ...authContextProps }}>
+            <ErrorContext.Provider value={mergedErrorConfig}>{children}</ErrorContext.Provider>
+        </AuthContext.Provider>
+    );
+};
+
+
diff --git a/login-workflow/src/contexts/RegistrationContext/provider.tsx b/login-workflow/src/contexts/RegistrationContext/provider.tsx
@@ -6,18 +6,18 @@
 import React, { useEffect } from 'react';
 import { RegistrationContextProviderProps } from './types';
 import { RegistrationContext } from './context';
-import { I18nextProvider } from 'react-i18next';
+import { I18nextProvider, useTranslation } from 'react-i18next';
 import { i18nRegistrationInstance } from './i18nRegistrationInstance';
 import { ErrorContext } from '../ErrorContext';
 import { SharedDictionaries } from '../SharedDictionaries';
 import { RegistrationDictionaries } from './RegistrationDictionaries';
+import { ErrorManagerProps } from '../../components/Error';
 
 export const RegistrationContextProvider: React.FC<React.PropsWithChildren<RegistrationContextProviderProps>> = (
     props
 ) => {
     const i18nInstance = props.i18n ?? i18nRegistrationInstance;
-    const { children, ...registrationContextProps } = props;
-    const { language, i18n = i18nInstance, errorConfig } = props;
+    const { language, i18n = i18nInstance, children, ...other } = props;
 
     if (props.i18n) {
         i18n.addResourceBundle('zh', 'bluiRegistration', RegistrationDictionaries.chinese.translation, true, false);
@@ -38,9 +38,33 @@ export const RegistrationContextProvider: React.FC<React.PropsWithChildren<Regis
 
     return (
         <I18nextProvider i18n={i18n}>
-            <RegistrationContext.Provider value={registrationContextProps}>
-                <ErrorContext.Provider value={errorConfig!}>{children}</ErrorContext.Provider>
-            </RegistrationContext.Provider>
+            <RegistrationContextProviderContent {
+                ...other
+            }
+                language={language}
+            >{children}</RegistrationContextProviderContent>
         </I18nextProvider>
     );
 };
+
+const RegistrationContextProviderContent: React.FC<
+    React.PropsWithChildren<Omit<RegistrationContextProviderProps, 'i18n'> & { PasswordDialog?: JSX.Element }>
+> = (props) => {
+    const { children, errorConfig, ...registrationContextProps } = props;
+    const { t } = useTranslation();
+    const mergedErrorConfig: ErrorManagerProps = {
+        title: t('bluiCommon:MESSAGES.ERROR'),
+        ...errorConfig,
+        dialogConfig: {
+            dismissLabel: t('bluiCommon:ACTIONS.OKAY'),
+            ...errorConfig?.dialogConfig ?? {},
+        }
+    }
+
+
+    return (
+        <RegistrationContext.Provider value={{ ...registrationContextProps }}>
+            <ErrorContext.Provider value={mergedErrorConfig}>{children}</ErrorContext.Provider>
+        </RegistrationContext.Provider>
+    );
+};