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

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

@@ -101,7 +101,7 @@ var NID = function (_a) {
     React.useEffect(function () {
         dispatch(resetStore());
     }, []);
-    var disabled = !methods.formState.isValid;
+    var disabled = !methods.formState.isValid || !!error;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, onBackClicked: onBackToCountryList, disableBack: !data.isStartFromBusinessCountry, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading || settingsStore.loading }, { children: t('mobile_button_label') }))] }))] }))] })) })) }));
 };
 export default React.memo(NID);

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 '../../../shared/GenericError';
+import GenericError from '../../../../features/shared/GenericError';
 var OperatorError = function (_a) {
     var t = useTranslation().t;
     return _jsx(GenericError, { error: t('operator_is_invalid'), errorTitle: t('oops') });

package/build/features/connectExpress/ConnectExpress.js

@@ -67,7 +67,7 @@ import { store } from '../../app/store';
 import { connectExpressSelector, setIsLeadIdPassed, setLeadId, retrieveLeadIdentityByIdAsync, setDefaultCountryCode } from '../app/connectExpress/connectExpressStore';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { isKW, findOrCreateElementAndInject, sendPageView, isOtherThanKWOrSA, initializeGTM } from '../../utils';
+import { isKW, findOrCreateElementAndInject, sendPageView, isOtherThanKWOrSA, initializeGTM, sendCustomEventToGTM, sendCustomDimension } from '../../utils';
 import { CONNECT_EXPRESS_SCREENS_NAVIGATION } from '../../constants';
 import { connectExpressFeatureScreens } from '../featuresScreens';
 import Background from '../shared/Background';
@@ -89,20 +89,33 @@ var ConnectExpress = memo(function (_a) {
         });
     }); };
     useAppConfig(__assign(__assign(__assign({ navigation: CONNECT_EXPRESS_SCREENS_NAVIGATION, maturity: 'express' }, props), { postURL: postURL, configToken: configToken }), (configToken && { onVerifyConfigTokenSuccess: onVerifyConfigTokenSuccess })));
-    useErrorListener(connectExpressError || error);
+    useErrorListener(connectExpressError || error, {
+        event: 'Send Event',
+        event_category: 'User Registration Flow',
+        event_action: 'Registration Error'
+    });
     useStepStartedListener();
     var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant, appConfig = data.appConfig;
     React.useEffect(function () {
         initializeGTM();
         sendPageView({
-            title: 'Connect Express',
-            connect_flow: 'Express'
+            title: 'Connect 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 () {

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

@@ -29,7 +29,6 @@ import BrandList from './BrandList';
 import EntityList from './EntityList';
 import LicenseNumber from './LicenseNumber';
 import EntityLegalName from './EntityLegalName';
-import LicenseType from './EntityLicenseType';
 var ListType;
 (function (ListType) {
     ListType["BrandList"] = "BrandList";
@@ -65,8 +64,7 @@ var AuthenticationList = function (_a) {
     var dispatch = useAppDispatch();
     var onSubmit = function (formData) {
         if (isAddEntity) {
-            var licenseNumber = formData.licenseNumber, legalName = formData.legalName, brandInfo_1 = formData.brandInfo, licenseType = formData.licenseType;
-            var data_1 = { licenseNumber: licenseNumber, legalName: legalName, brandInfo: brandInfo_1, licenseType: licenseType };
+            var data_1 = { licenseNumber: formData.licenseNumber, legalName: formData.legalName, brandInfo: formData.brandInfo };
             dispatch(createEntity(deepCopy(data_1)));
             return;
         }
@@ -78,7 +76,6 @@ var AuthenticationList = function (_a) {
             setIsAddEntity(false);
             methods.setValue('licenseNumber', '');
             methods.setValue('legalName', '');
-            methods.setValue('licenseType', '');
             methods.setValue('entityInfo', undefined, { shouldValidate: true });
             return;
         }
@@ -99,6 +96,6 @@ var AuthenticationList = function (_a) {
     };
     var isBrandList = listActive === ListType.BrandList;
     var isEntityList = listActive === ListType.EntityList;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { list: brandList || [], show: !isAddEntity && !isEntityList, onListOpen: function () { return handleMenuClick(ListType.BrandList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(EntityList, { countryList: settingsData.countries || [], show: !isBrandList, handleAddEntity: function (flag) { return setIsAddEntity(flag); }, onListOpen: function () { return handleMenuClick(ListType.EntityList); }, onListClose: function () { return handleMenuClick(); } }), _jsxs(Collapse, __assign({ in: isAddEntity && !isBrandList && !isEntityList }, { children: [_jsx(EntityLegalName, {}), _jsx(LicenseType, {}), _jsx(LicenseNumber, {})] })), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: isAddEntity ? t('create_new_entity') : t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { list: brandList || [], show: !isAddEntity && !isEntityList, onListOpen: function () { return handleMenuClick(ListType.BrandList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(EntityList, { countryList: settingsData.countries || [], show: !isBrandList, handleAddEntity: function (flag) { return setIsAddEntity(flag); }, onListOpen: function () { return handleMenuClick(ListType.EntityList); }, onListClose: function () { return handleMenuClick(); } }), _jsxs(Collapse, __assign({ in: isAddEntity && !isBrandList && !isEntityList }, { children: [_jsx(EntityLegalName, {}), _jsx(LicenseNumber, {})] })), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: isAddEntity ? t('create_new_entity') : t('next') })) }))] })) })) }));
 };
 export default React.memo(AuthenticationList);

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

@@ -81,7 +81,6 @@ var EntityList = function (_a) {
             if (filteredEntityList.length) {
                 setValue('entityInfo', filteredEntityList[0], { shouldValidate: true });
                 setValue('licenseNumber', '');
-                setValue('licenseType', '');
                 setValue('legalName', '');
                 handleAddEntity === null || handleAddEntity === void 0 ? void 0 : handleAddEntity(false);
             }
@@ -122,12 +121,8 @@ var EntityList = function (_a) {
         selectedEntityControl.field.onChange(entity);
         if (entity.id === ADD_ENTITY)
             handleAddEntity === null || handleAddEntity === void 0 ? void 0 : handleAddEntity(true);
-        else {
-            setValue('licenseNumber', '');
-            setValue('legalName', '');
-            setValue('licenseType', '');
+        else
             handleAddEntity === null || handleAddEntity === void 0 ? void 0 : handleAddEntity(false);
-        }
         onCloseEntityList();
     };
     var selectedEntity = selectedEntityControl.field.value;

package/build/features/connectExpress/screens/AuthenticationList/validation.d.ts

@@ -3,18 +3,15 @@ export declare const AuthenticationListValidationSchema: yup.ObjectSchema<import
     brandInfo: 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>>;
     entityInfo: any;
     licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    licenseType: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     legalName: 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, {
     brandInfo: 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>>;
     entityInfo: any;
     licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    licenseType: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     legalName: 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, {
     brandInfo: 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>>;
     entityInfo: any;
     licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    licenseType: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     legalName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>>;

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

@@ -34,16 +34,6 @@ export var AuthenticationListValidationSchema = yup.object().shape({
             .required('');
     })
         .required(''),
-    licenseType: yup
-        .string()
-        .when('entityInfo', function (entityInfo) {
-        var isAddEntity = (entityInfo === null || entityInfo === void 0 ? void 0 : entityInfo.id) === ADD_ENTITY;
-        if (!isAddEntity) {
-            return yup.string().optional();
-        }
-        return yup.string().required('choose_license_type');
-    })
-        .required(''),
     legalName: yup
         .string()
         .when('entityInfo', function (entityInfo) {

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, sendCustomEventToGTM } from '../../../../utils';
+import { findCountryByIso2, isKW, isOtherThanKWOrSA } from '../../../../utils';
 import { handleNextScreenStep, handleSetCountryByIso2, settingsSelector } from '../../../../app/settings';
 import { clearError, connectExpressSelector, setDefaultCountryCode, storeIsStartFromBusinessCountry, updateBusinessCountryAsync } from '../../../app/connectExpress/connectExpressStore';
 var BusinessCountryScreen = function (_a) {
@@ -81,12 +81,6 @@ 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,12 +79,17 @@ 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 () {
         dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP'));
     };
-    var disabled = !methods.formState.isValid;
+    var disabled = !methods.formState.isValid || !!error;
     var isLeadIdentityIdAvailable = (_c = (_b = responseData === null || responseData === void 0 ? void 0 : responseData.leadData) === null || _b === void 0 ? void 0 : _b.identification) === null || _c === void 0 ? void 0 : _c.id;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(IDNumber, { sx: { mb: methods.formState.isValid ? 7.5 : 0, transition: 'mb 0.3s' } }), _jsx(Button, __assign({ loading: loading, isAr: isAr, onBackClicked: onBackToCountryList, disableBack: !data.isStartFromBusinessCountry, disabled: disabled, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: isLeadIdPassed ? !isLeadIdentityIdAvailable && !methods.formState.isValid : !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading }, { children: t('mobile_button_label') }))] }))] })) })) }));
 };

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

@@ -48,7 +48,7 @@ var CivilID = function (_a) {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
-    var disabled = !methods.formState.isValid;
+    var disabled = !methods.formState.isValid || !!error;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(IDNumber, { sx: { mb: 5, transition: 'mb 0.3s' } }), _jsx(Button, __assign({ loading: loading, isAr: isAr, onBackClicked: onBack, disabled: disabled, error: t(error || '') }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(CivilID);

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());
@@ -80,7 +87,7 @@ var CollectBusinessInfo = function (_a) {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
-    var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName;
+    var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
     var disabled = brandErrChecks || brandNameChecking || isBrandNameAvailable == false;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandName, { readOnly: readOnly['brandName'], show: true, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(LicenseList, { readOnly: readOnly['selectedLicense'], onListOpen: function () {
                             setListActive(true);

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

@@ -1,10 +1,32 @@
 import * as React from 'react';
-export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<{
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "action" | "primary" | "secondary" | "warning" | undefined;
+    fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
+    htmlColor?: string | undefined;
+    inheritViewBox?: boolean | undefined;
+    shapeRendering?: string | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    titleAccess?: string | undefined;
+    viewBox?: string | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-}, "className" | "style" | "classes" | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledComponent<{
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "action" | "primary" | "secondary" | "warning" | undefined;
+    fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
+    htmlColor?: string | undefined;
+    inheritViewBox?: boolean | undefined;
+    shapeRendering?: string | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    titleAccess?: string | undefined;
+    viewBox?: string | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-}, "className" | "style" | "classes" | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 type LicenseTypeProps = {
     show: boolean;
     readOnly?: boolean;

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

@@ -3,9 +3,14 @@ import { BoxProps } from '@mui/material/Box';
 interface TACContainerStyledProps extends BoxProps {
     readOnly?: boolean;
 }
-export declare const TACContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const TACContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: React.ReactNode;
+    component?: React.ElementType<any> | undefined;
+    ref?: React.Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & TACContainerStyledProps, {}, {}>;
+}, ("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, {}, {}>;
 interface TACProps {
     show: boolean;
     readOnly?: boolean;

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

@@ -18,7 +18,7 @@ import { styled } from '@mui/material/styles';
 import { useAppDispatch, useAppSelector, useExcludeReadOnlyFelids, useFormErrorAndUpdateReadOnly, useFormReadOnly, useSetFromDefaultValues } from '../../../../hooks';
 import { AuthForType } from '../../../../@types';
 import { useLanguage } from '../../../../hooks';
-import { deepCopy, isKW } from '../../../../utils';
+import { deepCopy, isKW, sendCustomEventToGTM } from '../../../../utils';
 import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
@@ -59,6 +59,13 @@ var CollectIndividualInfo = function (_a) {
     var originalReadOnly = useFormReadOnly(methods);
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly);
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Name and Email Page Viewed'
+        });
+    }, []);
     React.useEffect(function () {
         if (countryCode.iso2 !== methods.getValues('countryCode.iso2'))
             methods.setValue('countryCode', countryCode);
@@ -89,7 +96,7 @@ var CollectIndividualInfo = function (_a) {
     }, [responseData]);
     var isLeadEmailAvailable = (contact === null || contact === void 0 ? void 0 : contact.email) === methods.watch('email');
     var isEmailValid = typeof isEmailAvailable === 'undefined' ? isLeadEmailAvailable : isEmailAvailable;
-    var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email;
+    var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email || !!error;
     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: 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') })) }))] })) })) }));

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/CreateAccountLoader/CreateAccountLoader.js

@@ -1,24 +1,34 @@
+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 } from "react/jsx-runtime";
 import * as React from 'react';
-import { isNetworkError, sleep } from '../../../../utils';
-import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { useTranslation } from 'react-i18next';
+import { isNetworkError } from '../../../../utils';
+import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
 import { connectExpressSelector, createAccountAsync } from '../../../app/connectExpress/connectExpressStore';
 import CreateAccountLoading from '../../../shared/CreateAccountLoading';
+import Button from '../../../shared/Button';
 var CreateAccountLoader = function (_a) {
     var dispatch = useAppDispatch();
-    var error = useAppSelector(connectExpressSelector).error;
-    var _b = React.useState(0), isRetryCount = _b[0], setIsRetryCount = _b[1];
-    var isNE = React.useMemo(function () { return isNetworkError(error); }, [error]);
+    var isAr = useLanguage().isAr;
+    var t = useTranslation().t;
+    var _b = useAppSelector(connectExpressSelector), error = _b.error, loading = _b.loading;
     React.useEffect(function () {
-        dispatch(createAccountAsync({ isRetry: false }));
+        dispatch(createAccountAsync());
     }, []);
-    React.useEffect(function () {
-        if (isNE && isRetryCount <= 3) {
-            sleep(2000);
-            setIsRetryCount(isRetryCount + 1);
-            dispatch(createAccountAsync({ isRetry: true }));
-        }
-    }, [isNE]);
-    return _jsx(CreateAccountLoading, { error: isNE && isRetryCount <= 3 ? '' : error });
+    var onReTry = function () {
+        dispatch(createAccountAsync());
+    };
+    var isNE = React.useMemo(function () { return isNetworkError(error); }, [error]);
+    return (_jsx(CreateAccountLoading, __assign({ error: error }, { children: isNE && (_jsx(Button, __assign({ onClick: onReTry, disableBack: true, isAr: isAr, loading: loading }, { children: t('try_again') }))) })));
 };
 export default React.memo(CreateAccountLoader);

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

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

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

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

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

@@ -30,7 +30,7 @@ import MobileNumber from './MobileNumber';
 import { PhoneValidationSchema } from './validation';
 import { ICONS_NAMES } from '../../../../constants';
 import TAC from './TAC';
-import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
+import { deepCopy } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -96,13 +96,6 @@ var Mobile = function (_a) {
     };
     var onBack = function () {
         var screen = isKuwait ? 'CONNECT_EXPRESS_CIVIL_ID_STEP' : 'CONNECT_EXPRESS_NID_STEP';
-        var eventAction = isKuwait ? 'PACI Click' : 'Abser Click';
-        sendCustomEventToGTM({
-            event: 'Send Event',
-            event_category: 'User Registration Flow',
-            event_action: eventAction,
-            event_label: settingData.businessCountry.iso2
-        });
         dispatch(handlePrevScreenStep(screen));
     };
     var onBackToCountryList = function () {
@@ -116,7 +109,7 @@ var Mobile = function (_a) {
     };
     var originalReadOnly = useFormReadOnly(methods);
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly);
-    var disabled = !methods.formState.isValid;
+    var disabled = !methods.formState.isValid || !!error;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { readOnly: readOnly['mobile'], show: true, countries: settingData.countries, onListOpen: handleCountryOpen, onListClose: handleCountryClose }) }), _jsxs(Collapse, __assign({ in: !anchor }, { children: [_jsx(TAC, { show: isLeadIdPassed, readOnly: readOnly['termAndConditionChecked'] }), _jsx(Button, __assign({ isAr: isAr, onBackClicked: onBackToCountryList, disableBack: !data.isStartFromBusinessCountry, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: (isLeadIdPassed ? !isLeadIdentityIdAvailable : !methods.formState.isValid) && !isOther }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), isKuwait ? (_jsx(MobileButton, __assign({ disabled: loading, onClick: function () { return onBack(); }, icon: ICONS_NAMES.PACI_ICON }, { children: t('paci_button_label') }))) : (_jsx(AbsherButton, __assign({ disabled: loading, onClick: function () { return onBack(); } }, { children: t('absher_button_label') })))] }))] }))] })) })) }));
 };
 export default React.memo(Mobile);

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

@@ -29,7 +29,7 @@ import Text from '../../../../components/Text';
 import IDNumber from './IDNumber';
 import DOB from './DOB';
 import TAC from './TAC';
-import { deepCopy } from '../../../../utils';
+import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -84,6 +84,11 @@ var NID = function (_a) {
         setCollapse(flag);
     };
     var onBack = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'User Registration Flow',
+            event_action: 'Switch to mobile number Login Clicked'
+        });
         dispatch(handlePrevScreenStep());
     };
     var onBackToCountryList = function () {
@@ -91,7 +96,7 @@ var NID = function (_a) {
     };
     var originalReadOnly = useFormReadOnly(methods);
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly);
-    var disabled = !methods.formState.isValid;
+    var disabled = !methods.formState.isValid || !!error;
     var isLeadIdentityIdAvailable = (_c = (_b = responseData === null || responseData === void 0 ? void 0 : responseData.leadData) === null || _b === void 0 ? void 0 : _b.identification) === null || _c === void 0 ? void 0 : _c.id;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse, readOnly: readOnly['nid'] }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose, readOnly: readOnly['dob'] }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(TAC, { show: isLeadIdPassed, readOnly: readOnly['termAndConditionChecked'] }), _jsx(Button, __assign({ loading: loading, isAr: isAr, onBackClicked: onBackToCountryList, disableBack: !data.isStartFromBusinessCountry, disabled: disabled, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: isLeadIdPassed ? !isLeadIdentityIdAvailable && !methods.formState.isValid : !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading }, { children: t('mobile_button_label') }))] }))] }))] })) })) }));
 };

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

@@ -3,9 +3,14 @@ import { BoxProps } from '@mui/material/Box';
 interface TACContainerStyledProps extends BoxProps {
     readOnly?: boolean;
 }
-export declare const TACContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const TACContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: React.ReactNode;
+    component?: React.ElementType<any> | undefined;
+    ref?: React.Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & TACContainerStyledProps, {}, {}>;
+}, ("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, {}, {}>;
 interface TACProps {
     show: boolean;
     readOnly?: boolean;

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

@@ -56,7 +56,7 @@ var NID = function (_a) {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
-    var disabled = !methods.formState.isValid;
+    var disabled = !methods.formState.isValid || !!error;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(Button, __assign({ loading: loading, isAr: isAr, onBackClicked: onBack, disabled: disabled, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(NID);