@tap-payments/auth-jsconnect 2.9.13-development → 2.9.14-development
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 +4 -0
- package/build/assets/locales/ar.json +6 -1
- package/build/assets/locales/en.json +6 -1
- package/build/constants/app.d.ts +6 -0
- package/build/constants/app.js +36 -6
- package/build/features/app/business/businessStore.d.ts +10 -1
- package/build/features/app/business/businessStore.js +107 -8
- package/build/features/app/connect/connectStore.d.ts +8 -1
- package/build/features/app/connect/connectStore.js +87 -2
- package/build/features/app/connectExpress/connectExpressStore.d.ts +8 -1
- package/build/features/app/connectExpress/connectExpressStore.js +149 -16
- package/build/features/business/screens/MobileOwnership/CollectMobileOwnership.d.ts +3 -0
- package/build/features/business/screens/MobileOwnership/CollectMobileOwnership.js +104 -0
- package/build/features/business/screens/MobileOwnership/MobileNumber.d.ts +3 -0
- package/build/features/business/screens/MobileOwnership/MobileNumber.js +72 -0
- package/build/features/business/screens/MobileOwnership/index.d.ts +2 -0
- package/build/features/business/screens/MobileOwnership/index.js +2 -0
- package/build/features/business/screens/MobileOwnership/validation.d.ts +8 -0
- package/build/features/business/screens/MobileOwnership/validation.js +38 -0
- package/build/features/connect/screens/MobileOwnership/CollectMobileOwnership.d.ts +3 -0
- package/build/features/connect/screens/MobileOwnership/CollectMobileOwnership.js +105 -0
- package/build/features/connect/screens/MobileOwnership/MobileNumber.d.ts +3 -0
- package/build/features/connect/screens/MobileOwnership/MobileNumber.js +72 -0
- package/build/features/connect/screens/MobileOwnership/index.d.ts +2 -0
- package/build/features/connect/screens/MobileOwnership/index.js +2 -0
- package/build/features/connect/screens/MobileOwnership/validation.d.ts +8 -0
- package/build/features/connect/screens/MobileOwnership/validation.js +38 -0
- package/build/features/connectExpress/screens/MobileOwnership/CollectMobileOwnership.d.ts +3 -0
- package/build/features/connectExpress/screens/MobileOwnership/CollectMobileOwnership.js +107 -0
- package/build/features/connectExpress/screens/MobileOwnership/MobileNumber.d.ts +3 -0
- package/build/features/connectExpress/screens/MobileOwnership/MobileNumber.js +72 -0
- package/build/features/connectExpress/screens/MobileOwnership/index.d.ts +2 -0
- package/build/features/connectExpress/screens/MobileOwnership/index.js +2 -0
- package/build/features/connectExpress/screens/MobileOwnership/validation.d.ts +8 -0
- package/build/features/connectExpress/screens/MobileOwnership/validation.js +38 -0
- package/build/features/featuresScreens.js +15 -0
- package/package.json +1 -1
|
@@ -0,0 +1,72 @@
|
|
|
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, Fragment as _Fragment } 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 { getMobileNumberLen, removeAllCharsFromNumber } from '../../../../utils';
|
|
19
|
+
import { useAppSelector } from '../../../../hooks';
|
|
20
|
+
import Text from '../../../../components/Text';
|
|
21
|
+
import ClearIcon from '../../../shared/ClearIcon';
|
|
22
|
+
import CheckIcon from '../../../shared/CheckIcon';
|
|
23
|
+
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
24
|
+
import Input from '../../../shared/Input';
|
|
25
|
+
import { connectSelector } from '../../../../features/app/connect/connectStore';
|
|
26
|
+
var LabelContainerStyled = styled(Box)(function (_a) {
|
|
27
|
+
var theme = _a.theme;
|
|
28
|
+
return ({
|
|
29
|
+
display: 'flex',
|
|
30
|
+
justifyContent: 'space-between',
|
|
31
|
+
padding: theme.spacing(0, 2.5, 1.25, 2.5)
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
var InputLabelStyled = styled(Text)(function (_a) {
|
|
35
|
+
var theme = _a.theme;
|
|
36
|
+
return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
|
|
37
|
+
});
|
|
38
|
+
var InputStyled = styled(Input)(function () { return ({
|
|
39
|
+
direction: 'ltr',
|
|
40
|
+
'& .MuiInputBase-input': {
|
|
41
|
+
cursor: 'auto'
|
|
42
|
+
}
|
|
43
|
+
}); });
|
|
44
|
+
var MobileNumber = function () {
|
|
45
|
+
var _a;
|
|
46
|
+
var t = useTranslation().t;
|
|
47
|
+
var _b = useFormContext(), control = _b.control, setValue = _b.setValue;
|
|
48
|
+
var data = useAppSelector(connectSelector).data;
|
|
49
|
+
var phoneControl = useController({ name: 'mobile', control: control });
|
|
50
|
+
var countryCodeValue = data.mobileData.countryCode;
|
|
51
|
+
var mobileValue = phoneControl.field.value || '';
|
|
52
|
+
var error = !!mobileValue ? (_a = phoneControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message : '';
|
|
53
|
+
var isSA = countryCodeValue.iso2 === 'SA';
|
|
54
|
+
var mobileMaxLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.max_digits;
|
|
55
|
+
var mobileMinLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.min_digits;
|
|
56
|
+
var requiredMaxLen = getMobileNumberLen(mobileMaxLen, mobileValue);
|
|
57
|
+
var requiredMinLen = getMobileNumberLen(mobileMinLen, mobileValue);
|
|
58
|
+
React.useEffect(function () {
|
|
59
|
+
if (mobileValue)
|
|
60
|
+
setValue('mobile', mobileValue, { shouldValidate: true });
|
|
61
|
+
}, []);
|
|
62
|
+
var onPhoneNumberChange = function (_a) {
|
|
63
|
+
var target = _a.target;
|
|
64
|
+
var value = removeAllCharsFromNumber(target.value);
|
|
65
|
+
phoneControl.field.onChange(value);
|
|
66
|
+
};
|
|
67
|
+
var clearMobileNumber = function () {
|
|
68
|
+
phoneControl.field.onChange('');
|
|
69
|
+
};
|
|
70
|
+
return (_jsx(_Fragment, { children: _jsxs(ScreenContainer, __assign({ sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('new_mobile_number') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredMaxLen }, type: 'tel', onChange: onPhoneNumberChange, value: mobileValue, startAdornment: "+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), endAdornment: !error && mobileValue ? _jsx(CheckIcon, {}) : mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber }), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { minLength: requiredMinLen, length: requiredMaxLen, number: '05|5' }) })] })) }));
|
|
71
|
+
};
|
|
72
|
+
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,38 @@
|
|
|
1
|
+
import { getMobileNumberLen } from '../../../../utils';
|
|
2
|
+
import * as yup from 'yup';
|
|
3
|
+
export var PhoneValidationSchema = function () {
|
|
4
|
+
return yup.object().shape({
|
|
5
|
+
mobile: yup
|
|
6
|
+
.string()
|
|
7
|
+
.test({
|
|
8
|
+
test: function (value) {
|
|
9
|
+
var countryCode = this.parent.countryCode;
|
|
10
|
+
var isSA = countryCode.iso2 === 'SA';
|
|
11
|
+
var maxDigits = countryCode.max_digits;
|
|
12
|
+
var minDigits = countryCode.min_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 = isStartWithZero ? maxDigits + 1 : maxDigits;
|
|
25
|
+
return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
26
|
+
}
|
|
27
|
+
var requiredMaxLen = getMobileNumberLen(maxDigits, mobileValue);
|
|
28
|
+
var requiredMinLen = getMobileNumberLen(minDigits, mobileValue);
|
|
29
|
+
if (valueLen >= requiredMinLen && valueLen <= requiredMaxLen)
|
|
30
|
+
return true;
|
|
31
|
+
if (minDigits === maxDigits)
|
|
32
|
+
return this.createError({ message: 'enter_valid_mobile_number' });
|
|
33
|
+
return this.createError({ message: 'enter_valid_mobile_number_min_max_length' });
|
|
34
|
+
}
|
|
35
|
+
})
|
|
36
|
+
.required('mobile_number_error')
|
|
37
|
+
});
|
|
38
|
+
};
|
|
@@ -0,0 +1,107 @@
|
|
|
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 { FormProvider, useForm } from 'react-hook-form';
|
|
14
|
+
import { ScreenContainer } from '../../../../features/shared/Containers';
|
|
15
|
+
import { styled } from '@mui/material/styles';
|
|
16
|
+
import Form from '../../../../components/Form';
|
|
17
|
+
import { yupResolver } from '@hookform/resolvers/yup';
|
|
18
|
+
import { PhoneValidationSchema } from './validation';
|
|
19
|
+
import { Box, alpha } from '@mui/material';
|
|
20
|
+
import { useTranslation } from 'react-i18next';
|
|
21
|
+
import Text from '../../../../components/Text';
|
|
22
|
+
import { Button as SharedButton } from '../../../shared/Button';
|
|
23
|
+
import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
|
|
24
|
+
import { handlePrevScreenStep } from '../../../../app/settings';
|
|
25
|
+
import { connectExpressSelector, skipUpdateLeadMobile, updateLeadMobile } from '../../../../features/app/connectExpress/connectExpressStore';
|
|
26
|
+
import { AuthForType } from '../../../../@types';
|
|
27
|
+
import Button from '../../../../components/Button';
|
|
28
|
+
import MobileNumber from './MobileNumber';
|
|
29
|
+
import { deepCopy } from '../../../../utils';
|
|
30
|
+
var FormStyled = styled(Form)(function () { return ({
|
|
31
|
+
display: 'flex',
|
|
32
|
+
flexDirection: 'column',
|
|
33
|
+
justifyContent: 'flex-start'
|
|
34
|
+
}); });
|
|
35
|
+
var TitleContainerStyled = styled(Box)(function (_a) {
|
|
36
|
+
var theme = _a.theme;
|
|
37
|
+
return ({
|
|
38
|
+
background: theme.palette.common.white,
|
|
39
|
+
borderTop: '1px solid rgba(227, 232, 238, 0.8)',
|
|
40
|
+
borderBottom: '1px solid rgba(227, 232, 238, 0.8)',
|
|
41
|
+
borderRadius: theme.spacing(0, 0, 1.25, 1.25)
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
var TitleStyled = styled(Text)(function (_a) {
|
|
45
|
+
var theme = _a.theme;
|
|
46
|
+
return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, margin: theme.spacing(1.75, 2.5), lineHeight: 1.2 }));
|
|
47
|
+
});
|
|
48
|
+
var InputLabelStyled = styled(Text)(function (_a) {
|
|
49
|
+
var theme = _a.theme;
|
|
50
|
+
return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightRegular }, theme.typography.caption), { lineHeight: 1.2 }));
|
|
51
|
+
});
|
|
52
|
+
var CurrentMobileContainerStyled = styled(Box)(function (_a) {
|
|
53
|
+
var theme = _a.theme;
|
|
54
|
+
return ({
|
|
55
|
+
display: 'flex',
|
|
56
|
+
flexDirection: 'column',
|
|
57
|
+
rowGap: theme.spacing(1.6),
|
|
58
|
+
height: theme.spacing(9.375),
|
|
59
|
+
marginTop: theme.spacing(2.85),
|
|
60
|
+
marginInlineStart: theme.spacing(2.375)
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
var MobileNumberContainer = styled(Box)(function (_a) {
|
|
64
|
+
var theme = _a.theme;
|
|
65
|
+
return ({
|
|
66
|
+
display: 'flex',
|
|
67
|
+
columnGap: theme.spacing(0.9)
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
var CountryCodeStyled = styled(Text)(function (_a) {
|
|
71
|
+
var theme = _a.theme;
|
|
72
|
+
return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium, lineHeight: 1.2 }));
|
|
73
|
+
});
|
|
74
|
+
var MobileNumberStyled = styled(Text)(function (_a) {
|
|
75
|
+
var theme = _a.theme;
|
|
76
|
+
return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular, lineHeight: 1.2 }));
|
|
77
|
+
});
|
|
78
|
+
var UpdateLaterContainerStyled = styled(Box)(function (_a) {
|
|
79
|
+
var theme = _a.theme;
|
|
80
|
+
return ({
|
|
81
|
+
marginLeft: theme.spacing(2.5),
|
|
82
|
+
marginRight: theme.spacing(2.5)
|
|
83
|
+
});
|
|
84
|
+
});
|
|
85
|
+
var CollectMobileOwnership = function () {
|
|
86
|
+
var dispatch = useAppDispatch();
|
|
87
|
+
var t = useTranslation().t;
|
|
88
|
+
var isAr = useLanguage().isAr;
|
|
89
|
+
var _a = useAppSelector(connectExpressSelector), data = _a.data, loading = _a.loading, error = _a.error;
|
|
90
|
+
var startWithNID = data.otpData.authFor === AuthForType.NATIONAL_ID;
|
|
91
|
+
var methods = useForm({
|
|
92
|
+
resolver: yupResolver(PhoneValidationSchema()),
|
|
93
|
+
defaultValues: { mobile: '', countryCode: data.mobileData.countryCode },
|
|
94
|
+
mode: 'onChange'
|
|
95
|
+
});
|
|
96
|
+
var onSubmit = function (data) {
|
|
97
|
+
dispatch(updateLeadMobile(deepCopy(data)));
|
|
98
|
+
};
|
|
99
|
+
var onBack = function () {
|
|
100
|
+
dispatch(handlePrevScreenStep(startWithNID ? 'CONNECT_EXPRESS_COLLECT_INDIVIDUAL_INFO_STEP' : 'CONNECT_EXPRESS_NID_MISSED_STEP'));
|
|
101
|
+
};
|
|
102
|
+
var onUpdateLater = function () {
|
|
103
|
+
dispatch(skipUpdateLeadMobile());
|
|
104
|
+
};
|
|
105
|
+
return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(TitleContainerStyled, { children: _jsx(TitleStyled, { children: t('mobile_ownership_title') }) }), _jsxs(CurrentMobileContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('current_mobile_number') }), _jsxs(MobileNumberContainer, { children: [_jsxs(CountryCodeStyled, { children: ["+", data.individualData.countryCode.idd_prefix] }), _jsx(MobileNumberStyled, { children: data.individualData.mobile })] })] }), _jsx(MobileNumber, {}), _jsx(SharedButton, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: !methods.formState.isValid, loading: loading, error: t(error || '') }, { children: t('update_mobile_number') })), _jsx(UpdateLaterContainerStyled, { children: _jsx(Button, __assign({ variant: 'text', onClick: function () { return onUpdateLater(); } }, { children: t('update_later') })) })] })) })) }));
|
|
106
|
+
};
|
|
107
|
+
export default CollectMobileOwnership;
|
|
@@ -0,0 +1,72 @@
|
|
|
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, Fragment as _Fragment } 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 { getMobileNumberLen, removeAllCharsFromNumber } from '../../../../utils';
|
|
19
|
+
import { useAppSelector } from '../../../../hooks';
|
|
20
|
+
import Text from '../../../../components/Text';
|
|
21
|
+
import ClearIcon from '../../../shared/ClearIcon';
|
|
22
|
+
import CheckIcon from '../../../shared/CheckIcon';
|
|
23
|
+
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
24
|
+
import Input from '../../../shared/Input';
|
|
25
|
+
import { connectExpressSelector } from '../../../../features/app/connectExpress/connectExpressStore';
|
|
26
|
+
var LabelContainerStyled = styled(Box)(function (_a) {
|
|
27
|
+
var theme = _a.theme;
|
|
28
|
+
return ({
|
|
29
|
+
display: 'flex',
|
|
30
|
+
justifyContent: 'space-between',
|
|
31
|
+
padding: theme.spacing(0, 2.5, 1.25, 2.5)
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
var InputLabelStyled = styled(Text)(function (_a) {
|
|
35
|
+
var theme = _a.theme;
|
|
36
|
+
return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
|
|
37
|
+
});
|
|
38
|
+
var InputStyled = styled(Input)(function () { return ({
|
|
39
|
+
direction: 'ltr',
|
|
40
|
+
'& .MuiInputBase-input': {
|
|
41
|
+
cursor: 'auto'
|
|
42
|
+
}
|
|
43
|
+
}); });
|
|
44
|
+
var MobileNumber = function () {
|
|
45
|
+
var _a;
|
|
46
|
+
var t = useTranslation().t;
|
|
47
|
+
var _b = useFormContext(), control = _b.control, setValue = _b.setValue;
|
|
48
|
+
var data = useAppSelector(connectExpressSelector).data;
|
|
49
|
+
var phoneControl = useController({ name: 'mobile', control: control });
|
|
50
|
+
var countryCodeValue = data.mobileData.countryCode;
|
|
51
|
+
var mobileValue = phoneControl.field.value || '';
|
|
52
|
+
var error = !!mobileValue ? (_a = phoneControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message : '';
|
|
53
|
+
var isSA = countryCodeValue.iso2 === 'SA';
|
|
54
|
+
var mobileMaxLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.max_digits;
|
|
55
|
+
var mobileMinLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.min_digits;
|
|
56
|
+
var requiredMaxLen = getMobileNumberLen(mobileMaxLen, mobileValue);
|
|
57
|
+
var requiredMinLen = getMobileNumberLen(mobileMinLen, mobileValue);
|
|
58
|
+
React.useEffect(function () {
|
|
59
|
+
if (mobileValue)
|
|
60
|
+
setValue('mobile', mobileValue, { shouldValidate: true });
|
|
61
|
+
}, []);
|
|
62
|
+
var onPhoneNumberChange = function (_a) {
|
|
63
|
+
var target = _a.target;
|
|
64
|
+
var value = removeAllCharsFromNumber(target.value);
|
|
65
|
+
phoneControl.field.onChange(value);
|
|
66
|
+
};
|
|
67
|
+
var clearMobileNumber = function () {
|
|
68
|
+
phoneControl.field.onChange('');
|
|
69
|
+
};
|
|
70
|
+
return (_jsx(_Fragment, { children: _jsxs(ScreenContainer, __assign({ sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('new_mobile_number') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredMaxLen }, type: 'tel', onChange: onPhoneNumberChange, value: mobileValue, startAdornment: "+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), endAdornment: !error && mobileValue ? _jsx(CheckIcon, {}) : mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber }), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { minLength: requiredMinLen, length: requiredMaxLen, number: '05|5' }) })] })) }));
|
|
71
|
+
};
|
|
72
|
+
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,38 @@
|
|
|
1
|
+
import { getMobileNumberLen } from '../../../../utils';
|
|
2
|
+
import * as yup from 'yup';
|
|
3
|
+
export var PhoneValidationSchema = function () {
|
|
4
|
+
return yup.object().shape({
|
|
5
|
+
mobile: yup
|
|
6
|
+
.string()
|
|
7
|
+
.test({
|
|
8
|
+
test: function (value) {
|
|
9
|
+
var countryCode = this.parent.countryCode;
|
|
10
|
+
var isSA = countryCode.iso2 === 'SA';
|
|
11
|
+
var maxDigits = countryCode.max_digits;
|
|
12
|
+
var minDigits = countryCode.min_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 = isStartWithZero ? maxDigits + 1 : maxDigits;
|
|
25
|
+
return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
26
|
+
}
|
|
27
|
+
var requiredMaxLen = getMobileNumberLen(maxDigits, mobileValue);
|
|
28
|
+
var requiredMinLen = getMobileNumberLen(minDigits, mobileValue);
|
|
29
|
+
if (valueLen >= requiredMinLen && valueLen <= requiredMaxLen)
|
|
30
|
+
return true;
|
|
31
|
+
if (minDigits === maxDigits)
|
|
32
|
+
return this.createError({ message: 'enter_valid_mobile_number' });
|
|
33
|
+
return this.createError({ message: 'enter_valid_mobile_number_min_max_length' });
|
|
34
|
+
}
|
|
35
|
+
})
|
|
36
|
+
.required('mobile_number_error')
|
|
37
|
+
});
|
|
38
|
+
};
|
|
@@ -12,6 +12,7 @@ import BrandSegmentInfoScreen from './connect/screens/BrandSegment';
|
|
|
12
12
|
import ConnectOTPScreen from './connect/screens/OTP';
|
|
13
13
|
import ThankYouScreen from './connect/screens/ThankYou';
|
|
14
14
|
import OperatorError from './connect/screens/OperatorError';
|
|
15
|
+
import CollectMobileOwnership from './connect/screens/MobileOwnership';
|
|
15
16
|
import ConnectExpressBusinessCountry from './connectExpress/screens/BusinessCountry/BusinessCountry';
|
|
16
17
|
import ConnectExpressMobileScreen from './connectExpress/screens/Mobile';
|
|
17
18
|
import ConnectExpressNIDScreen from './connectExpress/screens/NID';
|
|
@@ -34,6 +35,7 @@ import ConnectExpressAuthenticationListScreen from './connectExpress/screens/Aut
|
|
|
34
35
|
import ConnectExpressAuthMerchantScreen from './connectExpress/screens/AuthMerchant';
|
|
35
36
|
import ConnectExpressAuthAccountCreatedLoaderScreen from './connectExpress/screens/AccountCreatedLoader';
|
|
36
37
|
import ConnectExpressOperatorError from './connectExpress/screens/OperatorError';
|
|
38
|
+
import ConnectExpressCollectMobileOwnership from './connectExpress/screens/MobileOwnership';
|
|
37
39
|
import AuthBusinessCountry from './auth/screens/BusinessCountry/BusinessCountry';
|
|
38
40
|
import AuthSwitchScreen from './auth/screens/AuthSwitch';
|
|
39
41
|
import AuthMobileScreen from './auth/screens/Mobile';
|
|
@@ -68,6 +70,7 @@ import BusCivilIDscreen from './business/screens/CivilID';
|
|
|
68
70
|
import BusVerifyPACIScreen from './business/screens/VerifyPACI';
|
|
69
71
|
import BrandVerifyScreen from './business/screens/BrandDetails';
|
|
70
72
|
import BusinessOperatorError from './business/screens/OperatorError';
|
|
73
|
+
import BusinessCollectMobileOwnership from './business/screens/MobileOwnership';
|
|
71
74
|
import PasswordVerifyPage from './password/screens/Verify';
|
|
72
75
|
import CreatePasswordPage from './password/screens/CreatePassword';
|
|
73
76
|
import PasswordDataLoadingPage from './password/screens/PrepareDataLoading';
|
|
@@ -188,6 +191,10 @@ export var connectFeatureScreens = [
|
|
|
188
191
|
{
|
|
189
192
|
name: 'CONNECT_OPERATOR_ERROR_STEP',
|
|
190
193
|
element: OperatorError
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
name: 'CONNECT_MOBILE_OWNERSHIP',
|
|
197
|
+
element: CollectMobileOwnership
|
|
191
198
|
}
|
|
192
199
|
];
|
|
193
200
|
export var connectExpressFeatureScreens = [
|
|
@@ -278,6 +285,10 @@ export var connectExpressFeatureScreens = [
|
|
|
278
285
|
{
|
|
279
286
|
name: 'CONNECT_EXPRESS_OPERATOR_ERROR_STEP',
|
|
280
287
|
element: ConnectExpressOperatorError
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
name: 'COLLECT_MOBILE_OWNERSHIP',
|
|
291
|
+
element: ConnectExpressCollectMobileOwnership
|
|
281
292
|
}
|
|
282
293
|
];
|
|
283
294
|
export var authFeatureScreens = [
|
|
@@ -406,6 +417,10 @@ export var businessFeatureScreens = [
|
|
|
406
417
|
{
|
|
407
418
|
name: 'BUSINESS_OPERATOR_ERROR_STEP',
|
|
408
419
|
element: BusinessOperatorError
|
|
420
|
+
},
|
|
421
|
+
{
|
|
422
|
+
name: 'BUSINESS_MOBILE_OWNERSHIP',
|
|
423
|
+
element: BusinessCollectMobileOwnership
|
|
409
424
|
}
|
|
410
425
|
];
|
|
411
426
|
export var passwordFeatureScreens = [
|