@tap-payments/auth-jsconnect 2.8.51-development → 2.8.52-development

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

@@ -60,7 +60,7 @@ import { AuthForType, AuthTypeNumber, FlowsTypes, MigrationStatus } from '../../
 import { ADD_NEW_ENTITY, AUTH_STEP_NAMES, IDENTIFICATION_TYPE, defaultCountry } from '../../../constants';
 import API from '../../../api';
 import { handleCurrentActiveScreen, handleNextScreenStep, handleOpen, handlePrevScreenStep, handleSetCountryByIso2 } from '../../../app/settings';
-import { findCountryByIddPrefix, openConnect, sleep } from '../../../utils';
+import { findCountryByIddPrefix, openConnect, sendCustomEventToGTM, sleep } from '../../../utils';
 export var updateBusinessCountry = createAsyncThunk('auth/updateBusinessCountry', function (countryCode, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var auth, payload, data;
     return __generator(this, function (_a) {
@@ -198,6 +198,11 @@ export var verifyMobileOtp = createAsyncThunk('auth/verifyMobileOtp', function (
                 data = (_h.sent()).data;
                 if ((_e = data.errors) === null || _e === void 0 ? void 0 : _e.length)
                     throw new Error(data.errors[0].description);
+                sendCustomEventToGTM({
+                    event: 'Send Event',
+                    event_category: 'User Registration Flow',
+                    event_action: 'First OTP Success'
+                });
                 if (scope === 'merchant') {
                     openConnect(settings.data.appConfig.publicKey, settings.data.businessCountry.iso2);
                     return [2, data];
@@ -342,6 +347,11 @@ export var verifyEmailOtp = createAsyncThunk('auth/verifyEmailOtp', function (pa
                 data = (_h.sent()).data;
                 if ((_e = data.errors) === null || _e === void 0 ? void 0 : _e.length)
                     throw new Error(data.errors[0].description);
+                sendCustomEventToGTM({
+                    event: 'Send Event',
+                    event_category: 'User Registration Flow',
+                    event_action: 'First OTP Success'
+                });
                 if (scope === 'merchant') {
                     openConnect(settings.data.appConfig.publicKey, settings.data.businessCountry.iso2);
                     return [2, data];
@@ -460,6 +470,11 @@ export var verifyNIDOtp = createAsyncThunk('auth/verifyNIDOtp', function (params
                 data = (_h.sent()).data;
                 if ((_e = data.errors) === null || _e === void 0 ? void 0 : _e.length)
                     throw new Error(data.errors[0].description);
+                sendCustomEventToGTM({
+                    event: 'Send Event',
+                    event_category: 'User Registration Flow',
+                    event_action: 'First OTP Success'
+                });
                 if (scope === 'merchant') {
                     openConnect(settings.data.appConfig.publicKey, settings.data.businessCountry.iso2);
                     return [2, data];
@@ -574,7 +589,13 @@ export var checkMigrationStatus = createAsyncThunk('auth/checkMigrationStatus',
                                     throw new Error('please_try_again_after_few_minutes');
                                 }
                                 _a.label = 5;
-                            case 5: return [4, thunkApi.dispatch(confirmInfo({ authId: authId }))];
+                            case 5:
+                                sendCustomEventToGTM({
+                                    event: 'Send Event',
+                                    event_category: 'User Registration Flow',
+                                    event_action: 'Migration Completed'
+                                });
+                                return [4, thunkApi.dispatch(confirmInfo({ authId: authId }))];
                             case 6:
                                 _a.sent();
                                 return [2];

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

@@ -61,7 +61,7 @@ import { FlowsTypes, AuthForType, BusinessType, LicenseType } from '../../../@ty
 import API from '../../../api';
 import { ADD_NEW_ENTITY, CONNECT_EXPRESS_STEP_NAMES, IDENTIFICATION_TYPE, OTHER_CR_LICENSE, OTHER_FL_LICENSE, SCOPE_AUTH } from '../../../constants';
 import { defaultCountry } from '../../../constants';
-import { getIndividualName, capitalizeTheFirstLetterOfEachWord, sleep, findCountryByIddPrefix, concatenateObjectValues, isSA, isKW, isOtherThanKWOrSA, sendCustomEventToGTM } from '../../../utils';
+import { getIndividualName, capitalizeTheFirstLetterOfEachWord, sleep, findCountryByIddPrefix, concatenateObjectValues, isSA, isKW, isOtherThanKWOrSA, sendCustomEventToGTM, sendCustomDimension } from '../../../utils';
 export var updateBusinessCountryAsync = createAsyncThunk('connectExpress/updateBusinessCountryAsync', function (countryCode, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var connectExpress, payload, data;
     return __generator(this, function (_a) {
@@ -447,6 +447,11 @@ export var verifyMobileOtpAsync = createAsyncThunk('connectExpress/verifyMobileO
                 return [4, API.authService.verifyExpressAuth(payload)];
             case 1:
                 data = _h.sent();
+                sendCustomEventToGTM({
+                    event: 'Send Event',
+                    event_category: 'User Registration Flow',
+                    event_action: 'First OTP Success'
+                });
                 (_g = (_f = settings.data.appConfig).onStepCompleted) === null || _g === void 0 ? void 0 : _g.call(_f, settings.data.activeScreen.name, params);
                 authId = data.auth.id;
                 thunkApi.dispatch(storeAuthId(authId));
@@ -514,6 +519,11 @@ export var verifyNIDOtpAsync = createAsyncThunk('connectExpress/verifyNIDOtpAsyn
                 return [4, API.authService.verifyExpressAuth(payload)];
             case 1:
                 data = _h.sent();
+                sendCustomEventToGTM({
+                    event: 'Send Event',
+                    event_category: 'User Registration Flow',
+                    event_action: 'First OTP Success'
+                });
                 (_g = (_f = settings.data.appConfig).onStepCompleted) === null || _g === void 0 ? void 0 : _g.call(_f, settings.data.activeScreen.name, params);
                 authId = data.auth.id;
                 thunkApi.dispatch(storeAuthId(authId));
@@ -757,6 +767,11 @@ export var verifyNIDOtpLeadIdentityAsync = createAsyncThunk('connectExpress/veri
                 return [4, API.authService.verifyExpressLeadIdentity(payload)];
             case 1:
                 data = _e.sent();
+                sendCustomEventToGTM({
+                    event: 'Send Event',
+                    event_category: 'User Registration Flow',
+                    event_action: 'Absher OTP Success'
+                });
                 return [4, thunkApi.dispatch(getLeadByIdAsync(data.lead.id)).unwrap()];
             case 2:
                 _e.sent();
@@ -916,6 +931,10 @@ export var createAccountAsync = createAsyncThunk('connectExpress/createAccountAs
                         event_label: 'Product Type',
                         event_value: leadId
                     });
+                    sendCustomDimension({
+                        event: 'PageView',
+                        lead_ID: leadId
+                    });
                     (_m = (_l = settings.data.appConfig).onCreated) === null || _m === void 0 ? void 0 : _m.call(_l, accountData);
                     (_p = (_o = settings.data.appConfig).onFlowCompleted) === null || _p === void 0 ? void 0 : _p.call(_o, accountData);
                     (_r = (_q = settings.data.appConfig).onStepCompleted) === null || _r === void 0 ? void 0 : _r.call(_q, settings.data.activeScreen.name, accountData);

package/build/features/auth/Auth.js

@@ -89,7 +89,11 @@ var Auth = memo(function (_a) {
         });
     }); };
     useAppConfig(__assign(__assign(__assign({ postURL: postURL, navigation: AUTH_SCREENS_NAVIGATION }, props), { configToken: configToken }), (configToken && { onVerifyConfigTokenSuccess: onVerifyConfigTokenSuccess })));
-    useErrorListener(authError || error);
+    useErrorListener(authError || error, {
+        event: 'Send Event',
+        event_category: 'User Registration Flow',
+        event_action: 'Registration Error'
+    });
     useStepStartedListener();
     var activeScreen = settingData.activeScreen, isTapOrigin = settingData.isTapOrigin, open = settingData.open, merchant = settingData.merchant, appConfig = settingData.appConfig;
     var animationDirection = open ? openAnimationDirection : closeAnimationDirection;

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

@@ -24,7 +24,7 @@ import { handlePrevScreenStep } from '../../../../app/settings';
 import { AuthForType, AuthTypeNumber } from '../../../../@types';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Form from '../../../../components/Form';
-import { maskPhone, maskID, deepCopy, maskEmail } from '../../../../utils';
+import { maskPhone, maskID, deepCopy, maskEmail, sendCustomEventToGTM } from '../../../../utils';
 import { OTPValidation } from './validation';
 import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
@@ -89,6 +89,11 @@ var OTP = function () {
             dispatch(clearError());
     }, [methods.formState.isValid]);
     React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'First OTP Page Viewed'
+        });
         return function () {
             dispatch(resetOTPValue());
         };

package/build/features/auth/screens/OTP/OTPInput.js

@@ -20,6 +20,7 @@ import { DEFAULT_TIMER_VALUE } from '../../../../constants';
 import { AuthForType } from '../../../../@types';
 import { resendMobileAuthOTP, resendNIDAuthOTP, authSelector, clearError, resendEmailAuthOTP } from '../../../app/auth/authStore';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { sendCustomEventToGTM } from '../../../../utils';
 var BoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -42,19 +43,29 @@ var OTPInput = function (_a) {
             dispatch(clearError());
         otpControl.field.onChange(otp);
     };
+    var sendEventAskAnotherOTP = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Another OTP asked'
+        });
+    };
     var handleOnResendOTP = function () {
         if (otpControl.field.value)
             setValue('otp', '', { shouldValidate: true });
+        sendEventAskAnotherOTP();
         dispatch(resendMobileAuthOTP(mobileData));
     };
     var handleOnResendAbsherOTP = function () {
         if (otpControl.field.value)
             setValue('otp', '', { shouldValidate: true });
+        sendEventAskAnotherOTP();
         dispatch(resendNIDAuthOTP(nidData));
     };
     var handleOnResendEmailOTP = function () {
         if (otpControl.field.value)
             setValue('otp', '', { shouldValidate: true });
+        sendEventAskAnotherOTP();
         dispatch(resendEmailAuthOTP(emailData));
     };
     var onResendClick = function () {

package/build/features/connect/Connect.js

@@ -87,6 +87,10 @@ var Connect = memo(function (props) {
     var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant, appConfig = data.appConfig;
     React.useEffect(function () {
         initializeGTM();
+        sendPageView({
+            title: 'Connect',
+            connect_flow: 'Normal'
+        });
         if (props.leadId) {
             dispatch(storeLeadId(props.leadId));
         }
@@ -126,10 +130,6 @@ var Connect = memo(function (props) {
                 event: 'PageView',
                 website_country: (_c = data.businessCountry) === null || _c === void 0 ? void 0 : _c.iso2
             });
-            sendPageView({
-                title: 'Connect',
-                connect_flow: 'Normal'
-            });
         }
     }, [data.businessCountry]);
     var handleDialogClose = function () {

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

@@ -18,7 +18,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { civilIDValidationSchema } from './validation';
 import { useAppDispatch, useLanguage, useAppSelector, useSetFromDefaultValues } from '../../../../hooks';
 import { handleCurrentActiveScreen, handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
-import { deepCopy } from '../../../../utils';
+import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
 import { clearError, connectSelector, createCivilIdAuth, resetMobileScreen, resetStore } from '../../../app/connect/connectStore';
 import Form from '../../../../components/Form';
 import Button, { MobileButton } from '../../../shared/Button';
@@ -84,6 +84,11 @@ var CivilID = function (_a) {
             dispatch(clearError());
     };
     var onBack = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Switch to mobile number Login Clicked'
+        });
         dispatch(handlePrevScreenStep('CONNECT_MOBILE_STEP'));
     };
     var onBackToCountryList = function () {

package/build/features/connectExpress/ConnectExpress.js

@@ -67,7 +67,7 @@ import { store } from '../../app/store';
 import { connectExpressSelector, setIsLeadIdPassed, setLeadId, retrieveLeadIdentityByIdAsync, setDefaultCountryCode } from '../app/connectExpress/connectExpressStore';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { isKW, findOrCreateElementAndInject, sendPageView, isOtherThanKWOrSA, initializeGTM } from '../../utils';
+import { isKW, findOrCreateElementAndInject, sendPageView, isOtherThanKWOrSA, initializeGTM, sendCustomEventToGTM, sendCustomDimension } from '../../utils';
 import { CONNECT_EXPRESS_SCREENS_NAVIGATION } from '../../constants';
 import { connectExpressFeatureScreens } from '../featuresScreens';
 import Background from '../shared/Background';
@@ -89,7 +89,11 @@ var ConnectExpress = memo(function (_a) {
         });
     }); };
     useAppConfig(__assign(__assign(__assign({ navigation: CONNECT_EXPRESS_SCREENS_NAVIGATION, maturity: 'express' }, props), { postURL: postURL, configToken: configToken }), (configToken && { onVerifyConfigTokenSuccess: onVerifyConfigTokenSuccess })));
-    useErrorListener(connectExpressError || error);
+    useErrorListener(connectExpressError || error, {
+        event: 'Send Event',
+        event_category: 'User Registration Flow',
+        event_action: 'Registration Error'
+    });
     useStepStartedListener();
     var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant, appConfig = data.appConfig;
     React.useEffect(function () {
@@ -100,9 +104,19 @@ var ConnectExpress = memo(function (_a) {
         });
     }, []);
     React.useEffect(function () {
-        var _a;
+        var _a, _b, _c;
         if (!!((_a = data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2)) {
             dispatch(setDefaultCountryCode(data.businessCountry));
+            sendCustomEventToGTM({
+                event: 'Send Event',
+                event_category: 'User Registration Flow',
+                event_action: 'Registration Landing Page Viewed',
+                event_label: (_b = data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2
+            });
+            sendCustomDimension({
+                event: 'PageView',
+                website_country: (_c = data.businessCountry) === null || _c === void 0 ? void 0 : _c.iso2
+            });
         }
     }, [data.businessCountry]);
     React.useEffect(function () {

package/build/features/connectExpress/screens/CivilID/CivilID.js

@@ -27,7 +27,7 @@ import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import Text from '../../../../components/Text';
 import IDNumber from './IDNumber';
-import { deepCopy } from '../../../../utils';
+import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -79,6 +79,11 @@ var CivilID = function (_a) {
         dispatch(createCivilIdAuthAsync(deepCopy(data)));
     };
     var onBack = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Switch to mobile number Login Clicked'
+        });
         dispatch(handlePrevScreenStep());
     };
     var onBackToCountryList = function () {

package/build/features/connectExpress/screens/CollectBusinessInfo/CollectBusinessInfo.js

@@ -15,7 +15,7 @@ import { useForm, FormProvider } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids } from '../../../../hooks';
-import { deepCopy, isKW, isSA } from '../../../../utils';
+import { deepCopy, isKW, isSA, sendCustomEventToGTM } from '../../../../utils';
 import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
@@ -60,6 +60,13 @@ var CollectBusinessInfo = function (_a) {
     var originalReadOnly = useFormReadOnly(methods);
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly);
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Business License Details Step'
+        });
+    }, []);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());

package/build/features/connectExpress/screens/CollectIndividualInfo/CollectIndividualInfo.js

@@ -18,7 +18,7 @@ import { styled } from '@mui/material/styles';
 import { useAppDispatch, useAppSelector, useExcludeReadOnlyFelids, useFormErrorAndUpdateReadOnly, useFormReadOnly, useSetFromDefaultValues } from '../../../../hooks';
 import { AuthForType } from '../../../../@types';
 import { useLanguage } from '../../../../hooks';
-import { deepCopy, isKW } from '../../../../utils';
+import { deepCopy, isKW, sendCustomEventToGTM } from '../../../../utils';
 import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
@@ -59,6 +59,13 @@ var CollectIndividualInfo = function (_a) {
     var originalReadOnly = useFormReadOnly(methods);
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly);
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Name and Email Page Viewed'
+        });
+    }, []);
     React.useEffect(function () {
         if (countryCode.iso2 !== methods.getValues('countryCode.iso2'))
             methods.setValue('countryCode', countryCode);

package/build/features/connectExpress/screens/IdentityOTP/OTP.js

@@ -15,7 +15,7 @@ import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import Text from '../../../../components/Text';
-import { clearError, connectExpressSelector, verifyMobileOtpAsync, resetOTPValue, verifyNIDOtpLeadIdentityAsync } from '../../../app/connectExpress/connectExpressStore';
+import { clearError, connectExpressSelector, resetOTPValue, verifyNIDOtpLeadIdentityAsync } from '../../../app/connectExpress/connectExpressStore';
 import Button from '../../../shared/Button';
 import { ScreenContainer } from '../../../shared/Containers';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
@@ -25,7 +25,7 @@ import { AuthForType } from '../../../../@types';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Form from '../../../../components/Form';
-import { maskPhone, maskID, deepCopy } from '../../../../utils';
+import { maskPhone, maskID, deepCopy, sendCustomEventToGTM } from '../../../../utils';
 import { OTPValidation } from './validation';
 import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
@@ -64,16 +64,17 @@ var OTP = function () {
             dispatch(clearError());
     }, [methods.formState.isValid]);
     React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Absher OTP Page Viewed'
+        });
         return function () {
             dispatch(resetOTPValue());
         };
     }, []);
     var onSubmit = function (formData) {
-        if (isNidAuth) {
-            dispatch(verifyNIDOtpLeadIdentityAsync(deepCopy(formData)));
-            return;
-        }
-        dispatch(verifyMobileOtpAsync(deepCopy(formData)));
+        dispatch(verifyNIDOtpLeadIdentityAsync(deepCopy(formData)));
     };
     var onBack = function () {
         dispatch(handlePrevScreenStep());

package/build/features/connectExpress/screens/IdentityOTP/OTPInput.js

@@ -17,9 +17,9 @@ import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
 import OTPField from '../../../shared/OTP';
 import { DEFAULT_TIMER_VALUE } from '../../../../constants';
-import { AuthForType } from '../../../../@types';
 import { resendNIDAuthIdentityOTP, connectExpressSelector, clearError } from '../../../app/connectExpress/connectExpressStore';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { sendCustomEventToGTM } from '../../../../utils';
 var BoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -35,20 +35,22 @@ var OTPInput = function (_a) {
     var otpControl = useController({ name: 'otp', control: control });
     var _c = useAppSelector(connectExpressSelector), data = _c.data, error = _c.error;
     var nidData = data.nidData;
-    var isNidAuth = data.otpData.authFor === AuthForType.NATIONAL_ID_MISSED;
     var handleOnOTPChange = function (otp) {
         if (error)
             dispatch(clearError());
         otpControl.field.onChange(otp);
     };
-    var handleOnResendOTP = function () {
-    };
     var handleOnResendAbsherOTP = function () {
         if (otpControl.field.value)
             setValue('otp', '', { shouldValidate: true });
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Another Absher OTP asked'
+        });
         dispatch(resendNIDAuthIdentityOTP(nidData));
     };
     var otpValue = otpControl.field.value;
-    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: isNidAuth ? handleOnResendAbsherOTP : handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
+    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendAbsherOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
 };
 export default React.memo(OTPInput);

package/build/features/connectExpress/screens/NID/NID.js

@@ -29,7 +29,7 @@ import Text from '../../../../components/Text';
 import IDNumber from './IDNumber';
 import DOB from './DOB';
 import TAC from './TAC';
-import { deepCopy } from '../../../../utils';
+import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -84,6 +84,11 @@ var NID = function (_a) {
         setCollapse(flag);
     };
     var onBack = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Switch to mobile number Login Clicked'
+        });
         dispatch(handlePrevScreenStep());
     };
     var onBackToCountryList = function () {

package/build/features/connectExpress/screens/OTP/OTP.js

@@ -25,7 +25,7 @@ import { AuthForType } from '../../../../@types';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Form from '../../../../components/Form';
-import { maskPhone, maskID, deepCopy } from '../../../../utils';
+import { maskPhone, maskID, deepCopy, sendCustomEventToGTM } from '../../../../utils';
 import { OTPValidation } from './validation';
 import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
@@ -64,6 +64,11 @@ var OTP = function () {
             dispatch(clearError());
     }, [methods.formState.isValid]);
     React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'First OTP Page Viewed'
+        });
         return function () {
             dispatch(resetOTPValue());
         };

package/build/features/connectExpress/screens/OTP/OTPInput.js

@@ -20,6 +20,7 @@ import { DEFAULT_TIMER_VALUE } from '../../../../constants';
 import { AuthForType } from '../../../../@types';
 import { resendMobileAuthOTP, resendNIDAuthOTP, connectExpressSelector, clearError } from '../../../app/connectExpress/connectExpressStore';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { sendCustomEventToGTM } from '../../../../utils';
 var BoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -34,8 +35,15 @@ var OTPInput = function (_a) {
     var dispatch = useAppDispatch();
     var otpControl = useController({ name: 'otp', control: control });
     var _c = useAppSelector(connectExpressSelector), data = _c.data, error = _c.error;
-    var mobileData = data.mobileData, nidData = data.nidData, responseData = data.responseData;
+    var mobileData = data.mobileData, nidData = data.nidData;
     var isNidAuth = data.otpData.authFor === AuthForType.NATIONAL_ID;
+    var sendEventAskAnotherOTP = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Another OTP asked'
+        });
+    };
     var handleOnOTPChange = function (otp) {
         if (error)
             dispatch(clearError());
@@ -44,11 +52,13 @@ var OTPInput = function (_a) {
     var handleOnResendOTP = function () {
         if (otpControl.field.value)
             setValue('otp', '', { shouldValidate: true });
+        sendEventAskAnotherOTP();
         dispatch(resendMobileAuthOTP(mobileData));
     };
     var handleOnResendAbsherOTP = function () {
         if (otpControl.field.value)
             setValue('otp', '', { shouldValidate: true });
+        sendEventAskAnotherOTP();
         dispatch(resendNIDAuthOTP(nidData));
     };
     var otpValue = otpControl.field.value;

package/package.json

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