@tap-payments/auth-jsconnect 2.1.40-test → 2.1.42-test

package/build/features/app/individual/individualStore.js

@@ -285,10 +285,10 @@ export var updateIndividualInfo = createAsyncThunk('updateIndividualInfo', funct
                 civilID = params.civilID, signatureFileId = params.signatureFileId;
                 businessCountry = settings.data.businessCountry;
                 documentsList = [];
-                if ((civilID || []).length > 0)
-                    documentsList.push({ type: 'Civil ID File', images: civilID });
-                if ((signatureFileId || []).length > 0)
-                    documentsList.push({ type: 'Signature File', images: signatureFileId });
+                if (!!civilID)
+                    documentsList.push({ type: 'Civil ID File', images: [civilID] });
+                if (!!signatureFileId)
+                    documentsList.push({ type: 'Signature File', images: [signatureFileId] });
                 requestBody = {
                     id: id,
                     type: type,
@@ -321,6 +321,56 @@ export var updateIndividualInfo = createAsyncThunk('updateIndividualInfo', funct
         }
     });
 }); });
+export var uploadCivilIdFile = createAsyncThunk('uploadCivilIdFile', function (_a) {
+    var file = _a.file, onProgress = _a.onProgress, title = _a.title;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var uploadPayload, onUploadProgress, data;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    uploadPayload = {
+                        file_link_create: false,
+                        title: title,
+                        purpose: 'identity_document',
+                        file: file
+                    };
+                    onUploadProgress = function (progressEvent) {
+                        var progress = ((progressEvent === null || progressEvent === void 0 ? void 0 : progressEvent.loaded) / (progressEvent === null || progressEvent === void 0 ? void 0 : progressEvent.total)) * 100;
+                        onProgress === null || onProgress === void 0 ? void 0 : onProgress(Math.floor(progress));
+                    };
+                    return [4, API.entityService.uploadFileInfo(uploadPayload, { onUploadProgress: onUploadProgress })];
+                case 1:
+                    data = _b.sent();
+                    return [2, { data: data, file: file }];
+            }
+        });
+    });
+});
+export var uploadSignatureFile = createAsyncThunk('uploadSignatureFile', function (_a) {
+    var file = _a.file, onProgress = _a.onProgress;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var uploadPayload, onUploadProgress, data;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    uploadPayload = {
+                        file_link_create: false,
+                        title: 'Merchant Signature',
+                        purpose: 'customer_signature',
+                        file: file
+                    };
+                    onUploadProgress = function (progressEvent) {
+                        var progress = ((progressEvent === null || progressEvent === void 0 ? void 0 : progressEvent.loaded) / (progressEvent === null || progressEvent === void 0 ? void 0 : progressEvent.total)) * 100;
+                        onProgress === null || onProgress === void 0 ? void 0 : onProgress(Math.floor(progress));
+                    };
+                    return [4, API.entityService.uploadFileInfo(uploadPayload, { onUploadProgress: onUploadProgress })];
+                case 1:
+                    data = _b.sent();
+                    return [2, { data: data, file: file }];
+            }
+        });
+    });
+});
 export var updateBoardSuccess = createAsyncThunk('individualUpdateBoardSuccess', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, settings, individual, _b, id, infoId, payload, data, boardInfoStatus;
     var _c, _d, _e, _f;
@@ -371,6 +421,10 @@ var initialState = {
             employerLocation: undefined,
             isPEP: null,
             isInfluencer: null
+        },
+        attachmentsData: {
+            civilIDUploading: false,
+            signatureFileUploading: false
         }
     }
 };
@@ -386,12 +440,6 @@ export var individualSlice = createSlice({
         },
         resetOTPScreen: function (state) {
             state.data.otpData.otp = '';
-        },
-        civilIDUploadingStatus: function (state, action) {
-            state.data.individualData.civilIDUploading = action.payload;
-        },
-        signatureFileUploadingStatus: function (state, action) {
-            state.data.individualData.signatureFileUploading = action.payload;
         }
     },
     extraReducers: function (builder) {
@@ -542,6 +590,36 @@ export var individualSlice = createSlice({
             .addCase(retrieveBoardDetails.rejected, function (state, action) {
             state.error = action.error.message;
             state.loading = false;
+        })
+            .addCase(uploadCivilIdFile.pending, function (state) {
+            state.error = null;
+            state.data.attachmentsData.civilIDUploading = true;
+        })
+            .addCase(uploadCivilIdFile.fulfilled, function (state, action) {
+            state.error = null;
+            state.data.attachmentsData.civilIDUploading = false;
+            var _a = action.payload, data = _a.data, file = _a.file;
+            state.data.attachmentsData.civilID = data === null || data === void 0 ? void 0 : data.id;
+            state.data.attachmentsData.civilIDFile = file;
+        })
+            .addCase(uploadCivilIdFile.rejected, function (state) {
+            state.data.attachmentsData.civilIDUploading = false;
+            state.error = 'file_upload_error';
+        })
+            .addCase(uploadSignatureFile.pending, function (state) {
+            state.error = null;
+            state.data.attachmentsData.signatureFileUploading = true;
+        })
+            .addCase(uploadSignatureFile.fulfilled, function (state, action) {
+            state.error = null;
+            state.data.attachmentsData.signatureFileUploading = false;
+            var _a = action.payload, data = _a.data, file = _a.file;
+            state.data.attachmentsData.signatureFileId = data === null || data === void 0 ? void 0 : data.id;
+            state.data.attachmentsData.signatureFile = file;
+        })
+            .addCase(uploadSignatureFile.rejected, function (state) {
+            state.data.attachmentsData.signatureFileUploading = false;
+            state.error = 'file_upload_error';
         })
             .addCase(updateBoardSuccess.fulfilled, function (state, action) {
             var _a;
@@ -566,6 +644,6 @@ export var individualSlice = createSlice({
         });
     }
 });
-export var clearError = (_a = individualSlice.actions, _a.clearError), stopLoader = _a.stopLoader, resetOTPScreen = _a.resetOTPScreen, civilIDUploadingStatus = _a.civilIDUploadingStatus, signatureFileUploadingStatus = _a.signatureFileUploadingStatus;
+export var clearError = (_a = individualSlice.actions, _a.clearError), stopLoader = _a.stopLoader, resetOTPScreen = _a.resetOTPScreen;
 export default individualSlice.reducer;
 export var individualSelector = function (state) { return state.individual; };

package/build/features/business/screens/BusinessType/Article.js

@@ -28,16 +28,17 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var Article = function (_a) {
+    var _b, _c;
     var show = _a.show;
-    var _b = React.useState(), error = _b[0], setError = _b[1];
-    var _c = React.useState(0), progress = _c[0], setProgress = _c[1];
+    var _d = React.useState(0), progress = _d[0], setProgress = _d[1];
     var t = useTranslation().t;
-    var _d = useFormContext(), control = _d.control, setValue = _d.setValue;
+    var _e = useFormContext(), control = _e.control, setError = _e.setError, clearErrors = _e.clearErrors, setValue = _e.setValue;
     var articleFileControl = useController({ name: 'articleFile', control: control });
     var articleIdControl = useController({ name: 'articleId', control: control });
-    var _e = useAppSelector(businessSelector), loading = _e.loading, uploadingArticle = _e.uploadingArticle, sysError = _e.uploadingArticleError, data = _e.data;
+    var _f = useAppSelector(businessSelector), loading = _f.loading, uploadingArticle = _f.uploadingArticle, sysError = _f.error, data = _f.data;
     var dispatch = useAppDispatch();
     var articleValue = articleFileControl.field.value;
+    var error = ((_b = articleFileControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message) || ((_c = articleIdControl.fieldState.error) === null || _c === void 0 ? void 0 : _c.message);
     var businessTypeData = data.businessTypeData;
     var articleFile = businessTypeData.articleFile, articleId = businessTypeData.articleId;
     React.useEffect(function () {
@@ -47,16 +48,15 @@ var Article = function (_a) {
         }
     }, [articleFile, articleId]);
     var handleArticleChange = function (files) {
-        setError('');
         var file = files === null || files === void 0 ? void 0 : files[0];
         if (!file)
             return;
         if (!VALID_FILE_FORMATS.includes(file === null || file === void 0 ? void 0 : file.type)) {
-            setError('file_not_supported_alert');
+            setError('articleFile', { message: 'file_not_supported_alert' });
             return;
         }
         if ((file === null || file === void 0 ? void 0 : file.size) > MAX_FILE_SIZE) {
-            setError('file_size_alert');
+            setError('articleFile', { message: 'file_size_alert' });
             return;
         }
         articleFileControl.field.onChange(file);
@@ -75,13 +75,16 @@ var Article = function (_a) {
     };
     React.useEffect(function () {
         if (sysError === 'file_upload_error') {
-            setError(sysError);
+            setError('articleId', { message: sysError });
             articleFileControl.field.onChange(undefined);
             setProgress(0);
         }
     }, [sysError]);
+    React.useEffect(function () {
+        if ((articleFileControl.formState.isValid || !!articleValue) && error != 'file_upload_error')
+            clearErrors();
+    }, [articleFileControl.formState.isValid, articleValue]);
     var fileName = articleValue ? maskFileName(articleValue === null || articleValue === void 0 ? void 0 : articleValue.name) : '';
-    var errorValue = error || sysError || '';
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_article'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('article_of_association'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleArticleChange, isFileUploaded: !uploadingArticle && !!articleValue, isSubmitting: loading, isUploading: uploadingArticle, progress: progress, onReset: handleReset, error: errorValue && t(errorValue), initialFileName: fileName }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_article'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('article_of_association'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleArticleChange, isFileUploaded: !uploadingArticle && !!articleValue, isSubmitting: loading, isUploading: uploadingArticle, progress: progress, onReset: handleReset, error: error && t(error), initialFileName: fileName }) }) })));
 };
 export default Article;

package/build/features/business/screens/BusinessType/BusinessType.js

@@ -28,7 +28,7 @@ import LicenseList from './LicenseList';
 var BusinessType = function (_a) {
     var _b = useAppSelector(businessSelector), data = _b.data, loading = _b.loading, error = _b.error, uploading = _b.uploading, uploadingArticle = _b.uploadingArticle;
     var settingsData = useAppSelector(settingsSelector).data;
-    var _c = data.businessTypeData, selectedLicense = _c.selectedLicense, licenseNumber = _c.licenseNumber, entityLegalName = _c.entityLegalName, certificateId = _c.certificateId, articleId = _c.articleId, articleFile = _c.articleFile;
+    var _c = data.businessTypeData, selectedLicense = _c.selectedLicense, licenseNumber = _c.licenseNumber, entityLegalName = _c.entityLegalName, certificateId = _c.certificateId, certificateFile = _c.certificateFile, articleId = _c.articleId, articleFile = _c.articleFile;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
@@ -41,6 +41,7 @@ var BusinessType = function (_a) {
             licenseNumber: licenseNumber,
             entityLegalName: entityLegalName,
             certificateId: certificateId,
+            certificateFile: certificateFile,
             articleId: articleId,
             articleFile: articleFile
         },
@@ -56,7 +57,8 @@ var BusinessType = function (_a) {
             selectedLicense: data.selectedLicense,
             licenseNumber: data.licenseNumber,
             entityLegalName: data.entityLegalName,
-            certificateId: data.certificateId
+            certificateId: data.certificateId,
+            certificateFile: data.certificateFile
         };
         dispatch(updateLeadBusinessType(dataValues));
     };

package/build/features/business/screens/BusinessType/LicenseCertificate.js

@@ -10,14 +10,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { ScreenContainer } from '../../../shared/Containers';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { styled } from '@mui/material/styles';
+import { businessSelector, clearCertificateId, uploadLicenseCertificate } from '../../../app/business/businessStore';
+import UploadFile from '../../../shared/UploadFile';
+import { MAX_FILE_SIZE, VALID_FILE_FORMATS } from '../../../../constants';
 import Collapse from '../../../../components/Collapse';
-import { ScreenContainer } from '../../../shared/Containers';
-import { businessSelector, uploadingStatus } from '../../../app/business/businessStore';
-import UploadMultipleFile from '../../../shared/UploadMultipleFile';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -25,18 +27,54 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var LicenseCertificate = function (_a) {
+    var _b, _c;
     var show = _a.show;
+    var _d = React.useState(0), progress = _d[0], setProgress = _d[1];
     var t = useTranslation().t;
-    var control = useFormContext().control;
-    var dispatch = useAppDispatch();
+    var _e = useFormContext(), control = _e.control, setError = _e.setError, clearErrors = _e.clearErrors;
+    var certificateFileControl = useController({ name: 'certificateFile', control: control });
     var certificateIdControl = useController({ name: 'certificateId', control: control });
-    var loading = useAppSelector(businessSelector).loading;
-    var handleLicenseCertificateChange = function (ids) {
-        certificateIdControl.field.onChange(ids);
+    var _f = useAppSelector(businessSelector), loading = _f.loading, uploading = _f.uploading, sysError = _f.error;
+    var dispatch = useAppDispatch();
+    var certificateValue = certificateFileControl.field.value;
+    var error = ((_b = certificateFileControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message) || ((_c = certificateIdControl.fieldState.error) === null || _c === void 0 ? void 0 : _c.message);
+    var handleLicenseCertificateChange = function (files) {
+        var file = (files || [])[0];
+        if (!file)
+            return;
+        if (!VALID_FILE_FORMATS.includes(file.type)) {
+            setError('certificateFile', { message: 'file_not_supported_alert' });
+            return;
+        }
+        if (file.size > MAX_FILE_SIZE) {
+            setError('certificateFile', { message: 'file_size_alert' });
+            return;
+        }
+        certificateFileControl.field.onChange(file);
+        dispatch(uploadLicenseCertificate({
+            file: file,
+            onProgress: function (value) {
+                setProgress(value);
+            }
+        }));
     };
-    var handleReset = function (ids) {
-        certificateIdControl.field.onChange(ids);
+    var handleReset = function () {
+        certificateFileControl.field.onChange(undefined);
+        certificateIdControl.field.onChange('');
+        dispatch(clearCertificateId());
+        setProgress(0);
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { label: t('title_license_certificate'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_certificate'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleLicenseCertificateChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, purpose: 'commercial_registration', fileUploadingStatus: function (uploading) { return dispatch(uploadingStatus(uploading)); } }) }) })));
+    React.useEffect(function () {
+        if (sysError === 'file_upload_error') {
+            setError('certificateId', { message: sysError });
+            certificateFileControl.field.onChange(undefined);
+            setProgress(0);
+        }
+    }, [sysError]);
+    React.useEffect(function () {
+        if ((certificateFileControl.formState.isValid || !!certificateValue) && error != 'file_upload_error')
+            clearErrors();
+    }, [certificateFileControl.formState.isValid, certificateValue]);
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_license_certificate'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_certificate'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleLicenseCertificateChange, isFileUploaded: !uploading && !!certificateValue, isSubmitting: loading, isUploading: uploading, progress: progress, onReset: handleReset, error: error && t(error) }) }) })));
 };
 export default LicenseCertificate;

package/build/features/business/screens/BusinessType/validation.d.ts

@@ -13,21 +13,24 @@ export declare const KWLicenseValidationSchema: yup.ObjectSchema<import("yup/lib
     selectedLicense: any;
     licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     entityLegalName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    certificateId: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
+    certificateId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    certificateFile: any;
     articleId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     articleFile: any;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     selectedLicense: any;
     licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     entityLegalName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    certificateId: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
+    certificateId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    certificateFile: any;
     articleId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     articleFile: any;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     selectedLicense: any;
     licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     entityLegalName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    certificateId: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
+    certificateId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    certificateFile: any;
     articleId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     articleFile: any;
 }>>>;

package/build/features/business/screens/BusinessType/validation.js

@@ -74,7 +74,17 @@ export var KWLicenseValidationSchema = yup.object().shape({
         });
     })
         .required(''),
-    certificateId: yup.array().optional(),
+    certificateId: yup.string().optional(),
+    certificateFile: yup
+        .mixed()
+        .test({
+        test: function (value) {
+            if (!!value)
+                return VALID_FILE_FORMATS.includes(value === null || value === void 0 ? void 0 : value.type) && (value === null || value === void 0 ? void 0 : value.size) < MAX_FILE_SIZE ? true : this.createError({ message: 'alert_file_upload' });
+            return true;
+        }
+    })
+        .optional(),
     articleId: yup.string().optional(),
     articleFile: yup
         .mixed()

package/build/features/individual/screens/AdditionalIndividualInfo/AdditionalIndividualInfo.js

@@ -48,27 +48,14 @@ var AdditionalIndividualInfo = function (_a) {
     var settingsData = useAppSelector(settingsSelector).data;
     var countries = settingsData.countries;
     var user = (data.verify.responseBody || {}).user;
-    var _c = data.individualData, occupation = _c.occupation, sourceIncome = _c.sourceIncome, monthlyIncome = _c.monthlyIncome, employerName = _c.employerName, employerLocation = _c.employerLocation, isPEP = _c.isPEP, isInfluencer = _c.isInfluencer, civilID = _c.civilID, signatureFileId = _c.signatureFileId, civilIDUploading = _c.civilIDUploading, signatureFileUploading = _c.signatureFileUploading;
     var methods = useForm({
         resolver: yupResolver(IndividualInfoValidationSchema),
-        defaultValues: {
-            occupation: occupation,
-            sourceIncome: sourceIncome,
-            monthlyIncome: monthlyIncome,
-            employerName: employerName,
-            employerLocation: employerLocation,
-            isPEP: isPEP,
-            isInfluencer: isInfluencer,
-            civilID: civilID,
-            signatureFileId: signatureFileId,
-            civilIDUploading: civilIDUploading,
-            signatureFileUploading: signatureFileUploading
-        },
+        defaultValues: data.individualData,
         mode: 'onChange'
     });
     useSetFromDefaultValues(methods, data.individualData, true);
-    var _d = React.useState(), listActive = _d[0], setListActive = _d[1];
-    var _e = React.useState(false), employerFieldsActive = _e[0], setEmployerFieldsActive = _e[1];
+    var _c = React.useState(), listActive = _c[0], setListActive = _c[1];
+    var _d = React.useState(false), employerFieldsActive = _d[0], setEmployerFieldsActive = _d[1];
     React.useEffect(function () {
         var _a, _b;
         if (((_b = (_a = methods.getValues('sourceIncome')) === null || _a === void 0 ? void 0 : _a.name.en) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'salary')
@@ -89,8 +76,7 @@ var AdditionalIndividualInfo = function (_a) {
     var isEmployerLocationListActive = listActive === ListType.EmployerLocationList;
     var isMonthlyIncomeListActive = listActive === ListType.MonthlyIncomeList;
     var isOccupationListActive = listActive === ListType.OccupationList;
-    var disabled = !methods.formState.isValid || civilIDUploading || signatureFileUploading;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Occupation, { onListOpen: function () { return handleMenuClick(ListType.OccupationList); }, onListClose: function () { return handleMenuClick(); }, show: !isEmployerLocationListActive && !isMonthlyIncomeListActive && !isSourceOfIncomeListActive }), _jsx(SourceOfIncome, { onListOpen: function () { return handleMenuClick(ListType.SourceOfIncomeList); }, onListClose: function () { return handleMenuClick(); }, show: !isEmployerLocationListActive && !isMonthlyIncomeListActive && !isOccupationListActive }), _jsx(MonthlyIncome, { show: !isEmployerLocationListActive && !isSourceOfIncomeListActive && !isOccupationListActive, onListOpen: function () { return handleMenuClick(ListType.MonthlyIncomeList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(EmployerName, { show: false }), _jsx(EmployerLocation, { show: !isSourceOfIncomeListActive && employerFieldsActive && !isMonthlyIncomeListActive && !isOccupationListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.EmployerLocationList); }, onListClose: function () { return handleMenuClick(); } }), _jsxs(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: [_jsx(CivilIDFile, {}), _jsx(SignatureFile, { show: user === null || user === void 0 ? void 0 : user.is_authorized })] })), _jsx(PEPSwitch, { show: !listActive }), _jsx(InfluencerSwitch, { show: !listActive })] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Occupation, { onListOpen: function () { return handleMenuClick(ListType.OccupationList); }, onListClose: function () { return handleMenuClick(); }, show: !isEmployerLocationListActive && !isMonthlyIncomeListActive && !isSourceOfIncomeListActive }), _jsx(SourceOfIncome, { onListOpen: function () { return handleMenuClick(ListType.SourceOfIncomeList); }, onListClose: function () { return handleMenuClick(); }, show: !isEmployerLocationListActive && !isMonthlyIncomeListActive && !isOccupationListActive }), _jsx(MonthlyIncome, { show: !isEmployerLocationListActive && !isSourceOfIncomeListActive && !isOccupationListActive, onListOpen: function () { return handleMenuClick(ListType.MonthlyIncomeList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(EmployerName, { show: false }), _jsx(EmployerLocation, { show: !isSourceOfIncomeListActive && employerFieldsActive && !isMonthlyIncomeListActive && !isOccupationListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.EmployerLocationList); }, onListClose: function () { return handleMenuClick(); } }), _jsxs(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: [_jsx(CivilIDFile, {}), _jsx(SignatureFile, { show: user === null || user === void 0 ? void 0 : user.is_authorized })] })), _jsx(PEPSwitch, { show: !listActive }), _jsx(InfluencerSwitch, { show: !listActive })] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: !methods.formState.isValid, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(AdditionalIndividualInfo);
 AdditionalIndividualInfo.defaultProps = {};

package/build/features/individual/screens/AdditionalIndividualInfo/CivilIDFile.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { ScreenContainer } from '../../../../features/shared/Containers';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { civilIDUploadingStatus, individualSelector } from '../../../app/individual/individualStore';
-import UploadMultipleFile from '../../../shared/UploadMultipleFile';
+import { individualSelector, uploadCivilIdFile } from '../../../../features/app/individual/individualStore';
+import { MAX_FILE_SIZE, VALID_FILE_FORMATS } from '../../../../constants';
+import UploadFile from '../../../../features/shared/UploadFile';
+import { maskFileName } from '../../../../utils';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -13,18 +16,66 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var CivilIDFile = function () {
-    var _a;
+    var _a, _b;
+    var _c = React.useState(0), progress = _c[0], setProgress = _c[1];
     var t = useTranslation().t;
-    var dispatch = useAppDispatch();
-    var control = useFormContext().control;
+    var _d = useFormContext(), control = _d.control, setError = _d.setError, clearErrors = _d.clearErrors, setValue = _d.setValue;
+    var civilIDFileControl = useController({ name: 'civilIDFile', control: control });
     var civilIDFileIdControl = useController({ name: 'civilID', control: control });
-    var _b = useAppSelector(individualSelector), loading = _b.loading, data = _b.data;
-    var handleCivilIDChange = function (ids) {
-        civilIDFileIdControl.field.onChange(ids);
+    var _e = useAppSelector(individualSelector), data = _e.data, loading = _e.loading, sysError = _e.error;
+    var _f = data.attachmentsData, civilIDUploading = _f.civilIDUploading, civilIDFile = _f.civilIDFile, civilID = _f.civilID;
+    var dispatch = useAppDispatch();
+    var civilIDValue = civilIDFileControl.field.value;
+    var error = ((_a = civilIDFileControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || ((_b = civilIDFileIdControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message);
+    var handleCivilIDChange = function (files) {
+        var _a;
+        var file = files === null || files === void 0 ? void 0 : files[0];
+        if (!VALID_FILE_FORMATS.includes(file === null || file === void 0 ? void 0 : file.type)) {
+            setError('civilIDFile', { message: 'file_not_supported_alert' });
+        }
+        else if ((file === null || file === void 0 ? void 0 : file.size) > MAX_FILE_SIZE) {
+            setError('civilIDFile', { message: 'file_size_alert' });
+        }
+        else {
+            civilIDFileControl.field.onChange(file);
+            dispatch(uploadCivilIdFile({
+                file: file,
+                onProgress: function (value) {
+                    setProgress(value);
+                },
+                title: (_a = data.verify.responseBody) === null || _a === void 0 ? void 0 : _a.merchant_id
+            }));
+        }
     };
-    var handleReset = function (ids) {
-        civilIDFileIdControl.field.onChange(ids);
+    var handleReset = function () {
+        civilIDFileControl.field.onChange(null);
+        civilIDFileIdControl.field.onChange('');
+        setProgress(0);
     };
-    return (_jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { 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, fileTitle: (_a = data.verify.responseBody) === null || _a === void 0 ? void 0 : _a.merchant_id, purpose: 'identity_document', fileUploadingStatus: function (uploading) { return dispatch(civilIDUploadingStatus(uploading)); } }) }));
+    React.useEffect(function () {
+        if (!!civilIDFile) {
+            setValue('civilIDFile', civilIDFile);
+            setValue('civilID', civilID);
+        }
+    }, [civilIDFile, civilID]);
+    React.useEffect(function () {
+        if (sysError === 'file_upload_error') {
+            setError('civilIDFileId', { message: sysError });
+            civilIDFileControl.field.onChange(null);
+            setProgress(0);
+        }
+    }, [sysError]);
+    React.useEffect(function () {
+        if ((civilIDFileControl.formState.isValid || !!civilIDValue) && error != 'file_upload_error')
+            clearErrors();
+    }, [civilIDFileControl.formState.isValid, civilIDValue]);
+    React.useEffect(function () {
+        if (!!civilIDFile) {
+            civilIDFileControl.field.onChange(civilIDFile);
+            civilIDFileIdControl.field.onChange(civilID);
+        }
+    }, []);
+    var fileName = civilIDValue ? maskFileName(civilIDValue === null || civilIDValue === void 0 ? void 0 : civilIDValue.name) : '';
+    return (_jsx(FeatureStyled, { children: _jsx(UploadFile, { 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, isFileUploaded: !civilIDUploading && !!civilIDValue, isSubmitting: loading, isUploading: civilIDUploading, progress: progress, onReset: handleReset, initialFileName: fileName, error: error && t(error) }) }));
 };
 export default CivilIDFile;

package/build/features/individual/screens/AdditionalIndividualInfo/SignatureFile.js

@@ -10,14 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ScreenContainer } from '../../../../features/shared/Containers';
+import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import { styled } from '@mui/material/styles';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import UploadMultipleFile from '../../../shared/UploadMultipleFile';
-import { ScreenContainer } from '../../../shared/Containers';
-import { individualSelector, signatureFileUploadingStatus } from '../../../app/individual/individualStore';
+import { individualSelector, uploadSignatureFile } from '../../../../features/app/individual/individualStore';
+import { MAX_FILE_SIZE, VALID_FILE_FORMATS } from '../../../../constants';
+import UploadFile from '../../../../features/shared/UploadFile';
 import Collapse from '../../../../components/Collapse';
+import { maskFileName } from '../../../../utils';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -25,18 +28,63 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var SignatureFile = function (_a) {
+    var _b, _c;
     var show = _a.show;
+    var _d = React.useState(0), progress = _d[0], setProgress = _d[1];
     var t = useTranslation().t;
-    var control = useFormContext().control;
+    var _e = useFormContext(), control = _e.control, setError = _e.setError, clearErrors = _e.clearErrors, setValue = _e.setValue;
+    var signatureFileControl = useController({ name: 'signatureFile', control: control });
     var signatureFileIdControl = useController({ name: 'signatureFileId', control: control });
-    var loading = useAppSelector(individualSelector).loading;
+    var _f = useAppSelector(individualSelector), data = _f.data, loading = _f.loading, sysError = _f.error;
+    var _g = data.attachmentsData, signatureFileUploading = _g.signatureFileUploading, signatureFile = _g.signatureFile, signatureFileId = _g.signatureFileId;
     var dispatch = useAppDispatch();
-    var handleSignatureChange = function (ids) {
-        signatureFileIdControl.field.onChange(ids);
+    var signatureValue = signatureFileControl.field.value;
+    var error = ((_b = signatureFileControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message) || ((_c = signatureFileIdControl.fieldState.error) === null || _c === void 0 ? void 0 : _c.message);
+    var handleSignatureChange = function (files) {
+        var file = files === null || files === void 0 ? void 0 : files[0];
+        if (!VALID_FILE_FORMATS.includes(file === null || file === void 0 ? void 0 : file.type)) {
+            setError('signatureFile', { message: 'file_not_supported_alert' });
+        }
+        else if ((file === null || file === void 0 ? void 0 : file.size) > MAX_FILE_SIZE) {
+            setError('signatureFile', { message: 'file_size_alert' });
+        }
+        else {
+            signatureFileControl.field.onChange(file);
+            dispatch(uploadSignatureFile({
+                file: file,
+                onProgress: function (value) {
+                    setProgress(value);
+                }
+            }));
+        }
     };
-    var handleReset = function (ids) {
-        signatureFileIdControl.field.onChange(ids);
+    var handleReset = function () {
+        signatureFileControl.field.onChange(null);
+        signatureFileIdControl.field.onChange('');
+        setProgress(0);
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { 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, purpose: 'customer_signature', fileTitle: 'Merchant Signature', fileUploadingStatus: function (uploading) { return dispatch(signatureFileUploadingStatus(uploading)); } }) }) })));
+    React.useEffect(function () {
+        if (sysError === 'file_upload_error') {
+            setError('signatureFileId', { message: sysError });
+            signatureFileControl.field.onChange(null);
+            setProgress(0);
+        }
+    }, [sysError]);
+    React.useEffect(function () {
+        if ((signatureFileControl.formState.isValid || !!signatureValue) && error != 'file_upload_error')
+            clearErrors();
+    }, [signatureFileControl.formState.isValid, signatureValue]);
+    React.useEffect(function () {
+        if (!!signatureFile) {
+            setValue('signatureFile', signatureFile);
+            setValue('signatureFileId', signatureFileId);
+        }
+    }, [signatureFile, signatureFileId]);
+    React.useEffect(function () {
+        if (!!signatureValue)
+            signatureFileControl.field.onChange(signatureFile);
+    }, []);
+    var fileName = signatureValue ? maskFileName(signatureValue === null || signatureValue === void 0 ? void 0 : signatureValue.name) : '';
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadFile, { 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, isFileUploaded: !signatureFileUploading && !!signatureValue, isSubmitting: loading, initialFileName: fileName, isUploading: signatureFileUploading, progress: progress, onReset: handleReset, error: error && t(error) }) }) })));
 };
 export default SignatureFile;