@brightlayer-ui/react-auth-workflow/screens/RegistrationSuccessScreen/RegistrationSuccessScreen.js

Re-usable workflow components for Authentication and Registration within Eaton applications.

import React from 'react';
import { Trans, useTranslation } from 'react-i18next';
import Typography from '@mui/material/Typography';
import CheckCircle from '@mui/icons-material/CheckCircle';
import { SuccessScreenBase } from '../index.js';
import { useRegistrationWorkflowContext, useRegistrationContext } from '../../contexts/index.js';
/**
 * Component that renders a success screen for when registration completes.
 *
 * @param {SuccessScreenProps} props - props of SuccessScreen
 *
 * @category Component
 */
export const RegistrationSuccessScreen = (props) => {
    const { navigate, routeConfig } = useRegistrationContext();
    const { t } = useTranslation();
    const { screenData: { AccountDetails: { firstName, lastName }, CreateAccount: { emailAddress: email }, Other: { 
    // @ts-ignore
    RegistrationSuccessScreen: { organizationName: organization }, }, }, } = useRegistrationWorkflowContext();
    const { onDismiss = () => navigate(routeConfig.LOGIN), canDismiss = true, WorkflowCardHeaderProps, WorkflowCardActionsProps, EmptyStateProps, ...otherRegistrationSuccessScreenProps } = props;
    const workflowCardHeaderProps = {
        title: t('bluiRegistration:REGISTRATION.STEPS.COMPLETE'),
        ...WorkflowCardHeaderProps,
    };
    const workflowCardActionsProps = {
        nextLabel: t('bluiCommon:ACTIONS.FINISH'),
        showNext: true,
        canGoNext: canDismiss,
        fullWidthButton: true,
        ...WorkflowCardActionsProps,
        onNext: () => {
            onDismiss();
            WorkflowCardActionsProps?.onNext?.();
        },
    };
    const emptyStateProps = {
        icon: React.createElement(CheckCircle, { color: 'primary', sx: { fontSize: 100, mb: 2 } }),
        title: `${t('bluiCommon:MESSAGES.WELCOME')}, ${firstName} ${lastName}!`,
        description: (React.createElement(Typography, { variant: "subtitle2" },
            React.createElement(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 ",
                React.createElement("b", null, email),
                " belonging to the",
                React.createElement("b", null, ` ${String(organization)}`),
                " org."))),
        ...EmptyStateProps,
    };
    return (React.createElement(SuccessScreenBase, { WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardActionsProps: workflowCardActionsProps, EmptyStateProps: emptyStateProps, ...otherRegistrationSuccessScreenProps }));
};