@tap-payments/auth-jsconnect 2.0.125-test → 2.1.0

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

@@ -79,8 +79,6 @@ var TAC = function (_a) {
     var handleTACCheckedChange = function (event, checked) {
         tacControl.field.onChange(checked);
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(TACContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: tacChecked, onChange: handleTACCheckedChange }), _jsxs(TextStyled, { children: [t('read_agree_terms_and_conditions_message'), _jsx(LinkStyled, __assign({ href: isAr
-                                        ? TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_AR
-                                        : TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_EN, target: '_blank', underline: 'always' }, { children: t('terms_and_conditions_link_title') }))] })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(TACContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: tacChecked, onChange: handleTACCheckedChange }), _jsxs(TextStyled, { children: [t('read_agree_terms_and_conditions_message'), _jsx(LinkStyled, __assign({ href: isAr ? TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_AR : TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_EN, target: '_blank', underline: 'always' }, { children: t('terms_and_conditions_link_title') }))] })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] }) })));
 };
 export default React.memo(TAC);

package/build/features/connect/screens/Merchant/TeamSize.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface TeamSizeProps {
+    show: boolean;
+    onListOpen?: () => void;
+    onListClose?: () => void;
+}
+declare const TeamSize: ({ show, onListOpen, onListClose }: TeamSizeProps) => JSX.Element;
+export default TeamSize;

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

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { useAppSelector, useLanguage } from '../../../../hooks';
+import SimpleList from '../../../../components/SimpleList';
+import ExpandIcon from '../../../../components/ExpandIcon';
+import Collapse from '../../../../components/Collapse';
+import Text from '../../../../components/Text';
+import { connectSelector } from '../../../app/connect/connectStore';
+import { ScreenContainer } from '../../../shared/Containers';
+import InputSelect from '../../../shared/InputSelect';
+import CheckIcon from '../../../shared/CheckIcon';
+var IncomeText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
+    var theme = _a.theme, isSelected = _a.isSelected;
+    return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25), textAlign: 'start' }));
+});
+var TeamSize = function (_a) {
+    var _b, _c, _d, _e;
+    var show = _a.show, onListOpen = _a.onListOpen, onListClose = _a.onListClose;
+    var _f = React.useState([]), teamSizeList = _f[0], setTeamSizeList = _f[1];
+    var _g = React.useState(null), anchorEl = _g[0], setAnchorEl = _g[1];
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var data = useAppSelector(connectSelector).data;
+    var control = useFormContext().control;
+    var teamSizesList = ((_b = data.individualData.responseBody) === null || _b === void 0 ? void 0 : _b.team_size_list) || [];
+    var teamSizeControl = useController({ control: control, name: 'teamSize' });
+    var teamSize = teamSizeControl.field.value;
+    var error = (_c = teamSizeControl.fieldState.error) === null || _c === void 0 ? void 0 : _c.message;
+    React.useEffect(function () {
+        if ((teamSizesList === null || teamSizesList === void 0 ? void 0 : teamSizesList.length) > 0) {
+            setTeamSizeList(teamSizesList);
+        }
+    }, [teamSizesList]);
+    var onOpenList = function (event) {
+        setAnchorEl(event.currentTarget);
+        onListOpen === null || onListOpen === void 0 ? void 0 : onListOpen();
+    };
+    var onCloseList = function () {
+        setAnchorEl(null);
+        onListClose === null || onListClose === void 0 ? void 0 : onListClose();
+    };
+    var onSelectItem = function (teamSize) {
+        onCloseList();
+        teamSizeControl.field.onChange(teamSize);
+    };
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 0 } }, { children: [_jsx(InputSelect, { required: true, label: t('team_size_title'), onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_team_size'), value: (isAr ? (_d = teamSize === null || teamSize === void 0 ? void 0 : teamSize.name) === null || _d === void 0 ? void 0 : _d.ar : (_e = teamSize === null || teamSize === void 0 ? void 0 : teamSize.name) === null || _e === void 0 ? void 0 : _e.en) || '', warningMessage: error && t(error) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.en', searchValuePath: ['name.en', 'name.ar'], list: teamSizeList, onSelectItem: onSelectItem, renderItem: function (item) {
+                            var _a, _b;
+                            return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(IncomeText, __assign({ isSelected: item.id === (teamSize === null || teamSize === void 0 ? void 0 : teamSize.id) }, { children: isAr ? (_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.en })) })), item.id === (teamSize === null || teamSize === void 0 ? void 0 : teamSize.id) && _jsx(CheckIcon, {})] }));
+                        } }) }))] })) })));
+};
+export default TeamSize;

package/build/features/connect/screens/Merchant/validation.d.ts

@@ -9,6 +9,9 @@ export declare const MerchantValidationSchema: (isNewBrand?: boolean) => yup.Obj
     }>>>, import("yup/lib/types").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     }>>[] | undefined>;
+    segment: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
+    teamSize: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
+    brandName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     salesChannels: import("yup/lib/array").RequiredArraySchema<yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
@@ -19,6 +22,9 @@ export declare const MerchantValidationSchema: (isNewBrand?: boolean) => yup.Obj
     }>>>, import("yup/lib/types").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     }>>[] | undefined>;
+    segment: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
+    teamSize: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
+    brandName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     salesChannels: import("yup/lib/array").RequiredArraySchema<yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
@@ -29,4 +35,7 @@ export declare const MerchantValidationSchema: (isNewBrand?: boolean) => yup.Obj
     }>>>, import("yup/lib/types").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     }>>[] | undefined>;
+    segment: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
+    teamSize: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
+    brandName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
 }>>>;

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

@@ -7,7 +7,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { REGEX_WEBSITE, REGEX_BRAND_NAME, LINKEDIN_URL, SOCIAL_USERNAME, DIGITS_ONLY, REGEX_PHONE_APP_NAME } from '../../../../constants';
+import { REGEX_WEBSITE, DIGITS_ONLY, REGEX_ALPHANUMERIC } from '../../../../constants';
 import * as yup from 'yup';
 var validationSalesChannels = function (channels) {
     if (channels === void 0) { channels = []; }
@@ -37,32 +37,30 @@ var validationSalesChannels = function (channels) {
         if (atLestOne)
             return "enter_at_least_one_".concat(key);
     }
-    console.log('dic', dic);
-    console.log('typeDic', typeDic);
     for (var key in typeDic) {
         var value = typeDic[key];
         if (key === 'website' && value && !value.match(REGEX_WEBSITE)) {
             return 'invalid_url';
         }
-        if (key === 'linkedin' && value && !value.match(LINKEDIN_URL)) {
+        if (key === 'linkedin' && value && !value.trim()) {
             return 'invalid_linkedin_profile_url';
         }
-        if (key === 'facebook' && value && !value.match(SOCIAL_USERNAME)) {
+        if (key === 'facebook' && value && !value.trim()) {
             return 'invalid_facebook_username';
         }
-        if (key === 'instagram' && value && !value.match(SOCIAL_USERNAME)) {
+        if (key === 'instagram' && value && !value.trim()) {
             return 'invalid_instagram_username';
         }
-        if (key === 'twitter' && value && !value.match(SOCIAL_USERNAME)) {
+        if (key === 'twitter' && value && !value.trim()) {
             return 'invalid_twitter_username';
         }
         if (key === 'physical_store' && value && value.length < 3) {
             return 'invalid_physical_store_location';
         }
-        if (key === 'ios' && value && !value.match(REGEX_PHONE_APP_NAME)) {
+        if (key === 'ios' && value && !value.match(REGEX_ALPHANUMERIC)) {
             return 'invalid_ios_app';
         }
-        if (key === 'android' && value && !value.match(REGEX_PHONE_APP_NAME)) {
+        if (key === 'android' && value && !value.match(REGEX_ALPHANUMERIC)) {
             return 'invalid_android_app';
         }
         if (key === 'call_center' && value && !value.match(DIGITS_ONLY)) {
@@ -79,15 +77,17 @@ export var MerchantValidationSchema = function (isNewBrand) {
                 .string()
                 .test({
                 test: function (value) {
-                    if (length === 0)
+                    if ((value === null || value === void 0 ? void 0 : value.length) === 0)
                         return true;
-                    if (length < 3 || !(value === null || value === void 0 ? void 0 : value.match(REGEX_BRAND_NAME)))
-                        return this.createError({ message: 'enter_brand_name_english_chars_numbers_space' });
-                    return true;
+                    if (value && value.length >= 3)
+                        return true;
+                    return this.createError({ message: 'enter_brand_name_english_chars_numbers_space' });
                 }
             })
                 .required('enter_brand_name_english_chars_numbers_space'),
             termAndConditionChecked: yup.boolean().isTrue('check_terms_cond').required('check_terms_cond'),
+            segment: yup.object().required('alert_choose_segment'),
+            teamSize: yup.object().required('alert_choose_teamSize'),
             salesChannels: yup
                 .array()
                 .min(1, 'choose_atleast_one_channel')
@@ -127,6 +127,9 @@ export var MerchantValidationSchema = function (isNewBrand) {
                 return this.createError({ message: result });
             }
         })
-            .required('choose_atleast_one_channel')
+            .required('choose_atleast_one_channel'),
+        segment: yup.object().required('alert_choose_segment'),
+        teamSize: yup.object().required('alert_choose_teamSize'),
+        brandName: yup.string().optional()
     });
 };

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) {
@@ -73,15 +73,12 @@ var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
         marginInlineStart: theme.spacing(1)
     });
 });
-var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        direction: 'ltr',
-        '& .MuiInputBase-input': {
-            cursor: 'auto'
-        }
-    });
-});
+var InputStyled = styled(Input)(function () { return ({
+    direction: 'ltr',
+    '& .MuiInputBase-input': {
+        cursor: 'auto'
+    }
+}); });
 var MobileNumber = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
     var countries = _a.countries, rest = __rest(_a, ["countries"]);
@@ -136,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/DOB.js

@@ -42,6 +42,6 @@ var DOB = function (_a) {
     return (_jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                         var spacing = _a.spacing;
                         return spacing(2.5, 2.5, 1.5, 2.5);
-                    } } }, { children: t('enter_birth_date') })), _jsx(DatePicker, { defaultValue: dateValue ? new Date(dateValue) : new Date(), readOnly: true, dir: 'ltr', locale: 'en', onDateChange: handleBirthDateChange, onClick: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true); }, onDatePicked: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false); } })] }));
+                    } } }, { children: t('enter_birth_date') })), _jsx(DatePicker, { defaultValue: dateValue ? new Date(dateValue) : undefined, readOnly: true, dir: 'ltr', locale: 'en', isDob: true, onDateChange: handleBirthDateChange, onClick: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true); }, onDatePicked: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false); } })] }));
 };
 export default DOB;

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

@@ -11,18 +11,17 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { styled, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { removeAllCharsFromNumber } from '../../../../utils';
+import { ID_NUMBER_LENGTH } from '../../../../constants';
 import Text from '../../../../components/Text';
-import Input from '../../../shared/Input';
-import ClearIcon from '../../../shared/ClearIcon';
-import CheckIcon from '../../../shared/CheckIcon';
 import Collapse from '../../../../components/Collapse';
+import Input from '../../../shared/Input';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
-import { removeAllCharsFromNumber } from '../../../../utils';
-import { ID_NUMBER_LENGTH } from '../../../../constants';
+import { EndAdornment } from '../../../shared/EndAdornment';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -55,6 +54,6 @@ var IDNumber = React.forwardRef(function (_a, ref) {
     };
     var nidValue = nidControl.field.value;
     var error = (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('enter_national_id') }) }), _jsx(Input, { dir: 'ltr', type: 'tel', inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: !error && nidValue ? _jsx(CheckIcon, {}) : nidValue && _jsx(ClearIcon, { onClick: clearIdNumber }), placeholder: t('national_id_placeholder'), warningType: 'alert', warningMessage: error && t(error, { number: '1' }), required: true })] })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('enter_national_id') }) }), _jsx(Input, { dir: 'ltr', type: 'tel', inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: _jsx(EndAdornment, { value: nidValue, error: error, onClear: clearIdNumber }), placeholder: t('national_id_placeholder'), warningType: 'alert', warningMessage: error && t(error, { number: '1' }), required: true })] })) })));
 });
 export default React.memo(IDNumber);

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

@@ -1,9 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import SuccessScreen from '../../../shared/SuccessScreen';
+import { connectSelector } from '../../../app/connect/connectStore';
+import { useAppSelector } from '../../../../hooks';
+import { maskEmail, sendCustomDimension, sendCustomEventToGTM } from '../../../../utils';
 var ThankYou = function (_a) {
+    var _b, _c, _d;
     var t = useTranslation().t;
-    return (_jsx(SuccessScreen, { title: t("connect_completed_title"), description: t("connect_completed_description"), showEmailProviders: true }));
+    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
+        });
+        sendCustomDimension({
+            event: 'PageView',
+            lead_ID: 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/connect/screens/VerifyPACI/VerifyPACI.d.ts

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

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

@@ -9,58 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
 import Text from '../../../../components/Text';
 import { connectSelector, verifyPACI as verifyPACIFun } from '../../../app/connect/connectStore';
+import PaciVerification from '../../../shared/PaciVerification';
 import { handlePrevScreenStep } from '../../../../app/settings';
-import { ScreenContainer } from '../../../shared/Containers';
-import { MobileButton } from '../../../shared/Button';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { mobileOS, sleep } from '../../../../utils';
-import Collapse from '../../../../components/Collapse';
-import Warning from '../../../../components/Warning';
-import VerifyPACILoading from './VerifyPACILoading';
-import VerifyPACISuccess from './VerifyPACISuccess';
 var VerifyPACITitleContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -112,48 +69,27 @@ var VerifyPACI = function () {
     var _a = React.useState(false), success = _a[0], setSuccess = _a[1];
     var _b = React.useState(false), isReady = _b[0], setIsReady = _b[1];
     var dispatch = useAppDispatch();
-    var _c = useAppSelector(connectSelector), data = _c.data, error = _c.error;
+    var data = useAppSelector(connectSelector).data;
     var responseBody = data.civilIdData.responseBody;
-    var t = useTranslation().t;
-    var onSuccess = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setSuccess(true);
-                    return [4, sleep(2000)];
-                case 1:
-                    _a.sent();
-                    return [2];
-            }
-        });
-    }); };
+    var _c = responseBody || {}, expiry = _c.expiry, app_url_android = _c.app_url_android, app_url_ios = _c.app_url_ios;
     React.useEffect(function () {
-        if (responseBody) {
+        if (responseBody && !isReady) {
             setIsReady(true);
         }
     }, [responseBody]);
     React.useEffect(function () {
         if (!isReady)
             return;
-        var promise = dispatch(verifyPACIFun({ onSuccess: onSuccess }));
+        var promise = dispatch(verifyPACIFun({ onSuccess: function () { return setSuccess(true); } }));
         return function () {
             promise === null || promise === void 0 ? void 0 : promise.abort();
         };
     }, [isReady]);
-    var onRedirect = React.useCallback(function () {
-        if (os === 'Android') {
-            window.open(responseBody === null || responseBody === void 0 ? void 0 : responseBody.app_url_android, '_blank');
-        }
-        if (os === 'iOS') {
-            window.open(responseBody === null || responseBody === void 0 ? void 0 : responseBody.app_url_ios, '_blank');
-        }
-    }, [responseBody]);
     var onBack = React.useCallback(function () {
         dispatch(handlePrevScreenStep());
     }, []);
-    var os = React.useMemo(function () { return mobileOS(); }, []);
-    var isAndroid = React.useMemo(function () { return os === 'Android' && (responseBody === null || responseBody === void 0 ? void 0 : responseBody.app_url_ios); }, [os, responseBody]);
-    var isIOS = React.useMemo(function () { return os === 'iOS' && (responseBody === null || responseBody === void 0 ? void 0 : responseBody.app_url_ios); }, [os, responseBody]);
-    return (_jsxs(ScreenContainer, __assign({ sx: { mb: 2.5 } }, { children: [_jsxs(VerifyPACITitleContainerStyled, { children: [_jsx(Container, { children: success ? _jsx(VerifyPACISuccess, {}) : _jsx(VerifyPACILoading, { loop: !error }) }), _jsx(VerifyPACITitleStyled, { children: t('authenticate_kuwait_mobile_title') }), _jsx(VerifyPACISubTitleStyled, { children: t('authenticate_kuwait_mobile_description') })] }), _jsx(Collapse, __assign({ in: !!error, sx: { width: '100%' } }, { children: _jsx(Warning, { children: t(error) }) })), (isAndroid || isIOS) && (_jsx(MobileButton, __assign({ onClick: onRedirect, hideIcon: true }, { children: t('Open Kuwait Mobile ID') }))), _jsx(BackButton, __assign({ onClick: onBack }, { children: t('back') }))] })));
+    if (!isReady)
+        return null;
+    return (_jsx(PaciVerification, { expiryInSeconds: expiry, success: success, urls: { android: app_url_android, ios: app_url_ios }, onFinish: function () { return onBack(); } }));
 };
 export default React.memo(VerifyPACI);