Error manager with dynamic values

login-workflow/example/src/actions/RegistrationUIActions.tsx

@@ -61,18 +61,27 @@ export const ProjectRegistrationUIActions: () => RegistrationUIActions = () => (
     requestRegistrationCode: async (email: string): Promise<string> => {
         await sleep(800);
         if (isRandomFailure()) {
-            throw new Error('Sorry, there was a problem sending your request.');
+            // throw new Error('Sorry, there was a problem sending your request.');
         }
-        return 'a1b2c3';
+        throw new Error('', {
+            cause: {
+                errorMessage: 'ERROR_MESSAGE.EMAIL_ERROR_MESSAGE',
+                errorOptions: { email: email },
+                title: 'ERROR_MESSAGE.EMAIL_ERROR_TITLE',
+                titleOptions: {timestamp: Date.now()},
+
+    }
+});
+return 'a1b2c3';
     },
 
-    createPassword: async (password: string): Promise<boolean> => {
-        await sleep(800);
-        if (isRandomFailure()) {
-            throw new Error('Sorry, there was a problem sending your request.');
-        }
-        return true;
-    },
+createPassword: async (password: string): Promise<boolean> => {
+    await sleep(800);
+    if (isRandomFailure()) {
+        throw new Error('Sorry, there was a problem sending your request.');
+    }
+    return true;
+},
 
     setAccountDetails: async (details: AccountDetails): Promise<boolean> => {
         await sleep(800);
@@ -82,37 +91,37 @@ export const ProjectRegistrationUIActions: () => RegistrationUIActions = () => (
         return true;
     },
 
-    /**
-     * The user has tapped on an email link inviting them to register with the application.
-     * The application should validate the code provided by the link.
-     *
-     * @param validationCode  Registration code provided from the link.
-     * @param validationEmail  Email provided from the invitation email link (optional) `?email=addr%40domain.com`.
-     *
-     * @returns Resolves when the code is valid. True if registration is complete, False if account information is needed.
-     *          If the code is not valid a rejection will occur with an error message.
-     */
-    validateUserRegistrationRequest: async (
-        validationCode: string,
-        validationEmail?: string
-    ): Promise<{ codeValid: boolean | string; accountExists?: boolean }> => {
-        await sleep(800);
-
-        if (isRandomFailure()) {
-            throw new Error('Sorry, there was a problem sending your request.');
-        }
-        return { codeValid: true, accountExists: false };
-    },
-
-    completeRegistration: async (userData: object): Promise<{ email: string; organizationName: string }> => {
-        const email = '[email protected]';
-        const organizationName = 'Acme Co.';
-        const userInfo = { email, organizationName };
-
-        await sleep(1000);
-        if (isRandomFailure()) {
-            throw new Error('Sorry, there was a problem sending your request.');
-        }
-        return userInfo;
-    },
+        /**
+         * The user has tapped on an email link inviting them to register with the application.
+         * The application should validate the code provided by the link.
+         *
+         * @param validationCode  Registration code provided from the link.
+         * @param validationEmail  Email provided from the invitation email link (optional) `?email=addr%40domain.com`.
+         *
+         * @returns Resolves when the code is valid. True if registration is complete, False if account information is needed.
+         *          If the code is not valid a rejection will occur with an error message.
+         */
+        validateUserRegistrationRequest: async (
+            validationCode: string,
+            validationEmail?: string
+        ): Promise<{ codeValid: boolean | string; accountExists?: boolean }> => {
+            await sleep(800);
+
+            if (isRandomFailure()) {
+                throw new Error('Sorry, there was a problem sending your request.');
+            }
+            return { codeValid: true, accountExists: false };
+        },
+
+            completeRegistration: async (userData: object): Promise<{ email: string; organizationName: string }> => {
+                const email = '[email protected]';
+                const organizationName = 'Acme Co.';
+                const userInfo = { email, organizationName };
+
+                await sleep(1000);
+                if (isRandomFailure()) {
+                    throw new Error('Sorry, there was a problem sending your request.');
+                }
+                return userInfo;
+            },
 });

login-workflow/example/src/translations/dictionary/english.ts

@@ -18,6 +18,10 @@ const resources: AppTranslationsFile = {
             CHANGE_PASSWORD: 'Change Password',
             MY_ACCOUNT: 'My Account',
         },
+        ERROR_MESSAGE: {
+            EMAIL_ERROR_MESSAGE: '{{email}} is already registered',
+            EMAIL_ERROR_TITLE: 'Error {{timestamp}}'
+        },
     },
 };
 export default resources;

login-workflow/example/src/translations/dictionary/types.ts

@@ -15,6 +15,10 @@ export type AppTranslations = {
         CHANGE_PASSWORD: string;
         MY_ACCOUNT: string;
     };
+    ERROR_MESSAGE: {
+        EMAIL_ERROR_MESSAGE: string;
+        EMAIL_ERROR_TITLE: string;
+    };
 };
 export type AppTranslationsFile = {
     translation: AppTranslations;

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

@@ -2,9 +2,9 @@ import React, { useCallback } from 'react';
 import { BasicDialog } from '../Dialog/BasicDialog';
 import ErrorMessageBox from './ErrorMessageBox';
 import { SxProps, Theme } from '@mui/material/styles';
-import { TFunction } from 'i18next';
+import { TFunction, TOptions } from 'i18next';
 
-export type AuthError = { cause: { title: string; errorMessage: string } };
+export type AuthError = { cause: { title: string; errorMessage: string, errorOptions?: TOptions, titleOptions?: TOptions } };
 
 export type ErrorManagerProps = {
     /**
@@ -28,6 +28,16 @@ export type ErrorManagerProps = {
      */
     error?: string;
 
+    /**
+     * Interpolate string with a dynamic value to pass values using t function for message
+     */
+    errorOptions?: TOptions;
+
+    /**
+     * Interpolate string with a dynamic value to pass values using t function for title
+     */
+    titleOptions?: TOptions;
+
     /**
      * Translate function to translate error related text
      */
@@ -80,9 +90,12 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
         mode = 'dialog',
         title,
         error = '',
-        onClose = (): void => {},
+        errorOptions,
+        titleOptions,
+        onClose = (): void => { },
         dialogConfig,
-        t = (key: string): string => key,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        t = (key: string, _options?: TOptions): string => key,
         messageBoxConfig = {
             position: 'top',
         },
@@ -92,31 +105,31 @@ const ErrorManager: React.FC<ErrorManagerProps> = (props): JSX.Element => {
         (): JSX.Element => (
             <BasicDialog
                 open={error.length > 0}
-                title={t(dialogConfig?.title ?? title ?? 'Error')}
-                body={t(error)}
+                title={t(dialogConfig?.title ?? title ?? 'Error', titleOptions)}
+                body={t(error, errorOptions)}
                 onClose={onClose}
                 dismissButtonText={t(dialogConfig?.dismissLabel ?? 'Okay')}
                 sx={dialogConfig?.sx}
             />
         ),
-        [dialogConfig, title, error, onClose, t]
+        [dialogConfig, title, error, errorOptions, titleOptions, onClose, t]
     );
 
     const ErrorMessageBoxWithProps = useCallback((): JSX.Element => {
         const { dismissible = true, fontColor, backgroundColor, sx } = messageBoxConfig;
 
         return (
             <ErrorMessageBox
-                title={t(messageBoxConfig?.title ?? title ?? 'Error')}
-                errorMessage={t(error)}
+                title={t(messageBoxConfig?.title ?? title ?? 'Error', titleOptions)}
+                errorMessage={t(error, errorOptions)}
                 dismissible={dismissible}
                 sx={sx}
                 backgroundColor={backgroundColor}
                 fontColor={fontColor}
                 onClose={onClose}
             />
         );
-    }, [error, title, messageBoxConfig, onClose, t]);
+    }, [error, errorOptions, titleOptions, title, messageBoxConfig, onClose, t]);
 
     return mode === 'dialog' && error.length > 0 ? (
         <>

login-workflow/src/contexts/ErrorContext/useErrorManager.tsx

@@ -15,8 +15,10 @@ export const useErrorManager = (): {
         if (isAuthError(err)) {
             return {
                 ...errorConfig,
-                dialogConfig: { title: err.cause.title },
+                dialogConfig: { ...errorConfig.dialogConfig, title: err.cause.title },
                 error: err.cause.errorMessage,
+                errorOptions: err.cause.errorOptions,
+                titleOptions: err.cause.titleOptions,
                 onClose: (): void => {
                     setError(new Error());
                 },
@@ -37,6 +39,8 @@ export const useErrorManager = (): {
                 cause: {
                     title: err.cause.title,
                     errorMessage: err.cause.errorMessage,
+                    errorOptions: err.cause.errorOptions,
+                    titleOptions: err.cause.titleOptions,
                 },
             });
         } else {