@tap-payments/auth-jsconnect 2.6.20-test → 2.6.23-test
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/@types/app.d.ts +2 -1
- package/build/@types/app.js +1 -0
- package/build/api/auth.d.ts +1 -0
- package/build/api/auth.js +5 -1
- package/build/api/index.d.ts +2 -0
- package/build/api/lead.d.ts +1 -0
- package/build/api/lead.js +50 -1
- package/build/app/rootReducer.d.ts +1 -0
- package/build/app/rootReducer.js +3 -1
- package/build/app/store.d.ts +2 -0
- package/build/constants/api.d.ts +2 -0
- package/build/constants/api.js +4 -0
- package/build/constants/app.d.ts +5 -0
- package/build/constants/app.js +24 -0
- package/build/features/app/board/boardStore.d.ts +30 -0
- package/build/features/app/board/boardStore.js +223 -0
- package/build/features/app/connectExpress/connectExpressStore.d.ts +1 -1
- package/build/features/app/connectExpress/connectExpressStore.js +88 -7
- package/build/features/board/Board.d.ts +9 -0
- package/build/features/board/Board.js +73 -0
- package/build/features/board/index.d.ts +1 -0
- package/build/features/board/index.js +1 -0
- package/build/features/board/screens/ResetPasswordSuccess/ResetPasswordSuccess.d.ts +5 -0
- package/build/features/board/screens/ResetPasswordSuccess/ResetPasswordSuccess.js +21 -0
- package/build/features/board/screens/ResetPasswordSuccess/index.d.ts +3 -0
- package/build/features/board/screens/ResetPasswordSuccess/index.js +2 -0
- package/build/features/board/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.d.ts +3 -0
- package/build/features/board/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +27 -0
- package/build/features/board/screens/SuccessWithFlowButtons/index.d.ts +2 -0
- package/build/features/board/screens/SuccessWithFlowButtons/index.js +2 -0
- package/build/features/board/screens/Verify/OTPInput.d.ts +7 -0
- package/build/features/board/screens/Verify/OTPInput.js +51 -0
- package/build/features/board/screens/Verify/Verify.d.ts +5 -0
- package/build/features/board/screens/Verify/Verify.js +74 -0
- package/build/features/board/screens/Verify/index.d.ts +2 -0
- package/build/features/board/screens/Verify/index.js +2 -0
- package/build/features/board/screens/Verify/validation.d.ts +8 -0
- package/build/features/board/screens/Verify/validation.js +4 -0
- package/build/features/connectExpress/ConnectExpress.js +3 -1
- package/build/features/connectExpress/screens/CivilID/CivilID.js +5 -2
- package/build/features/connectExpress/screens/CivilID/IDNumber.js +7 -2
- package/build/features/connectExpress/screens/Mobile/Mobile.js +1 -1
- package/build/features/connectExpress/screens/Mobile/TAC.js +1 -1
- package/build/features/featuresScreens.d.ts +1 -0
- package/build/features/featuresScreens.js +17 -0
- package/build/features/shared/BusinessCountry/BusinessCountry.js +5 -0
- package/build/hooks/useAppDispatch.d.ts +1 -0
- package/build/index.d.ts +3 -2
- package/build/index.js +4 -2
- package/package.json +1 -1
|
@@ -392,7 +392,7 @@ export var createCivilIdAuthAsync = createAsyncThunk('connectExpress/createCivil
|
|
|
392
392
|
step_name: CONNECT_EXPRESS_STEP_NAMES.CREATE_AUTH_CIVIL_ID,
|
|
393
393
|
encryption_contract: ['user_credentail.identification_id']
|
|
394
394
|
};
|
|
395
|
-
return [4, API.authService.
|
|
395
|
+
return [4, API.authService.createExpressAuth(requestBody)];
|
|
396
396
|
case 1:
|
|
397
397
|
data = _d.sent();
|
|
398
398
|
thunkApi.dispatch(handleNextScreenStep());
|
|
@@ -537,12 +537,80 @@ export var verifyNIDOtpAsync = createAsyncThunk('connectExpress/verifyNIDOtpAsyn
|
|
|
537
537
|
}
|
|
538
538
|
});
|
|
539
539
|
}); });
|
|
540
|
-
export var verifyPACIAsync = createAsyncThunk('connectExpress/verifyPACIAsync', function (
|
|
541
|
-
var
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
540
|
+
export var verifyPACIAsync = createAsyncThunk('connectExpress/verifyPACIAsync', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
|
|
541
|
+
var _a, settings, connectExpress, authData, _b, scope, redirectUrl, authConfigData, isScopeAuthentication, bi, isDataHasOperator, expiry, interval, maxCalls, count, data, isSuccess, authId, urlQueryStart, _c, brandList, entityList, stepName, needToCollectMoreInfo, creatingAccount;
|
|
542
|
+
var _d;
|
|
543
|
+
return __generator(this, function (_e) {
|
|
544
|
+
switch (_e.label) {
|
|
545
|
+
case 0:
|
|
546
|
+
_a = thunkApi.getState(), settings = _a.settings, connectExpress = _a.connectExpress;
|
|
547
|
+
authData = (connectExpress.data.responseData || {}).authData;
|
|
548
|
+
_b = settings.data.appConfig, scope = _b.scope, redirectUrl = _b.redirectUrl, authConfigData = _b.data;
|
|
549
|
+
isScopeAuthentication = scope === SCOPE_AUTH;
|
|
550
|
+
bi = settings.data.deviceInfo.browser.browser_id;
|
|
551
|
+
isDataHasOperator = authConfigData === null || authConfigData === void 0 ? void 0 : authConfigData.includes('operator');
|
|
552
|
+
expiry = (authData === null || authData === void 0 ? void 0 : authData.expiry) || 120;
|
|
553
|
+
interval = 3;
|
|
554
|
+
maxCalls = Math.floor(expiry / interval);
|
|
555
|
+
count = 1;
|
|
556
|
+
_e.label = 1;
|
|
557
|
+
case 1:
|
|
558
|
+
if (!(count <= maxCalls)) return [3, 9];
|
|
559
|
+
if (thunkApi.signal.aborted) {
|
|
560
|
+
return [3, 9];
|
|
561
|
+
}
|
|
562
|
+
return [4, API.authService.getVerifyExpressAuth(authData === null || authData === void 0 ? void 0 : authData.auth_token)];
|
|
563
|
+
case 2:
|
|
564
|
+
data = _e.sent();
|
|
565
|
+
isSuccess = ((_d = data.status) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === 'success';
|
|
566
|
+
if (!isSuccess) return [3, 6];
|
|
567
|
+
authId = data.auth.id;
|
|
568
|
+
thunkApi.dispatch(storeAuthId(authId));
|
|
569
|
+
if (isScopeAuthentication && !data.new_user && !isDataHasOperator && authId) {
|
|
570
|
+
if (settings.data.appConfig.mode === 'popup') {
|
|
571
|
+
settings.data.appConfig.onFlowCompleted({ auth_id: authId, bi: bi });
|
|
572
|
+
thunkApi.dispatch(handleOpen(false));
|
|
573
|
+
return [2, data];
|
|
574
|
+
}
|
|
575
|
+
if (redirectUrl) {
|
|
576
|
+
urlQueryStart = redirectUrl.includes('?') ? '&' : '?';
|
|
577
|
+
window.open("".concat(redirectUrl).concat(urlQueryStart, "authentication_id=").concat(authId, "&bi=").concat(bi), '_self');
|
|
578
|
+
return [2, data];
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
if (!(isScopeAuthentication && !data.new_user && isDataHasOperator)) return [3, 4];
|
|
582
|
+
return [4, thunkApi.dispatch(retrieveAuthenticationListAsync({ individualId: data.individual_id })).unwrap()];
|
|
583
|
+
case 3:
|
|
584
|
+
_c = _e.sent(), brandList = _c.brandList, entityList = _c.entityList;
|
|
585
|
+
if (brandList.length && entityList.length) {
|
|
586
|
+
sleep(100).then(function () { return thunkApi.dispatch(handleNextScreenStep('CONNECT_EXPRESS_AUTHENTICATION_LIST_STEP')); });
|
|
587
|
+
return [2, data];
|
|
588
|
+
}
|
|
589
|
+
_e.label = 4;
|
|
590
|
+
case 4: return [4, thunkApi.dispatch(getLeadByIdAsync(data.lead.id)).unwrap()];
|
|
591
|
+
case 5:
|
|
592
|
+
_e.sent();
|
|
593
|
+
stepName = data.step_name;
|
|
594
|
+
needToCollectMoreInfo = stepName === 'collect_info';
|
|
595
|
+
creatingAccount = stepName === 'create_account';
|
|
596
|
+
if (creatingAccount) {
|
|
597
|
+
sleep(100).then(function () { return thunkApi.dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_WAITING_FOR_CREATING_ACCOUNT_STEP')); });
|
|
598
|
+
}
|
|
599
|
+
if (needToCollectMoreInfo) {
|
|
600
|
+
sleep(100).then(function () { return thunkApi.dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_COLLECT_INDIVIDUAL_INFO_STEP')); });
|
|
601
|
+
}
|
|
602
|
+
return [2, data];
|
|
603
|
+
case 6: return [4, sleep(interval * 1000)];
|
|
604
|
+
case 7:
|
|
605
|
+
_e.sent();
|
|
606
|
+
_e.label = 8;
|
|
607
|
+
case 8:
|
|
608
|
+
count++;
|
|
609
|
+
return [3, 1];
|
|
610
|
+
case 9: throw new Error('paci_verification_failed');
|
|
611
|
+
}
|
|
612
|
+
});
|
|
613
|
+
}); });
|
|
546
614
|
export var createCivilIDAuthIdentityAsync = createAsyncThunk('connectExpress/createCivilIDAuthIdentityAsync', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
|
|
547
615
|
var _a, settings, connectExpress, civilId, countryCode, requestBody, data;
|
|
548
616
|
var _b, _c, _d;
|
|
@@ -1232,6 +1300,19 @@ export var connectSlice = createSlice({
|
|
|
1232
1300
|
.addCase(verifyNIDOtpAsync.rejected, function (state, action) {
|
|
1233
1301
|
state.loading = false;
|
|
1234
1302
|
state.error = action.error.message;
|
|
1303
|
+
})
|
|
1304
|
+
.addCase(verifyPACIAsync.pending, function (state) {
|
|
1305
|
+
state.loading = true;
|
|
1306
|
+
state.error = null;
|
|
1307
|
+
})
|
|
1308
|
+
.addCase(verifyPACIAsync.fulfilled, function (state, action) {
|
|
1309
|
+
var _a;
|
|
1310
|
+
state.loading = false;
|
|
1311
|
+
state.data.responseData = __assign(__assign({}, state.data.responseData), { authData: __assign(__assign({}, (_a = state.data.responseData) === null || _a === void 0 ? void 0 : _a.authData), action.payload) });
|
|
1312
|
+
})
|
|
1313
|
+
.addCase(verifyPACIAsync.rejected, function (state, action) {
|
|
1314
|
+
state.loading = false;
|
|
1315
|
+
state.error = action.error.message;
|
|
1235
1316
|
})
|
|
1236
1317
|
.addCase(verifyNIDOtpLeadIdentityAsync.pending, function (state) {
|
|
1237
1318
|
state.loading = true;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { LibConfig } from '../../@types';
|
|
3
|
+
export interface BoardLibProps extends LibConfig {
|
|
4
|
+
leadId: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function BoardElement(props: BoardLibProps): JSX.Element;
|
|
7
|
+
export declare function renderBoardLib(config: BoardLibProps, elementId: string): {
|
|
8
|
+
unmount: () => void;
|
|
9
|
+
};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import React, { memo } from 'react';
|
|
25
|
+
import { createRoot } from 'react-dom/client';
|
|
26
|
+
import { useAppTheme, useAppSelector, useErrorListener, useAppConfig, useStepStartedListener, useAppDispatch } from '../../hooks';
|
|
27
|
+
import { settingsSelector } from '../../app/settings';
|
|
28
|
+
import AnimationFlow from '../../components/AnimationFlow';
|
|
29
|
+
import { store } from '../../app/store';
|
|
30
|
+
import { ReduxProvider, ThemeProvider } from '../../components/Providers';
|
|
31
|
+
import Collapse from '../../components/Collapse';
|
|
32
|
+
import { findOrCreateElementAndInject, sendPageView } from '../../utils';
|
|
33
|
+
import { FeatureContainer } from '../shared/Containers';
|
|
34
|
+
import { BOARD_SCREENS_NAVIGATION } from '../../constants';
|
|
35
|
+
import { boardFeatureScreens } from '../featuresScreens';
|
|
36
|
+
import { createVerifyTokenBy, boardSelector } from '../../features/app/board/boardStore';
|
|
37
|
+
import Background from '../shared/Background';
|
|
38
|
+
var Board = memo(function (_a) {
|
|
39
|
+
var leadId = _a.leadId, props = __rest(_a, ["leadId"]);
|
|
40
|
+
var theme = useAppTheme().theme;
|
|
41
|
+
var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, settingLoading = _b.loading;
|
|
42
|
+
var _c = useAppSelector(boardSelector), customLoading = _c.customLoading, loading = _c.loading, bankError = _c.error;
|
|
43
|
+
useAppConfig(__assign({ navigation: BOARD_SCREENS_NAVIGATION }, props));
|
|
44
|
+
useErrorListener(bankError || error);
|
|
45
|
+
useStepStartedListener();
|
|
46
|
+
var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant, isMaturityExpress = data.isMaturityExpress;
|
|
47
|
+
var dispatch = useAppDispatch();
|
|
48
|
+
React.useEffect(function () {
|
|
49
|
+
sendPageView({
|
|
50
|
+
title: 'Board'
|
|
51
|
+
});
|
|
52
|
+
}, []);
|
|
53
|
+
React.useEffect(function () {
|
|
54
|
+
if (data.isValidOperator && props.open && !settingLoading)
|
|
55
|
+
dispatch(createVerifyTokenBy(leadId));
|
|
56
|
+
}, [data.isValidOperator, settingLoading]);
|
|
57
|
+
var initialLoading = settingLoading || customLoading;
|
|
58
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: isMaturityExpress }, { children: boardFeatureScreens.map(function (_a, index) {
|
|
59
|
+
var Element = _a.element, name = _a.name;
|
|
60
|
+
var isActive = activeScreen.name === name;
|
|
61
|
+
return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
|
|
62
|
+
}) })) })) })) })));
|
|
63
|
+
});
|
|
64
|
+
export function BoardElement(props) {
|
|
65
|
+
return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Board, __assign({}, props)) })));
|
|
66
|
+
}
|
|
67
|
+
export function renderBoardLib(config, elementId) {
|
|
68
|
+
var element = findOrCreateElementAndInject(elementId);
|
|
69
|
+
var root = createRoot(element);
|
|
70
|
+
root.render(_jsx(BoardElement, __assign({}, config)));
|
|
71
|
+
var unmount = function () { return root.unmount(); };
|
|
72
|
+
return { unmount: unmount };
|
|
73
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Board';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Board';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Trans, useTranslation } from 'react-i18next';
|
|
4
|
+
import { handlePrevScreenStep } from '../../../../app/settings';
|
|
5
|
+
import SuccessScreen from '../../../shared/SuccessScreen';
|
|
6
|
+
import { boardSelector } from '../../../app/board/boardStore';
|
|
7
|
+
import { maskEmail } from '../../../../utils';
|
|
8
|
+
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
9
|
+
var ResetPasswordSuccess = function (_a) {
|
|
10
|
+
var _b, _c;
|
|
11
|
+
var t = useTranslation().t;
|
|
12
|
+
var dispatch = useAppDispatch();
|
|
13
|
+
var data = useAppSelector(boardSelector).data;
|
|
14
|
+
var email = (((_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.business) === null || _c === void 0 ? void 0 : _c.primary_contact) || {}).email;
|
|
15
|
+
var maskedEmail = maskEmail(email);
|
|
16
|
+
var onBack = function () {
|
|
17
|
+
dispatch(handlePrevScreenStep());
|
|
18
|
+
};
|
|
19
|
+
return (_jsx(SuccessScreen, { title: t("reset_password_success_title"), description: _jsx(Trans, { i18nKey: 'reset_password_success_description_dev', values: { email: maskedEmail } }), showEmailProviders: true, enableBack: true, onBack: function () { return onBack(); } }));
|
|
20
|
+
};
|
|
21
|
+
export default React.memo(ResetPasswordSuccess);
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { memo } from 'react';
|
|
14
|
+
import { settingsSelector } from '../../../../app/settings';
|
|
15
|
+
import { useAppSelector, useAppDispatch } from '../../../../hooks';
|
|
16
|
+
import { SCOPE_AUTH } from '../../../../constants';
|
|
17
|
+
import { boardSelector } from '../../../app/board/boardStore';
|
|
18
|
+
import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
|
|
19
|
+
var SuccessWithFlowButtons = function () {
|
|
20
|
+
var dispatch = useAppDispatch();
|
|
21
|
+
var _a = useAppSelector(boardSelector), data = _a.data, loading = _a.loading;
|
|
22
|
+
var settingsData = useAppSelector(settingsSelector).data;
|
|
23
|
+
var isScopeAuthentication = settingsData.appConfig.scope === SCOPE_AUTH;
|
|
24
|
+
var _b = data.verify.responseBody || {}, flows = _b.flows, entity = _b.entity, brand = _b.brand, bank = _b.bank_account, merchant = _b.merchant, user = _b.user, business = _b.business, board_id = _b.board_id, board_info_id = _b.board_info_id, name = _b.name, individuals = _b.individuals;
|
|
25
|
+
return (_jsx(SuccessFlowButtons, { flowName: data.flowName, loading: loading, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [] }));
|
|
26
|
+
};
|
|
27
|
+
export default memo(SuccessWithFlowButtons);
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import * as React from 'react';
|
|
14
|
+
import Box from '@mui/material/Box/Box';
|
|
15
|
+
import { styled } from '@mui/material/styles';
|
|
16
|
+
import OTPField from '../../../shared/OTP';
|
|
17
|
+
import { useController, useFormContext } from 'react-hook-form';
|
|
18
|
+
import { useTranslation } from 'react-i18next';
|
|
19
|
+
import { DEFAULT_TIMER_VALUE } from '../../../../constants';
|
|
20
|
+
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
21
|
+
import { isTokenExpired } from '../../../../utils';
|
|
22
|
+
import { resendOTP, boardSelector, clearError } from '../../../app/board/boardStore';
|
|
23
|
+
var BoxStyled = styled(Box)(function (_a) {
|
|
24
|
+
var theme = _a.theme;
|
|
25
|
+
return ({
|
|
26
|
+
display: 'flex',
|
|
27
|
+
flexDirection: 'column',
|
|
28
|
+
fontFamily: theme.typography.fontFamily
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
var OTPInput = function (_a) {
|
|
32
|
+
var loading = _a.loading;
|
|
33
|
+
var _b = useFormContext(), control = _b.control, setValue = _b.setValue;
|
|
34
|
+
var t = useTranslation().t;
|
|
35
|
+
var otpControl = useController({ name: 'otp', control: control });
|
|
36
|
+
var dispatch = useAppDispatch();
|
|
37
|
+
var error = useAppSelector(boardSelector).error;
|
|
38
|
+
var handleOnOTPChange = function (otp) {
|
|
39
|
+
if (error)
|
|
40
|
+
dispatch(clearError());
|
|
41
|
+
otpControl.field.onChange(otp);
|
|
42
|
+
};
|
|
43
|
+
var handleOnResendOTP = function () {
|
|
44
|
+
if (otpControl.field.value)
|
|
45
|
+
setValue('otp', '', { shouldValidate: true });
|
|
46
|
+
dispatch(resendOTP());
|
|
47
|
+
};
|
|
48
|
+
var otpValue = otpControl.field.value;
|
|
49
|
+
return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { loading: loading, timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendOTP, value: otpValue, hasError: isTokenExpired(error), onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
|
|
50
|
+
};
|
|
51
|
+
export default React.memo(OTPInput);
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import * as React from 'react';
|
|
14
|
+
import { useAppDispatch } from '../../../../hooks';
|
|
15
|
+
import { useTranslation } from 'react-i18next';
|
|
16
|
+
import { useForm, FormProvider } from 'react-hook-form';
|
|
17
|
+
import { yupResolver } from '@hookform/resolvers/yup';
|
|
18
|
+
import Box from '@mui/material/Box/Box';
|
|
19
|
+
import { styled } from '@mui/material/styles';
|
|
20
|
+
import { useLanguage, useAppSelector } from '../../../../hooks';
|
|
21
|
+
import { deepCopy, maskPhone } from '../../../../utils';
|
|
22
|
+
import Form from '../../../../components/Form';
|
|
23
|
+
import Text from '../../../../components/Text';
|
|
24
|
+
import { ScreenContainer } from '../../../shared/Containers';
|
|
25
|
+
import { boardSelector, clearError, resetOTPScreen, verifyBoardLeadOTP } from '../../../app/board/boardStore';
|
|
26
|
+
import Button from '../../../shared/Button';
|
|
27
|
+
import { OTPValidation } from './validation';
|
|
28
|
+
import OTPInput from './OTPInput';
|
|
29
|
+
var OTPTitleContainerStyled = styled(Box)(function (_a) {
|
|
30
|
+
var theme = _a.theme;
|
|
31
|
+
return ({
|
|
32
|
+
background: theme.palette.common.white,
|
|
33
|
+
border: '1px solid',
|
|
34
|
+
borderColor: theme.palette.divider,
|
|
35
|
+
direction: theme.direction,
|
|
36
|
+
borderRadius: theme.spacing(0, 0, 1.25, 1.25),
|
|
37
|
+
marginBottom: theme.spacing(5.75)
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
var OTPTitleStyled = styled(Text)(function (_a) {
|
|
41
|
+
var theme = _a.theme;
|
|
42
|
+
return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, marginBlock: theme.spacing(1.75), marginInlineStart: theme.spacing(2.5), lineHeight: 1.75 }));
|
|
43
|
+
});
|
|
44
|
+
var FormStyled = styled(Form)(function () { return ({
|
|
45
|
+
display: 'flex',
|
|
46
|
+
flexDirection: 'column'
|
|
47
|
+
}); });
|
|
48
|
+
var VerifyNumber = function (_a) {
|
|
49
|
+
var _b;
|
|
50
|
+
var dispatch = useAppDispatch();
|
|
51
|
+
var _c = useAppSelector(boardSelector), data = _c.data, loading = _c.loading, error = _c.error;
|
|
52
|
+
var methods = useForm({
|
|
53
|
+
resolver: yupResolver(OTPValidation),
|
|
54
|
+
defaultValues: data.otpData,
|
|
55
|
+
mode: 'onChange'
|
|
56
|
+
});
|
|
57
|
+
var t = useTranslation().t;
|
|
58
|
+
var isAr = useLanguage().isAr;
|
|
59
|
+
var _d = React.useState(false), resendLoading = _d[0], setResendLoading = _d[1];
|
|
60
|
+
var phone = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.verification_by.sent_to;
|
|
61
|
+
React.useEffect(function () {
|
|
62
|
+
if (error && methods.formState.isValid && phone)
|
|
63
|
+
dispatch(clearError());
|
|
64
|
+
return function () {
|
|
65
|
+
dispatch(resetOTPScreen());
|
|
66
|
+
};
|
|
67
|
+
}, [methods.formState.isValid]);
|
|
68
|
+
var onSubmit = function (formData) {
|
|
69
|
+
dispatch(verifyBoardLeadOTP(deepCopy(formData)));
|
|
70
|
+
};
|
|
71
|
+
var disabled = !methods.formState.isValid || !!error || !phone || resendLoading;
|
|
72
|
+
return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : t('ide_opt_sent_title'), !loading && phone && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, { loading: resendLoading, setLoading: setResendLoading }), _jsx(Button, __assign({ disableBack: true, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
|
|
73
|
+
};
|
|
74
|
+
export default React.memo(VerifyNumber);
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as yup from 'yup';
|
|
2
|
+
export declare const OTPValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
3
|
+
otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
4
|
+
}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
5
|
+
otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
6
|
+
}>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
7
|
+
otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
8
|
+
}>>>;
|
|
@@ -119,7 +119,9 @@ var ConnectExpress = memo(function (_a) {
|
|
|
119
119
|
return;
|
|
120
120
|
}
|
|
121
121
|
if (leadId) {
|
|
122
|
-
|
|
122
|
+
if (props.scope !== 'auth') {
|
|
123
|
+
dispatch(setIsLeadIdPassed(true));
|
|
124
|
+
}
|
|
123
125
|
dispatch(setLeadId(leadId));
|
|
124
126
|
dispatch(retrieveLeadIdentityByIdAsync(leadId));
|
|
125
127
|
return;
|
|
@@ -57,10 +57,12 @@ var OrBoxStyled = styled(Box)(function (_a) {
|
|
|
57
57
|
});
|
|
58
58
|
});
|
|
59
59
|
var CivilID = function (_a) {
|
|
60
|
+
var _b, _c;
|
|
60
61
|
var isAr = useLanguage().isAr;
|
|
61
62
|
var dispatch = useAppDispatch();
|
|
62
63
|
var t = useTranslation().t;
|
|
63
|
-
var
|
|
64
|
+
var _d = useAppSelector(connectExpressSelector), data = _d.data, loading = _d.loading, error = _d.error;
|
|
65
|
+
var isLeadIdPassed = data.isLeadIdPassed, responseData = data.responseData;
|
|
64
66
|
var methods = useForm({
|
|
65
67
|
resolver: yupResolver(civilIDValidationSchema),
|
|
66
68
|
defaultValues: data.civilIdData,
|
|
@@ -83,6 +85,7 @@ var CivilID = function (_a) {
|
|
|
83
85
|
dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP'));
|
|
84
86
|
};
|
|
85
87
|
var disabled = !methods.formState.isValid || !!error;
|
|
86
|
-
|
|
88
|
+
var isLeadIdentityIdAvailable = (_c = (_b = responseData === null || responseData === void 0 ? void 0 : responseData.leadData) === null || _b === void 0 ? void 0 : _b.identification) === null || _c === void 0 ? void 0 : _c.id;
|
|
89
|
+
return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(IDNumber, { sx: { mb: methods.formState.isValid ? 7.5 : 0, transition: 'mb 0.3s' } }), _jsx(Button, __assign({ loading: loading, isAr: isAr, onBackClicked: onBackToCountryList, disableBack: !data.isStartFromBusinessCountry, disabled: disabled, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: isLeadIdPassed ? !isLeadIdentityIdAvailable && !methods.formState.isValid : !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading }, { children: t('mobile_button_label') }))] }))] })) })) }));
|
|
87
90
|
};
|
|
88
91
|
export default React.memo(CivilID);
|
|
@@ -16,11 +16,13 @@ import { useController, useFormContext } from 'react-hook-form';
|
|
|
16
16
|
import Box from '@mui/material/Box';
|
|
17
17
|
import { styled, alpha } from '@mui/material/styles';
|
|
18
18
|
import Text from '../../../../components/Text';
|
|
19
|
+
import { useAppSelector } from '../../../../hooks';
|
|
19
20
|
import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
|
|
20
21
|
import { CIVIL_ID_NUMBER_LENGTH } from '../../../../constants';
|
|
21
22
|
import Input from '../../../shared/Input';
|
|
22
23
|
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
23
24
|
import { EndAdornment } from '../../../shared/EndAdornment';
|
|
25
|
+
import { connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
|
|
24
26
|
var LabelContainerStyled = styled(Box)(function (_a) {
|
|
25
27
|
var theme = _a.theme;
|
|
26
28
|
return ({
|
|
@@ -34,11 +36,12 @@ var InputLabelStyled = styled(Text)(function (_a) {
|
|
|
34
36
|
return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
|
|
35
37
|
});
|
|
36
38
|
var IDNumber = React.forwardRef(function (_a, ref) {
|
|
37
|
-
var _b;
|
|
39
|
+
var _b, _c, _d;
|
|
38
40
|
var sx = _a.sx;
|
|
39
41
|
var t = useTranslation().t;
|
|
40
42
|
var control = useFormContext().control;
|
|
41
43
|
var civilIdControl = useController({ control: control, name: 'civilId' });
|
|
44
|
+
var data = useAppSelector(connectExpressSelector).data;
|
|
42
45
|
var handleIdChange = function (_a) {
|
|
43
46
|
var target = _a.target;
|
|
44
47
|
var value = removeAllOtherThanCharsAndNumber(target.value);
|
|
@@ -49,6 +52,8 @@ var IDNumber = React.forwardRef(function (_a, ref) {
|
|
|
49
52
|
};
|
|
50
53
|
var idValue = civilIdControl.field.value;
|
|
51
54
|
var error = (_b = civilIdControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
52
|
-
|
|
55
|
+
var isLeadIdPassed = data.isLeadIdPassed, responseData = data.responseData;
|
|
56
|
+
var isLeadIdentityIdAvailable = !!((_d = (_c = responseData === null || responseData === void 0 ? void 0 : responseData.leadData) === null || _c === void 0 ? void 0 : _c.identification) === null || _d === void 0 ? void 0 : _d.id);
|
|
57
|
+
return (_jsxs(ScreenContainer, __assign({ ref: ref, sx: sx }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('enter_civil_id') }) }), _jsx(Input, { dir: 'ltr', type: 'text', inputProps: { maxLength: CIVIL_ID_NUMBER_LENGTH }, onChange: handleIdChange, disabled: isLeadIdPassed && isLeadIdentityIdAvailable, value: idValue, endAdornment: _jsx(EndAdornment, { value: idValue, error: error, onClear: clearIdNumber }), placeholder: t('civil_id_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true })] })));
|
|
53
58
|
});
|
|
54
59
|
export default React.memo(IDNumber);
|
|
@@ -78,7 +78,7 @@ var Mobile = function (_a) {
|
|
|
78
78
|
var dispatch = useAppDispatch();
|
|
79
79
|
var _f = useCountry(settingData.businessCountry.iso2), isKuwait = _f.isKuwait, isOther = _f.isOther;
|
|
80
80
|
var responseData = data.responseData, isLeadIdPassed = data.isLeadIdPassed;
|
|
81
|
-
var isLeadIdentityIdAvailable =
|
|
81
|
+
var isLeadIdentityIdAvailable = (_c = (_b = responseData === null || responseData === void 0 ? void 0 : responseData.leadData) === null || _b === void 0 ? void 0 : _b.identification) === null || _c === void 0 ? void 0 : _c.id;
|
|
82
82
|
var methods = useForm({
|
|
83
83
|
resolver: yupResolver(PhoneValidationSchema(isLeadIdPassed)),
|
|
84
84
|
defaultValues: data.mobileData,
|
|
@@ -80,6 +80,6 @@ var TAC = function (_a) {
|
|
|
80
80
|
return;
|
|
81
81
|
tacControl.field.onChange(checked);
|
|
82
82
|
};
|
|
83
|
-
return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(TACContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: tacChecked, onChange: handleTACCheckedChange }), _jsxs(TextStyled, { children: [t('read_agree_terms_and_conditions_message'), _jsx(LinkStyled, __assign({ href: isAr ? TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_AR : TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_EN, target: '_blank', underline: 'always' }, { children: t('terms_and_conditions_link_title') }))] })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] }) })));
|
|
83
|
+
return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: [_jsxs(TACContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: tacChecked, onChange: handleTACCheckedChange }), _jsxs(TextStyled, { children: [t('read_agree_terms_and_conditions_message'), _jsx(LinkStyled, __assign({ href: isAr ? TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_AR : TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_EN, target: '_blank', underline: 'always' }, { children: t('terms_and_conditions_link_title') }))] })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] })) })));
|
|
84
84
|
};
|
|
85
85
|
export default React.memo(TAC);
|
|
@@ -9,3 +9,4 @@ export declare const taxFeatureScreens: Array<FeatureScreenStep>;
|
|
|
9
9
|
export declare const signInFeatureScreens: Array<FeatureScreenStep>;
|
|
10
10
|
export declare const entityFeatureScreens: Array<FeatureScreenStep>;
|
|
11
11
|
export declare const brandFeatureScreens: Array<FeatureScreenStep>;
|
|
12
|
+
export declare const boardFeatureScreens: Array<FeatureScreenStep>;
|
|
@@ -82,6 +82,9 @@ import BrandSuccessPage from './brand/screens/Success';
|
|
|
82
82
|
import BrandSuccessWithFlowPage from './brand/screens/SuccessWithFlowButtons';
|
|
83
83
|
import BrandResetPasswordSuccessPage from './brand/screens/ResetPasswordSuccess';
|
|
84
84
|
import BrandDataLoadingPage from './brand/screens/PrepareDataLoading';
|
|
85
|
+
import BoardVerifyPage from './board/screens/Verify';
|
|
86
|
+
import BoardSuccessWithFlowPage from './board/screens/SuccessWithFlowButtons';
|
|
87
|
+
import BoardResetPasswordSuccessPage from './board/screens/ResetPasswordSuccess';
|
|
85
88
|
export var connectFeatureScreens = [
|
|
86
89
|
{
|
|
87
90
|
name: 'CONNECT_BUSINESS_COUNTRY_STEP',
|
|
@@ -408,3 +411,17 @@ export var brandFeatureScreens = [
|
|
|
408
411
|
},
|
|
409
412
|
{ name: 'BRAND_RESET_PASSWORD_SUCCESS', element: BrandResetPasswordSuccessPage }
|
|
410
413
|
];
|
|
414
|
+
export var boardFeatureScreens = [
|
|
415
|
+
{
|
|
416
|
+
name: 'BOARD_VERIFY_STEP',
|
|
417
|
+
element: BoardVerifyPage
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
name: 'BOARD_RESET_PASSWORD_SUCCESS',
|
|
421
|
+
element: BoardResetPasswordSuccessPage
|
|
422
|
+
},
|
|
423
|
+
{
|
|
424
|
+
name: 'BOARD_SUCCESS_FLOWS_BUTTONS_STEP',
|
|
425
|
+
element: BoardSuccessWithFlowPage
|
|
426
|
+
}
|
|
427
|
+
];
|
|
@@ -116,6 +116,7 @@ var BusinessCountry = function (_a) {
|
|
|
116
116
|
handleSearch('');
|
|
117
117
|
};
|
|
118
118
|
var handleOpenMainMenu = function () {
|
|
119
|
+
setCountryList(countries);
|
|
119
120
|
setOpen(true);
|
|
120
121
|
};
|
|
121
122
|
var handleOpenSubMenu = function (index) {
|
|
@@ -138,6 +139,10 @@ var BusinessCountry = function (_a) {
|
|
|
138
139
|
});
|
|
139
140
|
}, [defaultCountryIso2]);
|
|
140
141
|
var handleSearch = function (value) {
|
|
142
|
+
if (value === '') {
|
|
143
|
+
setCountryList(countries);
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
141
146
|
var filteredList = countryList === null || countryList === void 0 ? void 0 : countryList.filter(function (country) {
|
|
142
147
|
var _a, _b;
|
|
143
148
|
return ((_a = country.countries) === null || _a === void 0 ? void 0 : _a.find(function (obj) { return obj.country.name_en.toLowerCase().includes(value.toLowerCase()); })) ||
|
|
@@ -10,4 +10,5 @@ export declare const useAppDispatch: () => import("redux-thunk").ThunkDispatch<{
|
|
|
10
10
|
entity: import("../features/app/entity/entityStore").EntityState;
|
|
11
11
|
brand: import("../features/app/brand/brandStore").BrandState;
|
|
12
12
|
connectExpress: import("../features/app/connectExpress/connectExpressStore").ConnectExpressState;
|
|
13
|
+
board: import("../features/app/board/boardStore").BoardState;
|
|
13
14
|
}, undefined, import("redux").AnyAction> & import("redux").Dispatch<import("redux").AnyAction>;
|
package/build/index.d.ts
CHANGED
|
@@ -10,5 +10,6 @@ import { TaxElement, TaxLibProps } from './features/tax';
|
|
|
10
10
|
import { SignInElement, SignInLibProps } from './features/signIn';
|
|
11
11
|
import { EntityElement, EntityLibProps } from './features/entity';
|
|
12
12
|
import { BrandElement, BrandLibProps } from './features/brand';
|
|
13
|
-
|
|
14
|
-
export {
|
|
13
|
+
import { BoardLibProps, BoardElement } from './features/board';
|
|
14
|
+
export type { ConnectLibProps, ConnectExpressLibProps, BusinessLibProps, PasswordLibProps, IndividualLibProps, BankLibProps, TaxLibProps, EntityLibProps, BrandLibProps, SignInLibProps, BoardLibProps };
|
|
15
|
+
export { ConnectElement, ConnectExpressElement, BusinessElement, PasswordElement, IndividualElement, BankElement, TaxElement, EntityElement, BrandElement, SignInElement, BoardElement };
|