@tap-payments/auth-jsconnect 2.1.61-test → 2.1.62-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/form.d.ts +1 -0
- package/build/assets/locales/ar.json +2 -1
- package/build/assets/locales/en.json +2 -1
- package/build/constants/assets.d.ts +1 -0
- package/build/constants/assets.js +1 -0
- package/build/features/app/connectExpress/connectExpressStore.d.ts +3 -1
- package/build/features/app/connectExpress/connectExpressStore.js +23 -14
- package/build/features/bank/screens/PrepareDataLoading/PrepareDataLoading.js +4 -1
- package/build/features/brand/screens/PrepareDataLoading/PrepareDataLoading.js +4 -1
- package/build/features/connectExpress/ConnectExpress.d.ts +1 -0
- package/build/features/connectExpress/ConnectExpress.js +4 -2
- package/build/features/connectExpress/screens/CollectBusinessInfo/CollectBusinessInfo.js +9 -6
- package/build/features/connectExpress/screens/CollectBusinessInfo/TAC.d.ts +6 -0
- package/build/features/connectExpress/screens/CollectBusinessInfo/TAC.js +83 -0
- package/build/features/connectExpress/screens/CollectBusinessInfo/validation.d.ts +2 -2
- package/build/features/connectExpress/screens/CollectBusinessInfo/validation.js +133 -57
- package/build/features/connectExpress/screens/CreateAccountLoader/CreateAccountLoader.js +6 -53
- package/build/features/connectExpress/screens/Mobile/Mobile.js +3 -2
- package/build/features/connectExpress/screens/Mobile/TAC.d.ts +6 -0
- package/build/features/connectExpress/screens/Mobile/TAC.js +83 -0
- package/build/features/connectExpress/screens/Mobile/validation.d.ts +1 -1
- package/build/features/connectExpress/screens/Mobile/validation.js +58 -26
- package/build/features/connectExpress/screens/NID/NID.js +4 -3
- package/build/features/connectExpress/screens/NID/TAC.d.ts +6 -0
- package/build/features/connectExpress/screens/NID/TAC.js +83 -0
- package/build/features/connectExpress/screens/NID/validation.d.ts +1 -1
- package/build/features/connectExpress/screens/NID/validation.js +21 -8
- package/build/features/entity/screens/PrepareDataLoading/PrepareDataLoading.js +4 -1
- package/build/features/individual/screens/PrepareDataLoading/PrepareDataLoading.js +4 -1
- package/build/features/shared/CreateAccountLoading/CreateAccountLoading.d.ts +6 -0
- package/build/features/shared/CreateAccountLoading/CreateAccountLoading.js +58 -0
- package/build/features/shared/CreateAccountLoading/index.d.ts +2 -0
- package/build/features/shared/CreateAccountLoading/index.js +2 -0
- package/build/features/shared/DataLoading/DataLoading.d.ts +2 -1
- package/build/features/shared/DataLoading/DataLoading.js +14 -11
- package/build/features/shared/GenericError/GenericError.d.ts +7 -0
- package/build/features/shared/GenericError/GenericError.js +55 -0
- package/build/features/shared/GenericError/index.d.ts +2 -0
- package/build/features/shared/GenericError/index.js +2 -0
- package/build/features/tax/screens/PrepareDataLoading/PrepareDataLoading.js +4 -1
- package/package.json +3 -2
|
@@ -1,61 +1,14 @@
|
|
|
1
|
-
|
|
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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
2
|
import * as React from 'react';
|
|
14
|
-
import
|
|
15
|
-
import {
|
|
16
|
-
import
|
|
17
|
-
import Text from '../../../../components/Text';
|
|
18
|
-
import { ScreenContainer } from '../../../shared/Containers';
|
|
19
|
-
import LottieFile, { LottieAnimationFiles } from '../../../../components/Lottie';
|
|
20
|
-
import { useAppDispatch } from '../../../../hooks';
|
|
21
|
-
import { createAccountAsync } from '../../../app/connectExpress/connectExpressStore';
|
|
22
|
-
var TitleContainerStyled = styled(Box)(function (_a) {
|
|
23
|
-
var theme = _a.theme;
|
|
24
|
-
return ({
|
|
25
|
-
direction: theme.direction,
|
|
26
|
-
display: 'flex',
|
|
27
|
-
flexDirection: 'column',
|
|
28
|
-
alignItems: 'center',
|
|
29
|
-
marginBottom: theme.spacing(2.5)
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
var VerifyPACITitleStyled = styled(Text)(function (_a) {
|
|
33
|
-
var theme = _a.theme;
|
|
34
|
-
return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightBold, marginBottom: theme.spacing(2.4), lineHeight: '19.2px' }));
|
|
35
|
-
});
|
|
36
|
-
var VerifyPACISubTitleStyled = styled(Text)(function (_a) {
|
|
37
|
-
var theme = _a.theme;
|
|
38
|
-
return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium, lineHeight: '16.8px' }));
|
|
39
|
-
});
|
|
40
|
-
var Container = styled(Box)(function (_a) {
|
|
41
|
-
var theme = _a.theme;
|
|
42
|
-
return ({
|
|
43
|
-
position: 'relative',
|
|
44
|
-
display: 'flex',
|
|
45
|
-
justifyContent: 'center',
|
|
46
|
-
alignItems: 'center',
|
|
47
|
-
maxHeight: '300px',
|
|
48
|
-
height: '200px',
|
|
49
|
-
width: '100%',
|
|
50
|
-
marginBottom: theme.spacing(3.25)
|
|
51
|
-
});
|
|
52
|
-
});
|
|
3
|
+
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
4
|
+
import { connectExpressSelector, createAccountAsync } from '../../../app/connectExpress/connectExpressStore';
|
|
5
|
+
import CreateAccountLoading from '../../../shared/CreateAccountLoading';
|
|
53
6
|
var CreateAccountLoader = function (_a) {
|
|
54
|
-
var t = useTranslation().t;
|
|
55
7
|
var dispatch = useAppDispatch();
|
|
8
|
+
var error = useAppSelector(connectExpressSelector).error;
|
|
56
9
|
React.useEffect(function () {
|
|
57
10
|
dispatch(createAccountAsync());
|
|
58
11
|
}, []);
|
|
59
|
-
return
|
|
12
|
+
return _jsx(CreateAccountLoading, { error: error });
|
|
60
13
|
};
|
|
61
14
|
export default React.memo(CreateAccountLoader);
|
|
@@ -30,6 +30,7 @@ import MIDTitle from './Title';
|
|
|
30
30
|
import MobileNumber from './MobileNumber';
|
|
31
31
|
import { PhoneValidationSchema } from './validation';
|
|
32
32
|
import { ICONS_NAMES } from '../../../../constants';
|
|
33
|
+
import TAC from './TAC';
|
|
33
34
|
var FormStyled = styled(Form)(function () { return ({
|
|
34
35
|
display: 'flex',
|
|
35
36
|
flexDirection: 'column'
|
|
@@ -79,7 +80,7 @@ var Mobile = function (_a) {
|
|
|
79
80
|
var responseData = data.responseData, isLeadIdPassed = data.isLeadIdPassed;
|
|
80
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);
|
|
81
82
|
var methods = useForm({
|
|
82
|
-
resolver: yupResolver(PhoneValidationSchema),
|
|
83
|
+
resolver: yupResolver(PhoneValidationSchema(isLeadIdPassed)),
|
|
83
84
|
defaultValues: data.mobileData,
|
|
84
85
|
mode: 'onChange'
|
|
85
86
|
});
|
|
@@ -104,6 +105,6 @@ var Mobile = function (_a) {
|
|
|
104
105
|
setAnchor(false);
|
|
105
106
|
};
|
|
106
107
|
var disabled = !methods.formState.isValid || !!error;
|
|
107
|
-
return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !anchor, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: true, countries: settingData.countries, onListOpen: handleCountryOpen, onListClose: handleCountryClose }) }), _jsxs(Collapse, __assign({ in: !anchor }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: isLeadIdPassed ? !isLeadIdentityIdAvailable : !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), isKuwait ? (_jsx(MobileButton, __assign({ disabled: loading, onClick: function () { return onBack(); }, icon: ICONS_NAMES.PACI_ICON }, { children: t('paci_button_label') }))) : (_jsx(AbsherButton, __assign({ disabled: loading, onClick: function () { return onBack(); } }, { children: t('absher_button_label') })))] }))] }))] })) }))] }));
|
|
108
|
+
return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !anchor, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: true, countries: settingData.countries, onListOpen: handleCountryOpen, onListClose: handleCountryClose }) }), _jsx(TAC, { show: isLeadIdPassed }), _jsxs(Collapse, __assign({ in: !anchor }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: isLeadIdPassed ? !isLeadIdentityIdAvailable : !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), isKuwait ? (_jsx(MobileButton, __assign({ disabled: loading, onClick: function () { return onBack(); }, icon: ICONS_NAMES.PACI_ICON }, { children: t('paci_button_label') }))) : (_jsx(AbsherButton, __assign({ disabled: loading, onClick: function () { return onBack(); } }, { children: t('absher_button_label') })))] }))] }))] })) }))] }));
|
|
108
109
|
};
|
|
109
110
|
export default React.memo(Mobile);
|
|
@@ -0,0 +1,83 @@
|
|
|
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 Link from '@mui/material/Link';
|
|
19
|
+
import { settingsSelector } from '../../../../app/settings';
|
|
20
|
+
import { EXTERNAL_LINKS, TAP_WEBSITE } from '../../../../constants';
|
|
21
|
+
import { useLanguage, useAppSelector } from '../../../../hooks';
|
|
22
|
+
import CheckBox from '../../../../components/CheckBox';
|
|
23
|
+
import Text from '../../../../components/Text';
|
|
24
|
+
import Warning from '../../../../components/Warning';
|
|
25
|
+
import Collapse from '../../../../components/Collapse';
|
|
26
|
+
import { ScreenContainer } from '../../../shared/Containers';
|
|
27
|
+
var TACContainerStyled = styled(Box)(function (_a) {
|
|
28
|
+
var theme = _a.theme;
|
|
29
|
+
return ({
|
|
30
|
+
display: 'flex',
|
|
31
|
+
flexDirection: 'row',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
paddingInlineStart: theme.spacing(2.5)
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
var TextStyled = styled(Text)(function (_a) {
|
|
37
|
+
var theme = _a.theme;
|
|
38
|
+
return (__assign({ color: alpha(theme.palette.text.primary, 0.4), fontWeight: theme.typography.fontWeightLight, whiteSpace: 'pre-line', height: 'fit-content' }, theme.typography.body2));
|
|
39
|
+
});
|
|
40
|
+
var LinkStyled = styled(Link)(function (_a) {
|
|
41
|
+
var theme = _a.theme;
|
|
42
|
+
return ({
|
|
43
|
+
color: theme.palette.primary.main,
|
|
44
|
+
fontWeight: theme.typography.fontWeightMedium,
|
|
45
|
+
letterSpacing: theme.spacing(0)
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
var CheckboxStyled = styled(CheckBox)(function (_a) {
|
|
49
|
+
var theme = _a.theme;
|
|
50
|
+
return ({
|
|
51
|
+
margin: theme.spacing(0),
|
|
52
|
+
padding: theme.spacing(0),
|
|
53
|
+
marginInlineEnd: theme.spacing(1.5),
|
|
54
|
+
color: theme.palette.primary.main,
|
|
55
|
+
'& .MuiSvgIcon-root': {
|
|
56
|
+
fontSize: theme.spacing(3.75)
|
|
57
|
+
},
|
|
58
|
+
'&.Mui-checked': {
|
|
59
|
+
color: theme.palette.text.primary,
|
|
60
|
+
borderRadius: theme.spacing(2.5)
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
var CollapseStyled = styled(Collapse)(function () { return ({
|
|
65
|
+
width: '100%'
|
|
66
|
+
}); });
|
|
67
|
+
var TAC = function (_a) {
|
|
68
|
+
var _b;
|
|
69
|
+
var show = _a.show;
|
|
70
|
+
var t = useTranslation().t;
|
|
71
|
+
var isAr = useLanguage().isAr;
|
|
72
|
+
var control = useFormContext().control;
|
|
73
|
+
var settingsData = useAppSelector(settingsSelector).data;
|
|
74
|
+
var tacControl = useController({ control: control, name: 'termAndConditionChecked' });
|
|
75
|
+
var tacChecked = tacControl.field.value;
|
|
76
|
+
var warningMessage = (_b = tacControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
77
|
+
var countryCode = settingsData.businessCountry.iso2.toLowerCase();
|
|
78
|
+
var handleTACCheckedChange = function (event, checked) {
|
|
79
|
+
tacControl.field.onChange(checked);
|
|
80
|
+
};
|
|
81
|
+
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) })) }))] }) })));
|
|
82
|
+
};
|
|
83
|
+
export default React.memo(TAC);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as yup from 'yup';
|
|
2
|
-
export declare const PhoneValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
2
|
+
export declare const PhoneValidationSchema: (isLeadIdPassed: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
3
3
|
mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
4
4
|
}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
5
5
|
mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
@@ -1,28 +1,60 @@
|
|
|
1
1
|
import * as yup from 'yup';
|
|
2
|
-
export var PhoneValidationSchema =
|
|
3
|
-
|
|
4
|
-
.
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
2
|
+
export var PhoneValidationSchema = function (isLeadIdPassed) {
|
|
3
|
+
if (isLeadIdPassed) {
|
|
4
|
+
return yup.object().shape({
|
|
5
|
+
termAndConditionChecked: yup.boolean().isTrue('check_terms_cond').required('check_terms_cond'),
|
|
6
|
+
mobile: yup
|
|
7
|
+
.string()
|
|
8
|
+
.test({
|
|
9
|
+
test: function (value) {
|
|
10
|
+
var countryCode = this.parent.countryCode;
|
|
11
|
+
var isSA = countryCode.iso2 === 'SA';
|
|
12
|
+
var digits = countryCode.digits;
|
|
13
|
+
var mobileValue = value || '';
|
|
14
|
+
var valueLen = mobileValue.length;
|
|
15
|
+
var isNumber = mobileValue.match(/^[0-9]/g);
|
|
16
|
+
if (!isNumber)
|
|
17
|
+
return this.createError({ message: 'enter_valid_mobile_number' });
|
|
18
|
+
var isStartWithZero = mobileValue.startsWith('05');
|
|
19
|
+
var isStartWith5 = mobileValue.startsWith('5');
|
|
20
|
+
var isSaudiNumber = isStartWith5 || isStartWithZero;
|
|
21
|
+
if (isSA) {
|
|
22
|
+
if (!isSaudiNumber)
|
|
23
|
+
return this.createError({ message: 'start_with_number' });
|
|
24
|
+
var requiredLen = isStartWith5 ? digits - 1 : digits;
|
|
25
|
+
return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
26
|
+
}
|
|
27
|
+
return valueLen === digits ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
28
|
+
}
|
|
29
|
+
})
|
|
30
|
+
.required('mobile_number_error')
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
return yup.object().shape({
|
|
34
|
+
mobile: yup
|
|
35
|
+
.string()
|
|
36
|
+
.test({
|
|
37
|
+
test: function (value) {
|
|
38
|
+
var countryCode = this.parent.countryCode;
|
|
39
|
+
var isSA = countryCode.iso2 === 'SA';
|
|
40
|
+
var digits = countryCode.digits;
|
|
41
|
+
var mobileValue = value || '';
|
|
42
|
+
var valueLen = mobileValue.length;
|
|
43
|
+
var isNumber = mobileValue.match(/^[0-9]/g);
|
|
44
|
+
if (!isNumber)
|
|
45
|
+
return this.createError({ message: 'enter_valid_mobile_number' });
|
|
46
|
+
var isStartWithZero = mobileValue.startsWith('05');
|
|
47
|
+
var isStartWith5 = mobileValue.startsWith('5');
|
|
48
|
+
var isSaudiNumber = isStartWith5 || isStartWithZero;
|
|
49
|
+
if (isSA) {
|
|
50
|
+
if (!isSaudiNumber)
|
|
51
|
+
return this.createError({ message: 'start_with_number' });
|
|
52
|
+
var requiredLen = isStartWith5 ? digits - 1 : digits;
|
|
53
|
+
return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
54
|
+
}
|
|
55
|
+
return valueLen === digits ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
23
56
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
})
|
|
27
|
-
|
|
28
|
-
});
|
|
57
|
+
})
|
|
58
|
+
.required('mobile_number_error')
|
|
59
|
+
});
|
|
60
|
+
};
|
|
@@ -28,6 +28,7 @@ import Divider from '@mui/material/Divider';
|
|
|
28
28
|
import Text from '../../../../components/Text';
|
|
29
29
|
import IDNumber from './IDNumber';
|
|
30
30
|
import DOB from './DOB';
|
|
31
|
+
import TAC from './TAC';
|
|
31
32
|
var FormStyled = styled(Form)(function () { return ({
|
|
32
33
|
display: 'flex',
|
|
33
34
|
flexDirection: 'column'
|
|
@@ -63,8 +64,9 @@ var NID = function (_a) {
|
|
|
63
64
|
var dispatch = useAppDispatch();
|
|
64
65
|
var t = useTranslation().t;
|
|
65
66
|
var _e = useAppSelector(connectExpressSelector), data = _e.data, loading = _e.loading, error = _e.error;
|
|
67
|
+
var isLeadIdPassed = data.isLeadIdPassed, responseData = data.responseData;
|
|
66
68
|
var methods = useForm({
|
|
67
|
-
resolver: yupResolver(NIDValidationSchema),
|
|
69
|
+
resolver: yupResolver(NIDValidationSchema(isLeadIdPassed)),
|
|
68
70
|
defaultValues: data.nidData,
|
|
69
71
|
mode: 'onChange'
|
|
70
72
|
});
|
|
@@ -84,8 +86,7 @@ var NID = function (_a) {
|
|
|
84
86
|
dispatch(handlePrevScreenStep());
|
|
85
87
|
};
|
|
86
88
|
var disabled = !methods.formState.isValid || !!error;
|
|
87
|
-
var isLeadIdPassed = data.isLeadIdPassed, responseData = data.responseData;
|
|
88
89
|
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(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, 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') }))] }))] }))] })) })) }));
|
|
90
|
+
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(DOB, { onDateClicked: handleCollapseOpenClose }), _jsx(TAC, { show: isLeadIdPassed }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, 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') }))] }))] }))] })) })) }));
|
|
90
91
|
};
|
|
91
92
|
export default React.memo(NID);
|
|
@@ -0,0 +1,83 @@
|
|
|
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 Link from '@mui/material/Link';
|
|
19
|
+
import { settingsSelector } from '../../../../app/settings';
|
|
20
|
+
import { EXTERNAL_LINKS, TAP_WEBSITE } from '../../../../constants';
|
|
21
|
+
import { useLanguage, useAppSelector } from '../../../../hooks';
|
|
22
|
+
import CheckBox from '../../../../components/CheckBox';
|
|
23
|
+
import Text from '../../../../components/Text';
|
|
24
|
+
import Warning from '../../../../components/Warning';
|
|
25
|
+
import Collapse from '../../../../components/Collapse';
|
|
26
|
+
import { ScreenContainer } from '../../../shared/Containers';
|
|
27
|
+
var TACContainerStyled = styled(Box)(function (_a) {
|
|
28
|
+
var theme = _a.theme;
|
|
29
|
+
return ({
|
|
30
|
+
display: 'flex',
|
|
31
|
+
flexDirection: 'row',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
paddingInlineStart: theme.spacing(2.5)
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
var TextStyled = styled(Text)(function (_a) {
|
|
37
|
+
var theme = _a.theme;
|
|
38
|
+
return (__assign({ color: alpha(theme.palette.text.primary, 0.4), fontWeight: theme.typography.fontWeightLight, whiteSpace: 'pre-line', height: 'fit-content' }, theme.typography.body2));
|
|
39
|
+
});
|
|
40
|
+
var LinkStyled = styled(Link)(function (_a) {
|
|
41
|
+
var theme = _a.theme;
|
|
42
|
+
return ({
|
|
43
|
+
color: theme.palette.primary.main,
|
|
44
|
+
fontWeight: theme.typography.fontWeightMedium,
|
|
45
|
+
letterSpacing: theme.spacing(0)
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
var CheckboxStyled = styled(CheckBox)(function (_a) {
|
|
49
|
+
var theme = _a.theme;
|
|
50
|
+
return ({
|
|
51
|
+
margin: theme.spacing(0),
|
|
52
|
+
padding: theme.spacing(0),
|
|
53
|
+
marginInlineEnd: theme.spacing(1.5),
|
|
54
|
+
color: theme.palette.primary.main,
|
|
55
|
+
'& .MuiSvgIcon-root': {
|
|
56
|
+
fontSize: theme.spacing(3.75)
|
|
57
|
+
},
|
|
58
|
+
'&.Mui-checked': {
|
|
59
|
+
color: theme.palette.text.primary,
|
|
60
|
+
borderRadius: theme.spacing(2.5)
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
var CollapseStyled = styled(Collapse)(function () { return ({
|
|
65
|
+
width: '100%'
|
|
66
|
+
}); });
|
|
67
|
+
var TAC = function (_a) {
|
|
68
|
+
var _b;
|
|
69
|
+
var show = _a.show;
|
|
70
|
+
var t = useTranslation().t;
|
|
71
|
+
var isAr = useLanguage().isAr;
|
|
72
|
+
var control = useFormContext().control;
|
|
73
|
+
var settingsData = useAppSelector(settingsSelector).data;
|
|
74
|
+
var tacControl = useController({ control: control, name: 'termAndConditionChecked' });
|
|
75
|
+
var tacChecked = tacControl.field.value;
|
|
76
|
+
var warningMessage = (_b = tacControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
77
|
+
var countryCode = settingsData.businessCountry.iso2.toLowerCase();
|
|
78
|
+
var handleTACCheckedChange = function (event, checked) {
|
|
79
|
+
tacControl.field.onChange(checked);
|
|
80
|
+
};
|
|
81
|
+
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) })) }))] })) })));
|
|
82
|
+
};
|
|
83
|
+
export default React.memo(TAC);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as yup from 'yup';
|
|
2
|
-
export declare const NIDValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
2
|
+
export declare const NIDValidationSchema: (isLeadIdPassed: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
3
3
|
dob: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
4
4
|
nid: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
5
5
|
}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
import * as yup from 'yup';
|
|
2
|
-
export var NIDValidationSchema =
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
})
|
|
2
|
+
export var NIDValidationSchema = function (isLeadIdPassed) {
|
|
3
|
+
if (isLeadIdPassed) {
|
|
4
|
+
return yup.object().shape({
|
|
5
|
+
dob: yup.string().min(5).required('enter_valid_birth_date'),
|
|
6
|
+
termAndConditionChecked: yup.boolean().isTrue('check_terms_cond').required('check_terms_cond'),
|
|
7
|
+
nid: yup
|
|
8
|
+
.string()
|
|
9
|
+
.matches(/^(1|2)([0-9]{1,})$/g, 'signup_invalid_national_id_format')
|
|
10
|
+
.min(10, 'signup_invalid_national_id')
|
|
11
|
+
.required('signup_invalid_national_id')
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
return yup.object().shape({
|
|
15
|
+
dob: yup.string().min(5).required('enter_valid_birth_date'),
|
|
16
|
+
nid: yup
|
|
17
|
+
.string()
|
|
18
|
+
.matches(/^(1|2)([0-9]{1,})$/g, 'signup_invalid_national_id_format')
|
|
19
|
+
.min(10, 'signup_invalid_national_id')
|
|
20
|
+
.required('signup_invalid_national_id')
|
|
21
|
+
});
|
|
22
|
+
};
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo } from 'react';
|
|
3
|
+
import { useAppSelector } from '../../../../hooks';
|
|
3
4
|
import DataLoading from '../../../shared/DataLoading';
|
|
5
|
+
import { entitySelector } from '../../../app/entity/entityStore';
|
|
4
6
|
export var PrepareDataLoading = function () {
|
|
5
|
-
|
|
7
|
+
var error = useAppSelector(entitySelector).error;
|
|
8
|
+
return _jsx(DataLoading, { error: error });
|
|
6
9
|
};
|
|
7
10
|
export default memo(PrepareDataLoading);
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo } from 'react';
|
|
3
|
+
import { useAppSelector } from '../../../../hooks';
|
|
3
4
|
import DataLoading from '../../../shared/DataLoading';
|
|
5
|
+
import { individualSelector } from '../../../app/individual/individualStore';
|
|
4
6
|
export var PrepareDataLoading = function () {
|
|
5
|
-
|
|
7
|
+
var error = useAppSelector(individualSelector).error;
|
|
8
|
+
return _jsx(DataLoading, { error: error });
|
|
6
9
|
};
|
|
7
10
|
export default memo(PrepareDataLoading);
|
|
@@ -0,0 +1,58 @@
|
|
|
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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import * as React from 'react';
|
|
14
|
+
import { useTranslation } from 'react-i18next';
|
|
15
|
+
import Box from '@mui/material/Box/Box';
|
|
16
|
+
import { styled } from '@mui/material/styles';
|
|
17
|
+
import Collapse from '../../../components/Collapse';
|
|
18
|
+
import Text from '../../../components/Text';
|
|
19
|
+
import LottieFile, { LottieAnimationFiles } from '../../../components/Lottie';
|
|
20
|
+
import { ScreenContainer } from '../../shared/Containers';
|
|
21
|
+
import GenericError from '../GenericError';
|
|
22
|
+
var TitleContainerStyled = styled(Box)(function (_a) {
|
|
23
|
+
var theme = _a.theme;
|
|
24
|
+
return ({
|
|
25
|
+
direction: theme.direction,
|
|
26
|
+
display: 'flex',
|
|
27
|
+
flexDirection: 'column',
|
|
28
|
+
alignItems: 'center',
|
|
29
|
+
marginBottom: theme.spacing(2.5)
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
var Container = styled(Box)(function (_a) {
|
|
33
|
+
var theme = _a.theme;
|
|
34
|
+
return ({
|
|
35
|
+
position: 'relative',
|
|
36
|
+
display: 'flex',
|
|
37
|
+
justifyContent: 'center',
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
maxHeight: '300px',
|
|
40
|
+
height: '200px',
|
|
41
|
+
width: '100%',
|
|
42
|
+
marginBottom: theme.spacing(3.25)
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
var TitleStyled = styled(Text)(function (_a) {
|
|
46
|
+
var theme = _a.theme;
|
|
47
|
+
return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightBold, marginBottom: theme.spacing(2.4), lineHeight: '19.2px', textAlign: 'center' }));
|
|
48
|
+
});
|
|
49
|
+
var SubTitleStyled = styled(Text)(function (_a) {
|
|
50
|
+
var theme = _a.theme;
|
|
51
|
+
return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium, lineHeight: '16.8px', textAlign: 'center' }));
|
|
52
|
+
});
|
|
53
|
+
var CreateAccountLoading = function (_a) {
|
|
54
|
+
var error = _a.error;
|
|
55
|
+
var t = useTranslation().t;
|
|
56
|
+
return (_jsx(ScreenContainer, __assign({ sx: { mb: 2.5 } }, { children: _jsxs(TitleContainerStyled, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(GenericError, { error: error || '', errorTitle: 'oops' }) })), _jsxs(Collapse, __assign({ in: !error }, { children: [_jsx(Container, { children: _jsx(LottieFile, { file: LottieAnimationFiles.account_creation, loop: true, height: '375px' }) }), _jsxs(_Fragment, { children: [_jsx(TitleStyled, { children: t('creating_account_title') }), _jsx(SubTitleStyled, { children: t('creating_account_description') })] })] }))] }) })));
|
|
57
|
+
};
|
|
58
|
+
export default React.memo(CreateAccountLoading);
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export interface DataLoadingProps {
|
|
3
|
+
error?: string | null;
|
|
3
4
|
}
|
|
4
|
-
declare const _default: React.MemoExoticComponent<({}: DataLoadingProps) => JSX.Element>;
|
|
5
|
+
declare const _default: React.MemoExoticComponent<({ error }: DataLoadingProps) => JSX.Element>;
|
|
5
6
|
export default _default;
|
|
@@ -11,12 +11,14 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import * as React from 'react';
|
|
14
|
+
import { useTranslation } from 'react-i18next';
|
|
14
15
|
import Box from '@mui/material/Box/Box';
|
|
15
16
|
import { styled } from '@mui/material/styles';
|
|
16
|
-
import
|
|
17
|
+
import Collapse from '../../../components/Collapse';
|
|
17
18
|
import Text from '../../../components/Text';
|
|
18
|
-
import { ScreenContainer } from '../../shared/Containers';
|
|
19
19
|
import LottieFile, { LottieAnimationFiles } from '../../../components/Lottie';
|
|
20
|
+
import { ScreenContainer } from '../../shared/Containers';
|
|
21
|
+
import GenericError from '../GenericError';
|
|
20
22
|
var TitleContainerStyled = styled(Box)(function (_a) {
|
|
21
23
|
var theme = _a.theme;
|
|
22
24
|
return ({
|
|
@@ -27,14 +29,6 @@ var TitleContainerStyled = styled(Box)(function (_a) {
|
|
|
27
29
|
marginBottom: theme.spacing(2.5)
|
|
28
30
|
});
|
|
29
31
|
});
|
|
30
|
-
var VerifyPACITitleStyled = styled(Text)(function (_a) {
|
|
31
|
-
var theme = _a.theme;
|
|
32
|
-
return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightBold, marginBottom: theme.spacing(2.4), lineHeight: '19.2px' }));
|
|
33
|
-
});
|
|
34
|
-
var VerifyPACISubTitleStyled = styled(Text)(function (_a) {
|
|
35
|
-
var theme = _a.theme;
|
|
36
|
-
return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium, lineHeight: '16.8px' }));
|
|
37
|
-
});
|
|
38
32
|
var Container = styled(Box)(function (_a) {
|
|
39
33
|
var theme = _a.theme;
|
|
40
34
|
return ({
|
|
@@ -48,8 +42,17 @@ var Container = styled(Box)(function (_a) {
|
|
|
48
42
|
marginBottom: theme.spacing(3.25)
|
|
49
43
|
});
|
|
50
44
|
});
|
|
45
|
+
var TitleStyled = styled(Text)(function (_a) {
|
|
46
|
+
var theme = _a.theme;
|
|
47
|
+
return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightBold, marginBottom: theme.spacing(2.4), lineHeight: '19.2px', textAlign: 'center' }));
|
|
48
|
+
});
|
|
49
|
+
var SubTitleStyled = styled(Text)(function (_a) {
|
|
50
|
+
var theme = _a.theme;
|
|
51
|
+
return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium, lineHeight: '16.8px', textAlign: 'center' }));
|
|
52
|
+
});
|
|
51
53
|
var DataLoading = function (_a) {
|
|
54
|
+
var error = _a.error;
|
|
52
55
|
var t = useTranslation().t;
|
|
53
|
-
return (_jsx(ScreenContainer, __assign({ sx: { mb: 2.5 } }, { children: _jsxs(TitleContainerStyled, { children: [_jsx(Container, { children: _jsx(LottieFile, { file: LottieAnimationFiles.account_creation, loop: true, height: '375px' }) }), _jsxs(_Fragment, { children: [_jsx(
|
|
56
|
+
return (_jsx(ScreenContainer, __assign({ sx: { mb: 2.5 } }, { children: _jsxs(TitleContainerStyled, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(GenericError, { error: error || '', errorTitle: 'oops' }) })), _jsxs(Collapse, __assign({ in: !error }, { children: [_jsx(Container, { children: _jsx(LottieFile, { file: LottieAnimationFiles.account_creation, loop: true, height: '375px' }) }), _jsxs(_Fragment, { children: [_jsx(TitleStyled, { children: t('prepare_data_title') }), _jsx(SubTitleStyled, { children: t('prepare_data_description') })] })] }))] }) })));
|
|
54
57
|
};
|
|
55
58
|
export default React.memo(DataLoading);
|