@tap-payments/auth-jsconnect 2.1.99-test → 2.1.100-test

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

@@ -77,11 +77,13 @@ export declare type TaxFormValues = {
     confirmPolicy: false;
     documentId?: Array<string>;
 };
-export interface IndividualEmailMobileFormValues {
-    email: string;
+export interface IndividualMobileFormValues {
     mobile: string | null;
     countryCode: CountryCode;
 }
+export interface IndividualEmailMobileFormValues extends IndividualMobileFormValues {
+    email: string;
+}
 export interface IndividualPersonalInfoFormValues extends IndividualEmailMobileFormValues {
     name: string;
     gender: string | null;

package/build/constants/app.d.ts

@@ -135,6 +135,7 @@ export declare const TAX_STEP_NAMES: {
     TAX_SUCCESS: string;
 };
 export declare const INDIVIDUAl_STEP_NAMES: {
+    PHONE_INFO: string;
     PHONE_AUTH: string;
     INDIVIDUAl_PERSONAL_INFO: string;
     INDIVIDUAl_INFO: string;

package/build/constants/app.js

@@ -241,7 +241,23 @@ export var BUSINESS_SCREENS_NAVIGATION = [
 export var INDIVIDUAL_SCREENS_NAVIGATION = [
     {
         name: 'INDIVIDUAL_VERIFY_STEP',
-        next: ['INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP', 'INDIVIDUAL_SUCCESS_FOUR_FLOWS_BUTTONS_STEP', 'INDIVIDUAL_LIST_STEP'],
+        next: [
+            'INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP',
+            'INDIVIDUAL_SUCCESS_FOUR_FLOWS_BUTTONS_STEP',
+            'INDIVIDUAL_LIST_STEP',
+            'INDIVIDUAL_PHONE_INFO_STEP'
+        ],
+        prev: '',
+        order: 1
+    },
+    {
+        name: 'INDIVIDUAL_PHONE_INFO_STEP',
+        next: [
+            'INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP',
+            'INDIVIDUAL_SUCCESS_FOUR_FLOWS_BUTTONS_STEP',
+            'INDIVIDUAL_LIST_STEP',
+            'INDIVIDUAL_VERIFY_STEP'
+        ],
         prev: '',
         order: 1
     },
@@ -626,6 +642,7 @@ export var TAX_STEP_NAMES = {
     TAX_SUCCESS: 'tax_completed'
 };
 export var INDIVIDUAl_STEP_NAMES = {
+    PHONE_INFO: 'phone_info',
     PHONE_AUTH: 'individual_phone_auth',
     INDIVIDUAl_PERSONAL_INFO: 'individual_personal_info',
     INDIVIDUAl_INFO: 'individual_info',

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

@@ -1,11 +1,12 @@
 import { RootState } from '../../../app/store';
-import { CountryCode, FlowsTypes, IndividualExtraFormValues, OTPFormValues, ResponseData, SharedState, ActionState, User, IndividualPersonalInfoFormValues, IndividualEmailMobileFormValues } from '../../../@types';
+import { CountryCode, FlowsTypes, IndividualExtraFormValues, OTPFormValues, ResponseData, SharedState, ActionState, User, IndividualPersonalInfoFormValues, IndividualEmailMobileFormValues, IndividualMobileFormValues } from '../../../@types';
 import { CancelToken } from 'axios';
 interface VerifyLeadTokenProps {
     token: string;
     isInternally?: boolean;
+    isUpdatePhoneInfo?: boolean;
 }
-export declare const verifyLeadToken: import("@reduxjs/toolkit").AsyncThunk<{
+export declare const verifyToken: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
     boardResponse: {
         brand: any;
@@ -23,6 +24,7 @@ export declare const verifyLeadToken: import("@reduxjs/toolkit").AsyncThunk<{
     };
     token: string;
 }, VerifyLeadTokenProps, {}>;
+export declare const verifyLeadToken: import("@reduxjs/toolkit").AsyncThunk<void, VerifyLeadTokenProps, {}>;
 export declare const resendOTP: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
 }, void, {}>;
@@ -81,6 +83,10 @@ export declare const verifyLeadOTP: import("@reduxjs/toolkit").AsyncThunk<{
         otp: string;
     };
 }, OTPFormValues, {}>;
+export declare const updatePhoneInfo: import("@reduxjs/toolkit").AsyncThunk<{
+    data: any;
+    formData: IndividualMobileFormValues;
+}, IndividualMobileFormValues, {}>;
 export declare const updateIndividualPersonalInfo: import("@reduxjs/toolkit").AsyncThunk<{
     data: any;
     formData: IndividualPersonalInfoFormValues;
@@ -107,6 +113,7 @@ declare type VerifyData = {
 export interface IndividualData {
     verify: ResponseData & VerifyData;
     otpData: OTPFormValues & ResponseData;
+    individualPhoneInfo: IndividualMobileFormValues & ResponseData;
     individualCollectData: IndividualEmailMobileFormValues & ResponseData;
     individualPersonalData: IndividualPersonalInfoFormValues & ResponseData;
     individualData: IndividualExtraFormValues & ResponseData;

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

@@ -72,8 +72,8 @@ import { FlowsTypes, IndividualGender, IndividualType, FieldType } from '../../.
 import { handleNextScreenStep, handleSetCountryByIso2 } from '../../../app/settings';
 import { defaultCountry, IDENTIFICATION_TYPE, INDIVIDUAl_STEP_NAMES } from '../../../constants';
 import { convertNumbers2English, dateFormat, findCountryByIddPrefix, findCountryByIso2, getEighteenYearsAgo, getUserNameObject, getUserName, sleep, isValidEmail } from '../../../utils';
-export var verifyLeadToken = createAsyncThunk('individualVerifyLeadToken', function (_a, thunkApi) {
-    var token = _a.token, isInternally = _a.isInternally;
+export var verifyToken = createAsyncThunk('individual/verifyToken', function (_a, thunkApi) {
+    var token = _a.token, isInternally = _a.isInternally, isUpdatePhoneInfo = _a.isUpdatePhoneInfo;
     return __awaiter(void 0, void 0, void 0, function () {
         var payload, settings, data, boardData, individualData, countryCode, boardInfoData, boardInfoStatus, countries, board_id, board_info_id, notification, _b, id, type, payload_1, info, hasIndividualCompleted, birthCountry;
         var _c, _d, _e, _f, _g, _h, _j, _k;
@@ -98,31 +98,35 @@ export var verifyLeadToken = createAsyncThunk('individualVerifyLeadToken', funct
                         countryCode = data === null || data === void 0 ? void 0 : data.country_code;
                         thunkApi.dispatch(handleSetCountryByIso2(countryCode));
                     }
-                    if (!(data.step_name !== INDIVIDUAl_STEP_NAMES.PHONE_AUTH)) return [3, 14];
+                    if (!(data.step_name === INDIVIDUAl_STEP_NAMES.PHONE_INFO)) return [3, 2];
+                    thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_PHONE_INFO_STEP'));
+                    return [3, 17];
+                case 2:
+                    if (!(data.step_name !== INDIVIDUAl_STEP_NAMES.PHONE_AUTH)) return [3, 16];
                     board_id = data === null || data === void 0 ? void 0 : data.id;
                     board_info_id = data === null || data === void 0 ? void 0 : data.board_info_id;
-                    if (!(board_id && board_info_id)) return [3, 4];
+                    if (!(board_id && board_info_id)) return [3, 5];
                     return [4, API.boardService.retrieveBoardInfo({ id: board_id, infoId: board_info_id })];
-                case 2:
+                case 3:
                     boardInfoData = _l.sent();
                     notification = (boardInfoData || {}).notification;
                     _b = (notification === null || notification === void 0 ? void 0 : notification.recipient) || {}, id = _b.id, type = _b.type;
-                    if (!(id && type)) return [3, 4];
+                    if (!(id && type)) return [3, 5];
                     return [4, thunkApi.dispatch(retrieveIndividualInfo({ id: id, type: type, countryCode: countryCode }))];
-                case 3:
+                case 4:
                     payload_1 = (_l.sent()).payload;
                     individualData = payload_1.data || {};
-                    _l.label = 4;
-                case 4:
-                    if (!board_id) return [3, 7];
-                    return [4, API.boardService.retrieveBoardDetails(board_id)];
+                    _l.label = 5;
                 case 5:
+                    if (!board_id) return [3, 8];
+                    return [4, API.boardService.retrieveBoardDetails(board_id)];
+                case 6:
                     boardData = _l.sent();
                     return [4, API.boardService.retrieveBoardInfoStatus(board_id)];
-                case 6:
-                    boardInfoStatus = _l.sent();
-                    _l.label = 7;
                 case 7:
+                    boardInfoStatus = _l.sent();
+                    _l.label = 8;
+                case 8:
                     if (!countryCode) {
                         countryCode = (_d = boardData === null || boardData === void 0 ? void 0 : boardData.entity) === null || _d === void 0 ? void 0 : _d.country;
                         if (countryCode)
@@ -130,30 +134,36 @@ export var verifyLeadToken = createAsyncThunk('individualVerifyLeadToken', funct
                     }
                     info = (boardInfoStatus || {}).info;
                     hasIndividualCompleted = ((_e = info === null || info === void 0 ? void 0 : info.find(function (flow) { return flow.name === 'individual'; })) === null || _e === void 0 ? void 0 : _e.status) === 'completed';
-                    if (!hasIndividualCompleted) return [3, 8];
+                    if (!hasIndividualCompleted) return [3, 9];
                     thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_SUCCESS_FOUR_FLOWS_BUTTONS_STEP'));
-                    return [3, 14];
-                case 8:
-                    if (!(individualData === null || individualData === void 0 ? void 0 : individualData.is_authorized)) return [3, 11];
-                    if (!((_f = boardData === null || boardData === void 0 ? void 0 : boardData.business) === null || _f === void 0 ? void 0 : _f.id)) return [3, 10];
-                    return [4, thunkApi.dispatch(getIndividualList((_g = boardData === null || boardData === void 0 ? void 0 : boardData.business) === null || _g === void 0 ? void 0 : _g.id))];
+                    return [3, 15];
                 case 9:
-                    _l.sent();
-                    _l.label = 10;
+                    if (!(individualData === null || individualData === void 0 ? void 0 : individualData.is_authorized)) return [3, 12];
+                    if (!((_f = boardData === null || boardData === void 0 ? void 0 : boardData.business) === null || _f === void 0 ? void 0 : _f.id)) return [3, 11];
+                    return [4, thunkApi.dispatch(getIndividualList((_g = boardData === null || boardData === void 0 ? void 0 : boardData.business) === null || _g === void 0 ? void 0 : _g.id))];
                 case 10:
-                    thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_LIST_STEP'));
-                    return [3, 14];
+                    _l.sent();
+                    _l.label = 11;
                 case 11:
+                    thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_LIST_STEP'));
+                    return [3, 15];
+                case 12:
                     birthCountry = ((_h = individualData === null || individualData === void 0 ? void 0 : individualData.birth) === null || _h === void 0 ? void 0 : _h.country) || countryCode;
-                    if (!birthCountry) return [3, 13];
+                    if (!birthCountry) return [3, 14];
                     return [4, thunkApi.dispatch(getCityList(birthCountry))];
-                case 12:
-                    _l.sent();
-                    _l.label = 13;
                 case 13:
-                    thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP'));
+                    _l.sent();
                     _l.label = 14;
-                case 14: return [2, {
+                case 14:
+                    thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP'));
+                    _l.label = 15;
+                case 15: return [3, 17];
+                case 16:
+                    if (isUpdatePhoneInfo) {
+                        thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_VERIFY_STEP'));
+                    }
+                    _l.label = 17;
+                case 17: return [2, {
                         data: data,
                         boardResponse: {
                             brand: boardData === null || boardData === void 0 ? void 0 : boardData.brand,
@@ -175,6 +185,19 @@ export var verifyLeadToken = createAsyncThunk('individualVerifyLeadToken', funct
         });
     });
 });
+export var verifyLeadToken = createAsyncThunk('individualVerifyLeadToken', function (_a, thunkApi) {
+    var token = _a.token, isInternally = _a.isInternally;
+    return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4, thunkApi.dispatch(verifyToken({ token: token, isInternally: isInternally }))];
+                case 1:
+                    _b.sent();
+                    return [2];
+            }
+        });
+    });
+});
 export var resendOTP = createAsyncThunk('resendOTPIndividual', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var individual, payload, data;
     return __generator(this, function (_a) {
@@ -404,60 +427,57 @@ export var verifyLeadOTP = createAsyncThunk('verifyIndividualLeadOTP', function
                 boardInfoStatus = undefined;
                 if ((_e = data.errors) === null || _e === void 0 ? void 0 : _e.length)
                     throw new Error(data.errors[0].description);
-                if (!board_id) return [3, 3];
+                if (!board_id) return [3, 4];
                 return [4, API.boardService.retrieveBoardDetails(board_id)];
             case 2:
                 boardData = _q.sent();
-                _q.label = 3;
+                return [4, API.boardService.retrieveBoardInfoStatus(board_id)];
             case 3:
+                boardInfoStatus = _q.sent();
+                _q.label = 4;
+            case 4:
                 countryCode = (_f = boardData === null || boardData === void 0 ? void 0 : boardData.entity) === null || _f === void 0 ? void 0 : _f.country;
-                if (!(board_id && board_info_id)) return [3, 6];
+                if (!(board_id && board_info_id)) return [3, 7];
                 return [4, API.boardService.retrieveBoardInfo({ id: board_id, infoId: board_info_id })];
-            case 4:
+            case 5:
                 boardInfoData = _q.sent();
                 notification = (boardInfoData || {}).notification;
                 _c = (notification === null || notification === void 0 ? void 0 : notification.recipient) || {}, id = _c.id, type = _c.type;
-                if (!(id && type)) return [3, 6];
+                if (!(id && type)) return [3, 7];
                 return [4, thunkApi.dispatch(retrieveIndividualInfo({ id: id, type: type, countryCode: countryCode }))];
-            case 5:
+            case 6:
                 payload_2 = (_q.sent()).payload;
                 individualData = payload_2.data || {};
-                _q.label = 6;
-            case 6:
+                _q.label = 7;
+            case 7:
                 if (countryCode)
                     thunkApi.dispatch(handleSetCountryByIso2(countryCode));
-                if (!board_id) return [3, 8];
-                return [4, API.boardService.retrieveBoardInfoStatus(board_id)];
-            case 7:
-                boardInfoStatus = _q.sent();
-                _q.label = 8;
-            case 8:
                 info = (boardInfoStatus || {}).info;
                 hasIndividualCompleted = ((_g = info === null || info === void 0 ? void 0 : info.find(function (flow) { return flow.name === 'individual'; })) === null || _g === void 0 ? void 0 : _g.status) === 'completed';
-                if (!hasIndividualCompleted) return [3, 9];
+                if (!hasIndividualCompleted) return [3, 8];
                 thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_SUCCESS_FOUR_FLOWS_BUTTONS_STEP'));
-                return [3, 15];
-            case 9:
-                if (!(individualData === null || individualData === void 0 ? void 0 : individualData.is_authorized)) return [3, 12];
-                if (!((_h = boardData === null || boardData === void 0 ? void 0 : boardData.business) === null || _h === void 0 ? void 0 : _h.id)) return [3, 11];
+                return [3, 14];
+            case 8:
+                if (!(individualData === null || individualData === void 0 ? void 0 : individualData.is_authorized)) return [3, 11];
+                if (!((_h = boardData === null || boardData === void 0 ? void 0 : boardData.business) === null || _h === void 0 ? void 0 : _h.id)) return [3, 10];
                 return [4, thunkApi.dispatch(getIndividualList((_j = boardData === null || boardData === void 0 ? void 0 : boardData.business) === null || _j === void 0 ? void 0 : _j.id))];
-            case 10:
+            case 9:
                 _q.sent();
-                _q.label = 11;
-            case 11:
+                _q.label = 10;
+            case 10:
                 thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_LIST_STEP'));
-                return [3, 15];
-            case 12:
+                return [3, 14];
+            case 11:
                 birthCountry = ((_k = individualData === null || individualData === void 0 ? void 0 : individualData.birth) === null || _k === void 0 ? void 0 : _k.country) || countryCode;
-                if (!birthCountry) return [3, 14];
+                if (!birthCountry) return [3, 13];
                 return [4, thunkApi.dispatch(getCityList(birthCountry))];
-            case 13:
+            case 12:
                 _q.sent();
+                _q.label = 13;
+            case 13:
+                thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP'));
                 _q.label = 14;
             case 14:
-                thunkApi.dispatch(handleNextScreenStep('INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP'));
-                _q.label = 15;
-            case 15:
                 (_m = (_l = settings.data.appConfig).onStepCompleted) === null || _m === void 0 ? void 0 : _m.call(_l, settings.data.activeScreen.name, { otp: params.otp });
                 return [2, {
                         data: data,
@@ -480,6 +500,36 @@ export var verifyLeadOTP = createAsyncThunk('verifyIndividualLeadOTP', function
         }
     });
 }); });
+export var updatePhoneInfo = createAsyncThunk('individual/updatePhoneInfo', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
+    var individual, _a, token, responseBody, _b, id, type, mobile, countryCode, requestBody, data;
+    var _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
+            case 0:
+                individual = thunkApi.getState().individual;
+                _a = individual.data.verify, token = _a.token, responseBody = _a.responseBody;
+                _b = (responseBody === null || responseBody === void 0 ? void 0 : responseBody.source) || {}, id = _b.id, type = _b.type;
+                mobile = params.mobile, countryCode = params.countryCode;
+                requestBody = {
+                    id: id,
+                    type: type,
+                    contact: {
+                        phone: {
+                            country_code: (_c = countryCode === null || countryCode === void 0 ? void 0 : countryCode.idd_prefix) === null || _c === void 0 ? void 0 : _c.toString(),
+                            number: mobile || ''
+                        }
+                    }
+                };
+                return [4, API.individualService.updateIndividual(requestBody)];
+            case 1:
+                data = _d.sent();
+                return [4, thunkApi.dispatch(verifyToken({ token: token, isUpdatePhoneInfo: true }))];
+            case 2:
+                _d.sent();
+                return [2, { data: data, formData: params }];
+        }
+    });
+}); });
 export var updateIndividualPersonalInfo = createAsyncThunk('individual/updateIndividualPersonalInfo', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var _a, settings, individual, _b, notification, user, entity, _c, id, type, name, email, mobile, countryCode, gender, nid, issuedCountry, expiryDate, dob, placeOfBirthCountry, placeOfBirthCity, nationality, code, data_status, userName, identification_id_type, isNameEditable, isEmailEditable, isMobileNumberEditable, isMobileCountryEditable, isNidEditable, isIssuedCountryEditable, isExpiryEditable, isIdTypeEditable, isNationalityEditable, hasContact, hasPhone, hasIdentification, hasBirth, names, contact, requestBody, data;
     var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
@@ -722,6 +772,10 @@ var initialState = {
         otpData: {
             otp: ''
         },
+        individualPhoneInfo: {
+            mobile: '',
+            countryCode: defaultCountry
+        },
         individualCollectData: {
             email: '',
             mobile: '',
@@ -780,16 +834,25 @@ export var individualSlice = createSlice({
     },
     extraReducers: function (builder) {
         builder
-            .addCase(verifyLeadToken.pending, function (state) {
+            .addCase(verifyToken.pending, function (state) {
             state.error = null;
-            state.customLoading = true;
         })
-            .addCase(verifyLeadToken.fulfilled, function (state, action) {
+            .addCase(verifyToken.fulfilled, function (state, action) {
             state.error = null;
-            state.customLoading = false;
             var _a = action.payload, data = _a.data, token = _a.token, boardResponse = _a.boardResponse;
             state.data.verify.responseBody = __assign(__assign(__assign(__assign({}, data), state.data.verify.responseBody), boardResponse), { board_id: data.id });
             state.data.verify.token = token;
+        })
+            .addCase(verifyToken.rejected, function (state, action) {
+            state.error = action.error.message;
+        })
+            .addCase(verifyLeadToken.pending, function (state) {
+            state.error = null;
+            state.customLoading = true;
+        })
+            .addCase(verifyLeadToken.fulfilled, function (state) {
+            state.error = null;
+            state.customLoading = false;
         })
             .addCase(verifyLeadToken.rejected, function (state, action) {
             state.error = action.error.message;
@@ -870,12 +933,10 @@ export var individualSlice = createSlice({
             state.error = action.error.message;
         })
             .addCase(retrieveIndividualInfo.pending, function (state) {
-            state.loading = true;
             state.error = null;
         })
             .addCase(retrieveIndividualInfo.fulfilled, function (state, action) {
             var _a, _b, _c, _d;
-            state.loading = false;
             state.error = null;
             var _e = action.payload, data = _e.data, countries = _e.countries, countryCode = _e.countryCode;
             var user = (state.data.verify.responseBody || {}).user;
@@ -945,7 +1006,6 @@ export var individualSlice = createSlice({
             state.data.individualData.isInfluencer = is_influencer;
         })
             .addCase(retrieveIndividualInfo.rejected, function (state, action) {
-            state.loading = false;
             state.error = action.error.message;
         })
             .addCase(getIndividualList.pending, function (state) {
@@ -1015,6 +1075,21 @@ export var individualSlice = createSlice({
             .addCase(getCityList.rejected, function (state, action) {
             state.cityLoading = false;
             state.error = action.error.message;
+        })
+            .addCase(updatePhoneInfo.pending, function (state) {
+            state.loading = true;
+            state.error = null;
+        })
+            .addCase(updatePhoneInfo.fulfilled, function (state, action) {
+            state.loading = false;
+            state.error = null;
+            var _a = action.payload, data = _a.data, formData = _a.formData;
+            state.data.individualPhoneInfo = formData;
+            state.data.individualPhoneInfo.responseBody = data;
+        })
+            .addCase(updatePhoneInfo.rejected, function (state, action) {
+            state.loading = false;
+            state.error = action.error.message;
         })
             .addCase(updateIndividualPersonalInfo.pending, function (state) {
             state.loading = true;

package/build/features/featuresScreens.js

@@ -38,6 +38,7 @@ import SuccessPasswordPage from './password/screens/Success';
 import PasswordSuccessWithFlowPage from './password/screens/SuccessWithFlowButtons';
 import PasswordResetPasswordSuccessPage from './password/screens/ResetPasswordSuccess';
 import IndividualVerifyPage from './individual/screens/Verify';
+import IndividualPhoneInfoPage from './individual/screens/IndividualPhoneInfo';
 import IndividualListPage from './individual/screens/IndividualList';
 import IndividualPersonalInfo from './individual/screens/IndividualPersonalInfo';
 import AdditionalIndividualInfoPage from './individual/screens/AdditionalIndividualInfo';
@@ -232,6 +233,10 @@ export var individualFeatureScreens = [
         name: 'INDIVIDUAL_VERIFY_STEP',
         element: IndividualVerifyPage
     },
+    {
+        name: 'INDIVIDUAL_PHONE_INFO_STEP',
+        element: IndividualPhoneInfoPage
+    },
     {
         name: 'INDIVIDUAL_LOADING_DATA_STEP',
         element: IndividualDataLoadingPage

package/build/features/individual/screens/IndividualPhoneInfo/MobileNumber.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Theme, SxProps } from '@mui/material/styles';
+import { CountryCode } from '../../../../@types';
+interface MobileNumberProps {
+    countries: Array<CountryCode>;
+    show: boolean;
+    onListOpen?: () => void;
+    onListClose?: () => void;
+    sx?: SxProps<Theme>;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MobileNumberProps & React.RefAttributes<unknown>>>;
+export default _default;

package/build/features/individual/screens/IndividualPhoneInfo/MobileNumber.js

@@ -0,0 +1,143 @@
+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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useController, useFormContext } from 'react-hook-form';
+import Box from '@mui/material/Box';
+import { styled, alpha } from '@mui/material/styles';
+import { removeAllCharsFromNumber } from '../../../../utils';
+import { useLanguage, useAppSelector } from '../../../../hooks';
+import Text from '../../../../components/Text';
+import Collapse from '../../../../components/Collapse';
+import ExpandIcon from '../../../../components/ExpandIcon';
+import SimpleList from '../../../../components/SimpleList';
+import ClearIcon from '../../../shared/ClearIcon';
+import CheckIcon from '../../../shared/CheckIcon';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import Input from '../../../shared/Input';
+import { individualSelector } from '../../../app/individual/individualStore';
+var LabelContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: theme.spacing(0, 2.5, 1.25, 2.5)
+    });
+});
+var CountryItemContainer = styled(Box)(function () { return ({
+    display: 'flex'
+}); });
+var CountryCodeText = 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), { width: theme.spacing(10), textAlign: 'start', fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
+});
+var CountryNameText = 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, paddingInlineStart: theme.spacing(1.25) }));
+});
+var CountryCodeStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ cursor: 'pointer' }, theme.typography.body2), { fontWeight: theme.typography.fontWeightRegular, display: 'flex', alignItems: 'center', minWidth: theme.spacing(8.75) }));
+});
+var InputLabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
+});
+var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginInlineStart: theme.spacing(1)
+    });
+});
+var InputStyled = styled(Input)(function () { return ({
+    direction: 'ltr',
+    '& .MuiInputBase-input': {
+        cursor: 'auto'
+    }
+}); });
+var MobileNumber = React.forwardRef(function (_a, ref) {
+    var _b, _c, _d;
+    var countries = _a.countries, sx = _a.sx, rest = __rest(_a, ["countries", "sx"]);
+    var _e = React.useState(countries || []), countriesCode = _e[0], setCountries = _e[1];
+    var _f = React.useState(null), anchorEl = _f[0], setAnchorEl = _f[1];
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var _g = useFormContext(), control = _g.control, setValue = _g.setValue;
+    var data = useAppSelector(individualSelector).data;
+    var phoneControl = useController({ name: 'mobile', control: control });
+    var countryCodeControl = useController({ name: 'countryCode', control: control });
+    var countryCodeValue = countryCodeControl.field.value;
+    var mobileValue = phoneControl.field.value;
+    var countryName = (isAr ? (_b = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _c === void 0 ? void 0 : _c.english) || '';
+    var error = !!mobileValue ? (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message : '';
+    var isSA = (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA';
+    var mobileLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits;
+    var isStartsWith5 = mobileValue.startsWith('5');
+    var requiredLen = isSA && isStartsWith5 ? mobileLen - 1 : mobileLen;
+    var verify = data.verify;
+    var user = (verify.responseBody || {}).user;
+    React.useEffect(function () {
+        if (mobileValue)
+            setValue('mobile', mobileValue, { shouldValidate: true });
+    }, []);
+    var onPhoneNumberChange = function (_a) {
+        var target = _a.target;
+        var value = removeAllCharsFromNumber(target.value);
+        phoneControl.field.onChange(value);
+    };
+    var clearMobileNumber = function () {
+        phoneControl.field.onChange('');
+    };
+    var onCloseCountryList = function () {
+        var _a;
+        if (anchorEl) {
+            setAnchorEl(null);
+            (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        }
+        setCountries(countries);
+    };
+    var toggleCountryList = function () {
+        var _a, _b;
+        if (anchorEl) {
+            setAnchorEl(null);
+            (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+            setCountries(countries);
+        }
+        else {
+            (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
+            setAnchorEl(true);
+        }
+    };
+    var onSelectItem = function (country) {
+        onCloseCountryList();
+        setValue('mobile', '');
+        countryCodeControl.field.onChange(country);
+    };
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: sx }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', searchValuePath: ['name.arabic', 'name.english'], list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+                            return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
+                        } }) }))] })) })));
+});
+export default React.memo(MobileNumber);

package/build/features/individual/screens/IndividualPhoneInfo/PhoneInfo.d.ts

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

package/build/features/individual/screens/IndividualPhoneInfo/PhoneInfo.js

@@ -0,0 +1,60 @@
+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 { useTranslation } from 'react-i18next';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { styled } from '@mui/material/styles';
+import { settingsSelector } from '../../../../app/settings';
+import { useAppDispatch, useSetFromDefaultValues } from '../../../../hooks';
+import { useLanguage, useAppSelector } from '../../../../hooks';
+import Form from '../../../../components/Form';
+import Collapse from '../../../../components/Collapse';
+import { ScreenContainer } from '../../../shared/Containers';
+import { individualSelector, clearError, updatePhoneInfo } from '../../../app/individual/individualStore';
+import Button from '../../../shared/Button';
+import { IndividualPhoneInfoValidationSchema } from './validation';
+import MobileNumber from './MobileNumber';
+var FormStyled = styled(Form)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column'
+}); });
+var PhoneInfo = function (_a) {
+    var dispatch = useAppDispatch();
+    var settingsData = useAppSelector(settingsSelector).data;
+    var countries = settingsData.countries;
+    var _b = useAppSelector(individualSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var _c = data.individualPhoneInfo, mobile = _c.mobile, countryCode = _c.countryCode;
+    var methods = useForm({
+        resolver: yupResolver(IndividualPhoneInfoValidationSchema),
+        defaultValues: {
+            mobile: mobile,
+            countryCode: countryCode
+        },
+        mode: 'onChange'
+    });
+    useSetFromDefaultValues(methods, data.individualPhoneInfo);
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var _d = React.useState(), listActive = _d[0], setListActive = _d[1];
+    var onSubmit = function (formData) {
+        dispatch(updatePhoneInfo(formData));
+    };
+    React.useEffect(function () {
+        if (error && methods.formState.isValid)
+            dispatch(clearError());
+    }, [methods.formState.isValid]);
+    var disabled = !methods.formState.isValid || !!error;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(MobileNumber, { show: true, sx: { mb: 7.5 }, countries: countries, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ disableBack: true, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+};
+export default React.memo(PhoneInfo);

package/build/features/individual/screens/IndividualPhoneInfo/index.d.ts

@@ -0,0 +1,3 @@
+import PhoneInfo, { PhoneInfoProps } from './PhoneInfo';
+export type { PhoneInfoProps };
+export default PhoneInfo;

package/build/features/individual/screens/IndividualPhoneInfo/index.js

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

package/build/features/individual/screens/IndividualPhoneInfo/validation.d.ts

@@ -0,0 +1,8 @@
+import * as yup from 'yup';
+export declare const IndividualPhoneInfoValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>>>;

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

@@ -0,0 +1,31 @@
+import * as yup from 'yup';
+export var IndividualPhoneInfoValidationSchema = yup.object().shape({
+    mobile: yup
+        .string()
+        .test({
+        test: function (value) {
+            if (((value === null || value === void 0 ? void 0 : value.length) || 0) > 0) {
+                var countryCode = this.parent.countryCode;
+                var isSA = countryCode.iso2 === 'SA';
+                var digits = countryCode.digits;
+                var mobileValue = value || '';
+                var valueLen = mobileValue.length;
+                var isNumber = mobileValue.match(/^[0-9]/g);
+                if (!isNumber)
+                    return this.createError({ message: 'enter_valid_mobile_number' });
+                var isStartWithZero = mobileValue.startsWith('05');
+                var isStartWith5 = mobileValue.startsWith('5');
+                var isSaudiNumber = isStartWith5 || isStartWithZero;
+                if (isSA) {
+                    if (!isSaudiNumber)
+                        return this.createError({ message: 'start_with_number' });
+                    var requiredLen = isStartWith5 ? digits - 1 : digits;
+                    return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
+                }
+                return valueLen === digits ? true : this.createError({ message: 'enter_valid_mobile_number' });
+            }
+            return true;
+        }
+    })
+        .required()
+});

package/package.json

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