@tap-payments/auth-jsconnect 2.12.8-development → 2.12.8-sandbox
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 +1 -0
- package/build/api/file.d.ts +1 -0
- package/build/api/file.js +9 -1
- package/build/api/index.d.ts +1 -0
- package/build/components/Tooltip/Tooltip.js +1 -1
- package/build/constants/api.js +1 -1
- package/build/constants/app.d.ts +3 -0
- package/build/constants/app.js +15 -6
- package/build/features/app/connectExpress/connectExpressStore.d.ts +11 -1
- package/build/features/app/connectExpress/connectExpressStore.js +199 -18
- package/build/features/app/individual/individualStore.js +2 -1
- package/build/features/app/terminal/terminalStore.d.ts +3 -0
- package/build/features/app/terminal/terminalStore.js +34 -1
- package/build/features/connectExpress/ConnectExpress.js +6 -3
- package/build/features/connectExpress/screens/AuthenticationList/AuthenticationList.js +5 -2
- package/build/features/connectExpress/screens/BusinessCountry/BusinessCountry.js +10 -5
- package/build/features/connectExpress/screens/CollectIndividualInfo/CollectIndividualInfo.js +3 -2
- package/build/features/connectExpress/screens/Email/Email.d.ts +5 -0
- package/build/features/connectExpress/screens/Email/Email.js +57 -0
- package/build/features/connectExpress/screens/Email/EmailField.d.ts +8 -0
- package/build/features/connectExpress/screens/Email/EmailField.js +52 -0
- package/build/features/connectExpress/screens/Email/index.d.ts +3 -0
- package/build/features/connectExpress/screens/Email/index.js +2 -0
- package/build/features/connectExpress/screens/Email/validation.d.ts +8 -0
- package/build/features/connectExpress/screens/Email/validation.js +4 -0
- package/build/features/connectExpress/screens/NIDMissed/NID.js +4 -2
- package/build/features/connectExpress/screens/OTP/OTP.js +15 -9
- package/build/features/connectExpress/screens/OTP/OTPInput.js +10 -4
- package/build/features/featuresScreens.js +5 -0
- package/build/features/terminal/screens/TerminalDeviceList/TerminalDeviceList.js +2 -1
- package/build/features/terminal/screens/shared/POSDeviceList.js +5 -5
- package/build/hooks/index.d.ts +1 -0
- package/build/hooks/index.js +1 -0
- package/build/hooks/useAppConfig.js +1 -1
- package/build/hooks/useCountry.d.ts +1 -0
- package/build/hooks/useCountry.js +3 -2
- package/build/hooks/useIsEmailAuth.d.ts +1 -0
- package/build/hooks/useIsEmailAuth.js +11 -0
- package/build/utils/common.js +3 -3
- package/build/utils/file.d.ts +1 -0
- package/build/utils/file.js +6 -0
- package/build/utils/index.d.ts +1 -0
- package/build/utils/index.js +1 -0
- package/build/utils/string.d.ts +2 -0
- package/build/utils/string.js +8 -0
- package/package.json +2 -2
|
@@ -15,7 +15,7 @@ import { useForm, FormProvider } from 'react-hook-form';
|
|
|
15
15
|
import { useTranslation } from 'react-i18next';
|
|
16
16
|
import Collapse from '@mui/material/Collapse';
|
|
17
17
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
18
|
-
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
18
|
+
import { useAppDispatch, useAppSelector, useIsEmailAuth } from '../../../../hooks';
|
|
19
19
|
import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
|
|
20
20
|
import { deepCopy, isKW, isSA, sendCustomEventToGTM } from '../../../../utils';
|
|
21
21
|
import { AuthForType } from '../../../../@types';
|
|
@@ -45,6 +45,7 @@ var AuthenticationList = function (_a) {
|
|
|
45
45
|
var _g = React.useState(false), isAddEntity = _g[0], setIsAddEntity = _g[1];
|
|
46
46
|
var otpData = data.otpData;
|
|
47
47
|
var startWithNID = otpData.authFor === AuthForType.NATIONAL_ID;
|
|
48
|
+
var startWithEmail = useIsEmailAuth();
|
|
48
49
|
React.useEffect(function () {
|
|
49
50
|
sendCustomEventToGTM({
|
|
50
51
|
event: 'Send Event',
|
|
@@ -83,7 +84,9 @@ var AuthenticationList = function (_a) {
|
|
|
83
84
|
methods.setValue('entityInfo', undefined, { shouldValidate: true });
|
|
84
85
|
return;
|
|
85
86
|
}
|
|
86
|
-
var screen =
|
|
87
|
+
var screen = startWithEmail ? 'CONNECT_EXPRESS_EMAIL_STEP' : 'CONNECT_EXPRESS_MOBILE_STEP';
|
|
88
|
+
if (startWithNID)
|
|
89
|
+
screen = isKW(code) ? 'CONNECT_EXPRESS_CIVIL_ID_STEP' : 'CONNECT_EXPRESS_NID_STEP';
|
|
87
90
|
dispatch(resetAuthenticationScreen());
|
|
88
91
|
dispatch(handlePrevScreenStep(screen));
|
|
89
92
|
};
|
|
@@ -53,7 +53,7 @@ import { ScreenContainer } from '../../../shared/Containers';
|
|
|
53
53
|
import BusinessCountry from '../../../shared/BusinessCountry';
|
|
54
54
|
import Button from '../../../shared/Button';
|
|
55
55
|
import Collapse from '../../../../components/Collapse';
|
|
56
|
-
import { findCountryByIso2, isKW, isOtherThanKWOrSA, sendCustomEventToGTM } from '../../../../utils';
|
|
56
|
+
import { findCountryByIso2, isKW, isEmailAuthEnabled, isOtherThanKWOrSA, sendCustomEventToGTM } from '../../../../utils';
|
|
57
57
|
import { handleNextScreenStep, handleSetCountryByIso2, settingsSelector } from '../../../../app/settings';
|
|
58
58
|
import { clearError, connectExpressSelector, setDefaultCountryCode, storeIsStartFromBusinessCountry, updateBusinessCountryAsync } from '../../../app/connectExpress/connectExpressStore';
|
|
59
59
|
var BusinessCountryScreen = function (_a) {
|
|
@@ -74,8 +74,9 @@ var BusinessCountryScreen = function (_a) {
|
|
|
74
74
|
}, [settingsData.businessCountry, settingsData.ipCountry]);
|
|
75
75
|
var onSelectCountry = function (iso2) { return __awaiter(void 0, void 0, void 0, function () {
|
|
76
76
|
var countryCode;
|
|
77
|
-
|
|
78
|
-
|
|
77
|
+
var _a;
|
|
78
|
+
return __generator(this, function (_b) {
|
|
79
|
+
switch (_b.label) {
|
|
79
80
|
case 0:
|
|
80
81
|
if (!iso2)
|
|
81
82
|
return [2];
|
|
@@ -90,11 +91,15 @@ var BusinessCountryScreen = function (_a) {
|
|
|
90
91
|
if (!data.leadId) return [3, 2];
|
|
91
92
|
return [4, dispatch(updateBusinessCountryAsync(iso2))];
|
|
92
93
|
case 1:
|
|
93
|
-
|
|
94
|
-
|
|
94
|
+
_b.sent();
|
|
95
|
+
_b.label = 2;
|
|
95
96
|
case 2:
|
|
96
97
|
if (countryCode)
|
|
97
98
|
dispatch(setDefaultCountryCode(countryCode));
|
|
99
|
+
if (isEmailAuthEnabled((_a = settingsData.appConfig.features) === null || _a === void 0 ? void 0 : _a.emailAuth, iso2)) {
|
|
100
|
+
dispatch(handleNextScreenStep('CONNECT_EXPRESS_EMAIL_STEP'));
|
|
101
|
+
return [2];
|
|
102
|
+
}
|
|
98
103
|
if (isOtherThanKWOrSA(iso2) || isKW(iso2)) {
|
|
99
104
|
dispatch(handleNextScreenStep('CONNECT_EXPRESS_MOBILE_STEP'));
|
|
100
105
|
return [2];
|
package/build/features/connectExpress/screens/CollectIndividualInfo/CollectIndividualInfo.js
CHANGED
|
@@ -17,7 +17,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
|
|
|
17
17
|
import { styled } from '@mui/material/styles';
|
|
18
18
|
import { useAppDispatch, useAppSelector, useExcludeReadOnlyFelids, useFormErrorAndUpdateReadOnly, useFormReadOnly, useSetFromDefaultValues } from '../../../../hooks';
|
|
19
19
|
import { AuthForType } from '../../../../@types';
|
|
20
|
-
import { useLanguage } from '../../../../hooks';
|
|
20
|
+
import { useLanguage, useIsEmailAuth } from '../../../../hooks';
|
|
21
21
|
import { deepCopy, isKW, sendCustomEventToGTM } from '../../../../utils';
|
|
22
22
|
import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
|
|
23
23
|
import Form from '../../../../components/Form';
|
|
@@ -45,6 +45,7 @@ var CollectIndividualInfo = function (_a) {
|
|
|
45
45
|
var t = useTranslation().t;
|
|
46
46
|
var isAr = useLanguage().isAr;
|
|
47
47
|
var individualData = data.individualData, otpData = data.otpData, responseData = data.responseData;
|
|
48
|
+
var startWithEmail = useIsEmailAuth();
|
|
48
49
|
var startWithNID = otpData.authFor === AuthForType.NATIONAL_ID;
|
|
49
50
|
var startWithNIDMissed = otpData.authFor === AuthForType.NATIONAL_ID_MISSED;
|
|
50
51
|
var contact = ((responseData === null || responseData === void 0 ? void 0 : responseData.leadData) || {}).contact;
|
|
@@ -82,7 +83,7 @@ var CollectIndividualInfo = function (_a) {
|
|
|
82
83
|
dispatch(resetIndividualScreen());
|
|
83
84
|
}
|
|
84
85
|
var code = (_a = settingsData.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2;
|
|
85
|
-
var screen = 'CONNECT_EXPRESS_MOBILE_STEP';
|
|
86
|
+
var screen = startWithEmail ? 'CONNECT_EXPRESS_EMAIL_STEP' : 'CONNECT_EXPRESS_MOBILE_STEP';
|
|
86
87
|
if (startWithNID) {
|
|
87
88
|
if (isKW(code))
|
|
88
89
|
screen = 'CONNECT_EXPRESS_CIVIL_ID_STEP';
|
|
@@ -0,0 +1,57 @@
|
|
|
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 { useTranslation } from 'react-i18next';
|
|
15
|
+
import { useForm, FormProvider } from 'react-hook-form';
|
|
16
|
+
import { styled } from '@mui/material/styles';
|
|
17
|
+
import { yupResolver } from '@hookform/resolvers/yup';
|
|
18
|
+
import { useAppDispatch, useLanguage, useAppSelector } from '../../../../hooks';
|
|
19
|
+
import { handleCurrentActiveScreen } from '../../../../app/settings';
|
|
20
|
+
import { clearError, connectExpressSelector, createEmailAuthAsync, resetStore } from '../../../app/connectExpress/connectExpressStore';
|
|
21
|
+
import Form from '../../../../components/Form';
|
|
22
|
+
import Button from '../../../shared/Button';
|
|
23
|
+
import { ScreenContainer } from '../../../shared/Containers';
|
|
24
|
+
import { deepCopy } from '../../../../utils';
|
|
25
|
+
import { EmailInfoValidation } from './validation';
|
|
26
|
+
import EmailField from './EmailField';
|
|
27
|
+
var FormStyled = styled(Form)(function () { return ({
|
|
28
|
+
display: 'flex',
|
|
29
|
+
flexDirection: 'column'
|
|
30
|
+
}); });
|
|
31
|
+
var Email = function (_a) {
|
|
32
|
+
var isAr = useLanguage().isAr;
|
|
33
|
+
var dispatch = useAppDispatch();
|
|
34
|
+
var t = useTranslation().t;
|
|
35
|
+
var _b = useAppSelector(connectExpressSelector), data = _b.data, loading = _b.loading, error = _b.error;
|
|
36
|
+
var methods = useForm({
|
|
37
|
+
resolver: yupResolver(EmailInfoValidation),
|
|
38
|
+
defaultValues: data.emailData,
|
|
39
|
+
mode: 'onChange'
|
|
40
|
+
});
|
|
41
|
+
React.useEffect(function () {
|
|
42
|
+
if (error)
|
|
43
|
+
dispatch(clearError());
|
|
44
|
+
}, [methods.formState.isValid]);
|
|
45
|
+
React.useEffect(function () {
|
|
46
|
+
dispatch(resetStore());
|
|
47
|
+
}, []);
|
|
48
|
+
var onSubmit = function (formData) {
|
|
49
|
+
dispatch(createEmailAuthAsync(deepCopy(formData)));
|
|
50
|
+
};
|
|
51
|
+
var onBackToCountryList = function () {
|
|
52
|
+
dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP'));
|
|
53
|
+
};
|
|
54
|
+
var disabled = !methods.formState.isValid;
|
|
55
|
+
return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(EmailField, { sx: { mb: 5, transition: 'mb 0.3s' } }), _jsx(Button, __assign({ loading: loading, isAr: isAr, onBackClicked: onBackToCountryList, disableBack: !data.isStartFromBusinessCountry, disabled: disabled, error: t(error || '') }, { children: t('next') }))] })) })) }));
|
|
56
|
+
};
|
|
57
|
+
export default React.memo(Email);
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
3
|
+
interface EmailFieldProps {
|
|
4
|
+
sx: SxProps<Theme> | undefined;
|
|
5
|
+
readOnly?: boolean;
|
|
6
|
+
}
|
|
7
|
+
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<EmailFieldProps & React.RefAttributes<unknown>>>;
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1,52 @@
|
|
|
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 { useTranslation } from 'react-i18next';
|
|
15
|
+
import { useController, useFormContext } from 'react-hook-form';
|
|
16
|
+
import Box from '@mui/material/Box';
|
|
17
|
+
import { styled, alpha } from '@mui/material/styles';
|
|
18
|
+
import Text from '../../../../components/Text';
|
|
19
|
+
import { MAX_EMAIL_LENGTH } from '../../../../constants';
|
|
20
|
+
import Input from '../../../shared/Input';
|
|
21
|
+
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
22
|
+
import { EndAdornment } from '../../../shared/EndAdornment';
|
|
23
|
+
var LabelContainerStyled = styled(Box)(function (_a) {
|
|
24
|
+
var theme = _a.theme;
|
|
25
|
+
return ({
|
|
26
|
+
display: 'flex',
|
|
27
|
+
justifyContent: 'space-between',
|
|
28
|
+
padding: theme.spacing(0, 2.5, 1.25, 2.5)
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
var InputLabelStyled = styled(Text)(function (_a) {
|
|
32
|
+
var theme = _a.theme;
|
|
33
|
+
return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
|
|
34
|
+
});
|
|
35
|
+
var EmailField = React.forwardRef(function (_a, ref) {
|
|
36
|
+
var _b;
|
|
37
|
+
var sx = _a.sx, readOnly = _a.readOnly;
|
|
38
|
+
var t = useTranslation().t;
|
|
39
|
+
var control = useFormContext().control;
|
|
40
|
+
var emailControl = useController({ control: control, name: 'email' });
|
|
41
|
+
var handleEmailChange = function (_a) {
|
|
42
|
+
var target = _a.target;
|
|
43
|
+
emailControl.field.onChange(target.value);
|
|
44
|
+
};
|
|
45
|
+
var clearEmail = function () {
|
|
46
|
+
emailControl.field.onChange('');
|
|
47
|
+
};
|
|
48
|
+
var emailValue = emailControl.field.value;
|
|
49
|
+
var error = (_b = emailControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
50
|
+
return (_jsxs(ScreenContainer, __assign({ ref: ref, sx: sx }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_email_lable') }) }), _jsx(Input, { type: 'email', readOnly: readOnly, inputProps: { maxLength: MAX_EMAIL_LENGTH }, onChange: handleEmailChange, value: emailValue, endAdornment: _jsx(EndAdornment, { value: emailValue, error: error, onClear: clearEmail }), placeholder: t('signup_email_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true })] })));
|
|
51
|
+
});
|
|
52
|
+
export default React.memo(EmailField);
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as yup from 'yup';
|
|
2
|
+
export declare const EmailInfoValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
3
|
+
email: 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
|
+
email: 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
|
+
email: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
8
|
+
}>>>;
|
|
@@ -16,7 +16,7 @@ import { styled } from '@mui/material/styles';
|
|
|
16
16
|
import { useForm, FormProvider } from 'react-hook-form';
|
|
17
17
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
18
18
|
import { NIDOtherCountryValidationSchema, NIDValidationSchema } from './validation';
|
|
19
|
-
import { useAppDispatch, useLanguage, useAppSelector } from '../../../../hooks';
|
|
19
|
+
import { useAppDispatch, useLanguage, useAppSelector, useIsEmailAuth } from '../../../../hooks';
|
|
20
20
|
import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
|
|
21
21
|
import { clearError, connectExpressSelector, createNIDNafathAuthIdentityAsync } from '../../../app/connectExpress/connectExpressStore';
|
|
22
22
|
import Form from '../../../../components/Form';
|
|
@@ -38,6 +38,7 @@ var NID = function (_a) {
|
|
|
38
38
|
var settingsData = useAppSelector(settingsSelector).data;
|
|
39
39
|
var _c = useAppSelector(connectExpressSelector), data = _c.data, loading = _c.loading, error = _c.error;
|
|
40
40
|
var isOtherCountry = React.useMemo(function () { return isOtherThanKWOrSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
|
|
41
|
+
var startWithEmail = useIsEmailAuth();
|
|
41
42
|
var methods = useForm({
|
|
42
43
|
resolver: yupResolver(isOtherCountry ? NIDOtherCountryValidationSchema : NIDValidationSchema),
|
|
43
44
|
defaultValues: data.nidData,
|
|
@@ -54,7 +55,8 @@ var NID = function (_a) {
|
|
|
54
55
|
setCollapse(flag);
|
|
55
56
|
};
|
|
56
57
|
var onBack = function () {
|
|
57
|
-
|
|
58
|
+
var screen = startWithEmail ? 'CONNECT_EXPRESS_EMAIL_STEP' : 'CONNECT_EXPRESS_MOBILE_STEP';
|
|
59
|
+
dispatch(handlePrevScreenStep(screen));
|
|
58
60
|
};
|
|
59
61
|
var disabled = !methods.formState.isValid;
|
|
60
62
|
return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(Collapse, __assign({ in: isOtherCountry }, { children: _jsx(DOB, { onDateClicked: handleCollapseOpenClose }) })), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(Button, __assign({ sx: !isOtherCountry ? { mt: 10 } : {}, loading: loading, isAr: isAr, onBackClicked: onBack, disabled: disabled, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
|
|
@@ -13,18 +13,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
import Box from '@mui/material/Box/Box';
|
|
14
14
|
import { styled } from '@mui/material/styles';
|
|
15
15
|
import * as React from 'react';
|
|
16
|
-
import { useTranslation } from 'react-i18next';
|
|
17
16
|
import Text from '../../../../components/Text';
|
|
18
|
-
import { clearError, connectExpressSelector, verifyMobileOtpAsync, resetOTPValue } from '../../../app/connectExpress/connectExpressStore';
|
|
17
|
+
import { clearError, connectExpressSelector, verifyMobileOtpAsync, verifyEmailOtpAsync, resetOTPValue } from '../../../app/connectExpress/connectExpressStore';
|
|
19
18
|
import Button from '../../../shared/Button';
|
|
20
19
|
import { ScreenContainer } from '../../../shared/Containers';
|
|
21
|
-
import { useAppDispatch, useAppSelector, useSanitizedTranslation } from '../../../../hooks';
|
|
20
|
+
import { useAppDispatch, useAppSelector, useSanitizedTranslation, useIsEmailAuth } from '../../../../hooks';
|
|
22
21
|
import { handlePrevScreenStep } from '../../../../app/settings';
|
|
23
22
|
import { useLanguage } from '../../../../hooks';
|
|
24
23
|
import { useForm, FormProvider } from 'react-hook-form';
|
|
25
24
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
26
25
|
import Form from '../../../../components/Form';
|
|
27
|
-
import { maskPhone, deepCopy, sendCustomEventToGTM } from '../../../../utils';
|
|
26
|
+
import { maskPhone, deepCopy, sendCustomEventToGTM, maskEmail } from '../../../../utils';
|
|
28
27
|
import { OTPValidation } from './validation';
|
|
29
28
|
import OTPInput from './OTPInput';
|
|
30
29
|
var OTPTitleContainerStyled = styled(Box)(function (_a) {
|
|
@@ -50,9 +49,9 @@ var OTP = function () {
|
|
|
50
49
|
var _a;
|
|
51
50
|
var dispatch = useAppDispatch();
|
|
52
51
|
var _b = useAppSelector(connectExpressSelector), data = _b.data, loading = _b.loading, error = _b.error;
|
|
53
|
-
var t = useTranslation().t;
|
|
54
52
|
var st = useSanitizedTranslation();
|
|
55
53
|
var isAr = useLanguage().isAr;
|
|
54
|
+
var isEmailFlow = useIsEmailAuth();
|
|
56
55
|
var methods = useForm({
|
|
57
56
|
resolver: yupResolver(OTPValidation),
|
|
58
57
|
defaultValues: data.otpData,
|
|
@@ -73,14 +72,21 @@ var OTP = function () {
|
|
|
73
72
|
};
|
|
74
73
|
}, []);
|
|
75
74
|
var onSubmit = function (formData) {
|
|
76
|
-
|
|
75
|
+
if (isEmailFlow) {
|
|
76
|
+
dispatch(verifyEmailOtpAsync(deepCopy(formData)));
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
dispatch(verifyMobileOtpAsync(deepCopy(formData)));
|
|
80
|
+
}
|
|
77
81
|
};
|
|
78
82
|
var onBack = function () {
|
|
79
|
-
|
|
83
|
+
var screen = isEmailFlow ? 'CONNECT_EXPRESS_EMAIL_STEP' : 'CONNECT_EXPRESS_MOBILE_STEP';
|
|
84
|
+
dispatch(handlePrevScreenStep(screen));
|
|
80
85
|
};
|
|
81
86
|
var disabled = !methods.formState.isValid;
|
|
82
87
|
var phone = data.mobileData.mobile ? ((_a = data.mobileData.countryCode) === null || _a === void 0 ? void 0 : _a.idd_prefix) + data.mobileData.mobile : '';
|
|
83
|
-
var
|
|
84
|
-
|
|
88
|
+
var contactInfo = isEmailFlow ? maskEmail(data.emailData.email) : maskPhone(phone);
|
|
89
|
+
var title = isEmailFlow ? st('otp_email_sent_title') : st('ide_opt_sent_title');
|
|
90
|
+
return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? st('ide_otp_waiting_title') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: contactInfo }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: st(error || '') }, { children: st('next') }))] })) })) }));
|
|
85
91
|
};
|
|
86
92
|
export default React.memo(OTP);
|
|
@@ -17,8 +17,8 @@ import Box from '@mui/material/Box/Box';
|
|
|
17
17
|
import { styled } from '@mui/material/styles';
|
|
18
18
|
import OTPField from '../../../shared/OTP';
|
|
19
19
|
import { DEFAULT_TIMER_VALUE } from '../../../../constants';
|
|
20
|
-
import { resendMobileAuthOTP, connectExpressSelector, clearError } from '../../../app/connectExpress/connectExpressStore';
|
|
21
|
-
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
20
|
+
import { resendMobileAuthOTP, resendEmailAuthOTP, connectExpressSelector, clearError } from '../../../app/connectExpress/connectExpressStore';
|
|
21
|
+
import { useAppDispatch, useAppSelector, useIsEmailAuth } from '../../../../hooks';
|
|
22
22
|
import { sendCustomEventToGTM } from '../../../../utils';
|
|
23
23
|
var BoxStyled = styled(Box)(function (_a) {
|
|
24
24
|
var theme = _a.theme;
|
|
@@ -34,7 +34,8 @@ var OTPInput = function (_a) {
|
|
|
34
34
|
var dispatch = useAppDispatch();
|
|
35
35
|
var otpControl = useController({ name: 'otp', control: control });
|
|
36
36
|
var _c = useAppSelector(connectExpressSelector), data = _c.data, error = _c.error;
|
|
37
|
-
var mobileData = data.mobileData;
|
|
37
|
+
var mobileData = data.mobileData, emailData = data.emailData;
|
|
38
|
+
var isEmailFlow = useIsEmailAuth();
|
|
38
39
|
var sendEventAskAnotherOTP = function () {
|
|
39
40
|
sendCustomEventToGTM({
|
|
40
41
|
event: 'Send Event',
|
|
@@ -51,7 +52,12 @@ var OTPInput = function (_a) {
|
|
|
51
52
|
if (otpControl.field.value)
|
|
52
53
|
setValue('otp', '', { shouldValidate: true });
|
|
53
54
|
sendEventAskAnotherOTP();
|
|
54
|
-
|
|
55
|
+
if (isEmailFlow) {
|
|
56
|
+
dispatch(resendEmailAuthOTP(emailData));
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
dispatch(resendMobileAuthOTP(mobileData));
|
|
60
|
+
}
|
|
55
61
|
};
|
|
56
62
|
var otpValue = otpControl.field.value;
|
|
57
63
|
return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
|
|
@@ -17,6 +17,7 @@ import OTPVerifySecurityError from './shared/OTPVerifySecurityError';
|
|
|
17
17
|
import OTPSessionExpired from './connect/screens/OTPSessionExpired';
|
|
18
18
|
import ConnectExpressBusinessCountry from './connectExpress/screens/BusinessCountry/BusinessCountry';
|
|
19
19
|
import ConnectExpressMobileScreen from './connectExpress/screens/Mobile';
|
|
20
|
+
import ConnectExpressEmailScreen from './connectExpress/screens/Email';
|
|
20
21
|
import ConnectExpressNIDScreen from './connectExpress/screens/NID';
|
|
21
22
|
import ConnectExpressVerifyNafathScreen from './connectExpress/screens/VerifyNafath';
|
|
22
23
|
import ConnectExpressCivilIDScreen from './connectExpress/screens/CivilID';
|
|
@@ -261,6 +262,10 @@ export var connectExpressFeatureScreens = [
|
|
|
261
262
|
name: 'CONNECT_EXPRESS_MOBILE_STEP',
|
|
262
263
|
element: ConnectExpressMobileScreen
|
|
263
264
|
},
|
|
265
|
+
{
|
|
266
|
+
name: 'CONNECT_EXPRESS_EMAIL_STEP',
|
|
267
|
+
element: ConnectExpressEmailScreen
|
|
268
|
+
},
|
|
264
269
|
{
|
|
265
270
|
name: 'CONNECT_EXPRESS_OTP_STEP',
|
|
266
271
|
element: ConnectExpressOTPScreen
|
|
@@ -56,7 +56,7 @@ import Button from '../../../../components/Button';
|
|
|
56
56
|
import Loader from '../../../../components/Loader';
|
|
57
57
|
import Warning from '../../../../components/Warning';
|
|
58
58
|
import Box from '@mui/material/Box';
|
|
59
|
-
import { clearError, resetTerminalLinkResponse, retrieveBoardDetails, retrieveBoardStatus, retrievePOSDevices, storeSelectedTerminal, terminalSelector } from '../../../app/terminal/terminalStore';
|
|
59
|
+
import { clearError, resetTerminalLinkResponse, retrieveBoardDetails, retrieveBoardStatus, retrievePOSDevices, retrieveTerminalPlatformBrandLogo, storeSelectedTerminal, terminalSelector } from '../../../app/terminal/terminalStore';
|
|
60
60
|
import { Header, Container, TextTypography } from '../shared';
|
|
61
61
|
import DeviceList from './DeviceList';
|
|
62
62
|
var TerminalDeviceList = function () {
|
|
@@ -100,6 +100,7 @@ var TerminalDeviceList = function () {
|
|
|
100
100
|
_a.label = 1;
|
|
101
101
|
case 1:
|
|
102
102
|
_a.trys.push([1, 3, , 4]);
|
|
103
|
+
dispatch(retrieveTerminalPlatformBrandLogo());
|
|
103
104
|
return [4, dispatch(retrievePOSDevices()).unwrap()];
|
|
104
105
|
case 2:
|
|
105
106
|
_a.sent();
|
|
@@ -9,14 +9,14 @@ import { useAppSelector } from '../../../../hooks';
|
|
|
9
9
|
import { terminalSelector } from '../../../../features/app/terminal/terminalStore';
|
|
10
10
|
import { useTheme } from '@mui/material/styles';
|
|
11
11
|
var POSDeviceList = function (_a) {
|
|
12
|
-
var _b, _c, _d, _e, _f, _g
|
|
13
|
-
var posDevices = _a.posDevices, onClick = _a.onClick, selectedPOS = _a.selectedPOS,
|
|
12
|
+
var _b, _c, _d, _e, _f, _g;
|
|
13
|
+
var posDevices = _a.posDevices, onClick = _a.onClick, selectedPOS = _a.selectedPOS, _h = _a.select, select = _h === void 0 ? true : _h, loading = _a.loading;
|
|
14
14
|
var t = useTranslation().t;
|
|
15
15
|
var typography = useTheme().typography;
|
|
16
16
|
var responseData = useAppSelector(terminalSelector).data.responseData;
|
|
17
|
-
var
|
|
18
|
-
var platformImage =
|
|
19
|
-
var platformName = (
|
|
17
|
+
var _j = responseData || {}, terminalData = _j.terminalData, terminalPlatformBrandLogo = _j.terminalPlatformBrandLogo;
|
|
18
|
+
var platformImage = terminalPlatformBrandLogo || ICONS_NAMES.platform_image;
|
|
19
|
+
var platformName = (_g = (_f = (_e = (_d = (_c = (_b = terminalData === null || terminalData === void 0 ? void 0 : terminalData.list) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.platform) === null || _d === void 0 ? void 0 : _d.brand) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.text;
|
|
20
20
|
var getEndComponent = function (pos) {
|
|
21
21
|
if (loading && (selectedPOS === null || selectedPOS === void 0 ? void 0 : selectedPOS.id) === (pos === null || pos === void 0 ? void 0 : pos.id))
|
|
22
22
|
return _jsx(Loader, { innerColor: 'black', outerColor: 'black', size: 10, style: { height: 24, width: 24 }, toggleAnimation: !!loading });
|
package/build/hooks/index.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export * from './useSetFromDefaultValues';
|
|
|
15
15
|
export * from './useCountUp';
|
|
16
16
|
export * from './useCountDown';
|
|
17
17
|
export * from './useCountry';
|
|
18
|
+
export * from './useIsEmailAuth';
|
|
18
19
|
export * from './useVerifyToken';
|
|
19
20
|
export * from './useFormReadOnly';
|
|
20
21
|
export * from './useDataNoneEditable';
|
package/build/hooks/index.js
CHANGED
|
@@ -15,6 +15,7 @@ export * from './useSetFromDefaultValues';
|
|
|
15
15
|
export * from './useCountUp';
|
|
16
16
|
export * from './useCountDown';
|
|
17
17
|
export * from './useCountry';
|
|
18
|
+
export * from './useIsEmailAuth';
|
|
18
19
|
export * from './useVerifyToken';
|
|
19
20
|
export * from './useFormReadOnly';
|
|
20
21
|
export * from './useDataNoneEditable';
|
|
@@ -31,7 +31,7 @@ export var useAppConfig = function (_a) {
|
|
|
31
31
|
var data = useAppSelector(settingsSelector).data;
|
|
32
32
|
var setAppConfig = function () {
|
|
33
33
|
if (!disableSettingFetching) {
|
|
34
|
-
dispatch(handleSetAppConfig(__assign({ appInfo: appInfo, publicKey: publicKey, scope: scope === null || scope === void 0 ? void 0 : scope.toLowerCase(), mode: mode !== null && mode !== void 0 ? mode : 'page', showBoard: showBoard !== null && showBoard !== void 0 ? showBoard : true, features: __assign({ merchantLogo: true, switchLanguage: true, overlay: true, loaderOverlay: true }, features) }, rest)));
|
|
34
|
+
dispatch(handleSetAppConfig(__assign({ appInfo: appInfo, publicKey: publicKey, scope: scope === null || scope === void 0 ? void 0 : scope.toLowerCase(), mode: mode !== null && mode !== void 0 ? mode : 'page', showBoard: showBoard !== null && showBoard !== void 0 ? showBoard : true, features: __assign({ merchantLogo: true, switchLanguage: true, overlay: true, loaderOverlay: true, emailAuth: true }, features) }, rest)));
|
|
35
35
|
}
|
|
36
36
|
dispatch(handleActiveFlowScreens(navigation));
|
|
37
37
|
};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { isKW, isSA } from '../utils';
|
|
1
|
+
import { isKW, isSA, isQA } from '../utils';
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
export var useCountry = function (code) {
|
|
4
4
|
var isKuwait = useMemo(function () { return isKW(code); }, [code]);
|
|
5
5
|
var isSaudi = useMemo(function () { return isSA(code); }, [code]);
|
|
6
|
+
var isQatar = useMemo(function () { return isQA(code); }, [code]);
|
|
6
7
|
var isOther = useMemo(function () { return !isKW(code) && !isSA(code); }, [code]);
|
|
7
|
-
return { isKuwait: isKuwait, isSaudi: isSaudi, isOther: isOther };
|
|
8
|
+
return { isKuwait: isKuwait, isSaudi: isSaudi, isQatar: isQatar, isOther: isOther };
|
|
8
9
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useIsEmailAuth: () => boolean | undefined;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { useAppSelector } from './useAppSelector';
|
|
3
|
+
import { settingsSelector } from '../app/settings';
|
|
4
|
+
import { isEmailAuthEnabled } from '../utils';
|
|
5
|
+
export var useIsEmailAuth = function () {
|
|
6
|
+
var _a, _b;
|
|
7
|
+
var settingsData = useAppSelector(settingsSelector).data;
|
|
8
|
+
var emailAuth = (_a = settingsData.appConfig.features) === null || _a === void 0 ? void 0 : _a.emailAuth;
|
|
9
|
+
var countryIso2 = (_b = settingsData.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2;
|
|
10
|
+
return useMemo(function () { return isEmailAuthEnabled(emailAuth, countryIso2); }, [emailAuth, countryIso2]);
|
|
11
|
+
};
|
package/build/utils/common.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { axiosInstance } from '../api';
|
|
2
|
-
import { ENDPOINT_PATHS,
|
|
2
|
+
import { ENDPOINT_PATHS, CONNECT_SANDBOX_URL, CONNECT_PROD_URL } from '../constants';
|
|
3
3
|
import { objectHasValues } from './object';
|
|
4
4
|
import { isDisasterRecoveryEnv, isSA } from './string';
|
|
5
5
|
export var sleep = function (milliseconds) {
|
|
@@ -17,7 +17,7 @@ export var setBaseUrl = function (publicKey, region) {
|
|
|
17
17
|
var isProd = publicKey.includes('pk_live');
|
|
18
18
|
var _a = region.split('-'), country = _a[0], envType = _a[1];
|
|
19
19
|
if (!isProd) {
|
|
20
|
-
axiosInstance.defaults.baseURL = ENDPOINT_PATHS.
|
|
20
|
+
axiosInstance.defaults.baseURL = ENDPOINT_PATHS.SANDBOX_BASE_URL;
|
|
21
21
|
return;
|
|
22
22
|
}
|
|
23
23
|
if (isSA(country)) {
|
|
@@ -44,7 +44,7 @@ export var updateLocationUrlWithCountry = function (countryIso2) {
|
|
|
44
44
|
window.history.replaceState({}, '', newUrl);
|
|
45
45
|
};
|
|
46
46
|
export var openConnect = function (pk, countryCode) {
|
|
47
|
-
var newUrl = new URL(pk.includes('pk_live') ? CONNECT_PROD_URL :
|
|
47
|
+
var newUrl = new URL(pk.includes('pk_live') ? CONNECT_PROD_URL : CONNECT_SANDBOX_URL);
|
|
48
48
|
if (countryCode) {
|
|
49
49
|
newUrl.pathname = "/".concat(countryCode.toLowerCase());
|
|
50
50
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const createImageObjectURL: (blob: Blob) => string;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export var createImageObjectURL = function (blob) {
|
|
2
|
+
var _a;
|
|
3
|
+
if (!(blob === null || blob === void 0 ? void 0 : blob.size) || !((_a = blob === null || blob === void 0 ? void 0 : blob.type) === null || _a === void 0 ? void 0 : _a.startsWith('image/')))
|
|
4
|
+
return '';
|
|
5
|
+
return URL.createObjectURL(blob);
|
|
6
|
+
};
|
package/build/utils/index.d.ts
CHANGED
package/build/utils/index.js
CHANGED
package/build/utils/string.d.ts
CHANGED
|
@@ -48,6 +48,8 @@ export declare const getEighteenYearsAgo: () => string;
|
|
|
48
48
|
export declare const isKW: (flag: string) => boolean;
|
|
49
49
|
export declare const isSA: (flag: string | undefined) => boolean;
|
|
50
50
|
export declare const isOtherThanKWOrSA: (flag: string) => boolean;
|
|
51
|
+
export declare const isQA: (flag: string | undefined) => boolean;
|
|
52
|
+
export declare const isEmailAuthEnabled: (emailAuth: boolean | undefined, countryIso2: string | undefined) => boolean | undefined;
|
|
51
53
|
export declare const isKWOrSA: (flag: string) => boolean;
|
|
52
54
|
export declare const isLinkedIn: (flag: string) => boolean;
|
|
53
55
|
export declare const isTwitter: (flag: string) => boolean;
|
package/build/utils/string.js
CHANGED
|
@@ -224,6 +224,14 @@ export var isSA = function (flag) {
|
|
|
224
224
|
export var isOtherThanKWOrSA = function (flag) {
|
|
225
225
|
return !isKW(flag) && !isSA(flag);
|
|
226
226
|
};
|
|
227
|
+
export var isQA = function (flag) {
|
|
228
|
+
if (!flag)
|
|
229
|
+
return false;
|
|
230
|
+
return ['qa', 'qat'].includes(flag.toLowerCase());
|
|
231
|
+
};
|
|
232
|
+
export var isEmailAuthEnabled = function (emailAuth, countryIso2) {
|
|
233
|
+
return emailAuth && isQA(countryIso2);
|
|
234
|
+
};
|
|
227
235
|
export var isKWOrSA = function (flag) {
|
|
228
236
|
return isKW(flag) || isSA(flag);
|
|
229
237
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/auth-jsconnect",
|
|
3
|
-
"version": "2.12.8-
|
|
3
|
+
"version": "2.12.8-sandbox",
|
|
4
4
|
"description": "connect library, auth",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "build/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"copy:files": "copyfiles -u 1 src/**/*.css build/",
|
|
22
22
|
"tsc:alias": "tsc-alias -p tsconfig.json",
|
|
23
23
|
"ts:build": "rm -rf build && tsc -p tsconfig.json && tsc-alias -p tsconfig.json && yarn copy:files",
|
|
24
|
-
"push": "npm publish --access public --tag
|
|
24
|
+
"push": "npm publish --access public --tag sandbox"
|
|
25
25
|
},
|
|
26
26
|
"keywords": [],
|
|
27
27
|
"author": {
|