@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
63 lines (62 loc) • 4.12 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { StyleSheet } from 'react-native';
import { Text } from 'react-native-paper';
import { Trans, useTranslation } from 'react-i18next';
import { SuccessScreenBase } from '../SuccessScreen';
import { useRegistrationContext, useRegistrationWorkflowContext } from '../../contexts';
const makeStyles = () => StyleSheet.create({
boldText: {
fontWeight: 'bold',
},
});
/**
* Component that renders a success screen for when registration completes.
*
* @param {SuccessScreenProps} props - Props of SuccessScreen component
*
* @category Component
*/
export const RegistrationSuccessScreen = (props) => {
const { t } = useTranslation();
const styles = makeStyles();
const { navigate, routeConfig } = useRegistrationContext();
const { screenData: { AccountDetails: { firstName, lastName }, CreateAccount: { emailAddress: email }, Other: {
// @ts-ignore
RegistrationSuccessScreen: { organizationName: organization }, }, }, resetScreenData, } = useRegistrationWorkflowContext();
const CheckCircleIcon = { family: 'material-community', name: 'check-circle', direction: 'ltr' };
const Bold = ({ children }) => (React.createElement(Text, { style: styles.boldText }, children));
const { canDismiss = true, onDismiss = () => navigate(routeConfig.LOGIN), WorkflowCardHeaderProps, WorkflowCardActionsProps, WorkflowCardBodyProps, EmptyStateProps } = props, otherRegistrationSuccessScreenProps = __rest(props, ["canDismiss", "onDismiss", "WorkflowCardHeaderProps", "WorkflowCardActionsProps", "WorkflowCardBodyProps", "EmptyStateProps"]);
const workflowCardHeaderProps = Object.assign(Object.assign({ title: t('bluiRegistration:REGISTRATION.STEPS.COMPLETE') }, WorkflowCardHeaderProps), { onIconPress: () => {
navigate(routeConfig.LOGIN);
resetScreenData();
} });
const emptyStatesProps = Object.assign({ icon: CheckCircleIcon, title: `${t('bluiCommon:MESSAGES.WELCOME')}, ${firstName} ${lastName}!`, description: (React.createElement(Text, { variant: 'bodyMedium' },
React.createElement(Trans, { i18nKey: email
? 'bluiRegistration:REGISTRATION.SUCCESS_MESSAGE_ALT'
: 'bluiRegistration:REGISTRATION.SUCCESS_MESSAGE_ALT_WITHOUT_EMAIL_PROVIDED', values: { email, organization }, components: { boldTag: React.createElement(Bold, null, email) } },
React.createElement(Text, { variant: 'bodyMedium' },
"Your account has successfully been created with the email ",
email,
" belonging to the",
` ${String(organization)}`,
" org.")))) }, EmptyStateProps);
const workflowCardBodyProps = Object.assign({ scrollable: false }, WorkflowCardBodyProps);
const workflowCardActionsProps = Object.assign(Object.assign({ nextLabel: t('bluiCommon:ACTIONS.FINISH'), showNext: true, canGoNext: canDismiss, fullWidthButton: true }, WorkflowCardActionsProps), { onNext: () => {
var _a;
onDismiss();
resetScreenData();
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
} });
return (React.createElement(SuccessScreenBase, Object.assign({ WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardBodyProps: workflowCardBodyProps, WorkflowCardActionsProps: workflowCardActionsProps, EmptyStateProps: emptyStatesProps }, otherRegistrationSuccessScreenProps)));
};