Fix translate dialog button

login-workflow/docs/components/error-manager.md

@@ -27,6 +27,7 @@ import { ErrorManager } from '@brightlayer-ui/react-auth-workflow';
 | onClose | `() => void` | Function to call when the close/dismiss button is clicked. |  |
 | dialogConfig | `{title?: string, dismissLabel?: string}` | Configuration options for the dialog. See [DialogConfig Props](#dialogconfigprops) |  |
 | messageBoxConfig | `MessageBoxProps` | Configuration options for the message box. See [MessageBoxProps](#messageboxprops) |  |
+| t | `TFunction` | Translate function to translate error related text. |  |
 | children | `ReactNode` | Message box errors will appear before or after content passed as children. |  |
 
 ### DialogConfigProps

login-workflow/src/components/Error/ErrorManager.tsx

@@ -2,7 +2,7 @@ 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';
+import { TFunction } from 'i18next';
 
 export type AuthError = { cause: { title: string; errorMessage: string } };
 
@@ -28,10 +28,15 @@ export type ErrorManagerProps = {
      */
     error?: string;
 
+    /**
+     * Translate function to translate error related text
+     */
+    t?: TFunction;
+
     /**
      * Configuration options when using mode='dialog'
      * @param {string} dialogConfig.title - The title used in the dialog header
-     * @param {string} dialogConfig.dismissLabel - The label on the dismiss button.
+     * @param {string} dialogConfig.dismissLabel - The label on the dismiss button in dialog mode.
      */
     dialogConfig?: {
         dismissLabel?: string;
@@ -70,14 +75,14 @@ export type ErrorManagerProps = {
  */
 
 const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
-    const { t } = useTranslation();
     const {
         children,
         mode = 'dialog',
         title,
         error = '',
         onClose = (): void => {},
         dialogConfig,
+        t = (key: string): string => key,
         messageBoxConfig = {
             position: 'top',
         },
@@ -87,10 +92,10 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
         (): JSX.Element => (
             <BasicDialog
                 open={error.length > 0}
-                title={dialogConfig?.title ?? title ?? t('bluiCommon:MESSAGES.ERROR')}
+                title={t(dialogConfig?.title ?? title ?? 'Error')}
                 body={t(error)}
                 onClose={onClose}
-                dismissButtonText={dialogConfig?.dismissLabel}
+                dismissButtonText={t(dialogConfig?.dismissLabel ?? 'Okay')}
                 sx={dialogConfig?.sx}
             />
         ),
@@ -102,7 +107,7 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
 
         return (
             <ErrorMessageBox
-                title={messageBoxConfig?.title ?? title ?? t('bluiCommon:MESSAGES.ERROR')}
+                title={t(messageBoxConfig?.title ?? title ?? 'Error')}
                 errorMessage={t(error)}
                 dismissible={dismissible}
                 sx={sx}
@@ -111,7 +116,7 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
                 onClose={onClose}
             />
         );
-    }, [error, title, t, messageBoxConfig, onClose]);
+    }, [error, title, messageBoxConfig, onClose, t]);
 
     return mode === 'dialog' && error.length > 0 ? (
         <>

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

@@ -54,17 +54,33 @@ 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 errorDisplayConfig = {
-        ...errorManagerConfig,
-        ...props.errorDisplayConfig,
+    const {
+        messageBoxConfig: workflowMessageBoxConfig,
+        dialogConfig: workflowDialogConfig,
+        onClose: workflowOnClose,
+        ...otherWorkflowErrorConfig
+    } = registrationWorkflowErrorConfig ?? {};
+    const {
+        messageBoxConfig: globalMessageBoxConfig,
+        dialogConfig: globalDialogConfig,
+        onClose: globalOnClose,
+        ...otherGlobalErrorConfig
+    } = globalErrorManagerConfig;
+
+    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,

login-workflow/src/contexts/AuthContext/provider.tsx

@@ -6,20 +6,41 @@
 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';
+
+const AuthContextProviderContent: React.FC<
+    React.PropsWithChildren<Omit<AuthContextProviderProps, 'i18n'> & { PasswordDialog?: JSX.Element }>
+> = (props) => {
+    const { children, errorConfig, ...authContextProps } = props;
+    const { t } = useTranslation();
+    const mergedErrorConfig: ErrorManagerProps = {
+        t: t,
+        title: 'bluiCommon:MESSAGES.ERROR',
+        error: 'bluiAuth:LOGIN.INVALID_CREDENTIALS',
+        ...errorConfig,
+        dialogConfig: {
+            dismissLabel: 'bluiCommon:ACTIONS.OKAY',
+            ...(errorConfig?.dialogConfig ?? {}),
+        },
+    };
+
+    return (
+        <AuthContext.Provider value={{ ...authContextProps }}>
+            <ErrorContext.Provider value={mergedErrorConfig}>{children}</ErrorContext.Provider>
+        </AuthContext.Provider>
+    );
+};
 
 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 +61,9 @@ 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>
     );
 };

login-workflow/src/contexts/RegistrationContext/provider.tsx

@@ -1,23 +1,45 @@
 /**
  * @packageDocumentation
- * @module RegistrationWorkflowContextProvider
+ * @module RegistrationContextProvider
  */
 
 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';
+
+const RegistrationContextProviderContent: React.FC<
+    React.PropsWithChildren<Omit<RegistrationContextProviderProps, 'i18n'>>
+> = (props) => {
+    const { children, errorConfig, ...registrationContextProps } = props;
+    const { t } = useTranslation();
+    const mergedErrorConfig: ErrorManagerProps = {
+        t: t,
+        title: 'bluiCommon:MESSAGES.ERROR',
+        ...errorConfig,
+        dialogConfig: {
+            dismissLabel: 'bluiCommon:ACTIONS.OKAY',
+            ...(errorConfig?.dialogConfig ?? {}),
+        },
+    };
+
+    return (
+        <RegistrationContext.Provider value={{ ...registrationContextProps }}>
+            <ErrorContext.Provider value={mergedErrorConfig}>{children}</ErrorContext.Provider>
+        </RegistrationContext.Provider>
+    );
+};
 
 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 +60,9 @@ 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>
     );
 };

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

@@ -63,6 +63,7 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
                 setIsLoading(false);
             }
         },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         [actions, triggerError]
     );