@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
46 lines (45 loc) • 3.04 kB
JavaScript
import React from 'react';
import ChatBubbleOutline from '@mui/icons-material/ChatBubbleOutline';
import { ContactSupportScreenBase } from './ContactSupportScreenBase.js';
import { useAuthContext } from '../../contexts/index.js';
import { useTranslation } from 'react-i18next';
import { LinkStyles } from '../../styles/index.js';
import { Typography } from '@mui/material';
/**
* 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
*
* @category Component
*/
export const ContactSupportScreen = (props) => {
const { t } = useTranslation();
const { navigate, routeConfig } = useAuthContext();
const { contactEmail = 'something@email.com', contactPhone = '1-800-123-4567' } = props;
const defaultEmailSupportContent = () => (React.createElement(Typography, { variant: "body1" },
`${t('bluiAuth:CONTACT_SUPPORT.SUPPORT_MESSAGE')}`,
React.createElement(Typography, { variant: "button", sx: { ...LinkStyles, fontSize: 'inherit' }, component: "a", href: `mailto:${contactEmail ?? ''}` }, contactEmail),
`.`));
const defaultPhoneSupportContent = () => (React.createElement(Typography, { variant: "body1" },
`${t('bluiAuth:CONTACT_SUPPORT.TECHNICAL_ASSISTANCE')}`,
React.createElement(Typography, { variant: "button", sx: { ...LinkStyles, fontSize: 'inherit' }, component: "a", href: `tel:${contactPhone ?? ''}` }, contactPhone),
`.`));
const { icon = React.createElement(ChatBubbleOutline, { color: 'primary', sx: { fontSize: 70 } }), emailSupportTitle = t('bluiAuth:CONTACT_SUPPORT.GENERAL_QUESTIONS'), emailSupportContent = defaultEmailSupportContent, phoneSupportTitle = t('bluiAuth:CONTACT_SUPPORT.EMERGENCY_SUPPORT'), phoneSupportContent = defaultPhoneSupportContent, dismissButtonLabel = t('bluiCommon:ACTIONS.OKAY'), onDismiss, WorkflowCardHeaderProps, WorkflowCardActionsProps, ...otherContactSupportProps } = props;
const workflowCardHeaderProps = {
title: t('bluiAuth:USER_MENU.CONTACT_US'),
...WorkflowCardHeaderProps,
};
const workflowCardActionsProps = {
nextLabel: t('bluiCommon:ACTIONS.OKAY'),
showNext: true,
canGoNext: true,
fullWidthButton: true,
...WorkflowCardActionsProps,
onNext: () => {
navigate(routeConfig.LOGIN);
WorkflowCardActionsProps?.onNext?.();
},
};
return (React.createElement(ContactSupportScreenBase, { WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardActionsProps: workflowCardActionsProps, icon: icon, emailSupportTitle: emailSupportTitle, emailSupportContent: emailSupportContent, phoneSupportTitle: phoneSupportTitle, phoneSupportContent: phoneSupportContent, contactEmail: contactEmail, contactPhone: contactPhone, dismissButtonLabel: dismissButtonLabel, onDismiss: onDismiss, ...otherContactSupportProps }));
};