@tap-payments/auth-jsconnect 2.7.11-test → 2.7.12

package/build/features/business/screens/MobileOwnership/MobileNumber.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useController, useFormContext } from 'react-hook-form';
+import Box from '@mui/material/Box';
+import { styled, alpha } from '@mui/material/styles';
+import { getMobileNumberLen, removeAllCharsFromNumber } from '../../../../utils';
+import { useAppSelector } from '../../../../hooks';
+import Text from '../../../../components/Text';
+import ClearIcon from '../../../shared/ClearIcon';
+import CheckIcon from '../../../shared/CheckIcon';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import Input from '../../../shared/Input';
+import { settingsSelector } from '../../../../app/settings';
+var LabelContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: theme.spacing(0, 2.5, 1.25, 2.5)
+    });
+});
+var InputLabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
+});
+var InputStyled = styled(Input)(function () { return ({
+    direction: 'ltr',
+    '& .MuiInputBase-input': {
+        cursor: 'auto'
+    }
+}); });
+var MobileNumber = function () {
+    var _a;
+    var t = useTranslation().t;
+    var _b = useFormContext(), control = _b.control, setValue = _b.setValue;
+    var data = useAppSelector(settingsSelector).data;
+    var phoneControl = useController({ name: 'mobile', control: control });
+    var countryCodeValue = data.businessCountry;
+    var mobileValue = phoneControl.field.value || '';
+    var error = !!mobileValue ? (_a = phoneControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message : '';
+    var isSA = countryCodeValue.iso2 === 'SA';
+    var mobileMaxLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.max_digits;
+    var mobileMinLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.min_digits;
+    var requiredMaxLen = getMobileNumberLen(mobileMaxLen, mobileValue);
+    var requiredMinLen = getMobileNumberLen(mobileMinLen, mobileValue);
+    React.useEffect(function () {
+        if (mobileValue)
+            setValue('mobile', mobileValue, { shouldValidate: true });
+    }, []);
+    var onPhoneNumberChange = function (_a) {
+        var target = _a.target;
+        var value = removeAllCharsFromNumber(target.value);
+        phoneControl.field.onChange(value);
+    };
+    var clearMobileNumber = function () {
+        phoneControl.field.onChange('');
+    };
+    return (_jsx(_Fragment, { children: _jsxs(ScreenContainer, __assign({ sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('new_mobile_number') }) }), _jsx(InputStyled, { inputProps: { maxLength: requiredMaxLen }, type: 'tel', onChange: onPhoneNumberChange, value: mobileValue, startAdornment: "+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), endAdornment: !error && mobileValue ? _jsx(CheckIcon, {}) : mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber }), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { minLength: requiredMinLen, length: requiredMaxLen, number: '05|5' }) })] })) }));
+};
+export default React.memo(MobileNumber);

package/build/features/business/screens/MobileOwnership/index.d.ts

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

package/build/features/business/screens/MobileOwnership/index.js

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

package/build/features/business/screens/MobileOwnership/validation.d.ts

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

package/build/features/business/screens/MobileOwnership/validation.js

@@ -0,0 +1,38 @@
+import { getMobileNumberLen } from '../../../../utils';
+import * as yup from 'yup';
+export var PhoneValidationSchema = function () {
+    return yup.object().shape({
+        mobile: yup
+            .string()
+            .test({
+            test: function (value) {
+                var countryCode = this.parent.countryCode;
+                var isSA = countryCode.iso2 === 'SA';
+                var maxDigits = countryCode.max_digits;
+                var minDigits = countryCode.min_digits;
+                var mobileValue = value || '';
+                var valueLen = mobileValue.length;
+                var isNumber = mobileValue.match(/^[0-9]/g);
+                if (!isNumber)
+                    return this.createError({ message: 'enter_valid_mobile_number' });
+                var isStartWithZero = mobileValue.startsWith('05');
+                var isStartWith5 = mobileValue.startsWith('5');
+                var isSaudiNumber = isStartWith5 || isStartWithZero;
+                if (isSA) {
+                    if (!isSaudiNumber)
+                        return this.createError({ message: 'start_with_number' });
+                    var requiredLen = isStartWithZero ? maxDigits + 1 : maxDigits;
+                    return valueLen === requiredLen ? true : this.createError({ message: 'enter_valid_mobile_number' });
+                }
+                var requiredMaxLen = getMobileNumberLen(maxDigits, mobileValue);
+                var requiredMinLen = getMobileNumberLen(minDigits, mobileValue);
+                if (valueLen >= requiredMinLen && valueLen <= requiredMaxLen)
+                    return true;
+                if (minDigits === maxDigits)
+                    return this.createError({ message: 'enter_valid_mobile_number' });
+                return this.createError({ message: 'enter_valid_mobile_number_min_max_length' });
+            }
+        })
+            .required('mobile_number_error')
+    });
+};

package/build/features/business/screens/OperatorError/OperatorError.d.ts

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

package/build/features/business/screens/OperatorError/OperatorError.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import GenericError from '../../../shared/GenericError';
+var OperatorError = function (_a) {
+    var t = useTranslation().t;
+    return _jsx(GenericError, { error: t('operator_is_invalid'), errorTitle: t('oops') });
+};
+export default React.memo(OperatorError);

package/build/features/business/screens/OperatorError/index.d.ts

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

package/build/features/business/screens/OperatorError/index.js

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

package/build/features/business/screens/ResetPasswordSuccess/ResetPasswordSuccess.d.ts

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

package/build/features/business/screens/Success/Success.d.ts

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

package/build/features/business/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+declare const _default: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/build/features/business/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js

@@ -10,13 +10,24 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import React, { memo } from 'react';
 import { useAppSelector } from '../../../../hooks';
 import { businessSelector } from '../../../app/business/businessStore';
 import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
+import { sendCustomEventToGTM } from '../../../../utils';
+import { settingsSelector } from '../../../../app/settings';
 var SuccessWithFlowButtons = function () {
     var data = useAppSelector(businessSelector).data;
-    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals;
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, individuals: individuals, boardInfoId: board_info_id, flows: flows || [] }));
+    var settingsData = useAppSelector(settingsSelector).data;
+    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals, recipient = _a.recipient, board_status = _a.board_status;
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Account Creation Flow',
+            event_action: 'Board Page View',
+            event_label: settingsData.businessCountry.iso2
+        });
+    }, []);
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, individuals: individuals, boardInfoId: board_info_id, flows: flows || [], recipient: recipient, status: board_status }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/business/screens/Verify/OTPInput.d.ts

@@ -3,5 +3,5 @@ export interface OTPProps {
     loading: boolean;
     setLoading: (flag: boolean) => void;
 }
-declare const _default: React.MemoExoticComponent<({ loading, setLoading }: OTPProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ loading, setLoading }: OTPProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/build/features/business/screens/Verify/Verify.d.ts

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

package/build/features/business/screens/Verify/Verify.js

@@ -11,15 +11,15 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { useAppDispatch, useAppSelector, useSanitizedTranslation } from '../../../../hooks';
 import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
-import { handlePrevScreenStep } from '../../../../app/settings';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import { useLanguage } from '../../../../hooks';
-import { deepCopy, maskPhone } from '../../../../utils';
+import { deepCopy, maskPhone, sendCustomEventToGTM } from '../../../../utils';
 import Form from '../../../../components/Form';
 import Text from '../../../../components/Text';
 import { ScreenContainer } from '../../../shared/Containers';
@@ -49,6 +49,8 @@ var FormStyled = styled(Form)(function () { return ({
 var VerifyNumber = function (_a) {
     var _b, _c;
     var dispatch = useAppDispatch();
+    var st = useSanitizedTranslation();
+    var settingsData = useAppSelector(settingsSelector).data;
     var _d = useAppSelector(businessSelector), data = _d.data, loading = _d.loading, error = _d.error;
     var methods = useForm({
         resolver: yupResolver(OTPValidation),
@@ -59,6 +61,15 @@ var VerifyNumber = function (_a) {
     var isAr = useLanguage().isAr;
     var _e = React.useState(false), resendLoading = _e[0], setResendLoading = _e[1];
     var phone = (_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.verification_by) === null || _c === void 0 ? void 0 : _c.sent_to;
+    React.useEffect(function () {
+        var _a;
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Account Creation Flow',
+            event_action: 'Business OTP Step',
+            event_label: (_a = settingsData.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2
+        });
+    }, []);
     React.useEffect(function () {
         if (error && methods.formState.isValid && phone)
             dispatch(clearError());
@@ -73,6 +84,6 @@ var VerifyNumber = function (_a) {
         dispatch(handlePrevScreenStep());
     };
     var disabled = !methods.formState.isValid || !phone || resendLoading;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : t('ide_opt_sent_title'), !loading && phone && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, { loading: resendLoading, setLoading: setResendLoading }), _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? st('ide_otp_waiting_title') : st('ide_opt_sent_title'), !loading && phone && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, { loading: resendLoading, setLoading: setResendLoading }), _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: st(error || '') }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(VerifyNumber);

package/build/features/business/screens/VerifyNafath/VerifyNafath.d.ts

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

package/build/features/business/screens/VerifyNafath/VerifyNafath.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { businessSelector, verifyNafath } from '../../../app/business/businessStore';
+import NafathVerification from '../../../shared/NafathVerification';
+import { handlePrevScreenStep } from '../../../../app/settings';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+var VerifyNafath = function () {
+    var _a = React.useState(false), success = _a[0], setSuccess = _a[1];
+    var _b = React.useState(false), failed = _b[0], setFailed = _b[1];
+    var _c = React.useState(false), isReady = _c[0], setIsReady = _c[1];
+    var dispatch = useAppDispatch();
+    var data = useAppSelector(businessSelector).data;
+    var responseBody = data.nidData.responseBody;
+    var _d = responseBody || {}, expiry = _d.expiry, app_url_android = _d.app_url_android, app_url_ios = _d.app_url_ios, random = _d.random;
+    React.useEffect(function () {
+        if (responseBody && !isReady) {
+            setIsReady(true);
+        }
+    }, [responseBody]);
+    React.useEffect(function () {
+        if (!isReady)
+            return;
+        var promise = dispatch(verifyNafath({ onSuccess: function () { return setSuccess(true); }, onFailure: function () { return setFailed(true); } }));
+        return function () {
+            promise === null || promise === void 0 ? void 0 : promise.abort();
+        };
+    }, [isReady]);
+    var onBack = React.useCallback(function () {
+        dispatch(handlePrevScreenStep());
+    }, []);
+    if (!isReady)
+        return null;
+    return (_jsx(NafathVerification, { randomNumber: random, expiryInSeconds: expiry, success: success, failed: failed, urls: { android: app_url_android, ios: app_url_ios }, onFinish: function () { return onBack(); } }));
+};
+export default React.memo(VerifyNafath);

package/build/features/business/screens/VerifyNafath/index.d.ts

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

package/build/features/business/screens/VerifyNafath/index.js

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

package/build/features/business/screens/VerifyPACI/VerifyPACI.d.ts

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

package/build/features/connect/Connect.d.ts

@@ -1,10 +1,13 @@
-/// <reference types="react" />
 import { LibConfig } from '../../@types';
 export interface ConnectLibProps extends LibConfig {
     configToken?: string;
     leadId?: string;
 }
-export declare function ConnectElement(props: ConnectLibProps): JSX.Element;
+interface ConnectFullProps extends ConnectLibProps {
+    unmount?: () => void;
+}
+export declare function ConnectElement(props: ConnectFullProps): import("react/jsx-runtime").JSX.Element;
 export declare function renderConnectLib(config: ConnectLibProps, elementId: string): {
     unmount: () => void;
 };
+export {};

package/build/features/connect/Connect.js

@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {
@@ -61,11 +61,12 @@ import { CONNECT_SCREENS_NAVIGATION } from '../../constants';
 import { connectFeatureScreens } from '../featuresScreens';
 import Background from '../shared/Background';
 var Connect = memo(function (props) {
+    var _a, _b, _c, _d;
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
     var configToken = props.configToken;
-    var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, settingLoading = _a.loading;
-    var _b = useAppSelector(connectSelector), connectError = _b.error, loading = _b.loading, customLoading = _b.customLoading, connectData = _b.data;
+    var _e = useAppSelector(settingsSelector), data = _e.data, error = _e.error, settingLoading = _e.loading;
+    var _f = useAppSelector(connectSelector), connectError = _f.error, loading = _f.loading, customLoading = _f.customLoading, connectData = _f.data;
     var leadId = connectData.leadId;
     var onVerifyConfigTokenSuccess = function (data) { return __awaiter(void 0, void 0, void 0, function () {
         var lead, id;
@@ -84,9 +85,14 @@ var Connect = memo(function (props) {
         event_action: 'Registration Error'
     });
     useStepStartedListener();
-    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant, appConfig = data.appConfig;
+    var animationDirection = open ? (_a = appConfig.features) === null || _a === void 0 ? void 0 : _a.dialogStartTransition : (_b = appConfig.features) === null || _b === void 0 ? void 0 : _b.dialogEndTransition;
     React.useEffect(function () {
         initializeGTM();
+        sendPageView({
+            title: 'Connect',
+            connect_flow: 'Normal'
+        });
         if (props.leadId) {
             dispatch(storeLeadId(props.leadId));
         }
@@ -120,21 +126,22 @@ var Connect = memo(function (props) {
                 event: 'Send Event',
                 event_category: 'User Registration Flow',
                 event_action: 'Registration Landing Page Viewed',
-                event_value: (_b = data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2
+                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
             });
-            sendPageView({
-                title: 'Connect'
-            });
         }
     }, [data.businessCountry]);
     var handleDialogClose = function () {
         dispatch(handleOpen(false));
+        setTimeout(function () {
+            var _a;
+            (_a = props.unmount) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, 1100);
     };
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', onConfirm: handleDialogClose, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: false, showTextLogo: activeScreen.name !== 'CONNECT_BUSINESS_COUNTRY_STEP', dialogEdgeFormat: data.appConfig.dialogEdgeFormat }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: false }, { children: connectFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading || data.isMaturityExpress }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', onConfirm: handleDialogClose, animationDirection: animationDirection, onClose: ((_c = appConfig.features) === null || _c === void 0 ? void 0 : _c.closeButton) ? handleDialogClose : undefined, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: false, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: __assign({ tapTextLogo: ((_d = appConfig.features) === null || _d === void 0 ? void 0 : _d.tapTextLogo) && activeScreen.name !== 'CONNECT_BUSINESS_COUNTRY_STEP', poweredBy: false }, appConfig.features) }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: false }, { children: connectFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -146,7 +153,7 @@ export function ConnectElement(props) {
 export function renderConnectLib(config, elementId) {
     var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
-    root.render(_jsx(ConnectElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };
+    root.render(_jsx(ConnectElement, __assign({}, config, { unmount: unmount })));
     return { unmount: unmount };
 }

package/build/features/connect/screens/BrandSegment/BrandSegment.d.ts

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

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

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

package/build/features/connect/screens/BusinessCountry/BusinessCountry.d.ts

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

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

@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) 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]) {
@@ -52,7 +52,7 @@ import { useAppSelector, useAppDispatch, useLanguage } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
 import BusinessCountry from '../../../shared/BusinessCountry';
 import Button from '../../../shared/Button';
-import { findCountryByIso2, isKW, isOtherThanKWOrSA, updateLocationUrlWithCountry } from '../../../../utils';
+import { findCountryByIso2, isKW, isOtherThanKWOrSA, sendCustomEventToGTM, updateLocationUrlWithCountry } from '../../../../utils';
 import Collapse from '../../../../components/Collapse';
 import { handleNextScreenStep, handleSetCountryByIso2, settingsSelector } from '../../../../app/settings';
 import { connectSelector, setDefaultCountryCode, updateBusinessCountry, storeIsStartFromBusinessCountry, clearError } from '../../../app/connect/connectStore';
@@ -81,6 +81,12 @@ var BusinessCountryScreen = function (_a) {
                         return [2];
                     countryCode = findCountryByIso2(settingsData.countries, iso2);
                     dispatch(handleSetCountryByIso2(iso2));
+                    sendCustomEventToGTM({
+                        event: 'Send Event',
+                        event_category: 'User Registration Flow',
+                        event_action: 'Country selection page view',
+                        event_label: iso2
+                    });
                     if (settingsData.appConfig.mode !== 'popup')
                         updateLocationUrlWithCountry(iso2);
                     if (!data.leadId) return [3, 2];

package/build/features/connect/screens/CivilID/CivilID.d.ts

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

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/connect/screens/DOB/DOB.d.ts

@@ -0,0 +1,5 @@
+interface DOBProps {
+    onDateClicked?: (flag: boolean) => void;
+}
+declare const DOB: ({ onDateClicked }: DOBProps) => import("react/jsx-runtime").JSX.Element;
+export default DOB;

package/build/features/connect/screens/{NID → DOB}/DOB.js

@@ -15,9 +15,9 @@ import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
 import { alpha, styled } from '@mui/material/styles';
+import { clearError, connectSelector } from '../../../app/connect/connectStore';
 import Text from '../../../../components/Text';
 import Calender from '../../../shared/Calender';
-import { clearError, connectSelector } from '../../../app/connect/connectStore';
 var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
@@ -41,7 +41,7 @@ var DOB = function (_a) {
     var dateValue = (_b = dobControl === null || dobControl === void 0 ? void 0 : dobControl.field) === null || _b === void 0 ? void 0 : _b.value;
     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);
+                        return spacing(0, 2.5, 1.5, 2.5);
                     } } }, { children: t('enter_birth_date') })), _jsx(Calender, { isDob: true, defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleBirthDateChange })] }));
 };
 export default DOB;

package/build/features/connect/screens/DOB/DOBForm.d.ts

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

package/build/features/connect/screens/DOB/DOBForm.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { styled } from '@mui/material/styles';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { DOBValidationSchema } from './validation';
+import { useAppDispatch, useLanguage, useAppSelector } from '../../../../hooks';
+import { handlePrevScreenStep } from '../../../../app/settings';
+import { clearError, connectSelector, updateLeadDOB } from '../../../app/connect/connectStore';
+import Form from '../../../../components/Form';
+import Button from '../../../shared/Button';
+import { ScreenContainer } from '../../../shared/Containers';
+import Collapse from '../../../../components/Collapse';
+import DOB from './DOB';
+import { deepCopy } from '../../../../utils';
+var FormStyled = styled(Form)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column'
+}); });
+var DOBForm = function (_a) {
+    var _b = React.useState(false), collapse = _b[0], setCollapse = _b[1];
+    var isAr = useLanguage().isAr;
+    var dispatch = useAppDispatch();
+    var t = useTranslation().t;
+    var _c = useAppSelector(connectSelector), data = _c.data, loading = _c.loading, error = _c.error;
+    var methods = useForm({
+        resolver: yupResolver(DOBValidationSchema),
+        defaultValues: data.dobData,
+        mode: 'onChange'
+    });
+    React.useEffect(function () {
+        if (error)
+            dispatch(clearError());
+    }, [methods.formState.isValid]);
+    var onSubmit = function (data) {
+        dispatch(updateLeadDOB(deepCopy(data)));
+    };
+    var handleCollapseOpenClose = function (flag) {
+        setCollapse(flag);
+    };
+    var onBack = function () {
+        dispatch(handlePrevScreenStep());
+    };
+    var disabled = !methods.formState.isValid;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(Button, __assign({ sx: { mt: 10 }, loading: loading, isAr: isAr, onBackClicked: onBack, disabled: disabled, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+};
+export default React.memo(DOBForm);