@tap-payments/auth-jsconnect 2.0.60-test → 2.0.62-test

package/build/api/entity.d.ts

@@ -52,6 +52,6 @@ declare const entityService: {
     retrieveBankAccount: (id: string) => Promise<any>;
     retrieveEntityInfo: (entity_id: string, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
     updateIndividualInfo: ({ id, ...data }: EntityInfoBody) => Promise<any>;
-    uploadFileInfo: (data: UploadFileBody) => Promise<any>;
+    uploadFileInfo: (data: UploadFileBody, config?: AxiosRequestConfig) => Promise<any>;
 };
 export { entityService };

package/build/api/entity.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -31,13 +42,8 @@ var retrieveBankAccount = function (id) {
         url: "".concat(ENDPOINT_PATHS.BANK, "/").concat(id)
     });
 };
-var uploadFileInfo = function (data) {
-    return httpClient({
-        method: 'post',
-        url: "".concat(ENDPOINT_PATHS.FILES_PATH),
-        data: data,
-        headers: { 'Content-Type': 'multipart/form-data' }
-    });
+var uploadFileInfo = function (data, config) {
+    return httpClient(__assign({ method: 'post', url: "".concat(ENDPOINT_PATHS.FILES_PATH), data: data, headers: { 'Content-Type': 'multipart/form-data' } }, config));
 };
 var updateIndividualInfo = function (_a) {
     var id = _a.id, data = __rest(_a, ["id"]);

package/build/api/index.d.ts

@@ -40,7 +40,7 @@ declare const API: {
         retrieveBankAccount: (id: string) => Promise<any>;
         retrieveEntityInfo: (entity_id: string, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, any>>;
         updateIndividualInfo: ({ id, ...data }: EntityInfoBody) => Promise<any>;
-        uploadFileInfo: (data: import("./entity").UploadFileBody) => Promise<any>;
+        uploadFileInfo: (data: import("./entity").UploadFileBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<any>;
     };
     availabilityServices: {
         checkEmail: (data: CheckEmailBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, any>>;

package/build/components/FileInput/DragAndDrop.d.ts

@@ -6,10 +6,11 @@ interface DragAndDropProps {
     uploadingTitle: string;
     successTitle: string;
     error?: string;
+    progress?: number;
     uploading?: boolean;
     uploadSuccess?: boolean;
     fileExists: boolean;
     onSuccess?: (files: File) => void;
 }
-declare const DragAndDrop: ({ title, subTitle, description, error, uploadingTitle, successTitle, uploading, fileExists, uploadSuccess, onSuccess }: DragAndDropProps) => JSX.Element;
+declare const DragAndDrop: ({ title, subTitle, description, error, uploadingTitle, successTitle, progress, uploading, fileExists, uploadSuccess, onSuccess }: DragAndDropProps) => JSX.Element;
 export default DragAndDrop;

package/build/components/FileInput/DragAndDrop.js

@@ -91,16 +91,22 @@ var DropFileIcon = styled(Icon)(function (_a) {
         marginInline: theme.spacing(-1.25)
     });
 });
+var TextDoneStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginBlockStart: theme.spacing(1),
+        color: theme.palette.text.primary
+    });
+});
 var WarningContainer = styled(Box)(function (_a) {
     var theme = _a.theme;
     return (__assign({ background: theme.palette.warning.dark, paddingBlock: theme.spacing(1.5), paddingInlineStart: theme.spacing(2.5), border: '0.5px solid', display: 'flex', justifyContent: 'space-around', borderColor: theme.palette.warning.main, color: theme.palette.warning.light, padding: theme.spacing(0.5, 1), borderRadius: theme.spacing(12.5) }, theme.typography.caption));
 });
 var DragAndDrop = function (_a) {
-    var title = _a.title, subTitle = _a.subTitle, description = _a.description, error = _a.error, uploadingTitle = _a.uploadingTitle, successTitle = _a.successTitle, uploading = _a.uploading, fileExists = _a.fileExists, uploadSuccess = _a.uploadSuccess, onSuccess = _a.onSuccess;
-    var _b = React.useState(1), progress = _b[0], setProgress = _b[1];
-    var _c = React.useState(false), dragActive = _c[0], setDragActive = _c[1];
-    var _d = React.useState(false), showDone = _d[0], setShowDone = _d[1];
-    var _e = useDropzone({
+    var title = _a.title, subTitle = _a.subTitle, description = _a.description, error = _a.error, uploadingTitle = _a.uploadingTitle, successTitle = _a.successTitle, progress = _a.progress, uploading = _a.uploading, fileExists = _a.fileExists, uploadSuccess = _a.uploadSuccess, onSuccess = _a.onSuccess;
+    var _b = React.useState(false), dragActive = _b[0], setDragActive = _b[1];
+    var _c = React.useState(false), showDone = _c[0], setShowDone = _c[1];
+    var _d = useDropzone({
         maxFiles: 1,
         noKeyboard: true,
         noClick: false,
@@ -114,30 +120,18 @@ var DragAndDrop = function (_a) {
         },
         onDrop: function (files) {
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(files === null || files === void 0 ? void 0 : files[0]);
+            setDragActive(false);
         }
-    }), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps;
+    }), getRootProps = _d.getRootProps, getInputProps = _d.getInputProps;
     React.useEffect(function () {
         setDragActive(false);
         if (uploadSuccess) {
             setShowDone(true);
             setTimeout(function () {
-                setProgress(100);
                 setShowDone(false);
-            }, 500);
-        }
-        else if (uploading) {
-            var timer_1 = setInterval(function () {
-                setProgress(function (prevProgress) { return (prevProgress >= 75 ? 1 : prevProgress + 25); });
-            }, 800);
-            return function () {
-                clearInterval(timer_1);
-            };
+            }, 400);
         }
     }, [uploading]);
-    React.useEffect(function () {
-        if (!fileExists)
-            setProgress(25);
-    }, [fileExists]);
-    return (_jsx(Box, __assign({ id: 'upload-container' }, { children: _jsxs(BoxStyled, __assign({ active: dragActive }, getRootProps({ className: 'dropzone' }), { children: [_jsx(Fade, __assign({ in: (!uploading && !uploadSuccess) || !fileExists, unmountOnExit: true, timeout: 100 }, { children: _jsxs(Box, { children: [_jsx(CenterBoxStyled, { children: _jsx(IconStyled, { src: dragActive ? ICONS_NAMES.ACTIVE_UPLOAD_ICON : ICONS_NAMES.UPLOAD_ICON }) }), _jsxs(VerticalCenterBox, __assign({ sx: { marginBlockEnd: '20px' } }, { children: [_jsxs(CenterBoxStyled, { children: [_jsx(Text, __assign({ sx: { fontSize: '16px' } }, { children: title })), _jsx(SubTitleStyled, { children: subTitle })] }), _jsx(DescTextStyled, { children: description }), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsxs(WarningContainer, { children: [_jsx(WarningIconStyled, { src: ICONS_NAMES.WARNING_ICON }), _jsx(Text, { children: error })] }) }))] })), _jsx(UploadInputStyled, { inputProps: __assign({}, getInputProps()) })] }) })), _jsx(CenterBoxStyled, { children: showDone ? (_jsxs(VerticalCenterBox, { children: [_jsx(DoneIconStyled, { src: ICONS_NAMES.DONE_ICON }), _jsx(Text, { children: successTitle })] })) : uploading ? (_jsxs(VerticalCenterBox, { children: [_jsx(CircularProgress, { value: progress, size: 54 }), _jsx(Text, { children: uploadingTitle })] })) : (_jsx(_Fragment, {})) }), _jsx(Fade, __assign({ unmountOnExit: true, timeout: 100, in: dragActive }, { children: _jsx(DropFileIcon, { src: ICONS_NAMES.DROP_FILE_ICON }) }))] })) })));
+    return (_jsx(Box, __assign({ id: 'upload-container' }, { children: _jsxs(BoxStyled, __assign({ active: dragActive }, getRootProps({ className: 'dropzone' }), { children: [_jsx(Fade, __assign({ in: (!uploading && !uploadSuccess) || !fileExists, unmountOnExit: true, timeout: 100 }, { children: _jsxs(Box, { children: [_jsx(CenterBoxStyled, { children: _jsx(IconStyled, { src: dragActive ? ICONS_NAMES.ACTIVE_UPLOAD_ICON : ICONS_NAMES.UPLOAD_ICON }) }), _jsxs(VerticalCenterBox, __assign({ sx: { marginBlockEnd: '20px' } }, { children: [_jsxs(CenterBoxStyled, { children: [_jsx(Text, __assign({ sx: { fontSize: '16px' } }, { children: title })), _jsx(SubTitleStyled, { children: subTitle })] }), _jsx(DescTextStyled, { children: description }), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsxs(WarningContainer, { children: [_jsx(WarningIconStyled, { src: ICONS_NAMES.WARNING_ICON }), _jsx(Text, { children: error })] }) }))] })), _jsx(UploadInputStyled, { inputProps: __assign({}, getInputProps()) })] }) })), _jsx(CenterBoxStyled, { children: showDone ? (_jsxs(VerticalCenterBox, { children: [_jsx(DoneIconStyled, { src: ICONS_NAMES.DONE_ICON }), _jsx(TextDoneStyled, { children: successTitle })] })) : uploading ? (_jsxs(VerticalCenterBox, { children: [_jsx(CircularProgress, { value: progress, size: 54 }), _jsx(Text, { children: uploadingTitle })] })) : (_jsx(_Fragment, {})) })] })) })));
 };
 export default DragAndDrop;

package/build/constants/validation.js

@@ -10,6 +10,6 @@ export var MAX_FILE_SIZE = 5000000;
 export var VALID_FILE_FORMATS = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'];
 export var REGEX_FULL_NAME = /^([a-zA-Z]{2,}\s{1}[a-zA-Z]{1,}|[a-zA-Z]+\s{1}[a-zA-Z.-]{1,}\s{1}[a-zA-Z.-]{1,}\s{1}[a-zA-Z]{1,}|[a-zA-Z]+\s{1}[a-zA-Z.-]{1,}\s{1}[a-zA-Z]{1,})$/g;
 export var REGEX_WEBSITE = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,63}(:[0-9]{1,5})?(\/.*)?$/;
-export var REGEX_BENEFICIARY_NAME = /^([\u0600-\u065F\u066A-\u06EF\u06FA-\u06FFa-zA-Z\s])*$/g;
+export var REGEX_BENEFICIARY_NAME = /^([\u0600-\u065F\u066A-\u06EF\u06FA-\u06FFa-zA-Z()\s])*$/g;
 export var REGEX_BRAND_NAME = /^(([a-zA-Z0-9])+\s)*[a-zA-Z0-9]+$/;
 export var EMAIL_MAX_LENGTH = 50;

package/build/features/app/bank/bankStore.d.ts

@@ -33,9 +33,13 @@ export declare const checkIbanBank: import("@reduxjs/toolkit").AsyncThunk<{
     cancelToken: CancelToken;
     onSuccess?: (() => void) | undefined;
 }, {}>;
+interface UploadBankStatementParams {
+    file: File;
+    onProgress?: (value: number) => void;
+}
 export declare const uploadBankStatement: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
-}, File, {}>;
+}, UploadBankStatementParams, {}>;
 export declare const updateBoardSuccess: import("@reduxjs/toolkit").AsyncThunk<{
     response: any;
     formData: void;

package/build/features/app/bank/bankStore.js

@@ -209,24 +209,31 @@ export var checkIbanBank = createAsyncThunk('checkIbanBank', function (_a) {
         });
     });
 });
-export var uploadBankStatement = createAsyncThunk('uploadBankStatement', function (file) { return __awaiter(void 0, void 0, void 0, function () {
-    var uploadPayload, data;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                uploadPayload = {
-                    file_link_create: true,
-                    title: file === null || file === void 0 ? void 0 : file.name,
-                    purpose: 'identity_document',
-                    file: file
-                };
-                return [4, API.entityService.uploadFileInfo(uploadPayload)];
-            case 1:
-                data = _a.sent();
-                return [2, { data: data }];
-        }
+export var uploadBankStatement = createAsyncThunk('uploadBankStatement', 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: true,
+                        title: file === null || file === void 0 ? void 0 : file.name,
+                        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 }];
+            }
+        });
     });
-}); });
+});
 export var updateBoardSuccess = createAsyncThunk('updateBoardBankSuccess', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, settings, bank, _b, id, infoId, payload, data;
     var _c, _d, _e, _f;
@@ -431,7 +438,7 @@ export var bankSlice = createSlice({
             var data = action.payload.data;
             state.data.bankData.bankStatementId = data === null || data === void 0 ? void 0 : data.id;
         })
-            .addCase(uploadBankStatement.rejected, function (state, action) {
+            .addCase(uploadBankStatement.rejected, function (state) {
             state.uploading = false;
             state.error = 'file_upload_error';
         });

package/build/features/bank/screens/BankDetails/BankStatement.js

@@ -16,11 +16,12 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
 });
 var BankStatement = function () {
     var _a, _b;
+    var _c = React.useState(0), progress = _c[0], setProgress = _c[1];
     var t = useTranslation().t;
-    var _c = useFormContext(), control = _c.control, setError = _c.setError, clearErrors = _c.clearErrors;
+    var _d = useFormContext(), control = _d.control, setError = _d.setError, clearErrors = _d.clearErrors;
     var bankStatementFileControl = useController({ name: 'bankStatementFile', control: control });
     var bankStatementIdControl = useController({ name: 'bankStatementId', control: control });
-    var _d = useAppSelector(bankSelector), loading = _d.loading, uploading = _d.uploading, sysError = _d.error;
+    var _e = useAppSelector(bankSelector), loading = _e.loading, uploading = _e.uploading, sysError = _e.error;
     var dispatch = useAppDispatch();
     var bankStatementValue = bankStatementFileControl.field.value;
     var error = ((_a = bankStatementFileControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || ((_b = bankStatementIdControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message);
@@ -33,23 +34,30 @@ var BankStatement = function () {
         }
         else {
             bankStatementFileControl.field.onChange(file);
-            dispatch(uploadBankStatement(file));
+            dispatch(uploadBankStatement({
+                file: file,
+                onProgress: function (value) {
+                    setProgress(value);
+                }
+            }));
         }
     };
     var handleReset = function () {
         bankStatementFileControl.field.onChange(null);
         bankStatementIdControl.field.onChange('');
+        setProgress(0);
     };
     React.useEffect(function () {
         if (sysError === 'file_upload_error') {
             setError('bankStatementId', { message: sysError });
             bankStatementFileControl.field.onChange(null);
+            setProgress(0);
         }
     }, [sysError]);
     React.useEffect(function () {
         if ((bankStatementFileControl.formState.isValid || !!bankStatementValue) && error != 'file_upload_error')
             clearErrors();
     }, [bankStatementFileControl.formState.isValid, bankStatementValue]);
-    return (_jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_bank_statement'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleBankStatementChange, isFileUploaded: !uploading && !!bankStatementValue, isSubmitting: loading, isUploading: uploading, onReset: handleReset, error: error && t(error) }) }));
+    return (_jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_bank_statement'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleBankStatementChange, isFileUploaded: !uploading && !!bankStatementValue, isSubmitting: loading, isUploading: uploading, progress: progress, onReset: handleReset, error: error && t(error) }) }));
 };
 export default BankStatement;

package/build/features/shared/UploadFile/UploadFile.d.ts

@@ -16,11 +16,12 @@ interface UploadFileProps {
     uploadingTitle: string;
     successTitle: string;
     error?: string;
+    progress?: number;
     isSubmitting?: boolean;
     isUploading?: boolean;
     isFileUploaded?: boolean;
     onFileUploaded: (file: File) => void;
     onReset: () => void;
 }
-declare const UploadFile: ({ label, required, title, subTitle, dragDescription, uploadingTitle, successTitle, isSubmitting, isUploading, isFileUploaded, error, onFileUploaded, onReset }: UploadFileProps) => JSX.Element;
+declare const UploadFile: ({ label, required, title, subTitle, dragDescription, uploadingTitle, successTitle, isSubmitting, isUploading, isFileUploaded, error, progress, onFileUploaded, onReset }: UploadFileProps) => JSX.Element;
 export default UploadFile;

package/build/features/shared/UploadFile/UploadFile.js

@@ -64,7 +64,7 @@ export var InputContainerStyled = styled(Box)(function (_a) {
     });
 });
 var UploadFile = function (_a) {
-    var label = _a.label, required = _a.required, title = _a.title, subTitle = _a.subTitle, dragDescription = _a.dragDescription, uploadingTitle = _a.uploadingTitle, successTitle = _a.successTitle, isSubmitting = _a.isSubmitting, isUploading = _a.isUploading, isFileUploaded = _a.isFileUploaded, error = _a.error, onFileUploaded = _a.onFileUploaded, onReset = _a.onReset;
+    var label = _a.label, required = _a.required, title = _a.title, subTitle = _a.subTitle, dragDescription = _a.dragDescription, uploadingTitle = _a.uploadingTitle, successTitle = _a.successTitle, isSubmitting = _a.isSubmitting, isUploading = _a.isUploading, isFileUploaded = _a.isFileUploaded, error = _a.error, progress = _a.progress, onFileUploaded = _a.onFileUploaded, onReset = _a.onReset;
     var _b = React.useState(''), fileName = _b[0], setFileName = _b[1];
     var _c = React.useState(false), showFile = _c[0], setShowFile = _c[1];
     var handleFileChange = function (file) {
@@ -81,11 +81,11 @@ var UploadFile = function (_a) {
         if (isFileUploaded && !!fileName) {
             setTimeout(function () {
                 setShowFile(true);
-            }, 800);
+            }, 600);
         }
         else
             setShowFile(false);
     }, [isFileUploaded]);
-    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !showFile }, { children: _jsx(InputContainerStyled, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: !!fileName, uploadingTitle: uploadingTitle, successTitle: successTitle, uploading: isUploading, uploadSuccess: isFileUploaded, onSuccess: handleFileChange, error: error }) }) })), _jsx(Collapse, __assign({ in: showFile, timeout: 300 }, { children: _jsxs(InputContainerStyled, { children: [_jsxs(BoxStyled, { children: [_jsxs(Box, __assign({ sx: { display: 'flex' } }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: fileName })] })), _jsx(Box, { children: _jsx(CheckIcon, {}) })] }), _jsx(UploadBoxStyled, __assign({ onClick: handleReset }, { children: _jsx(ClearIconStyled, {}) }))] }) }))] }));
+    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !showFile }, { children: _jsx(InputContainerStyled, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: !!fileName, uploadingTitle: uploadingTitle, successTitle: successTitle, progress: progress, uploading: isUploading, uploadSuccess: isFileUploaded, onSuccess: handleFileChange, error: error }) }) })), _jsx(Collapse, __assign({ in: showFile, timeout: 300 }, { children: _jsxs(InputContainerStyled, { children: [_jsxs(BoxStyled, { children: [_jsxs(Box, __assign({ sx: { display: 'flex' } }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: fileName })] })), _jsx(Box, { children: _jsx(CheckIcon, {}) })] }), _jsx(UploadBoxStyled, __assign({ onClick: handleReset }, { children: _jsx(ClearIconStyled, {}) }))] }) }))] }));
 };
 export default UploadFile;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "2.0.60-test",
+	"version": "2.0.62-test",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",