@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
115 lines (114 loc) • 7.52 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 { VerifyCodeScreenBase } from './VerifyCodeScreenBase';
import { useTranslation } from 'react-i18next';
import { useErrorManager, useRegistrationContext, useRegistrationWorkflowContext } from '../../contexts';
import { timeOutDelay } from '../../constants';
/**
* Component that renders a screen that prompts a user to enter the confirmation code
* that was sent to the email address that they used to register.
*
* @param {VerifyCodeScreenProps} props - props of VerifyCodeScreen
*
* @category Component
*/
export const VerifyCodeScreen = (props) => {
const { t } = useTranslation();
const regWorkflow = useRegistrationWorkflowContext();
const { actions, navigate } = useRegistrationContext();
const { nextScreen, previousScreen, screenData, currentScreen, totalScreens, updateScreenData, resetScreenData } = regWorkflow;
const { emailAddress } = screenData.CreateAccount;
const { triggerError, errorManagerConfig } = useErrorManager();
const errorDisplayConfig = Object.assign(Object.assign(Object.assign({}, errorManagerConfig), props.errorDisplayConfig), { onClose: () => {
var _a, _b, _c;
(_b = (_a = props.errorDisplayConfig) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
(_c = errorManagerConfig.onClose) === null || _c === void 0 ? void 0 : _c.call(errorManagerConfig);
} });
const [verifyCode, setVerifyCode] = useState(screenData.VerifyCode.code);
const [isLoading, setIsLoading] = useState(false);
const requestResendCode = 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, emailAddress ? emailAddress : ''));
}
catch (_error) {
triggerError(_error);
}
finally {
setIsLoading(false);
}
}), [actions, emailAddress, triggerError]);
const { codeValidator = (code) => (code === null || code === void 0 ? void 0 : code.length) > 0 ? true : t('bluiRegistration:SELF_REGISTRATION.VERIFY_EMAIL.CODE_VALIDATOR_ERROR'), onResend = () => {
void requestResendCode();
}, resendInstructions = t('bluiRegistration:SELF_REGISTRATION.VERIFY_EMAIL.VERIFICATION_CODE_PROMPT'), resendLabel = t('bluiCommon:ACTIONS.RESEND'), verifyCodeInputLabel = t('bluiRegistration:SELF_REGISTRATION.VERIFY_EMAIL.VERIFICATION'), initialValue = screenData.VerifyCode.code, verifyCodeTextInputProps, } = props;
const handleOnNext = useCallback((code, email) => __awaiter(void 0, void 0, void 0, function* () {
try {
setIsLoading(true);
if (actions === null || actions === void 0 ? void 0 : actions.validateUserRegistrationRequest) {
// eslint-disable-next-line no-unsafe-optional-chaining
const { codeValid, accountExists } = yield (actions === null || actions === void 0 ? void 0 : actions.validateUserRegistrationRequest(code, email));
if (accountExists) {
updateScreenData({ screenId: 'VerifyCode', values: { code }, isAccountExist: accountExists });
}
else {
if (typeof codeValid === 'boolean') {
if (codeValid)
void nextScreen({
screenId: 'VerifyCode',
values: { code },
isAccountExist: accountExists,
});
else {
triggerError(new Error(t('bluiRegistration:SELF_REGISTRATION.VERIFY_EMAIL.CODE_VALIDATOR_ERROR')));
}
}
else {
triggerError(new Error(codeValid));
}
}
}
}
catch (_error) {
triggerError(_error);
}
finally {
setTimeout(() => {
setIsLoading(false);
}, timeOutDelay);
}
}), [t, actions, nextScreen, triggerError, updateScreenData]);
const onPrevious = (code) => {
previousScreen({
screenId: 'VerifyCode',
values: { code },
});
};
const { WorkflowCardBaseProps, WorkflowCardHeaderProps, WorkflowCardInstructionProps, WorkflowCardBodyProps, WorkflowCardActionsProps, } = props;
const workflowCardBaseProps = Object.assign({ loading: isLoading }, WorkflowCardBaseProps);
const workflowCardHeaderProps = Object.assign({ title: t('bluiRegistration:REGISTRATION.STEPS.VERIFY_EMAIL'), onIconPress: () => {
navigate(-1);
resetScreenData();
} }, WorkflowCardHeaderProps);
const workflowCardInstructionProps = Object.assign({ instructions: t('bluiRegistration:SELF_REGISTRATION.VERIFY_EMAIL.MESSAGE') }, WorkflowCardInstructionProps);
const workflowCardBodyProps = Object.assign({ WorkflowCardInstructionProps: workflowCardInstructionProps }, WorkflowCardBodyProps);
const workflowCardActionsProps = Object.assign(Object.assign({ showNext: true, canGoNext: true, nextLabel: t('bluiCommon:ACTIONS.NEXT'), showPrevious: true, previousLabel: t('bluiCommon:ACTIONS.BACK'), canGoPrevious: true, currentStep: currentScreen, totalSteps: totalScreens }, WorkflowCardActionsProps), { onNext: (data) => {
var _a;
setVerifyCode(data.code);
void handleOnNext(data.code, emailAddress);
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
}, onPrevious: (data) => {
var _a;
void onPrevious(data.code);
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onPrevious) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
} });
return (React.createElement(VerifyCodeScreenBase, { WorkflowCardBaseProps: workflowCardBaseProps, WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardBodyProps: workflowCardBodyProps, WorkflowCardActionsProps: workflowCardActionsProps, resendInstructions: resendInstructions, resendLabel: resendLabel, verifyCodeInputLabel: verifyCodeInputLabel, initialValue: verifyCode.length > 0 ? verifyCode : initialValue, onResend: onResend, codeValidator: codeValidator, errorDisplayConfig: errorDisplayConfig, verifyCodeTextInputProps: verifyCodeTextInputProps }));
};