@tap-payments/auth-jsconnect 2.1.75-test → 2.1.77-test
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/@types/app.d.ts +24 -0
- package/build/@types/app.js +13 -0
- package/build/@types/form.d.ts +15 -1
- package/build/@types/index.d.ts +1 -0
- package/build/@types/index.js +1 -0
- package/build/@types/user.d.ts +141 -0
- package/build/@types/user.js +1 -0
- package/build/api/board.d.ts +16 -0
- package/build/api/board.js +10 -1
- package/build/api/country.d.ts +4 -0
- package/build/api/country.js +9 -1
- package/build/api/index.d.ts +8 -3
- package/build/api/individual.d.ts +43 -1
- package/build/api/individual.js +9 -1
- package/build/api/user.d.ts +6 -0
- package/build/api/user.js +9 -1
- package/build/assets/locales/ar.json +22 -2
- package/build/assets/locales/en.json +22 -1
- package/build/components/SimpleList/SimpleList.d.ts +2 -0
- package/build/constants/api.d.ts +1 -0
- package/build/constants/api.js +3 -1
- package/build/constants/app.d.ts +1 -0
- package/build/constants/app.js +20 -7
- package/build/constants/assets.d.ts +4 -0
- package/build/constants/assets.js +4 -0
- package/build/features/app/bank/bankStore.d.ts +1 -0
- package/build/features/app/bank/bankStore.js +2 -1
- package/build/features/app/brand/brandStore.d.ts +2 -0
- package/build/features/app/brand/brandStore.js +3 -1
- package/build/features/app/business/businessStore.js +1 -1
- package/build/features/app/entity/entityStore.d.ts +2 -0
- package/build/features/app/entity/entityStore.js +3 -1
- package/build/features/app/individual/individualStore.d.ts +28 -3
- package/build/features/app/individual/individualStore.js +466 -118
- package/build/features/app/password/passwordStore.js +2 -2
- package/build/features/app/tax/taxStore.js +30 -29
- package/build/features/bank/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +2 -2
- package/build/features/brand/screens/BrandActivities/ActivitiesList.d.ts +3 -3
- package/build/features/brand/screens/BrandActivities/CustomerBase.d.ts +2 -2
- package/build/features/brand/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +2 -2
- package/build/features/business/screens/Activities/ActivitiesList.d.ts +3 -3
- package/build/features/business/screens/BusinessType/LicenseType.d.ts +2 -2
- package/build/features/business/screens/Customers/CustomerLocations.d.ts +2 -2
- package/build/features/business/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +2 -2
- package/build/features/connectExpress/screens/CollectBusinessInfo/LicenseType.d.ts +2 -2
- package/build/features/connectExpress/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +2 -2
- package/build/features/entity/screens/EntityCapital/ActivityList.d.ts +3 -3
- package/build/features/entity/screens/EntityName/EntityTypeList.d.ts +3 -3
- package/build/features/entity/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +2 -2
- package/build/features/featuresScreens.js +10 -0
- package/build/features/individual/screens/AdditionalIndividualInfo/AdditionalIndividualInfo.d.ts +13 -0
- package/build/features/individual/screens/AdditionalIndividualInfo/AdditionalIndividualInfo.js +43 -8
- package/build/features/individual/screens/AdditionalIndividualInfo/EmployerLocation.js +3 -13
- package/build/features/individual/screens/AdditionalIndividualInfo/InfluencerSwitch.js +9 -2
- package/build/features/individual/screens/AdditionalIndividualInfo/MonthlyIncome.js +11 -17
- package/build/features/individual/screens/AdditionalIndividualInfo/Occupation.js +12 -16
- package/build/features/individual/screens/AdditionalIndividualInfo/PEPSwitch.d.ts +2 -2
- package/build/features/individual/screens/AdditionalIndividualInfo/PEPSwitch.js +9 -2
- package/build/features/individual/screens/AdditionalIndividualInfo/ShareCount.d.ts +6 -0
- package/build/features/individual/screens/AdditionalIndividualInfo/ShareCount.js +35 -0
- package/build/features/individual/screens/AdditionalIndividualInfo/ShareValue.d.ts +6 -0
- package/build/features/individual/screens/AdditionalIndividualInfo/ShareValue.js +41 -0
- package/build/features/individual/screens/AdditionalIndividualInfo/SourceOfIncome.js +9 -6
- package/build/features/individual/screens/AdditionalIndividualInfo/validation.d.ts +20 -17
- package/build/features/individual/screens/AdditionalIndividualInfo/validation.js +18 -25
- package/build/features/individual/screens/IndividualList/IndividualList.d.ts +31 -0
- package/build/features/individual/screens/IndividualList/IndividualList.js +59 -0
- package/build/features/individual/screens/IndividualList/UserList.d.ts +5 -0
- package/build/features/individual/screens/IndividualList/UserList.js +138 -0
- package/build/features/individual/screens/IndividualList/index.d.ts +3 -0
- package/build/features/individual/screens/IndividualList/index.js +2 -0
- package/build/features/individual/screens/IndividualPersonalInfo/BirthCity.d.ts +8 -0
- package/build/features/individual/screens/IndividualPersonalInfo/BirthCity.js +90 -0
- package/build/features/individual/screens/IndividualPersonalInfo/BirthCountry.d.ts +10 -0
- package/build/features/individual/screens/IndividualPersonalInfo/BirthCountry.js +82 -0
- package/build/features/individual/screens/IndividualPersonalInfo/DOB.d.ts +7 -0
- package/build/features/individual/screens/IndividualPersonalInfo/DOB.js +46 -0
- package/build/features/individual/screens/IndividualPersonalInfo/Email.d.ts +6 -0
- package/build/features/individual/screens/IndividualPersonalInfo/Email.js +50 -0
- package/build/features/individual/screens/IndividualPersonalInfo/ExpiryDate.d.ts +7 -0
- package/build/features/individual/screens/IndividualPersonalInfo/ExpiryDate.js +49 -0
- package/build/features/individual/screens/IndividualPersonalInfo/Gender.d.ts +34 -0
- package/build/features/individual/screens/IndividualPersonalInfo/Gender.js +81 -0
- package/build/features/individual/screens/IndividualPersonalInfo/ID.d.ts +6 -0
- package/build/features/individual/screens/IndividualPersonalInfo/ID.js +48 -0
- package/build/features/individual/screens/IndividualPersonalInfo/IndividualPersonalInfo.d.ts +21 -0
- package/build/features/individual/screens/IndividualPersonalInfo/IndividualPersonalInfo.js +126 -0
- package/build/features/individual/screens/IndividualPersonalInfo/IssuedCountry.d.ts +10 -0
- package/build/features/individual/screens/IndividualPersonalInfo/IssuedCountry.js +88 -0
- package/build/features/individual/screens/IndividualPersonalInfo/MobileNumber.d.ts +10 -0
- package/build/features/individual/screens/IndividualPersonalInfo/MobileNumber.js +145 -0
- package/build/features/individual/screens/IndividualPersonalInfo/Name.d.ts +6 -0
- package/build/features/individual/screens/IndividualPersonalInfo/Name.js +52 -0
- package/build/features/individual/screens/IndividualPersonalInfo/Nationality.d.ts +10 -0
- package/build/features/individual/screens/IndividualPersonalInfo/Nationality.js +88 -0
- package/build/features/individual/screens/IndividualPersonalInfo/index.d.ts +3 -0
- package/build/features/individual/screens/IndividualPersonalInfo/index.js +2 -0
- package/build/features/individual/screens/IndividualPersonalInfo/validation.d.ts +38 -0
- package/build/features/individual/screens/IndividualPersonalInfo/validation.js +68 -0
- package/build/features/individual/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +2 -2
- package/build/features/password/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +2 -2
- package/build/features/shared/Address/Address.d.ts +6 -1
- package/build/features/shared/Address/Address.js +40 -30
- package/build/features/shared/Address/CountryList.d.ts +1 -1
- package/build/features/shared/Address/InputSelect.d.ts +1 -1
- package/build/features/shared/Address/InputText.d.ts +2 -1
- package/build/features/shared/Address/InputText.js +2 -2
- package/build/features/shared/Button/FlowsButtons.d.ts +1 -0
- package/build/features/shared/Button/FlowsButtons.js +2 -2
- package/build/features/shared/Button/ListButton.d.ts +17 -0
- package/build/features/shared/Button/ListButton.js +107 -0
- package/build/features/shared/Button/index.d.ts +2 -1
- package/build/features/shared/Button/index.js +2 -1
- package/build/features/shared/SuccessFlowButtons/SuccessFlowButtons.d.ts +2 -1
- package/build/features/shared/SuccessFlowButtons/SuccessFlowButtons.js +6 -4
- package/build/features/tax/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +2 -2
- package/build/features/tax/screens/TaxDetails/TaxDetails.js +2 -1
- package/build/features/tax/screens/TaxDetails/VATId.js +8 -3
- package/build/features/tax/screens/TaxDetails/validation.d.ts +4 -4
- package/build/features/tax/screens/TaxDetails/validation.js +10 -5
- package/build/utils/string.d.ts +3 -2
- package/build/utils/string.js +16 -3
- package/package.json +1 -1
- package/build/features/individual/screens/ShowIndividualInfo/ShowOwnerInfo.d.ts +0 -19
- package/build/features/individual/screens/ShowIndividualInfo/ShowOwnerInfo.js +0 -52
- package/build/features/individual/screens/ShowIndividualInfo/index.d.ts +0 -3
- package/build/features/individual/screens/ShowIndividualInfo/index.js +0 -2
- package/build/features/individual/screens/ShowIndividualInfo/info.d.ts +0 -7
- package/build/features/individual/screens/ShowIndividualInfo/info.js +0 -28
|
@@ -0,0 +1,145 @@
|
|
|
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 { useTranslation } from 'react-i18next';
|
|
26
|
+
import { useController, useFormContext } from 'react-hook-form';
|
|
27
|
+
import Box from '@mui/material/Box';
|
|
28
|
+
import { styled, alpha } from '@mui/material/styles';
|
|
29
|
+
import { removeAllCharsFromNumber } from '../../../../utils';
|
|
30
|
+
import { useLanguage, useAppSelector } from '../../../../hooks';
|
|
31
|
+
import { FieldType } from '../../../../@types';
|
|
32
|
+
import Text from '../../../../components/Text';
|
|
33
|
+
import Collapse from '../../../../components/Collapse';
|
|
34
|
+
import ExpandIcon from '../../../../components/ExpandIcon';
|
|
35
|
+
import SimpleList from '../../../../components/SimpleList';
|
|
36
|
+
import ClearIcon from '../../../shared/ClearIcon';
|
|
37
|
+
import CheckIcon from '../../../shared/CheckIcon';
|
|
38
|
+
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
39
|
+
import Input from '../../../shared/Input';
|
|
40
|
+
import { individualSelector } from '../../../app/individual/individualStore';
|
|
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, _e, _f, _g;
|
|
84
|
+
var countries = _a.countries, rest = __rest(_a, ["countries"]);
|
|
85
|
+
var _h = React.useState(countries || []), countriesCode = _h[0], setCountries = _h[1];
|
|
86
|
+
var _j = React.useState(null), anchorEl = _j[0], setAnchorEl = _j[1];
|
|
87
|
+
var t = useTranslation().t;
|
|
88
|
+
var isAr = useLanguage().isAr;
|
|
89
|
+
var _k = useFormContext(), control = _k.control, setValue = _k.setValue;
|
|
90
|
+
var data = useAppSelector(individualSelector).data;
|
|
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 === null || countryCodeValue === void 0 ? void 0 : 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
|
+
var verify = data.verify;
|
|
102
|
+
var user = (verify.responseBody || {}).user;
|
|
103
|
+
var disabled = ((_g = (_f = (_e = user === null || user === void 0 ? void 0 : user.data_status) === null || _e === void 0 ? void 0 : _e.contact) === null || _f === void 0 ? void 0 : _f.phone) === null || _g === void 0 ? void 0 : _g.number) === FieldType.NON_EDITABLE;
|
|
104
|
+
React.useEffect(function () {
|
|
105
|
+
if (mobileValue)
|
|
106
|
+
setValue('mobile', mobileValue, { shouldValidate: true });
|
|
107
|
+
}, []);
|
|
108
|
+
var onPhoneNumberChange = function (_a) {
|
|
109
|
+
var target = _a.target;
|
|
110
|
+
var value = removeAllCharsFromNumber(target.value);
|
|
111
|
+
phoneControl.field.onChange(value);
|
|
112
|
+
};
|
|
113
|
+
var clearMobileNumber = function () {
|
|
114
|
+
phoneControl.field.onChange('');
|
|
115
|
+
};
|
|
116
|
+
var onCloseCountryList = function () {
|
|
117
|
+
var _a;
|
|
118
|
+
if (anchorEl) {
|
|
119
|
+
setAnchorEl(null);
|
|
120
|
+
(_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
|
|
121
|
+
}
|
|
122
|
+
setCountries(countries);
|
|
123
|
+
};
|
|
124
|
+
var toggleCountryList = function () {
|
|
125
|
+
var _a, _b;
|
|
126
|
+
if (anchorEl) {
|
|
127
|
+
setAnchorEl(null);
|
|
128
|
+
(_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
|
|
129
|
+
setCountries(countries);
|
|
130
|
+
}
|
|
131
|
+
else {
|
|
132
|
+
(_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
|
|
133
|
+
setAnchorEl(true);
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
var onSelectItem = function (country) {
|
|
137
|
+
onCloseCountryList();
|
|
138
|
+
setValue('mobile', '');
|
|
139
|
+
countryCodeControl.field.onChange(country);
|
|
140
|
+
};
|
|
141
|
+
return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', disabled: disabled || !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: disabled ? undefined : function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: disabled ? (_jsx(_Fragment, {})) : !!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: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', searchValuePath: ['idd_prefix', 'capital', 'name.arabic', 'name.english'], list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
|
|
142
|
+
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, {})] }));
|
|
143
|
+
} }) }))] })) })));
|
|
144
|
+
});
|
|
145
|
+
export default React.memo(MobileNumber);
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } 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 { styled } from '@mui/material/styles';
|
|
17
|
+
import { removeAllOtherThanAlphabetAndSpace } from '../../../../utils';
|
|
18
|
+
import { useAppSelector } from '../../../../hooks';
|
|
19
|
+
import { FieldType } from '../../../../@types';
|
|
20
|
+
import Collapse from '../../../../components/Collapse';
|
|
21
|
+
import { ScreenContainer } from '../../../shared/Containers';
|
|
22
|
+
import Input from '../../../shared/Input';
|
|
23
|
+
import ClearIcon from '../../../shared/ClearIcon';
|
|
24
|
+
import CheckIcon from '../../../shared/CheckIcon';
|
|
25
|
+
import { individualSelector } from '../../../app/individual/individualStore';
|
|
26
|
+
var InputStyled = styled(Input)(function () { return ({
|
|
27
|
+
input: {
|
|
28
|
+
textTransform: 'capitalize'
|
|
29
|
+
}
|
|
30
|
+
}); });
|
|
31
|
+
var Name = function (_a) {
|
|
32
|
+
var _b, _c;
|
|
33
|
+
var show = _a.show;
|
|
34
|
+
var t = useTranslation().t;
|
|
35
|
+
var control = useFormContext().control;
|
|
36
|
+
var nameControl = useController({ name: 'name', control: control });
|
|
37
|
+
var data = useAppSelector(individualSelector).data;
|
|
38
|
+
var verify = data.verify;
|
|
39
|
+
var user = (verify.responseBody || {}).user;
|
|
40
|
+
var handleNameChange = function (event) {
|
|
41
|
+
var value = removeAllOtherThanAlphabetAndSpace(event.target.value);
|
|
42
|
+
nameControl.field.onChange(value);
|
|
43
|
+
};
|
|
44
|
+
var nameValue = nameControl.field.value;
|
|
45
|
+
var error = (_b = nameControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
46
|
+
var disabled = ((_c = user === null || user === void 0 ? void 0 : user.data_status) === null || _c === void 0 ? void 0 : _c.name) === FieldType.NON_EDITABLE;
|
|
47
|
+
var clearNumber = function () {
|
|
48
|
+
nameControl.field.onChange('');
|
|
49
|
+
};
|
|
50
|
+
return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mb: 3, mt: 2.5 } }, { children: _jsx(InputStyled, { label: t('signup_merchant_name_label'), value: nameValue, disabled: disabled, onChange: handleNameChange, placeholder: t('signup_merchant_name_label'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && nameValue ? _jsx(CheckIcon, {}) : nameValue && _jsx(ClearIcon, { onClick: clearNumber }) }) })) })));
|
|
51
|
+
};
|
|
52
|
+
export default React.memo(Name);
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { CountryCode } from '../../../../@types';
|
|
3
|
+
interface NationalityProps {
|
|
4
|
+
countries: Array<CountryCode>;
|
|
5
|
+
show: boolean;
|
|
6
|
+
onListOpen?: () => void;
|
|
7
|
+
onListClose?: () => void;
|
|
8
|
+
}
|
|
9
|
+
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<NationalityProps & React.RefAttributes<unknown>>>;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,88 @@
|
|
|
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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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 } from '@mui/material/styles';
|
|
29
|
+
import CheckIcon from '@mui/icons-material/Check';
|
|
30
|
+
import { useLanguage, useAppSelector } from '../../../../hooks';
|
|
31
|
+
import { FieldType } from '../../../../@types';
|
|
32
|
+
import Collapse from '../../../../components/Collapse';
|
|
33
|
+
import ExpandIcon from '../../../../components/ExpandIcon';
|
|
34
|
+
import Text from '../../../../components/Text';
|
|
35
|
+
import SimpleList from '../../../../components/SimpleList';
|
|
36
|
+
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
37
|
+
import Input from '../../../shared/Input';
|
|
38
|
+
import { individualSelector } from '../../../app/individual/individualStore';
|
|
39
|
+
var CountryItemContainer = styled(Box)(function () { return ({
|
|
40
|
+
display: 'flex'
|
|
41
|
+
}); });
|
|
42
|
+
var CountryNameText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
|
|
43
|
+
var theme = _a.theme, isSelected = _a.isSelected;
|
|
44
|
+
return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
|
|
45
|
+
});
|
|
46
|
+
var CheckIconStyled = styled(CheckIcon)(function (_a) {
|
|
47
|
+
var theme = _a.theme;
|
|
48
|
+
return ({
|
|
49
|
+
color: theme.palette.success.main,
|
|
50
|
+
display: 'flex',
|
|
51
|
+
alignItems: 'flex-end'
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
var Nationality = React.forwardRef(function (_a, ref) {
|
|
55
|
+
var _b, _c, _d, _e;
|
|
56
|
+
var countries = _a.countries, rest = __rest(_a, ["countries"]);
|
|
57
|
+
var _f = React.useState(countries), locationCountries = _f[0], setCountries = _f[1];
|
|
58
|
+
var _g = React.useState(null), anchorEl = _g[0], setAnchorEl = _g[1];
|
|
59
|
+
var t = useTranslation().t;
|
|
60
|
+
var isAr = useLanguage().isAr;
|
|
61
|
+
var control = useFormContext().control;
|
|
62
|
+
var data = useAppSelector(individualSelector).data;
|
|
63
|
+
var verify = data.verify;
|
|
64
|
+
var user = (verify.responseBody || {}).user;
|
|
65
|
+
var nationalityControl = useController({ control: control, name: 'nationality' });
|
|
66
|
+
var disabled = ((_b = user === null || user === void 0 ? void 0 : user.data_status) === null || _b === void 0 ? void 0 : _b.nationality) === FieldType.NON_EDITABLE;
|
|
67
|
+
var onOpenCountrySelect = function (event) {
|
|
68
|
+
var _a;
|
|
69
|
+
setAnchorEl(event.currentTarget);
|
|
70
|
+
(_a = rest.onListOpen) === null || _a === void 0 ? void 0 : _a.call(rest);
|
|
71
|
+
};
|
|
72
|
+
var onCloseCountrySelect = function () {
|
|
73
|
+
var _a;
|
|
74
|
+
setAnchorEl(null);
|
|
75
|
+
(_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
|
|
76
|
+
setCountries(countries);
|
|
77
|
+
};
|
|
78
|
+
var onSelectItem = function (country) {
|
|
79
|
+
onCloseCountrySelect();
|
|
80
|
+
nationalityControl.field.onChange(country);
|
|
81
|
+
};
|
|
82
|
+
var location = nationalityControl.field.value;
|
|
83
|
+
var error = (_c = nationalityControl.fieldState.error) === null || _c === void 0 ? void 0 : _c.message;
|
|
84
|
+
return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { pt: 2.5 } }, { children: [_jsx(Input, { label: t('nationality_label'), readOnly: true, disabled: disabled, onClick: disabled ? undefined : !!anchorEl ? function () { return onCloseCountrySelect(); } : onOpenCountrySelect, endAdornment: disabled ? _jsx(_Fragment, {}) : _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_nationality'), value: (isAr ? (_d = location === null || location === void 0 ? void 0 : location.name) === null || _d === void 0 ? void 0 : _d.arabic : (_e = location === null || location === void 0 ? void 0 : location.name) === null || _e === void 0 ? void 0 : _e.english) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', searchValuePath: ['idd_prefix', 'capital', 'name.arabic', 'name.english'], list: locationCountries, onSelectItem: onSelectItem, renderItem: function (item) {
|
|
85
|
+
return (_jsxs(_Fragment, { children: [_jsx(CountryItemContainer, { children: _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (location === null || location === void 0 ? void 0 : location.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english })) }), item.idd_prefix === (location === null || location === void 0 ? void 0 : location.idd_prefix) && _jsx(CheckIconStyled, {})] }));
|
|
86
|
+
} }) }))] })) })));
|
|
87
|
+
});
|
|
88
|
+
export default React.memo(Nationality);
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as yup from 'yup';
|
|
2
|
+
export declare const IndividualInfoValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
3
|
+
name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
4
|
+
mobile: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
5
|
+
email: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
6
|
+
gender: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
7
|
+
nid: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
8
|
+
issuedCountry: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
9
|
+
expiryDate: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
10
|
+
dob: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
11
|
+
placeOfBirthCountry: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
12
|
+
placeOfBirthCity: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
13
|
+
nationality: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
14
|
+
}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
15
|
+
name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
16
|
+
mobile: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
17
|
+
email: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
18
|
+
gender: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
19
|
+
nid: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
20
|
+
issuedCountry: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
21
|
+
expiryDate: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
22
|
+
dob: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
23
|
+
placeOfBirthCountry: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
24
|
+
placeOfBirthCity: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
25
|
+
nationality: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
26
|
+
}>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
27
|
+
name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
28
|
+
mobile: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
29
|
+
email: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
30
|
+
gender: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
31
|
+
nid: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
32
|
+
issuedCountry: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
33
|
+
expiryDate: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
34
|
+
dob: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
|
|
35
|
+
placeOfBirthCountry: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
36
|
+
placeOfBirthCity: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
37
|
+
nationality: import("yup/lib/object").OptionalObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
|
|
38
|
+
}>>>;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import * as yup from 'yup';
|
|
2
|
+
import { REGEX_FULL_NAME } from '../../../../constants';
|
|
3
|
+
export var IndividualInfoValidationSchema = yup.object().shape({
|
|
4
|
+
name: yup
|
|
5
|
+
.string()
|
|
6
|
+
.test({
|
|
7
|
+
test: function (value) {
|
|
8
|
+
if (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0) {
|
|
9
|
+
var name_1 = value || '';
|
|
10
|
+
var isMatch = name_1.match(REGEX_FULL_NAME);
|
|
11
|
+
return isMatch ? true : this.createError({ message: 'please write your first and last name' });
|
|
12
|
+
}
|
|
13
|
+
return true;
|
|
14
|
+
}
|
|
15
|
+
})
|
|
16
|
+
.optional(),
|
|
17
|
+
mobile: yup
|
|
18
|
+
.string()
|
|
19
|
+
.test({
|
|
20
|
+
test: function (value) {
|
|
21
|
+
if (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0) {
|
|
22
|
+
var countryCode = this.parent.countryCode;
|
|
23
|
+
var isSA = countryCode.iso2 === 'SA';
|
|
24
|
+
var digits = countryCode.digits;
|
|
25
|
+
var mobileValue = value || '';
|
|
26
|
+
var valueLen = mobileValue.length;
|
|
27
|
+
var isNumber = mobileValue.match(/^[0-9]/g);
|
|
28
|
+
if (!isNumber)
|
|
29
|
+
return this.createError({ message: 'enter_valid_mobile_number' });
|
|
30
|
+
var isStartWithZero = mobileValue.startsWith('05');
|
|
31
|
+
var isStartWith5 = mobileValue.startsWith('5');
|
|
32
|
+
var isSaudiNumber = isStartWith5 || isStartWithZero;
|
|
33
|
+
if (isSA) {
|
|
34
|
+
if (!isSaudiNumber)
|
|
35
|
+
return this.createError({ message: 'start_with_number' });
|
|
36
|
+
var requiredLen = isStartWith5 ? digits - 1 : digits;
|
|
37
|
+
return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
38
|
+
}
|
|
39
|
+
return valueLen === digits ? true : this.createError({ message: 'enter_valid_mobile_number' });
|
|
40
|
+
}
|
|
41
|
+
return true;
|
|
42
|
+
}
|
|
43
|
+
})
|
|
44
|
+
.optional(),
|
|
45
|
+
email: yup.string().email('email_not_valid').optional(),
|
|
46
|
+
gender: yup.string().optional(),
|
|
47
|
+
nid: yup
|
|
48
|
+
.string()
|
|
49
|
+
.test({
|
|
50
|
+
test: function (value) {
|
|
51
|
+
var id = value || '';
|
|
52
|
+
if (id.length > 0) {
|
|
53
|
+
if (id.length < 10)
|
|
54
|
+
return this.createError({ message: 'signup_invalid_national_id' });
|
|
55
|
+
var isMatch = id.match(/^(1|2)([0-9]{1,})$/g);
|
|
56
|
+
return isMatch ? true : this.createError({ message: 'signup_invalid_national_id_format' });
|
|
57
|
+
}
|
|
58
|
+
return true;
|
|
59
|
+
}
|
|
60
|
+
})
|
|
61
|
+
.optional(),
|
|
62
|
+
issuedCountry: yup.object().optional(),
|
|
63
|
+
expiryDate: yup.string().min(5).optional(),
|
|
64
|
+
dob: yup.string().min(5).optional(),
|
|
65
|
+
placeOfBirthCountry: yup.object().optional(),
|
|
66
|
+
placeOfBirthCity: yup.object().optional(),
|
|
67
|
+
nationality: yup.object().optional()
|
|
68
|
+
});
|
|
@@ -16,7 +16,7 @@ import { individualSelector } from '../../../app/individual/individualStore';
|
|
|
16
16
|
import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
|
|
17
17
|
var SuccessWithFlowButtons = function () {
|
|
18
18
|
var data = useAppSelector(individualSelector).data;
|
|
19
|
-
var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name;
|
|
20
|
-
return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, flows: flows || [] }));
|
|
19
|
+
var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals;
|
|
20
|
+
return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [] }));
|
|
21
21
|
};
|
|
22
22
|
export default memo(SuccessWithFlowButtons);
|
|
@@ -16,7 +16,7 @@ import { passwordSelector } from '../../../app/password/passwordStore';
|
|
|
16
16
|
import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
|
|
17
17
|
var SuccessWithFlowButtons = function () {
|
|
18
18
|
var data = useAppSelector(passwordSelector).data;
|
|
19
|
-
var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name;
|
|
20
|
-
return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, flows: flows || [] }));
|
|
19
|
+
var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals;
|
|
20
|
+
return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [] }));
|
|
21
21
|
};
|
|
22
22
|
export default memo(SuccessWithFlowButtons);
|
|
@@ -3,9 +3,14 @@ import { CountryCode, AddressFormat } from '../../../@types';
|
|
|
3
3
|
interface Props {
|
|
4
4
|
countryList: CountryCode[];
|
|
5
5
|
format: AddressFormat[];
|
|
6
|
+
isEditable: boolean;
|
|
6
7
|
onAddressChange: (value: Record<string, string>, isValid: boolean) => void;
|
|
8
|
+
showSubmitButton: boolean;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
error?: string;
|
|
7
11
|
defaultValues?: Record<string, string>;
|
|
8
12
|
disableCountry?: boolean;
|
|
13
|
+
onBack?: () => void;
|
|
9
14
|
}
|
|
10
|
-
export default function Address({ format, countryList, onAddressChange, defaultValues, disableCountry }: Props): JSX.Element;
|
|
15
|
+
export default function Address({ format, countryList, onAddressChange, defaultValues, disableCountry, loading, error, onBack, showSubmitButton, isEditable }: Props): JSX.Element;
|
|
11
16
|
export {};
|
|
@@ -9,55 +9,65 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import React, { useMemo } from 'react';
|
|
14
|
-
import
|
|
14
|
+
import { useTranslation } from 'react-i18next';
|
|
15
15
|
import { useForm, Controller } from 'react-hook-form';
|
|
16
|
+
import Box from '@mui/material/Box';
|
|
17
|
+
import { useLanguage } from '../../../hooks';
|
|
18
|
+
import Collapse from '../../../components/Collapse';
|
|
16
19
|
import CountryListComponent from './CountryList';
|
|
17
20
|
import InputSelect from './InputSelect';
|
|
18
21
|
import InputText from './InputText';
|
|
22
|
+
import { Button } from '../Button';
|
|
19
23
|
export default function Address(_a) {
|
|
20
|
-
var format = _a.format, countryList = _a.countryList, onAddressChange = _a.onAddressChange, defaultValues = _a.defaultValues, disableCountry = _a.disableCountry;
|
|
24
|
+
var format = _a.format, countryList = _a.countryList, onAddressChange = _a.onAddressChange, defaultValues = _a.defaultValues, disableCountry = _a.disableCountry, loading = _a.loading, error = _a.error, onBack = _a.onBack, showSubmitButton = _a.showSubmitButton, isEditable = _a.isEditable;
|
|
21
25
|
var _b = useForm({ defaultValues: defaultValues, mode: 'onChange' }), watch = _b.watch, control = _b.control, formState = _b.formState, getValues = _b.getValues;
|
|
22
26
|
var values = getValues();
|
|
27
|
+
var t = useTranslation().t;
|
|
28
|
+
var isAr = useLanguage().isAr;
|
|
23
29
|
React.useEffect(function () {
|
|
24
|
-
|
|
30
|
+
if (!showSubmitButton)
|
|
31
|
+
onAddressChange(values, formState.isValid);
|
|
25
32
|
}, [values, formState.isValid]);
|
|
26
33
|
var countryIso2 = useMemo(function () {
|
|
27
34
|
var _a;
|
|
28
35
|
var index = countryList.findIndex(function (item) { return item.countryId === watch('country'); });
|
|
29
36
|
return (_a = countryList[index]) === null || _a === void 0 ? void 0 : _a.iso2;
|
|
30
37
|
}, [watch('country')]);
|
|
31
|
-
return (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
38
|
+
return (_jsxs(Box, __assign({ component: 'form' }, { children: [format.map(function (item) {
|
|
39
|
+
var isCountry = item.code === 'country';
|
|
40
|
+
var isSelect = item.type === 'select';
|
|
41
|
+
if (isCountry) {
|
|
42
|
+
return (_jsx(Controller, { render: function (_a) {
|
|
43
|
+
var _b;
|
|
44
|
+
var field = _a.field, fieldState = _a.fieldState;
|
|
45
|
+
return (_jsx(CountryListComponent, { label: "address_".concat(item.code, "_label"), placeholder: "address_".concat(item.code, "_placeholder"), list: countryList, onSelect: function (value) {
|
|
46
|
+
console.log('value', value);
|
|
47
|
+
field.onChange(value);
|
|
48
|
+
}, value: field.value, error: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, disabled: isEditable ? !!disableCountry : false, isRequired: item.required }));
|
|
49
|
+
}, rules: {
|
|
50
|
+
required: item.required && "address_".concat(item.code, "_required")
|
|
51
|
+
}, control: control, name: item.code }, item.code));
|
|
52
|
+
}
|
|
53
|
+
if (isSelect) {
|
|
54
|
+
return (_jsx(Controller, { render: function (_a) {
|
|
55
|
+
var _b;
|
|
56
|
+
var field = _a.field, fieldState = _a.fieldState;
|
|
57
|
+
return (_jsx(InputSelect, { label: "address_".concat(item.code, "_label"), placeholder: "address_".concat(item.code, "_placeholder"), countryIso2: countryIso2, fetchURL: item.retrieve_uri, onSelect: function (value) { return field.onChange(value); }, error: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, isRequired: item.required, value: field.value || '', disabled: isEditable ? !countryIso2 : false }));
|
|
58
|
+
}, rules: {
|
|
59
|
+
required: item.required && "address_".concat(item.code, "_required")
|
|
60
|
+
}, control: control, name: item.code }, item.code));
|
|
61
|
+
}
|
|
47
62
|
return (_jsx(Controller, { render: function (_a) {
|
|
48
63
|
var _b;
|
|
49
64
|
var field = _a.field, fieldState = _a.fieldState;
|
|
50
|
-
return (_jsx(
|
|
65
|
+
return (_jsx(InputText, { label: "address_".concat(item.code, "_label"), placeholder: "address_".concat(item.code, "_placeholder"), onChange: function (value) { return field.onChange(value); }, error: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, isRequired: item.required, disabled: !isEditable, value: field.value || '' }));
|
|
51
66
|
}, rules: {
|
|
52
67
|
required: item.required && "address_".concat(item.code, "_required")
|
|
53
68
|
}, control: control, name: item.code }, item.code));
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
return (_jsx(InputText, { label: "address_".concat(item.code, "_label"), placeholder: "address_".concat(item.code, "_placeholder"), onChange: function (value) { return field.onChange(value); }, error: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message, isRequired: item.required, value: field.value || '' }));
|
|
59
|
-
}, rules: {
|
|
60
|
-
required: item.required && "address_".concat(item.code, "_required")
|
|
61
|
-
}, control: control, name: item.code }, item.code));
|
|
62
|
-
}) })));
|
|
69
|
+
}), _jsx(Collapse, __assign({ in: showSubmitButton }, { children: _jsx(Button, __assign({ onClick: function (e) {
|
|
70
|
+
e.preventDefault();
|
|
71
|
+
onAddressChange(values, formState.isValid);
|
|
72
|
+
}, onBackClicked: function () { return onBack === null || onBack === void 0 ? void 0 : onBack(); }, isAr: isAr, disabled: !formState.isValid, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })));
|
|
63
73
|
}
|
|
@@ -30,7 +30,7 @@ export declare const LabelContainerStyled: import("@emotion/styled").StyledCompo
|
|
|
30
30
|
export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<{
|
|
31
31
|
children?: React.ReactNode;
|
|
32
32
|
classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
|
|
33
|
-
color?: "inherit" | "disabled" | "error" | "
|
|
33
|
+
color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
|
|
34
34
|
fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
|
|
35
35
|
htmlColor?: string | undefined;
|
|
36
36
|
inheritViewBox?: boolean | undefined;
|
|
@@ -29,7 +29,7 @@ export declare const LabelContainerStyled: import("@emotion/styled").StyledCompo
|
|
|
29
29
|
export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<{
|
|
30
30
|
children?: React.ReactNode;
|
|
31
31
|
classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
|
|
32
|
-
color?: "inherit" | "disabled" | "error" | "
|
|
32
|
+
color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
|
|
33
33
|
fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
|
|
34
34
|
htmlColor?: string | undefined;
|
|
35
35
|
inheritViewBox?: boolean | undefined;
|
|
@@ -6,6 +6,7 @@ interface Props {
|
|
|
6
6
|
error?: string;
|
|
7
7
|
onChange: (value: string) => void;
|
|
8
8
|
isRequired?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
9
10
|
}
|
|
10
|
-
declare const _default: React.MemoExoticComponent<({ label, onChange, isRequired, placeholder, value, error }: Props) => JSX.Element>;
|
|
11
|
+
declare const _default: React.MemoExoticComponent<({ label, onChange, isRequired, placeholder, value, error, disabled }: Props) => JSX.Element>;
|
|
11
12
|
export default _default;
|
|
@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
|
|
|
5
5
|
import CheckIcon from '../CheckIcon';
|
|
6
6
|
import ClearIcon from '../ClearIcon';
|
|
7
7
|
var InputText = function (_a) {
|
|
8
|
-
var label = _a.label, onChange = _a.onChange, isRequired = _a.isRequired, placeholder = _a.placeholder, value = _a.value, error = _a.error;
|
|
8
|
+
var label = _a.label, onChange = _a.onChange, isRequired = _a.isRequired, placeholder = _a.placeholder, value = _a.value, error = _a.error, disabled = _a.disabled;
|
|
9
9
|
var t = useTranslation().t;
|
|
10
|
-
return (_jsx(_Fragment, { children: _jsx(Input, { labelSx: { paddingTop: '20px' }, label: t(label), value: value, required: isRequired, onChange: function (e) { return onChange(e.target.value); }, placeholder: t(placeholder), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && value ? _jsx(CheckIcon, {}) : value && _jsx(ClearIcon, { onClick: function () { return onChange(''); } }) }) }));
|
|
10
|
+
return (_jsx(_Fragment, { children: _jsx(Input, { labelSx: { paddingTop: '20px' }, label: t(label), value: value, disabled: disabled, required: isRequired, onChange: function (e) { return onChange(e.target.value); }, placeholder: t(placeholder), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && value ? _jsx(CheckIcon, {}) : value && _jsx(ClearIcon, { onClick: function () { return onChange(''); } }) }) }));
|
|
11
11
|
};
|
|
12
12
|
export default memo(InputText);
|