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

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

@@ -18,9 +18,8 @@ import Text from '../../../../components/Text';
 import { clearError, connectSelector, resetOTPScreen, verifyAuth } from '../../../app/connect/connectStore';
 import Button from '../../../shared/Button';
 import { ScreenContainer } from '../../../shared/Containers';
-import { useAppDispatch, useAppSelector, useSetFromDefaultValues } from '../../../../hooks';
+import { useAppDispatch, useAppSelector, useLanguage, useSetFromDefaultValues, useSanitizedTranslation } from '../../../../hooks';
 import { handlePrevScreenStep } from '../../../../app/settings';
-import { useLanguage } from '../../../../hooks';
 import { AuthForType } from '../../../../@types';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -50,6 +49,7 @@ var FormStyled = styled(Form)(function () { return ({
 var OTP = function () {
     var _a;
     var dispatch = useAppDispatch();
+    var t = useTranslation().t;
     var _b = useAppSelector(connectSelector), data = _b.data, loading = _b.loading, error = _b.error;
     var otp = data.otpData.otp;
     var methods = useForm({
@@ -60,7 +60,7 @@ var OTP = function () {
         mode: 'onChange'
     });
     useSetFromDefaultValues(methods, data.otpData);
-    var t = useTranslation().t;
+    var st = useSanitizedTranslation();
     var isAr = useLanguage().isAr;
     var startWithNID = data.otpData.authFor === AuthForType.NATIONAL_ID;
     React.useEffect(function () {
@@ -84,9 +84,9 @@ var OTP = function () {
         dispatch(handlePrevScreenStep(startWithNID ? 'CONNECT_NID_STEP' : 'CONNECT_MOBILE_STEP'));
     };
     var disabled = !methods.formState.isValid;
-    var phone = ((_a = data.mobileData.countryCode) === null || _a === void 0 ? void 0 : _a.idd_prefix) + (data.mobileData.mobile || '');
+    var phone = data.mobileData.mobile ? ((_a = data.mobileData.countryCode) === null || _a === void 0 ? void 0 : _a.idd_prefix) + data.mobileData.mobile : '';
     var idNumber = data.nidData.nid;
-    var title = startWithNID ? t('opt_nid_sent_title', { provider: 'ABSHER' }) : t('ide_opt_sent_title');
-    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') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: startWithNID ? maskID(idNumber) : maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    var title = startWithNID ? t('opt_nid_sent_title', { provider: 'ABSHER' }) : st('ide_opt_sent_title');
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? st('ide_otp_waiting_title') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: startWithNID ? maskID(idNumber) : maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: st(error || '') }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(OTP);

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

@@ -17,8 +17,7 @@ import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
 import OTPField from '../../../shared/OTP';
 import { DEFAULT_TIMER_VALUE } from '../../../../constants';
-import { AuthForType } from '../../../../@types';
-import { clearError, connectSelector, resendOTPMobile, resendOTPNID } from '../../../app/connect/connectStore';
+import { clearError, connectSelector, resendOTPMobile } from '../../../app/connect/connectStore';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { sendCustomEventToGTM } from '../../../../utils';
 var BoxStyled = styled(Box)(function (_a) {
@@ -34,8 +33,7 @@ var OTPInput = function (_a) {
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
     var otpControl = useController({ name: 'otp', control: control });
-    var _c = useAppSelector(connectSelector), data = _c.data, error = _c.error;
-    var startWithNID = data.otpData.authFor === AuthForType.NATIONAL_ID;
+    var error = useAppSelector(connectSelector).error;
     var handleOnOTPChange = function (otp) {
         if (error)
             dispatch(clearError());
@@ -54,13 +52,7 @@ var OTPInput = function (_a) {
         sendEventAskAnotherOTP();
         dispatch(resendOTPMobile());
     };
-    var handleOnResendAbsherOTP = function () {
-        if (otpControl.field.value)
-            setValue('otp', '', { shouldValidate: true });
-        sendEventAskAnotherOTP();
-        dispatch(resendOTPNID());
-    };
     var otpValue = otpControl.field.value;
-    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: startWithNID ? handleOnResendAbsherOTP : handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
+    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
 };
 export default React.memo(OTPInput);

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { connectSelector, verifyNafath as verifyNafathFun } from '../../../app/connect/connectStore';
+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(connectSelector).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(verifyNafathFun({ 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/connect/screens/VerifyNafath/index.d.ts

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

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

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

package/build/features/connectExpress/ConnectExpress.d.ts

@@ -2,10 +2,13 @@
 import { LibConfig } from '../../@types';
 export interface ConnectExpressLibProps extends LibConfig {
     leadId?: string;
-    showBoard?: boolean;
     configToken?: string;
 }
-export declare function ConnectExpressElement(props: ConnectExpressLibProps): JSX.Element;
+interface ConnectExpressFullProps extends ConnectExpressLibProps {
+    unmount?: () => void;
+}
+export declare function ConnectExpressElement(props: ConnectExpressFullProps): JSX.Element;
 export declare function renderConnectExpressLib(config: ConnectExpressLibProps, elementId: string): {
     unmount: () => void;
 };
+export {};

package/build/features/connectExpress/ConnectExpress.js

@@ -61,79 +61,102 @@ import React, { memo } from 'react';
 import { createRoot } from 'react-dom/client';
 import { FeatureContainer } from '../shared/Containers';
 import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useAppDispatch } from '../../hooks';
-import { handleCurrentActiveScreen, settingsSelector } from '../../app/settings';
+import { handleCurrentActiveScreen, handleOpen, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
-import { connectExpressSelector, setIsLeadIdPassed, setLeadId, retrieveLeadIdentityByIdAsync, setShowBoard, setDefaultCountryCode } from '../app/connectExpress/connectExpressStore';
+import { connectExpressSelector, setIsLeadIdPassed, setLeadId, retrieveLeadIdentityByIdAsync, setDefaultCountryCode } from '../app/connectExpress/connectExpressStore';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { isKW, findOrCreateElementAndInject, sendPageView, isOtherThanKWOrSA } from '../../utils';
+import { isKW, findOrCreateElementAndInject, sendPageView, isOtherThanKWOrSA, initializeGTM, sendCustomEventToGTM, sendCustomDimension } from '../../utils';
 import { CONNECT_EXPRESS_SCREENS_NAVIGATION } from '../../constants';
 import { connectExpressFeatureScreens } from '../featuresScreens';
 import Background from '../shared/Background';
 var ConnectExpress = memo(function (_a) {
-    var leadId = _a.leadId, postURL = _a.postURL, showBoard = _a.showBoard, configToken = _a.configToken, props = __rest(_a, ["leadId", "postURL", "showBoard", "configToken"]);
+    var _b, _c, _d;
+    var leadId = _a.leadId, postURL = _a.postURL, configToken = _a.configToken, props = __rest(_a, ["leadId", "postURL", "configToken"]);
     var theme = useAppTheme().theme;
     var dispatch = useAppDispatch();
-    var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, settingLoading = _b.loading;
-    var _c = useAppSelector(connectExpressSelector), connectExpressError = _c.error, loading = _c.loading, customLoading = _c.customLoading, connectData = _c.data;
+    var _e = useAppSelector(settingsSelector), data = _e.data, error = _e.error, settingLoading = _e.loading;
+    var _f = useAppSelector(connectExpressSelector), connectExpressError = _f.error, loading = _f.loading, customLoading = _f.customLoading, connectData = _f.data;
     var onVerifyConfigTokenSuccess = function (data) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, lead, board;
-        return __generator(this, function (_b) {
-            _a = data || {}, lead = _a.lead, board = _a.board;
+        var lead;
+        return __generator(this, function (_a) {
+            lead = (data || {}).lead;
             if (lead === null || lead === void 0 ? void 0 : lead.id) {
                 dispatch(setIsLeadIdPassed(true));
                 dispatch(setLeadId(lead.id));
             }
-            if (showBoard === false || (board === null || board === void 0 ? void 0 : board.display) === false)
-                dispatch(setShowBoard(false));
             return [2];
         });
     }); };
     useAppConfig(__assign(__assign(__assign({ navigation: CONNECT_EXPRESS_SCREENS_NAVIGATION, maturity: 'express' }, props), { postURL: postURL, configToken: configToken }), (configToken && { onVerifyConfigTokenSuccess: onVerifyConfigTokenSuccess })));
-    useErrorListener(connectExpressError || error);
+    useErrorListener(connectExpressError || error, {
+        event: 'Send Event',
+        event_category: 'User Registration Flow',
+        event_action: 'Registration Error'
+    });
     useStepStartedListener();
-    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant, appConfig = data.appConfig;
+    var animationDirection = open ? (_b = appConfig.features) === null || _b === void 0 ? void 0 : _b.dialogStartTransition : (_c = appConfig.features) === null || _c === void 0 ? void 0 : _c.dialogEndTransition;
     React.useEffect(function () {
-        if (typeof showBoard === 'boolean' && !configToken)
-            dispatch(setShowBoard(showBoard));
+        initializeGTM();
         sendPageView({
-            title: 'Connect Express'
+            title: 'Connect Express',
+            connect_flow: 'Express'
         });
     }, []);
     React.useEffect(function () {
-        var _a;
+        var _a, _b, _c;
         if (!!((_a = data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2)) {
             dispatch(setDefaultCountryCode(data.businessCountry));
+            sendCustomEventToGTM({
+                event: 'Send Event',
+                event_category: 'User Registration Flow',
+                event_action: 'Registration Landing Page Viewed',
+                event_label: (_b = data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2
+            });
+            sendCustomDimension({
+                event: 'PageView',
+                website_country: (_c = data.businessCountry) === null || _c === void 0 ? void 0 : _c.iso2
+            });
         }
     }, [data.businessCountry]);
     React.useEffect(function () {
         var _a, _b;
-        if (settingLoading)
+        if (settingLoading || !props.open)
             return;
-        if (data.isValidOperator && props.open) {
-            if (configToken && connectData.leadId) {
-                dispatch(retrieveLeadIdentityByIdAsync(connectData.leadId));
-                return;
-            }
-            if (leadId) {
-                if (props.scope !== 'auth') {
-                    dispatch(setIsLeadIdPassed(true));
-                }
-                dispatch(setLeadId(leadId));
-                dispatch(retrieveLeadIdentityByIdAsync(leadId));
-                return;
-            }
-            if (!((_a = data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2)) {
-                dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP'));
-                return;
-            }
-            if (((_b = data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2) && (isKW(data.businessCountry.iso2) || isOtherThanKWOrSA(data.businessCountry.iso2))) {
-                dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_MOBILE_STEP'));
+        if (!data.isValidOperator) {
+            dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_OPERATOR_ERROR_STEP'));
+            return;
+        }
+        if (configToken && connectData.leadId) {
+            dispatch(retrieveLeadIdentityByIdAsync(connectData.leadId));
+            return;
+        }
+        if (leadId) {
+            if (props.scope !== 'auth') {
+                dispatch(setIsLeadIdPassed(true));
             }
+            dispatch(setLeadId(leadId));
+            dispatch(retrieveLeadIdentityByIdAsync(leadId));
+            return;
+        }
+        if (!((_a = data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2)) {
+            dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP'));
+            return;
+        }
+        if (((_b = data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2) && (isKW(data.businessCountry.iso2) || isOtherThanKWOrSA(data.businessCountry.iso2))) {
+            dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_MOBILE_STEP'));
         }
     }, [data.isValidOperator, settingLoading]);
-    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', isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: !isTapOrigin, dialogEdgeFormat: data.appConfig.dialogEdgeFormat }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: true }, { children: connectExpressFeatureScreens.map(function (_a, index) {
+    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', isTapOrigin: isTapOrigin, animationDirection: animationDirection, onClose: ((_d = appConfig.features) === null || _d === void 0 ? void 0 : _d.closeButton) ? handleDialogClose : undefined, loading: settingLoading || customLoading, error: error, open: open, screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: !isTapOrigin, dialogEdgeFormat: appConfig.dialogEdgeFormat, features: __assign({ tapTextLogo: false, poweredBy: !isTapOrigin }, appConfig.features) }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: true, isTapOrigin: isTapOrigin }, { children: connectExpressFeatureScreens.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));
@@ -145,7 +168,7 @@ export function ConnectExpressElement(props) {
 export function renderConnectExpressLib(config, elementId) {
     var el = findOrCreateElementAndInject(elementId);
     var root = createRoot(el);
-    root.render(_jsx(ConnectExpressElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };
+    root.render(_jsx(ConnectExpressElement, __assign({}, config, { unmount: unmount })));
     return { unmount: unmount };
 }

package/build/features/connectExpress/screens/AuthenticationList/LicenseNumber.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { KW_MAX_LICENSE_LENGTH, KW_MIN_LICENSE_LENGTH, LICENSE_NUMBER_MAX_LENGTH, LICENSE_NUMBER_MIN_LENGTH } from '../../../../constants';
-import { removeAllOtherThanCharsNumberSlashAndHyphen, isSA } from '../../../../utils';
+import { isSA, cleanFLandCRNumber } from '../../../../utils';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
@@ -19,7 +19,7 @@ var LicenseNumber = function () {
     var isSACountry = React.useMemo(function () { return isSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var handleFLNumberChange = function (_a) {
         var target = _a.target;
-        var value = removeAllOtherThanCharsNumberSlashAndHyphen(target.value);
+        var value = cleanFLandCRNumber(target.value);
         licenseNumberControl.field.onChange(value);
     };
     var clearLicenseNumber = function () {

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

@@ -53,7 +53,7 @@ import { ScreenContainer } from '../../../shared/Containers';
 import BusinessCountry from '../../../shared/BusinessCountry';
 import Button from '../../../shared/Button';
 import Collapse from '../../../../components/Collapse';
-import { findCountryByIso2, isKW, isOtherThanKWOrSA } from '../../../../utils';
+import { findCountryByIso2, isKW, isOtherThanKWOrSA, sendCustomEventToGTM } from '../../../../utils';
 import { handleNextScreenStep, handleSetCountryByIso2, settingsSelector } from '../../../../app/settings';
 import { clearError, connectExpressSelector, setDefaultCountryCode, storeIsStartFromBusinessCountry, updateBusinessCountryAsync } from '../../../app/connectExpress/connectExpressStore';
 var BusinessCountryScreen = function (_a) {
@@ -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 (!data.leadId) return [3, 2];
                     return [4, dispatch(updateBusinessCountryAsync(iso2))];
                 case 1:

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

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

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

@@ -63,7 +63,7 @@ import Input from '../../../shared/Input';
 import { EndAdornment } from '../../../shared/EndAdornment';
 import { ScreenContainer } from '../../../shared/Containers';
 import { checkBrandNameAvailabilityAsync, connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
-import { removeAllOtherThanCharsNumbersAndSpace } from '../../../../utils';
+import { removeAllOtherThanCharsNumbersAndSpace, removeLeadingSpace } from '../../../../utils';
 import { BRAND_NAME_MAX_LENGTH } from '../../../../constants';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
@@ -121,7 +121,7 @@ var BrandName = function (_a) {
     }); }, 500);
     var handleBrandNameChange = function (_a) {
         var target = _a.target;
-        var value = removeAllOtherThanCharsNumbersAndSpace(target.value);
+        var value = removeLeadingSpace(removeAllOtherThanCharsNumbersAndSpace(target.value));
         brandControl.field.onChange(value);
     };
     React.useEffect(function () {

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

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

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

@@ -14,7 +14,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { CR_MIN_LICENSE_LENGTH, CR_NUMBER_MAX_LENGTH, FL_MIN_LICENSE_LENGTH, FL_NUMBER_MAX_LENGTH, KW_MAX_LICENSE_LENGTH, KW_MIN_LICENSE_LENGTH } from '../../../../constants';
-import { removeAllOtherThanCharsAndNumber, isKW, isOtherThanKWOrSA } from '../../../../utils';
+import { isKW, isOtherThanKWOrSA, cleanFLandCRNumber } from '../../../../utils';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
@@ -36,7 +36,7 @@ var LicenseNumber = function (_a) {
     var isCR = (selectedLicense === null || selectedLicense === void 0 ? void 0 : selectedLicense.type) === BusinessType.CR;
     var handleFLNumberChange = function (_a) {
         var target = _a.target;
-        var value = removeAllOtherThanCharsAndNumber(target.value);
+        var value = cleanFLandCRNumber(target.value);
         licenseNumberControl.field.onChange(value);
     };
     var clearLicenseNumber = function () {

package/build/features/connectExpress/screens/CollectBusinessInfo/TAC.d.ts

@@ -10,7 +10,7 @@ export declare const TACContainerStyled: import("@emotion/styled").StyledCompone
     sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & TACContainerStyledProps, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("left" | "right" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "bottom" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & TACContainerStyledProps, {}, {}>;
 interface TACProps {
     show: boolean;
     readOnly?: boolean;

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

@@ -18,8 +18,7 @@ import { styled } from '@mui/material/styles';
 import { useAppDispatch, useAppSelector, useExcludeReadOnlyFelids, useFormErrorAndUpdateReadOnly, useFormReadOnly, useSetFromDefaultValues } from '../../../../hooks';
 import { AuthForType } from '../../../../@types';
 import { useLanguage } from '../../../../hooks';
-import { deepCopy, isKW } from '../../../../utils';
-import { countriesCode } from '../../../../constants';
+import { deepCopy, isKW, sendCustomEventToGTM } from '../../../../utils';
 import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
@@ -49,7 +48,7 @@ var CollectIndividualInfo = function (_a) {
     var startWithNID = otpData.authFor === AuthForType.NATIONAL_ID;
     var startWithNIDMissed = otpData.authFor === AuthForType.NATIONAL_ID_MISSED;
     var contact = ((responseData === null || responseData === void 0 ? void 0 : responseData.leadData) || {}).contact;
-    var countryCode = individualData.countryCode;
+    var countryCode = individualData.countryCode, isPrevDob = individualData.isPrevDob;
     var isEmailAvailable = (responseData || {}).isEmailAvailable;
     var methods = useForm({
         resolver: yupResolver(CollectIndividualInfoValidation),
@@ -60,6 +59,13 @@ var CollectIndividualInfo = function (_a) {
     var originalReadOnly = useFormReadOnly(methods);
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly);
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Name and Email Page Viewed'
+        });
+    }, []);
     React.useEffect(function () {
         if (countryCode.iso2 !== methods.getValues('countryCode.iso2'))
             methods.setValue('countryCode', countryCode);
@@ -69,11 +75,28 @@ var CollectIndividualInfo = function (_a) {
     };
     var onBack = function () {
         var _a;
-        dispatch(resetIndividualScreen());
+        if (!individualData.isPrevDob) {
+            dispatch(resetIndividualScreen());
+        }
         var code = (_a = settingsData.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2;
-        var screen = startWithNID ? (isKW(code) ? 'CONNECT_EXPRESS_CIVIL_ID_STEP' : 'CONNECT_EXPRESS_NID_STEP') : 'CONNECT_EXPRESS_MOBILE_STEP';
+        var screen = 'CONNECT_EXPRESS_MOBILE_STEP';
+        if (startWithNID) {
+            if (isKW(code))
+                screen = 'CONNECT_EXPRESS_CIVIL_ID_STEP';
+            else {
+                screen = 'CONNECT_EXPRESS_NID_STEP';
+                if (isPrevDob)
+                    screen = 'CONNECT_EXPRESS_COLLECT_DOB_INFO_STEP';
+            }
+        }
         if (startWithNIDMissed) {
-            screen = isKW(code) ? 'CONNECT_EXPRESS_CIVIL_ID_MISSED_STEP' : 'CONNECT_EXPRESS_NID_MISSED_STEP';
+            if (isKW(code))
+                screen = 'CONNECT_EXPRESS_CIVIL_ID_MISSED_STEP';
+            else {
+                screen = 'CONNECT_EXPRESS_NID_MISSED_STEP';
+                if (isPrevDob)
+                    screen = 'CONNECT_EXPRESS_COLLECT_DOB_INFO_STEP';
+            }
         }
         dispatch(handlePrevScreenStep(screen));
     };
@@ -93,6 +116,6 @@ var CollectIndividualInfo = function (_a) {
     var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email;
     var disabled = emailErrChecks || emailChecking || !isEmailValid;
     var emailReadOnly = readOnly['email'] && !((_b = methods.getFieldState('email').error) === null || _b === void 0 ? void 0 : _b.message) && !methods.getFieldState('email').isDirty;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, { readOnly: readOnly['name'], show: !listActive }), _jsx(MobileNumber, { readOnly: readOnly['mobile'], show: true, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: countriesCode }), _jsx(Email, { readOnly: emailReadOnly, show: !listActive, fetchingEmail: function (v) { return setEmailChecking(v); }, emailChecking: emailChecking }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ 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(Name, { readOnly: readOnly['name'], show: !listActive }), _jsx(MobileNumber, { readOnly: readOnly['mobile'], show: true, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: settingsData.countries }), _jsx(Email, { readOnly: emailReadOnly, show: !listActive, fetchingEmail: function (v) { return setEmailChecking(v); }, emailChecking: emailChecking }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(CollectIndividualInfo);

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

@@ -53,7 +53,6 @@ import { useController, useFormContext } from 'react-hook-form';
 import axios from 'axios';
 import { styled } from '@mui/material/styles';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { removeAllOtherThanCharsNumbersAtAndDot } from '../../../../utils';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
@@ -89,8 +88,7 @@ var Email = function (_a) {
         });
     }); }, 500);
     var handleEmailChange = function (event) {
-        var value = removeAllOtherThanCharsNumbersAtAndDot(event.target.value);
-        emailControl.field.onChange(value);
+        emailControl.field.onChange(event.target.value);
     };
     React.useEffect(function () {
         var isValid = emailValue && !error && emailValue.length > 3;

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

@@ -26,7 +26,7 @@ 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 { removeAllCharsFromNumber } from '../../../../utils';
+import { getMobileNumberLen, removeAllCharsFromNumber } from '../../../../utils';
 import { useLanguage } from '../../../../hooks';
 import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
@@ -93,9 +93,10 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var countryName = (isAr ? (_b = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _c === void 0 ? void 0 : _c.english) || '';
     var error = !!mobileValue ? (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message : '';
     var isSA = countryCodeValue.iso2 === 'SA';
-    var mobileLen = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits;
-    var isStartsWith5 = mobileValue.startsWith('5');
-    var requiredLen = isSA && isStartsWith5 ? mobileLen - 1 : mobileLen;
+    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 });
@@ -137,16 +138,16 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
         var filteredCountries = countries.filter(function (country) {
             return country.idd_prefix.toString().toLowerCase().startsWith(value.replace('+', '').toLowerCase()) ||
                 country.capital.toLowerCase().startsWith(value.toLowerCase()) ||
-                country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
-                country.name.english.toLowerCase().startsWith(value.toLowerCase());
+                country.name.arabic.toLowerCase().includes(value.toLowerCase()) ||
+                country.name.english.toLowerCase().includes(value.toLowerCase());
         });
         setCountries(filteredCountries);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { readOnly: readOnly, inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { readOnly: readOnly, inputProps: { maxLength: requiredMaxLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () {
                             if (readOnly)
                                 return;
                             toggleCountryList();
-                        } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+                        } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !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' }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
                                 return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
                             } })] }))] })) })));
 });