@tap-payments/auth-jsconnect 1.1.5-test → 1.1.7-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/README.md +2 -2
- package/build/@types/app.d.ts +2 -1
- package/build/@types/form.d.ts +3 -0
- package/build/@types/redux.d.ts +0 -1
- package/build/api/account.d.ts +1 -2
- package/build/api/account.js +7 -3
- package/build/api/axios.d.ts +1 -0
- package/build/api/axios.js +3 -0
- package/build/api/board.d.ts +25 -0
- package/build/api/board.js +49 -0
- package/build/api/brand.d.ts +7 -0
- package/build/api/brand.js +40 -0
- package/build/api/entity.js +2 -2
- package/build/api/index.d.ts +21 -7
- package/build/api/index.js +9 -3
- package/build/api/individual.d.ts +25 -2
- package/build/api/individual.js +1 -5
- package/build/api/lead.d.ts +1 -5
- package/build/api/lead.js +10 -5
- package/build/api/user.d.ts +8 -0
- package/build/api/user.js +12 -0
- 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/assets/locales/ar.json +2 -1
- package/build/assets/locales/en.json +2 -1
- package/build/components/AnimationFlow/Loader.js +17 -9
- package/build/components/FileInput/DragAndDrop.js +1 -1
- package/build/constants/api.d.ts +4 -1
- package/build/constants/api.js +14 -8
- package/build/constants/app.d.ts +10 -1
- package/build/constants/app.js +35 -1
- package/build/constants/validation.d.ts +1 -0
- package/build/constants/validation.js +2 -1
- package/build/features/app/bank/bankStore.d.ts +3 -2
- package/build/features/app/bank/bankStore.js +45 -36
- package/build/features/app/business/businessStore.d.ts +6 -3
- package/build/features/app/business/businessStore.js +204 -125
- package/build/features/app/connect/connectStore.d.ts +2 -1
- package/build/features/app/connect/connectStore.js +84 -62
- package/build/features/app/individual/individualStore.d.ts +3 -10
- package/build/features/app/individual/individualStore.js +69 -93
- package/build/features/app/password/passwordStore.d.ts +7 -5
- package/build/features/app/password/passwordStore.js +70 -54
- package/build/features/app/signIn/signInStore.d.ts +33 -0
- package/build/features/app/signIn/signInStore.js +390 -0
- package/build/features/app/tax/taxStore.d.ts +2 -1
- package/build/features/app/tax/taxStore.js +44 -39
- package/build/features/bank/screens/Success/Success.js +2 -2
- package/build/features/business/screens/Activities/ActivitiesList.d.ts +1 -1
- package/build/features/business/screens/Customers/CustomerLocations.d.ts +2 -2
- package/build/features/connect/screens/Merchant/BrandName.js +2 -6
- package/build/features/connect/screens/Merchant/validation.js +1 -1
- package/build/features/featuresScreens.d.ts +1 -0
- package/build/features/featuresScreens.js +22 -0
- package/build/features/individual/screens/Success/Success.js +2 -2
- package/build/features/password/Password.js +2 -2
- package/build/features/password/screens/Success/Success.js +2 -2
- package/build/features/shared/UploadFile/UploadFile.js +8 -7
- package/build/features/signIn/SignIn.d.ts +7 -0
- package/build/features/signIn/SignIn.js +49 -0
- package/build/features/signIn/index.d.ts +1 -0
- package/build/features/signIn/index.js +1 -0
- package/build/features/signIn/screens/Email/Email.d.ts +5 -0
- package/build/features/signIn/screens/Email/Email.js +95 -0
- package/build/features/signIn/screens/Email/EmailField.d.ts +5 -0
- package/build/features/signIn/screens/Email/EmailField.js +55 -0
- package/build/features/signIn/screens/Email/index.d.ts +3 -0
- package/build/features/signIn/screens/Email/index.js +2 -0
- package/build/features/signIn/screens/Email/validation.d.ts +8 -0
- package/build/features/signIn/screens/Email/validation.js +5 -0
- package/build/features/signIn/screens/Mobile/Mobile.d.ts +5 -0
- package/build/features/signIn/screens/Mobile/Mobile.js +106 -0
- package/build/features/signIn/screens/Mobile/MobileNumber.d.ts +11 -0
- package/build/features/signIn/screens/Mobile/MobileNumber.js +151 -0
- package/build/features/signIn/screens/Mobile/index.d.ts +3 -0
- package/build/features/signIn/screens/Mobile/index.js +2 -0
- package/build/features/signIn/screens/Mobile/validation.d.ts +8 -0
- package/build/features/signIn/screens/Mobile/validation.js +28 -0
- package/build/features/signIn/screens/OTP/OTP.d.ts +5 -0
- package/build/features/signIn/screens/OTP/OTP.js +80 -0
- package/build/features/signIn/screens/OTP/OTPInput.d.ts +5 -0
- package/build/features/signIn/screens/OTP/OTPInput.js +53 -0
- package/build/features/signIn/screens/OTP/index.d.ts +3 -0
- package/build/features/signIn/screens/OTP/index.js +2 -0
- package/build/features/signIn/screens/OTP/validation.d.ts +8 -0
- package/build/features/signIn/screens/OTP/validation.js +4 -0
- package/build/features/signIn/screens/Password/Password.d.ts +5 -0
- package/build/features/signIn/screens/Password/Password.js +54 -0
- package/build/features/signIn/screens/Password/PasswordInput.d.ts +5 -0
- package/build/features/signIn/screens/Password/PasswordInput.js +28 -0
- package/build/features/signIn/screens/Password/index.d.ts +3 -0
- package/build/features/signIn/screens/Password/index.js +2 -0
- package/build/features/signIn/screens/Password/validation.d.ts +8 -0
- package/build/features/signIn/screens/Password/validation.js +4 -0
- package/build/features/tax/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +1 -1
- package/build/hooks/useAppDispatch.d.ts +1 -0
- package/build/index.css +1 -0
- package/build/index.d.ts +3 -2
- package/build/index.js +5 -2
- package/build/utils/string.d.ts +3 -1
- package/build/utils/string.js +11 -2
- package/package.json +1 -1
|
@@ -0,0 +1,151 @@
|
|
|
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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import Box from '@mui/material/Box';
|
|
26
|
+
import { useTranslation } from 'react-i18next';
|
|
27
|
+
import { useController, useFormContext } from 'react-hook-form';
|
|
28
|
+
import { styled, alpha } from '@mui/material/styles';
|
|
29
|
+
import Text from '../../../../components/Text';
|
|
30
|
+
import Collapse from '../../../../components/Collapse';
|
|
31
|
+
import ClearIcon from '../../../shared/ClearIcon';
|
|
32
|
+
import CheckIcon from '../../../shared/CheckIcon';
|
|
33
|
+
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
34
|
+
import { signInSelector } from '../../../app/signIn/signInStore';
|
|
35
|
+
import ExpandIcon from '../../../../components/ExpandIcon';
|
|
36
|
+
import Input from '../../../shared/Input';
|
|
37
|
+
import SimpleList from '../../../../components/SimpleList';
|
|
38
|
+
import { removeAllCharsFromNumber } from '../../../../utils';
|
|
39
|
+
import { useLanguage, useAppSelector } from '../../../../hooks';
|
|
40
|
+
import Search from '../../../shared/Search';
|
|
41
|
+
var LabelContainerStyled = styled(Box)(function (_a) {
|
|
42
|
+
var theme = _a.theme;
|
|
43
|
+
return ({
|
|
44
|
+
display: 'flex',
|
|
45
|
+
justifyContent: 'space-between',
|
|
46
|
+
padding: theme.spacing(0, 2.5, 1.25, 2.5)
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
var CountryItemContainer = styled(Box)(function () { return ({
|
|
50
|
+
display: 'flex'
|
|
51
|
+
}); });
|
|
52
|
+
var CountryCodeText = styled(Text, {
|
|
53
|
+
shouldForwardProp: function (prop) { return prop !== 'isSelected'; }
|
|
54
|
+
})(function (_a) {
|
|
55
|
+
var theme = _a.theme, isSelected = _a.isSelected;
|
|
56
|
+
return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { width: theme.spacing(10), textAlign: 'start', fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
|
|
57
|
+
});
|
|
58
|
+
var CountryNameText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
|
|
59
|
+
var theme = _a.theme, isSelected = _a.isSelected;
|
|
60
|
+
return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
|
|
61
|
+
});
|
|
62
|
+
var CountryCodeStyled = styled(Text)(function (_a) {
|
|
63
|
+
var theme = _a.theme;
|
|
64
|
+
return (__assign(__assign({ cursor: 'pointer' }, theme.typography.body2), { fontWeight: theme.typography.fontWeightRegular, display: 'flex', alignItems: 'center', minWidth: theme.spacing(8.75) }));
|
|
65
|
+
});
|
|
66
|
+
var InputLabelStyled = styled(Text)(function (_a) {
|
|
67
|
+
var theme = _a.theme;
|
|
68
|
+
return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
|
|
69
|
+
});
|
|
70
|
+
var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
|
|
71
|
+
var theme = _a.theme;
|
|
72
|
+
return ({
|
|
73
|
+
marginInlineStart: theme.spacing(1)
|
|
74
|
+
});
|
|
75
|
+
});
|
|
76
|
+
var InputStyled = styled(Input)(function () { return ({
|
|
77
|
+
direction: 'ltr',
|
|
78
|
+
'& .MuiInputBase-input': {
|
|
79
|
+
cursor: 'auto'
|
|
80
|
+
}
|
|
81
|
+
}); });
|
|
82
|
+
var MobileNumber = React.forwardRef(function (_a, ref) {
|
|
83
|
+
var _b, _c, _d;
|
|
84
|
+
var countries = _a.countries, rest = __rest(_a, ["countries"]);
|
|
85
|
+
var _e = React.useState(countries || []), countriesCode = _e[0], setCountries = _e[1];
|
|
86
|
+
var _f = React.useState(null), anchorEl = _f[0], setAnchorEl = _f[1];
|
|
87
|
+
var t = useTranslation().t;
|
|
88
|
+
var isAr = useLanguage().isAr;
|
|
89
|
+
var _g = useFormContext(), control = _g.control, setValue = _g.setValue;
|
|
90
|
+
var loading = useAppSelector(signInSelector).loading;
|
|
91
|
+
var phoneControl = useController({ name: 'mobile', control: control });
|
|
92
|
+
var countryCodeControl = useController({ name: 'countryCode', control: control });
|
|
93
|
+
var countryCodeValue = countryCodeControl.field.value;
|
|
94
|
+
var mobileValue = phoneControl.field.value || '';
|
|
95
|
+
var countryName = (isAr ? (_b = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _c === void 0 ? void 0 : _c.english) || '';
|
|
96
|
+
var error = !!mobileValue ? (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message : '';
|
|
97
|
+
var isSA = countryCodeValue.iso2 === 'SA';
|
|
98
|
+
var mobileLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits;
|
|
99
|
+
var isStartsWith5 = mobileValue.startsWith('5');
|
|
100
|
+
var requiredLen = isSA && isStartsWith5 ? mobileLen - 1 : mobileLen;
|
|
101
|
+
React.useEffect(function () {
|
|
102
|
+
if (mobileValue)
|
|
103
|
+
setValue('mobile', mobileValue, { shouldValidate: true });
|
|
104
|
+
}, []);
|
|
105
|
+
var onPhoneNumberChange = function (_a) {
|
|
106
|
+
var target = _a.target;
|
|
107
|
+
var value = removeAllCharsFromNumber(target.value);
|
|
108
|
+
phoneControl.field.onChange(value);
|
|
109
|
+
};
|
|
110
|
+
var clearMobileNumber = function () {
|
|
111
|
+
phoneControl.field.onChange('');
|
|
112
|
+
};
|
|
113
|
+
var onCloseCountryList = function () {
|
|
114
|
+
var _a;
|
|
115
|
+
if (anchorEl) {
|
|
116
|
+
setAnchorEl(null);
|
|
117
|
+
(_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
|
|
118
|
+
}
|
|
119
|
+
setCountries(countries);
|
|
120
|
+
};
|
|
121
|
+
var toggleCountryList = function () {
|
|
122
|
+
var _a, _b;
|
|
123
|
+
if (anchorEl) {
|
|
124
|
+
setAnchorEl(null);
|
|
125
|
+
(_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
|
|
126
|
+
setCountries(countries);
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
(_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
|
|
130
|
+
setAnchorEl(true);
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
var onSelectItem = function (country) {
|
|
134
|
+
onCloseCountryList();
|
|
135
|
+
setValue('mobile', '');
|
|
136
|
+
countryCodeControl.field.onChange(country);
|
|
137
|
+
};
|
|
138
|
+
var handleSearch = function (value) {
|
|
139
|
+
var filteredCountries = countries.filter(function (country) {
|
|
140
|
+
return country.idd_prefix.toString().toLowerCase().startsWith(value.replace('+', '').toLowerCase()) ||
|
|
141
|
+
country.capital.toLowerCase().startsWith(value.toLowerCase()) ||
|
|
142
|
+
country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
|
|
143
|
+
country.name.english.toLowerCase().startsWith(value.toLowerCase());
|
|
144
|
+
});
|
|
145
|
+
setCountries(filteredCountries);
|
|
146
|
+
};
|
|
147
|
+
return (_jsxs(ScreenContainer, __assign({ ref: ref, sx: { minHeight: mobileValue ? '133px' : '0px' } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', readOnly: !!anchorEl, required: true, onClick: onCloseCountryList, onChange: onPhoneNumberChange, onEnterPressed: function (e) { return loading && e.preventDefault(); }, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: !anchorEl ? error && t(error, { length: requiredLen, number: '05|5' }) : undefined }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
|
|
148
|
+
return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
|
|
149
|
+
} })] }))] })));
|
|
150
|
+
});
|
|
151
|
+
export default React.memo(MobileNumber);
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as yup from 'yup';
|
|
2
|
+
export declare const PhoneValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
3
|
+
mobile: 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
|
+
mobile: 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
|
+
mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
8
|
+
}>>>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as yup from 'yup';
|
|
2
|
+
export var PhoneValidationSchema = yup.object().shape({
|
|
3
|
+
mobile: yup
|
|
4
|
+
.string()
|
|
5
|
+
.test({
|
|
6
|
+
test: function (value) {
|
|
7
|
+
var countryCode = this.parent.countryCode;
|
|
8
|
+
var isSA = countryCode.iso2 === 'SA';
|
|
9
|
+
var digits = countryCode.digits;
|
|
10
|
+
var mobileValue = value || '';
|
|
11
|
+
var valueLen = mobileValue.length;
|
|
12
|
+
var isNumber = mobileValue.match(/^[0-9]/g);
|
|
13
|
+
if (!isNumber)
|
|
14
|
+
return this.createError({ message: 'enter_valid_mobile_number' });
|
|
15
|
+
var isStartWithZero = mobileValue.startsWith('05');
|
|
16
|
+
var isStartWith5 = mobileValue.startsWith('5');
|
|
17
|
+
var isSaudiNumber = isStartWith5 || isStartWithZero;
|
|
18
|
+
if (isSA) {
|
|
19
|
+
if (!isSaudiNumber)
|
|
20
|
+
return this.createError({ message: 'start_with_number' });
|
|
21
|
+
var requiredLen = isStartWith5 ? digits - 1 : digits;
|
|
22
|
+
return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
23
|
+
}
|
|
24
|
+
return valueLen === digits ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
25
|
+
}
|
|
26
|
+
})
|
|
27
|
+
.required('mobile_number_error')
|
|
28
|
+
});
|
|
@@ -0,0 +1,80 @@
|
|
|
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 Box from '@mui/material/Box/Box';
|
|
14
|
+
import { styled } from '@mui/material/styles';
|
|
15
|
+
import * as React from 'react';
|
|
16
|
+
import { useTranslation } from 'react-i18next';
|
|
17
|
+
import Text from '../../../../components/Text';
|
|
18
|
+
import { clearError, signInSelector, resetOTPScreen, verifyAuthOTP } from '../../../app/signIn/signInStore';
|
|
19
|
+
import Button from '../../../shared/Button';
|
|
20
|
+
import { ScreenContainer } from '../../../shared/Containers';
|
|
21
|
+
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
22
|
+
import { handlePrevScreenStep } from '../../../../app/settings';
|
|
23
|
+
import { useLanguage } from '../../../../hooks';
|
|
24
|
+
import { useForm, FormProvider } from 'react-hook-form';
|
|
25
|
+
import { yupResolver } from '@hookform/resolvers/yup';
|
|
26
|
+
import Form from '../../../../components/Form';
|
|
27
|
+
import { maskPhone, maskEmail } from '../../../../utils';
|
|
28
|
+
import { OTPValidation } from './validation';
|
|
29
|
+
import OTPInput from './OTPInput';
|
|
30
|
+
var OTPTitleContainerStyled = styled(Box)(function (_a) {
|
|
31
|
+
var theme = _a.theme;
|
|
32
|
+
return ({
|
|
33
|
+
background: theme.palette.common.white,
|
|
34
|
+
border: '1px solid',
|
|
35
|
+
borderColor: theme.palette.divider,
|
|
36
|
+
direction: theme.direction,
|
|
37
|
+
borderRadius: theme.spacing(0, 0, 1.25, 1.25),
|
|
38
|
+
marginBottom: theme.spacing(5.75)
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
var OTPTitleStyled = styled(Text)(function (_a) {
|
|
42
|
+
var theme = _a.theme;
|
|
43
|
+
return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, marginBlock: theme.spacing(1.75), marginInline: theme.spacing(2.5), lineHeight: 1.75, whiteSpace: 'pre-line' }));
|
|
44
|
+
});
|
|
45
|
+
var FormStyled = styled(Form)(function () { return ({
|
|
46
|
+
display: 'flex',
|
|
47
|
+
flexDirection: 'column'
|
|
48
|
+
}); });
|
|
49
|
+
var OTP = function () {
|
|
50
|
+
var _a;
|
|
51
|
+
var dispatch = useAppDispatch();
|
|
52
|
+
var _b = useAppSelector(signInSelector), data = _b.data, loading = _b.loading, error = _b.error;
|
|
53
|
+
var methods = useForm({
|
|
54
|
+
resolver: yupResolver(OTPValidation),
|
|
55
|
+
defaultValues: data.otpData,
|
|
56
|
+
mode: 'onChange'
|
|
57
|
+
});
|
|
58
|
+
var t = useTranslation().t;
|
|
59
|
+
var isAr = useLanguage().isAr;
|
|
60
|
+
var isEmail = !!data.auth.email;
|
|
61
|
+
React.useEffect(function () {
|
|
62
|
+
if (error)
|
|
63
|
+
dispatch(clearError());
|
|
64
|
+
return function () {
|
|
65
|
+
dispatch(resetOTPScreen());
|
|
66
|
+
};
|
|
67
|
+
}, [methods.formState.isValid]);
|
|
68
|
+
var onSubmit = function (formData) {
|
|
69
|
+
dispatch(verifyAuthOTP(formData));
|
|
70
|
+
};
|
|
71
|
+
var onBack = function () {
|
|
72
|
+
dispatch(handlePrevScreenStep(isEmail ? 'SIGIN_EMAIL_STEP' : 'SIGIN_MOBILE_STEP'));
|
|
73
|
+
};
|
|
74
|
+
var disabled = !methods.formState.isValid || !!error;
|
|
75
|
+
var phone = ((_a = data.auth.countryCode) === null || _a === void 0 ? void 0 : _a.idd_prefix) + (data.auth.mobile || '');
|
|
76
|
+
var email = data.auth.email || '';
|
|
77
|
+
var title = t('ide_opt_sent_title');
|
|
78
|
+
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') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: isEmail ? maskEmail(email) : maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
|
|
79
|
+
};
|
|
80
|
+
export default React.memo(OTP);
|
|
@@ -0,0 +1,53 @@
|
|
|
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 { useController, useFormContext } from 'react-hook-form';
|
|
15
|
+
import { useTranslation } from 'react-i18next';
|
|
16
|
+
import Box from '@mui/material/Box/Box';
|
|
17
|
+
import { styled } from '@mui/material/styles';
|
|
18
|
+
import OTPField from '../../../shared/OTP';
|
|
19
|
+
import { DEFAULT_TIMER_VALUE } from '../../../../constants';
|
|
20
|
+
import { signInSelector, resendOTPMobile, resendOTPEmail } from '../../../app/signIn/signInStore';
|
|
21
|
+
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
22
|
+
var BoxStyled = styled(Box)(function (_a) {
|
|
23
|
+
var theme = _a.theme;
|
|
24
|
+
return ({
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'column',
|
|
27
|
+
fontFamily: theme.typography.fontFamily
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
var OTPInput = function (_a) {
|
|
31
|
+
var _b = useFormContext(), control = _b.control, setValue = _b.setValue;
|
|
32
|
+
var t = useTranslation().t;
|
|
33
|
+
var dispatch = useAppDispatch();
|
|
34
|
+
var otpControl = useController({ name: 'otp', control: control });
|
|
35
|
+
var data = useAppSelector(signInSelector).data;
|
|
36
|
+
var isEmail = !!data.auth.email;
|
|
37
|
+
var handleOnOTPChange = function (otp) {
|
|
38
|
+
otpControl.field.onChange(otp);
|
|
39
|
+
};
|
|
40
|
+
var handleOnResendOTP = function () {
|
|
41
|
+
if (otpControl.field.value)
|
|
42
|
+
setValue('otp', '', { shouldValidate: true });
|
|
43
|
+
dispatch(resendOTPMobile());
|
|
44
|
+
};
|
|
45
|
+
var handleOnResendEmailOTP = function () {
|
|
46
|
+
if (otpControl.field.value)
|
|
47
|
+
setValue('otp', '', { shouldValidate: true });
|
|
48
|
+
dispatch(resendOTPEmail());
|
|
49
|
+
};
|
|
50
|
+
var otpValue = otpControl.field.value;
|
|
51
|
+
return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: isEmail ? handleOnResendEmailOTP : handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
|
|
52
|
+
};
|
|
53
|
+
export default React.memo(OTPInput);
|
|
@@ -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
|
+
}>>>;
|
|
@@ -0,0 +1,54 @@
|
|
|
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 { useForm, FormProvider } from 'react-hook-form';
|
|
15
|
+
import { useTranslation } from 'react-i18next';
|
|
16
|
+
import { useSelector } from 'react-redux';
|
|
17
|
+
import { yupResolver } from '@hookform/resolvers/yup';
|
|
18
|
+
import Box from '@mui/material/Box';
|
|
19
|
+
import { styled } from '@mui/material/styles';
|
|
20
|
+
import { useAppDispatch } from '../../../../hooks';
|
|
21
|
+
import { handlePrevScreenStep } from '../../../../app/settings';
|
|
22
|
+
import Form from '../../../../components/Form';
|
|
23
|
+
import { useLanguage } from '../../../../hooks';
|
|
24
|
+
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
25
|
+
import Button from '../../../shared/Button';
|
|
26
|
+
import { signInSelector, verifyAuthPassword } from '../../../app/signIn/signInStore';
|
|
27
|
+
import PasswordInput from './PasswordInput';
|
|
28
|
+
import { PasswordValidation } from './validation';
|
|
29
|
+
var InputsContainerStyled = styled(Box)(function (_a) {
|
|
30
|
+
var theme = _a.theme;
|
|
31
|
+
return ({
|
|
32
|
+
paddingBottom: theme.spacing(7.5)
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
var Password = function (_a) {
|
|
36
|
+
var t = useTranslation().t;
|
|
37
|
+
var isAr = useLanguage().isAr;
|
|
38
|
+
var dispatch = useAppDispatch();
|
|
39
|
+
var _b = useSelector(signInSelector), data = _b.data, loading = _b.loading, error = _b.error;
|
|
40
|
+
var isEmail = !!data.auth.email;
|
|
41
|
+
var methods = useForm({
|
|
42
|
+
resolver: yupResolver(PasswordValidation),
|
|
43
|
+
defaultValues: data.passwordData,
|
|
44
|
+
mode: 'onChange'
|
|
45
|
+
});
|
|
46
|
+
var onSubmit = function (data) {
|
|
47
|
+
dispatch(verifyAuthPassword(data));
|
|
48
|
+
};
|
|
49
|
+
var onBack = function () {
|
|
50
|
+
dispatch(handlePrevScreenStep(isEmail ? 'SIGIN_EMAIL_STEP' : 'SIGIN_MOBILE_STEP'));
|
|
51
|
+
};
|
|
52
|
+
return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(PasswordInput, {}) }), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: !methods.formState.isValid, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
|
|
53
|
+
};
|
|
54
|
+
export default React.memo(Password);
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useTranslation } from 'react-i18next';
|
|
4
|
+
import { useController, useFormContext } from 'react-hook-form';
|
|
5
|
+
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
6
|
+
import PasswordIcon from '../../../shared/PasswordIcon';
|
|
7
|
+
import Input from '../../../shared/Input';
|
|
8
|
+
var PasswordInput = function (_a) {
|
|
9
|
+
var _b;
|
|
10
|
+
var t = useTranslation().t;
|
|
11
|
+
var control = useFormContext().control;
|
|
12
|
+
var passwordControl = useController({ control: control, name: 'password' });
|
|
13
|
+
var _c = React.useState(false), showPassword = _c[0], setShowPassword = _c[1];
|
|
14
|
+
var handleShowPassword = function () {
|
|
15
|
+
setShowPassword(true);
|
|
16
|
+
};
|
|
17
|
+
var handleHidePassword = function () {
|
|
18
|
+
setShowPassword(false);
|
|
19
|
+
};
|
|
20
|
+
var handlePasswordChange = function (_a) {
|
|
21
|
+
var target = _a.target;
|
|
22
|
+
passwordControl.field.onChange(target.value);
|
|
23
|
+
};
|
|
24
|
+
var passwordValue = passwordControl.field.value;
|
|
25
|
+
var error = (_b = passwordControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
26
|
+
return (_jsx(ScreenContainer, { children: _jsx(Input, { label: t('tap_js_password_description'), onChange: handlePasswordChange, value: passwordValue, endAdornment: _jsx(PasswordIcon, { show: showPassword, onShow: handleShowPassword, onHide: handleHidePassword }), placeholder: t('tap_js_password_placeholder'), warningType: 'alert', type: showPassword ? 'text' : 'password', warningMessage: error && t(error) }) }));
|
|
27
|
+
};
|
|
28
|
+
export default React.memo(PasswordInput);
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as yup from 'yup';
|
|
2
|
+
export declare const PasswordValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
3
|
+
password: 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
|
+
password: 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
|
+
password: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
8
|
+
}>>>;
|
|
@@ -70,7 +70,7 @@ var SuccessWithFlowButtons = function () {
|
|
|
70
70
|
.filter(function (item) { return item.name; })
|
|
71
71
|
.map(function (_a) {
|
|
72
72
|
var name = _a.name, url = _a.url, status = _a.status;
|
|
73
|
-
var type = status === 'initiated' ? 'pending' : 'completed';
|
|
73
|
+
var type = status === 'initiated' || status === 'in_progress' ? 'pending' : 'completed';
|
|
74
74
|
var title = t("".concat(name, "_flow_").concat(type), {
|
|
75
75
|
individual_name: username.toLowerCase() + maskedId,
|
|
76
76
|
business_type: brandName,
|
|
@@ -6,4 +6,5 @@ export declare const useAppDispatch: () => import("redux-thunk").ThunkDispatch<{
|
|
|
6
6
|
tax: import("../features/app/tax/taxStore").TaxState;
|
|
7
7
|
individual: import("../features/app/individual/individualStore").IndividualState;
|
|
8
8
|
password: import("../features/app/password/passwordStore").PasswordState;
|
|
9
|
+
signIn: import("../features/app/signIn/signInStore").SignInState;
|
|
9
10
|
}, undefined, import("redux").AnyAction> & import("redux").Dispatch<import("redux").AnyAction>;
|
package/build/index.css
CHANGED
package/build/index.d.ts
CHANGED
|
@@ -6,5 +6,6 @@ import { PasswordLib, renderPasswordLib, PasswordLibProps, unmountPasswordLib }
|
|
|
6
6
|
import { IndividualLib, renderIndividualLib, IndividualLibProps, unmountIndividualLib } from './features/individual';
|
|
7
7
|
import { BankLib, renderBankLib, BankLibProps, unmountBankLib } from './features/bank';
|
|
8
8
|
import { TaxLib, renderTaxLib, TaxLibProps, unmountTaxLib } from './features/tax';
|
|
9
|
-
|
|
10
|
-
export {
|
|
9
|
+
import { SignInLib, renderSignInLib, SignInLibProps, unmountSignInLib } from './features/signIn';
|
|
10
|
+
export type { ConnectLibProps, BusinessLibProps, PasswordLibProps, IndividualLibProps, BankLibProps, TaxLibProps, SignInLibProps };
|
|
11
|
+
export { ConnectLib, renderConnectLib, unmountConnectLib, BusinessLib, renderBusinessLib, unmountBusinessLib, PasswordLib, renderPasswordLib, unmountPasswordLib, IndividualLib, renderIndividualLib, unmountIndividualLib, BankLib, renderBankLib, unmountBankLib, TaxLib, renderTaxLib, unmountTaxLib, SignInLib, renderSignInLib, unmountSignInLib };
|
package/build/index.js
CHANGED
|
@@ -6,7 +6,8 @@ import { PasswordLib, renderPasswordLib, unmountPasswordLib } from './features/p
|
|
|
6
6
|
import { IndividualLib, renderIndividualLib, unmountIndividualLib } from './features/individual';
|
|
7
7
|
import { BankLib, renderBankLib, unmountBankLib } from './features/bank';
|
|
8
8
|
import { TaxLib, renderTaxLib, unmountTaxLib } from './features/tax';
|
|
9
|
-
|
|
9
|
+
import { SignInLib, renderSignInLib, unmountSignInLib } from './features/signIn';
|
|
10
|
+
export { ConnectLib, renderConnectLib, unmountConnectLib, BusinessLib, renderBusinessLib, unmountBusinessLib, PasswordLib, renderPasswordLib, unmountPasswordLib, IndividualLib, renderIndividualLib, unmountIndividualLib, BankLib, renderBankLib, unmountBankLib, TaxLib, renderTaxLib, unmountTaxLib, SignInLib, renderSignInLib, unmountSignInLib };
|
|
10
11
|
window['TapAuth'] = {
|
|
11
12
|
renderConnectLib: renderConnectLib,
|
|
12
13
|
unmountConnectLib: unmountConnectLib,
|
|
@@ -19,5 +20,7 @@ window['TapAuth'] = {
|
|
|
19
20
|
renderBankLib: renderBankLib,
|
|
20
21
|
unmountBankLib: unmountBankLib,
|
|
21
22
|
renderTaxLib: renderTaxLib,
|
|
22
|
-
unmountTaxLib: unmountTaxLib
|
|
23
|
+
unmountTaxLib: unmountTaxLib,
|
|
24
|
+
renderSignInLib: renderSignInLib,
|
|
25
|
+
unmountSignInLib: unmountSignInLib
|
|
23
26
|
};
|
package/build/utils/string.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { DeviceInfo } from '../@types';
|
|
2
2
|
export declare const maskPhone: (str?: string) => string;
|
|
3
3
|
export declare const maskID: (str: string) => string;
|
|
4
|
+
export declare const maskEmail: (str: string) => string;
|
|
4
5
|
export declare const showLastFour: (str: string) => string;
|
|
5
6
|
export declare const getIndividualName: (name: string) => {
|
|
6
7
|
first: string;
|
|
@@ -11,7 +12,7 @@ export declare const convertNumbers2English: (str: string) => string;
|
|
|
11
12
|
export declare const getParameterByName: (name: string) => string | null;
|
|
12
13
|
export declare const getClientEmailUrl: () => string;
|
|
13
14
|
export declare const getFlowUrl: (path: string, lang: string) => string;
|
|
14
|
-
export declare const getResetFlowUrl: (path: string, lang: string, operationType: string,
|
|
15
|
+
export declare const getResetFlowUrl: (path: string, lang: string, operationType: string, id: string) => string;
|
|
15
16
|
export declare const capitalizeTheFirstLetterOfEachWord: (words: string) => string;
|
|
16
17
|
export declare const getRequestHeaders: (deviceInfo: DeviceInfo) => {
|
|
17
18
|
al: string;
|
|
@@ -39,3 +40,4 @@ export declare const getRequestHeaders: (deviceInfo: DeviceInfo) => {
|
|
|
39
40
|
export declare const removeRequestHeaders: () => void;
|
|
40
41
|
export declare const getBaseUrl: () => string;
|
|
41
42
|
export declare const getScreenNameBasedOnFlow: (flow: string) => "CONNECT_NID_STEP" | "" | "BUSINESS_BUSINESS_TYPE_STEP" | "INDIVIDUAL_ADDITIONAL_INDIVIDUAL_INFO_STEP" | "BANK_BANK_DETAILS_STEP" | "TAX_TAX_DETAILS_STEP";
|
|
43
|
+
export declare const getEighteenYearsAgo: () => string;
|
package/build/utils/string.js
CHANGED
|
@@ -2,6 +2,7 @@ import { FlowsTypes } from '../@types';
|
|
|
2
2
|
import { encryptString } from '.';
|
|
3
3
|
import { removeAxiosGlobalHeaders } from '../api';
|
|
4
4
|
import { ENDPOINT_PATHS } from '../constants';
|
|
5
|
+
import moment from 'moment';
|
|
5
6
|
export var maskPhone = function (str) {
|
|
6
7
|
if (str === void 0) { str = ''; }
|
|
7
8
|
var lastTwo = str.substring(str.length - 2, str.length);
|
|
@@ -11,6 +12,10 @@ export var maskID = function (str) {
|
|
|
11
12
|
var lastTwo = str.substring(str.length - 2, str.length);
|
|
12
13
|
return ' ••••' + lastTwo;
|
|
13
14
|
};
|
|
15
|
+
export var maskEmail = function (str) {
|
|
16
|
+
var lastTwo = str.substring(str.length - 2, str.length);
|
|
17
|
+
return ' ••••' + lastTwo;
|
|
18
|
+
};
|
|
14
19
|
export var showLastFour = function (str) {
|
|
15
20
|
if (str && str.length >= 4) {
|
|
16
21
|
var lastFour = str.substring(str.length - 4, str.length);
|
|
@@ -62,9 +67,9 @@ export var getFlowUrl = function (path, lang) {
|
|
|
62
67
|
var origin = window.location.origin;
|
|
63
68
|
return origin + path + "?lang=".concat(lang, "&token=");
|
|
64
69
|
};
|
|
65
|
-
export var getResetFlowUrl = function (path, lang, operationType,
|
|
70
|
+
export var getResetFlowUrl = function (path, lang, operationType, id) {
|
|
66
71
|
var origin = window.location.origin;
|
|
67
|
-
return origin + path + "?lang=".concat(lang, "&operation_type=").concat(operationType, "&
|
|
72
|
+
return origin + path + "?lang=".concat(lang, "&operation_type=").concat(operationType, "&board_id=").concat(id, "&token=");
|
|
68
73
|
};
|
|
69
74
|
export var capitalizeTheFirstLetterOfEachWord = function (words) {
|
|
70
75
|
var separateWord = words.toLowerCase().split(' ');
|
|
@@ -158,3 +163,7 @@ export var getScreenNameBasedOnFlow = function (flow) {
|
|
|
158
163
|
}
|
|
159
164
|
return '';
|
|
160
165
|
};
|
|
166
|
+
export var getEighteenYearsAgo = function () {
|
|
167
|
+
var eighteenYearsAgo = new Date();
|
|
168
|
+
return moment(eighteenYearsAgo.setFullYear(eighteenYearsAgo.getFullYear() - 18)).format('YYYY-MM-DD');
|
|
169
|
+
};
|