@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
199 lines (198 loc) • 11.2 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());
});
};
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, { useEffect, useRef, useState } from 'react';
import { RegistrationWorkflowContextProvider, useErrorManager, useRegistrationContext, } from '../../contexts';
import PagerView from 'react-native-pager-view';
import { View, StyleSheet } from 'react-native';
import { ErrorManager } from '../Error/ErrorManager';
import { EulaScreen, CreateAccountScreen, VerifyCodeScreen, CreatePasswordScreen, AccountDetailsScreen, RegistrationSuccessScreen, ExistingAccountSuccessScreen, } from '../../screens';
import { Spinner } from '../Spinner';
import { timeOutDelay } from '../../constants';
const styles = StyleSheet.create({
pagerView: {
flex: 1,
},
});
/**
* Component that contain the registration workflow and index of screens.
*
* @param {RegistrationWorkflowProps} props - props of RegistrationWorkflow component
*
* @category Component
*/
export const RegistrationWorkflow = (props) => {
const { errorDisplayConfig: registrationWorkflowErrorConfig, eulaIsHtml = false } = props;
const [isAccountExist, setIsAccountExist] = useState(false);
const { triggerError, errorManagerConfig: globalErrorManagerConfig } = useErrorManager();
const { actions, navigate, routeConfig } = useRegistrationContext();
const viewPagerRef = useRef(null);
const _a = registrationWorkflowErrorConfig !== null && registrationWorkflowErrorConfig !== void 0 ? registrationWorkflowErrorConfig : {}, { messageBoxConfig: workflowMessageBoxConfig, dialogConfig: workflowDialogConfig, onClose: workflowOnClose } = _a, otherWorkflowErrorConfig = __rest(_a, ["messageBoxConfig", "dialogConfig", "onClose"]);
const { messageBoxConfig: globalMessageBoxConfig, dialogConfig: globalDialogConfig, onClose: globalOnClose } = globalErrorManagerConfig, otherGlobalErrorConfig = __rest(globalErrorManagerConfig, ["messageBoxConfig", "dialogConfig", "onClose"]);
const errorDisplayConfig = Object.assign(Object.assign({ messageBoxConfig: Object.assign(Object.assign({}, globalMessageBoxConfig), workflowMessageBoxConfig), dialogConfig: Object.assign(Object.assign({}, globalDialogConfig), workflowDialogConfig), onClose: () => {
workflowOnClose === null || workflowOnClose === void 0 ? void 0 : workflowOnClose();
globalOnClose === null || globalOnClose === void 0 ? void 0 : globalOnClose();
} }, otherGlobalErrorConfig), otherWorkflowErrorConfig);
const { initialScreenIndex = 0, successScreen = React.createElement(RegistrationSuccessScreen, null), existingAccountSuccessScreen = React.createElement(ExistingAccountSuccessScreen, null), isInviteRegistration, children = isInviteRegistration
? [
React.createElement(EulaScreen, { key: "EulaScreen", html: eulaIsHtml }),
React.createElement(CreatePasswordScreen, { key: "CreatePasswordScreen" }),
React.createElement(AccountDetailsScreen, { key: "AccountDetailsScreen" }),
]
: [
React.createElement(EulaScreen, { key: "EulaScreen", html: eulaIsHtml }),
React.createElement(CreateAccountScreen, { key: "CreateAccountScreen" }),
React.createElement(VerifyCodeScreen, { key: "VerifyCodeScreen" }),
React.createElement(CreatePasswordScreen, { key: "CreatePasswordScreen" }),
React.createElement(AccountDetailsScreen, { key: "AccountDetailsScreen" }),
], } = props;
const screens = [...(Array.isArray(children) ? children : [children])];
const totalScreens = screens.length;
const [currentScreen, setCurrentScreen] = useState(initialScreenIndex < 0 ? 0 : initialScreenIndex > totalScreens - 1 ? totalScreens - 1 : initialScreenIndex);
const [showSuccessScreen, setShowSuccessScreen] = useState(false);
const initialRegistrationWorkflowScreenData = {
Eula: {
accepted: false,
},
CreateAccount: {
emailAddress: '',
},
VerifyCode: {
code: '',
isAccountExist: false,
},
CreatePassword: {
password: '',
confirmPassword: '',
},
AccountDetails: {
firstName: '',
lastName: '',
},
Other: {},
};
const [screenData, setScreenData] = useState(initialRegistrationWorkflowScreenData);
const [viewPagerIndex, setViewPagerIndex] = useState(0);
const selectedPage = React.useRef(0);
const updateScreenData = (data) => {
const { Other } = screenData;
const { screenId, values, isAccountExist: accountExists } = data;
if (accountExists) {
setIsAccountExist(accountExists);
setShowSuccessScreen(accountExists);
}
if (!Object.keys(screenData).includes(screenId)) {
setScreenData((oldData) => (Object.assign(Object.assign({}, oldData), { Other: Object.assign(Object.assign({}, oldData.Other), { [screenId]: values }) })));
}
else if (Object.keys(Other).includes(screenId)) {
setScreenData((oldData) => (Object.assign(Object.assign({}, oldData), { Other: Object.assign(Object.assign({}, Other), { [screenId]: Object.assign(Object.assign({}, Other[screenId]), values) }) })));
}
else {
setScreenData((oldData) => (Object.assign(Object.assign({}, oldData), { [screenId]: values })));
}
};
const resetScreenData = () => {
var _a;
setScreenData(initialRegistrationWorkflowScreenData);
setViewPagerIndex(viewPagerIndex + 1);
setIsAccountExist(false);
setCurrentScreen(0);
setShowSuccessScreen(false);
(_a = viewPagerRef.current) === null || _a === void 0 ? void 0 : _a.setPage(0);
};
const [loading, setLoading] = useState(false);
const finishRegistration = (data) => __awaiter(void 0, void 0, void 0, function* () {
try {
setTimeout(() => {
setLoading(true);
}, timeOutDelay);
if (actions === null || actions === void 0 ? void 0 : actions.completeRegistration) {
const { Eula, CreateAccount, VerifyCode, CreatePassword, AccountDetails, Other } = screenData;
const userInfo = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Eula), CreateAccount), VerifyCode), CreatePassword), AccountDetails), Other), data.values);
return yield actions
.completeRegistration(userInfo)
.then(({ email, organizationName }) => {
updateScreenData({
screenId: 'RegistrationSuccessScreen',
values: { email, organizationName },
});
setShowSuccessScreen(true);
})
.catch((_error) => {
triggerError(_error);
});
}
}
catch (err) {
console.error(err);
}
finally {
setTimeout(() => {
setLoading(false);
}, timeOutDelay);
}
});
useEffect(() => {
if (isInviteRegistration === true) {
const { initialRegistrationParams: { email, code }, } = props;
updateScreenData({ screenId: 'CreateAccount', values: { emailAddress: email } });
updateScreenData({ screenId: 'VerifyCode', values: { code } });
}
}, []);
return (React.createElement(RegistrationWorkflowContextProvider, { currentScreen: currentScreen, totalScreens: totalScreens, nextScreen: (data) => {
var _a;
try {
updateScreenData(data);
if (data.isAccountExist) {
setIsAccountExist(true);
setShowSuccessScreen(true);
}
if (currentScreen === totalScreens - 1)
return finishRegistration(data);
setCurrentScreen((i) => i + 1);
(_a = viewPagerRef.current) === null || _a === void 0 ? void 0 : _a.setPage(currentScreen + 1);
}
catch (_error) {
triggerError(_error);
}
}, previousScreen: (data) => {
var _a;
updateScreenData(data);
if (currentScreen === 0) {
resetScreenData();
navigate(routeConfig.LOGIN);
}
else {
setCurrentScreen((i) => i - 1);
(_a = viewPagerRef.current) === null || _a === void 0 ? void 0 : _a.setPage(currentScreen - 1);
}
}, screenData: screenData, updateScreenData: updateScreenData, resetScreenData: resetScreenData, isInviteRegistration: isInviteRegistration, eulaIsHtml: eulaIsHtml },
React.createElement(ErrorManager, Object.assign({}, errorDisplayConfig, { mode: "dialog" }),
showSuccessScreen ? (isAccountExist ? (existingAccountSuccessScreen) : (successScreen)) : (React.createElement(PagerView, { style: styles.pagerView, initialPage: currentScreen !== null && currentScreen !== void 0 ? currentScreen : initialScreenIndex, ref: viewPagerRef, scrollEnabled: false, collapsable: false, key: viewPagerIndex, onPageSelected: (e) => {
selectedPage.current = e.nativeEvent.position;
}, onPageScrollStateChanged: (e) => {
var _a, _b;
if (e.nativeEvent.pageScrollState === 'idle') {
(_a = viewPagerRef.current) === null || _a === void 0 ? void 0 : _a.setPageWithoutAnimation(0);
(_b = viewPagerRef.current) === null || _b === void 0 ? void 0 : _b.setPageWithoutAnimation(selectedPage.current);
}
} }, screens.map((screen, index) => (React.createElement(View, { style: { flex: 1 }, key: index + 1 }, screen))))),
loading ? React.createElement(Spinner, { visible: loading }) : null)));
};