@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
53 lines (52 loc) • 3.36 kB
JavaScript
import React from 'react';
import { Typography, unstable_composeClasses as composeClasses } from '@mui/material';
import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader, WorkflowCardInstructions, } from '../../components/WorkflowCard/index.js';
import Box from '@mui/material/Box';
import { getContactScreenUtilityClass } from './utilityClasses.js';
const useUtilityClasses = (ownerState) => {
const { classes } = ownerState;
const slots = {
root: ['root'],
title: ['title'],
icon: ['icon'],
emailSupportTitle: ['emailSupportTitle'],
emailSupportContent: ['emailSupportContent'],
phoneSupportTitle: ['phoneSupportTitle'],
phoneSupportContent: ['phoneSupportContent'],
contactEmail: ['contactEmail'],
contactPhone: ['contactPhone'],
dismissButtonLabel: ['dismissButtonLabel'],
};
return composeClasses(slots, getContactScreenUtilityClass, classes);
};
/**
* Component renders a screen with contact information for support with the application.
* Contact information is pulled from the context passed into the workflow.
*
* @param {ContactSupportScreenProps} props - props of ContactSupportScreen base component
*
* @category Component
*/
export const ContactSupportScreenBase = (props) => {
const { icon, emailSupportTitle, emailSupportContent, phoneSupportTitle, phoneSupportContent, contactEmail, contactPhone, dismissButtonLabel, onDismiss, WorkflowCardBaseProps: cardBaseProps = {}, WorkflowCardInstructionProps: instructionsProps = {}, WorkflowCardActionsProps: actionsProps = {}, WorkflowCardHeaderProps: headerProps = {}, ...otherProps } = props;
const defaultClasses = useUtilityClasses(props);
return (React.createElement(WorkflowCard, { ...cardBaseProps, className: defaultClasses.root, "data-testid": defaultClasses.root, ...otherProps },
React.createElement(WorkflowCardHeader, { ...headerProps, className: defaultClasses.title, "data-testid": defaultClasses.title }),
Object.keys(instructionsProps).length !== 0 && React.createElement(WorkflowCardInstructions, { ...instructionsProps }),
icon && (React.createElement(Box, { sx: { m: 3, mb: 5, textAlign: 'center' }, className: defaultClasses.icon }, icon)),
React.createElement(WorkflowCardBody, null,
React.createElement(Typography, { className: defaultClasses.emailSupportTitle, "data-testid": defaultClasses.emailSupportTitle, variant: "body1", sx: { mb: 1 } },
' ',
emailSupportTitle),
React.createElement(React.Fragment, null, emailSupportContent?.(contactEmail ?? '')),
React.createElement(Typography, { className: defaultClasses.phoneSupportTitle, "data-testid": defaultClasses.phoneSupportTitle, variant: "body1", sx: { mt: 4, mb: 1 } },
' ',
phoneSupportTitle),
React.createElement(React.Fragment, null, phoneSupportContent?.(contactPhone ?? ''))),
React.createElement(WorkflowCardActions, { ...actionsProps, nextLabel: dismissButtonLabel || actionsProps.nextLabel, className: defaultClasses.dismissButtonLabel, onNext: () => {
if (onDismiss)
onDismiss();
if (actionsProps.onNext)
actionsProps.onNext();
} })));
};