@tap-payments/auth-jsconnect 2.6.97-test → 2.6.100-test

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

@@ -147,9 +147,9 @@ export declare type BusinessDataFormValues = {
 export declare type AuthenticationListFormValues = {
     brandInfo?: BrandInfo;
     entityInfo?: EntityLicenseAuth;
-    merchantInfo?: AuthMerchantInfo;
     licenseNumber?: string;
     legalName?: string;
+    licenseType?: string;
 };
 export declare type AuthMerchantFormValues = {
     merchantInfo?: AuthMerchantInfo;

package/build/api/entity.d.ts

@@ -127,7 +127,10 @@ export declare type CreateEntityBody = {
             en: string;
             ar: string;
         };
-        license_number: string;
+        license: {
+            number: string;
+            type: string;
+        };
         country: string;
         is_licensed?: boolean;
     };

package/build/app/settings.d.ts

@@ -1,5 +1,5 @@
 import { RootState } from './store';
-import { ActionState, LanguageMode, SharedState, ThemeMode, ScreenStepNavigation, DeviceInfo, LibConfig, CountryCode, MerchantInfo, ConfigExpressTokenParams, BusinessCountryInfo } from '../@types';
+import { ActionState, LanguageMode, SharedState, ThemeMode, ScreenStepNavigation, DeviceInfo, LibConfig, CountryCode, MerchantInfo, ConfigExpressTokenParams, BusinessCountryInfo, LocalProps } from '../@types';
 interface SettingParams {
     disableCountries?: boolean;
     disableLocale?: boolean;
@@ -33,6 +33,7 @@ export interface SettingsData {
     authId?: string;
     ipCountry: CountryCode;
     businessCountries: Array<BusinessCountryInfo>;
+    locale?: LocalProps;
 }
 export interface SettingsState extends SharedState<SettingsData> {
     internalLoading: boolean;

package/build/app/settings.js

@@ -325,8 +325,11 @@ export var settingsSlice = createSlice({
         },
         handleSetCountryByIso2: function (state, action) {
             var country = findCountryByIso2(state.data.countries, action.payload);
-            if (country)
+            if (country) {
+                if (state.data.locale && country.iso2)
+                    updateLocale(state.data.locale, country.iso2);
                 state.data.businessCountry = country;
+            }
         }
     },
     extraReducers: function (builder) {
@@ -340,6 +343,7 @@ export var settingsSlice = createSlice({
             state.data.countries = countries;
             state.data.businessCountry = businessCountry;
             state.data.ipCountry = ipCountry;
+            state.data.locale = locale;
             state.data.deviceInfo = deviceInfo;
             state.data.isValidOperator = isValidOperator;
             if (merchant)

package/build/constants/app.js

@@ -264,9 +264,21 @@ export var AUTH_SCREENS_NAVIGATION = [
     },
     {
         name: 'AUTH_AUTHENTICATION_LIST_STEP',
-        next: '',
+        next: ['AUTH_MERCHANT_LIST_STEP', 'AUTH_ACCOUNT_CREATED_STEP'],
         prev: ['AUTH_MOBILE_STEP', 'AUTH_NID_STEP', 'AUTH_CIVIL_ID_STEP'],
         order: 3
+    },
+    {
+        name: 'AUTH_ACCOUNT_CREATED_STEP',
+        next: '',
+        prev: 'AUTH_AUTHENTICATION_LIST_STEP',
+        order: 4
+    },
+    {
+        name: 'AUTH_MERCHANT_LIST_STEP',
+        next: '',
+        prev: 'AUTH_AUTHENTICATION_LIST_STEP',
+        order: 4
     }
 ];
 export var BUSINESS_SCREENS_NAVIGATION = [

package/build/features/app/auth/authStore.d.ts

@@ -1,5 +1,5 @@
 import { RootState } from '../../../app/store';
-import { ActionState, AuthForType, AuthenticationListFormValues, CivilFormValues, CountryCode, FlowsTypes, MobileFormValues, NIDFormValues, OTPFormValues, SharedState } from '../../../@types';
+import { ActionState, AuthForType, AuthMerchantFormValues, AuthenticationListFormValues, CivilFormValues, CountryCode, FlowsTypes, MobileFormValues, NIDFormValues, OTPFormValues, SharedState } from '../../../@types';
 export declare const updateBusinessCountry: import("@reduxjs/toolkit").AsyncThunk<any, string, {}>;
 export declare const retrieveLeadIdentityByIdAsync: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
@@ -35,11 +35,16 @@ export declare const checkAccountAvailability: import("@reduxjs/toolkit").AsyncT
     brandList: any;
     entityList: any;
 }, void, {}>;
-export declare const getMerchantList: import("@reduxjs/toolkit").AsyncThunk<any, {
-    entityId: string;
-    brandId: string;
-}, {}>;
-export declare const confirmInfo: import("@reduxjs/toolkit").AsyncThunk<void, AuthenticationListFormValues & {
+export declare const getMerchantList: import("@reduxjs/toolkit").AsyncThunk<{
+    list: any;
+    brandInfo: import("../../../@types").BrandInfo | undefined;
+    entityInfo: import("../../../@types").EntityLicenseAuth | undefined;
+}, AuthenticationListFormValues, {}>;
+export declare const createEntity: import("@reduxjs/toolkit").AsyncThunk<{
+    data: any;
+    formData: AuthenticationListFormValues;
+}, AuthenticationListFormValues, {}>;
+export declare const confirmInfo: import("@reduxjs/toolkit").AsyncThunk<void, AuthenticationListFormValues & AuthMerchantFormValues & {
     authId?: string | undefined;
 }, {}>;
 export declare const onSignUp: import("@reduxjs/toolkit").AsyncThunk<void, void, {}>;
@@ -57,11 +62,10 @@ export interface authData {
     isStartFromBusinessCountry?: boolean;
     flowName: FlowsTypes;
     authenticationData: AuthenticationListFormValues;
+    authMerchantData: AuthMerchantFormValues;
 }
 export interface AuthState extends SharedState<authData & ResponseData> {
     customLoading?: boolean;
-    merchantLoading?: boolean;
-    terminalLoading?: boolean;
 }
 export declare const authSlice: import("@reduxjs/toolkit").Slice<AuthState, {
     setLeadId(state: AuthState, action: ActionState<string>): void;
@@ -70,8 +74,9 @@ export declare const authSlice: import("@reduxjs/toolkit").Slice<AuthState, {
     storeIsStartFromBusinessCountry: (state: AuthState, action: ActionState<boolean>) => void;
     resetStore: (state: AuthState) => void;
     resetOTPValue: (state: AuthState) => void;
+    resetAuthenticationScreen: (state: AuthState) => void;
 }, "auth/store">;
-export declare const clearError: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, resetStore: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, setMobileCountryCode: import("@reduxjs/toolkit").ActionCreatorWithPayload<CountryCode, string>, setLeadId: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, resetOTPValue: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, storeIsStartFromBusinessCountry: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
+export declare const clearError: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, resetStore: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, setMobileCountryCode: import("@reduxjs/toolkit").ActionCreatorWithPayload<CountryCode, string>, setLeadId: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, resetOTPValue: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, storeIsStartFromBusinessCountry: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>, resetAuthenticationScreen: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>;
 declare const _default: import("redux").Reducer<AuthState, import("redux").AnyAction>;
 export default _default;
 export declare const authSelector: (state: RootState) => AuthState;

package/build/features/app/auth/authStore.js

@@ -45,10 +45,19 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var _a;
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { AuthForType, FlowsTypes } from '../../../@types';
-import { AUTH_STEP_NAMES, IDENTIFICATION_TYPE, defaultCountry } from '../../../constants';
+import { ADD_NEW_ENTITY, AUTH_STEP_NAMES, IDENTIFICATION_TYPE, defaultCountry } from '../../../constants';
 import API from '../../../api';
 import { handleCurrentActiveScreen, handleNextScreenStep, handleOpen, handleSetCountryByIso2 } from '../../../app/settings';
 import { findCountryByIddPrefix, isSA, openConnect, sleep } from '../../../utils';
@@ -437,22 +446,60 @@ export var checkAccountAvailability = createAsyncThunk('auth/checkAccountAvailab
         }
     });
 }); });
-export var getMerchantList = createAsyncThunk('auth/getMerchantList', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var settings, payload, merchants;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+export var getMerchantList = createAsyncThunk('auth/getMerchantList', function (_a, thunkApi) {
+    var brandInfo = _a.brandInfo, entityInfo = _a.entityInfo;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var settings, payload, merchants, list;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    settings = thunkApi.getState().settings;
+                    payload = {
+                        business_entity_id: (entityInfo === null || entityInfo === void 0 ? void 0 : entityInfo.id) || '',
+                        brand_id: (brandInfo === null || brandInfo === void 0 ? void 0 : brandInfo.id) || '',
+                        create_if_not_present: true,
+                        platforms: settings.data.appConfig.platforms
+                    };
+                    return [4, API.entityService.getMerchantListUsingEntityId(payload)];
+                case 1:
+                    merchants = (_b.sent()).merchants;
+                    list = merchants || [];
+                    if ((list === null || list === void 0 ? void 0 : list.length) > 1) {
+                        thunkApi.dispatch(handleNextScreenStep('AUTH_MERCHANT_LIST_STEP'));
+                        return [2, { list: list, brandInfo: brandInfo, entityInfo: entityInfo }];
+                    }
+                    sleep(50).then(function () { return thunkApi.dispatch(handleNextScreenStep('AUTH_ACCOUNT_CREATED_STEP')); });
+                    return [2, { list: list, brandInfo: brandInfo, entityInfo: entityInfo }];
+            }
+        });
+    });
+});
+export var createEntity = createAsyncThunk('auth/createEntity', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
+    var settings, brandInfo, legalName, licenseNumber, licenseType, body, data;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
             case 0:
                 settings = thunkApi.getState().settings;
-                payload = {
-                    business_entity_id: params.entityId,
-                    brand_id: params.brandId,
-                    create_if_not_present: true,
-                    platforms: settings.data.appConfig.platforms
+                brandInfo = params.brandInfo, legalName = params.legalName, licenseNumber = params.licenseNumber, licenseType = params.licenseType;
+                body = {
+                    business_id: (brandInfo === null || brandInfo === void 0 ? void 0 : brandInfo.business_id) || '',
+                    entity: {
+                        legal_name: {
+                            en: legalName || '',
+                            ar: legalName || ''
+                        },
+                        license: {
+                            number: licenseNumber || '',
+                            type: licenseType || ''
+                        },
+                        country: (_a = settings.data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2
+                    }
                 };
-                return [4, API.entityService.getMerchantListUsingEntityId(payload)];
+                return [4, API.entityService.createEntity(body)];
             case 1:
-                merchants = (_a.sent()).merchants;
-                return [2, merchants || []];
+                data = _b.sent();
+                return [2, { data: data, formData: params }];
         }
     });
 }); });
@@ -551,7 +598,9 @@ var initialState = {
         },
         authenticationData: {
             brandInfo: undefined,
-            entityInfo: undefined,
+            entityInfo: undefined
+        },
+        authMerchantData: {
             merchantInfo: undefined
         }
     }
@@ -577,6 +626,9 @@ export var authSlice = createSlice({
         },
         resetOTPValue: function (state) {
             state.data.otpData.otp = '';
+        },
+        resetAuthenticationScreen: function (state) {
+            state.data.authenticationData = __assign(__assign({}, state.data.authenticationData), initialState.data.authenticationData);
         }
     },
     extraReducers: function (builder) {
@@ -732,33 +784,35 @@ export var authSlice = createSlice({
             state.error = null;
         })
             .addCase(checkAccountAvailability.fulfilled, function (state, action) {
+            state.error = null;
             state.loading = false;
             var _a = action.payload, brandList = _a.brandList, entityList = _a.entityList;
+            var eList = __spreadArray(__spreadArray([], entityList, true), [ADD_NEW_ENTITY], false);
             if (brandList === null || brandList === void 0 ? void 0 : brandList.length)
                 state.data.authenticationData.brandInfo = brandList[0];
-            if (entityList === null || entityList === void 0 ? void 0 : entityList.length)
-                state.data.authenticationData.entityInfo = entityList[0];
-            state.data.responseData = __assign(__assign({}, state.data.responseData), { brandList: brandList, entityList: entityList });
+            state.data.responseData = __assign(__assign({}, state.data.responseData), { brandList: brandList, entityList: eList });
         })
             .addCase(checkAccountAvailability.rejected, function (state, action) {
             state.loading = false;
             state.error = action.error.message;
         })
             .addCase(getMerchantList.pending, function (state) {
-            state.merchantLoading = true;
+            state.loading = true;
             state.error = null;
         })
             .addCase(getMerchantList.fulfilled, function (state, action) {
-            state.merchantLoading = false;
+            state.loading = false;
             state.error = null;
-            var merchantList = action.payload;
-            if (merchantList === null || merchantList === void 0 ? void 0 : merchantList.length) {
-                state.data.authenticationData.merchantInfo = merchantList[0];
+            var _a = action.payload, list = _a.list, brandInfo = _a.brandInfo, entityInfo = _a.entityInfo;
+            state.data.authenticationData.brandInfo = brandInfo;
+            state.data.authenticationData.entityInfo = entityInfo;
+            if (list === null || list === void 0 ? void 0 : list.length) {
+                state.data.authMerchantData.merchantInfo = list[0];
             }
-            state.data.responseData = __assign(__assign({}, state.data.responseData), { merchantList: merchantList });
+            state.data.responseData = __assign(__assign({}, state.data.responseData), { merchantList: list });
         })
             .addCase(getMerchantList.rejected, function (state, action) {
-            state.merchantLoading = false;
+            state.loading = false;
             state.error = action.error.message;
         })
             .addCase(confirmInfo.pending, function (state) {
@@ -784,9 +838,29 @@ export var authSlice = createSlice({
             .addCase(onSignUp.rejected, function (state, action) {
             state.loading = false;
             state.error = action.error.message;
+        })
+            .addCase(createEntity.pending, function (state) {
+            state.loading = true;
+            state.error = null;
+        })
+            .addCase(createEntity.rejected, function (state, action) {
+            state.loading = false;
+            state.error = action.error.message;
+        })
+            .addCase(createEntity.fulfilled, function (state, action) {
+            state.loading = false;
+            state.error = null;
+            var data = action.payload.data;
+            var entityList = (state.data.responseData || {}).entityList;
+            if (data === null || data === void 0 ? void 0 : data.entity) {
+                var entity = __assign(__assign({}, data.entity), { business_id: data === null || data === void 0 ? void 0 : data.business_id });
+                var list = __spreadArray([entity], entityList, true);
+                state.data.authenticationData.entityInfo = list[0];
+                state.data.responseData = __assign(__assign({}, state.data.responseData), { entityData: data, entityList: list });
+            }
         });
     }
 });
-export var clearError = (_a = authSlice.actions, _a.clearError), resetStore = _a.resetStore, setMobileCountryCode = _a.setMobileCountryCode, setLeadId = _a.setLeadId, resetOTPValue = _a.resetOTPValue, storeIsStartFromBusinessCountry = _a.storeIsStartFromBusinessCountry;
+export var clearError = (_a = authSlice.actions, _a.clearError), resetStore = _a.resetStore, setMobileCountryCode = _a.setMobileCountryCode, setLeadId = _a.setLeadId, resetOTPValue = _a.resetOTPValue, storeIsStartFromBusinessCountry = _a.storeIsStartFromBusinessCountry, resetAuthenticationScreen = _a.resetAuthenticationScreen;
 export default authSlice.reducer;
 export var authSelector = function (state) { return state.auth; };

package/build/features/app/connectExpress/connectExpressStore.d.ts

@@ -108,7 +108,7 @@ export declare const updateLeadBusinessDataAsync: import("@reduxjs/toolkit").Asy
     response: any;
     formData: BusinessDataFormValues;
 }, AsyncThunkParams<BusinessDataFormValues>, {}>;
-export declare const confirmInfo: import("@reduxjs/toolkit").AsyncThunk<void, AuthenticationListFormValues, {}>;
+export declare const confirmInfo: import("@reduxjs/toolkit").AsyncThunk<void, AuthenticationListFormValues & AuthMerchantFormValues, {}>;
 export declare const onCloseCompleteAsync: import("@reduxjs/toolkit").AsyncThunk<void, void, {}>;
 interface ResponseData {
     responseData?: Record<string, any>;

package/build/features/app/connectExpress/connectExpressStore.js

@@ -899,13 +899,13 @@ export var createAccountAsync = createAsyncThunk('connectExpress/createAccountAs
     });
 }); });
 export var createEntity = createAsyncThunk('connectExpress/createEntity', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var settings, brandInfo, legalName, licenseNumber, body, data;
+    var settings, brandInfo, legalName, licenseNumber, licenseType, body, data;
     var _a;
     return __generator(this, function (_b) {
         switch (_b.label) {
             case 0:
                 settings = thunkApi.getState().settings;
-                brandInfo = params.brandInfo, legalName = params.legalName, licenseNumber = params.licenseNumber;
+                brandInfo = params.brandInfo, legalName = params.legalName, licenseNumber = params.licenseNumber, licenseType = params.licenseType;
                 body = {
                     business_id: (brandInfo === null || brandInfo === void 0 ? void 0 : brandInfo.business_id) || '',
                     entity: {
@@ -913,9 +913,11 @@ export var createEntity = createAsyncThunk('connectExpress/createEntity', functi
                             en: legalName || '',
                             ar: legalName || ''
                         },
-                        license_number: licenseNumber || '',
-                        country: (_a = settings.data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2,
-                        is_licensed: undefined
+                        license: {
+                            number: licenseNumber || '',
+                            type: licenseType || ''
+                        },
+                        country: (_a = settings.data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2
                     }
                 };
                 return [4, API.entityService.createEntity(body)];

package/build/features/auth/screens/AccountCreatedLoader/AccountCreatedLoader.d.ts

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

package/build/features/auth/screens/AccountCreatedLoader/AccountCreatedLoader.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { isNetworkError } from '../../../../utils';
+import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
+import { confirmInfo, authSelector } from '../../../app/auth/authStore';
+import Button from '../../../shared/Button';
+import DataLoading from '../../../shared/DataLoading';
+var AccountCreatedLoader = function (_a) {
+    var dispatch = useAppDispatch();
+    var isAr = useLanguage().isAr;
+    var t = useTranslation().t;
+    var _b = useAppSelector(authSelector), error = _b.error, loading = _b.loading, data = _b.data;
+    var _c = data.authenticationData, brandInfo = _c.brandInfo, entityInfo = _c.entityInfo;
+    var merchantInfo = data.authMerchantData.merchantInfo;
+    React.useEffect(function () {
+        dispatch(confirmInfo({ entityInfo: entityInfo, brandInfo: brandInfo, merchantInfo: merchantInfo }));
+    }, []);
+    var onReTry = function () {
+        dispatch(confirmInfo({ entityInfo: entityInfo, brandInfo: brandInfo, merchantInfo: merchantInfo }));
+    };
+    var isNE = React.useMemo(function () { return isNetworkError(error); }, [error]);
+    return (_jsx(DataLoading, __assign({ error: error, title: 'account_already_created', hideSubtitle: true }, { children: isNE && (_jsx(Button, __assign({ onClick: onReTry, disableBack: true, isAr: isAr, loading: loading }, { children: t('try_again') }))) })));
+};
+export default React.memo(AccountCreatedLoader);

package/build/features/auth/screens/AccountCreatedLoader/index.d.ts

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

package/build/features/auth/screens/AccountCreatedLoader/index.js

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

package/build/features/auth/screens/AuthMerchant/AuthMerchant.d.ts

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

package/build/features/auth/screens/AuthMerchant/AuthMerchant.js

@@ -0,0 +1,73 @@
+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 * as React from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import Collapse from '@mui/material/Collapse';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { handlePrevScreenStep } from '../../../../app/settings';
+import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
+import Form from '../../../../components/Form';
+import { ScreenContainer } from '../../../shared/Containers';
+import Button from '../../../shared/Button';
+import { clearError, authSelector, confirmInfo } from '../../../app/auth/authStore';
+import { useLanguage } from '../../../../hooks';
+import { AuthMerchantValidationSchema } from './validation';
+import MerchantList from './MerchantList';
+var AuthMerchant = function (_a) {
+    var _b = useAppSelector(authSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var _c = data.authenticationData, brandInfo = _c.brandInfo, entityInfo = _c.entityInfo;
+    var merchantInfo = data.authMerchantData.merchantInfo;
+    var _d = React.useState(false), listActive = _d[0], setListActive = _d[1];
+    var merchantList = (data.responseData || {}).merchantList;
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Authentication Flow',
+            event_action: 'Authentication Merchant List Step'
+        });
+    }, []);
+    var methods = useForm({
+        resolver: yupResolver(AuthMerchantValidationSchema),
+        defaultValues: {
+            merchantInfo: merchantInfo
+        },
+        mode: 'onChange'
+    });
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var dispatch = useAppDispatch();
+    var onSubmit = function (formData) {
+        dispatch(confirmInfo(__assign({ brandInfo: brandInfo, entityInfo: entityInfo }, deepCopy(formData))));
+    };
+    var onBack = function () {
+        dispatch(handlePrevScreenStep());
+    };
+    React.useEffect(function () {
+        if (merchantInfo && !methods.getValues('merchantInfo'))
+            methods.setValue('merchantInfo', merchantInfo, { shouldValidate: true });
+    }, [merchantInfo]);
+    React.useEffect(function () {
+        if (error)
+            dispatch(clearError());
+    }, [methods.formState.isValid]);
+    var disabled = !methods.formState.isValid;
+    var handleMenuClick = function (flag) {
+        if (error)
+            dispatch(clearError());
+        setListActive(flag);
+    };
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(MerchantList, { list: merchantList || [], onListOpen: function () { return handleMenuClick(true); }, onListClose: function () { return handleMenuClick(false); } }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('confirm') })) }))] })) })) }));
+};
+export default React.memo(AuthMerchant);

package/build/features/auth/screens/{AuthenticationList → AuthMerchant}/MerchantList.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { AuthMerchantInfo } from '../../../../@types';
 interface MerchantListProps {
-    show: boolean;
+    list: Array<AuthMerchantInfo>;
     onListOpen?: () => void;
     onListClose?: () => void;
     readOnly?: boolean;

package/build/features/auth/screens/AuthMerchant/MerchantList.js

@@ -0,0 +1,64 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useController, useFormContext } from 'react-hook-form';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Collapse from '../../../../components/Collapse';
+import Text from '../../../../components/Text';
+import SimpleList from '../../../../components/SimpleList';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import InputSelect from '../../../shared/InputSelect';
+import { EndAdornmentExpanded } from '../../../shared/EndAdornment';
+import CheckIcon from '../../../shared/CheckIcon';
+var MerchantContainer = styled(Box)(function () { return ({
+    display: 'flex'
+}); });
+var MerchantNameText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
+    var theme = _a.theme, isSelected = _a.isSelected;
+    return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
+});
+var MerchantList = React.forwardRef(function (_a, ref) {
+    var _b;
+    var list = _a.list, onListOpen = _a.onListOpen, onListClose = _a.onListClose, readOnly = _a.readOnly, isVerified = _a.isVerified;
+    var _c = React.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
+    var t = useTranslation().t;
+    var _d = useFormContext(), control = _d.control, getValues = _d.getValues;
+    var merchantInfoControl = useController({ control: control, name: 'merchantInfo' });
+    var merchantValue = merchantInfoControl.field.value;
+    var error = (_b = merchantInfoControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    var onOpenMerchantSelect = function (event) {
+        if (readOnly)
+            return;
+        setAnchorEl(event.currentTarget);
+        onListOpen === null || onListOpen === void 0 ? void 0 : onListOpen();
+    };
+    var onCloseMerchantSelect = function () {
+        setAnchorEl(null);
+        onListClose === null || onListClose === void 0 ? void 0 : onListClose();
+    };
+    var onSelectItem = function (merchant) {
+        onCloseMerchantSelect();
+        merchantInfoControl.field.onChange(merchant);
+    };
+    var getName = function (merchant) {
+        if (!merchant)
+            return '';
+        return merchant.display_name;
+    };
+    return (_jsxs(ScreenContainer, __assign({ ref: ref, sx: { mt: 2.5, mb: 2.5 } }, { children: [_jsx(InputSelect, { label: t('select_merchant_label'), readOnly: readOnly, placeholder: t('select_merchant_placeholder'), value: getName(getValues('merchantInfo')) || '', warningMessage: error && t(error), onClick: !!anchorEl ? function () { return onCloseMerchantSelect(); } : onOpenMerchantSelect, endAdornment: _jsx(EndAdornmentExpanded, { anchorEl: anchorEl, isVerified: isVerified }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { list: list || [], onSelectItem: onSelectItem, renderItem: function (item) {
+                        return (_jsxs(_Fragment, { children: [_jsx(MerchantContainer, { children: _jsx(MerchantNameText, __assign({ isSelected: item.id === (merchantValue === null || merchantValue === void 0 ? void 0 : merchantValue.id) }, { children: getName(item) })) }), item.id === (merchantValue === null || merchantValue === void 0 ? void 0 : merchantValue.id) && _jsx(CheckIcon, { isVerified: isVerified })] }));
+                    } }) }))] })));
+});
+export default React.memo(MerchantList);

package/build/features/auth/screens/AuthMerchant/index.d.ts

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

package/build/features/auth/screens/AuthMerchant/index.js

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

package/build/features/auth/screens/AuthMerchant/validation.d.ts

@@ -0,0 +1,8 @@
+import * as yup from 'yup';
+export declare const AuthMerchantValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    merchantInfo: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
+}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    merchantInfo: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
+}>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    merchantInfo: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
+}>>>;

package/build/features/auth/screens/AuthMerchant/validation.js

@@ -0,0 +1,4 @@
+import * as yup from 'yup';
+export var AuthMerchantValidationSchema = yup.object().shape({
+    merchantInfo: yup.object().required('auth_merchant_required')
+});