@tap-payments/auth-jsconnect 2.4.42-test → 2.4.44-test

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

@@ -577,4 +577,12 @@ export declare type IndividualDataVerification = {
     relation: string;
     status: string;
 };
+export declare type DataLayer = {
+    event: string;
+    event_category: string;
+    event_action: string;
+    event_label?: string;
+    event_value?: number | string;
+    event_noninteraction?: number;
+};
 export {};

package/build/features/app/business/businessStore.js

@@ -508,6 +508,7 @@ export var updateLeadBusinessType = createAsyncThunk('updateLeadBusinessType', f
                 return [4, API.accountService.createAccount(accountBody)];
             case 3:
                 accountData = _f.sent();
+                thunkApi.dispatch(updateStepName(BUSINESS_STEP_NAMES.BUSINESS_INFO_CONFIRM));
                 return [4, API.brandService.retrieveBrand(brand === null || brand === void 0 ? void 0 : brand.id)];
             case 4:
                 brandRes = (_f.sent()).brand;

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

@@ -71,7 +71,7 @@ import { handleNextScreenStep } from '../../../app/settings';
 import { CONNECT_STEP_NAMES, defaultCountry, IDENTIFICATION_TYPE, OTHER_BRAND } from '../../../constants';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { AuthForType, FlowsTypes } from '../../../@types';
-import { capitalizeTheFirstLetterOfEachWord, concatenateObjectValues, findCountryByIddPrefix, fixBrandList, isTwitter, getIndividualName, isWebsite, sleep } from '../../../utils';
+import { capitalizeTheFirstLetterOfEachWord, concatenateObjectValues, findCountryByIddPrefix, fixBrandList, isTwitter, getIndividualName, isWebsite, sleep, sendCustomEventToGTM } from '../../../utils';
 export var createMobileAuth = createAsyncThunk('createMobileAuth', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
     var settings, requestBody, data;
     var _a, _b;
@@ -252,6 +252,11 @@ export var verifyAuth = createAsyncThunk('connect/verifyAuth', function (params,
                 return [4, API.authService.verifyAuth(payload)];
             case 1:
                 data = (_g.sent()).data;
+                sendCustomEventToGTM({
+                    event: 'Send Event',
+                    event_category: 'User Registration Flow',
+                    event_action: 'First OTP Success'
+                });
                 if ((_c = data.errors) === null || _c === void 0 ? void 0 : _c.length)
                     throw new Error(data.errors[0].description);
                 lead_id = data.lead_id;

package/build/features/connect/Connect.js

@@ -20,7 +20,7 @@ import { store } from '../../app/store';
 import { connectSelector, setDefaultCountryCode } from '../app/connect/connectStore';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { isKW, findOrCreateElementAndInject } from '../../utils';
+import { isKW, findOrCreateElementAndInject, initializeGTM, sendCustomEventToGTM } from '../../utils';
 import { CONNECT_SCREENS_NAVIGATION } from '../../constants';
 import { connectFeatureScreens } from '../featuresScreens';
 import Background from '../shared/Background';
@@ -30,9 +30,16 @@ var Connect = memo(function (props) {
     var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
     var _b = useAppSelector(connectSelector), connectError = _b.error, loading = _b.loading;
     useAppConfig(__assign({ navigation: CONNECT_SCREENS_NAVIGATION, maturity: 'full' }, props));
-    useErrorListener(connectError || error);
+    useErrorListener(connectError || 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;
+    React.useEffect(function () {
+        initializeGTM();
+    }, []);
     React.useEffect(function () {
         var _a;
         if (!settingLoading) {
@@ -41,9 +48,16 @@ var Connect = memo(function (props) {
         }
     }, [settingLoading]);
     React.useEffect(function () {
-        var _a;
-        if (!!((_a = data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2))
+        var _a, _b;
+        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
+            });
+        }
     }, [data.businessCountry]);
     var handleDialogClose = function () {
         dispatch(handleOpen(false));

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

@@ -40,7 +40,7 @@ import MobileNumber from './MobileNumber';
 import { countriesCode } from '../../../../constants';
 import { AuthForType } from '../../../../@types';
 import Collapse from '../../../../components/Collapse';
-import { isKW } from '../../../../utils';
+import { isKW, sendCustomEventToGTM } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column',
@@ -67,6 +67,13 @@ var Individual = function (_a) {
         mode: 'onChange'
     });
     useSetFromDefaultValues(methods, individualData, true);
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Name and Email Page Viewed'
+        });
+    }, []);
     React.useEffect(function () {
         if (defaultValues.countryCode.iso2 !== methods.getValues('countryCode.iso2'))
             methods.setValue('countryCode', defaultValues.countryCode);

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

@@ -18,6 +18,7 @@ import Collapse from '@mui/material/Collapse';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { handlePrevScreenStep } from '../../../../app/settings';
+import { sendCustomEventToGTM } from '../../../../utils';
 import Form from '../../../../components/Form';
 import { ScreenContainer } from '../../../shared/Containers';
 import Button from '../../../shared/Button';
@@ -44,6 +45,13 @@ var Merchant = function (_a) {
     var _g = data.brandData, brandName = _g.brandName, selectedBrandItem = _g.selectedBrandItem, termAndConditionChecked = _g.termAndConditionChecked, responseBody = _g.responseBody, salesChannels = _g.salesChannels, segment = _g.segment, teamSize = _g.teamSize;
     var brandList = (responseBody || {}).brand_list;
     var _h = React.useState(), listActive = _h[0], setListActive = _h[1];
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Brand Details Step'
+        });
+    }, []);
     var methods = useForm({
         resolver: yupResolver(MerchantValidationSchema(isRequiredNewBrand)),
         defaultValues: {

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

@@ -9,17 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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 } from "react/jsx-runtime";
 import * as React from 'react';
 import Box from '@mui/material/Box';
@@ -36,7 +25,7 @@ import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import { clearError, connectSelector, createMobileAuth, resetNIDScreen, resetCivilScreen, resetOTPScreen, resetStore } from '../../../app/connect/connectStore';
 import { useLanguage } from '../../../../hooks';
 import Divider from '@mui/material/Divider';
-import { isKW } from '../../../../utils';
+import { isKW, sendCustomEventToGTM } from '../../../../utils';
 import Text from '../../../../components/Text';
 import MIDTitle from './Title';
 import MobileNumber from './MobileNumber';
@@ -89,15 +78,18 @@ var Mobile = function (_a) {
     var settingsStore = useAppSelector(settingsSelector);
     var _c = useAppSelector(connectSelector), data = _c.data, loading = _c.loading, error = _c.error;
     var _d = React.useState(), listType = _d[0], setListType = _d[1];
-    var _e = data.mobileData, countryCode = _e.countryCode, mobile = _e.mobile;
     var dispatch = useAppDispatch();
-    var _f = data.mobileData, responseBody = _f.responseBody, defaultValues = __rest(_f, ["responseBody"]);
+    var _e = data.mobileData, mobile = _e.mobile, countryCode = _e.countryCode, termAndConditionChecked = _e.termAndConditionChecked;
     var methods = useForm({
         resolver: yupResolver(PhoneValidationSchema),
-        defaultValues: defaultValues,
+        defaultValues: {
+            mobile: mobile,
+            countryCode: countryCode,
+            termAndConditionChecked: termAndConditionChecked
+        },
         mode: 'onChange'
     });
-    useSetFromDefaultValues(methods, defaultValues);
+    useSetFromDefaultValues(methods, data.mobileData);
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var handleMenuListClick = function (flag) {
@@ -117,6 +109,11 @@ var Mobile = function (_a) {
     };
     var isKWCountry = React.useMemo(function () { var _a; return isKW((_a = settingsStore.data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2); }, [(_b = settingsStore.data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2]);
     var onBack = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Switch to ID Login Clicked'
+        });
         dispatch(handlePrevScreenStep(isKWCountry ? 'CONNECT_CIVIL_ID_STEP' : 'CONNECT_NID_STEP'));
     };
     React.useEffect(function () {

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

@@ -35,7 +35,7 @@ import { connectSelector } from '../../../app/connect/connectStore';
 import ExpandIcon from '../../../../components/ExpandIcon';
 import Input from '../../../shared/Input';
 import SimpleList from '../../../../components/SimpleList';
-import { removeAllCharsFromNumber } from '../../../../utils';
+import { removeAllCharsFromNumber, sendCustomEventToGTM } from '../../../../utils';
 import { useLanguage, useAppSelector } from '../../../../hooks';
 import Search from '../../../shared/Search';
 var LabelContainerStyled = styled(Box)(function (_a) {
@@ -133,6 +133,13 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var onSelectItem = function (country) {
         onCloseCountryList();
         setValue('mobile', '');
+        var prevCountry = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2;
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'switch mobile country clicked',
+            event_label: "From ".concat(prevCountry, " to ").concat(country.iso2)
+        });
         countryCodeControl.field.onChange(country);
     };
     var handleSearch = function (value) {

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

@@ -22,6 +22,7 @@ import { clearError, connectSelector, createNIDAuth, resetMobileScreen, resetSto
 import Form from '../../../../components/Form';
 import Button, { MobileButton } from '../../../shared/Button';
 import { ScreenContainer } from '../../../shared/Containers';
+import { sendCustomEventToGTM } from '../../../../utils';
 import Collapse from '../../../../components/Collapse';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
@@ -83,6 +84,11 @@ var NID = 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'));
     };
     React.useEffect(function () {

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

@@ -9,17 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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 } from "react/jsx-runtime";
 import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
@@ -36,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 } from '../../../../utils';
+import { maskPhone, maskID, sendCustomEventToGTM } from '../../../../utils';
 import { OTPValidation } from './validation';
 import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
@@ -62,16 +51,25 @@ var OTP = function () {
     var _a;
     var dispatch = useAppDispatch();
     var _b = useAppSelector(connectSelector), data = _b.data, loading = _b.loading, error = _b.error;
-    var _c = data.otpData, responseBody = _c.responseBody, defaultValues = __rest(_c, ["responseBody"]);
+    var otp = data.otpData.otp;
     var methods = useForm({
         resolver: yupResolver(OTPValidation),
-        defaultValues: defaultValues,
+        defaultValues: {
+            otp: otp
+        },
         mode: 'onChange'
     });
-    useSetFromDefaultValues(methods, defaultValues);
+    useSetFromDefaultValues(methods, data.otpData);
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var startWithNID = data.otpData.authFor === AuthForType.NATIONAL_ID;
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'First OTP Page Viewed'
+        });
+    }, []);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());

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

@@ -20,6 +20,7 @@ import { DEFAULT_TIMER_VALUE } from '../../../../constants';
 import { AuthForType } from '../../../../@types';
 import { connectSelector, resendOTPMobile, resendOTPNID } from '../../../app/connect/connectStore';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { sendCustomEventToGTM } from '../../../../utils';
 var BoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -38,14 +39,23 @@ var OTPInput = function (_a) {
     var handleOnOTPChange = function (otp) {
         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(resendOTPMobile());
     };
     var handleOnResendAbsherOTP = function () {
         if (otpControl.field.value)
             setValue('otp', '', { shouldValidate: true });
+        sendEventAskAnotherOTP();
         dispatch(resendOTPNID());
     };
     var otpValue = otpControl.field.value;

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

@@ -2,15 +2,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import SuccessScreen from '../../../shared/SuccessScreen';
-import { connectSelector } from '../../../../features/app/connect/connectStore';
+import { connectSelector } from '../../../app/connect/connectStore';
 import { useAppSelector } from '../../../../hooks';
-import { maskEmail } from '../../../../utils';
+import { maskEmail, sendCustomEventToGTM } from '../../../../utils';
 var ThankYou = function (_a) {
     var _b, _c, _d;
     var t = useTranslation().t;
     var data = useAppSelector(connectSelector).data;
     var userEmail = ((_c = (_b = data.individualData.responseBody) === null || _b === void 0 ? void 0 : _b.contact) === null || _c === void 0 ? void 0 : _c.email) || ((_d = data.individualData) === null || _d === void 0 ? void 0 : _d.email);
     var email = maskEmail(userEmail);
+    React.useEffect(function () {
+        var _a;
+        var id = (_a = data.individualData.responseBody) === null || _a === void 0 ? void 0 : _a.id;
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Registration Completed',
+            event_label: 'Product Type',
+            event_value: id
+        });
+    }, []);
     return (_jsx(SuccessScreen, { title: t("connect_completed_title"), description: _jsx(Trans, { i18nKey: 'connect_completed_description_dev', values: { email: email } }), showEmailProviders: true }));
 };
 export default React.memo(ThankYou);

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

@@ -16,7 +16,7 @@ import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import { ICONS_NAMES } from '../../../constants';
-import { getBrowserInfo } from '../../../utils';
+import { getBrowserInfo, sendCustomEventToGTM } from '../../../utils';
 var Image = styled('img')(function (_a) {
     var theme = _a.theme;
     return ({
@@ -63,5 +63,12 @@ export default function EmailProvidersButtons(_a) {
     var gmail = _a.gmail, outlook = _a.outlook, apple = _a.apple, mail = _a.mail;
     var os = getBrowserInfo().os;
     var _c = React.useState(false), hoverApple = _c[0], setHoverApple = _c[1];
-    return (_jsxs(ButtonBoxStyled, { children: [_jsx(Link, __assign({ href: gmail.href, underline: 'none', target: '_blank' }, { children: _jsx(GMailButtonStyled, __assign({ variant: 'outlined', startIcon: _jsx(Image, { src: ICONS_NAMES.GMAIL_Filled_ICON, alt: gmail.title }), type: 'button' }, { children: gmail.title })) })), ((_b = os === null || os === void 0 ? void 0 : os.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'windows' ? (_jsx(Link, __assign({ href: mail.href, underline: 'none', target: '_blank' }, { children: _jsx(OutlookButtonStyled, __assign({ variant: 'outlined', onMouseDown: function () { return setHoverApple(true); }, onMouseUp: function () { return setHoverApple(false); }, startIcon: _jsx(Image, { src: ICONS_NAMES.Mail_Filled_icon, alt: outlook.title }), type: 'button' }, { children: mail.title })) }))) : (_jsx(Link, __assign({ href: apple.href, underline: 'none', target: '_blank' }, { children: _jsx(AppleButtonStyled, __assign({ variant: 'outlined', onMouseEnter: function () { return setHoverApple(true); }, onMouseLeave: function () { return setHoverApple(false); }, startIcon: _jsx(Image, { src: hoverApple ? ICONS_NAMES.apple_white_icon : ICONS_NAMES.Apple_Filled_ICON, alt: apple.title }), type: 'button' }, { children: apple.title })) }))), _jsx(Link, __assign({ href: outlook.href, underline: 'none', target: '_blank' }, { children: _jsx(OutlookButtonStyled, __assign({ variant: 'outlined', startIcon: _jsx(Image, { src: ICONS_NAMES.outlook_Filled_ICON, alt: outlook.title }), type: 'button' }, { children: outlook.title })) }))] }));
+    var emailEvent = function (provider) {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: "open ".concat(provider, " clicked")
+        });
+    };
+    return (_jsxs(ButtonBoxStyled, { children: [_jsx(Link, __assign({ href: gmail.href, underline: 'none', target: '_blank' }, { children: _jsx(GMailButtonStyled, __assign({ variant: 'outlined', onClick: function () { return emailEvent('gmail'); }, startIcon: _jsx(Image, { src: ICONS_NAMES.GMAIL_Filled_ICON, alt: gmail.title }), type: 'button' }, { children: gmail.title })) })), ((_b = os === null || os === void 0 ? void 0 : os.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'windows' ? (_jsx(Link, __assign({ href: mail.href, underline: 'none', target: '_blank' }, { children: _jsx(OutlookButtonStyled, __assign({ variant: 'outlined', onClick: function () { return emailEvent('mail'); }, onMouseDown: function () { return setHoverApple(true); }, onMouseUp: function () { return setHoverApple(false); }, startIcon: _jsx(Image, { src: ICONS_NAMES.Mail_Filled_icon, alt: outlook.title }), type: 'button' }, { children: mail.title })) }))) : (_jsx(Link, __assign({ href: apple.href, underline: 'none', target: '_blank' }, { children: _jsx(AppleButtonStyled, __assign({ variant: 'outlined', onClick: function () { return emailEvent('apple'); }, onMouseEnter: function () { return setHoverApple(true); }, onMouseLeave: function () { return setHoverApple(false); }, startIcon: _jsx(Image, { src: hoverApple ? ICONS_NAMES.apple_white_icon : ICONS_NAMES.Apple_Filled_ICON, alt: apple.title }), type: 'button' }, { children: apple.title })) }))), _jsx(Link, __assign({ href: outlook.href, underline: 'none', target: '_blank' }, { children: _jsx(OutlookButtonStyled, __assign({ onClick: function () { return emailEvent('outlook'); }, variant: 'outlined', startIcon: _jsx(Image, { src: ICONS_NAMES.outlook_Filled_ICON, alt: outlook.title }), type: 'button' }, { children: outlook.title })) }))] }));
 }

package/build/features/shared/Footer/Footer.js

@@ -4,13 +4,21 @@ import { useAppDispatch, useLanguage, useAppSelector } from '../../../hooks';
 import { handleLanguage, settingsSelector } from '../../../app/settings';
 import Footer from '../../../components/Footer';
 import { useTranslation } from 'react-i18next';
+import { sendCustomEventToGTM } from '../../../utils';
 export default function CustomFooter() {
     var isEn = useLanguage().isEn;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
     var data = useAppSelector(settingsSelector).data;
     var handleChangeLanguage = function () {
+        var prevLanguage = isEn ? LanguageMode.EN : LanguageMode.AR;
         var language = isEn ? LanguageMode.AR : LanguageMode.EN;
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'switch language clicked',
+            event_label: "From ".concat(prevLanguage, " to ").concat(language)
+        });
         dispatch(handleLanguage(language));
     };
     var country = data.businessCountry;

package/build/hooks/useErrorListener.d.ts

@@ -1 +1,2 @@
-export declare const useErrorListener: (error?: string | null) => void;
+import { DataLayer } from '../@types';
+export declare const useErrorListener: (error?: string | null, event?: DataLayer) => void;

package/build/hooks/useErrorListener.js

@@ -1,11 +1,26 @@
+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 { useEffect } from 'react';
 import { settingsSelector } from '../app/settings';
+import { sendCustomEventToGTM } from '../utils';
 import { useAppSelector } from './useAppSelector';
-export var useErrorListener = function (error) {
+export var useErrorListener = function (error, event) {
     var settings = useAppSelector(settingsSelector);
     useEffect(function () {
         var _a, _b;
         if (error) {
+            if (event) {
+                sendCustomEventToGTM(__assign(__assign({}, event), { event_label: error }));
+            }
             (_b = (_a = settings.data.appConfig) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, error);
         }
     }, [error]);

package/build/utils/gtm.d.ts

@@ -0,0 +1,4 @@
+import { DataLayer } from '../@types';
+export declare const pushToDataLayer: (data: DataLayer) => void;
+export declare const initializeGTM: () => void;
+export declare const sendCustomEventToGTM: (data: DataLayer) => void;

package/build/utils/gtm.js

@@ -0,0 +1,23 @@
+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 TagManager from 'react-gtm-module';
+export var pushToDataLayer = function (data) {
+    if (window.dataLayer) {
+        window.dataLayer.push(data);
+    }
+};
+export var initializeGTM = function () {
+    TagManager.initialize({ gtmId: 'GTM-5RR5CKD' });
+};
+export var sendCustomEventToGTM = function (data) {
+    pushToDataLayer(__assign({ event_value: 0, event_noninteraction: 0, event_label: '' }, data));
+};

package/build/utils/index.d.ts

@@ -10,3 +10,4 @@ export * from './rsa';
 export * from './common';
 export * from './date';
 export * from './error';
+export * from './gtm';

package/build/utils/index.js

@@ -10,3 +10,4 @@ export * from './rsa';
 export * from './common';
 export * from './date';
 export * from './error';
+export * from './gtm';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "2.4.42-test",
+	"version": "2.4.44-test",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",
@@ -38,6 +38,7 @@
 		"@types/react": "^18.0.15",
 		"@types/react-calendar": "~3.5.1",
 		"@types/react-dom": "^18.0.6",
+		"@types/react-gtm-module": "~2.0.1",
 		"@typescript-eslint/eslint-plugin": "^5.30.5",
 		"@typescript-eslint/parser": "^5.30.5",
 		"babel-loader": "^8.2.5",
@@ -95,6 +96,7 @@
 		"react-device-detect": "^2.2.2",
 		"react-dom": "^18.2.0",
 		"react-dropzone": "^14.2.2",
+		"react-gtm-module": "^2.0.11",
 		"react-hook-form": "^7.33.1",
 		"react-i18next": "^11.18.1",
 		"react-multi-date-picker": "^3.3.4",