@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
101 lines (100 loc) • 6.8 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 { useTranslation } from 'react-i18next';
import { useRegistrationWorkflowContext } from '../../contexts/RegistrationWorkflowContext';
import { useErrorManager } from '../../contexts/ErrorContext';
import { AccountDetailsScreenBase } from './AccountDetailsScreenBase';
import { useRegistrationContext } from '../../contexts/RegistrationContext';
import { timeOutDelay } from '../../constants';
/**
* Component renders a screen with account details information for support with the application.
* Contact information is pulled from the context passed into the workflow.
*
* @param {AccountDetailsScreenProps} props - Props of Create Account Screen
*
* @category Component
*/
export const AccountDetailsScreen = (props) => {
const { t } = useTranslation();
const { actions, navigate } = useRegistrationContext();
const regWorkflow = useRegistrationWorkflowContext();
const { nextScreen, previousScreen, screenData, currentScreen, totalScreens, resetScreenData } = regWorkflow;
const [firstName, setFirstName] = useState(screenData.AccountDetails.firstName);
const [lastName, setLastName] = useState(screenData.AccountDetails.lastName);
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.setAccountDetails) === null || _a === void 0 ? void 0 : _a.call(actions, { firstName, lastName }));
void nextScreen({
screenId: 'AccountDetails',
values: { firstName, lastName },
});
}
catch (_error) {
triggerError(_error);
}
finally {
setTimeout(() => {
setIsLoading(false);
}, timeOutDelay);
}
}), [actions, firstName, lastName, nextScreen, triggerError]);
const onPrevious = useCallback(() => {
previousScreen({
screenId: 'AccountDetails',
values: { firstName, lastName },
});
}, [firstName, lastName, previousScreen]);
const { WorkflowCardBaseProps, WorkflowCardHeaderProps, WorkflowCardInstructionProps, WorkflowCardBodyProps, WorkflowCardActionsProps, firstNameLabel = t('bluiCommon:FORMS.FIRST_NAME'), lastNameLabel = t('bluiCommon:FORMS.LAST_NAME'), firstNameValidator = (name) => {
if ((name === null || name === void 0 ? void 0 : name.length) > 0) {
return true;
}
return t('bluiCommon:FORMS.FIRST_NAME_LENGTH_ERROR');
}, lastNameValidator = (name) => {
if ((name === null || name === void 0 ? void 0 : name.length) > 0) {
return true;
}
return t('bluiCommon:FORMS.LAST_NAME_LENGTH_ERROR');
}, firstNameTextInputProps, lastNameTextInputProps, initialFirstName = screenData.AccountDetails.firstName, initialLastName = screenData.AccountDetails.lastName, } = props;
const workflowCardBaseProps = Object.assign({ loading: isLoading }, WorkflowCardBaseProps);
const workflowCardHeaderProps = Object.assign({ title: t('bluiRegistration:REGISTRATION.STEPS.ACCOUNT_DETAILS'), onIconPress: () => {
navigate(-1);
resetScreenData();
} }, WorkflowCardHeaderProps);
const workflowCardInstructionProps = Object.assign({ instructions: t('bluiRegistration:REGISTRATION.INSTRUCTIONS.ACCOUNT_DETAILS') }, WorkflowCardInstructionProps);
const workflowCardBodyProps = Object.assign({ WorkflowCardInstructionProps: workflowCardInstructionProps }, WorkflowCardBodyProps);
const workflowCardActionsProps = Object.assign(Object.assign({ canGoNext: true, showNext: true, showPrevious: true, nextLabel: t('bluiCommon:ACTIONS.NEXT'), previousLabel: t('bluiCommon:ACTIONS.BACK'), totalSteps: totalScreens, currentStep: currentScreen }, 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 onFirstNameInputChange = (text) => {
setFirstName(text);
};
const onLastNameInputChange = (text) => {
setLastName(text);
};
return (React.createElement(AccountDetailsScreenBase, { WorkflowCardBaseProps: workflowCardBaseProps, WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardBodyProps: workflowCardBodyProps, WorkflowCardActionsProps: workflowCardActionsProps, initialFirstName: firstName.length > 0 ? firstName : initialFirstName, initialLastName: lastName.length > 0 ? lastName : initialLastName, firstNameLabel: firstNameLabel, firstNameTextInputProps: Object.assign(Object.assign({}, firstNameTextInputProps), { onChangeText: onFirstNameInputChange }), firstNameValidator: firstNameValidator, lastNameLabel: lastNameLabel, lastNameTextInputProps: Object.assign(Object.assign({}, lastNameTextInputProps), { onChangeText: onLastNameInputChange }), lastNameValidator: lastNameValidator, errorDisplayConfig: errorDisplayConfig }));
};