@tap-payments/auth-jsconnect 1.1.4-test → 1.1.5-test

package/build/@types/form.d.ts

@@ -50,6 +50,7 @@ export declare type BankFormValues = {
     beneficiaryName: string;
     bankName: string;
     bankStatementId?: string;
+    bankStatementFile?: File;
     uploading?: boolean;
     confirmPolicy: boolean;
 };

package/build/api/entity.d.ts

@@ -39,7 +39,7 @@ export declare type EntityBankUpdateBody = {
 };
 export declare type UploadFileBody = {
     file_link_create: boolean;
-    file: File | null;
+    file?: File;
     title: string | undefined;
     purpose: string;
 };

package/build/components/FileInput/DragAndDrop.js

@@ -29,7 +29,6 @@ var DragAndDrop = function (_a) {
         noKeyboard: true,
         noClick: true,
         multiple: false,
-        accept: { 'image/jpeg': ['.jpeg'], 'image/png': ['.png'], 'image/jpg': ['.jpg'], 'application/pdf': ['.pdf'] },
         onDrop: function (files) {
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(files === null || files === void 0 ? void 0 : files[0]);
         }

package/build/constants/validation.d.ts

@@ -6,6 +6,7 @@ export declare const FL_NUMBER_LENGTH = 8;
 export declare const CR_NUMBER_LENGTH = 10;
 export declare const SAUDI_NUMBER_LENGTH = 9;
 export declare const MAX_FILE_SIZE = 1000000;
+export declare const VALID_FILE_FORMATS: string[];
 export declare const REGEX_FULL_NAME: RegExp;
 export declare const REGEX_WEBSITE: RegExp;
 export declare const REGEX_BENEFICIARY_NAME: RegExp;

package/build/constants/validation.js

@@ -6,6 +6,7 @@ export var FL_NUMBER_LENGTH = 8;
 export var CR_NUMBER_LENGTH = 10;
 export var SAUDI_NUMBER_LENGTH = 9;
 export var MAX_FILE_SIZE = 1000000;
+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;

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

@@ -20,7 +20,6 @@ export declare const createBankAccount: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
     formData: BankFormValues;
 }, BankFormValues, {}>;
-export declare const uploadBankStatement: import("@reduxjs/toolkit").AsyncThunk<any, File, {}>;
 export declare const checkIbanBank: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
 }, {

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

@@ -154,56 +154,51 @@ export var retrieveEntityInfo = createAsyncThunk('retrieveBankEntityInfo', funct
     });
 }); });
 export var createBankAccount = createAsyncThunk('createBankAccount', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, settings, bank, iban, beneficiaryName, bank_name, requestBody, data;
-    var _b, _c, _d, _e;
-    return __generator(this, function (_f) {
-        switch (_f.label) {
+    var _a, settings, bank, iban, beneficiaryName, bank_name, fileResponse, uploadPayload, requestBody, data;
+    var _b, _c, _d, _e, _f;
+    return __generator(this, function (_g) {
+        switch (_g.label) {
             case 0:
                 _a = thunkApi.getState(), settings = _a.settings, bank = _a.bank;
                 iban = params.iban;
                 beneficiaryName = params.beneficiaryName;
                 bank_name = params.bankName;
+                fileResponse = undefined;
+                uploadPayload = {
+                    file_link_create: true,
+                    title: (_b = params.bankStatementFile) === null || _b === void 0 ? void 0 : _b.name,
+                    purpose: 'identity_document',
+                    file: params.bankStatementFile
+                };
+                if (!params.bankStatementFile) return [3, 2];
+                return [4, API.entityService.uploadFileInfo(uploadPayload)];
+            case 1:
+                fileResponse = _g.sent();
+                _g.label = 2;
+            case 2:
                 requestBody = {
-                    wallet_id: (_c = (_b = bank.data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.merchant) === null || _c === void 0 ? void 0 : _c.wallet_id,
+                    wallet_id: (_d = (_c = bank.data.verify.responseBody) === null || _c === void 0 ? void 0 : _c.merchant) === null || _d === void 0 ? void 0 : _d.wallet_id,
                     bank_account: {
                         iban: iban,
                         beneficiary_name: beneficiaryName,
                         bank_name: bank_name,
-                        bank_statement_file_id: params.bankStatementId,
+                        bank_statement_file_id: fileResponse === null || fileResponse === void 0 ? void 0 : fileResponse.id,
                         is_acknowledged: params.confirmPolicy
                     },
                     step_name: BANK_STEP_NAMES.BANK_INFO,
                     encryption_contract: ['bank_account.iban', 'bank_account.beneficiary_name', 'bank_account.bank_name']
                 };
                 return [4, API.entityService.createBankAccount(requestBody)];
-            case 1:
-                data = (_f.sent()).data;
+            case 3:
+                data = (_g.sent()).data;
                 if (!data.errors) {
                     thunkApi.dispatch(handleNextScreenStep());
-                    (_e = (_d = settings.data.appConfig).onStepCompleted) === null || _e === void 0 ? void 0 : _e.call(_d, settings.data.activeScreen.name, requestBody);
+                    (_f = (_e = settings.data.appConfig).onStepCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, settings.data.activeScreen.name, requestBody);
                 }
                 return [2, { data: data, formData: params }];
         }
     });
 }); });
-export var uploadBankStatement = createAsyncThunk('uploadBankStatement', function (file, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var requestBody, data;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                requestBody = {
-                    file_link_create: true,
-                    title: file === null || file === void 0 ? void 0 : file.name,
-                    purpose: 'identity_document',
-                    file: file
-                };
-                return [4, API.entityService.uploadFileInfo(requestBody)];
-            case 1:
-                data = _a.sent();
-                return [2, data];
-        }
-    });
-}); });
 export var checkIbanBank = createAsyncThunk('checkIbanBank', function (_a) {
     var iban = _a.iban, cancelToken = _a.cancelToken, onSuccess = _a.onSuccess;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -424,20 +419,6 @@ export var bankSlice = createSlice({
             if (action.error.message === 'Aborted')
                 return;
             state.error = action.error.message;
-        })
-            .addCase(uploadBankStatement.pending, function (state) {
-            state.data.bankData.uploading = true;
-            state.error = null;
-        })
-            .addCase(uploadBankStatement.fulfilled, function (state, action) {
-            state.data.bankData.uploading = false;
-            state.error = null;
-            var id = action.payload.id;
-            state.data.bankData.responseBody = { fileId: id };
-        })
-            .addCase(uploadBankStatement.rejected, function (state, action) {
-            state.data.bankData.uploading = false;
-            state.error = action.error.message;
         });
     }
 });

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

@@ -1,12 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
 import { styled } from '@mui/material/styles';
 import { ScreenContainer } from '../../../../features/shared/Containers';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import UploadFile from '../../../../features/shared/UploadFile';
-import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { bankSelector, uploadBankStatement } from '../../../../features/app/bank/bankStore';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -14,25 +11,17 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var BankStatement = function () {
-    var _a, _b;
-    var dispatch = useAppDispatch();
-    var data = useAppSelector(bankSelector).data;
+    var _a;
     var t = useTranslation().t;
     var control = useFormContext().control;
-    var bankStatementControl = useController({ name: 'bankStatementId', control: control });
-    var error = (_a = bankStatementControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
-    var uploading = data.bankData.uploading;
+    var bankStatementFileControl = useController({ name: 'bankStatementFile', control: control });
+    var error = (_a = bankStatementFileControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
     var handleBankStatementChange = function (file) {
-        dispatch(uploadBankStatement(file));
+        bankStatementFileControl.field.onChange(file);
     };
     var handleReset = function () {
-        bankStatementControl.field.onChange('');
+        bankStatementFileControl.field.onChange(null);
     };
-    React.useEffect(function () {
-        var _a, _b;
-        if ((_a = data.bankData.responseBody) === null || _a === void 0 ? void 0 : _a.fileId)
-            bankStatementControl.field.onChange((_b = data.bankData.responseBody) === null || _b === void 0 ? void 0 : _b.fileId);
-    }, [(_b = data.bankData.responseBody) === null || _b === void 0 ? void 0 : _b.fileId]);
-    return (_jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_bank_statement'), dragTitle: t('drag_and_drop'), uploadTitle: t('title_upload_file'), onFileUploaded: handleBankStatementChange, loading: uploading, onReset: handleReset, error: error && t(error) }) }));
+    return (_jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_bank_statement'), dragTitle: t('drag_and_drop'), uploadTitle: t('title_upload_file'), onFileUploaded: handleBankStatementChange, isSubmitting: bankStatementFileControl.formState.isSubmitted, onReset: handleReset, error: error && t(error) }) }));
 };
 export default BankStatement;

package/build/features/bank/screens/BankDetails/validation.d.ts

@@ -4,17 +4,20 @@ export declare const BankValidation: yup.ObjectSchema<import("yup/lib/object").A
     bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankStatementId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    bankStatementFile: any;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankStatementId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    bankStatementFile: any;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     bankStatementId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    bankStatementFile: any;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>>>;

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

@@ -1,4 +1,4 @@
-import { REGEX_BENEFICIARY_NAME } from '../../../../constants';
+import { REGEX_BENEFICIARY_NAME, VALID_FILE_FORMATS } from '../../../../constants';
 import * as yup from 'yup';
 export var BankValidation = yup.object().shape({
     iban: yup
@@ -13,5 +13,15 @@ export var BankValidation = yup.object().shape({
         .matches(REGEX_BENEFICIARY_NAME, 'beneficiary_name_invalid')
         .required('beneficiary_name_required'),
     bankStatementId: yup.string().optional(),
+    bankStatementFile: yup
+        .mixed()
+        .test({
+        test: function (value) {
+            if (!!value)
+                return VALID_FILE_FORMATS.includes(value === null || value === void 0 ? void 0 : value.type) ? true : this.createError({ message: 'alert_file_upload' });
+            return true;
+        }
+    })
+        .optional(),
     confirmPolicy: yup.boolean().required('alert_bank_confirm').isTrue('alert_bank_confirm')
 });

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

@@ -13,9 +13,9 @@ interface UploadFileProps {
     dragTitle: string;
     uploadTitle: string;
     error?: string;
-    loading?: boolean;
+    isSubmitting?: boolean;
     onFileUploaded: (file: File) => void;
     onReset: () => void;
 }
-declare const UploadFile: ({ label, required, dragTitle, uploadTitle, loading, error, onFileUploaded, onReset }: UploadFileProps) => JSX.Element;
+declare const UploadFile: ({ label, required, dragTitle, uploadTitle, isSubmitting, error, onFileUploaded, onReset }: UploadFileProps) => JSX.Element;
 export default UploadFile;

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

@@ -21,8 +21,6 @@ import Collapse from '../../../components/Collapse';
 import Warning from '../../../components/Warning';
 import Icon from '../../../components/Icon';
 import { ICONS_NAMES } from '../../../constants';
-import { useTranslation } from 'react-i18next';
-import Loader from '../../../components/Loader';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -61,17 +59,18 @@ export var InputContainerStyled = styled(Box)(function (_a) {
     });
 });
 var UploadFile = function (_a) {
-    var label = _a.label, required = _a.required, dragTitle = _a.dragTitle, uploadTitle = _a.uploadTitle, loading = _a.loading, error = _a.error, onFileUploaded = _a.onFileUploaded, onReset = _a.onReset;
+    var label = _a.label, required = _a.required, dragTitle = _a.dragTitle, uploadTitle = _a.uploadTitle, isSubmitting = _a.isSubmitting, error = _a.error, onFileUploaded = _a.onFileUploaded, onReset = _a.onReset;
     var _b = React.useState(''), fileName = _b[0], setFileName = _b[1];
-    var t = useTranslation().t;
     var handleFileChange = function (file) {
         setFileName(file === null || file === void 0 ? void 0 : file.name);
         onFileUploaded === null || onFileUploaded === void 0 ? void 0 : onFileUploaded(file);
     };
     var handleReset = function () {
-        setFileName('');
-        onReset === null || onReset === void 0 ? void 0 : onReset();
+        if (!isSubmitting) {
+            setFileName('');
+            onReset === null || onReset === void 0 ? void 0 : onReset();
+        }
     };
-    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !fileName }, { children: _jsxs(InputContainerStyled, { children: [_jsx(DragAndDrop, { title: dragTitle, onSuccess: handleFileChange }), _jsx(UploadInput, { title: uploadTitle, onChange: handleFileChange })] }) })), _jsx(Collapse, __assign({ in: !!fileName }, { children: _jsxs(InputContainerStyled, { children: [_jsx(BoxStyled, { children: loading ? t('loading_bank_statement') : fileName }), _jsxs(UploadBoxStyled, __assign({ onClick: handleReset }, { children: [_jsx(Collapse, __assign({ in: !loading }, { children: _jsx(IconStyled, { src: ICONS_NAMES.DELETE_ICON }) })), _jsx(Collapse, __assign({ in: loading }, { children: _jsx(Loader, { innerColor: 'white', outerColor: 'white', toggleAnimation: true, style: { width: 30, height: 30 }, svgStyle: { width: 30, height: 30 } }) }))] }))] }) })), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: error })) }))] }));
+    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !fileName }, { children: _jsxs(InputContainerStyled, { children: [_jsx(DragAndDrop, { title: dragTitle, onSuccess: handleFileChange }), _jsx(UploadInput, { title: uploadTitle, onChange: handleFileChange })] }) })), _jsx(Collapse, __assign({ in: !!fileName }, { children: _jsxs(InputContainerStyled, { children: [_jsx(BoxStyled, { children: fileName }), _jsx(UploadBoxStyled, __assign({ onClick: handleReset }, { children: _jsx(IconStyled, { src: ICONS_NAMES.DELETE_ICON }) }))] }) })), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: error })) }))] }));
 };
 export default UploadFile;

package/package.json

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