@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
174 lines (173 loc) • 9.43 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, { useCallback, useEffect, useState } from 'react';
import { EulaScreenBase } from './EulaScreenBase';
import { useRegistrationContext, useRegistrationWorkflowContext } from '../../contexts';
import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
import { useTranslation } from 'react-i18next';
import { timeOutDelay } from '../../constants';
/**
* Component that renders a screen displaying the EULA and requests acceptance via a checkbox.
*
* @param {EulaScreenProps} props - Props of Eula Screen
*
* @category Component
*/
export const EulaScreen = (props) => {
const { t } = useTranslation();
const { actions, language, navigate } = useRegistrationContext();
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 regWorkflow = useRegistrationWorkflowContext();
const { nextScreen, previousScreen, screenData, currentScreen, totalScreens, isInviteRegistration, updateScreenData, resetScreenData, } = regWorkflow;
const { WorkflowCardBaseProps, WorkflowCardHeaderProps, WorkflowCardActionsProps, eulaContent, checkboxLabel = t('bluiRegistration:REGISTRATION.EULA.AGREE_TERMS'), html: htmlProp, initialCheckboxValue } = props, otherEulaScreenProps = __rest(props, ["WorkflowCardBaseProps", "WorkflowCardHeaderProps", "WorkflowCardActionsProps", "eulaContent", "checkboxLabel", "html", "initialCheckboxValue"]);
const html = htmlProp !== undefined ? htmlProp : regWorkflow === null || regWorkflow === void 0 ? void 0 : regWorkflow.eulaIsHtml;
const eulaAccepted = initialCheckboxValue !== null && initialCheckboxValue !== void 0 ? initialCheckboxValue : screenData.Eula.accepted;
const [isLoading, setIsLoading] = useState(true);
const [eulaData, setEulaData] = useState();
const [eulaFetchError, setEulaFetchError] = useState(false);
const loadAndCacheEula = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
var _a;
setIsLoading(true);
if (!eulaContent) {
setEulaData(t('bluiRegistration:REGISTRATION.EULA.LOADING'));
try {
const eulaText = yield ((_a = actions === null || actions === void 0 ? void 0 : actions.loadEula) === null || _a === void 0 ? void 0 : _a.call(actions, language));
setEulaData(eulaText);
setIsLoading(false);
}
catch (_error) {
triggerError(_error);
setEulaFetchError(true);
setIsLoading(false);
}
finally {
setIsLoading(false);
}
}
else {
setIsLoading(false);
setEulaData(eulaContent);
}
}), [eulaContent, t, actions, language]);
const onNext = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
var _b, _c, _d;
setIsLoading(true);
try {
if (screenData.Eula.accepted) {
yield ((_b = actions === null || actions === void 0 ? void 0 : actions.acceptEula) === null || _b === void 0 ? void 0 : _b.call(actions));
}
let isAccExist;
if (isInviteRegistration) {
const { codeValid, accountExists } = (_d = (yield ((_c = actions === null || actions === void 0 ? void 0 : actions.validateUserRegistrationRequest) === null || _c === void 0 ? void 0 : _c.call(actions, screenData.VerifyCode.code, screenData.CreateAccount.emailAddress)))) !== null && _d !== void 0 ? _d : {};
isAccExist = accountExists;
if (isAccExist) {
updateScreenData({
screenId: 'Eula',
values: { accepted: screenData.Eula.accepted },
isAccountExist: accountExists,
});
}
else {
if (typeof codeValid === 'boolean') {
if (codeValid)
void nextScreen({
screenId: 'Eula',
values: { accepted: screenData.Eula.accepted },
isAccountExist: accountExists,
});
else {
triggerError(new Error(t('bluiRegistration:SELF_REGISTRATION.VERIFY_EMAIL.CODE_VALIDATOR_ERROR')));
}
}
else {
triggerError(new Error(codeValid));
}
}
}
else {
void nextScreen({
screenId: 'Eula',
values: { accepted: screenData.Eula.accepted },
isAccountExist: isAccExist,
});
}
}
catch (_error) {
triggerError(_error);
}
finally {
setTimeout(() => {
setIsLoading(false);
}, timeOutDelay);
}
}), [actions, nextScreen, triggerError, isInviteRegistration, screenData, t, updateScreenData]);
const onPrevious = useCallback(() => {
setIsLoading(true);
try {
previousScreen({
screenId: 'Eula',
values: { accepted: eulaAccepted },
});
}
catch (_error) {
triggerError(_error);
}
finally {
setIsLoading(false);
}
}, [previousScreen, triggerError, eulaAccepted]);
const updateEulaAcceptedStatus = useCallback((accepted) => {
var _a;
screenData.Eula = Object.assign(Object.assign({}, screenData), { accepted });
(_a = props === null || props === void 0 ? void 0 : props.onEulaAcceptedChange) === null || _a === void 0 ? void 0 : _a.call(props, accepted);
}, [screenData]);
useEffect(() => {
void loadAndCacheEula();
}, [language]);
const { refreshConfig = {
showRefreshButton: eulaFetchError,
onRefresh: () => {
setEulaFetchError(false);
void loadAndCacheEula();
},
}, } = props;
const workflowCardHeaderProps = Object.assign({ title: t('bluiRegistration:REGISTRATION.STEPS.LICENSE'), onIconPress: () => {
navigate(-1);
resetScreenData();
} }, WorkflowCardHeaderProps);
const workflowCardActionsProps = Object.assign(Object.assign({ showNext: true, nextLabel: t('bluiCommon:ACTIONS.NEXT'), canGoNext: true, showPrevious: true, previousLabel: t('bluiCommon:ACTIONS.BACK'), canGoPrevious: 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);
} });
return (React.createElement(EulaScreenBase, Object.assign({ WorkflowCardHeaderProps: workflowCardHeaderProps, eulaContent: eulaData, WorkflowCardBaseProps: Object.assign({ loading: isLoading }, WorkflowCardBaseProps), checkboxLabel: checkboxLabel, html: html, initialCheckboxValue: eulaAccepted, onEulaAcceptedChange: updateEulaAcceptedStatus, WorkflowCardActionsProps: workflowCardActionsProps, errorDisplayConfig: errorDisplayConfig, refreshConfig: refreshConfig }, otherEulaScreenProps)));
};