@tap-payments/auth-jsconnect 1.0.23 → 1.0.26

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { LanguageMode } from './theme';
 export interface CountryCode {
     created: number;
     updated: number;
@@ -108,6 +109,21 @@ export interface SourceOfIncome {
 }
 export interface AppInfo {
     name: string;
+    identifier?: string;
+    version?: string;
+}
+interface LibCallbacks {
+    onFlowCompleted: (res: object) => void;
+    onError: (err: any) => void;
+    onStepCompleted?: (name: string, info: any) => void;
+    onReady?: () => void;
+}
+export interface LibConfig extends LibCallbacks {
+    publicKey: string;
+    language: LanguageMode;
+    appInfo: AppInfo;
+    businessCountryCode: string;
+    scope?: string[];
 }
 export interface OSDetails {
     name: string;

package/build/api/axios.js

@@ -1,5 +1,7 @@
 import axios from 'axios';
+import { get, set } from 'lodash-es';
 import { ENDPOINT_PATHS } from '../constants';
+import { encryptString } from '../utils';
 export var ENCRYPTION_FLAG = 'encryption_contract';
 export var BACKEND_ENCRYPTION_FLAG = 'backend_encryption_contract';
 var instance = axios.create({
@@ -10,9 +12,26 @@ var instance = axios.create({
     }
 });
 instance.interceptors.request.use(function (config) {
-    return config;
+    return encryptionContractTransformer(config);
 }, function (error) { return Promise.reject(error); });
 instance.interceptors.response.use(function (response) { return response; }, function (error) {
     return Promise.reject(error);
 });
+var encryptionContractTransformer = function (config) {
+    var _a;
+    var data = config.data;
+    if ((_a = data === null || data === void 0 ? void 0 : data[ENCRYPTION_FLAG]) === null || _a === void 0 ? void 0 : _a.length) {
+        data[ENCRYPTION_FLAG].forEach(function (key) {
+            var value = get(data, key);
+            if (value && typeof value !== 'string') {
+                value = value.toString();
+            }
+            if (value)
+                set(data, key, _encrypt(value));
+        });
+        config.data = data;
+    }
+    return config;
+};
+var _encrypt = function (value) { return encryptString(value); };
 export default instance;

package/build/api/lead.d.ts

@@ -55,6 +55,7 @@ export declare type UpdateLeadBody = {
     cr_number?: string;
     is_acknowledged?: boolean;
     terms_conditions_accepted?: boolean;
+    email_url?: string;
 };
 declare const leadService: {
     updateLead: (data: UpdateLeadBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;

package/build/app/settings.d.ts

@@ -1,5 +1,5 @@
 import { RootState } from './store';
-import { ActionState, LanguageMode, SharedState, ThemeMode, ScreenStepNavigation, DeviceInfo, AppInfo } from '../@types';
+import { ActionState, LanguageMode, SharedState, ThemeMode, ScreenStepNavigation, DeviceInfo, AppInfo, LibConfig } from '../@types';
 import { ValidateOperatorBody } from '../api';
 export declare const getClientIp: import("@reduxjs/toolkit").AsyncThunk<any, void, {}>;
 export declare const getBrowserFingerPrint: import("@reduxjs/toolkit").AsyncThunk<{
@@ -16,6 +16,7 @@ export interface SettingsData {
     activeScreen: ScreenStepNavigation;
     featureScreensNavigation: Array<ScreenStepNavigation>;
     deviceInfo: DeviceInfo;
+    appConfig: LibConfig;
 }
 export interface SettingsState extends SharedState<SettingsData> {
 }
@@ -26,8 +27,9 @@ export declare const settingsSlice: import("@reduxjs/toolkit").Slice<SettingsSta
     handleCurrentActiveScreen: (state: SettingsState, action: ActionState<string>) => void;
     handlePrevScreenStep: (state: SettingsState, action: ActionState<string | undefined>) => void;
     handleActiveFlowScreens: (state: SettingsState, action: ActionState<Array<ScreenStepNavigation>>) => void;
+    handleSetAppConfig: (state: SettingsState, action: ActionState<LibConfig>) => void;
 }, "settings">;
-export declare const handleSkin: import("@reduxjs/toolkit").ActionCreatorWithPayload<ThemeMode, string>, handleLanguage: import("@reduxjs/toolkit").ActionCreatorWithPayload<LanguageMode, string>, handleActiveFlowScreens: import("@reduxjs/toolkit").ActionCreatorWithPayload<ScreenStepNavigation[], string>, handleNextScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>, handlePrevScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>, handleCurrentActiveScreen: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
+export declare const handleSkin: import("@reduxjs/toolkit").ActionCreatorWithPayload<ThemeMode, string>, handleLanguage: import("@reduxjs/toolkit").ActionCreatorWithPayload<LanguageMode, string>, handleActiveFlowScreens: import("@reduxjs/toolkit").ActionCreatorWithPayload<ScreenStepNavigation[], string>, handleNextScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>, handlePrevScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, string>, handleCurrentActiveScreen: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, handleSetAppConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<LibConfig, string>;
 declare const _default: import("redux").Reducer<SettingsState, import("redux").AnyAction>;
 export default _default;
 export declare const settingsSelector: (state: RootState) => SettingsState;

package/build/app/settings.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -83,7 +94,8 @@ var initialState = {
         language: getStoredData(LOCAL_STORAGE_KEYS.languageMode) || 'en',
         featureScreensNavigation: [],
         activeScreen: {},
-        deviceInfo: DefaultDeviceInfo
+        deviceInfo: DefaultDeviceInfo,
+        appConfig: {}
     }
 };
 export var settingsSlice = createSlice({
@@ -142,6 +154,22 @@ export var settingsSlice = createSlice({
         handleActiveFlowScreens: function (state, action) {
             state.data.featureScreensNavigation = action.payload;
             state.data.activeScreen = action.payload[0];
+        },
+        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;
+            if (!appInfo.name)
+                throw new Error('App name is required');
+            if (!businessCountryCode)
+                throw new Error('Business country is required');
+            if (!language)
+                throw new Error('Language is required');
+            if (!publicKey)
+                throw new Error('Public key is required');
+            if (!onError)
+                throw new Error('On error function is required');
+            if (!onFlowCompleted)
+                throw new Error('On flow completed function is required');
+            state.data.appConfig = __assign(__assign({}, action.payload), { appInfo: __assign(__assign({}, appInfo), { identifier: 'auth-js-connect', version: '1.0.22' }) });
         }
     },
     extraReducers: function (builder) {
@@ -193,6 +221,6 @@ export var settingsSlice = createSlice({
         });
     }
 });
-export var handleSkin = (_a = settingsSlice.actions, _a.handleSkin), handleLanguage = _a.handleLanguage, handleActiveFlowScreens = _a.handleActiveFlowScreens, handleNextScreenStep = _a.handleNextScreenStep, handlePrevScreenStep = _a.handlePrevScreenStep, handleCurrentActiveScreen = _a.handleCurrentActiveScreen;
+export var handleSkin = (_a = settingsSlice.actions, _a.handleSkin), handleLanguage = _a.handleLanguage, handleActiveFlowScreens = _a.handleActiveFlowScreens, handleNextScreenStep = _a.handleNextScreenStep, handlePrevScreenStep = _a.handlePrevScreenStep, handleCurrentActiveScreen = _a.handleCurrentActiveScreen, handleSetAppConfig = _a.handleSetAppConfig;
 export default settingsSlice.reducer;
 export var settingsSelector = function (state) { return state.settings; };

package/build/components/Button/Button.js

@@ -44,6 +44,7 @@ var ButtonStyled = styled(Button)(function (_a) {
         },
         ':disabled': {
             backgroundColor: alpha(theme.palette.primary.main, 0.3),
+            borderColor: alpha(theme.palette.primary.main, 0.2),
             color: theme.palette.common.white
         },
         '& .MuiButton-endIcon': {

package/build/constants/app.d.ts

@@ -83,3 +83,4 @@ export declare const BUSINESS_STEP_NAMES: {
     VERIFY_LEAD_IDENTITY: string;
     UPDATE_LEAD_BUSINESS_TYPE: string;
 };
+export declare const RSA_FRONTEND_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCgC9kH1SQvjbXAUXd0PbrDUG8P\nLhRig9pJNBmdQBZjihuaxfkzYu6ToMbIMAfmYgVgQw338/y7aQ8X3m03CXNIlkxo\nOwxKCA8ymKsZQptXJn9IxlPO7yjoFgTFBrpmTgvcC4XO1uoUYTAPq3szK8kj4zgT\nucWG1hSKsOdRU7sl/wIDAQAB\n-----END PUBLIC KEY-----";

package/build/constants/app.js

@@ -232,3 +232,4 @@ export var BUSINESS_STEP_NAMES = {
     VERIFY_LEAD_IDENTITY: 'business_verify_lead_identity',
     UPDATE_LEAD_BUSINESS_TYPE: 'business_update_lead_business_type'
 };
+export var RSA_FRONTEND_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCgC9kH1SQvjbXAUXd0PbrDUG8P\nLhRig9pJNBmdQBZjihuaxfkzYu6ToMbIMAfmYgVgQw338/y7aQ8X3m03CXNIlkxo\nOwxKCA8ymKsZQptXJn9IxlPO7yjoFgTFBrpmTgvcC4XO1uoUYTAPq3szK8kj4zgT\nucWG1hSKsOdRU7sl/wIDAQAB\n-----END PUBLIC KEY-----";

package/build/constants/dummy.d.ts

@@ -341,3 +341,4 @@ export declare const SOURCE_OF_INCOME: {
     name: string;
     nameEn: string;
 }[];
+export declare const EMAIL_PATH = "http://localhost:3000";

package/build/constants/dummy.js

@@ -6432,3 +6432,4 @@ export var SOURCE_OF_INCOME = [
     { id: 5, name: 'تجارة', nameEn: 'Trading' },
     { id: 6, name: 'غير ذلك', nameEn: 'Other' }
 ];
+export var EMAIL_PATH = 'http://localhost:3000';

package/build/features/app/connect/connectStore.d.ts

@@ -1,7 +1,7 @@
 import { RootState } from '../../../app/store';
 import { ResponseData, CountryCode, MobileFormValues, NIDFormValues, OTPFormValues, IndividualFormValues, SharedState, BrandFormValues, PasswordFormValues } from '../../../@types';
 export declare const getCountries: import("@reduxjs/toolkit").AsyncThunk<{
-    businessCountries: any;
+    businessCountry: any;
     countries: any;
 }, void, {}>;
 export declare const createMobileAuth: import("@reduxjs/toolkit").AsyncThunk<{
@@ -53,7 +53,6 @@ export declare const updateLeadSuccess: import("@reduxjs/toolkit").AsyncThunk<{
 }, void, {}>;
 export interface ConnectData {
     countries: Array<CountryCode>;
-    businessCountries: Array<CountryCode>;
     mobileData: MobileFormValues & ResponseData;
     nidData: NIDFormValues & ResponseData & {
         type: string;

package/build/features/app/connect/connectStore.js

@@ -47,29 +47,27 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 var _a;
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import moment from 'moment-hijri';
 import { handleNextScreenStep } from '../../../app/settings';
 import API from '../../../api';
 import { CONNECT_STEP_NAMES, IDENTIFICATION_TYPE } from '../../../constants';
-import { defaultCountry } from '../../../constants/dummy';
-import { convertNumbers2English, getIndividualName } from '../../../utils';
-export var getCountries = createAsyncThunk('getCountries', function () { return __awaiter(void 0, void 0, void 0, function () {
-    var countriesBody, BusinessCountries, list, countries, filterBusinessCountries;
+import { defaultCountry, EMAIL_PATH } from '../../../constants/dummy';
+import { getIndividualName } from '../../../utils';
+export var getCountries = createAsyncThunk('getCountries', function (_, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
+    var settings, countriesBody, list, businessCountry;
     return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4, API.countryService.getAllCountries()];
+            case 0:
+                settings = thunkApi.getState().settings;
+                return [4, API.countryService.getAllCountries()];
             case 1:
                 countriesBody = (_a.sent()).data;
-                return [4, API.countryService.getBusinessCountries()];
-            case 2:
-                BusinessCountries = (_a.sent()).data;
                 list = countriesBody.list;
-                countries = BusinessCountries.countries;
-                filterBusinessCountries = (list || []).filter(function (item) {
-                    return (countries || []).some(function (obj) { return obj.code === item.iso2; });
+                businessCountry = list.find(function (item) {
+                    return [item.iso2, item.iso3].includes(settings.data.appConfig.businessCountryCode.toUpperCase());
                 });
+                console.log('businessCountry', businessCountry);
                 return [2, {
-                        businessCountries: filterBusinessCountries,
+                        businessCountry: businessCountry,
                         countries: list || []
                     }];
         }
@@ -77,8 +75,9 @@ export var getCountries = createAsyncThunk('getCountries', function () { return
 }); });
 export var createMobileAuth = createAsyncThunk('createMobileAuth', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var settings, requestBody, data;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var _a, _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
             case 0:
                 settings = thunkApi.getState().settings;
                 requestBody = {
@@ -89,55 +88,62 @@ export var createMobileAuth = createAsyncThunk('createMobileAuth', function (par
                     device_info: settings.data.deviceInfo,
                     sign_in: false,
                     step_name: CONNECT_STEP_NAMES.CREATE_AUTH_MOBILE,
-                    encryption_contract: []
+                    encryption_contract: ['user_credentail.phone', 'user_credentail.code']
                 };
                 return [4, API.authService.createAuth(requestBody)];
             case 1:
-                data = (_a.sent()).data;
-                if (!data.errors && !params.isResend)
+                data = (_c.sent()).data;
+                if (!data.errors && !params.isResend) {
                     thunkApi.dispatch(handleNextScreenStep());
+                    (_b = (_a = settings.data.appConfig).onStepCompleted) === null || _b === void 0 ? void 0 : _b.call(_a, settings.data.activeScreen.name, requestBody.user_credentail);
+                }
                 return [2, { response: data, formData: params }];
         }
     });
 }); });
 export var createNIDAuth = createAsyncThunk('createNIDAuth', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var _a, settings, connect, identification_id_type, birthDate, requestBody, data;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
+    var _a, settings, connect, identification_id_type, requestBody, data;
+    var _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
             case 0:
                 _a = thunkApi.getState(), settings = _a.settings, connect = _a.connect;
                 identification_id_type = params.nid.startsWith('1') ? IDENTIFICATION_TYPE.NID : IDENTIFICATION_TYPE.IQAMA;
-                birthDate = params.dob;
-                if (identification_id_type === IDENTIFICATION_TYPE.NID) {
-                    birthDate = convertNumbers2English(moment(birthDate, 'YYYY-MM-DD').format('iYYYY/iMM/iDD')).split('/').join('-');
-                }
                 requestBody = {
                     user_credentail: {
                         identification_id: params.nid,
                         identification_id_type: identification_id_type,
-                        date_of_birth: birthDate,
+                        date_of_birth: params.dob,
                         country_code: connect.data.mobileData.businessCountry.iso2
                     },
                     device_info: settings.data.deviceInfo,
                     sign_in: false,
                     step_name: CONNECT_STEP_NAMES.CREATE_AUTH_NID,
-                    encryption_contract: []
+                    encryption_contract: [
+                        'user_credentail.country_code',
+                        'user_credentail.identification_id',
+                        'user_credentail.identification_id_type',
+                        'user_credentail.date_of_birth'
+                    ]
                 };
                 return [4, API.authService.createAuth(requestBody)];
             case 1:
-                data = (_b.sent()).data;
-                if (!data.errors && !params.isResend)
+                data = (_d.sent()).data;
+                if (!data.errors && !params.isResend) {
                     thunkApi.dispatch(handleNextScreenStep());
+                    (_c = (_b = settings.data.appConfig).onStepCompleted) === null || _c === void 0 ? void 0 : _c.call(_b, settings.data.activeScreen.name, requestBody.user_credentail);
+                }
                 return [2, { response: data, formData: __assign(__assign({}, params), { type: identification_id_type }) }];
         }
     });
 }); });
 export var verifyAuth = createAsyncThunk('verifyAuth', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var connect, isAbsher, responseBody, payload, data;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var _a, connect, settings, isAbsher, responseBody, payload, data;
+    var _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
             case 0:
-                connect = thunkApi.getState().connect;
+                _a = thunkApi.getState(), connect = _a.connect, settings = _a.settings;
                 isAbsher = connect.data.otpData.isAbsher;
                 responseBody = (isAbsher ? connect.data.nidData : connect.data.mobileData).responseBody;
                 payload = {
@@ -151,12 +157,13 @@ export var verifyAuth = createAsyncThunk('verifyAuth', function (params, thunkAp
                     remember_me: responseBody === null || responseBody === void 0 ? void 0 : responseBody.remember_me,
                     scopes: responseBody === null || responseBody === void 0 ? void 0 : responseBody.scopes,
                     step_name: isAbsher ? CONNECT_STEP_NAMES.VERIFY_AUTH_NID : CONNECT_STEP_NAMES.VERIFY_AUTH_MOBILE,
-                    encryption_contract: []
+                    encryption_contract: ['data']
                 };
                 return [4, API.authService.verifyAuth(payload)];
             case 1:
-                data = (_a.sent()).data;
+                data = (_d.sent()).data;
                 if (!data.errors) {
+                    (_c = (_b = settings.data.appConfig).onStepCompleted) === null || _c === void 0 ? void 0 : _c.call(_b, settings.data.activeScreen.name, { otp: params.otp });
                     if (responseBody === null || responseBody === void 0 ? void 0 : responseBody.new_user) {
                         thunkApi.dispatch(handleNextScreenStep('CONNECT_INDIVIDUAL_STEP'));
                     }
@@ -169,11 +176,12 @@ export var verifyAuth = createAsyncThunk('verifyAuth', function (params, thunkAp
     });
 }); });
 export var verifyAuthPassword = createAsyncThunk('verifyAuthPassword', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var connect, isAbsher, responseBody, payload, data;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var _a, connect, settings, isAbsher, responseBody, payload, data;
+    var _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
             case 0:
-                connect = thunkApi.getState().connect;
+                _a = thunkApi.getState(), connect = _a.connect, settings = _a.settings;
                 isAbsher = connect.data.otpData.isAbsher;
                 responseBody = (isAbsher ? connect.data.nidData : connect.data.mobileData).responseBody;
                 payload = {
@@ -187,22 +195,24 @@ export var verifyAuthPassword = createAsyncThunk('verifyAuthPassword', function
                     remember_me: responseBody === null || responseBody === void 0 ? void 0 : responseBody.remember_me,
                     scopes: responseBody === null || responseBody === void 0 ? void 0 : responseBody.scopes,
                     step_name: CONNECT_STEP_NAMES.VERIFY_AUTH_PASSWORD,
-                    encryption_contract: []
+                    encryption_contract: ['data']
                 };
                 return [4, API.authService.verifyAuth(payload)];
             case 1:
-                data = (_a.sent()).data;
-                if (!data.errors)
+                data = (_d.sent()).data;
+                if (!data.errors) {
                     thunkApi.dispatch(handleNextScreenStep());
+                    (_c = (_b = settings.data.appConfig).onStepCompleted) === null || _c === void 0 ? void 0 : _c.call(_b, settings.data.activeScreen.name, { password: params.password });
+                }
                 return [2, { response: data, formData: params }];
         }
     });
 }); });
 export var updateLeadIndividual = createAsyncThunk('updateLeadIndividual', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, settings, connect, isAbsher, headers, payload, data;
-    var _b, _c, _d;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
+    var _b, _c, _d, _e, _f;
+    return __generator(this, function (_g) {
+        switch (_g.label) {
             case 0:
                 _a = thunkApi.getState(), settings = _a.settings, connect = _a.connect;
                 isAbsher = connect.data.otpData.isAbsher;
@@ -222,22 +232,31 @@ export var updateLeadIndividual = createAsyncThunk('updateLeadIndividual', funct
                             : undefined
                     },
                     step_name: CONNECT_STEP_NAMES.UPDATE_LEAD_INDIVIDUAL,
-                    encryption_contract: []
+                    encryption_contract: [
+                        'name.first',
+                        'name.middle',
+                        'name.last',
+                        'contact.email',
+                        'contact.phone.country_code',
+                        'contact.phone.number'
+                    ]
                 };
                 return [4, API.leadService.updateLead(payload, { headers: headers })];
             case 1:
-                data = (_e.sent()).data;
-                if (!data.errors)
+                data = (_g.sent()).data;
+                if (!data.errors) {
                     thunkApi.dispatch(handleNextScreenStep());
+                    (_f = (_e = settings.data.appConfig).onStepCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, settings.data.activeScreen.name, params);
+                }
                 return [2, { response: data, formData: params }];
         }
     });
 }); });
 export var updateLeadBrand = createAsyncThunk('updateLeadBrand', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, settings, connect, headers, payload, data;
-    var _b, _c, _d, _e, _f, _g;
-    return __generator(this, function (_h) {
-        switch (_h.label) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    return __generator(this, function (_k) {
+        switch (_k.label) {
             case 0:
                 _a = thunkApi.getState(), settings = _a.settings, connect = _a.connect;
                 headers = {
@@ -256,13 +275,15 @@ export var updateLeadBrand = createAsyncThunk('updateLeadBrand', function (param
                     },
                     terms_conditions_accepted: params.termAndConditionChecked,
                     step_name: CONNECT_STEP_NAMES.UPDATE_LEAD_MERCHANT,
-                    encryption_contract: []
+                    encryption_contract: ['brand.name.en', 'brand.name.ar', 'brand.name.zh']
                 };
                 return [4, API.leadService.updateLead(payload, { headers: headers })];
             case 1:
-                data = (_h.sent()).data;
-                if (!data.errors)
+                data = (_k.sent()).data;
+                if (!data.errors) {
                     thunkApi.dispatch(handleNextScreenStep());
+                    (_j = (_h = settings.data.appConfig).onStepCompleted) === null || _j === void 0 ? void 0 : _j.call(_h, settings.data.activeScreen.name, params);
+                }
                 return [2, { response: data, formData: params }];
         }
     });
@@ -315,9 +336,9 @@ export var checkBrandNameAvailability = createAsyncThunk('checkBrandNameAvailabi
 }); });
 export var updateLeadSuccess = createAsyncThunk('updateLeadSuccess', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, settings, connect, headers, payload, data;
-    var _b, _c, _d;
-    return __generator(this, function (_e) {
-        switch (_e.label) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    return __generator(this, function (_j) {
+        switch (_j.label) {
             case 0:
                 _a = thunkApi.getState(), settings = _a.settings, connect = _a.connect;
                 headers = {
@@ -326,11 +347,14 @@ export var updateLeadSuccess = createAsyncThunk('updateLeadSuccess', function (p
                 };
                 payload = {
                     step_name: CONNECT_STEP_NAMES.CONNECT_SUCCESS,
+                    email_url: EMAIL_PATH,
                     encryption_contract: []
                 };
                 return [4, API.leadService.updateLead(payload, { headers: headers })];
             case 1:
-                data = (_e.sent()).data;
+                data = (_j.sent()).data;
+                (_f = (_e = settings.data.appConfig).onStepCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, settings.data.activeScreen.name, params);
+                (_h = (_g = settings.data.appConfig).onFlowCompleted) === null || _h === void 0 ? void 0 : _h.call(_g, { data: data });
                 return [2, { response: data, formData: params }];
         }
     });
@@ -341,7 +365,6 @@ var initialState = {
     searchActive: false,
     data: {
         countries: [],
-        businessCountries: [],
         mobileData: {
             countryCode: defaultCountry,
             businessCountry: defaultCountry,
@@ -391,9 +414,10 @@ export var connectSlice = createSlice({
         builder
             .addCase(getCountries.fulfilled, function (state, action) {
             state.error = null;
-            var _a = action.payload, businessCountries = _a.businessCountries, countries = _a.countries;
-            state.data.businessCountries = businessCountries;
+            var _a = action.payload, countries = _a.countries, businessCountry = _a.businessCountry;
             state.data.countries = countries;
+            state.data.mobileData.businessCountry = businessCountry || defaultCountry;
+            state.data.mobileData.countryCode = businessCountry || defaultCountry;
         })
             .addCase(getCountries.pending, function (state) {
             state.error = null;

package/build/features/connect/Connect.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-import { AppInfo } from '../../@types';
-export interface ConnectLibProps {
-    appInfo: AppInfo;
-    publicKey: string;
+import { LibConfig } from '../../@types';
+export interface ConnectLibProps extends LibConfig {
 }
 export declare function ConnectLib(props: ConnectLibProps): JSX.Element;
 export declare function renderConnectLib(config: ConnectLibProps, elementId: string): void;

package/build/features/connect/Connect.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo, useEffect } from 'react';
 import { FeatureContainer } from '../shared/Containers';
-import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig } from '../../hooks';
+import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener } from '../../hooks';
 import { settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
@@ -23,13 +23,13 @@ import { reactElement } from '../../utils';
 import { CONNECT_SCREENS_NAVIGATION } from '../../constants';
 import { connectFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
-var Connect = memo(function (_a) {
-    var appInfo = _a.appInfo, publicKey = _a.publicKey;
+var Connect = memo(function (props) {
     var open = React.useState(true)[0];
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var data = useAppSelector(settingsSelector).data;
-    useAppConfig({ appInfo: appInfo, navigation: CONNECT_SCREENS_NAVIGATION, publicKey: publicKey });
+    useAppConfig(__assign({ navigation: CONNECT_SCREENS_NAVIGATION }, props));
+    useErrorListener();
     var activeScreen = data.activeScreen;
     useEffect(function () {
         dispatch(getCountries());

package/build/features/connect/screens/Individual/Email.js

@@ -14,7 +14,6 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
-import { keepEmailCharacters } from '../../../../utils';
 import { useController, useFormContext } from 'react-hook-form';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
@@ -35,8 +34,7 @@ var Email = function (_a) {
         dispatch(checkEmailAvailability(value));
     }, 500);
     var handleEmailChange = function (event) {
-        var value = keepEmailCharacters(event.target.value);
-        emailControl.field.onChange(value);
+        emailControl.field.onChange(event.target.value);
     };
     React.useEffect(function () {
         var isValid = emailValue && !error && emailValue.length > 3;

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

@@ -57,16 +57,14 @@ var Individual = function (_a) {
         if (error)
             dispatch(clearError());
     }, [methods.formState.isValid]);
+    var handleMenuListClick = function () {
+        listActive ? setListActive(false) : setListActive(true);
+    };
     React.useEffect(function () {
         var _a, _b;
         if (((_b = (_a = data.individualData) === null || _a === void 0 ? void 0 : _a.responseBody) === null || _b === void 0 ? void 0 : _b.is_available) === false)
             methods.setError('email', { message: 'tap_js_email_already_exist' });
-        if (searchActive)
-            methods.setError('email', { message: 'checking...' });
-    }, [(_d = data.individualData) === null || _d === void 0 ? void 0 : _d.responseBody, searchActive]);
-    var handleMenuListClick = function () {
-        listActive ? setListActive(false) : setListActive(true);
-    };
+    }, [(_d = data.individualData) === null || _d === void 0 ? void 0 : _d.responseBody]);
     var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email || !!error;
     var disabled = emailErrChecks || searchActive || !((_e = data.individualData.responseBody) === null || _e === void 0 ? void 0 : _e.is_available);
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, { show: !listActive }), _jsx(MobileNumber, { setMobileLength: setMobileLength, show: isAbsher, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: countriesCode }), _jsx(Email, { show: !listActive }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));

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

@@ -64,6 +64,8 @@ var BrandName = function (_a) {
     var t = useTranslation().t;
     var control = useFormContext().control;
     var brandControl = useController({ control: control, name: 'brandName' });
+    var brandNameValue = brandControl.field.value;
+    var error = (_b = brandControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
     var checkBrand = debounce(function (value) {
         dispatch(checkBrandNameAvailability(value));
     }, 500);
@@ -71,14 +73,15 @@ var BrandName = function (_a) {
         var target = _a.target;
         var value = removeAllOtherThanCharsNumbersAndSpace(target.value);
         brandControl.field.onChange(value);
-        if (!!value)
-            checkBrand(value);
     };
+    React.useEffect(function () {
+        var isValid = brandNameValue && !error && brandNameValue.length > 2;
+        if (isValid)
+            checkBrand(brandNameValue);
+    }, [brandNameValue, error]);
     var clearBrandName = function () {
         brandControl.field.onChange('');
     };
-    var brandNameValue = brandControl.field.value;
-    var error = (_b = brandControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
     return (_jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 3 } }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('signup_brand_name_label') }), _jsx(Tooltip, __assign({ title: t('brand_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), _jsx(Input, { onChange: handleBrandNameChange, value: brandNameValue, placeholder: t('signup_brand_name_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && brandNameValue ? _jsx(CheckIcon, {}) : brandNameValue && _jsx(ClearIcon, { onClick: clearBrandName }) })] })));
 };
 export default React.memo(BrandName);

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

@@ -27,8 +27,8 @@ import BrandName from './BrandName';
 import SocialMedia from './SocialMedia';
 import TAC from './TAC';
 var Merchant = function (_a) {
-    var _b;
-    var _c = useSelector(connectSelector), data = _c.data, loading = _c.loading, error = _c.error, searchActive = _c.searchActive;
+    var _b, _c, _d;
+    var _e = useSelector(connectSelector), data = _e.data, loading = _e.loading, error = _e.error, searchActive = _e.searchActive;
     var methods = useForm({
         resolver: yupResolver(MerchantValidationSchema),
         defaultValues: data.brandData,
@@ -49,10 +49,11 @@ var Merchant = function (_a) {
     }, [methods.formState.isValid]);
     React.useEffect(function () {
         var _a, _b;
-        if (((_b = (_a = data.brandData) === null || _a === void 0 ? void 0 : _a.responseBody) === null || _b === void 0 ? void 0 : _b.response_code) == '5')
+        if (((_b = (_a = data.brandData) === null || _a === void 0 ? void 0 : _a.responseBody) === null || _b === void 0 ? void 0 : _b.response_code) === '5')
             methods.setError('brandName', { message: 'Profile Name already exists' });
     }, [(_b = data.brandData) === null || _b === void 0 ? void 0 : _b.responseBody]);
-    var disabled = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error || searchActive;
+    var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
+    var disabled = brandErrChecks || searchActive || ((_d = (_c = data.brandData) === null || _c === void 0 ? void 0 : _c.responseBody) === null || _d === void 0 ? void 0 : _d.response_code) === '5';
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandName, {}), _jsx(SocialMedia, {}), _jsx(TAC, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(Merchant);

package/build/features/connect/screens/Mobile/BusinessCountry.d.ts

@@ -1,11 +1,6 @@
 import * as React from 'react';
-import { CountryCode } from '../../../../@types';
 interface BusinessCountryProps {
-    countries: Array<CountryCode>;
     show: boolean;
-    setMobileLength?: (length: number) => void;
-    onListOpen?: () => void;
-    onListClose?: () => void;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<BusinessCountryProps & React.RefAttributes<unknown>>>;
 export default _default;

package/build/features/connect/screens/Mobile/BusinessCountry.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
@@ -32,7 +32,6 @@ import CheckIcon from '@mui/icons-material/Check';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import Icon from '../../../../components/Icon';
 import Input from '../../../shared/Input';
-import SimpleList from '../../../../components/SimpleList';
 import { useLanguage } from '../../../../hooks';
 var CountryItemContainer = styled(Box)(function () { return ({
     display: 'flex'
@@ -62,32 +61,12 @@ var CountryIconStyled = styled(Icon)(function (_a) {
 });
 var BusinessCountry = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var countries = _a.countries, rest = __rest(_a, ["countries"]);
-    var _d = React.useState(countries), businessCountries = _d[0], setBusinessCountries = _d[1];
-    var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    var rest = __rest(_a, []);
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var control = useFormContext().control;
     var businessCountryControl = useController({ control: control, name: 'businessCountry' });
-    var onOpenCountrySelect = function (event) {
-    };
-    var onCloseCountrySelect = function () {
-        var _a;
-        setAnchorEl(null);
-        (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
-    };
-    var onSelectItem = function (country) {
-        onCloseCountrySelect();
-        businessCountryControl.field.onChange(country);
-    };
-    React.useEffect(function () {
-        if (businessCountries.length === 0) {
-            setBusinessCountries(countries);
-        }
-    }, [countries]);
     var businessCountry = businessCountryControl.field.value;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { marginBottom: '25px' } }, { children: [_jsx(Input, { label: t('signup_select_country'), readOnly: true, onClick: !!anchorEl ? onCloseCountrySelect : onOpenCountrySelect, startAdornment: _jsx(CountrySpanStyled, { children: _jsx(CountryIconStyled, { src: (businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.logo) || '' }) }), placeholder: t('ide_mobile_placeholder'), value: (isAr ? (_b = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _c === void 0 ? void 0 : _c.english) || '' }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: businessCountries, onSelectItem: onSelectItem, renderItem: function (item) {
-                            return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsx(CountryIconStyled, { src: item.logo, alt: item.iso3 }), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.idd_prefix) && _jsx(CheckIconStyled, {})] }));
-                        } }) }))] })) })));
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsx(ScreenContainer, __assign({ ref: ref, sx: { marginBottom: '25px' } }, { children: _jsx(Input, { sx: { cursor: 'auto' }, label: t('signup_select_country'), readOnly: true, startAdornment: _jsx(CountrySpanStyled, { children: _jsx(CountryIconStyled, { src: (businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.logo) || '' }) }), placeholder: t('ide_mobile_placeholder'), value: (isAr ? (_b = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _c === void 0 ? void 0 : _c.english) || '' }) })) })));
 });
 export default React.memo(BusinessCountry);

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

@@ -74,10 +74,9 @@ var ListType;
     ListType["CountryCodeList"] = "CountryCodeList";
 })(ListType || (ListType = {}));
 var Mobile = function (_a) {
-    var _b, _c;
-    var _d = useSelector(connectSelector), data = _d.data, loading = _d.loading, error = _d.error;
-    var _e = React.useState((_c = (_b = data.mobileData) === null || _b === void 0 ? void 0 : _b.countryCode) === null || _c === void 0 ? void 0 : _c.digits), mobileLength = _e[0], setMobileLength = _e[1];
-    var _f = React.useState(), listType = _f[0], setListType = _f[1];
+    var _b = useSelector(connectSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var _c = React.useState(data.mobileData.countryCode.digits), mobileLength = _c[0], setMobileLength = _c[1];
+    var _d = React.useState(), listType = _d[0], setListType = _d[1];
     var dispatch = useAppDispatch();
     var methods = useForm({
         resolver: yupResolver(PhoneValidationSchema(mobileLength)),
@@ -90,6 +89,17 @@ var Mobile = function (_a) {
     var handleMenuListClick = function (flag) {
         setListType(flag);
     };
+    React.useEffect(function () {
+        if (data.mobileData.countryCode.digits) {
+            setMobileLength(data.mobileData.countryCode.digits);
+        }
+        if (data.mobileData.countryCode) {
+            methods.setValue('countryCode', data.mobileData.countryCode);
+        }
+        if (data.mobileData.businessCountry) {
+            methods.setValue('businessCountry', data.mobileData.businessCountry);
+        }
+    }, [data.mobileData]);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
@@ -105,6 +115,6 @@ var Mobile = function (_a) {
     var listActive = isBusinessListActive || isCountryListActive;
     var isLoading = settingsStore.loading || loading;
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !listActive, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, { children: [_jsx(BusinessCountry, { show: !isCountryListActive, setMobileLength: setMobileLength, countries: data.businessCountries, onListOpen: function () { return handleMenuListClick(ListType.BusinessList); }, onListClose: function () { return handleMenuListClick(); } }), _jsx(MobileNumber, { show: !isBusinessListActive, setMobileLength: setMobileLength, countries: data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } })] }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ isAr: isAr, disabled: disabled, disableBack: true, loading: isLoading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ isAr: isAr, onClick: onAbsherButtonClicked }, { children: t('absher_button_label') }))] }))] })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !listActive, title: t('join_our_community'), description: t('ide_terms_and_conditions_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, { children: [_jsx(BusinessCountry, { show: !isCountryListActive }), _jsx(MobileNumber, { show: !isBusinessListActive, setMobileLength: setMobileLength, countries: data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } })] }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ isAr: isAr, disabled: disabled, disableBack: true, loading: isLoading, error: t(error || '') }, { children: t('next') })), _jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ disabled: loading, isAr: isAr, onClick: onAbsherButtonClicked }, { children: t('absher_button_label') }))] }))] })) }))] }));
 };
 export default React.memo(Mobile);

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

@@ -27,16 +27,17 @@ import Icon from '../../../components/Icon';
 import { styled } from '@mui/material/styles';
 import Loader from '../../../components/Loader';
 import { ICONS_NAMES } from '../../../constants';
-import ButtonGroup from '@mui/material/ButtonGroup';
 import Warning from '../../../components/Warning';
 import Collapse from '../../../components/Collapse';
+import Box from '@mui/material/Box';
+import Text from '../../../components/Text';
 var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
     var theme = _a.theme, isAr = _a.isAr;
     return ({
         width: theme.spacing(3),
         height: theme.spacing(3),
         transform: isAr ? 'scaleX(-1)' : 'scaleX(1)',
-        marginInlineEnd: theme.spacing(-0.75)
+        marginInlineEnd: theme.spacing(0.5)
     });
 });
 var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
@@ -45,39 +46,39 @@ var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return
         width: theme.spacing(3),
         height: theme.spacing(3),
         transform: isAr ? 'scaleX(1)' : 'scaleX(-1)',
-        marginInlineStart: theme.spacing(0.5)
+        marginInlineStart: theme.spacing(-1)
     });
 });
-var ButtonBoxStyled = styled(ButtonGroup, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
-    var theme = _a.theme, isAr = _a.isAr;
+var ButtonBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
     return ({
-        width: '100%',
         margin: theme.spacing(0, 2.5, 2.5, 2.5),
-        paddingInlineEnd: theme.spacing(5),
-        '& .MuiButtonGroup-grouped:not(:first-of-type)': {
-            borderTopRightRadius: theme.spacing(4.1),
-            borderBottomRightRadius: theme.spacing(4.1),
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0
-        },
-        '& .MuiButtonGroup-grouped:not(:last-of-type)': {
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-            borderTopLeftRadius: theme.spacing(4.1),
-            borderBottomLeftRadius: theme.spacing(4.1)
-        }
+        marginBlockStart: theme.spacing(5),
+        display: 'flex'
     });
 });
-var ButtonStyled = styled(Button)(function (_a) {
-    var theme = _a.theme;
+var ButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'isBack'; } })(function (_a) {
+    var theme = _a.theme, isBack = _a.isBack;
+    return ({
+        paddingInlineStart: theme.spacing(2.5),
+        marginInlineStart: isBack ? theme.spacing(-5) : theme.spacing(0)
+    });
+});
+var BackButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
+    var theme = _a.theme, isAr = _a.isAr;
     return ({
-        paddingInlineStart: theme.spacing(0.75)
+        minWidth: theme.spacing(5),
+        paddingInlineStart: theme.spacing(2.5),
+        width: '10%',
+        zIndex: 1,
+        borderRadius: isAr ? theme.spacing(0, 4.75, 4.75, 0) : theme.spacing(4.75, 0, 0, 4.75)
     });
 });
 export default function CustomButton(_a) {
     var children = _a.children, disabled = _a.disabled, isAr = _a.isAr, loading = _a.loading, disableBack = _a.disableBack, onBackClicked = _a.onBackClicked, error = _a.error, props = __rest(_a, ["children", "disabled", "isAr", "loading", "disableBack", "onBackClicked", "error"]);
-    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, __assign({ sx: { mt: 5 }, isAr: isAr, disableElevation: true, disableRipple: true, disableFocusRipple: true }, { children: [!disableBack && !loading && (_jsx(ButtonStyled, __assign({ onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); }, sx: { width: '10%' }, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props))), _jsx(ButtonStyled, __assign({ disabled: disabled || loading, type: 'submit', endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }), startIcon: _jsx(Loader, { style: {
+    var isBackEnabled = !disableBack && !loading;
+    return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, { children: [isBackEnabled && (_jsx(BackButtonStyled, __assign({ onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); }, isAr: isAr, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props))), _jsx(ButtonStyled, __assign({ disabled: disabled || loading, type: 'submit', isBack: isBackEnabled, endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }), startIcon: _jsx(Loader, { style: {
                                 visibility: disableBack && !loading ? 'hidden' : loading ? 'visible' : 'hidden',
                                 display: !disableBack && !loading ? 'none' : 'block'
-                            }, innerColor: 'white', outerColor: 'white', size: 30, toggleAnimation: !!loading }) }, props, { children: children }))] }))] }));
+                            }, innerColor: 'white', outerColor: 'white', size: 30, toggleAnimation: !!loading }) }, props, { children: _jsxs(Text, __assign({ sx: { marginInlineEnd: isBackEnabled ? '-24px' : '20px' } }, { children: [" ", children] })) }))] })] }));
 }

package/build/hooks/index.d.ts

@@ -7,3 +7,4 @@ export * from './useEventListener';
 export * from './useLanguage';
 export * from './useContainerDimensions';
 export * from './useAppConfig';
+export * from './useErrorListener';

package/build/hooks/index.js

@@ -7,3 +7,4 @@ export * from './useEventListener';
 export * from './useLanguage';
 export * from './useContainerDimensions';
 export * from './useAppConfig';
+export * from './useErrorListener';

package/build/hooks/useAppConfig.d.ts

@@ -1,10 +1,8 @@
-import { AppInfo, ScreenStepNavigation } from '../@types';
-interface AppConfigProps {
-    appInfo: AppInfo;
+import { LibConfig, ScreenStepNavigation } from '../@types';
+interface AppConfigProps extends LibConfig {
     navigation: ScreenStepNavigation[];
-    publicKey?: string;
 }
-export declare const useAppConfig: ({ appInfo, navigation, publicKey }: AppConfigProps) => {
+export declare const useAppConfig: ({ appInfo, navigation, publicKey, ...rest }: AppConfigProps) => {
     loading: boolean;
     error: string | null;
 };

package/build/hooks/useAppConfig.js

@@ -1,9 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { useEffect } from 'react';
-import { handleActiveFlowScreens, settingsSelector, getClientIp, getBrowserFingerPrint, getOperator } from '../app/settings';
+import { handleActiveFlowScreens, settingsSelector, getClientIp, getBrowserFingerPrint, getOperator, handleSetAppConfig, handleLanguage } from '../app/settings';
 import { useAppDispatch } from './useAppDispatch';
 import { useAppSelector } from './useAppSelector';
 export var useAppConfig = function (_a) {
-    var appInfo = _a.appInfo, navigation = _a.navigation, publicKey = _a.publicKey;
+    var appInfo = _a.appInfo, navigation = _a.navigation, publicKey = _a.publicKey, rest = __rest(_a, ["appInfo", "navigation", "publicKey"]);
     var dispatch = useAppDispatch();
     var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, loading = _b.loading;
     var deviceInfo = data.deviceInfo, language = data.language;
@@ -12,6 +34,7 @@ export var useAppConfig = function (_a) {
         dispatch(handleActiveFlowScreens(navigation));
         dispatch(getClientIp());
         dispatch(getBrowserFingerPrint(appInfo));
+        dispatch(handleSetAppConfig(__assign({ appInfo: appInfo, publicKey: publicKey }, rest)));
     }, []);
     var handleGetOperator = function () {
         var _a, _b;
@@ -25,6 +48,10 @@ export var useAppConfig = function (_a) {
         };
         dispatch(getOperator(payload));
     };
+    useEffect(function () {
+        if (data.appConfig.language)
+            dispatch(handleLanguage(data.appConfig.language));
+    }, [data.appConfig.language]);
     useEffect(function () {
         if (device.os.name && browser.name && publicKey) {
             handleGetOperator();

package/build/hooks/useErrorListener.d.ts

@@ -0,0 +1 @@
+export declare const useErrorListener: () => void;

package/build/hooks/useErrorListener.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { settingsSelector } from '../app/settings';
+import { useAppSelector } from './useAppSelector';
+import { connectSelector } from '../features/app/connect/connectStore';
+export var useErrorListener = function () {
+    var settings = useAppSelector(settingsSelector);
+    var connect = useAppSelector(connectSelector);
+    useEffect(function () {
+        var _a, _b;
+        if (connect.error || settings.error) {
+            (_b = (_a = settings.data.appConfig) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, settings.error || connect.error);
+        }
+    }, [connect.error, settings.error]);
+    useEffect(function () {
+        var _a, _b;
+        if (!settings.error)
+            (_b = (_a = settings.data.appConfig).onReady) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [settings.error]);
+};

package/build/utils/index.d.ts

@@ -6,3 +6,4 @@ export * from './html';
 export * from './validation';
 export * from './string';
 export * from './device';
+export * from './rsa';

package/build/utils/index.js

@@ -6,3 +6,4 @@ export * from './html';
 export * from './validation';
 export * from './string';
 export * from './device';
+export * from './rsa';

package/build/utils/rsa.d.ts

@@ -0,0 +1,2 @@
+export declare const encryptObject: (data: unknown) => string | false;
+export declare const encryptString: (string: string) => string;

package/build/utils/rsa.js

@@ -0,0 +1,19 @@
+import { JSEncrypt } from 'jsencrypt';
+import { RSA_FRONTEND_MW_PUBLIC_KEY } from '../constants';
+var rsa = new JSEncrypt();
+rsa.setPublicKey(RSA_FRONTEND_MW_PUBLIC_KEY);
+export var encryptObject = function (data) {
+    if (typeof data !== 'object')
+        throw new Error('data should be from type object');
+    var obj2Str = JSON.stringify(data);
+    var encrypted = rsa.encrypt(obj2Str);
+    return encrypted;
+};
+export var encryptString = function (string) {
+    if (typeof string !== 'string')
+        throw new Error('string should be from type string');
+    var encrypted = rsa.encrypt(string);
+    if (!encrypted)
+        throw new Error('encryption data reached max allowed length');
+    return encrypted;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "1.0.23",
+	"version": "1.0.26",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",
@@ -35,6 +35,7 @@
 		"@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",
@@ -58,7 +59,6 @@
 		"fork-ts-checker-webpack-plugin": "^7.2.12",
 		"html-loader": "^3.1.2",
 		"html-webpack-plugin": "^5.5.0",
-		"@types/moment-hijri": "^2.1.0",
 		"husky": "^8.0.1",
 		"lint-staged": "^13.0.3",
 		"mini-css-extract-plugin": "^2.6.1",
@@ -87,6 +87,7 @@
 		"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",