@tap-payments/auth-jsconnect 2.4.14-test → 2.4.15-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 +28 -1
- package/build/features/app/individual/individualStore.js +8 -5
- package/build/features/individual/screens/AdditionalIndividualInfo/AdditionalIndividualInfo.js +28 -21
- package/build/features/individual/screens/AdditionalIndividualInfo/CivilIDFile.js +10 -4
- package/build/features/individual/screens/AdditionalIndividualInfo/InfluencerSwitch.d.ts +2 -1
- package/build/features/individual/screens/AdditionalIndividualInfo/InfluencerSwitch.js +13 -10
- package/build/features/individual/screens/AdditionalIndividualInfo/MonthlyIncome.js +14 -19
- package/build/features/individual/screens/AdditionalIndividualInfo/Occupation.d.ts +1 -0
- package/build/features/individual/screens/AdditionalIndividualInfo/Occupation.js +9 -18
- package/build/features/individual/screens/AdditionalIndividualInfo/PEPSwitch.d.ts +2 -1
- package/build/features/individual/screens/AdditionalIndividualInfo/PEPSwitch.js +12 -9
- package/build/features/individual/screens/AdditionalIndividualInfo/SignatureFile.js +9 -3
- package/build/features/individual/screens/AdditionalIndividualInfo/SourceOfIncome.js +14 -18
- package/build/features/individual/screens/IndividualPersonalInfo/BirthCity.d.ts +1 -0
- package/build/features/individual/screens/IndividualPersonalInfo/BirthCity.js +5 -13
- package/build/features/individual/screens/IndividualPersonalInfo/BirthCountry.d.ts +1 -0
- package/build/features/individual/screens/IndividualPersonalInfo/BirthCountry.js +5 -13
- package/build/features/individual/screens/IndividualPersonalInfo/DOB.d.ts +2 -1
- package/build/features/individual/screens/IndividualPersonalInfo/DOB.js +2 -2
- package/build/features/individual/screens/IndividualPersonalInfo/Email.d.ts +2 -1
- package/build/features/individual/screens/IndividualPersonalInfo/Email.js +3 -8
- package/build/features/individual/screens/IndividualPersonalInfo/ExpiryDate.d.ts +2 -1
- package/build/features/individual/screens/IndividualPersonalInfo/ExpiryDate.js +2 -3
- package/build/features/individual/screens/IndividualPersonalInfo/Gender.d.ts +2 -1
- package/build/features/individual/screens/IndividualPersonalInfo/Gender.js +3 -2
- package/build/features/individual/screens/IndividualPersonalInfo/ID.d.ts +2 -1
- package/build/features/individual/screens/IndividualPersonalInfo/ID.js +3 -5
- package/build/features/individual/screens/IndividualPersonalInfo/IndividualPersonalInfo.js +58 -20
- package/build/features/individual/screens/IndividualPersonalInfo/IssuedCountry.d.ts +1 -0
- package/build/features/individual/screens/IndividualPersonalInfo/IssuedCountry.js +6 -15
- package/build/features/individual/screens/IndividualPersonalInfo/MobileNumber.d.ts +1 -0
- package/build/features/individual/screens/IndividualPersonalInfo/MobileNumber.js +5 -8
- package/build/features/individual/screens/IndividualPersonalInfo/Name.d.ts +2 -1
- package/build/features/individual/screens/IndividualPersonalInfo/Name.js +3 -10
- package/build/features/individual/screens/IndividualPersonalInfo/Nationality.d.ts +1 -0
- package/build/features/individual/screens/IndividualPersonalInfo/Nationality.js +6 -15
- package/package.json +1 -1
package/build/@types/app.d.ts
CHANGED
|
@@ -404,7 +404,8 @@ export declare type EntityDataStatus = {
|
|
|
404
404
|
};
|
|
405
405
|
export declare type IndividualDataStatus = {
|
|
406
406
|
status: FieldType;
|
|
407
|
-
name: FieldType;
|
|
407
|
+
'name.en': FieldType;
|
|
408
|
+
'name.ar': FieldType;
|
|
408
409
|
'contact.email': FieldType;
|
|
409
410
|
'contact.phone.number': FieldType;
|
|
410
411
|
'contact.phone.country_code': FieldType;
|
|
@@ -425,6 +426,7 @@ export declare type IndividualDataStatus = {
|
|
|
425
426
|
monthly_income: FieldType;
|
|
426
427
|
is_relative_PEP: FieldType;
|
|
427
428
|
is_influencer: FieldType;
|
|
429
|
+
gender: FieldType;
|
|
428
430
|
};
|
|
429
431
|
export declare type BrandDataStatus = {
|
|
430
432
|
status: FieldType;
|
|
@@ -550,4 +552,29 @@ export declare type EntityDataVerification = {
|
|
|
550
552
|
taxable: string;
|
|
551
553
|
type: string;
|
|
552
554
|
};
|
|
555
|
+
export declare type IndividualDataVerification = {
|
|
556
|
+
'birth.city': string;
|
|
557
|
+
'birth.country': string;
|
|
558
|
+
'birth.date': string;
|
|
559
|
+
'contact.email': string;
|
|
560
|
+
'contact.phone.country_code': string;
|
|
561
|
+
'contact.phone.number': string;
|
|
562
|
+
employer_city: string;
|
|
563
|
+
employer_country: string;
|
|
564
|
+
employer_name: string;
|
|
565
|
+
gender: string;
|
|
566
|
+
'identification.expiry': string;
|
|
567
|
+
'identification.id': string;
|
|
568
|
+
'identification.issuer_country': string;
|
|
569
|
+
'identification.type': string;
|
|
570
|
+
is_authorized: string;
|
|
571
|
+
is_influencer: string;
|
|
572
|
+
is_relative_PEP: string;
|
|
573
|
+
'name.en': string;
|
|
574
|
+
'name.ar': string;
|
|
575
|
+
nationality: string;
|
|
576
|
+
occupation: string;
|
|
577
|
+
relation: string;
|
|
578
|
+
status: string;
|
|
579
|
+
};
|
|
553
580
|
export {};
|
|
@@ -544,7 +544,7 @@ export var updatePhoneInfo = createAsyncThunk('individual/updatePhoneInfo', func
|
|
|
544
544
|
export var updateIndividualPersonalInfo = createAsyncThunk('individual/updateIndividualPersonalInfo', function (_a, thunkApi) {
|
|
545
545
|
var formData = _a.formData, originalFormData = _a.originalFormData;
|
|
546
546
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
547
|
-
var _b, settings, individual, _c, notification, user, entity, _d, id, type, name, email, mobile, countryCode, gender, nid, issuedCountry, expiryDate, dob, placeOfBirthCountry, placeOfBirthCity, nationality, code, data_status, userName, identification_id_type,
|
|
547
|
+
var _b, settings, individual, _c, notification, user, entity, _d, id, type, name, email, mobile, countryCode, gender, nid, issuedCountry, expiryDate, dob, placeOfBirthCountry, placeOfBirthCity, nationality, code, data_status, userName, identification_id_type, isGenderNonEditable, isNameENNonEditable, isNameARNonEditable, isEmailNonEditable, isMobileNumberNonEditable, isMobileCountryNonEditable, isNidNonEditable, isIssuedCountryNonEditable, isExpiryNonEditable, isIdTypeNonEditable, isNationalityNonEditable, isDOBNonEditable, isBirthCityNonEditable, isBirthCountryNonEditable, hasContact, hasPhone, hasIdentification, hasBirth, nameIsEditable, contact, requestBody, data;
|
|
548
548
|
var _e, _f, _g, _h, _j;
|
|
549
549
|
return __generator(this, function (_k) {
|
|
550
550
|
switch (_k.label) {
|
|
@@ -557,7 +557,9 @@ export var updateIndividualPersonalInfo = createAsyncThunk('individual/updateInd
|
|
|
557
557
|
data_status = (user || {}).data_status;
|
|
558
558
|
userName = getUserNameObject(name);
|
|
559
559
|
identification_id_type = nid ? (nid.startsWith('1') ? IDENTIFICATION_TYPE.NID : IDENTIFICATION_TYPE.IQAMA) : undefined;
|
|
560
|
-
|
|
560
|
+
isGenderNonEditable = hasNoneEditableValue(data_status, 'gender');
|
|
561
|
+
isNameENNonEditable = hasNoneEditableValue(data_status, 'name.en');
|
|
562
|
+
isNameARNonEditable = hasNoneEditableValue(data_status, 'name.ar');
|
|
561
563
|
isEmailNonEditable = hasNoneEditableValue(data_status === null || data_status === void 0 ? void 0 : data_status.contact, 'email');
|
|
562
564
|
isMobileNumberNonEditable = hasNoneEditableValue((_e = data_status === null || data_status === void 0 ? void 0 : data_status.contact) === null || _e === void 0 ? void 0 : _e.phone, 'number');
|
|
563
565
|
isMobileCountryNonEditable = hasNoneEditableValue((_f = data_status === null || data_status === void 0 ? void 0 : data_status.contact) === null || _f === void 0 ? void 0 : _f.phone, 'country_code');
|
|
@@ -573,6 +575,7 @@ export var updateIndividualPersonalInfo = createAsyncThunk('individual/updateInd
|
|
|
573
575
|
hasPhone = mobile && (countryCode === null || countryCode === void 0 ? void 0 : countryCode.idd_prefix);
|
|
574
576
|
hasIdentification = nid || issuedCountry || identification_id_type || expiryDate;
|
|
575
577
|
hasBirth = placeOfBirthCity || placeOfBirthCountry;
|
|
578
|
+
nameIsEditable = userName.first && !(isNameENNonEditable && isNameARNonEditable);
|
|
576
579
|
contact = hasContact && !(isEmailNonEditable && isMobileCountryNonEditable && isMobileNumberNonEditable)
|
|
577
580
|
? __assign({ email: isEmailNonEditable ? undefined : email }, (!((isMobileCountryNonEditable && isMobileNumberNonEditable) || !hasPhone) && {
|
|
578
581
|
phone: {
|
|
@@ -580,10 +583,10 @@ export var updateIndividualPersonalInfo = createAsyncThunk('individual/updateInd
|
|
|
580
583
|
number: isMobileNumberNonEditable || !mobile ? undefined : mobile
|
|
581
584
|
}
|
|
582
585
|
})) : undefined;
|
|
583
|
-
requestBody = __assign(__assign(__assign(__assign(__assign(__assign(__assign({ id: id, type: type, gender:
|
|
586
|
+
requestBody = __assign(__assign(__assign(__assign(__assign(__assign(__assign({ id: id, type: type, gender: isGenderNonEditable || !gender ? undefined : gender }, (nameIsEditable && {
|
|
584
587
|
names: {
|
|
585
|
-
en: userName,
|
|
586
|
-
ar: userName
|
|
588
|
+
en: isNameENNonEditable ? undefined : userName,
|
|
589
|
+
ar: isNameARNonEditable ? undefined : userName
|
|
587
590
|
}
|
|
588
591
|
})), { contact: contact }), (hasIdentification &&
|
|
589
592
|
!(isNidNonEditable && isIssuedCountryNonEditable && isExpiryNonEditable && isIdTypeNonEditable) && {
|
package/build/features/individual/screens/AdditionalIndividualInfo/AdditionalIndividualInfo.js
CHANGED
|
@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next';
|
|
|
17
17
|
import { handleCurrentActiveScreen, settingsSelector } from '../../../../app/settings';
|
|
18
18
|
import Box from '@mui/material/Box';
|
|
19
19
|
import { alpha, styled } from '@mui/material/styles';
|
|
20
|
-
import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids } from '../../../../hooks';
|
|
20
|
+
import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified } from '../../../../hooks';
|
|
21
21
|
import { DocumentPurpose, IndividualType } from '../../../../@types';
|
|
22
22
|
import { isSA } from '../../../../utils';
|
|
23
23
|
import Form from '../../../../components/Form';
|
|
@@ -52,14 +52,16 @@ var ListType;
|
|
|
52
52
|
ListType["OccupationList"] = "OccupationList";
|
|
53
53
|
})(ListType || (ListType = {}));
|
|
54
54
|
var AdditionalIndividualInfo = function (_a) {
|
|
55
|
+
var _b;
|
|
55
56
|
var t = useTranslation().t;
|
|
56
57
|
var isAr = useLanguage().isAr;
|
|
57
58
|
var dispatch = useAppDispatch();
|
|
58
|
-
var
|
|
59
|
+
var _c = useAppSelector(individualSelector), data = _c.data, loading = _c.loading, error = _c.error;
|
|
59
60
|
var settingsData = useAppSelector(settingsSelector).data;
|
|
60
61
|
var verify = data.verify;
|
|
61
62
|
var user = (verify.responseBody || {}).user;
|
|
62
|
-
var
|
|
63
|
+
var _d = data.individualData, occupation = _d.occupation, sourceIncome = _d.sourceIncome, monthlyIncome = _d.monthlyIncome, employerName = _d.employerName, employerLocation = _d.employerLocation, isPEP = _d.isPEP, isInfluencer = _d.isInfluencer, civilID = _d.civilID, signatureFileId = _d.signatureFileId, civilIDUploading = _d.civilIDUploading, signatureFileUploading = _d.signatureFileUploading, shareCount = _d.shareCount, shareValue = _d.shareValue;
|
|
64
|
+
var _e = user || {}, type = _e.type, documents = _e.documents, is_authorized = _e.is_authorized, data_status = _e.data_status, data_verification = _e.data_verification, names = _e.names, role = _e.role, occupationRes = _e.occupation, is_relative_PEP = _e.is_relative_PEP, is_influencer = _e.is_influencer;
|
|
63
65
|
var methods = useForm({
|
|
64
66
|
resolver: yupResolver(IndividualInfoValidationSchema(user === null || user === void 0 ? void 0 : user.type)),
|
|
65
67
|
defaultValues: {
|
|
@@ -80,15 +82,16 @@ var AdditionalIndividualInfo = function (_a) {
|
|
|
80
82
|
mode: 'onChange'
|
|
81
83
|
});
|
|
82
84
|
useSetFromDefaultValues(methods, data.individualData, true);
|
|
83
|
-
var
|
|
84
|
-
var
|
|
85
|
+
var watch = methods.watch;
|
|
86
|
+
var defaultCivilIdFiles = React.useMemo(function () { return getFileDetailsFromDocument(documents, DocumentPurpose.IDENTITY_DOCUMENT); }, [documents]);
|
|
87
|
+
var defaultSignatureFiles = React.useMemo(function () { return getFileDetailsFromDocument(documents, DocumentPurpose.CUSTOMER_SIGNATURE); }, [documents]);
|
|
85
88
|
var originalReadOnly = useFormReadOnly(methods, {
|
|
86
89
|
isPEP: typeof isPEP === 'boolean',
|
|
87
90
|
isInfluencer: typeof isInfluencer === 'boolean',
|
|
88
91
|
civilID: defaultCivilIdFiles,
|
|
89
92
|
signatureFileId: defaultSignatureFiles
|
|
90
93
|
});
|
|
91
|
-
var noneEditable = useDataNoneEditable(
|
|
94
|
+
var noneEditable = useDataNoneEditable(data_status, [
|
|
92
95
|
'occupation',
|
|
93
96
|
'source_of_income',
|
|
94
97
|
'monthly_income',
|
|
@@ -97,7 +100,11 @@ var AdditionalIndividualInfo = function (_a) {
|
|
|
97
100
|
]);
|
|
98
101
|
var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly, noneEditable);
|
|
99
102
|
var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
|
|
100
|
-
var
|
|
103
|
+
var dataVerified = useDataVerified(data_verification, ['occupation', 'is_relative_PEP', 'is_influencer']);
|
|
104
|
+
var isOccupationVerified = dataVerified['occupation'] && (occupationRes === null || occupationRes === void 0 ? void 0 : occupationRes.id) === ((_b = watch('occupation')) === null || _b === void 0 ? void 0 : _b.id);
|
|
105
|
+
var isPEPSwitchVerified = dataVerified['is_relative_PEP'] && is_relative_PEP === watch('isPEP');
|
|
106
|
+
var isInfluencerSwitchVerified = dataVerified['is_influencer'] && is_influencer === watch('isInfluencer');
|
|
107
|
+
var _f = React.useState(), listActive = _f[0], setListActive = _f[1];
|
|
101
108
|
var isSACountry = React.useMemo(function () { return isSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
|
|
102
109
|
var onSubmit = function (data) {
|
|
103
110
|
dispatch(updateIndividualInfo(getFelids(data)));
|
|
@@ -109,31 +116,31 @@ var AdditionalIndividualInfo = function (_a) {
|
|
|
109
116
|
setListActive(flag);
|
|
110
117
|
};
|
|
111
118
|
var getUserName = function () {
|
|
112
|
-
var _a, _b
|
|
113
|
-
var name = isAr ? (
|
|
119
|
+
var _a, _b;
|
|
120
|
+
var name = isAr ? (_a = names === null || names === void 0 ? void 0 : names.ar) === null || _a === void 0 ? void 0 : _a.first : (_b = names === null || names === void 0 ? void 0 : names.en) === null || _b === void 0 ? void 0 : _b.first;
|
|
114
121
|
return name;
|
|
115
122
|
};
|
|
116
123
|
var getUserRole = function () {
|
|
117
|
-
var _a, _b, _c, _d
|
|
118
|
-
if (((
|
|
119
|
-
return isAr ? (
|
|
120
|
-
if (
|
|
124
|
+
var _a, _b, _c, _d;
|
|
125
|
+
if (((role === null || role === void 0 ? void 0 : role.length) || 0) > 0)
|
|
126
|
+
return isAr ? (_b = (_a = user.role[0]) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.ar : (_d = (_c = user.role[0]) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.en;
|
|
127
|
+
if (type === IndividualType.SHARE_HOLDER)
|
|
121
128
|
return t('type_share_holder');
|
|
122
|
-
if (
|
|
129
|
+
if (type === IndividualType.BOARD_MEMBER)
|
|
123
130
|
return t('type_board_member');
|
|
124
131
|
return t('type_user');
|
|
125
132
|
};
|
|
126
|
-
var showSignatureFile =
|
|
127
|
-
var showOccupationFile =
|
|
128
|
-
var showSourceOfIncome =
|
|
129
|
-
var showIsPEP =
|
|
130
|
-
var showIsInfluencer =
|
|
131
|
-
var showShares =
|
|
133
|
+
var showSignatureFile = type === IndividualType.USER || type === IndividualType.BUYER;
|
|
134
|
+
var showOccupationFile = type === IndividualType.USER || type === IndividualType.BUYER;
|
|
135
|
+
var showSourceOfIncome = type === IndividualType.USER || type === IndividualType.BUYER;
|
|
136
|
+
var showIsPEP = type === IndividualType.USER || type === IndividualType.BOARD_MEMBER;
|
|
137
|
+
var showIsInfluencer = type === IndividualType.USER || type === IndividualType.BOARD_MEMBER;
|
|
138
|
+
var showShares = type === IndividualType.SHARE_HOLDER;
|
|
132
139
|
var isSourceOfIncomeListActive = listActive === ListType.SourceOfIncomeList;
|
|
133
140
|
var isMonthlyIncomeListActive = listActive === ListType.MonthlyIncomeList;
|
|
134
141
|
var isOccupationListActive = listActive === ListType.OccupationList;
|
|
135
142
|
var disabled = !methods.formState.isValid || civilIDUploading || signatureFileUploading;
|
|
136
|
-
return (_jsxs(ScreenContainer, { children: [_jsx(Collapse, __assign({ in: !listActive && !!
|
|
143
|
+
return (_jsxs(ScreenContainer, { children: [_jsx(Collapse, __assign({ in: !listActive && !!is_authorized, timeout: 500 }, { children: _jsxs(TextBoxStyled, { children: [getUserName() || '', _jsx(RoleTextStyled, { children: getUserRole() || '' })] }) })), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Occupation, { isVerified: isOccupationVerified, readOnly: readOnly['occupation'] || noneEditable['occupation'], onListOpen: function () { return handleMenuClick(ListType.OccupationList); }, onListClose: function () { return handleMenuClick(); }, show: showOccupationFile && !isMonthlyIncomeListActive && !isSourceOfIncomeListActive }), _jsx(SourceOfIncome, { readOnly: readOnly['sourceIncome'] || noneEditable['source_of_income'], onListOpen: function () { return handleMenuClick(ListType.SourceOfIncomeList); }, onListClose: function () { return handleMenuClick(); }, show: showSourceOfIncome && !isMonthlyIncomeListActive && !isOccupationListActive }), _jsx(MonthlyIncome, { readOnly: readOnly['monthlyIncome'] || noneEditable['monthly_income'], show: showSourceOfIncome && !isSourceOfIncomeListActive && !isOccupationListActive, onListOpen: function () { return handleMenuClick(ListType.MonthlyIncomeList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(ShareCount, { show: !listActive && showShares, readOnly: readOnly['shareCount'] }), _jsx(ShareValue, { show: !listActive && showShares, readOnly: readOnly['shareValue'] }), _jsxs(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: [_jsx(CivilIDFile, { show: !isSACountry, readOnly: readOnly['civilID'], defaultFiles: defaultCivilIdFiles }), _jsx(SignatureFile, { show: is_authorized && showSignatureFile, readOnly: readOnly['signatureFileId'], defaultFiles: defaultSignatureFiles })] })), _jsx(PEPSwitch, { show: showIsPEP && !listActive, readOnly: readOnly['isPEP'] || noneEditable['is_relative_PEP'], isVerified: isPEPSwitchVerified }), _jsx(InfluencerSwitch, { show: showIsInfluencer && !listActive, readOnly: readOnly['isInfluencer'] || noneEditable['is_influencer'], isVerified: isInfluencerSwitchVerified })] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) }))] }));
|
|
137
144
|
};
|
|
138
145
|
export default React.memo(AdditionalIndividualInfo);
|
|
139
146
|
AdditionalIndividualInfo.defaultProps = {};
|
|
@@ -10,16 +10,18 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import
|
|
14
|
-
import { styled } from '@mui/material/styles';
|
|
13
|
+
import React from 'react';
|
|
15
14
|
import { useTranslation } from 'react-i18next';
|
|
16
15
|
import { useController, useFormContext } from 'react-hook-form';
|
|
16
|
+
import { styled } from '@mui/material/styles';
|
|
17
17
|
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
18
18
|
import { DocumentPurpose } from '../../../../@types';
|
|
19
19
|
import { FileType } from '../../../../constants';
|
|
20
|
+
import { hasVerifiedValue } from '../../../../utils';
|
|
20
21
|
import Collapse from '../../../../components/Collapse';
|
|
21
22
|
import { civilIDUploadingStatus, clearError, individualSelector } from '../../../app/individual/individualStore';
|
|
22
23
|
import UploadMultipleFile from '../../../shared/UploadMultipleFile';
|
|
24
|
+
import { ScreenContainer } from '../../../shared/Containers';
|
|
23
25
|
var FeatureStyled = styled(ScreenContainer)(function (_a) {
|
|
24
26
|
var theme = _a.theme;
|
|
25
27
|
return ({
|
|
@@ -27,12 +29,16 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
|
|
|
27
29
|
});
|
|
28
30
|
});
|
|
29
31
|
var CivilIDFile = function (_a) {
|
|
32
|
+
var _b;
|
|
30
33
|
var defaultFiles = _a.defaultFiles, readOnly = _a.readOnly, show = _a.show;
|
|
31
34
|
var t = useTranslation().t;
|
|
32
35
|
var dispatch = useAppDispatch();
|
|
33
36
|
var control = useFormContext().control;
|
|
34
37
|
var civilIDFileIdControl = useController({ name: 'civilID', control: control });
|
|
35
|
-
var
|
|
38
|
+
var _c = useAppSelector(individualSelector), loading = _c.loading, error = _c.error, data = _c.data;
|
|
39
|
+
var data_verification = (((_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.user) || {}).data_verification;
|
|
40
|
+
var uploadedIds = civilIDFileIdControl.field.value;
|
|
41
|
+
var isDocumentVerified = React.useMemo(function () { var _a; return !!((_a = defaultFiles === null || defaultFiles === void 0 ? void 0 : defaultFiles[0]) === null || _a === void 0 ? void 0 : _a.docId) && hasVerifiedValue(data_verification, "documents.".concat(defaultFiles[0].docId)); }, [data_verification]);
|
|
36
42
|
var handleCivilIDChange = function (ids) {
|
|
37
43
|
if (error)
|
|
38
44
|
dispatch(clearError());
|
|
@@ -43,6 +49,6 @@ var CivilIDFile = function (_a) {
|
|
|
43
49
|
dispatch(clearError());
|
|
44
50
|
civilIDFileIdControl.field.onChange(ids);
|
|
45
51
|
};
|
|
46
|
-
return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { readOnly: readOnly, id: 'civilID', control: control, label: t('title_civil_id'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_civilID'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_civil_id'), onFileUploaded: handleCivilIDChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, defaultFiles: defaultFiles, purpose: DocumentPurpose.IDENTITY_DOCUMENT, fileUploadingStatus: function (uploading) { return dispatch(civilIDUploadingStatus(uploading)); }, fileType: FileType.IMAGES }) }) })));
|
|
52
|
+
return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { readOnly: readOnly, id: 'civilID', control: control, label: t('title_civil_id'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_civilID'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_civil_id'), onFileUploaded: handleCivilIDChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, defaultFiles: defaultFiles, purpose: DocumentPurpose.IDENTITY_DOCUMENT, fileUploadingStatus: function (uploading) { return dispatch(civilIDUploadingStatus(uploading)); }, fileType: FileType.IMAGES, isVerified: !(uploadedIds === null || uploadedIds === void 0 ? void 0 : uploadedIds.length) && isDocumentVerified }) }) })));
|
|
47
53
|
};
|
|
48
54
|
export default CivilIDFile;
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
export interface InfluencerSwitchProps {
|
|
3
3
|
show: boolean;
|
|
4
4
|
readOnly?: boolean;
|
|
5
|
+
isVerified?: boolean;
|
|
5
6
|
}
|
|
6
|
-
declare const _default: React.MemoExoticComponent<({ show, readOnly }: InfluencerSwitchProps) => JSX.Element>;
|
|
7
|
+
declare const _default: React.MemoExoticComponent<({ show, readOnly, isVerified }: InfluencerSwitchProps) => JSX.Element>;
|
|
7
8
|
export default _default;
|
|
@@ -13,18 +13,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
import * as React from 'react';
|
|
14
14
|
import { useTranslation } from 'react-i18next';
|
|
15
15
|
import { useFormContext, useController } from 'react-hook-form';
|
|
16
|
-
import
|
|
17
|
-
import Collapse from '../../../../components/Collapse';
|
|
16
|
+
import Box from '@mui/material/Box';
|
|
18
17
|
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
19
|
-
import
|
|
20
|
-
import
|
|
18
|
+
import Collapse from '../../../../components/Collapse';
|
|
19
|
+
import Tooltip from '../../../../components/Tooltip';
|
|
21
20
|
import Text from '../../../../components/Text';
|
|
22
21
|
import RadioGroup from '../../../../components/RadioGroup';
|
|
23
22
|
import RadioLabel from '../../../../components/RadioLabel';
|
|
24
|
-
import {
|
|
25
|
-
import
|
|
26
|
-
import
|
|
23
|
+
import { styled, alpha } from '@mui/material/styles';
|
|
24
|
+
import Mandatory from '../../../shared/Mandatory';
|
|
25
|
+
import CheckIcon from '../../../shared/CheckIcon';
|
|
26
|
+
import { ScreenContainer } from '../../../shared/Containers';
|
|
27
27
|
import { individualSelector, clearError } from '../../../app/individual/individualStore';
|
|
28
|
+
import { InfoIconStyled, InfoOutlinedIconStyled } from './PEPSwitch';
|
|
28
29
|
var LabelTextStyled = styled(Text)(function (_a) {
|
|
29
30
|
var theme = _a.theme;
|
|
30
31
|
return (__assign(__assign({}, theme.typography.caption), { color: alpha(theme.palette.text.primary, 0.6), marginBlockEnd: theme.spacing(0.625) }));
|
|
@@ -35,15 +36,17 @@ var RadioGroupStyled = styled(RadioGroup)(function (_a) {
|
|
|
35
36
|
marginInlineStart: theme.spacing(0.25)
|
|
36
37
|
});
|
|
37
38
|
});
|
|
39
|
+
var RadioLabelStyled = styled('span')(function () { return ({
|
|
40
|
+
display: 'flex'
|
|
41
|
+
}); });
|
|
38
42
|
var InfluencerSwitch = function (_a) {
|
|
39
|
-
var show = _a.show, readOnly = _a.readOnly;
|
|
43
|
+
var show = _a.show, readOnly = _a.readOnly, isVerified = _a.isVerified;
|
|
40
44
|
var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
|
|
41
45
|
var control = useFormContext().control;
|
|
42
46
|
var t = useTranslation().t;
|
|
43
47
|
var dispatch = useAppDispatch();
|
|
44
48
|
var influencerControl = useController({ name: 'isInfluencer', control: control });
|
|
45
49
|
var error = useAppSelector(individualSelector).error;
|
|
46
|
-
var disabled = false;
|
|
47
50
|
var handleOnChange = function (_a) {
|
|
48
51
|
var target = _a.target;
|
|
49
52
|
if (error)
|
|
@@ -51,6 +54,6 @@ var InfluencerSwitch = function (_a) {
|
|
|
51
54
|
influencerControl.field.onChange(target.value === 'yes');
|
|
52
55
|
};
|
|
53
56
|
var influencerValue = influencerControl.field.value;
|
|
54
|
-
return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pt: 2.5, pl: 2.5, pr: 2.5 } }, { children: [_jsxs(Box, __assign({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [_jsxs(LabelTextStyled, { children: [t('tap_js_are_you_an_influencer'), _jsx(Mandatory, {})] }), _jsx(Tooltip, __assign({ title: t('influencer_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] })), _jsxs(RadioGroupStyled, __assign({ readOnly: readOnly, value: influencerValue != null ? (influencerValue ? 'yes' : 'no') : false, onChange:
|
|
57
|
+
return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pt: 2.5, pl: 2.5, pr: 2.5 } }, { children: [_jsxs(Box, __assign({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [_jsxs(LabelTextStyled, { children: [t('tap_js_are_you_an_influencer'), _jsx(Mandatory, {})] }), _jsx(Tooltip, __assign({ title: t('influencer_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] })), _jsxs(RadioGroupStyled, __assign({ readOnly: readOnly, value: influencerValue != null ? (influencerValue ? 'yes' : 'no') : false, onChange: readOnly ? undefined : handleOnChange }, { children: [_jsx(RadioLabel, { value: 'yes', label: _jsxs(RadioLabelStyled, { children: [t('yes'), influencerValue && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) }), _jsx(RadioLabel, { value: 'no', label: _jsxs(RadioLabelStyled, { children: [t('no'), influencerValue === false && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) })] }))] })) })));
|
|
55
58
|
};
|
|
56
59
|
export default React.memo(InfluencerSwitch);
|
|
@@ -9,23 +9,23 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import {
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import * as React from 'react';
|
|
14
14
|
import { useTranslation } from 'react-i18next';
|
|
15
15
|
import { useController, useFormContext } from 'react-hook-form';
|
|
16
16
|
import Box from '@mui/material/Box';
|
|
17
17
|
import { styled } from '@mui/material/styles';
|
|
18
|
-
import {
|
|
19
|
-
import
|
|
20
|
-
import CheckIcon from '../../../shared/CheckIcon';
|
|
21
|
-
import Collapse from '../../../../components/Collapse';
|
|
18
|
+
import { settingsSelector } from '../../../../app/settings';
|
|
19
|
+
import { findCurrencyByIso2, hasVerifiedValue } from '../../../../utils';
|
|
22
20
|
import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
|
|
23
|
-
import
|
|
21
|
+
import Collapse from '../../../../components/Collapse';
|
|
24
22
|
import Text from '../../../../components/Text';
|
|
25
23
|
import ExpandIcon from '../../../../components/ExpandIcon';
|
|
26
24
|
import SimpleList from '../../../../components/SimpleList';
|
|
27
|
-
import {
|
|
28
|
-
import
|
|
25
|
+
import { individualSelector, clearError } from '../../../app/individual/individualStore';
|
|
26
|
+
import Input from '../../../shared/Input';
|
|
27
|
+
import CheckIcon from '../../../shared/CheckIcon';
|
|
28
|
+
import { ScreenContainer } from '../../../shared/Containers';
|
|
29
29
|
var Container = styled(Box)(function () { return ({
|
|
30
30
|
display: 'flex'
|
|
31
31
|
}); });
|
|
@@ -41,14 +41,6 @@ var IncomeText = styled(Text, { shouldForwardProp: function (prop) { return prop
|
|
|
41
41
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
42
42
|
return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
|
|
43
43
|
});
|
|
44
|
-
var CheckIconStyled = styled(CheckIcon)(function (_a) {
|
|
45
|
-
var theme = _a.theme;
|
|
46
|
-
return ({
|
|
47
|
-
color: theme.palette.success.main,
|
|
48
|
-
display: 'flex',
|
|
49
|
-
alignItems: 'flex-end'
|
|
50
|
-
});
|
|
51
|
-
});
|
|
52
44
|
var MonthlyIncome = function (props) {
|
|
53
45
|
var _a;
|
|
54
46
|
var _b = React.useState([]), incomeList = _b[0], setIncomeList = _b[1];
|
|
@@ -62,7 +54,10 @@ var MonthlyIncome = function (props) {
|
|
|
62
54
|
var monthlyIncomeList = (data.individualData.responseBody || {}).monthlyIncomeList;
|
|
63
55
|
var monthlyIncomeControl = useController({ control: control, name: 'monthlyIncome' });
|
|
64
56
|
var countryCode = settingsData.businessCountry;
|
|
65
|
-
var
|
|
57
|
+
var user = (data.verify.responseBody || {}).user;
|
|
58
|
+
var isMonthlyIncomeVerified = function (item) {
|
|
59
|
+
return hasVerifiedValue(user === null || user === void 0 ? void 0 : user.data_verification, "monthly_income.".concat(item.id));
|
|
60
|
+
};
|
|
66
61
|
React.useEffect(function () {
|
|
67
62
|
if ((monthlyIncomeList === null || monthlyIncomeList === void 0 ? void 0 : monthlyIncomeList.length) > 0) {
|
|
68
63
|
setIncomeList(monthlyIncomeList);
|
|
@@ -93,8 +88,8 @@ var MonthlyIncome = function (props) {
|
|
|
93
88
|
var error = (_a = monthlyIncomeControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
94
89
|
return (_jsx(Collapse, __assign({ in: props.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 0 } }, { children: [_jsx(InputStyled, { label: t('please_enter_actual_income', {
|
|
95
90
|
currency: t(findCurrencyByIso2(countryCode.iso2))
|
|
96
|
-
}),
|
|
97
|
-
return (_jsxs(_Fragment, { children: [_jsx(Container, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (income === null || income === void 0 ? void 0 : income.id) }, { children: isAr ? item.range.ar : item === null || item === void 0 ? void 0 : item.range.en })) }), item.id === (income === null || income === void 0 ? void 0 : income.id) && _jsx(
|
|
91
|
+
}), readOnly: props.readOnly, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_any_source_of_income'), value: (isAr ? income === null || income === void 0 ? void 0 : income.range.ar : income === null || income === void 0 ? void 0 : income.range.en) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'range.en', searchValuePath: ['range.en', 'range.ar'], list: incomeList, onSelectItem: onSelectItem, renderItem: function (item) {
|
|
92
|
+
return (_jsxs(_Fragment, { children: [_jsx(Container, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (income === null || income === void 0 ? void 0 : income.id) }, { children: isAr ? item.range.ar : item === null || item === void 0 ? void 0 : item.range.en })) }), item.id === (income === null || income === void 0 ? void 0 : income.id) && _jsx(CheckIcon, { isVerified: isMonthlyIncomeVerified(item) })] }));
|
|
98
93
|
} }) }))] })) })));
|
|
99
94
|
};
|
|
100
95
|
export default React.memo(MonthlyIncome);
|
|
@@ -9,21 +9,21 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import {
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import * as React from 'react';
|
|
14
|
-
import Box from '@mui/material/Box';
|
|
15
|
-
import { styled } from '@mui/material/styles';
|
|
16
14
|
import { useTranslation } from 'react-i18next';
|
|
17
15
|
import { useController, useFormContext } from 'react-hook-form';
|
|
16
|
+
import Box from '@mui/material/Box';
|
|
17
|
+
import { styled } from '@mui/material/styles';
|
|
18
18
|
import { useAppSelector, useLanguage, useAppDispatch } from '../../../../hooks';
|
|
19
|
-
import { individualSelector, clearError } from '../../../app/individual/individualStore';
|
|
20
19
|
import Text from '../../../../components/Text';
|
|
20
|
+
import SimpleList from '../../../../components/SimpleList';
|
|
21
21
|
import Collapse from '../../../../components/Collapse';
|
|
22
|
-
import CheckIcon from '@mui/icons-material/Check';
|
|
23
22
|
import ScreenContainer from '../../../shared/Containers/ScreenContainer';
|
|
24
23
|
import Input from '../../../shared/Input';
|
|
25
|
-
import
|
|
26
|
-
import
|
|
24
|
+
import { EndAdornmentExpanded } from '../../../shared/EndAdornment';
|
|
25
|
+
import CheckIcon from '../../../shared/CheckIcon';
|
|
26
|
+
import { individualSelector, clearError } from '../../../app/individual/individualStore';
|
|
27
27
|
var Container = styled(Box)(function () { return ({
|
|
28
28
|
display: 'flex'
|
|
29
29
|
}); });
|
|
@@ -39,14 +39,6 @@ var IncomeText = styled(Text, { shouldForwardProp: function (prop) { return prop
|
|
|
39
39
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
40
40
|
return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
|
|
41
41
|
});
|
|
42
|
-
var CheckIconStyled = styled(CheckIcon)(function (_a) {
|
|
43
|
-
var theme = _a.theme;
|
|
44
|
-
return ({
|
|
45
|
-
color: theme.palette.success.main,
|
|
46
|
-
display: 'flex',
|
|
47
|
-
alignItems: 'flex-end'
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
42
|
var Occupation = function (props) {
|
|
51
43
|
var _a, _b;
|
|
52
44
|
var _c = React.useState([]), occupationList = _c[0], setOccupationList = _c[1];
|
|
@@ -58,7 +50,6 @@ var Occupation = function (props) {
|
|
|
58
50
|
var control = useFormContext().control;
|
|
59
51
|
var occupationsList = ((_a = data.individualData.responseBody) === null || _a === void 0 ? void 0 : _a.occupationList) || [];
|
|
60
52
|
var occupationControl = useController({ control: control, name: 'occupation' });
|
|
61
|
-
var disabled = false;
|
|
62
53
|
React.useEffect(function () {
|
|
63
54
|
if ((occupationsList === null || occupationsList === void 0 ? void 0 : occupationsList.length) > 0) {
|
|
64
55
|
setOccupationList(occupationsList);
|
|
@@ -84,9 +75,9 @@ var Occupation = function (props) {
|
|
|
84
75
|
};
|
|
85
76
|
var occupation = occupationControl.field.value;
|
|
86
77
|
var error = (_b = occupationControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
87
|
-
return (_jsx(Collapse, __assign({ in: props.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 2.5 } }, { children: [_jsx(InputStyled, { required: true,
|
|
78
|
+
return (_jsx(Collapse, __assign({ in: props.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 2.5 } }, { children: [_jsx(InputStyled, { required: true, label: t('occupation_title'), readOnly: props.readOnly, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(EndAdornmentExpanded, { isVerified: props.isVerified, anchorEl: anchorEl }), placeholder: t('choose_any_occupation'), value: (isAr ? occupation === null || occupation === void 0 ? void 0 : occupation.name.ar : occupation === null || occupation === void 0 ? void 0 : occupation.name.en) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.en', searchValuePath: ['name.en', 'name.ar'], list: occupationList, onSelectItem: onSelectItem, renderItem: function (item) {
|
|
88
79
|
var _a, _b;
|
|
89
|
-
return (_jsxs(_Fragment, { children: [_jsx(Container, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (occupation === null || occupation === void 0 ? void 0 : occupation.id) }, { children: isAr ? (_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.en })) }), item.id === (occupation === null || occupation === void 0 ? void 0 : occupation.id) && _jsx(
|
|
80
|
+
return (_jsxs(_Fragment, { children: [_jsx(Container, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (occupation === null || occupation === void 0 ? void 0 : occupation.id) }, { children: isAr ? (_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.en })) }), item.id === (occupation === null || occupation === void 0 ? void 0 : occupation.id) && _jsx(CheckIcon, { isVerified: props.isVerified })] }));
|
|
90
81
|
} }) }))] })) })));
|
|
91
82
|
};
|
|
92
83
|
export default Occupation;
|
|
@@ -30,6 +30,7 @@ export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledCom
|
|
|
30
30
|
export interface PEPSwitchProps {
|
|
31
31
|
show: boolean;
|
|
32
32
|
readOnly?: boolean;
|
|
33
|
+
isVerified?: boolean;
|
|
33
34
|
}
|
|
34
|
-
declare const _default: React.MemoExoticComponent<({ show, readOnly }: PEPSwitchProps) => JSX.Element>;
|
|
35
|
+
declare const _default: React.MemoExoticComponent<({ show, readOnly, isVerified }: PEPSwitchProps) => JSX.Element>;
|
|
35
36
|
export default _default;
|
|
@@ -14,17 +14,18 @@ import * as React from 'react';
|
|
|
14
14
|
import { useTranslation } from 'react-i18next';
|
|
15
15
|
import { useFormContext, useController } from 'react-hook-form';
|
|
16
16
|
import { styled, alpha } from '@mui/material/styles';
|
|
17
|
+
import InfoIcon from '@mui/icons-material/Info';
|
|
18
|
+
import Box from '@mui/material/Box';
|
|
19
|
+
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
|
|
17
20
|
import { ScreenContainer } from '../../../shared/Containers';
|
|
18
|
-
import Collapse from '../../../../components/Collapse';
|
|
19
|
-
import Mandatory from '../../../shared/Mandatory';
|
|
20
|
-
import Text from '../../../../components/Text';
|
|
21
21
|
import { useAppSelector, useAppDispatch } from '../../../../hooks';
|
|
22
|
+
import Collapse from '../../../../components/Collapse';
|
|
22
23
|
import RadioGroup from '../../../../components/RadioGroup';
|
|
23
24
|
import RadioLabel from '../../../../components/RadioLabel';
|
|
25
|
+
import Text from '../../../../components/Text';
|
|
24
26
|
import Tooltip from '../../../../components/Tooltip';
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import Box from '@mui/material/Box';
|
|
27
|
+
import Mandatory from '../../../shared/Mandatory';
|
|
28
|
+
import CheckIcon from '../../../shared/CheckIcon';
|
|
28
29
|
import { individualSelector, clearError } from '../../../app/individual/individualStore';
|
|
29
30
|
var LabelTextStyled = styled(Text)(function (_a) {
|
|
30
31
|
var theme = _a.theme;
|
|
@@ -54,15 +55,17 @@ export var InfoOutlinedIconStyled = styled(InfoOutlinedIcon)(function (_a) {
|
|
|
54
55
|
color: alpha(theme.palette.text.primary, 0.4)
|
|
55
56
|
});
|
|
56
57
|
});
|
|
58
|
+
var RadioLabelStyled = styled('span')(function () { return ({
|
|
59
|
+
display: 'flex'
|
|
60
|
+
}); });
|
|
57
61
|
var PEPSwitch = function (_a) {
|
|
58
|
-
var show = _a.show, readOnly = _a.readOnly;
|
|
62
|
+
var show = _a.show, readOnly = _a.readOnly, isVerified = _a.isVerified;
|
|
59
63
|
var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
|
|
60
64
|
var control = useFormContext().control;
|
|
61
65
|
var t = useTranslation().t;
|
|
62
66
|
var pepControl = useController({ name: 'isPEP', control: control });
|
|
63
67
|
var error = useAppSelector(individualSelector).error;
|
|
64
68
|
var dispatch = useAppDispatch();
|
|
65
|
-
var disabled = false;
|
|
66
69
|
var handleOnChange = function (_a) {
|
|
67
70
|
var target = _a.target;
|
|
68
71
|
if (error)
|
|
@@ -70,6 +73,6 @@ var PEPSwitch = function (_a) {
|
|
|
70
73
|
pepControl.field.onChange(target.value === 'yes');
|
|
71
74
|
};
|
|
72
75
|
var pepValue = pepControl.field.value;
|
|
73
|
-
return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pt: 2.5, pl: 2.5, pr: 2.5 } }, { children: [_jsxs(Box, __assign({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [_jsxs(LabelTextStyled, { children: [t('tap_js_is_close_relative_in_pep'), _jsx(Mandatory, {})] }), _jsx(Tooltip, __assign({ title: t('pep_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] })), _jsxs(RadioGroupStyled, __assign({ readOnly: readOnly, value: pepValue != null ? (pepValue ? 'yes' : 'no') : false, onChange:
|
|
76
|
+
return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pt: 2.5, pl: 2.5, pr: 2.5 } }, { children: [_jsxs(Box, __assign({ style: { display: 'flex', justifyContent: 'space-between' } }, { children: [_jsxs(LabelTextStyled, { children: [t('tap_js_is_close_relative_in_pep'), _jsx(Mandatory, {})] }), _jsx(Tooltip, __assign({ title: t('pep_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] })), _jsxs(RadioGroupStyled, __assign({ readOnly: readOnly, value: pepValue != null ? (pepValue ? 'yes' : 'no') : false, onChange: readOnly ? undefined : handleOnChange }, { children: [_jsx(RadioLabel, { value: 'yes', label: _jsxs(RadioLabelStyled, { children: [t('yes'), pepValue && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) }), _jsx(RadioLabel, { value: 'no', label: _jsxs(RadioLabelStyled, { children: [t('no'), pepValue === false && isVerified && _jsx(CheckIcon, { sx: { marginInlineStart: '5px' }, isVerified: isVerified })] }) })] }))] })) })));
|
|
74
77
|
};
|
|
75
78
|
export default React.memo(PEPSwitch);
|
|
@@ -10,12 +10,14 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import React from 'react';
|
|
13
14
|
import { useTranslation } from 'react-i18next';
|
|
14
15
|
import { useController, useFormContext } from 'react-hook-form';
|
|
15
16
|
import { styled } from '@mui/material/styles';
|
|
16
17
|
import { useAppDispatch, useAppSelector } from '../../../../hooks';
|
|
17
18
|
import { DocumentPurpose } from '../../../../@types';
|
|
18
19
|
import { FileType } from '../../../../constants';
|
|
20
|
+
import { hasVerifiedValue } from '../../../../utils';
|
|
19
21
|
import UploadMultipleFile from '../../../shared/UploadMultipleFile';
|
|
20
22
|
import { ScreenContainer } from '../../../shared/Containers';
|
|
21
23
|
import { individualSelector, signatureFileUploadingStatus, clearError } from '../../../app/individual/individualStore';
|
|
@@ -27,12 +29,16 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
|
|
|
27
29
|
});
|
|
28
30
|
});
|
|
29
31
|
var SignatureFile = function (_a) {
|
|
32
|
+
var _b;
|
|
30
33
|
var show = _a.show, readOnly = _a.readOnly, defaultFiles = _a.defaultFiles;
|
|
31
34
|
var t = useTranslation().t;
|
|
32
35
|
var control = useFormContext().control;
|
|
33
|
-
var signatureFileIdControl = useController({ name: 'signatureFileId', control: control });
|
|
34
|
-
var _b = useAppSelector(individualSelector), loading = _b.loading, error = _b.error;
|
|
35
36
|
var dispatch = useAppDispatch();
|
|
37
|
+
var signatureFileIdControl = useController({ name: 'signatureFileId', control: control });
|
|
38
|
+
var _c = useAppSelector(individualSelector), loading = _c.loading, error = _c.error, data = _c.data;
|
|
39
|
+
var data_verification = (((_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.user) || {}).data_verification;
|
|
40
|
+
var uploadedIds = signatureFileIdControl.field.value;
|
|
41
|
+
var isDocumentVerified = React.useMemo(function () { var _a; return !!((_a = defaultFiles === null || defaultFiles === void 0 ? void 0 : defaultFiles[0]) === null || _a === void 0 ? void 0 : _a.docId) && hasVerifiedValue(data_verification, "documents.".concat(defaultFiles[0].docId)); }, [data_verification]);
|
|
36
42
|
var handleSignatureChange = function (ids) {
|
|
37
43
|
if (error)
|
|
38
44
|
dispatch(clearError());
|
|
@@ -43,6 +49,6 @@ var SignatureFile = function (_a) {
|
|
|
43
49
|
dispatch(clearError());
|
|
44
50
|
signatureFileIdControl.field.onChange(ids);
|
|
45
51
|
};
|
|
46
|
-
return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { readOnly: readOnly, id: 'signatureFileId', control: control, label: t('title_signature_file'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_signature'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_signature_file'), onFileUploaded: handleSignatureChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, defaultFiles: defaultFiles, purpose: DocumentPurpose.CUSTOMER_SIGNATURE, fileUploadingStatus: function (uploading) { return dispatch(signatureFileUploadingStatus(uploading)); }, fileType: FileType.IMAGES }) }) })));
|
|
52
|
+
return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { readOnly: readOnly, id: 'signatureFileId', control: control, label: t('title_signature_file'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_signature'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_signature_file'), onFileUploaded: handleSignatureChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, defaultFiles: defaultFiles, purpose: DocumentPurpose.CUSTOMER_SIGNATURE, fileUploadingStatus: function (uploading) { return dispatch(signatureFileUploadingStatus(uploading)); }, fileType: FileType.IMAGES, isVerified: !(uploadedIds === null || uploadedIds === void 0 ? void 0 : uploadedIds.length) && isDocumentVerified }) }) })));
|
|
47
53
|
};
|
|
48
54
|
export default SignatureFile;
|