@tap-payments/auth-jsconnect 1.0.57 → 1.0.59

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

@@ -54,10 +54,10 @@ export declare type TaxFormValues = {
     vatId: string;
 };
 export declare type IndividualExtraFormValues = {
-    sourceIncome: SourceOfIncome;
+    sourceIncome: SourceOfIncome | undefined;
     monthlyIncome: string;
     employerName: string;
-    employerLocation: CountryCode;
+    employerLocation: CountryCode | undefined;
     isPEP: boolean | null;
     isInfluencer: boolean | null;
 };

package/build/api/entity.d.ts

@@ -10,14 +10,34 @@ export declare type EntityInfoCreateBody = {
     vat_id?: string;
     agree_chargeback?: boolean;
     agree_refund?: boolean;
+    employer_name?: string;
+    employer_city?: string | null;
+    source_income?: Array<string | undefined>;
+    actual_income?: string;
+    is_relative_PEP?: boolean | null;
+    is_influencer?: boolean | null;
     step_name: string;
     encryption_contract?: Array<string>;
 };
+export declare type EntityBankUpdateBody = {
+    wallet_id?: string;
+    entity_id: string;
+    bank_account: {
+        bank_name: string;
+        beneficiary_name: string;
+        bank_statement_file_id?: string;
+        iban: string;
+        swift_code?: string;
+        account_number?: string;
+    };
+    step_name: string;
+};
 export interface EntityInfoUpdateBody extends EntityInfoCreateBody {
     id: string;
 }
 declare const entityService: {
     createEntityInfo: (data: EntityInfoCreateBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
     updateEntityInfo: (data: EntityInfoUpdateBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
+    createBankAccount: (data: EntityBankUpdateBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
 };
 export { entityService };

package/build/api/entity.js

@@ -6,8 +6,12 @@ var createEntityInfo = function (data, config) {
 var updateEntityInfo = function (data, config) {
     return instance.put("".concat(ENDPOINT_PATHS.ENTITY), data, config);
 };
+var createBankAccount = function (data, config) {
+    return instance.post("".concat(ENDPOINT_PATHS.BANK), data, config);
+};
 var entityService = {
     createEntityInfo: createEntityInfo,
-    updateEntityInfo: updateEntityInfo
+    updateEntityInfo: updateEntityInfo,
+    createBankAccount: createBankAccount
 };
 export { entityService };

package/build/api/index.d.ts

@@ -3,7 +3,7 @@ import { ValidateOperatorBody } from './operator';
 import { CreateAuthBody, VerifyAuthBody } from './auth';
 import { UpdateLeadBody, LeadVerifyBody, CreateLeadBody, LeadOTPVerifyBody, LeadIdentityUpdateBody } from './lead';
 import { CheckEmailBody, CheckBrandBody } from './availabilityServices';
-import { EntityInfoUpdateBody, EntityInfoCreateBody } from './entity';
+import { EntityInfoUpdateBody, EntityInfoCreateBody, EntityBankUpdateBody } from './entity';
 import { CreateAccountBody } from './account';
 declare const API: {
     ipService: {
@@ -32,6 +32,7 @@ declare const API: {
     entityService: {
         createEntityInfo: (data: EntityInfoCreateBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, any>>;
         updateEntityInfo: (data: EntityInfoUpdateBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, any>>;
+        createBankAccount: (data: EntityBankUpdateBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, any>>;
     };
     availabilityServices: {
         checkEmail: (data: CheckEmailBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, any>>;
@@ -50,6 +51,6 @@ declare const API: {
         getExpectedCustomerSales: () => Promise<import("axios").AxiosResponse<any, any>>;
     };
 };
-export type { ValidateOperatorBody, CreateAuthBody, VerifyAuthBody, CreateLeadBody, UpdateLeadBody, LeadVerifyBody, LeadOTPVerifyBody, CheckEmailBody, CheckBrandBody, LeadIdentityUpdateBody, EntityInfoCreateBody, EntityInfoUpdateBody, CreateAccountBody };
+export type { ValidateOperatorBody, CreateAuthBody, VerifyAuthBody, CreateLeadBody, UpdateLeadBody, LeadVerifyBody, LeadOTPVerifyBody, CheckEmailBody, CheckBrandBody, LeadIdentityUpdateBody, EntityInfoCreateBody, EntityInfoUpdateBody, CreateAccountBody, EntityBankUpdateBody };
 export { setAxiosGlobalHeaders, removeAxiosGlobalHeaders };
 export default API;

package/build/app/settings.js

@@ -154,7 +154,7 @@ export var settingsSlice = createSlice({
         },
         handleActiveFlowScreens: function (state, action) {
             state.data.featureScreensNavigation = action.payload;
-            state.data.activeScreen = action.payload[0];
+            state.data.activeScreen = action.payload[5];
         },
         handleSetAppConfig: function (state, action) {
             var _a = action.payload, appInfo = _a.appInfo, businessCountryCode = _a.businessCountryCode, language = _a.language, onError = _a.onError, onFlowCompleted = _a.onFlowCompleted, publicKey = _a.publicKey;

package/build/assets/locales/ar.json

@@ -215,6 +215,9 @@
     "select_brand_label": "Brand List",
     "choose_brand": "Choose Brand",
     "confirm_enter_iban": "الايبان",
+    "open_gmail": "Gmail",
+    "open_outlook": "Outlook",
+    "open_apple": "Apple",
     "choose_any_license": "Choose Licene",
     "future_work": "Future Work",
     "add_other_fl": "Add Freelance",

package/build/assets/locales/en.json

@@ -229,6 +229,9 @@
     "select_brand_label": "Brand List",
     "choose_brand": "Choose Brand",
     "confirm_enter_iban": "IBAN",
+    "open_gmail": "Gmail",
+    "open_outlook": "Outlook",
+    "open_apple": "Apple",
     "choose_any_license": "Choose Licene",
     "future_work": "Future Work",
     "add_other_fl": "Add Freelance",

package/build/constants/api.d.ts

@@ -18,4 +18,5 @@ export declare const ENDPOINT_PATHS: {
     CUSTOMER_BASES: string;
     SALES: string;
     EXPECTED_CUSTOMERS: string;
+    BANK: string;
 };

package/build/constants/api.js

@@ -9,6 +9,7 @@ var LEAD_IDENTITY_PATH = '/lead/identity';
 var LEAD_IDENTITY_VERIFY_PATH = 'lead/identity/verify';
 var RETRIEVE_ENTITY_LIST_PATH = '/lead/entity/list';
 var ENTITY_PATH = '/entity';
+var BANK_PATH = '/entity/bankaccount';
 var CHECK_EMAIL = '/lead/identity/emailcheck';
 var CHECK_BRAND = 'lead/profile/profile_name';
 var CREATE_ACCOUNT_PATH = '/account/create';
@@ -36,5 +37,6 @@ export var ENDPOINT_PATHS = {
     CHANNEL: CHANNEL_PATH,
     CUSTOMER_BASES: CUSTOMER_BASES_PATH,
     SALES: SALES_PATH,
-    EXPECTED_CUSTOMERS: EXPECTED_CUSTOMERS_PATH
+    EXPECTED_CUSTOMERS: EXPECTED_CUSTOMERS_PATH,
+    BANK: BANK_PATH
 };

package/build/constants/app.js

@@ -103,27 +103,21 @@ export var BUSINESS_SCREENS_NAVIGATION = [
 export var INDIVIDUAL_SCREENS_NAVIGATION = [
     {
         name: 'INDIVIDUAL_VERIFY_STEP',
-        next: 'INDIVIDUAL_SHOW_INDIVIDUAL_INFO_STEP',
+        next: ['INDIVIDUAL_ADDITIONAL_INDIVIDUAL_INFO_STEP', 'INDIVIDUAL_SUCCESS_STEP'],
         prev: '',
         order: 1
     },
-    {
-        name: 'INDIVIDUAL_SHOW_INDIVIDUAL_INFO_STEP',
-        next: 'INDIVIDUAL_ADDITIONAL_INDIVIDUAL_INFO_STEP',
-        prev: 'INDIVIDUAL_VERIFY_STEP',
-        order: 2
-    },
     {
         name: 'INDIVIDUAL_ADDITIONAL_INDIVIDUAL_INFO_STEP',
         next: 'INDIVIDUAL_SUCCESS_STEP',
-        prev: 'INDIVIDUAL_SHOW_INDIVIDUAL_INFO_STEP',
-        order: 3
+        prev: 'INDIVIDUAL_VERIFY_STEP',
+        order: 2
     },
     {
         name: 'INDIVIDUAL_SUCCESS_STEP',
         next: '',
         prev: 'INDIVIDUAL_ADDITIONAL_INDIVIDUAL_INFO_STEP',
-        order: 4
+        order: 3
     }
 ];
 export var PASSWORD_SCREENS_NAVIGATION = [
@@ -149,7 +143,7 @@ export var PASSWORD_SCREENS_NAVIGATION = [
 export var BANK_SCREENS_NAVIGATION = [
     {
         name: 'BANK_VERIFY_STEP',
-        next: 'BANK_BANK_DETAILS_STEP',
+        next: ['BANK_BANK_DETAILS_STEP', 'BANK_DETAILS_SUCCESS_STEP'],
         prev: '',
         order: 1
     },

package/build/constants/assets.d.ts

@@ -34,4 +34,7 @@ export declare const ICONS_NAMES: {
     ABSHER_LOGO: string;
     EMAIL_ICON: string;
     MOBILE_ICON: string;
+    GMAIL_ICON: string;
+    OUTLOOK_ICON: string;
+    APPLE_MAIL_ICON: string;
 };

package/build/constants/assets.js

@@ -33,5 +33,8 @@ export var ICONS_NAMES = {
     SUCCESS: 'https://tap-connecet.b-cdn.net/imgs/success.svg',
     ABSHER_LOGO: 'https://dash.b-cdn.net/icons/menu/Absher.svg',
     EMAIL_ICON: 'https://dash.b-cdn.net/icons/menu/email.png',
-    MOBILE_ICON: 'https://dash.b-cdn.net/icons/menu/mobile.svg'
+    MOBILE_ICON: 'https://dash.b-cdn.net/icons/menu/mobile.svg',
+    GMAIL_ICON: 'https://dash.b-cdn.net/icons/menu/gmail-icon.svg',
+    OUTLOOK_ICON: 'https://dash.b-cdn.net/icons/menu/outlook-mail.svg',
+    APPLE_MAIL_ICON: 'https://dash.b-cdn.net/icons/menu/mail-ios.svg'
 };

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

@@ -7,10 +7,12 @@ export declare const verifyLeadToken: import("@reduxjs/toolkit").AsyncThunk<{
 }, string, {}>;
 export declare const verifyBankLeadOTP: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
-    formData: {
-        otp: string;
-    };
+    formData: OTPFormValues;
 }, OTPFormValues, {}>;
+export declare const createBankAccount: import("@reduxjs/toolkit").AsyncThunk<{
+    data: any;
+    formData: BankFormValues;
+}, BankFormValues, {}>;
 export declare const updateLeadSuccess: import("@reduxjs/toolkit").AsyncThunk<{
     response: any;
     formData: void;

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

@@ -77,10 +77,10 @@ export var verifyLeadToken = createAsyncThunk('verifyLeadToken', function (token
     });
 }); });
 export var verifyBankLeadOTP = createAsyncThunk('verifyBankLeadOTP', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, bank, settings, responseBody, payload, data;
-    var _b, _c, _d;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
+    var _a, bank, settings, responseBody, payload, data, steps, hasBankCompleted;
+    var _b, _c, _d, _e;
+    return __generator(this, function (_f) {
+        switch (_f.label) {
             case 0:
                 _a = thunkApi.getState(), bank = _a.bank, settings = _a.settings;
                 responseBody = bank.data.verify.responseBody;
@@ -93,33 +93,73 @@ export var verifyBankLeadOTP = createAsyncThunk('verifyBankLeadOTP', function (p
                 };
                 return [4, API.leadService.verifyLeadOTP(payload)];
             case 1:
-                data = (_e.sent()).data;
+                data = (_f.sent()).data;
                 if (!data.errors) {
                     (_d = (_c = settings.data.appConfig).onStepCompleted) === null || _d === void 0 ? void 0 : _d.call(_c, settings.data.activeScreen.name, { otp: params.otp });
+                    steps = (_e = bank.data.verify.responseBody) === null || _e === void 0 ? void 0 : _e.steps;
+                    hasBankCompleted = Object.keys(steps).find(function (key) { return key === BANK_STEP_NAMES.BANK_SUCCESS; });
+                    if (hasBankCompleted) {
+                        thunkApi.dispatch(handleNextScreenStep('BANK_DETAILS_SUCCESS_STEP'));
+                    }
+                    else {
+                        thunkApi.dispatch(handleNextScreenStep('BANK_BANK_DETAILS_STEP'));
+                    }
+                }
+                return [2, { data: data, formData: params }];
+        }
+    });
+}); });
+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) {
+            case 0:
+                _a = thunkApi.getState(), settings = _a.settings, bank = _a.bank;
+                iban = params.iban;
+                beneficiaryName = params.beneficiaryName;
+                bank_name = params.bankName;
+                requestBody = {
+                    entity_id: (_c = (_b = bank.data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.entity) === null || _c === void 0 ? void 0 : _c.id,
+                    bank_account: {
+                        iban: iban,
+                        beneficiary_name: beneficiaryName,
+                        bank_name: bank_name
+                    },
+                    step_name: BANK_STEP_NAMES.BANK_INFO
+                };
+                return [4, API.entityService.createBankAccount(requestBody)];
+            case 1:
+                data = (_f.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);
                 }
-                return [2, { data: data, formData: __assign({}, params) }];
+                return [2, { data: data, formData: params }];
         }
     });
 }); });
 export var updateLeadSuccess = createAsyncThunk('updateLeadSuccess', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, settings, bank, payload, data;
-    var _b, _c, _d, _e, _f;
-    return __generator(this, function (_g) {
-        switch (_g.label) {
+    var _a, settings, bank, response, payload;
+    var _b, _c, _d, _e, _f, _g;
+    return __generator(this, function (_h) {
+        switch (_h.label) {
             case 0:
                 _a = thunkApi.getState(), settings = _a.settings, bank = _a.bank;
+                response = undefined;
+                if (!!!((_b = bank.data.otpData.responseBody) === null || _b === void 0 ? void 0 : _b.id)) return [3, 2];
                 payload = {
                     step_name: BANK_STEP_NAMES.BANK_SUCCESS,
-                    id: ((_b = bank.data.otpData.responseBody) === null || _b === void 0 ? void 0 : _b.id) || '',
+                    id: ((_c = bank.data.otpData.responseBody) === null || _c === void 0 ? void 0 : _c.id) || '',
                     encryption_contract: []
                 };
                 return [4, API.leadService.updateLead(payload)];
             case 1:
-                data = (_g.sent()).data;
-                (_d = (_c = settings.data.appConfig).onStepCompleted) === null || _d === void 0 ? void 0 : _d.call(_c, settings.data.activeScreen.name, params);
-                (_f = (_e = settings.data.appConfig).onFlowCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, { data: data });
-                return [2, { response: data, formData: params }];
+                response = _h.sent();
+                (_e = (_d = settings.data.appConfig).onStepCompleted) === null || _e === void 0 ? void 0 : _e.call(_d, settings.data.activeScreen.name, params);
+                (_g = (_f = settings.data.appConfig).onFlowCompleted) === null || _g === void 0 ? void 0 : _g.call(_f, { data: response === null || response === void 0 ? void 0 : response.data });
+                _h.label = 2;
+            case 2: return [2, { response: response === null || response === void 0 ? void 0 : response.data, formData: params }];
         }
     });
 }); });
@@ -136,7 +176,7 @@ var initialState = {
         bankData: {
             iban: '',
             beneficiaryName: '',
-            bankName: ''
+            bankName: 'Global Bank'
         }
     }
 };
@@ -156,6 +196,9 @@ export var bankSlice = createSlice({
     },
     extraReducers: function (builder) {
         builder
+            .addCase(verifyLeadToken.pending, function (state) {
+            state.error = null;
+        })
             .addCase(verifyLeadToken.fulfilled, function (state, action) {
             var _a;
             state.error = null;
@@ -186,6 +229,7 @@ export var bankSlice = createSlice({
                 return;
             }
             state.data.otpData = formData;
+            state.data.otpData.responseBody = data;
         })
             .addCase(verifyBankLeadOTP.rejected, function (state, action) {
             state.loading = false;
@@ -210,6 +254,27 @@ export var bankSlice = createSlice({
             .addCase(updateLeadSuccess.rejected, function (state, action) {
             state.loading = false;
             state.error = action.error.message;
+        })
+            .addCase(createBankAccount.pending, function (state) {
+            state.loading = true;
+            state.error = null;
+        })
+            .addCase(createBankAccount.fulfilled, function (state, action) {
+            var _a;
+            state.loading = false;
+            state.error = null;
+            var _b = action.payload, data = _b.data, formData = _b.formData;
+            var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
+            if (description) {
+                state.error = description;
+                return;
+            }
+            state.data.bankData = formData;
+            state.data.bankData.responseBody = data;
+        })
+            .addCase(createBankAccount.rejected, function (state, action) {
+            state.loading = false;
+            state.error = action.error.message;
         });
     }
 });

package/build/features/app/individual/individualStore.d.ts

@@ -11,6 +11,10 @@ export declare const verifyLeadOTP: import("@reduxjs/toolkit").AsyncThunk<{
         otp: string;
     };
 }, OTPFormValues, {}>;
+export declare const updateIndividualInfo: import("@reduxjs/toolkit").AsyncThunk<{
+    data: any;
+    formData: IndividualExtraFormValues;
+}, IndividualExtraFormValues, {}>;
 export declare const updateLeadSuccess: import("@reduxjs/toolkit").AsyncThunk<{
     response: any;
     formData: void;

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

@@ -50,7 +50,7 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import API from '../../../api';
 import { removeRequestHeaders } from '../../../utils';
 import { handleNextScreenStep } from '../../../app/settings';
-import { defaultCountry, INDIVIDUAl_STEP_NAMES, SOURCE_OF_INCOME } from '../../../constants';
+import { INDIVIDUAl_STEP_NAMES } from '../../../constants';
 export var verifyLeadToken = createAsyncThunk('verifyLeadToken', function (token, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var payload, data, leadResponse;
     return __generator(this, function (_a) {
@@ -77,10 +77,10 @@ export var verifyLeadToken = createAsyncThunk('verifyLeadToken', function (token
     });
 }); });
 export var verifyLeadOTP = createAsyncThunk('verifyIndividualLeadOTP', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, individual, settings, responseBody, payload, data;
-    var _b, _c, _d;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
+    var _a, individual, settings, responseBody, payload, data, steps, hasIndividualCompleted;
+    var _b, _c, _d, _e;
+    return __generator(this, function (_f) {
+        switch (_f.label) {
             case 0:
                 _a = thunkApi.getState(), individual = _a.individual, settings = _a.settings;
                 responseBody = individual.data.verify.responseBody;
@@ -93,33 +93,71 @@ export var verifyLeadOTP = createAsyncThunk('verifyIndividualLeadOTP', function
                 };
                 return [4, API.leadService.verifyLeadOTP(payload)];
             case 1:
-                data = (_e.sent()).data;
+                data = (_f.sent()).data;
                 if (!data.errors) {
                     (_d = (_c = settings.data.appConfig).onStepCompleted) === null || _d === void 0 ? void 0 : _d.call(_c, settings.data.activeScreen.name, { otp: params.otp });
-                    thunkApi.dispatch(handleNextScreenStep());
+                    steps = (_e = individual.data.verify.responseBody) === null || _e === void 0 ? void 0 : _e.steps;
+                    hasIndividualCompleted = Object.keys(steps).find(function (key) { return key === INDIVIDUAl_STEP_NAMES.INDIVIDUAl_SUCCESS; });
+                    if (hasIndividualCompleted) {
+                        thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_SUCCESS_STEP'));
+                    }
+                    else {
+                        thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_ADDITIONAL_INDIVIDUAL_INFO_STEP'));
+                    }
                 }
                 return [2, { data: data, formData: __assign({}, params) }];
         }
     });
 }); });
+export var updateIndividualInfo = createAsyncThunk('updateIndividualInfo', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a, settings, individual, requestBody, data;
+    var _b, _c, _d, _e, _f, _g;
+    return __generator(this, function (_h) {
+        switch (_h.label) {
+            case 0:
+                _a = thunkApi.getState(), settings = _a.settings, individual = _a.individual;
+                requestBody = {
+                    id: (_c = (_b = individual.data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.entity) === null || _c === void 0 ? void 0 : _c.id,
+                    employer_name: params.employerName,
+                    employer_city: (_d = params.employerLocation) === null || _d === void 0 ? void 0 : _d.iso2,
+                    source_income: [(_e = params.sourceIncome) === null || _e === void 0 ? void 0 : _e.title],
+                    actual_income: params.monthlyIncome,
+                    is_relative_PEP: params.isPEP,
+                    is_influencer: params.isInfluencer,
+                    step_name: INDIVIDUAl_STEP_NAMES.INDIVIDUAl_INFO
+                };
+                return [4, API.entityService.updateEntityInfo(requestBody)];
+            case 1:
+                data = (_h.sent()).data;
+                if (!data.errors) {
+                    thunkApi.dispatch(handleNextScreenStep());
+                    (_g = (_f = settings.data.appConfig).onStepCompleted) === null || _g === void 0 ? void 0 : _g.call(_f, settings.data.activeScreen.name, requestBody);
+                }
+                return [2, { data: data, formData: params }];
+        }
+    });
+}); });
 export var updateLeadSuccess = createAsyncThunk('updateLeadSuccess', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, settings, individual, payload, data;
-    var _b, _c, _d, _e, _f;
-    return __generator(this, function (_g) {
-        switch (_g.label) {
+    var _a, settings, individual, response, payload;
+    var _b, _c, _d, _e, _f, _g;
+    return __generator(this, function (_h) {
+        switch (_h.label) {
             case 0:
                 _a = thunkApi.getState(), settings = _a.settings, individual = _a.individual;
+                response = undefined;
+                if (!!!((_b = individual.data.otpData.responseBody) === null || _b === void 0 ? void 0 : _b.id)) return [3, 2];
                 payload = {
                     step_name: INDIVIDUAl_STEP_NAMES.INDIVIDUAl_SUCCESS,
-                    id: ((_b = individual.data.otpData.responseBody) === null || _b === void 0 ? void 0 : _b.id) || '',
+                    id: ((_c = individual.data.otpData.responseBody) === null || _c === void 0 ? void 0 : _c.id) || '',
                     encryption_contract: []
                 };
                 return [4, API.leadService.updateLead(payload)];
             case 1:
-                data = (_g.sent()).data;
-                (_d = (_c = settings.data.appConfig).onStepCompleted) === null || _d === void 0 ? void 0 : _d.call(_c, settings.data.activeScreen.name, params);
-                (_f = (_e = settings.data.appConfig).onFlowCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, { data: data });
-                return [2, { response: data, formData: params }];
+                response = _h.sent();
+                (_e = (_d = settings.data.appConfig).onStepCompleted) === null || _e === void 0 ? void 0 : _e.call(_d, settings.data.activeScreen.name, params);
+                (_g = (_f = settings.data.appConfig).onFlowCompleted) === null || _g === void 0 ? void 0 : _g.call(_f, { data: response === null || response === void 0 ? void 0 : response.data });
+                _h.label = 2;
+            case 2: return [2, { response: response === null || response === void 0 ? void 0 : response.data, formData: params }];
         }
     });
 }); });
@@ -134,10 +172,10 @@ var initialState = {
             otp: ''
         },
         individualData: {
-            sourceIncome: SOURCE_OF_INCOME[0],
+            sourceIncome: undefined,
             monthlyIncome: '',
             employerName: '',
-            employerLocation: defaultCountry,
+            employerLocation: undefined,
             isPEP: null,
             isInfluencer: null
         }
@@ -159,6 +197,9 @@ export var individualSlice = createSlice({
     },
     extraReducers: function (builder) {
         builder
+            .addCase(verifyLeadToken.pending, function (state) {
+            state.error = null;
+        })
             .addCase(verifyLeadToken.fulfilled, function (state, action) {
             var _a;
             state.error = null;
@@ -194,6 +235,27 @@ export var individualSlice = createSlice({
             .addCase(verifyLeadOTP.rejected, function (state, action) {
             state.loading = false;
             state.error = action.error.message;
+        })
+            .addCase(updateIndividualInfo.pending, function (state) {
+            state.loading = true;
+            state.error = null;
+        })
+            .addCase(updateIndividualInfo.fulfilled, function (state, action) {
+            var _a;
+            state.loading = false;
+            state.error = null;
+            var _b = action.payload, data = _b.data, formData = _b.formData;
+            var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
+            if (description) {
+                state.error = description;
+                return;
+            }
+            state.data.individualData = formData;
+            state.data.individualData.responseBody = data;
+        })
+            .addCase(updateIndividualInfo.rejected, function (state, action) {
+            state.loading = false;
+            state.error = action.error.message;
         })
             .addCase(updateLeadSuccess.fulfilled, function (state, action) {
             var _a;

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

@@ -16,14 +16,15 @@ import IBAN from './IBAN';
 import BankName from './BankName';
 import Button from '../../../shared/Button';
 import { useAppDispatch } from '../../../../hooks';
-import { handleNextScreenStep } from '../../../../app/settings';
 import { BankValidation } from './validation';
 import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useLanguage } from '../../../../hooks';
 import { styled } from '@mui/material/styles';
+import { bankSelector, createBankAccount } from '../../../app/bank/bankStore';
 import Form from '../../../../components/Form';
+import { useSelector } from 'react-redux';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column',
@@ -37,20 +38,17 @@ var ButtonStyled = styled(Button)(function (_a) {
 });
 var BankDetails = function () {
     var dispatch = useAppDispatch();
+    var _a = useSelector(bankSelector), data = _a.data, loading = _a.loading, error = _a.error;
     var methods = useForm({
         resolver: yupResolver(BankValidation),
-        defaultValues: {
-            iban: '',
-            beneficiaryName: '',
-            bankName: 'National Bank'
-        },
+        defaultValues: data.bankData,
         mode: 'onChange'
     });
-    var onSubmit = function () {
-        dispatch(handleNextScreenStep());
+    var onSubmit = function (data) {
+        dispatch(createBankAccount(data));
     };
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(IBAN, {}), _jsx(Beneficiary, {}), _jsx(BankName, {}), _jsx(ButtonStyled, __assign({ disableBack: true, disabled: !methods.formState.isValid, isAr: isAr }, { children: t('confirm') }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(IBAN, {}), _jsx(Beneficiary, {}), _jsx(BankName, {}), _jsx(ButtonStyled, __assign({ disableBack: true, disabled: !methods.formState.isValid, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
 };
 export default BankDetails;

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

@@ -13,6 +13,14 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
         marginBlockEnd: theme.spacing(3)
     });
 });
+var InputStyled = styled(Input)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        input: {
+            textTransform: 'capitalize'
+        }
+    });
+});
 var Beneficiary = function () {
     var _a, _b;
     var t = useTranslation().t;
@@ -29,6 +37,6 @@ var Beneficiary = function () {
     var clearValue = function () {
         beneficiaryControl.field.onChange('');
     };
-    return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('beneficiary_name'), onChange: handleBeneficiaryChange, value: beneficiaryValue, placeholder: t('beneficiary_name'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: !hasError && beneficiaryValue ? _jsx(CheckIcon, {}) : beneficiaryValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
+    return (_jsx(FeatureStyled, { children: _jsx(InputStyled, { label: t('beneficiary_name'), onChange: handleBeneficiaryChange, value: beneficiaryValue, placeholder: t('beneficiary_name'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: !hasError && beneficiaryValue ? _jsx(CheckIcon, {}) : beneficiaryValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
 };
 export default Beneficiary;

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

@@ -2,8 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import SuccessScreen from '../../../shared/SuccessScreen';
+import { useAppDispatch } from '../../../../hooks';
+import { updateLeadSuccess } from '../../../app/bank/bankStore';
 var Success = function (_a) {
     var t = useTranslation().t;
+    var dispatch = useAppDispatch();
+    React.useEffect(function () {
+        dispatch(updateLeadSuccess());
+    }, []);
     var onSuccess = function () {
         window.open('mailto:');
     };

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

@@ -10,9 +10,6 @@ var ThankYou = function (_a) {
     React.useEffect(function () {
         dispatch(updateLeadSuccess());
     }, []);
-    var onSuccess = function () {
-        window.open('mailto:');
-    };
-    return _jsx(SuccessScreen, { title: t('ide_successfully_verified_message'), onSuccess: onSuccess });
+    return _jsx(SuccessScreen, { title: t('ide_successfully_verified_message'), showEmailProviders: true });
 };
 export default React.memo(ThankYou);

package/build/features/featuresScreens.js

@@ -15,7 +15,6 @@ import PasswordVerifyPage from './password/screens/Verify';
 import CreatePasswordPage from './password/screens/CreatePassword';
 import SuccessPasswordPage from './password/screens/Success';
 import IndividualVerifyPage from './individual/screens/Verify';
-import ShowIndividualInfoPage from './individual/screens/ShowIndividualInfo';
 import AdditionalIndividualInfoPage from './individual/screens/AdditionalIndividualInfo';
 import SuccessOwnerPage from './individual/screens/Success';
 import BankVerifyPage from './bank/screens/Verify';
@@ -97,10 +96,6 @@ export var individualFeatureScreens = [
         name: 'INDIVIDUAL_VERIFY_STEP',
         element: IndividualVerifyPage
     },
-    {
-        name: 'INDIVIDUAL_SHOW_INDIVIDUAL_INFO_STEP',
-        element: ShowIndividualInfoPage
-    },
     {
         name: 'INDIVIDUAL_ADDITIONAL_INDIVIDUAL_INFO_STEP',
         element: AdditionalIndividualInfoPage

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

@@ -16,7 +16,7 @@ import { useForm, FormProvider } from 'react-hook-form';
 import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch } from '../../../../hooks';
-import { handleNextScreenStep, handlePrevScreenStep } from '../../../../app/settings';
+import { handlePrevScreenStep } from '../../../../app/settings';
 import { styled } from '@mui/material/styles';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
@@ -31,6 +31,8 @@ import EmployerName from './EmployerName';
 import EmployerLocation from './EmployerLocation';
 import SourceOfIncome from './SourceOfIncome';
 import { countriesCode, SOURCE_OF_INCOME } from '../../../../constants';
+import { useSelector } from 'react-redux';
+import { individualSelector, updateIndividualInfo } from '../../../app/individual/individualStore';
 var InputsContainerStyled = styled(Box)(function (_a) {
     var _b;
     var theme = _a.theme, listActive = _a.listActive;
@@ -47,25 +49,26 @@ var InputsContainerStyled = styled(Box)(function (_a) {
         },
         _b);
 });
+var ButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginBlockStart: theme.spacing(-5)
+    });
+});
 var AdditionalIndividualInfo = function (_a) {
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var dispatch = useAppDispatch();
+    var _b = useSelector(individualSelector), data = _b.data, loading = _b.loading, error = _b.error;
     var methods = useForm({
         resolver: yupResolver(IndividualInfoValidationSchema),
-        defaultValues: {
-            monthlyIncome: '',
-            employerName: '',
-            isPEP: null,
-            isInfluencer: null
-        },
+        defaultValues: data.individualData,
         mode: 'onChange'
     });
-    var t = useTranslation().t;
-    var isAr = useLanguage().isAr;
-    var dispatch = useAppDispatch();
-    var _b = React.useState(false), listActive = _b[0], setListActive = _b[1];
-    var _c = React.useState(false), employerFieldsActive = _c[0], setEmployerFieldsActive = _c[1];
+    var _c = React.useState(false), listActive = _c[0], setListActive = _c[1];
+    var _d = React.useState(false), employerFieldsActive = _d[0], setEmployerFieldsActive = _d[1];
     var onSubmit = function (data) {
-        console.log('data', data);
-        dispatch(handleNextScreenStep());
+        dispatch(updateIndividualInfo(data));
     };
     var handleSelectSource = function (country) {
         var _a;
@@ -78,7 +81,7 @@ var AdditionalIndividualInfo = function (_a) {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, __assign({ listActive: listActive }, { children: [_jsx(SourceOfIncome, { show: !listActive, list: SOURCE_OF_INCOME, onSelectSource: handleSelectSource }), _jsx(MonthlyIncome, { show: !listActive }), _jsx(EmployerName, { show: !listActive && employerFieldsActive }), _jsx(EmployerLocation, { show: employerFieldsActive, countries: countriesCode, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(PEPSwitch, { show: !listActive }), _jsx(InfluencerSwitch, { show: !listActive })] })), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: !methods.formState.isValid, loading: false }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, __assign({ listActive: listActive }, { children: [_jsx(SourceOfIncome, { show: !listActive, list: SOURCE_OF_INCOME, onSelectSource: handleSelectSource }), _jsx(MonthlyIncome, { show: !listActive }), _jsx(EmployerName, { show: !listActive && employerFieldsActive }), _jsx(EmployerLocation, { show: employerFieldsActive, countries: countriesCode, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(PEPSwitch, { show: !listActive }), _jsx(InfluencerSwitch, { show: !listActive })] })), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(ButtonStyled, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: !methods.formState.isValid, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(AdditionalIndividualInfo);
 AdditionalIndividualInfo.defaultProps = {};

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

@@ -19,6 +19,15 @@ import Input from '../../../shared/Input';
 import CheckIcon from '../../../shared/CheckIcon';
 import Collapse from '../../../../components/Collapse';
 import ClearIcon from '../../../shared/ClearIcon';
+import { styled } from '@mui/material/styles';
+var InputStyled = styled(Input)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        input: {
+            textTransform: 'capitalize'
+        }
+    });
+});
 var EmployerName = function (_a) {
     var _b;
     var show = _a.show;
@@ -35,6 +44,6 @@ var EmployerName = function (_a) {
     var clearValue = function () {
         employerNameControl.field.onChange('');
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { pt: 2.5 } }, { children: _jsx(Input, { required: true, label: t('tap_js_employer_name'), onChange: handleEmployerNameChange, value: employerNameValue, endAdornment: !error && employerNameValue ? _jsx(CheckIcon, {}) : employerNameValue && _jsx(ClearIcon, { onClick: clearValue }), placeholder: t('tap_js_enter_employer_name'), warningType: 'alert', warningMessage: error && t(error) }) })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { pt: 2.5 } }, { children: _jsx(InputStyled, { required: true, label: t('tap_js_employer_name'), onChange: handleEmployerNameChange, value: employerNameValue, endAdornment: !error && employerNameValue ? _jsx(CheckIcon, {}) : employerNameValue && _jsx(ClearIcon, { onClick: clearValue }), placeholder: t('tap_js_enter_employer_name'), warningType: 'alert', warningMessage: error && t(error) }) })) })));
 };
 export default React.memo(EmployerName);

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

@@ -80,7 +80,7 @@ var SourceOfIncome = function (_a) {
     };
     var source = sourceIncomeControl.field.value;
     var error = (_b = sourceIncomeControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 2.5 } }, { children: [_jsx(Input, { required: true, label: t('tap_js_source_of_income'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_any_source_of_income'), value: (isAr ? source === null || source === void 0 ? void 0 : source.name : source === null || source === void 0 ? void 0 : source.nameEn) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'nameEn', list: sourceList, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: 2.5 } }, { children: [_jsx(Input, { required: true, label: t('tap_js_source_of_income'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_any_source_of_income'), value: (isAr ? source === null || source === void 0 ? void 0 : source.titleAr : source === null || source === void 0 ? void 0 : source.title) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'nameEn', list: sourceList, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsx(Container, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (source === null || source === void 0 ? void 0 : source.id) }, { children: isAr ? item.titleAr : item === null || item === void 0 ? void 0 : item.title })) }), item.id === (source === null || source === void 0 ? void 0 : source.id) && _jsx(CheckIconStyled, {})] }));
                         } }) }))] })) })));
 };

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

@@ -5,7 +5,7 @@ export var IndividualInfoValidationSchema = yup.object().shape({
     monthlyIncome: yup.string().optional(),
     employerName: yup.string().when('sourceIncome', function (sourceIncomeValue) {
         var _a;
-        if (((_a = sourceIncomeValue === null || sourceIncomeValue === void 0 ? void 0 : sourceIncomeValue.nameEn) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'salary') {
+        if (((_a = sourceIncomeValue === null || sourceIncomeValue === void 0 ? void 0 : sourceIncomeValue.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'salary') {
             return yup.string().matches(REGEX_FULL_NAME, 'employer_name_invalid').required('please_enter_employer_name');
         }
         else {
@@ -14,7 +14,7 @@ export var IndividualInfoValidationSchema = yup.object().shape({
     }),
     employerLocation: yup.object().when('sourceIncome', function (sourceIncome) {
         var _a;
-        if (((_a = sourceIncome === null || sourceIncome === void 0 ? void 0 : sourceIncome.nameEn) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'salary') {
+        if (((_a = sourceIncome === null || sourceIncome === void 0 ? void 0 : sourceIncome.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'salary') {
             return yup
                 .object({
                 name: yup.object().shape({

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

@@ -1,9 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useAppDispatch } from '../../../../hooks';
+import { updateLeadSuccess } from '../../../app/individual/individualStore';
 import SuccessScreen from '../../../shared/SuccessScreen';
 var Success = function (_a) {
     var t = useTranslation().t;
+    var dispatch = useAppDispatch();
+    React.useEffect(function () {
+        dispatch(updateLeadSuccess());
+    }, []);
     var onSuccess = function () {
         window.open('mailto:');
     };

package/build/features/shared/Button/EmailProvidersButtons.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ButtonProps } from '../../../components/Button';
+declare type buttonProps = {
+    title: string;
+    href: string;
+};
+export interface EmailProvidersButtonsProps extends ButtonProps {
+    gmail: buttonProps;
+    outlook: buttonProps;
+    apple: buttonProps;
+}
+export default function EmailProvidersButtons({ gmail, outlook, apple }: EmailProvidersButtonsProps): JSX.Element;
+export {};

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

@@ -0,0 +1,92 @@
+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 Button from '../../../components/Button';
+import { alpha, styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import { ICONS_NAMES } from '../../../constants';
+var Image = styled('img')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(3),
+        height: theme.spacing(3),
+        fontSize: theme.spacing(3),
+        marginInlineStart: theme.spacing(1)
+    });
+});
+var ButtonBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        margin: theme.spacing(0, 2.5, 2.5, 2.5)
+    });
+});
+var GMailButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: '100%',
+        paddingInlineStart: theme.spacing(0.75),
+        marginBottom: theme.spacing(1.875),
+        backgroundColor: theme.palette.common.white,
+        border: "1px solid ".concat(theme.palette.primary.main),
+        color: theme.palette.primary.main,
+        '&:hover': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.common.white
+        },
+        '&:disabled': {
+            backgroundColor: theme.palette.common.white,
+            color: alpha(theme.palette.primary.main, 0.3)
+        }
+    });
+});
+var OutlookButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: '100%',
+        paddingInlineStart: theme.spacing(0.75),
+        marginBottom: theme.spacing(1.875),
+        backgroundColor: theme.palette.common.white,
+        border: "1px solid ".concat(theme.palette.primary.main),
+        color: theme.palette.primary.main,
+        '&:hover': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.common.white
+        },
+        '&:disabled': {
+            backgroundColor: theme.palette.common.white,
+            color: alpha(theme.palette.primary.main, 0.3)
+        }
+    });
+});
+var AppleButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: '100%',
+        paddingInlineStart: theme.spacing(0.75),
+        backgroundColor: theme.palette.common.white,
+        border: "1px solid ".concat(theme.palette.primary.main),
+        color: theme.palette.primary.main,
+        '&:hover': {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.common.white
+        },
+        '&:disabled': {
+            backgroundColor: theme.palette.common.white,
+            color: alpha(theme.palette.primary.main, 0.3)
+        }
+    });
+});
+export default function EmailProvidersButtons(_a) {
+    var gmail = _a.gmail, outlook = _a.outlook, apple = _a.apple;
+    return (_jsxs(ButtonBoxStyled, { children: [_jsx(Link, __assign({ href: gmail.href, underline: 'none', target: '_blank' }, { children: _jsx(GMailButtonStyled, __assign({ startIcon: _jsx(Image, { src: ICONS_NAMES.GMAIL_ICON, alt: gmail.title }), type: 'button' }, { children: gmail.title })) })), _jsx(Link, __assign({ href: outlook.href, underline: 'none', target: '_blank' }, { children: _jsx(OutlookButtonStyled, __assign({ startIcon: _jsx(Image, { src: ICONS_NAMES.OUTLOOK_ICON, alt: outlook.title }), type: 'button' }, { children: outlook.title })) })), _jsx(Link, __assign({ href: apple.href, underline: 'none', target: '_blank' }, { children: _jsx(AppleButtonStyled, __assign({ startIcon: _jsx(Image, { src: ICONS_NAMES.APPLE_MAIL_ICON, alt: apple.title }), type: 'button' }, { children: apple.title })) }))] }));
+}

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

@@ -1,5 +1,6 @@
 import Button from './Button';
 import AbsherButton from './AbsherButton';
 import MobileButton from './MobileButton';
-export { AbsherButton, MobileButton };
+import EmailProvidersButton from './EmailProvidersButtons';
+export { AbsherButton, MobileButton, EmailProvidersButton };
 export default Button;

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

@@ -1,5 +1,6 @@
 import Button from './Button';
 import AbsherButton from './AbsherButton';
 import MobileButton from './MobileButton';
-export { AbsherButton, MobileButton };
+import EmailProvidersButton from './EmailProvidersButtons';
+export { AbsherButton, MobileButton, EmailProvidersButton };
 export default Button;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 export interface ThankYouProps {
-    onSuccess?: () => void;
     title?: string;
+    onSuccess?: () => void;
+    showEmailProviders?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ onSuccess, title }: ThankYouProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ title, showEmailProviders, onSuccess }: ThankYouProps) => JSX.Element>;
 export default _default;

package/build/features/shared/SuccessScreen/SuccessScreen.js

@@ -14,12 +14,12 @@ import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLanguage } from '../../../hooks';
 import Text from '../../../components/Text';
 import Container from '../Containers/ScreenContainer';
-import { AbsherButton } from '../../shared/Button';
+import { AbsherButton, EmailProvidersButton } from '../../shared/Button';
 import Icon from '../../../components/Icon';
 import { ICONS_NAMES } from '../../../constants';
+import { useLanguage } from '../../../hooks';
 var MailBoxStyled = styled(Box)(function () { return ({
     width: '100%'
 }); });
@@ -64,9 +64,9 @@ var IconStyled = styled(Icon)(function (_a) {
         _b);
 });
 var ThankYou = function (_a) {
-    var onSuccess = _a.onSuccess, title = _a.title;
+    var title = _a.title, showEmailProviders = _a.showEmailProviders, onSuccess = _a.onSuccess;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsxs(ContainerStyled, { children: [title && (_jsx(TextContainerStyled, { children: _jsxs(TitleStyled, { children: [title, " "] }) })), _jsx(IconStyled, { src: ICONS_NAMES.EMAIL_ICON, alt: 'loading...' }), _jsx(MailBoxStyled, { children: _jsx(AbsherButton, __assign({ hideIcon: true, isAr: isAr, onClick: onSuccess }, { children: t('open_mail_box') })) })] }));
+    return (_jsxs(ContainerStyled, { children: [title && (_jsx(TextContainerStyled, { children: _jsxs(TitleStyled, { children: [title, " "] }) })), _jsx(IconStyled, { src: ICONS_NAMES.EMAIL_ICON, alt: 'loading...' }), showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(EmailProvidersButton, { gmail: { title: t('open_gmail'), href: 'https://mail.google.com/mail/u/0/#inbox' }, outlook: { title: t('open_outlook'), href: 'https://outlook.live.com/mail/0/' }, apple: { title: t('open_apple'), href: 'https://www.icloud.com/mail/' } }) })), onSuccess && !showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(AbsherButton, __assign({ hideIcon: true, isAr: isAr, onClick: onSuccess }, { children: t('open_mail_box') })) }))] }));
 };
 export default React.memo(ThankYou);

package/package.json

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