@tap-payments/auth-jsconnect 1.0.100-test → 1.1.2-test

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

@@ -49,6 +49,8 @@ export declare type BankFormValues = {
     iban: string;
     beneficiaryName: string;
     bankName: string;
+    bankStatementId?: string;
+    uploading?: boolean;
     confirmPolicy: boolean;
 };
 export declare type TaxFormValues = {

package/build/api/entity.d.ts

@@ -37,11 +37,18 @@ export declare type EntityBankUpdateBody = {
     step_name: string;
     encryption_contract?: Array<string>;
 };
+export declare type UploadFileBody = {
+    file_link_create: boolean;
+    file: File | null;
+    title: string | undefined;
+    purpose: string;
+};
 declare const entityService: {
     createEntityInfo: ({ id, ...data }: EntityInfoBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
     updateEntityInfo: ({ id, ...data }: EntityInfoBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
     createBankAccount: (data: EntityBankUpdateBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
     retrieveEntityInfo: (entity_id: string, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
     updateIndividualInfo: ({ id, ...data }: EntityInfoBody) => Promise<any>;
+    uploadFileInfo: (data: UploadFileBody) => Promise<any>;
 };
 export { entityService };

package/build/api/entity.js

@@ -25,6 +25,14 @@ var updateEntityInfo = function (_a, config) {
 var createBankAccount = function (data, config) {
     return instance.post("".concat(ENDPOINT_PATHS.BANK), data, config);
 };
+var uploadFileInfo = function (data) {
+    return httpClient({
+        method: 'post',
+        url: "".concat(ENDPOINT_PATHS.FILES_PATH),
+        data: data,
+        headers: { 'Content-Type': 'multipart/form-data' }
+    });
+};
 var updateIndividualInfo = function (_a) {
     var id = _a.id, data = __rest(_a, ["id"]);
     return httpClient({
@@ -38,6 +46,7 @@ var entityService = {
     updateEntityInfo: updateEntityInfo,
     createBankAccount: createBankAccount,
     retrieveEntityInfo: retrieveEntityInfo,
-    updateIndividualInfo: updateIndividualInfo
+    updateIndividualInfo: updateIndividualInfo,
+    uploadFileInfo: uploadFileInfo
 };
 export { entityService };

package/build/api/index.d.ts

@@ -36,6 +36,7 @@ declare const API: {
         createBankAccount: (data: EntityBankUpdateBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, 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>;
     };
     availabilityServices: {
         checkEmail: (data: CheckEmailBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, any>>;

package/build/api/lead.d.ts

@@ -27,6 +27,7 @@ declare type BrandContent = {
     about?: BrandTitle;
 };
 declare type BrandInfo = {
+    id?: string;
     name?: BrandTitle;
     sector?: Array<string>;
     website?: string;

package/build/assets/locales/ar.json

@@ -242,5 +242,6 @@
     "password_success_title": "Your password is set",
     "bank": "bank",
     "reset_password_success_title": "لقد ارسلنا رسالة بريدية إليك",
-    "reset_password_success_description": "تحقق من بريدك الإلكتروني لإعادة تعيين كلمة المرور الخاصة بك."
+    "reset_password_success_description": "تحقق من بريدك الإلكتروني لإعادة تعيين كلمة المرور الخاصة بك.",
+    "license_name_label": "اسم الرخصة"
 }

package/build/assets/locales/en.json

@@ -262,5 +262,6 @@
     "account_details": "Your account details",
     "bank": "bank",
     "reset_password_success_title": "We sent you an email",
-    "reset_password_success_description": "Check your email to reset your password."
+    "reset_password_success_description": "Check your email to reset your password.",
+    "license_name_label": "License Name"
 }

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface DragAndDropProps {
+    title: string;
+    onSuccess?: (files: File) => void;
+}
+declare const DragAndDrop: ({ title, onSuccess }: DragAndDropProps) => JSX.Element;
+export default DragAndDrop;

package/build/components/FileInput/DragAndDrop.js

@@ -0,0 +1,39 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { alpha, styled } from '@mui/material/styles';
+import Input from '../Input';
+import Text from '../Text';
+import { useDropzone } from 'react-dropzone';
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ direction: theme.direction }, theme.typography.subtitle2), { color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightRegular, background: theme.palette.background.default, padding: theme.spacing(1.5, 2.5, 1.5), border: "1px dashed ".concat(alpha(theme.palette.divider, 0.8)), width: '50%', cursor: 'pointer' }));
+});
+var UploadInputStyled = styled(Input)(function () { return ({
+    display: 'none'
+}); });
+var DragAndDrop = function (_a) {
+    var title = _a.title, onSuccess = _a.onSuccess;
+    var _b = useDropzone({
+        maxFiles: 1,
+        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]);
+        }
+    }), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps;
+    return (_jsxs(BoxStyled, __assign({}, getRootProps({ className: 'dropzone' }), { children: [_jsx(Text, __assign({ sx: { fontSize: '12px' } }, { children: title })), _jsx(UploadInputStyled, { inputProps: __assign({}, getInputProps()) })] })));
+};
+export default DragAndDrop;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface UploadInputProps {
+    title: string;
+    onChange: (file: File) => void;
+}
+declare const UploadInput: ({ title, onChange }: UploadInputProps) => JSX.Element;
+export default UploadInput;

package/build/components/FileInput/UploadInput.js

@@ -0,0 +1,38 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import React from 'react';
+import Box from '@mui/material/Box';
+import Input from '../../components/Input';
+import Text from '../Text';
+var UploadInputStyled = styled(Input)(function () { return ({
+    display: 'none'
+}); });
+var UploadBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, theme.typography.caption), { background: theme.palette.primary.main, color: theme.palette.common.white, fontWeight: theme.typography.fontWeightRegular, padding: theme.spacing(1.5, 2.5, 1.5), cursor: 'pointer', width: '50%' }));
+});
+var UploadInput = function (_a) {
+    var title = _a.title, onChange = _a.onChange;
+    var fileRef = React.useRef(null);
+    var openDeviceMedia = function () {
+        var _a;
+        (_a = fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var onFileChange = function (event) {
+        if (event.target.files)
+            onChange === null || onChange === void 0 ? void 0 : onChange(event.target.files[0]);
+    };
+    return (_jsxs(UploadBoxStyled, __assign({ onClick: openDeviceMedia }, { children: [_jsx(Text, __assign({ sx: { fontSize: '12px' } }, { children: title })), _jsx(UploadInputStyled, { onChange: onFileChange, id: 'upload-file-input', inputRef: fileRef, type: 'file', inputProps: { accept: '.png,.jpg,.pdf,.jpeg' } })] })));
+};
+export default UploadInput;

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

@@ -0,0 +1,3 @@
+import UploadInput from './UploadInput';
+import DragAndDrop from './DragAndDrop';
+export { DragAndDrop, UploadInput };

package/build/components/FileInput/index.js

@@ -0,0 +1,3 @@
+import UploadInput from './UploadInput';
+import DragAndDrop from './DragAndDrop';
+export { DragAndDrop, UploadInput };

package/build/constants/api.d.ts

@@ -27,4 +27,5 @@ export declare const ENDPOINT_PATHS: {
     BRAND_LIST: string;
     OCCUPATION: string;
     INDIVIDUAL: string;
+    FILES_PATH: string;
 };

package/build/constants/api.js

@@ -26,6 +26,7 @@ var MONTHLY_INCOME_PATH = '/v2/monthlyIncome';
 var OCCUPATION_PATH = '/v2/occupation';
 var BRAND_LIST_PATH = '/brand/list';
 var FIREBASE_URL = 'https://goconnect-195cd-default-rtdb.asia-southeast1.firebasedatabase.app/locale.json';
+var FILES = '/files';
 export var ENDPOINT_PATHS = {
     SANDBOX_BASE_URL: SANDBOX_BASE_URL,
     PRODUCTION_BASE_URL: PRODUCTION_BASE_URL,
@@ -54,5 +55,6 @@ export var ENDPOINT_PATHS = {
     IBAN_BANK: IBAN_PATH,
     BRAND_LIST: BRAND_LIST_PATH,
     OCCUPATION: OCCUPATION_PATH,
-    INDIVIDUAL: INDIVIDUAL_PATH
+    INDIVIDUAL: INDIVIDUAL_PATH,
+    FILES_PATH: FILES
 };

package/build/constants/assets.d.ts

@@ -41,6 +41,7 @@ export declare const ICONS_NAMES: {
     MOBILE_ICON: string;
     SEARCH_ICON: string;
     SUCCESS_GIF: string;
+    DELETE_ICON: string;
     GMAIL_Filled_ICON: string;
     GMAIL_White_ICON: string;
     outlook_Filled_ICON: string;

package/build/constants/assets.js

@@ -41,6 +41,7 @@ export var ICONS_NAMES = {
     MOBILE_ICON: 'https://dash.b-cdn.net/icons/menu/mobile.svg',
     SEARCH_ICON: 'https://dash.b-cdn.net/icons/menu/search-icon.svg',
     SUCCESS_GIF: 'https://dash.b-cdn.net/icons/menu/success_icon.gif',
+    DELETE_ICON: 'https://dash.b-cdn.net/icons/menu/delete-icon.png',
     GMAIL_Filled_ICON: 'https://dash.b-cdn.net/icons/menu/Gmail-filled.svg',
     GMAIL_White_ICON: 'https://dash.b-cdn.net/icons/menu/Gmail-white.svg',
     outlook_Filled_ICON: 'https://dash.b-cdn.net/icons/menu/Outlook-filled.svg',

package/build/constants/validation.d.ts

@@ -5,6 +5,7 @@ export declare const MAX_IBAN_VALUE = 34;
 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 REGEX_FULL_NAME: RegExp;
 export declare const REGEX_WEBSITE: RegExp;
 export declare const REGEX_BENEFICIARY_NAME: RegExp;

package/build/constants/validation.js

@@ -5,6 +5,7 @@ export var MAX_IBAN_VALUE = 34;
 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 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,6 +20,7 @@ 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

@@ -169,7 +169,8 @@ export var createBankAccount = createAsyncThunk('createBankAccount', function (p
                     bank_account: {
                         iban: iban,
                         beneficiary_name: beneficiaryName,
-                        bank_name: bank_name
+                        bank_name: bank_name,
+                        bank_statement_file_id: params.bankStatementId
                     },
                     step_name: BANK_STEP_NAMES.BANK_INFO,
                     encryption_contract: ['bank_account.iban', 'bank_account.beneficiary_name', 'bank_account.bank_name']
@@ -185,6 +186,24 @@ export var createBankAccount = createAsyncThunk('createBankAccount', function (p
         }
     });
 }); });
+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 () {
@@ -252,7 +271,8 @@ var initialState = {
             iban: '',
             beneficiaryName: '',
             bankName: '',
-            confirmPolicy: false
+            confirmPolicy: false,
+            uploading: false
         }
     }
 };
@@ -404,6 +424,20 @@ 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/app/connect/connectStore.js

@@ -309,10 +309,10 @@ export var updateLeadIndividual = createAsyncThunk('updateLeadIndividual', funct
     });
 }); });
 export var updateLeadBrand = createAsyncThunk('updateLeadBrand', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, settings, connect, instagram, twitter, _b, mobileData, nidData, otpData, brandData, isAbsher, responseBody, isExistingUser, payload, data;
-    var _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    return __generator(this, function (_m) {
-        switch (_m.label) {
+    var _a, settings, connect, instagram, twitter, _b, mobileData, nidData, otpData, brandData, isAbsher, responseBody, isExistingUser, isOther, brand, payload, data;
+    var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    return __generator(this, function (_p) {
+        switch (_p.label) {
             case 0:
                 _a = thunkApi.getState(), settings = _a.settings, connect = _a.connect;
                 instagram = !!((_c = params.links) === null || _c === void 0 ? void 0 : _c.instagram) ? "".concat(INSTAGRAM_URL, "/").concat((_d = params.links) === null || _d === void 0 ? void 0 : _d.instagram) : '';
@@ -321,17 +321,19 @@ export var updateLeadBrand = createAsyncThunk('updateLeadBrand', function (param
                 isAbsher = otpData.isAbsher;
                 responseBody = (isAbsher ? nidData : mobileData).responseBody;
                 isExistingUser = (responseBody === null || responseBody === void 0 ? void 0 : responseBody.new_user) === false;
+                isOther = ((_g = params.selectedBrandItem) === null || _g === void 0 ? void 0 : _g.id) === 'other';
+                brand = __assign({ name: {
+                        en: params.brandName,
+                        ar: params.brandName,
+                        zh: params.brandName
+                    }, website: (_h = params.links) === null || _h === void 0 ? void 0 : _h.website, social: [twitter, instagram] }, (isExistingUser &&
+                    !isOther && {
+                    id: (_j = params.selectedBrandItem) === null || _j === void 0 ? void 0 : _j.id,
+                    name: undefined
+                }));
                 payload = {
-                    brand: {
-                        name: {
-                            en: params.brandName,
-                            ar: params.brandName,
-                            zh: params.brandName
-                        },
-                        website: (_g = params.links) === null || _g === void 0 ? void 0 : _g.website,
-                        social: [twitter, instagram]
-                    },
-                    id: (isExistingUser ? (_h = brandData.responseBody) === null || _h === void 0 ? void 0 : _h.lead_id : (_j = otpData.responseBody) === null || _j === void 0 ? void 0 : _j.lead_id) || '',
+                    brand: brand,
+                    id: (isExistingUser ? (_k = brandData.responseBody) === null || _k === void 0 ? void 0 : _k.lead_id : (_l = otpData.responseBody) === null || _l === void 0 ? void 0 : _l.lead_id) || '',
                     terms_conditions_accepted: params.termAndConditionChecked,
                     step_name: CONNECT_STEP_NAMES.UPDATE_LEAD_MERCHANT,
                     encryption_contract: [
@@ -345,10 +347,10 @@ export var updateLeadBrand = createAsyncThunk('updateLeadBrand', function (param
                 };
                 return [4, API.leadService.updateLead(payload)];
             case 1:
-                data = (_m.sent()).data;
+                data = (_p.sent()).data;
                 if (!data.errors) {
                     thunkApi.dispatch(handleNextScreenStep());
-                    (_l = (_k = settings.data.appConfig).onStepCompleted) === null || _l === void 0 ? void 0 : _l.call(_k, settings.data.activeScreen.name, params);
+                    (_o = (_m = settings.data.appConfig).onStepCompleted) === null || _o === void 0 ? void 0 : _o.call(_m, settings.data.activeScreen.name, params);
                 }
                 return [2, { response: data, formData: params }];
         }

package/build/features/app/password/passwordStore.d.ts

@@ -47,7 +47,10 @@ export declare const resetPassword: import("@reduxjs/toolkit").AsyncThunk<{
         otp: string;
     };
 }, OTPFormValues, {}>;
-export declare const retrieveLead: import("@reduxjs/toolkit").AsyncThunk<any, void, {}>;
+export declare const retrieveLeadPassword: import("@reduxjs/toolkit").AsyncThunk<{
+    lead: any;
+    entity: any;
+}, void, {}>;
 declare type VerifyData = {
     token: string;
     operationType?: string;

package/build/features/app/password/passwordStore.js

@@ -277,23 +277,26 @@ export var resetPassword = createAsyncThunk('resetPassword', function (params, t
         }
     });
 }); });
-export var retrieveLead = createAsyncThunk('retrieveLeadPassword', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, password, settings, id, data;
-    var _b, _c, _d, _e;
-    return __generator(this, function (_f) {
-        switch (_f.label) {
+export var retrieveLeadPassword = createAsyncThunk('retrieveLeadPassword', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, password, settings, id, data, entityData;
+    var _b, _c, _d, _e, _f;
+    return __generator(this, function (_g) {
+        switch (_g.label) {
             case 0:
                 _a = thunkApi.getState(), password = _a.password, settings = _a.settings;
                 id = (password.data.verify.responseBody || { id: '' }).id;
                 return [4, API.leadService.retrieveLead(id)];
             case 1:
-                data = (_f.sent()).data;
-                if (!(data === null || data === void 0 ? void 0 : data.errors)) {
+                data = (_g.sent()).data;
+                return [4, API.entityService.retrieveEntityInfo((_b = data === null || data === void 0 ? void 0 : data.entity) === null || _b === void 0 ? void 0 : _b.id)];
+            case 2:
+                entityData = (_g.sent()).data;
+                if (!(data === null || data === void 0 ? void 0 : data.errors) || !(entityData === null || entityData === void 0 ? void 0 : entityData.errors)) {
                     thunkApi.dispatch(handleNextScreenStep());
-                    (_c = (_b = settings.data.appConfig).onStepCompleted) === null || _c === void 0 ? void 0 : _c.call(_b, settings.data.activeScreen.name, { id: id });
-                    (_e = (_d = settings.data.appConfig).onFlowCompleted) === null || _e === void 0 ? void 0 : _e.call(_d, { data: data });
+                    (_d = (_c = settings.data.appConfig).onStepCompleted) === null || _d === void 0 ? void 0 : _d.call(_c, settings.data.activeScreen.name, { id: id });
+                    (_f = (_e = settings.data.appConfig).onFlowCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, { data: data });
                 }
-                return [2, data];
+                return [2, { lead: data, entity: entityData }];
         }
     });
 }); });
@@ -516,23 +519,23 @@ export var passwordSlice = createSlice({
             state.error = action.error.message;
             state.loading = false;
         })
-            .addCase(retrieveLead.fulfilled, function (state, action) {
-            var _a;
+            .addCase(retrieveLeadPassword.fulfilled, function (state, action) {
+            var _a, _b;
             state.loading = false;
             state.error = null;
-            var data = action.payload;
-            var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
+            var _c = action.payload, lead = _c.lead, entity = _c.entity;
+            var description = (((_a = lead === null || lead === void 0 ? void 0 : lead.errors) === null || _a === void 0 ? void 0 : _a[0]) || ((_b = entity === null || entity === void 0 ? void 0 : entity.errors) === null || _b === void 0 ? void 0 : _b[0]) || {}).description;
             if (description) {
                 state.error = description;
                 return;
             }
-            state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), data);
+            state.data.verify.responseBody = __assign(__assign(__assign({}, state.data.verify.responseBody), lead), entity);
         })
-            .addCase(retrieveLead.pending, function (state) {
+            .addCase(retrieveLeadPassword.pending, function (state) {
             state.loading = true;
             state.error = null;
         })
-            .addCase(retrieveLead.rejected, function (state, action) {
+            .addCase(retrieveLeadPassword.rejected, function (state, action) {
             state.loading = false;
             state.error = action.error.message;
         });

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

@@ -27,6 +27,7 @@ import { bankSelector, createBankAccount } from '../../../app/bank/bankStore';
 import Form from '../../../../components/Form';
 import { handleCurrentActiveScreen } from '../../../../app/settings';
 import ConfirmPolicy from './ConfirmPolicy';
+import BankStatement from './BankStatement';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column',
@@ -56,6 +57,6 @@ var BankDetails = function () {
         dispatch(handleCurrentActiveScreen('BANK_SUCCESS_FOUR_FLOWS_BUTTONS_STEP'));
     };
     var disabled = ibanChecking || !methods.formState.isValid;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Beneficiary, {}), _jsx(IBAN, { fetchingIban: function (value) { return setIbanChecking(value); }, ibanChecking: ibanChecking }), _jsx(BankName, {}), _jsx(ConfirmPolicy, {}), _jsx(ButtonStyled, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Beneficiary, {}), _jsx(IBAN, { fetchingIban: function (value) { return setIbanChecking(value); }, ibanChecking: ibanChecking }), _jsx(BankName, {}), _jsx(BankStatement, {}), _jsx(ConfirmPolicy, {}), _jsx(ButtonStyled, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
 };
 export default BankDetails;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const BankStatement: () => JSX.Element;
+export default BankStatement;

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

@@ -0,0 +1,38 @@
+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 ({
+        marginBlockStart: theme.spacing(3)
+    });
+});
+var BankStatement = function () {
+    var _a, _b;
+    var dispatch = useAppDispatch();
+    var data = useAppSelector(bankSelector).data;
+    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 handleBankStatementChange = function (file) {
+        dispatch(uploadBankStatement(file));
+    };
+    var handleReset = function () {
+        bankStatementControl.field.onChange('');
+    };
+    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) }) }));
+};
+export default BankStatement;

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

@@ -3,15 +3,18 @@ export declare const BankValidation: yup.ObjectSchema<import("yup/lib/object").A
     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>;
     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>;
     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>;
     confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>>>;

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

@@ -12,5 +12,6 @@ export var BankValidation = yup.object().shape({
         .string()
         .matches(REGEX_BENEFICIARY_NAME, 'beneficiary_name_invalid')
         .required('beneficiary_name_required'),
+    bankStatementId: yup.string().optional(),
     confirmPolicy: yup.boolean().required('alert_bank_confirm').isTrue('alert_bank_confirm')
 });

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

@@ -26,6 +26,7 @@ import Collapse from '../../../../components/Collapse';
 import OperationStartDate from './OperationStartDate';
 import { businessSelector, clearError, updateActivitiesInfo } from '../../../app/business/businessStore';
 import { ActivitiesValidationSchema } from './validation';
+import LicenseName from './LicenseName';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -72,6 +73,6 @@ var Activities = function () {
         anchorEl ? setAnchorEl(false) : setAnchorEl(true);
     };
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(ActivitiesList, { onListOpen: function () { return handleMenuClick(); }, onListClose: function () { return handleMenuClick(); } }), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(SalesChannels, {}) }))] })), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(OperationStartDate, { onDateClicked: handleCollapseOpenClose }) })), _jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(LicenseName, {}) })), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(ActivitiesList, { onListOpen: function () { return handleMenuClick(); }, onListClose: function () { return handleMenuClick(); } }), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(SalesChannels, {}) }))] })), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(OperationStartDate, { onDateClicked: handleCollapseOpenClose }) })), _jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default Activities;

package/build/features/business/screens/Activities/LicenseName.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface LicenseNameProps {
+}
+declare const _default: React.MemoExoticComponent<({}: LicenseNameProps) => JSX.Element>;
+export default _default;

package/build/features/business/screens/Activities/LicenseName.js

@@ -0,0 +1,30 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ScreenContainer } from '../../../shared/Containers';
+import Input from '../../../shared/Input';
+import Collapse from '../../../../components/Collapse';
+import { useAppSelector, useLanguage } from '../../../../hooks';
+import { businessSelector } from '../../../app/business/businessStore';
+import CheckIcon from '../../../shared/CheckIcon';
+var LicenseName = function (_a) {
+    var _b, _c, _d;
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var data = useAppSelector(businessSelector).data;
+    var entity = (((_b = data.verify) === null || _b === void 0 ? void 0 : _b.responseBody) || {}).entity;
+    var name = isAr ? (_c = entity === null || entity === void 0 ? void 0 : entity.legal_name) === null || _c === void 0 ? void 0 : _c.ar : (_d = entity === null || entity === void 0 ? void 0 : entity.legal_name) === null || _d === void 0 ? void 0 : _d.en;
+    return (_jsx(Collapse, __assign({ in: !!name }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('license_name_label'), readOnly: true, value: name, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, endAdornment: _jsx(CheckIcon, {}) }) }) })));
+};
+export default React.memo(LicenseName);

package/build/features/connect/screens/Merchant/BrandList.js

@@ -51,10 +51,8 @@ var BrandList = function (_a) {
     var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var _c = useFormContext(), setValue = _c.setValue, control = _c.control;
-    var linksControl = useController({ control: control, name: 'links' });
+    var control = useFormContext().control;
     var selectedBrandControl = useController({ control: control, name: 'selectedBrandItem' });
-    var links = linksControl.field.value;
     var selectedBrand = selectedBrandControl.field.value;
     var onOpenBrandList = function (event) {
         var _a;
@@ -79,8 +77,6 @@ var BrandList = function (_a) {
     var onSelectItem = function (brand) {
         selectedBrandControl.field.onChange(brand);
         onCloseBrandList();
-        var website = brand.website;
-        setValue('links', __assign(__assign({}, links), { website: website }), { shouldValidate: true });
     };
     return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('select_brand_label'), readOnly: true, onClick: !!anchorEl ? onCloseBrandList : onOpenBrandList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_brand'), value: t(getBrandName(selectedBrand)) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'id', list: list, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsx(BrandContainer, { children: _jsx(BrandNameText, __assign({ isSelected: getBrandId(item) === getBrandId(selectedBrand) }, { children: isOtherLicense(item) ? t(getBrandName(item)) : getBrandName(item) })) }), getBrandId(item) === getBrandId(selectedBrand) && _jsx(CheckIcon, {})] }));

package/build/features/connect/screens/Merchant/Merchant.js

@@ -18,6 +18,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { handlePrevScreenStep } from '../../../../app/settings';
 import Form from '../../../../components/Form';
+import { INSTAGRAM_URL, TWITTER_URL } from '../../../../constants';
 import { ScreenContainer } from '../../../shared/Containers';
 import Button from '../../../shared/Button';
 import { clearError, connectSelector, updateLeadBrand } from '../../../app/connect/connectStore';
@@ -50,6 +51,7 @@ var Merchant = function (_a) {
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
+    var formDataSelectedBrand = methods.getValues('selectedBrandItem');
     var onSubmit = function (formData) {
         dispatch(updateLeadBrand(formData));
     };
@@ -69,11 +71,11 @@ var Merchant = function (_a) {
             methods.setError('brandName', { message: 'Profile Name already exists' });
     }, [responseBody]);
     React.useEffect(function () {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (isNewUser === true) {
             setUserType(ValidationOptions.NEW_USER);
         }
-        if (isNewUser === false && (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0 && methods.getValues('selectedBrandItem').id === 'other') {
+        if (isNewUser === false && (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0 && (formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.id) === 'other') {
             setUserType(ValidationOptions.EXISTING_USER_WITH_OTHER_BRAND);
             methods.clearErrors();
             setTimeout(function () {
@@ -82,17 +84,17 @@ var Merchant = function (_a) {
                 methods.setValue('links', sites);
             }, 100);
         }
-        if (isNewUser === false && (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0 && methods.getValues('selectedBrandItem').id !== 'other') {
+        if (isNewUser === false && (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0 && (formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.id) !== 'other') {
             setUserType(ValidationOptions.EXISTING_USER_WITH_EXIST_BRAND);
             methods.clearErrors();
-            var twitter = ((_a = selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.social) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.includes('twitter.com'); })) || '';
-            var instagram = ((_b = selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.social) === null || _b === void 0 ? void 0 : _b.find(function (item) { return item.includes('instagram.com'); })) || '';
-            var sites_1 = __assign(__assign({}, links), { website: selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.website, twitter: twitter, instagram: instagram });
+            var twitter = ((_b = (_a = formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.social) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.includes('twitter.com'); })) === null || _b === void 0 ? void 0 : _b.replaceAll("".concat(TWITTER_URL, "/"), '')) || '';
+            var instagram = ((_d = (_c = formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.social) === null || _c === void 0 ? void 0 : _c.find(function (item) { return item.includes('instagram.com'); })) === null || _d === void 0 ? void 0 : _d.replaceAll("".concat(INSTAGRAM_URL, "/"), '')) || '';
+            var sites_1 = __assign(__assign({}, links), { website: formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.website, twitter: twitter, instagram: instagram });
             setTimeout(function () { return methods.setValue('links', sites_1, { shouldValidate: true }); }, 100);
         }
-    }, [methods.getValues('selectedBrandItem'), isNewUser]);
+    }, [formDataSelectedBrand, isNewUser]);
     React.useEffect(function () {
-        if (selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.id)
+        if (!(formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.id) && (selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.id))
             methods.setValue('selectedBrandItem', selectedBrandItem, { shouldValidate: true });
     }, [selectedBrandItem]);
     var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;

package/build/features/password/screens/Success/Success.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { updateLeadSuccess, passwordSelector, retrieveLead } from '../../../app/password/passwordStore';
+import { updateLeadSuccess, passwordSelector, retrieveLeadPassword } from '../../../app/password/passwordStore';
 import SuccessScreen from '../../../shared/SuccessScreen';
 import { PASSWORD_OPERATION_TYPE } from '../../../../constants';
 var Success = function (_a) {
@@ -12,7 +12,7 @@ var Success = function (_a) {
     var operationType = data.verify.operationType;
     var onSuccess = function () {
         if (operationType === PASSWORD_OPERATION_TYPE.RESET_PASSWORD) {
-            dispatch(retrieveLead());
+            dispatch(retrieveLeadPassword());
             return;
         }
         dispatch(updateLeadSuccess());

package/build/features/shared/Button/Button.js

@@ -37,7 +37,7 @@ var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop
         width: theme.spacing(3),
         height: theme.spacing(3),
         transform: isAr ? 'scaleX(-1)' : 'scaleX(1)',
-        marginInlineEnd: theme.spacing(0.5)
+        marginInlineEnd: theme.spacing(-0.375)
     });
 });
 var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare const InputContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: React.ReactNode;
+    component?: React.ElementType<any> | undefined;
+    ref?: React.Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "ref" | "children" | "component" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+interface UploadFileProps {
+    label: string;
+    required?: boolean;
+    dragTitle: string;
+    uploadTitle: string;
+    error?: string;
+    loading?: boolean;
+    onFileUploaded: (file: File) => void;
+    onReset: () => void;
+}
+declare const UploadFile: ({ label, required, dragTitle, uploadTitle, loading, error, onFileUploaded, onReset }: UploadFileProps) => JSX.Element;
+export default UploadFile;

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

@@ -0,0 +1,77 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { ScreenContainer } from '../../shared/Containers';
+import Box from '@mui/material/Box';
+import { InputLabelStyled } from '../../shared/Input/Input';
+import Mandatory from '../../shared/Mandatory';
+import { DragAndDrop, UploadInput } from '../../../components/FileInput';
+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 ({
+        marginBlockStart: theme.spacing(0)
+    });
+});
+var LabelContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'flex-start',
+        padding: theme.spacing(0, 2.5, 1.25, 2.5)
+    });
+});
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ direction: theme.direction }, theme.typography.subtitle2), { color: theme.palette.primary.main, fontWeight: theme.typography.fontWeightBold, background: theme.palette.background.default, padding: theme.spacing(1.5, 2.5, 1.5), width: '85%' }));
+});
+var UploadBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, theme.typography.caption), { background: theme.palette.primary.main, color: theme.palette.common.white, fontWeight: theme.typography.fontWeightRegular, padding: theme.spacing(0.75, 1.75, 0), cursor: 'pointer', width: '15%', display: 'flex', justifyContent: 'center' }));
+});
+var IconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginBlockStart: theme.spacing(0),
+        width: theme.spacing(3.5),
+        height: theme.spacing(3.5)
+    });
+});
+export var InputContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        width: '100%'
+    });
+});
+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 _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();
+    };
+    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 })) }))] }));
+};
+export default UploadFile;

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

@@ -0,0 +1,2 @@
+import UploadFile from './UploadFile';
+export default UploadFile;

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

@@ -0,0 +1,2 @@
+import UploadFile from './UploadFile';
+export default UploadFile;

package/package.json

@@ -1,127 +1,128 @@
-{
-	"name": "@tap-payments/auth-jsconnect",
-	"version": "1.0.100-test",
-	"description": "connect library, auth",
-	"private": false,
-	"main": "build/index.js",
-	"module": "build/index.js",
-	"types": "build/index.d.ts",
-	"files": [
-		"build",
-		"README.md"
-	],
-	"scripts": {
-		"husky:setup": "npx husky install",
-		"prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\" *.json *.js",
-		"prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"  *.json *.js",
-		"lint": "eslint src --color --ext .js,.jsx,.ts,.tsx,.json",
-		"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
-		"start": "cross-env NODE_ENV=development webpack serve",
-		"build": "rm -rf build && cross-env NODE_ENV=production webpack",
-		"copy:files": "copyfiles -u 1 src/**/*.css build/",
-		"tsc:alias": "tsc-alias -p tsconfig.json",
-		"ts:build": "rm -rf build && tsc -p tsconfig.json && tsc-alias -p tsconfig.json && yarn copy:files",
-		"push": "npm publish --access public"
-	},
-	"keywords": [],
-	"author": {
-		"name": "Ahmed Elsharkawy",
-		"email": "a.elsharkawy@tap.company"
-	},
-	"license": "ISC",
-	"devDependencies": {
-		"@babel/core": "^7.18.6",
-		"@babel/preset-env": "^7.18.6",
-		"@babel/preset-react": "^7.18.6",
-		"@babel/preset-typescript": "^7.18.6",
-		"@types/lodash-es": "^4.17.6",
-		"@types/moment-hijri": "^2.1.0",
-		"@types/react": "^18.0.15",
-		"@types/react-calendar": "~3.5.1",
-		"@types/react-dom": "^18.0.6",
-		"@typescript-eslint/eslint-plugin": "^5.30.5",
-		"@typescript-eslint/parser": "^5.30.5",
-		"babel-loader": "^8.2.5",
-		"copyfiles": "^2.4.1",
-		"cross-env": "^7.0.3",
-		"css-loader": "^6.7.1",
-		"css-minimizer-webpack-plugin": "^4.0.0",
-		"eslint": "^8.19.0",
-		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-jsx-a11y": "^6.6.0",
-		"eslint-plugin-node": "^11.1.0",
-		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "^7.30.1",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"file-loader": "^6.2.0",
-		"fork-ts-checker-webpack-plugin": "^7.2.12",
-		"html-loader": "^3.1.2",
-		"html-webpack-plugin": "^5.5.0",
-		"husky": "^8.0.1",
-		"lint-staged": "^13.0.3",
-		"mini-css-extract-plugin": "^2.6.1",
-		"prettier": "^2.7.1",
-		"sass": "^1.53.0",
-		"sass-loader": "^13.0.2",
-		"style-loader": "^3.3.1",
-		"terser-webpack-plugin": "^5.3.3",
-		"tsc-alias": "^1.6.11",
-		"typescript": "^4.7.4",
-		"webpack": "^5.73.0",
-		"webpack-cli": "^4.10.0",
-		"webpack-dev-server": "^4.9.3",
-		"webpack-merge": "^5.8.0"
-	},
-	"dependencies": {
-		"@emotion/react": "^11.9.3",
-		"@emotion/styled": "^11.9.3",
-		"@fingerprintjs/fingerprintjs": "~3.3.4",
-		"@hookform/resolvers": "^2.9.6",
-		"@mui/icons-material": "^5.8.4",
-		"@mui/material": "^5.8.7",
-		"@reduxjs/toolkit": "^1.8.3",
-		"axios": "^0.27.2",
-		"device-detector-js": "^3.0.3",
-		"i18next": "^21.8.14",
-		"i18next-browser-languagedetector": "^6.1.4",
-		"i18next-http-backend": "^1.4.1",
-		"jsencrypt": "^3.2.1",
-		"lodash-es": "^4.17.21",
-		"moment-hijri": "~2.1.2",
-		"react": "^18.2.0",
-		"react-calendar": "~3.7.0",
-		"react-device-detect": "^2.2.2",
-		"react-dom": "^18.2.0",
-		"react-hook-form": "^7.33.1",
-		"react-i18next": "^11.18.1",
-		"react-otp-input": "^2.4.0",
-		"react-redux": "^8.0.2",
-		"react-spring-bottom-sheet": "^3.4.1",
-		"yup": "^0.32.11"
-	},
-	"peerDependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"lint-staged": {
-		"src/**/*.{ts,tsx,json,js,jsx}": [
-			"yarn run prettier:fix",
-			"yarn run lint",
-			"git add ."
-		]
-	},
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	}
-}
+{
+	"name": "@tap-payments/auth-jsconnect",
+	"version": "1.1.2-test",
+	"description": "connect library, auth",
+	"private": false,
+	"main": "build/index.js",
+	"module": "build/index.js",
+	"types": "build/index.d.ts",
+	"files": [
+		"build",
+		"README.md"
+	],
+	"scripts": {
+		"husky:setup": "npx husky install",
+		"prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\" *.json *.js",
+		"prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"  *.json *.js",
+		"lint": "eslint src --color --ext .js,.jsx,.ts,.tsx,.json",
+		"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+		"start": "cross-env NODE_ENV=development webpack serve",
+		"build": "rm -rf build && cross-env NODE_ENV=production webpack",
+		"copy:files": "copyfiles -u 1 src/**/*.css build/",
+		"tsc:alias": "tsc-alias -p tsconfig.json",
+		"ts:build": "rm -rf build && tsc -p tsconfig.json && tsc-alias -p tsconfig.json && yarn copy:files",
+		"push": "npm publish --access public"
+	},
+	"keywords": [],
+	"author": {
+		"name": "Ahmed Elsharkawy",
+		"email": "a.elsharkawy@tap.company"
+	},
+	"license": "ISC",
+	"devDependencies": {
+		"@babel/core": "^7.18.6",
+		"@babel/preset-env": "^7.18.6",
+		"@babel/preset-react": "^7.18.6",
+		"@babel/preset-typescript": "^7.18.6",
+		"@types/lodash-es": "^4.17.6",
+		"@types/moment-hijri": "^2.1.0",
+		"@types/react": "^18.0.15",
+		"@types/react-calendar": "~3.5.1",
+		"@types/react-dom": "^18.0.6",
+		"@typescript-eslint/eslint-plugin": "^5.30.5",
+		"@typescript-eslint/parser": "^5.30.5",
+		"babel-loader": "^8.2.5",
+		"copyfiles": "^2.4.1",
+		"cross-env": "^7.0.3",
+		"css-loader": "^6.7.1",
+		"css-minimizer-webpack-plugin": "^4.0.0",
+		"eslint": "^8.19.0",
+		"eslint-config-airbnb": "^19.0.4",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jsx-a11y": "^6.6.0",
+		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-react": "^7.30.1",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"file-loader": "^6.2.0",
+		"fork-ts-checker-webpack-plugin": "^7.2.12",
+		"html-loader": "^3.1.2",
+		"html-webpack-plugin": "^5.5.0",
+		"husky": "^8.0.1",
+		"lint-staged": "^13.0.3",
+		"mini-css-extract-plugin": "^2.6.1",
+		"prettier": "^2.7.1",
+		"sass": "^1.53.0",
+		"sass-loader": "^13.0.2",
+		"style-loader": "^3.3.1",
+		"terser-webpack-plugin": "^5.3.3",
+		"tsc-alias": "^1.6.11",
+		"typescript": "^4.7.4",
+		"webpack": "^5.73.0",
+		"webpack-cli": "^4.10.0",
+		"webpack-dev-server": "^4.9.3",
+		"webpack-merge": "^5.8.0"
+	},
+	"dependencies": {
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@fingerprintjs/fingerprintjs": "~3.3.4",
+		"@hookform/resolvers": "^2.9.6",
+		"@mui/icons-material": "^5.8.4",
+		"@mui/material": "^5.8.7",
+		"@reduxjs/toolkit": "^1.8.3",
+		"axios": "^0.27.2",
+		"device-detector-js": "^3.0.3",
+		"i18next": "^21.8.14",
+		"i18next-browser-languagedetector": "^6.1.4",
+		"i18next-http-backend": "^1.4.1",
+		"jsencrypt": "^3.2.1",
+		"lodash-es": "^4.17.21",
+		"moment-hijri": "~2.1.2",
+		"react": "^18.2.0",
+		"react-calendar": "~3.7.0",
+		"react-device-detect": "^2.2.2",
+		"react-dom": "^18.2.0",
+		"react-dropzone": "^14.2.2",
+		"react-hook-form": "^7.33.1",
+		"react-i18next": "^11.18.1",
+		"react-otp-input": "^2.4.0",
+		"react-redux": "^8.0.2",
+		"react-spring-bottom-sheet": "^3.4.1",
+		"yup": "^0.32.11"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"lint-staged": {
+		"src/**/*.{ts,tsx,json,js,jsx}": [
+			"yarn run prettier:fix",
+			"yarn run lint",
+			"git add ."
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
+}