@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
60 lines (59 loc) • 3.89 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { WorkflowCard, WorkflowCardActions, WorkflowCardBody, WorkflowCardHeader, WorkflowCardInstructions, } from '../../components/WorkflowCard/index.js';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Box from '@mui/material/Box';
import DOMPurify from 'dompurify';
import ErrorManager from '../../components/Error/ErrorManager.js';
import { Typography } from '@mui/material';
import ReplaySharp from '@mui/icons-material/ReplaySharp';
import { useTranslation } from 'react-i18next';
/**
* Component that renders a screen displaying the EULA and requests acceptance via a checkbox.
*
* @param {EulaScreenProps} props - props of EUlA screen base component
*
* @category Component
*/
export const EulaScreenBase = (props) => {
const { onEulaAcceptedChange, eulaContent, checkboxLabel, html, initialCheckboxValue, checkboxProps, errorDisplayConfig, refreshConfig, WorkflowCardBaseProps: cardBaseProps = {}, WorkflowCardInstructionProps: instructionsProps = {}, WorkflowCardActionsProps: actionsProps = {}, WorkflowCardHeaderProps: headerProps = {}, ...otherProps } = props;
const { t } = useTranslation();
const [eulaAccepted, setEulaAccepted] = useState(initialCheckboxValue ?? false);
const handleEulaAcceptedChecked = useCallback((accepted) => {
setEulaAccepted(accepted);
onEulaAcceptedChange?.(accepted);
}, [onEulaAcceptedChange]);
const handleOnNext = () => {
const { onNext } = actionsProps;
if (onNext)
onNext({ accepted: eulaAccepted });
};
return (React.createElement(WorkflowCard, { ...cardBaseProps, ...otherProps },
React.createElement(WorkflowCardHeader, { ...headerProps }),
Object.keys(instructionsProps).length !== 0 && React.createElement(WorkflowCardInstructions, { ...instructionsProps }),
React.createElement(WorkflowCardBody, { sx: { pt: 2 } },
refreshConfig?.showRefreshButton ? (React.createElement(Box, { sx: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
} },
React.createElement(Box, { sx: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
p: 1,
}, onClick: refreshConfig?.onRefresh },
React.createElement(ReplaySharp, { color: "primary", sx: { width: 36, height: 36 } }),
React.createElement(Typography, { variant: "subtitle2", color: "primary" }, refreshConfig?.refreshButtonLabel || t('bluiCommon:MESSAGES.RETRY'))))) : html ? (React.createElement(Box, { sx: { flex: '1 1 0', overflow: 'auto' },
// eslint-disable-next-line @typescript-eslint/naming-convention
dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(eulaContent) } })) : (React.createElement(Box, { sx: { flex: '1 1 0', overflow: 'auto' } }, eulaContent)),
React.createElement(ErrorManager, { ...errorDisplayConfig },
React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { color: 'primary', checked: eulaAccepted, onChange: (event) => handleEulaAcceptedChecked(event.target.checked), ...checkboxProps }), label: checkboxLabel, sx: { flex: '0 0 auto', mr: 0, mt: 2 }, onKeyUp: (e) => {
if (e.key === 'Enter' && eulaAccepted)
handleOnNext();
} }))),
React.createElement(WorkflowCardActions, { ...actionsProps, canGoNext: eulaAccepted && actionsProps.canGoNext })));
};