@tap-payments/auth-jsconnect 2.12.7 → 2.12.8-sandbox

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/build/@types/app.d.ts +1 -0
  2. package/build/assets/locales/en.json +0 -1
  3. package/build/constants/api.d.ts +0 -1
  4. package/build/constants/api.js +0 -2
  5. package/build/constants/app.d.ts +2 -1
  6. package/build/constants/app.js +14 -7
  7. package/build/features/app/connectExpress/connectExpressStore.d.ts +11 -1
  8. package/build/features/app/connectExpress/connectExpressStore.js +199 -18
  9. package/build/features/connectExpress/ConnectExpress.js +6 -3
  10. package/build/features/connectExpress/screens/AuthenticationList/AuthenticationList.js +5 -2
  11. package/build/features/connectExpress/screens/BusinessCountry/BusinessCountry.js +10 -5
  12. package/build/features/connectExpress/screens/CollectIndividualInfo/CollectIndividualInfo.js +3 -2
  13. package/build/features/connectExpress/screens/Email/Email.d.ts +5 -0
  14. package/build/features/connectExpress/screens/Email/Email.js +57 -0
  15. package/build/features/connectExpress/screens/Email/EmailField.d.ts +8 -0
  16. package/build/features/connectExpress/screens/Email/EmailField.js +52 -0
  17. package/build/features/connectExpress/screens/Email/index.d.ts +3 -0
  18. package/build/features/connectExpress/screens/Email/index.js +2 -0
  19. package/build/features/connectExpress/screens/Email/validation.d.ts +8 -0
  20. package/build/features/connectExpress/screens/Email/validation.js +4 -0
  21. package/build/features/connectExpress/screens/NIDMissed/NID.js +4 -2
  22. package/build/features/connectExpress/screens/OTP/OTP.js +15 -9
  23. package/build/features/connectExpress/screens/OTP/OTPInput.js +10 -4
  24. package/build/features/featuresScreens.js +5 -0
  25. package/build/hooks/index.d.ts +1 -0
  26. package/build/hooks/index.js +1 -0
  27. package/build/hooks/useAppConfig.js +1 -1
  28. package/build/hooks/useCountry.d.ts +1 -0
  29. package/build/hooks/useCountry.js +3 -2
  30. package/build/hooks/useIsEmailAuth.d.ts +1 -0
  31. package/build/hooks/useIsEmailAuth.js +11 -0
  32. package/build/utils/string.d.ts +2 -0
  33. package/build/utils/string.js +8 -0
  34. package/package.json +2 -2
@@ -236,6 +236,7 @@ export interface LibConfig extends LibCallbacks {
236
236
  closeButton?: boolean;
237
237
  disableNafath?: boolean;
238
238
  disablePaci?: boolean;
239
+ emailAuth?: boolean;
239
240
  dialogStartTransition?: 'left' | 'right' | 'up' | 'down';
240
241
  dialogEndTransition?: 'left' | 'right' | 'up' | 'down';
241
242
  };
@@ -393,7 +393,6 @@
393
393
  "kyc_token_invalid": "May you please verify link of which you are trying to open.",
394
394
  "kyc_users_description": "Please select an authorized registered ID to approve with {{provider}}",
395
395
  "kyc_verification": "Know Your Customer (KYC)",
396
- "kyc_privacy_policy": "Privacy Policy",
397
396
  "language": "العربية",
398
397
  "license_info": "License information",
399
398
  "license_name_hint": "Enter legal name",
@@ -14,7 +14,6 @@ export declare const ENDPOINT_PATHS: {
14
14
  PRODUCTION_BASE_URL_SA: string;
15
15
  PRODUCTION_BASE_URL_SA_DR: string;
16
16
  DEV_BASE_URL: string;
17
- BETA_BASE_URL: string;
18
17
  BUSINESS_COUNTRIES: string;
19
18
  COUNTRIES: string;
20
19
  IP: string;
@@ -3,7 +3,6 @@ var PRODUCTION_BASE_URL = 'https://connect-mw.tap.company/middleware';
3
3
  var PRODUCTION_BASE_URL_SA = 'https://connect-mw.tap.com.sa/middleware';
4
4
  var PRODUCTION_BASE_URL_SA_DR = 'https://connect-mw-tmp.tap.com.sa/middleware';
5
5
  var DEV_BASE_URL = 'https://connect-mw.dev.tap.company/middleware';
6
- var BETA_BASE_URL = 'https://connect-mw.beta.tap.company/middleware';
7
6
  var API_BUSINESS_COUNTRIES = 'https://godata.sandbox.tap.company/api/v1/business/country/list';
8
7
  var API_COUNTRIES = 'https://utilities.tap.company/api/v1/country/list';
9
8
  var CURRENCY_PATH = 'https://utilities.tap.company/api/v1/currency/iso';
@@ -74,7 +73,6 @@ export var ENDPOINT_PATHS = {
74
73
  PRODUCTION_BASE_URL_SA: PRODUCTION_BASE_URL_SA,
75
74
  PRODUCTION_BASE_URL_SA_DR: PRODUCTION_BASE_URL_SA_DR,
76
75
  DEV_BASE_URL: DEV_BASE_URL,
77
- BETA_BASE_URL: BETA_BASE_URL,
78
76
  BUSINESS_COUNTRIES: API_BUSINESS_COUNTRIES,
79
77
  COUNTRIES: API_COUNTRIES,
80
78
  IP: IP_PATH,
@@ -1,7 +1,6 @@
1
1
  import { ScreenStepNavigation, BusinessType, POSInfo, TerminalInfo } from '../@types';
2
2
  export declare const CONNECT_DEV_URL = "https://connect.dev.tap.company";
3
3
  export declare const CONNECT_SANDBOX_URL = "https://connect.sandbox.tap.company";
4
- export declare const CONNECT_BETA_URL = "https://connect.beta.tap.company";
5
4
  export declare const CONNECT_PROD_URL = "https://connect.tap.company";
6
5
  export declare const CLIENT_ORIGIN: string;
7
6
  export declare const TAP_WEBSITE = "https://www.tap.company/";
@@ -132,6 +131,8 @@ export declare const AUTH_STEP_NAMES: {
132
131
  export declare const CONNECT_EXPRESS_STEP_NAMES: {
133
132
  CREATE_AUTH_MOBILE: string;
134
133
  VERIFY_AUTH_MOBILE: string;
134
+ CREATE_AUTH_EMAIL: string;
135
+ VERIFY_AUTH_EMAIL: string;
135
136
  CREATE_AUTH_CIVIL_ID: string;
136
137
  VERIFY_AUTH_CIVIL_ID: string;
137
138
  CREATE_AUTH_NID: string;
@@ -2,7 +2,6 @@ import { BusinessType } from '../@types';
2
2
  import { CONNECT_FLOWS } from './flows';
3
3
  export var CONNECT_DEV_URL = 'https://connect.dev.tap.company';
4
4
  export var CONNECT_SANDBOX_URL = 'https://connect.sandbox.tap.company';
5
- export var CONNECT_BETA_URL = 'https://connect.beta.tap.company';
6
5
  export var CONNECT_PROD_URL = 'https://connect.tap.company';
7
6
  export var CLIENT_ORIGIN = window.location.origin;
8
7
  export var TAP_WEBSITE = 'https://www.tap.company/';
@@ -153,9 +152,15 @@ export var CONNECT_EXPRESS_SCREENS_NAVIGATION = [
153
152
  prev: ['CONNECT_EXPRESS_NID_STEP', 'CONNECT_EXPRESS_CIVIL_ID_STEP'],
154
153
  order: 1
155
154
  },
155
+ {
156
+ name: 'CONNECT_EXPRESS_EMAIL_STEP',
157
+ next: 'CONNECT_EXPRESS_OTP_STEP',
158
+ prev: 'CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP',
159
+ order: 1
160
+ },
156
161
  {
157
162
  name: 'CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP',
158
- next: ['CONNECT_EXPRESS_NID_STEP', 'CONNECT_EXPRESS_MOBILE_STEP'],
163
+ next: ['CONNECT_EXPRESS_NID_STEP', 'CONNECT_EXPRESS_MOBILE_STEP', 'CONNECT_EXPRESS_EMAIL_STEP'],
159
164
  prev: '',
160
165
  order: 1
161
166
  },
@@ -198,20 +203,19 @@ export var CONNECT_EXPRESS_SCREENS_NAVIGATION = [
198
203
  'CONNECT_EXPRESS_AUTHENTICATION_LIST_STEP',
199
204
  'CONNECT_EXPRESS_OTP_VERIFY_SECURITY_ERROR_STEP'
200
205
  ],
201
- prev: 'CONNECT_EXPRESS_MOBILE_STEP',
202
- order: 2,
203
- back: 'CONNECT_EXPRESS_MOBILE_STEP'
206
+ prev: ['CONNECT_EXPRESS_MOBILE_STEP', 'CONNECT_EXPRESS_EMAIL_STEP'],
207
+ order: 2
204
208
  },
205
209
  {
206
210
  name: 'CONNECT_EXPRESS_AUTHENTICATION_LIST_STEP',
207
211
  next: ['CONNECT_EXPRESS_AUTH_MERCHANT_LIST_STEP', 'CONNECT_EXPRESS_AUTH_ACCOUNT_CREATED_STEP'],
208
- prev: ['CONNECT_EXPRESS_MOBILE_STEP', 'CONNECT_EXPRESS_NID_STEP', 'CONNECT_EXPRESS_CIVIL_ID_STEP'],
212
+ prev: ['CONNECT_EXPRESS_MOBILE_STEP', 'CONNECT_EXPRESS_EMAIL_STEP', 'CONNECT_EXPRESS_NID_STEP', 'CONNECT_EXPRESS_CIVIL_ID_STEP'],
209
213
  order: 3
210
214
  },
211
215
  {
212
216
  name: 'CONNECT_EXPRESS_NID_MISSED_STEP',
213
217
  next: ['CONNECT_EXPRESS_IDENTITY_VERIFY_NAFATH_STEP', 'CONNECT_EXPRESS_COLLECT_INDIVIDUAL_INFO_STEP'],
214
- prev: 'CONNECT_EXPRESS_MOBILE_STEP',
218
+ prev: ['CONNECT_EXPRESS_MOBILE_STEP', 'CONNECT_EXPRESS_EMAIL_STEP'],
215
219
  order: 3
216
220
  },
217
221
  {
@@ -272,6 +276,7 @@ export var CONNECT_EXPRESS_SCREENS_NAVIGATION = [
272
276
  ],
273
277
  prev: [
274
278
  'CONNECT_EXPRESS_MOBILE_STEP',
279
+ 'CONNECT_EXPRESS_EMAIL_STEP',
275
280
  'CONNECT_EXPRESS_NID_STEP',
276
281
  'CONNECT_EXPRESS_CIVIL_ID_STEP',
277
282
  'CONNECT_EXPRESS_CIVIL_ID_MISSED_STEP',
@@ -1316,6 +1321,8 @@ export var AUTH_STEP_NAMES = {
1316
1321
  export var CONNECT_EXPRESS_STEP_NAMES = {
1317
1322
  CREATE_AUTH_MOBILE: 'connect_express_create_auth_mobile',
1318
1323
  VERIFY_AUTH_MOBILE: 'connect_express_verify_auth_mobile',
1324
+ CREATE_AUTH_EMAIL: 'connect_express_create_auth_email',
1325
+ VERIFY_AUTH_EMAIL: 'connect_express_verify_auth_email',
1319
1326
  CREATE_AUTH_CIVIL_ID: 'connect_express_create_auth_civil_id',
1320
1327
  VERIFY_AUTH_CIVIL_ID: 'connect_express_verify_auth_civil_id',
1321
1328
  CREATE_AUTH_NID: 'connect_express_create_auth_nid',
@@ -1,5 +1,5 @@
1
1
  import { RootState } from '../../../app/store';
2
- import { MobileFormValues, NIDFormValues, CivilFormValues, OTPFormValues, IndividualFormValues, SharedState, FlowsTypes, ActionState, CountryCode, AuthForType, BusinessDataFormValues, AsyncThunkParams, AuthenticationListFormValues, AuthMerchantFormValues, DOBFormValues, MobileOwnershipFormValues, AuthForScreen } from '../../../@types';
2
+ import { MobileFormValues, NIDFormValues, CivilFormValues, OTPFormValues, IndividualFormValues, SharedState, FlowsTypes, ActionState, CountryCode, AuthForType, BusinessDataFormValues, AsyncThunkParams, AuthenticationListFormValues, AuthMerchantFormValues, DOBFormValues, MobileOwnershipFormValues, AuthForScreen, AuthEmailFormValues } from '../../../@types';
3
3
  import { CancelToken } from 'axios';
4
4
  export declare const updateBusinessCountryAsync: import("@reduxjs/toolkit").AsyncThunk<any, string, {}>;
5
5
  export declare const retrieveLeadIdentityByIdAsync: import("@reduxjs/toolkit").AsyncThunk<{
@@ -37,6 +37,14 @@ export declare const resendMobileAuthOTP: import("@reduxjs/toolkit").AsyncThunk<
37
37
  response: any;
38
38
  formData: MobileFormValues;
39
39
  }, MobileFormValues, {}>;
40
+ export declare const createEmailAuthAsync: import("@reduxjs/toolkit").AsyncThunk<{
41
+ response: any;
42
+ formData: AuthEmailFormValues;
43
+ }, AuthEmailFormValues, {}>;
44
+ export declare const resendEmailAuthOTP: import("@reduxjs/toolkit").AsyncThunk<{
45
+ response: any;
46
+ formData: AuthEmailFormValues;
47
+ }, AuthEmailFormValues, {}>;
40
48
  export declare const createAuthSessionExpiredAsync: import("@reduxjs/toolkit").AsyncThunk<{
41
49
  data: any;
42
50
  }, boolean, {}>;
@@ -65,6 +73,7 @@ export declare const createCivilIdAuthAsync: import("@reduxjs/toolkit").AsyncThu
65
73
  formData: CivilFormValues;
66
74
  }, CivilFormValues, {}>;
67
75
  export declare const verifyMobileOtpAsync: import("@reduxjs/toolkit").AsyncThunk<any, OTPFormValues, {}>;
76
+ export declare const verifyEmailOtpAsync: import("@reduxjs/toolkit").AsyncThunk<any, OTPFormValues, {}>;
68
77
  export declare const verifyPACIAsync: import("@reduxjs/toolkit").AsyncThunk<any, verifyPACIAsyncParams, {}>;
69
78
  export declare const createCivilIDAuthIdentityAsync: import("@reduxjs/toolkit").AsyncThunk<{
70
79
  response: any;
@@ -157,6 +166,7 @@ interface ResponseData {
157
166
  export interface ConnectExpressData {
158
167
  isLeadIdPassed: boolean;
159
168
  mobileData: MobileFormValues;
169
+ emailData: AuthEmailFormValues;
160
170
  nidData: NIDFormValues;
161
171
  civilIdData: CivilFormValues;
162
172
  otpData: OTPFormValues & {
@@ -61,7 +61,7 @@ import { FlowsTypes, AuthForType, BusinessType, LicenseType, AuthForScreen } fro
61
61
  import API, { setAuthSessionToGlobalHeaders } from '../../../api';
62
62
  import { ADD_NEW_ENTITY, COLLECT_DOB_INFO_NAFATH, CONNECT_EXPRESS_STEP_NAMES, IDENTIFICATION_TYPE, NAFATH_PACI_TIMEOUT_DURATION, NAFATH_VERIFICATION_FAILED, OTHER_CR_LICENSE, OTHER_FL_LICENSE, SCOPE_AUTH, SCOPE_MERCHANT } from '../../../constants';
63
63
  import { defaultCountry } from '../../../constants';
64
- import { getIndividualName, capitalizeTheFirstLetterOfEachWord, sleep, findCountryByIddPrefix, concatenateObjectValues, isSA, isKW, isOtherThanKWOrSA, sendCustomEventToGTM, sendCustomDimension, getMetaData, isNetworkError, isTimeoutError, isInternalServerError, isAuthenticationVerificationFailed } from '../../../utils';
64
+ import { getIndividualName, capitalizeTheFirstLetterOfEachWord, sleep, findCountryByIddPrefix, concatenateObjectValues, isSA, isKW, isEmailAuthEnabled, isOtherThanKWOrSA, sendCustomEventToGTM, sendCustomDimension, getMetaData, isNetworkError, isTimeoutError, isInternalServerError, isAuthenticationVerificationFailed } from '../../../utils';
65
65
  export var updateBusinessCountryAsync = createAsyncThunk('connectExpress/updateBusinessCountryAsync', function (countryCode, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
66
66
  var connectExpress, payload, data;
67
67
  return __generator(this, function (_a) {
@@ -81,17 +81,17 @@ export var updateBusinessCountryAsync = createAsyncThunk('connectExpress/updateB
81
81
  });
82
82
  }); });
83
83
  export var retrieveLeadIdentityByIdAsync = createAsyncThunk('expressConnect/retrieveLeadIdentityByIdAsync', function (leadId, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
84
- var settings, countryCode, showBoard, data, _a, country_code, contact, phone, status, board_id, board_info_id, isRegistered, screen_1, _b, boardInfo, boardData, error_1;
85
- var _c, _d, _e, _f, _g;
86
- return __generator(this, function (_h) {
87
- switch (_h.label) {
84
+ var settings, countryCode, showBoard, data, _a, country_code, contact, phone, status, board_id, board_info_id, emailAuth, isRegistered, screen_1, screen_2, _b, boardInfo, boardData, error_1;
85
+ var _c, _d, _e, _f, _g, _h, _j;
86
+ return __generator(this, function (_k) {
87
+ switch (_k.label) {
88
88
  case 0:
89
89
  settings = thunkApi.getState().settings;
90
90
  countryCode = settings.data.businessCountry;
91
91
  showBoard = settings.data.appConfig.showBoard;
92
92
  return [4, API.leadService.retrieveLeadIdentity(leadId)];
93
93
  case 1:
94
- data = _h.sent();
94
+ data = _k.sent();
95
95
  _a = data || {}, country_code = _a.country_code, contact = _a.contact;
96
96
  if (country_code)
97
97
  thunkApi.dispatch(handleSetCountryByIso2(country_code));
@@ -103,16 +103,24 @@ export var retrieveLeadIdentityByIdAsync = createAsyncThunk('expressConnect/retr
103
103
  thunkApi.dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP'));
104
104
  return [2, { data: data, countryCode: countryCode }];
105
105
  }
106
+ emailAuth = (_d = settings.data.appConfig.features) === null || _d === void 0 ? void 0 : _d.emailAuth;
106
107
  isRegistered = (status === null || status === void 0 ? void 0 : status.toLowerCase()) === 'registered';
107
108
  if (!isRegistered && !(data === null || data === void 0 ? void 0 : data.identification) && phone) {
108
- thunkApi.dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_MOBILE_STEP'));
109
+ screen_1 = isEmailAuthEnabled(emailAuth, country_code || ((_e = settings.data.businessCountry) === null || _e === void 0 ? void 0 : _e.iso2))
110
+ ? 'CONNECT_EXPRESS_EMAIL_STEP'
111
+ : 'CONNECT_EXPRESS_MOBILE_STEP';
112
+ thunkApi.dispatch(handleCurrentActiveScreen(screen_1));
109
113
  return [2, { data: data, countryCode: countryCode }];
110
114
  }
111
115
  if (!isRegistered && country_code) {
112
- screen_1 = 'CONNECT_EXPRESS_NID_STEP';
116
+ screen_2 = 'CONNECT_EXPRESS_NID_STEP';
113
117
  if (!isSA(data.country_code))
114
- screen_1 = 'CONNECT_EXPRESS_MOBILE_STEP';
115
- thunkApi.dispatch(handleCurrentActiveScreen(screen_1));
118
+ screen_2 = isEmailAuthEnabled(emailAuth, data.country_code) ? 'CONNECT_EXPRESS_EMAIL_STEP' : 'CONNECT_EXPRESS_MOBILE_STEP';
119
+ thunkApi.dispatch(handleCurrentActiveScreen(screen_2));
120
+ return [2, { data: data, countryCode: countryCode }];
121
+ }
122
+ if (!isRegistered && isEmailAuthEnabled(emailAuth, settings.data.businessCountry.iso2)) {
123
+ thunkApi.dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_EMAIL_STEP'));
116
124
  return [2, { data: data, countryCode: countryCode }];
117
125
  }
118
126
  if (!isRegistered && !isSA(settings.data.businessCountry.iso2)) {
@@ -123,11 +131,11 @@ export var retrieveLeadIdentityByIdAsync = createAsyncThunk('expressConnect/retr
123
131
  thunkApi.dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_NID_STEP'));
124
132
  return [2, { data: data, countryCode: countryCode }];
125
133
  }
126
- if ((_d = data === null || data === void 0 ? void 0 : data.identification) === null || _d === void 0 ? void 0 : _d.authentication_id) {
127
- thunkApi.dispatch(storeAuthId((_e = data === null || data === void 0 ? void 0 : data.identification) === null || _e === void 0 ? void 0 : _e.authentication_id));
134
+ if ((_f = data === null || data === void 0 ? void 0 : data.identification) === null || _f === void 0 ? void 0 : _f.authentication_id) {
135
+ thunkApi.dispatch(storeAuthId((_g = data === null || data === void 0 ? void 0 : data.identification) === null || _g === void 0 ? void 0 : _g.authentication_id));
128
136
  }
129
137
  if (isRegistered && !showBoard) {
130
- (_g = (_f = settings.data.appConfig).onFlowCompleted) === null || _g === void 0 ? void 0 : _g.call(_f, data);
138
+ (_j = (_h = settings.data.appConfig).onFlowCompleted) === null || _j === void 0 ? void 0 : _j.call(_h, data);
131
139
  thunkApi.dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_ACCOUNT_ALREADY_CREATED_STEP'));
132
140
  return [2, { data: data, countryCode: countryCode }];
133
141
  }
@@ -136,19 +144,19 @@ export var retrieveLeadIdentityByIdAsync = createAsyncThunk('expressConnect/retr
136
144
  return [2, { data: data, countryCode: countryCode }];
137
145
  }
138
146
  if (!(isRegistered && board_id && board_info_id)) return [3, 5];
139
- _h.label = 2;
147
+ _k.label = 2;
140
148
  case 2:
141
- _h.trys.push([2, 4, , 5]);
149
+ _k.trys.push([2, 4, , 5]);
142
150
  return [4, Promise.all([
143
151
  API.boardService.retrieveBoardInfo({ id: board_id, infoId: board_info_id }),
144
152
  API.boardService.retrieveBoardDetails(board_id)
145
153
  ])];
146
154
  case 3:
147
- _b = _h.sent(), boardInfo = _b[0], boardData = _b[1];
155
+ _b = _k.sent(), boardInfo = _b[0], boardData = _b[1];
148
156
  thunkApi.dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_SUCCESS_WITH_FLOW_BUTTONS_STEP'));
149
157
  return [2, { data: data, countryCode: countryCode, boardInfo: boardInfo, boardData: boardData }];
150
158
  case 4:
151
- error_1 = _h.sent();
159
+ error_1 = _k.sent();
152
160
  thunkApi.dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_ACCOUNT_ALREADY_CREATED_STEP'));
153
161
  return [2, { data: data, countryCode: countryCode }];
154
162
  case 5: return [2, { data: data, countryCode: countryCode }];
@@ -309,6 +317,61 @@ export var resendMobileAuthOTP = createAsyncThunk('connectExpress/resendMobileAu
309
317
  }
310
318
  });
311
319
  }); });
320
+ export var createEmailAuthAsync = createAsyncThunk('connectExpress/createEmailAuthAsync', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
321
+ var _a, settings, connectExpress, requestBody, data;
322
+ var _b, _c;
323
+ return __generator(this, function (_d) {
324
+ switch (_d.label) {
325
+ case 0:
326
+ _a = thunkApi.getState(), settings = _a.settings, connectExpress = _a.connectExpress;
327
+ requestBody = {
328
+ country: settings.data.businessCountry.iso2,
329
+ scope: settings.data.appConfig.scope,
330
+ lang: settings.data.language,
331
+ lead_id: connectExpress.data.leadId,
332
+ user_credentail: {
333
+ email: params.email || ''
334
+ },
335
+ sign_in: false,
336
+ is_lead: true,
337
+ step_name: CONNECT_EXPRESS_STEP_NAMES.CREATE_AUTH_EMAIL,
338
+ encryption_contract: ['user_credentail.email']
339
+ };
340
+ return [4, API.authService.createExpressAuth(requestBody)];
341
+ case 1:
342
+ data = _d.sent();
343
+ thunkApi.dispatch(handleNextScreenStep());
344
+ (_c = (_b = settings.data.appConfig).onStepCompleted) === null || _c === void 0 ? void 0 : _c.call(_b, settings.data.activeScreen.name, requestBody.user_credentail);
345
+ return [2, { response: data, formData: params }];
346
+ }
347
+ });
348
+ }); });
349
+ export var resendEmailAuthOTP = createAsyncThunk('connectExpress/resendEmailAuthOTPExpress', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
350
+ var _a, settings, connectExpress, requestBody, data;
351
+ return __generator(this, function (_b) {
352
+ switch (_b.label) {
353
+ case 0:
354
+ _a = thunkApi.getState(), settings = _a.settings, connectExpress = _a.connectExpress;
355
+ requestBody = {
356
+ country: settings.data.businessCountry.iso2,
357
+ scope: settings.data.appConfig.scope,
358
+ lang: settings.data.language,
359
+ lead_id: connectExpress.data.leadId,
360
+ user_credentail: {
361
+ email: params.email || ''
362
+ },
363
+ sign_in: false,
364
+ is_lead: true,
365
+ step_name: CONNECT_EXPRESS_STEP_NAMES.CREATE_AUTH_EMAIL,
366
+ encryption_contract: ['user_credentail.email']
367
+ };
368
+ return [4, API.authService.createExpressAuth(requestBody)];
369
+ case 1:
370
+ data = _b.sent();
371
+ return [2, { response: data, formData: params }];
372
+ }
373
+ });
374
+ }); });
312
375
  export var createAuthSessionExpiredAsync = createAsyncThunk('connectExpress/createAuthSessionExpiredAsync', function (redirect, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
313
376
  var settings, requestBody, data;
314
377
  return __generator(this, function (_a) {
@@ -614,6 +677,78 @@ export var verifyMobileOtpAsync = createAsyncThunk('connectExpress/verifyMobileO
614
677
  }
615
678
  });
616
679
  }); });
680
+ export var verifyEmailOtpAsync = createAsyncThunk('connectExpress/verifyEmailOtpAsync', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
681
+ var _a, settings, connectExpress, _b, responseData, leadId, _c, auth_token, device_token, service_name, auth_type, _d, scope, redirectUrl, authData, isScopeAuthentication, bi, isDataHasIndividualOnly, authDataHasValue, payload, data, authId, urlQueryStart, _e, brandList, entityList;
682
+ var _f, _g;
683
+ return __generator(this, function (_h) {
684
+ switch (_h.label) {
685
+ case 0:
686
+ _a = thunkApi.getState(), settings = _a.settings, connectExpress = _a.connectExpress;
687
+ _b = connectExpress.data || {}, responseData = _b.responseData, leadId = _b.leadId;
688
+ if (!(responseData === null || responseData === void 0 ? void 0 : responseData.authData))
689
+ throw new Error('Auth data is missing');
690
+ _c = responseData.authData, auth_token = _c.auth_token, device_token = _c.device_token, service_name = _c.service_name, auth_type = _c.auth_type;
691
+ _d = settings.data.appConfig, scope = _d.scope, redirectUrl = _d.redirectUrl, authData = _d.data;
692
+ isScopeAuthentication = scope === SCOPE_AUTH;
693
+ bi = settings.data.deviceInfo.browser.browser_id;
694
+ isDataHasIndividualOnly = (authData === null || authData === void 0 ? void 0 : authData.length) === 1 && authData.includes('individual');
695
+ authDataHasValue = authData === null || authData === void 0 ? void 0 : authData.length;
696
+ payload = {
697
+ auth_token: auth_token,
698
+ lead_id: leadId,
699
+ data: params.otp,
700
+ auth_type: auth_type,
701
+ device_token: device_token,
702
+ service_name: service_name,
703
+ sign_in: false,
704
+ step_name: CONNECT_EXPRESS_STEP_NAMES.VERIFY_AUTH_EMAIL,
705
+ encryption_contract: ['data']
706
+ };
707
+ return [4, API.authService.verifyExpressAuth(payload).catch(function (err) {
708
+ if (isAuthenticationVerificationFailed(err === null || err === void 0 ? void 0 : err.message))
709
+ thunkApi.dispatch(handleNextScreenStep('CONNECT_EXPRESS_OTP_VERIFY_SECURITY_ERROR_STEP'));
710
+ throw new Error(err === null || err === void 0 ? void 0 : err.message);
711
+ })];
712
+ case 1:
713
+ data = _h.sent();
714
+ setAuthSessionToGlobalHeaders(data === null || data === void 0 ? void 0 : data.auth_session);
715
+ sendCustomEventToGTM({
716
+ event: 'Send Event',
717
+ event_category: 'User Registration Flow',
718
+ event_action: 'First OTP Success'
719
+ });
720
+ (_g = (_f = settings.data.appConfig).onStepCompleted) === null || _g === void 0 ? void 0 : _g.call(_f, settings.data.activeScreen.name, params);
721
+ authId = data.auth.id;
722
+ thunkApi.dispatch(storeAuthId(authId));
723
+ if (isScopeAuthentication && !data.new_user && isDataHasIndividualOnly && authId) {
724
+ if (settings.data.appConfig.mode === 'popup') {
725
+ settings.data.appConfig.onFlowCompleted({ auth_id: authId, bi: bi });
726
+ thunkApi.dispatch(handleOpen(false));
727
+ return [2, data];
728
+ }
729
+ if (redirectUrl) {
730
+ urlQueryStart = redirectUrl.includes('?') ? '&' : '?';
731
+ window.open("".concat(redirectUrl).concat(urlQueryStart, "authentication_id=").concat(authId, "&bi=").concat(bi), '_self');
732
+ return [2, data];
733
+ }
734
+ }
735
+ if (!(isScopeAuthentication && !data.new_user && authDataHasValue)) return [3, 3];
736
+ return [4, thunkApi.dispatch(retrieveAuthenticationListAsync({ individualId: data.individual_id })).unwrap()];
737
+ case 2:
738
+ _e = _h.sent(), brandList = _e.brandList, entityList = _e.entityList;
739
+ if (brandList.length && entityList.length) {
740
+ sleep(100).then(function () { return thunkApi.dispatch(handleNextScreenStep('CONNECT_EXPRESS_AUTHENTICATION_LIST_STEP')); });
741
+ return [2, data];
742
+ }
743
+ _h.label = 3;
744
+ case 3: return [4, thunkApi.dispatch(getLeadByIdAsync(data.lead_id)).unwrap()];
745
+ case 4:
746
+ _h.sent();
747
+ sleep(100).then(function () { return thunkApi.dispatch(handleNextScreenStep('CONNECT_EXPRESS_NID_MISSED_STEP')); });
748
+ return [2, data];
749
+ }
750
+ });
751
+ }); });
617
752
  export var verifyPACIAsync = createAsyncThunk('connectExpress/verifyPACIAsync', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
618
753
  var _a, settings, connectExpress, authData, _b, scope, redirectUrl, authConfigData, isScopeAuthentication, bi, isDataHasIndividualOnly, authDataHasValue, expiry, interval, maxCalls, count, data, error_3, isSuccess, authId, urlQueryStart, _c, brandList, entityList, stepName, needToCollectMoreInfo, creatingAccount;
619
754
  var _d, _e, _f;
@@ -1543,6 +1678,9 @@ var initialState = {
1543
1678
  mobile: '',
1544
1679
  termAndConditionChecked: false
1545
1680
  },
1681
+ emailData: {
1682
+ email: ''
1683
+ },
1546
1684
  nidData: {
1547
1685
  nid: '',
1548
1686
  termAndConditionChecked: false
@@ -1647,11 +1785,14 @@ export var connectSlice = createSlice({
1647
1785
  var _b = data || {}, identification = _b.identification, contact = _b.contact, terms_conditions_accepted = _b.terms_conditions_accepted;
1648
1786
  if (identification === null || identification === void 0 ? void 0 : identification.id)
1649
1787
  state.data.nidData.nid = identification === null || identification === void 0 ? void 0 : identification.id;
1650
- var phone = (contact || {}).phone;
1788
+ var _c = contact || {}, phone = _c.phone, email = _c.email;
1651
1789
  if (phone) {
1652
1790
  state.data.mobileData.mobile = phone === null || phone === void 0 ? void 0 : phone.number;
1653
1791
  state.data.mobileData.countryCode = countryCode;
1654
1792
  }
1793
+ if (email) {
1794
+ state.data.emailData.email = email;
1795
+ }
1655
1796
  if (terms_conditions_accepted !== undefined && state.data.isLeadIdPassed) {
1656
1797
  state.data.mobileData.termAndConditionChecked = terms_conditions_accepted;
1657
1798
  state.data.nidData.termAndConditionChecked = terms_conditions_accepted;
@@ -1718,6 +1859,31 @@ export var connectSlice = createSlice({
1718
1859
  })
1719
1860
  .addCase(resendMobileAuthOTP.rejected, function (state, action) {
1720
1861
  state.error = action.error.message;
1862
+ })
1863
+ .addCase(createEmailAuthAsync.pending, function (state) {
1864
+ state.loading = true;
1865
+ state.error = null;
1866
+ })
1867
+ .addCase(createEmailAuthAsync.fulfilled, function (state, action) {
1868
+ state.loading = false;
1869
+ state.data.emailData = action.payload.formData;
1870
+ state.data.otpData.authFor = AuthForType.EMAIL;
1871
+ state.data.responseData = __assign(__assign({}, state.data.responseData), { authData: action.payload.response });
1872
+ })
1873
+ .addCase(createEmailAuthAsync.rejected, function (state, action) {
1874
+ state.loading = false;
1875
+ state.error = action.error.message;
1876
+ })
1877
+ .addCase(resendEmailAuthOTP.pending, function (state) {
1878
+ state.error = null;
1879
+ })
1880
+ .addCase(resendEmailAuthOTP.fulfilled, function (state, action) {
1881
+ state.data.emailData = action.payload.formData;
1882
+ state.data.otpData.authFor = AuthForType.EMAIL;
1883
+ state.data.responseData = __assign(__assign({}, state.data.responseData), { authData: action.payload.response });
1884
+ })
1885
+ .addCase(resendEmailAuthOTP.rejected, function (state, action) {
1886
+ state.error = action.error.message;
1721
1887
  })
1722
1888
  .addCase(createAuthSessionExpiredAsync.pending, function (state) {
1723
1889
  state.loading = true;
@@ -1822,6 +1988,21 @@ export var connectSlice = createSlice({
1822
1988
  state.loading = false;
1823
1989
  if (!isAuthenticationVerificationFailed(message))
1824
1990
  state.error = message;
1991
+ })
1992
+ .addCase(verifyEmailOtpAsync.pending, function (state) {
1993
+ state.loading = true;
1994
+ state.error = null;
1995
+ })
1996
+ .addCase(verifyEmailOtpAsync.fulfilled, function (state, action) {
1997
+ var _a;
1998
+ state.loading = false;
1999
+ state.data.responseData = __assign(__assign({}, state.data.responseData), { authData: __assign(__assign({}, (_a = state.data.responseData) === null || _a === void 0 ? void 0 : _a.authData), action.payload) });
2000
+ })
2001
+ .addCase(verifyEmailOtpAsync.rejected, function (state, _a) {
2002
+ var message = _a.error.message;
2003
+ state.loading = false;
2004
+ if (!isAuthenticationVerificationFailed(message))
2005
+ state.error = message;
1825
2006
  })
1826
2007
  .addCase(verifyNafathAsync.pending, function (state) {
1827
2008
  state.loading = true;
@@ -67,7 +67,7 @@ import { store } from '../../app/store';
67
67
  import { connectExpressSelector, setIsLeadIdPassed, setLeadId, retrieveLeadIdentityByIdAsync, setDefaultCountryCode, clearError, createAuthSessionExpiredAsync } from '../app/connectExpress/connectExpressStore';
68
68
  import { ReduxProvider, ThemeProvider } from '../../components/Providers';
69
69
  import Collapse from '../../components/Collapse';
70
- import { isKW, findOrCreateElementAndInject, sendPageView, isOtherThanKWOrSA, initializeGTM, sendCustomEventToGTM, sendCustomDimension } from '../../utils';
70
+ import { isKW, isEmailAuthEnabled, findOrCreateElementAndInject, sendPageView, isOtherThanKWOrSA, initializeGTM, sendCustomEventToGTM, sendCustomDimension } from '../../utils';
71
71
  import { CONNECT_EXPRESS_SCREENS_NAVIGATION } from '../../constants';
72
72
  import { connectExpressFeatureScreens } from '../featuresScreens';
73
73
  import Background from '../shared/Background';
@@ -123,7 +123,7 @@ var ConnectExpress = memo(function (_a) {
123
123
  }
124
124
  }, [data.businessCountry]);
125
125
  React.useEffect(function () {
126
- var _a, _b;
126
+ var _a, _b, _c, _d;
127
127
  if (settingLoading || !props.open)
128
128
  return;
129
129
  if (!data.isValidOperator) {
@@ -146,7 +146,10 @@ var ConnectExpress = memo(function (_a) {
146
146
  dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP'));
147
147
  return;
148
148
  }
149
- if (((_b = data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2) && (isKW(data.businessCountry.iso2) || isOtherThanKWOrSA(data.businessCountry.iso2))) {
149
+ if (((_b = data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2) && isEmailAuthEnabled((_c = appConfig.features) === null || _c === void 0 ? void 0 : _c.emailAuth, data.businessCountry.iso2)) {
150
+ dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_EMAIL_STEP'));
151
+ }
152
+ else if (((_d = data.businessCountry) === null || _d === void 0 ? void 0 : _d.iso2) && (isKW(data.businessCountry.iso2) || isOtherThanKWOrSA(data.businessCountry.iso2))) {
150
153
  dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_MOBILE_STEP'));
151
154
  }
152
155
  }, [data.isValidOperator, settingLoading]);
@@ -15,7 +15,7 @@ import { useForm, FormProvider } from 'react-hook-form';
15
15
  import { useTranslation } from 'react-i18next';
16
16
  import Collapse from '@mui/material/Collapse';
17
17
  import { yupResolver } from '@hookform/resolvers/yup';
18
- import { useAppDispatch, useAppSelector } from '../../../../hooks';
18
+ import { useAppDispatch, useAppSelector, useIsEmailAuth } from '../../../../hooks';
19
19
  import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
20
20
  import { deepCopy, isKW, isSA, sendCustomEventToGTM } from '../../../../utils';
21
21
  import { AuthForType } from '../../../../@types';
@@ -45,6 +45,7 @@ var AuthenticationList = function (_a) {
45
45
  var _g = React.useState(false), isAddEntity = _g[0], setIsAddEntity = _g[1];
46
46
  var otpData = data.otpData;
47
47
  var startWithNID = otpData.authFor === AuthForType.NATIONAL_ID;
48
+ var startWithEmail = useIsEmailAuth();
48
49
  React.useEffect(function () {
49
50
  sendCustomEventToGTM({
50
51
  event: 'Send Event',
@@ -83,7 +84,9 @@ var AuthenticationList = function (_a) {
83
84
  methods.setValue('entityInfo', undefined, { shouldValidate: true });
84
85
  return;
85
86
  }
86
- var screen = startWithNID ? (isKW(code) ? 'CONNECT_EXPRESS_CIVIL_ID_STEP' : 'CONNECT_EXPRESS_NID_STEP') : 'CONNECT_EXPRESS_MOBILE_STEP';
87
+ var screen = startWithEmail ? 'CONNECT_EXPRESS_EMAIL_STEP' : 'CONNECT_EXPRESS_MOBILE_STEP';
88
+ if (startWithNID)
89
+ screen = isKW(code) ? 'CONNECT_EXPRESS_CIVIL_ID_STEP' : 'CONNECT_EXPRESS_NID_STEP';
87
90
  dispatch(resetAuthenticationScreen());
88
91
  dispatch(handlePrevScreenStep(screen));
89
92
  };
@@ -53,7 +53,7 @@ import { ScreenContainer } from '../../../shared/Containers';
53
53
  import BusinessCountry from '../../../shared/BusinessCountry';
54
54
  import Button from '../../../shared/Button';
55
55
  import Collapse from '../../../../components/Collapse';
56
- import { findCountryByIso2, isKW, isOtherThanKWOrSA, sendCustomEventToGTM } from '../../../../utils';
56
+ import { findCountryByIso2, isKW, isEmailAuthEnabled, isOtherThanKWOrSA, sendCustomEventToGTM } from '../../../../utils';
57
57
  import { handleNextScreenStep, handleSetCountryByIso2, settingsSelector } from '../../../../app/settings';
58
58
  import { clearError, connectExpressSelector, setDefaultCountryCode, storeIsStartFromBusinessCountry, updateBusinessCountryAsync } from '../../../app/connectExpress/connectExpressStore';
59
59
  var BusinessCountryScreen = function (_a) {
@@ -74,8 +74,9 @@ var BusinessCountryScreen = function (_a) {
74
74
  }, [settingsData.businessCountry, settingsData.ipCountry]);
75
75
  var onSelectCountry = function (iso2) { return __awaiter(void 0, void 0, void 0, function () {
76
76
  var countryCode;
77
- return __generator(this, function (_a) {
78
- switch (_a.label) {
77
+ var _a;
78
+ return __generator(this, function (_b) {
79
+ switch (_b.label) {
79
80
  case 0:
80
81
  if (!iso2)
81
82
  return [2];
@@ -90,11 +91,15 @@ var BusinessCountryScreen = function (_a) {
90
91
  if (!data.leadId) return [3, 2];
91
92
  return [4, dispatch(updateBusinessCountryAsync(iso2))];
92
93
  case 1:
93
- _a.sent();
94
- _a.label = 2;
94
+ _b.sent();
95
+ _b.label = 2;
95
96
  case 2:
96
97
  if (countryCode)
97
98
  dispatch(setDefaultCountryCode(countryCode));
99
+ if (isEmailAuthEnabled((_a = settingsData.appConfig.features) === null || _a === void 0 ? void 0 : _a.emailAuth, iso2)) {
100
+ dispatch(handleNextScreenStep('CONNECT_EXPRESS_EMAIL_STEP'));
101
+ return [2];
102
+ }
98
103
  if (isOtherThanKWOrSA(iso2) || isKW(iso2)) {
99
104
  dispatch(handleNextScreenStep('CONNECT_EXPRESS_MOBILE_STEP'));
100
105
  return [2];
@@ -17,7 +17,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
17
17
  import { styled } from '@mui/material/styles';
18
18
  import { useAppDispatch, useAppSelector, useExcludeReadOnlyFelids, useFormErrorAndUpdateReadOnly, useFormReadOnly, useSetFromDefaultValues } from '../../../../hooks';
19
19
  import { AuthForType } from '../../../../@types';
20
- import { useLanguage } from '../../../../hooks';
20
+ import { useLanguage, useIsEmailAuth } from '../../../../hooks';
21
21
  import { deepCopy, isKW, sendCustomEventToGTM } from '../../../../utils';
22
22
  import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
23
23
  import Form from '../../../../components/Form';
@@ -45,6 +45,7 @@ var CollectIndividualInfo = function (_a) {
45
45
  var t = useTranslation().t;
46
46
  var isAr = useLanguage().isAr;
47
47
  var individualData = data.individualData, otpData = data.otpData, responseData = data.responseData;
48
+ var startWithEmail = useIsEmailAuth();
48
49
  var startWithNID = otpData.authFor === AuthForType.NATIONAL_ID;
49
50
  var startWithNIDMissed = otpData.authFor === AuthForType.NATIONAL_ID_MISSED;
50
51
  var contact = ((responseData === null || responseData === void 0 ? void 0 : responseData.leadData) || {}).contact;
@@ -82,7 +83,7 @@ var CollectIndividualInfo = function (_a) {
82
83
  dispatch(resetIndividualScreen());
83
84
  }
84
85
  var code = (_a = settingsData.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2;
85
- var screen = 'CONNECT_EXPRESS_MOBILE_STEP';
86
+ var screen = startWithEmail ? 'CONNECT_EXPRESS_EMAIL_STEP' : 'CONNECT_EXPRESS_MOBILE_STEP';
86
87
  if (startWithNID) {
87
88
  if (isKW(code))
88
89
  screen = 'CONNECT_EXPRESS_CIVIL_ID_STEP';
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ export interface EmailProps {
3
+ }
4
+ declare const _default: React.MemoExoticComponent<({}: EmailProps) => JSX.Element>;
5
+ export default _default;
@@ -0,0 +1,57 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import * as React from 'react';
14
+ import { useTranslation } from 'react-i18next';
15
+ import { useForm, FormProvider } from 'react-hook-form';
16
+ import { styled } from '@mui/material/styles';
17
+ import { yupResolver } from '@hookform/resolvers/yup';
18
+ import { useAppDispatch, useLanguage, useAppSelector } from '../../../../hooks';
19
+ import { handleCurrentActiveScreen } from '../../../../app/settings';
20
+ import { clearError, connectExpressSelector, createEmailAuthAsync, resetStore } from '../../../app/connectExpress/connectExpressStore';
21
+ import Form from '../../../../components/Form';
22
+ import Button from '../../../shared/Button';
23
+ import { ScreenContainer } from '../../../shared/Containers';
24
+ import { deepCopy } from '../../../../utils';
25
+ import { EmailInfoValidation } from './validation';
26
+ import EmailField from './EmailField';
27
+ var FormStyled = styled(Form)(function () { return ({
28
+ display: 'flex',
29
+ flexDirection: 'column'
30
+ }); });
31
+ var Email = function (_a) {
32
+ var isAr = useLanguage().isAr;
33
+ var dispatch = useAppDispatch();
34
+ var t = useTranslation().t;
35
+ var _b = useAppSelector(connectExpressSelector), data = _b.data, loading = _b.loading, error = _b.error;
36
+ var methods = useForm({
37
+ resolver: yupResolver(EmailInfoValidation),
38
+ defaultValues: data.emailData,
39
+ mode: 'onChange'
40
+ });
41
+ React.useEffect(function () {
42
+ if (error)
43
+ dispatch(clearError());
44
+ }, [methods.formState.isValid]);
45
+ React.useEffect(function () {
46
+ dispatch(resetStore());
47
+ }, []);
48
+ var onSubmit = function (formData) {
49
+ dispatch(createEmailAuthAsync(deepCopy(formData)));
50
+ };
51
+ var onBackToCountryList = function () {
52
+ dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP'));
53
+ };
54
+ var disabled = !methods.formState.isValid;
55
+ return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(EmailField, { sx: { mb: 5, transition: 'mb 0.3s' } }), _jsx(Button, __assign({ loading: loading, isAr: isAr, onBackClicked: onBackToCountryList, disableBack: !data.isStartFromBusinessCountry, disabled: disabled, error: t(error || '') }, { children: t('next') }))] })) })) }));
56
+ };
57
+ export default React.memo(Email);
@@ -0,0 +1,8 @@
1
+ import * as React from 'react';
2
+ import { SxProps, Theme } from '@mui/material/styles';
3
+ interface EmailFieldProps {
4
+ sx: SxProps<Theme> | undefined;
5
+ readOnly?: boolean;
6
+ }
7
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<EmailFieldProps & React.RefAttributes<unknown>>>;
8
+ export default _default;
@@ -0,0 +1,52 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import * as React from 'react';
14
+ import { useTranslation } from 'react-i18next';
15
+ import { useController, useFormContext } from 'react-hook-form';
16
+ import Box from '@mui/material/Box';
17
+ import { styled, alpha } from '@mui/material/styles';
18
+ import Text from '../../../../components/Text';
19
+ import { MAX_EMAIL_LENGTH } from '../../../../constants';
20
+ import Input from '../../../shared/Input';
21
+ import ScreenContainer from '../../../shared/Containers/ScreenContainer';
22
+ import { EndAdornment } from '../../../shared/EndAdornment';
23
+ var LabelContainerStyled = styled(Box)(function (_a) {
24
+ var theme = _a.theme;
25
+ return ({
26
+ display: 'flex',
27
+ justifyContent: 'space-between',
28
+ padding: theme.spacing(0, 2.5, 1.25, 2.5)
29
+ });
30
+ });
31
+ var InputLabelStyled = styled(Text)(function (_a) {
32
+ var theme = _a.theme;
33
+ return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
34
+ });
35
+ var EmailField = React.forwardRef(function (_a, ref) {
36
+ var _b;
37
+ var sx = _a.sx, readOnly = _a.readOnly;
38
+ var t = useTranslation().t;
39
+ var control = useFormContext().control;
40
+ var emailControl = useController({ control: control, name: 'email' });
41
+ var handleEmailChange = function (_a) {
42
+ var target = _a.target;
43
+ emailControl.field.onChange(target.value);
44
+ };
45
+ var clearEmail = function () {
46
+ emailControl.field.onChange('');
47
+ };
48
+ var emailValue = emailControl.field.value;
49
+ var error = (_b = emailControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
50
+ return (_jsxs(ScreenContainer, __assign({ ref: ref, sx: sx }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_email_lable') }) }), _jsx(Input, { type: 'email', readOnly: readOnly, inputProps: { maxLength: MAX_EMAIL_LENGTH }, onChange: handleEmailChange, value: emailValue, endAdornment: _jsx(EndAdornment, { value: emailValue, error: error, onClear: clearEmail }), placeholder: t('signup_email_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true })] })));
51
+ });
52
+ export default React.memo(EmailField);
@@ -0,0 +1,3 @@
1
+ import Email, { EmailProps } from './Email';
2
+ export type { EmailProps };
3
+ export default Email;
@@ -0,0 +1,2 @@
1
+ import Email from './Email';
2
+ export default Email;
@@ -0,0 +1,8 @@
1
+ import * as yup from 'yup';
2
+ export declare const EmailInfoValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
3
+ email: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
4
+ }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
5
+ email: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
6
+ }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
7
+ email: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
8
+ }>>>;
@@ -0,0 +1,4 @@
1
+ import * as yup from 'yup';
2
+ export var EmailInfoValidation = yup.object().shape({
3
+ email: yup.string().email('email_not_valid').required('email_not_valid')
4
+ });
@@ -16,7 +16,7 @@ import { styled } from '@mui/material/styles';
16
16
  import { useForm, FormProvider } from 'react-hook-form';
17
17
  import { yupResolver } from '@hookform/resolvers/yup';
18
18
  import { NIDOtherCountryValidationSchema, NIDValidationSchema } from './validation';
19
- import { useAppDispatch, useLanguage, useAppSelector } from '../../../../hooks';
19
+ import { useAppDispatch, useLanguage, useAppSelector, useIsEmailAuth } from '../../../../hooks';
20
20
  import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
21
21
  import { clearError, connectExpressSelector, createNIDNafathAuthIdentityAsync } from '../../../app/connectExpress/connectExpressStore';
22
22
  import Form from '../../../../components/Form';
@@ -38,6 +38,7 @@ var NID = function (_a) {
38
38
  var settingsData = useAppSelector(settingsSelector).data;
39
39
  var _c = useAppSelector(connectExpressSelector), data = _c.data, loading = _c.loading, error = _c.error;
40
40
  var isOtherCountry = React.useMemo(function () { return isOtherThanKWOrSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
41
+ var startWithEmail = useIsEmailAuth();
41
42
  var methods = useForm({
42
43
  resolver: yupResolver(isOtherCountry ? NIDOtherCountryValidationSchema : NIDValidationSchema),
43
44
  defaultValues: data.nidData,
@@ -54,7 +55,8 @@ var NID = function (_a) {
54
55
  setCollapse(flag);
55
56
  };
56
57
  var onBack = function () {
57
- dispatch(handlePrevScreenStep());
58
+ var screen = startWithEmail ? 'CONNECT_EXPRESS_EMAIL_STEP' : 'CONNECT_EXPRESS_MOBILE_STEP';
59
+ dispatch(handlePrevScreenStep(screen));
58
60
  };
59
61
  var disabled = !methods.formState.isValid;
60
62
  return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(Collapse, __assign({ in: isOtherCountry }, { children: _jsx(DOB, { onDateClicked: handleCollapseOpenClose }) })), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(Button, __assign({ sx: !isOtherCountry ? { mt: 10 } : {}, loading: loading, isAr: isAr, onBackClicked: onBack, disabled: disabled, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
@@ -13,18 +13,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import Box from '@mui/material/Box/Box';
14
14
  import { styled } from '@mui/material/styles';
15
15
  import * as React from 'react';
16
- import { useTranslation } from 'react-i18next';
17
16
  import Text from '../../../../components/Text';
18
- import { clearError, connectExpressSelector, verifyMobileOtpAsync, resetOTPValue } from '../../../app/connectExpress/connectExpressStore';
17
+ import { clearError, connectExpressSelector, verifyMobileOtpAsync, verifyEmailOtpAsync, resetOTPValue } from '../../../app/connectExpress/connectExpressStore';
19
18
  import Button from '../../../shared/Button';
20
19
  import { ScreenContainer } from '../../../shared/Containers';
21
- import { useAppDispatch, useAppSelector, useSanitizedTranslation } from '../../../../hooks';
20
+ import { useAppDispatch, useAppSelector, useSanitizedTranslation, useIsEmailAuth } from '../../../../hooks';
22
21
  import { handlePrevScreenStep } from '../../../../app/settings';
23
22
  import { useLanguage } from '../../../../hooks';
24
23
  import { useForm, FormProvider } from 'react-hook-form';
25
24
  import { yupResolver } from '@hookform/resolvers/yup';
26
25
  import Form from '../../../../components/Form';
27
- import { maskPhone, deepCopy, sendCustomEventToGTM } from '../../../../utils';
26
+ import { maskPhone, deepCopy, sendCustomEventToGTM, maskEmail } from '../../../../utils';
28
27
  import { OTPValidation } from './validation';
29
28
  import OTPInput from './OTPInput';
30
29
  var OTPTitleContainerStyled = styled(Box)(function (_a) {
@@ -50,9 +49,9 @@ var OTP = function () {
50
49
  var _a;
51
50
  var dispatch = useAppDispatch();
52
51
  var _b = useAppSelector(connectExpressSelector), data = _b.data, loading = _b.loading, error = _b.error;
53
- var t = useTranslation().t;
54
52
  var st = useSanitizedTranslation();
55
53
  var isAr = useLanguage().isAr;
54
+ var isEmailFlow = useIsEmailAuth();
56
55
  var methods = useForm({
57
56
  resolver: yupResolver(OTPValidation),
58
57
  defaultValues: data.otpData,
@@ -73,14 +72,21 @@ var OTP = function () {
73
72
  };
74
73
  }, []);
75
74
  var onSubmit = function (formData) {
76
- dispatch(verifyMobileOtpAsync(deepCopy(formData)));
75
+ if (isEmailFlow) {
76
+ dispatch(verifyEmailOtpAsync(deepCopy(formData)));
77
+ }
78
+ else {
79
+ dispatch(verifyMobileOtpAsync(deepCopy(formData)));
80
+ }
77
81
  };
78
82
  var onBack = function () {
79
- dispatch(handlePrevScreenStep());
83
+ var screen = isEmailFlow ? 'CONNECT_EXPRESS_EMAIL_STEP' : 'CONNECT_EXPRESS_MOBILE_STEP';
84
+ dispatch(handlePrevScreenStep(screen));
80
85
  };
81
86
  var disabled = !methods.formState.isValid;
82
87
  var phone = data.mobileData.mobile ? ((_a = data.mobileData.countryCode) === null || _a === void 0 ? void 0 : _a.idd_prefix) + data.mobileData.mobile : '';
83
- var title = t('ide_opt_sent_title');
84
- return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? st('ide_otp_waiting_title') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: st(error || '') }, { children: t('next') }))] })) })) }));
88
+ var contactInfo = isEmailFlow ? maskEmail(data.emailData.email) : maskPhone(phone);
89
+ var title = isEmailFlow ? st('otp_email_sent_title') : st('ide_opt_sent_title');
90
+ return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? st('ide_otp_waiting_title') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: contactInfo }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: st(error || '') }, { children: st('next') }))] })) })) }));
85
91
  };
86
92
  export default React.memo(OTP);
@@ -17,8 +17,8 @@ import Box from '@mui/material/Box/Box';
17
17
  import { styled } from '@mui/material/styles';
18
18
  import OTPField from '../../../shared/OTP';
19
19
  import { DEFAULT_TIMER_VALUE } from '../../../../constants';
20
- import { resendMobileAuthOTP, connectExpressSelector, clearError } from '../../../app/connectExpress/connectExpressStore';
21
- import { useAppDispatch, useAppSelector } from '../../../../hooks';
20
+ import { resendMobileAuthOTP, resendEmailAuthOTP, connectExpressSelector, clearError } from '../../../app/connectExpress/connectExpressStore';
21
+ import { useAppDispatch, useAppSelector, useIsEmailAuth } from '../../../../hooks';
22
22
  import { sendCustomEventToGTM } from '../../../../utils';
23
23
  var BoxStyled = styled(Box)(function (_a) {
24
24
  var theme = _a.theme;
@@ -34,7 +34,8 @@ var OTPInput = function (_a) {
34
34
  var dispatch = useAppDispatch();
35
35
  var otpControl = useController({ name: 'otp', control: control });
36
36
  var _c = useAppSelector(connectExpressSelector), data = _c.data, error = _c.error;
37
- var mobileData = data.mobileData;
37
+ var mobileData = data.mobileData, emailData = data.emailData;
38
+ var isEmailFlow = useIsEmailAuth();
38
39
  var sendEventAskAnotherOTP = function () {
39
40
  sendCustomEventToGTM({
40
41
  event: 'Send Event',
@@ -51,7 +52,12 @@ var OTPInput = function (_a) {
51
52
  if (otpControl.field.value)
52
53
  setValue('otp', '', { shouldValidate: true });
53
54
  sendEventAskAnotherOTP();
54
- dispatch(resendMobileAuthOTP(mobileData));
55
+ if (isEmailFlow) {
56
+ dispatch(resendEmailAuthOTP(emailData));
57
+ }
58
+ else {
59
+ dispatch(resendMobileAuthOTP(mobileData));
60
+ }
55
61
  };
56
62
  var otpValue = otpControl.field.value;
57
63
  return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
@@ -17,6 +17,7 @@ import OTPVerifySecurityError from './shared/OTPVerifySecurityError';
17
17
  import OTPSessionExpired from './connect/screens/OTPSessionExpired';
18
18
  import ConnectExpressBusinessCountry from './connectExpress/screens/BusinessCountry/BusinessCountry';
19
19
  import ConnectExpressMobileScreen from './connectExpress/screens/Mobile';
20
+ import ConnectExpressEmailScreen from './connectExpress/screens/Email';
20
21
  import ConnectExpressNIDScreen from './connectExpress/screens/NID';
21
22
  import ConnectExpressVerifyNafathScreen from './connectExpress/screens/VerifyNafath';
22
23
  import ConnectExpressCivilIDScreen from './connectExpress/screens/CivilID';
@@ -261,6 +262,10 @@ export var connectExpressFeatureScreens = [
261
262
  name: 'CONNECT_EXPRESS_MOBILE_STEP',
262
263
  element: ConnectExpressMobileScreen
263
264
  },
265
+ {
266
+ name: 'CONNECT_EXPRESS_EMAIL_STEP',
267
+ element: ConnectExpressEmailScreen
268
+ },
264
269
  {
265
270
  name: 'CONNECT_EXPRESS_OTP_STEP',
266
271
  element: ConnectExpressOTPScreen
@@ -15,6 +15,7 @@ export * from './useSetFromDefaultValues';
15
15
  export * from './useCountUp';
16
16
  export * from './useCountDown';
17
17
  export * from './useCountry';
18
+ export * from './useIsEmailAuth';
18
19
  export * from './useVerifyToken';
19
20
  export * from './useFormReadOnly';
20
21
  export * from './useDataNoneEditable';
@@ -15,6 +15,7 @@ export * from './useSetFromDefaultValues';
15
15
  export * from './useCountUp';
16
16
  export * from './useCountDown';
17
17
  export * from './useCountry';
18
+ export * from './useIsEmailAuth';
18
19
  export * from './useVerifyToken';
19
20
  export * from './useFormReadOnly';
20
21
  export * from './useDataNoneEditable';
@@ -31,7 +31,7 @@ export var useAppConfig = function (_a) {
31
31
  var data = useAppSelector(settingsSelector).data;
32
32
  var setAppConfig = function () {
33
33
  if (!disableSettingFetching) {
34
- dispatch(handleSetAppConfig(__assign({ appInfo: appInfo, publicKey: publicKey, scope: scope === null || scope === void 0 ? void 0 : scope.toLowerCase(), mode: mode !== null && mode !== void 0 ? mode : 'page', showBoard: showBoard !== null && showBoard !== void 0 ? showBoard : true, features: __assign({ merchantLogo: true, switchLanguage: true, overlay: true, loaderOverlay: true }, features) }, rest)));
34
+ dispatch(handleSetAppConfig(__assign({ appInfo: appInfo, publicKey: publicKey, scope: scope === null || scope === void 0 ? void 0 : scope.toLowerCase(), mode: mode !== null && mode !== void 0 ? mode : 'page', showBoard: showBoard !== null && showBoard !== void 0 ? showBoard : true, features: __assign({ merchantLogo: true, switchLanguage: true, overlay: true, loaderOverlay: true, emailAuth: true }, features) }, rest)));
35
35
  }
36
36
  dispatch(handleActiveFlowScreens(navigation));
37
37
  };
@@ -1,5 +1,6 @@
1
1
  export declare const useCountry: (code: string) => {
2
2
  isKuwait: boolean;
3
3
  isSaudi: boolean;
4
+ isQatar: boolean;
4
5
  isOther: boolean;
5
6
  };
@@ -1,8 +1,9 @@
1
- import { isKW, isSA } from '../utils';
1
+ import { isKW, isSA, isQA } from '../utils';
2
2
  import { useMemo } from 'react';
3
3
  export var useCountry = function (code) {
4
4
  var isKuwait = useMemo(function () { return isKW(code); }, [code]);
5
5
  var isSaudi = useMemo(function () { return isSA(code); }, [code]);
6
+ var isQatar = useMemo(function () { return isQA(code); }, [code]);
6
7
  var isOther = useMemo(function () { return !isKW(code) && !isSA(code); }, [code]);
7
- return { isKuwait: isKuwait, isSaudi: isSaudi, isOther: isOther };
8
+ return { isKuwait: isKuwait, isSaudi: isSaudi, isQatar: isQatar, isOther: isOther };
8
9
  };
@@ -0,0 +1 @@
1
+ export declare const useIsEmailAuth: () => boolean | undefined;
@@ -0,0 +1,11 @@
1
+ import { useMemo } from 'react';
2
+ import { useAppSelector } from './useAppSelector';
3
+ import { settingsSelector } from '../app/settings';
4
+ import { isEmailAuthEnabled } from '../utils';
5
+ export var useIsEmailAuth = function () {
6
+ var _a, _b;
7
+ var settingsData = useAppSelector(settingsSelector).data;
8
+ var emailAuth = (_a = settingsData.appConfig.features) === null || _a === void 0 ? void 0 : _a.emailAuth;
9
+ var countryIso2 = (_b = settingsData.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2;
10
+ return useMemo(function () { return isEmailAuthEnabled(emailAuth, countryIso2); }, [emailAuth, countryIso2]);
11
+ };
@@ -48,6 +48,8 @@ export declare const getEighteenYearsAgo: () => string;
48
48
  export declare const isKW: (flag: string) => boolean;
49
49
  export declare const isSA: (flag: string | undefined) => boolean;
50
50
  export declare const isOtherThanKWOrSA: (flag: string) => boolean;
51
+ export declare const isQA: (flag: string | undefined) => boolean;
52
+ export declare const isEmailAuthEnabled: (emailAuth: boolean | undefined, countryIso2: string | undefined) => boolean | undefined;
51
53
  export declare const isKWOrSA: (flag: string) => boolean;
52
54
  export declare const isLinkedIn: (flag: string) => boolean;
53
55
  export declare const isTwitter: (flag: string) => boolean;
@@ -224,6 +224,14 @@ export var isSA = function (flag) {
224
224
  export var isOtherThanKWOrSA = function (flag) {
225
225
  return !isKW(flag) && !isSA(flag);
226
226
  };
227
+ export var isQA = function (flag) {
228
+ if (!flag)
229
+ return false;
230
+ return ['qa', 'qat'].includes(flag.toLowerCase());
231
+ };
232
+ export var isEmailAuthEnabled = function (emailAuth, countryIso2) {
233
+ return emailAuth && isQA(countryIso2);
234
+ };
227
235
  export var isKWOrSA = function (flag) {
228
236
  return isKW(flag) || isSA(flag);
229
237
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tap-payments/auth-jsconnect",
3
- "version": "2.12.7",
3
+ "version": "2.12.8-sandbox",
4
4
  "description": "connect library, auth",
5
5
  "private": false,
6
6
  "main": "build/index.js",
@@ -21,7 +21,7 @@
21
21
  "copy:files": "copyfiles -u 1 src/**/*.css build/",
22
22
  "tsc:alias": "tsc-alias -p tsconfig.json",
23
23
  "ts:build": "rm -rf build && tsc -p tsconfig.json && tsc-alias -p tsconfig.json && yarn copy:files",
24
- "push": "npm publish --access public"
24
+ "push": "npm publish --access public --tag sandbox"
25
25
  },
26
26
  "keywords": [],
27
27
  "author": {