@tap-payments/auth-jsconnect 2.8.59-beta → 2.8.59-sandbox

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 || !!error;
+    var disabled = !methods.formState.isValid;
     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 '../../../../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/connectExpress/ConnectExpress.js

@@ -100,7 +100,8 @@ var ConnectExpress = memo(function (_a) {
     React.useEffect(function () {
         initializeGTM();
         sendPageView({
-            title: 'Connect Express'
+            title: 'Connect Express',
+            connect_flow: 'Express'
         });
     }, []);
     React.useEffect(function () {

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

@@ -29,6 +29,7 @@ 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";
@@ -64,7 +65,8 @@ var AuthenticationList = function (_a) {
     var dispatch = useAppDispatch();
     var onSubmit = function (formData) {
         if (isAddEntity) {
-            var data_1 = { licenseNumber: formData.licenseNumber, legalName: formData.legalName, brandInfo: formData.brandInfo };
+            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 };
             dispatch(createEntity(deepCopy(data_1)));
             return;
         }
@@ -76,6 +78,7 @@ var AuthenticationList = function (_a) {
             setIsAddEntity(false);
             methods.setValue('licenseNumber', '');
             methods.setValue('legalName', '');
+            methods.setValue('licenseType', '');
             methods.setValue('entityInfo', undefined, { shouldValidate: true });
             return;
         }
@@ -96,6 +99,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(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(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') })) }))] })) })) }));
 };
 export default React.memo(AuthenticationList);

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

@@ -0,0 +1,9 @@
+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"> & {
+    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"> & {
+    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>, {}, {}>;
+declare const Type: () => import("react/jsx-runtime").JSX.Element;
+export default Type;

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

@@ -0,0 +1,90 @@
+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 { styled, alpha } from '@mui/material/styles';
+import InfoIcon from '@mui/icons-material/Info';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { useTranslation } from 'react-i18next';
+import { useController, useFormContext } from 'react-hook-form';
+import Text from '../../../../components/Text';
+import { ScreenContainer } from '../../../shared/Containers';
+import Mandatory from '../../../shared/Mandatory';
+import RadioLabel from '../../../../components/RadioLabel';
+import { LicenseType } from '../../../../@types';
+import RadioGroup from '../../../../components/RadioGroup';
+import Tooltip from '../../../../components/Tooltip';
+import Radio from '../../../../components/Radio';
+import { clearError, connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+var LabelTextStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, theme.typography.caption), { color: alpha(theme.palette.text.primary, 0.6), marginBlockEnd: theme.spacing(0.625) }));
+});
+var RadioGroupStyled = styled(RadioGroup)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginInlineStart: theme.spacing(0.25)
+    });
+});
+var RadioStyled = styled(Radio)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '& .MuiSvgIcon-root': {
+            fontSize: theme.spacing(2.25),
+            width: theme.spacing(2.25),
+            height: theme.spacing(2.25)
+        }
+    });
+});
+var LabelStyled = styled('span')(function () { return ({
+    display: 'inline-flex',
+    alignItems: 'center'
+}); });
+export var InfoIconStyled = styled(InfoIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(2.75),
+        height: theme.spacing(2.125),
+        cursor: 'pointer',
+        color: alpha(theme.palette.text.primary, 0.4),
+        display: 'inline-flex'
+    });
+});
+export var InfoOutlinedIconStyled = styled(InfoOutlinedIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(2.75),
+        height: theme.spacing(2.125),
+        cursor: 'pointer',
+        color: alpha(theme.palette.text.primary, 0.4),
+        display: 'inline-flex'
+    });
+});
+var Type = function () {
+    var t = useTranslation().t;
+    var control = useFormContext().control;
+    var error = useAppSelector(connectExpressSelector).error;
+    var _a = React.useState(false), isCRHovered = _a[0], setIsCRHovered = _a[1];
+    var _b = React.useState(false), isFLHovered = _b[0], setIsFLHovered = _b[1];
+    var typeControl = useController({ control: control, name: 'licenseType' });
+    var dispatch = useAppDispatch();
+    var handleOnChange = function (_a) {
+        var target = _a.target;
+        if (error)
+            dispatch(clearError());
+        typeControl.field.onChange(target.value);
+    };
+    var typeValue = typeControl.field.value;
+    return (_jsxs(ScreenContainer, __assign({ sx: { pb: 1.5, pl: 2.5, pr: 2.5 } }, { children: [_jsxs(LabelTextStyled, { children: [t('signup_business_type_label'), _jsx(Mandatory, {})] }), _jsxs(RadioGroupStyled, __assign({ value: typeValue ? (typeValue === LicenseType.FL ? LicenseType.FL : LicenseType.CR) : false, onChange: handleOnChange }, { children: [_jsx(RadioLabel, { value: LicenseType.FL, label: _jsxs(LabelStyled, { children: [t('homemaker_reg'), _jsx(Tooltip, __assign({ title: t('homemaker_reg_hint'), onMouseOver: function () { return setIsFLHovered(true); }, onMouseLeave: function () { return setIsFLHovered(false); }, onTouchStartCapture: function () { return setIsFLHovered(true); } }, { children: isFLHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), control: _jsx(RadioStyled, { color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }) }), _jsx(RadioLabel, { value: LicenseType.CR, sx: { marginInlineEnd: '0px' }, label: _jsxs(LabelStyled, { children: [t('commercial_reg'), _jsx(Tooltip, __assign({ title: t('commercial_reg_hint'), onMouseOver: function () { return setIsCRHovered(true); }, onMouseLeave: function () { return setIsCRHovered(false); }, onTouchStartCapture: function () { return setIsCRHovered(true); } }, { children: isCRHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), control: _jsx(RadioStyled, { color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }) })] }))] })));
+};
+export default Type;

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

@@ -81,6 +81,7 @@ 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);
             }
@@ -121,8 +122,12 @@ var EntityList = function (_a) {
         selectedEntityControl.field.onChange(entity);
         if (entity.id === ADD_ENTITY)
             handleAddEntity === null || handleAddEntity === void 0 ? void 0 : handleAddEntity(true);
-        else
+        else {
+            setValue('licenseNumber', '');
+            setValue('legalName', '');
+            setValue('licenseType', '');
             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,15 +3,18 @@ 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,6 +34,16 @@ 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 } 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

@@ -89,7 +89,7 @@ var CivilID = function (_a) {
     var onBackToCountryList = function () {
         dispatch(handleCurrentActiveScreen('CONNECT_EXPRESS_BUSINESS_COUNTRY_STEP'));
     };
-    var disabled = !methods.formState.isValid || !!error;
+    var disabled = !methods.formState.isValid;
     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 || !!error;
+    var disabled = !methods.formState.isValid;
     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

@@ -87,7 +87,7 @@ var CollectBusinessInfo = function (_a) {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
-    var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
+    var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName;
     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,32 +1,10 @@
 import * as React from 'react';
-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"> & {
+export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-}, 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"> & {
+}, "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"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "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,14 +3,9 @@ import { BoxProps } from '@mui/material/Box';
 interface TACContainerStyledProps extends BoxProps {
     readOnly?: boolean;
 }
-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"> & {
+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"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, ("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/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & TACContainerStyledProps, {}, {}>;
 interface TACProps {
     show: boolean;
     readOnly?: boolean;

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

@@ -96,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 || !!error;
+    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: 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,6 +53,7 @@ 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';
@@ -88,7 +89,8 @@ var Email = function (_a) {
         });
     }); }, 500);
     var handleEmailChange = function (event) {
-        emailControl.field.onChange(event.target.value);
+        var value = removeAllOtherThanCharsNumbersAtAndDot(event.target.value);
+        emailControl.field.onChange(value);
     };
     React.useEffect(function () {
         var isValid = emailValue && !error && emailValue.length > 3;

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

@@ -1,34 +1,24 @@
-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 { useTranslation } from 'react-i18next';
-import { isNetworkError } from '../../../../utils';
-import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
+import { isNetworkError, sleep } from '../../../../utils';
+import { useAppDispatch, useAppSelector } 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 isAr = useLanguage().isAr;
-    var t = useTranslation().t;
-    var _b = useAppSelector(connectExpressSelector), error = _b.error, loading = _b.loading;
+    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]);
     React.useEffect(function () {
-        dispatch(createAccountAsync());
+        dispatch(createAccountAsync({ isRetry: false }));
     }, []);
-    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') }))) })));
+    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 });
 };
 export default React.memo(CreateAccountLoader);

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 } from '../../../../utils';
+import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -96,6 +96,13 @@ 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 () {
@@ -109,7 +116,7 @@ var Mobile = function (_a) {
     };
     var originalReadOnly = useFormReadOnly(methods);
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly);
-    var disabled = !methods.formState.isValid || !!error;
+    var disabled = !methods.formState.isValid;
     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

@@ -96,7 +96,7 @@ var NID = function (_a) {
     };
     var originalReadOnly = useFormReadOnly(methods);
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly);
-    var disabled = !methods.formState.isValid || !!error;
+    var disabled = !methods.formState.isValid;
     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,14 +3,9 @@ import { BoxProps } from '@mui/material/Box';
 interface TACContainerStyledProps extends BoxProps {
     readOnly?: boolean;
 }
-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"> & {
+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"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, ("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/system").BoxOwnProps<import("@mui/material/styles").Theme>> & 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 || !!error;
+    var disabled = !methods.formState.isValid;
     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);

package/build/features/connectExpress/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/connectExpress/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/connectExpress/screens/OperatorError/index.d.ts

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

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

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

package/build/features/connectExpress/screens/PrepareDataLoading/PrepareDataLoading.d.ts

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

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

@@ -0,0 +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 { useTranslation } from 'react-i18next';
+import { isNetworkError } from '../../../../utils';
+import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
+import DataLoading from '../../../shared/DataLoading';
+import Button from '../../../shared/Button';
+import { connectExpressSelector, retrieveDetailsAfterCreateAccountAsync } from '../../../app/connectExpress/connectExpressStore';
+var PrepareDataLoading = function (_a) {
+    var dispatch = useAppDispatch();
+    var isAr = useLanguage().isAr;
+    var t = useTranslation().t;
+    var _b = useAppSelector(connectExpressSelector), error = _b.error, loading = _b.loading;
+    React.useEffect(function () {
+        dispatch(retrieveDetailsAfterCreateAccountAsync());
+    }, []);
+    var onReTry = function () {
+        dispatch(retrieveDetailsAfterCreateAccountAsync());
+    };
+    var isNE = React.useMemo(function () { return isNetworkError(error); }, [error]);
+    return (_jsx(DataLoading, __assign({ error: error }, { children: isNE && (_jsx(Button, __assign({ onClick: onReTry, disableBack: true, isAr: isAr, loading: loading }, { children: t('try_again') }))) })));
+};
+export default React.memo(PrepareDataLoading);

package/build/features/connectExpress/screens/PrepareDataLoading/index.d.ts

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

package/build/features/connectExpress/screens/PrepareDataLoading/index.js

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

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

@@ -36,6 +36,6 @@ var SuccessWithFlowButtons = function () {
         var name = _a.name;
         return name !== FlowsTypes.PASSWORD;
     }); }, [flows]);
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, loading: loading, boardId: boardId, boardInfoId: boardInfoId, brand: brand, business: business, entity: entity, flows: filteredFlows || [], merchant: merchant, individuals: individualsInfo, user: __assign({ names: { en: name } }, user), onClose: isScopeAuthentication ? onClose : undefined, status: status }));
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, loading: loading, boardId: boardId, boardInfoId: boardInfoId, brand: brand, business: business, entity: entity, flows: filteredFlows || [], merchant: merchant, individuals: individualsInfo, user: __assign({ names: { en: name } }, user), onClose: isScopeAuthentication ? onClose : undefined, recipient: recipient, status: status }));
 };
 export default memo(SuccessWithFlowButtons);