@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
93 lines (92 loc) • 6.17 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React, { useCallback, useState } from 'react';
import { CreateAccountScreenBase } from './CreateAccountScreenBase';
import { useRegistrationWorkflowContext, useRegistrationContext } from '../../contexts';
import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
import { useTranslation } from 'react-i18next';
import { EMAIL_REGEX, timeOutDelay } from '../../constants';
/**
* Component that renders a screen for the user to enter their email address to start the
* account creation process.
*
* @param {CreateAccountScreenProps} props - Props of Create Account Screen component
*
* @category Component
*/
export const CreateAccountScreen = (props) => {
const { t } = useTranslation();
const { actions, navigate } = useRegistrationContext();
const regWorkflow = useRegistrationWorkflowContext();
const { nextScreen, previousScreen, resetScreenData, screenData, totalScreens, currentScreen } = regWorkflow;
const [emailInputValue, setEmailInputValue] = useState(screenData.CreateAccount.emailAddress);
const [isLoading, setIsLoading] = useState(false);
const { triggerError, errorManagerConfig } = useErrorManager();
const errorDisplayConfig = Object.assign(Object.assign(Object.assign({}, errorManagerConfig), props.errorDisplayConfig), { onClose: () => {
var _a;
if ((_a = props.errorDisplayConfig) === null || _a === void 0 ? void 0 : _a.onClose)
props.errorDisplayConfig.onClose();
if (errorManagerConfig.onClose)
errorManagerConfig === null || errorManagerConfig === void 0 ? void 0 : errorManagerConfig.onClose();
} });
const onNext = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
var _a;
try {
setIsLoading(true);
yield ((_a = actions === null || actions === void 0 ? void 0 : actions.requestRegistrationCode) === null || _a === void 0 ? void 0 : _a.call(actions, emailInputValue));
void nextScreen({
screenId: 'CreateAccount',
values: { emailAddress: emailInputValue },
});
}
catch (_error) {
triggerError(_error);
}
finally {
setTimeout(() => {
setIsLoading(false);
}, timeOutDelay);
}
}), [actions, emailInputValue, nextScreen, triggerError]);
const onPrevious = () => {
previousScreen({
screenId: 'CreateAccount',
values: { emailAddress: emailInputValue },
});
};
const { WorkflowCardBaseProps, WorkflowCardHeaderProps, WorkflowCardInstructionProps, WorkflowCardBodyProps, WorkflowCardActionsProps, emailLabel = t('bluiCommon:LABELS.EMAIL'), initialValue = screenData.CreateAccount.emailAddress, emailValidator = (email) => {
if (!EMAIL_REGEX.test(email)) {
return t('bluiCommon:MESSAGES.EMAIL_ENTRY_ERROR');
}
return true;
}, emailTextFieldProps, } = props;
const workflowCardBaseProps = Object.assign({ loading: isLoading }, WorkflowCardBaseProps);
const workflowCardHeaderProps = Object.assign({ title: t('bluiRegistration:REGISTRATION.STEPS.CREATE_ACCOUNT'), onIconPress: () => {
navigate(-1);
resetScreenData();
} }, WorkflowCardHeaderProps);
const workflowCardInstructionProps = Object.assign({ instructions: t('bluiRegistration:SELF_REGISTRATION.INSTRUCTIONS') }, WorkflowCardInstructionProps);
const workflowCardBodyProps = Object.assign({ WorkflowCardInstructionProps: workflowCardInstructionProps }, WorkflowCardBodyProps);
const workflowCardActionsProps = Object.assign(Object.assign({ showNext: true, nextLabel: t('bluiCommon:ACTIONS.NEXT'), showPrevious: true, previousLabel: t('bluiCommon:ACTIONS.BACK'), canGoPrevious: true, canGoNext: true, currentStep: currentScreen, totalSteps: totalScreens }, WorkflowCardActionsProps), { onNext: () => {
var _a;
void onNext();
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
}, onPrevious: () => {
var _a;
void onPrevious();
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onPrevious) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
} });
const emailInputProps = Object.assign(Object.assign({}, emailTextFieldProps), { onChangeText: (email) => {
// eslint-disable-next-line
(emailTextFieldProps === null || emailTextFieldProps === void 0 ? void 0 : emailTextFieldProps.onChangeText) && (emailTextFieldProps === null || emailTextFieldProps === void 0 ? void 0 : emailTextFieldProps.onChangeText(email));
setEmailInputValue(email);
} });
return (React.createElement(CreateAccountScreenBase, { WorkflowCardBaseProps: workflowCardBaseProps, WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardBodyProps: workflowCardBodyProps, WorkflowCardActionsProps: workflowCardActionsProps, emailLabel: emailLabel, initialValue: screenData.CreateAccount.emailAddress.length > 0 ? screenData.CreateAccount.emailAddress : initialValue, emailTextFieldProps: emailInputProps, emailValidator: emailValidator, errorDisplayConfig: errorDisplayConfig }));
};