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

package/build/features/business/screens/Customers/CustomerLocations.d.ts

@@ -1,53 +1,26 @@
 import * as React from 'react';
-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"> & {
+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>, {}, {}>;
-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"> & {
+}, "className" | "style" | "classes" | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+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 LabelContainerStyled: 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"> & {
+}, "className" | "style" | "classes" | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const LabelContainerStyled: 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>, {}, {}>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const InputLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "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" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType<any> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const BaseLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "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" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType<any> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const NameContainer: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "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" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType<any> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isSelected?: boolean | undefined;

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

@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useAppDispatch, useAppSelector, useDataNoneEditable, useDataVerified, useExcludeReadOnlyFelids, useFormErrorAndUpdateReadOnly, useFormReadOnly, useSetFromDefaultValues } from '../../../../hooks';
-import { handlePrevScreenStep } from '../../../../app/settings';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import { CustomerInfoValidation } from './validation';
 import Form from '../../../../components/Form';
 import Button from '../../../shared/Button';
@@ -30,7 +30,7 @@ import TransactionPolicy from './TransactionPolicy';
 import { ScreenContainer } from '../../../shared/Containers';
 import Collapse from '../../../../components/Collapse';
 import { businessSelector, clearError, updateCustomersInfo } from '../../../app/business/businessStore';
-import { deepCopy } from '../../../../utils';
+import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -45,6 +45,7 @@ var Customers = function (_a) {
     var _b, _c, _d, _e, _f;
     var _g = React.useState(), listActive = _g[0], setListActive = _g[1];
     var dispatch = useAppDispatch();
+    var settingsData = useAppSelector(settingsSelector).data;
     var _h = useAppSelector(businessSelector), data = _h.data, loading = _h.loading, error = _h.error;
     var _j = data.customersData, customerLocations = _j.customerLocations, expectedCustomer = _j.expectedCustomer, expectedSale = _j.expectedSale, refundPolicy = _j.refundPolicy, transactionPolicy = _j.transactionPolicy;
     var _k = ((_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.brand) || {}, data_status = _k.data_status, data_verification = _k.data_verification, operations = _k.operations, terms = _k.terms;
@@ -75,6 +76,14 @@ var Customers = function (_a) {
         'operations.sales_range'
     ]);
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Account Creation Flow',
+            event_action: 'Business Market and Size Details Page',
+            event_label: settingsData.businessCountry.iso2
+        });
+    }, []);
     React.useEffect(function () {
         var _a, _b;
         var isTermsAgreed = !!((_b = (_a = terms === null || terms === void 0 ? void 0 : terms.find) === null || _a === void 0 ? void 0 : _a.call(terms, function (_a) {
@@ -127,7 +136,7 @@ var Customers = function (_a) {
     var whenNotSelectExpectedCustomers = !isCustomerLocationsListActive && !isExpectedSalesListActive;
     var whenNotSelectExpectedSales = !isCustomerLocationsListActive && !isExpectedCustomersListActive;
     var isAnyListSelected = !isExpectedCustomersListActive && !isCustomerLocationsListActive && !isExpectedSalesListActive;
-    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(CustomerLocations, { readOnly: readOnly['customerLocations'] || noneEditable['operations.customer_base_location'], show: whenNotSelectCustomersLocation, onListOpen: function () { return handleMenuClick(ListType.CustomerLocationsList); }, onListClose: function () { return handleMenuClick(); }, isVerified: isCustomerLocationsVerified }), _jsx(ExpectedCustomers, { readOnly: readOnly['expectedCustomer'] || noneEditable['operations.customer_base'], show: whenNotSelectExpectedCustomers, onListOpen: function () { return handleMenuClick(ListType.ExpectedCustomersList); }, onListClose: function () { return handleMenuClick(); }, isVerified: isExpectedCustomersVerified }), _jsx(ExpectedSales, { readOnly: readOnly['expectedSale'] || noneEditable['operations.sales_range'], show: whenNotSelectExpectedSales, onListOpen: function () { return handleMenuClick(ListType.ExpectedSalesList); }, onListClose: function () { return handleMenuClick(); }, isVerified: isExpectedSalesRangeVerified }), _jsxs(Collapse, __assign({ in: isAnyListSelected }, { children: [_jsx(RefundPolicy, { readOnly: readOnly['refundPolicy'] || noneEditable['terms'] }), _jsx(TransactionPolicy, { readOnly: readOnly['transactionPolicy'] || noneEditable['terms'] }), _jsx(Box, __assign({ sx: { mt: 2 } }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] }))] })) })) }));
 };
 export default React.memo(Customers);

package/build/features/business/screens/Customers/ExpectedSalesRange.js

@@ -22,7 +22,7 @@ import Collapse from '../../../../components/Collapse';
 import ExpandIcon from '../../../../components/ExpandIcon';
 import { EndAdornmentExpanded } from '../../../shared/EndAdornment';
 import { businessSelector, clearError } from '../../../app/business/businessStore';
-import { isExist } from '../../../../utils';
+import { getCurrencyByCountryIso2, isExist } from '../../../../utils';
 import { ScreenContainer } from '../../../shared/Containers';
 import Search from '../../../shared/Search';
 import InputSelect from '../../../shared/InputSelect';
@@ -66,7 +66,7 @@ var ExpectedSalesRange = function (_a) {
     var expectedSaleControl = useController({ name: 'expectedSale', control: control });
     var _e = useAppSelector(businessSelector), data = _e.data, error = _e.error;
     var settingsData = useAppSelector(settingsSelector).data;
-    var activitiesData = data.activitiesData, currency = data.currency;
+    var activitiesData = data.activitiesData;
     var expectedSales = (activitiesData.responseBody || {}).expectedSales;
     var expectedSalesRangeValue = expectedSaleControl.field.value;
     var countryCode = settingsData.businessCountry;
@@ -121,8 +121,11 @@ var ExpectedSalesRange = function (_a) {
         if (item)
             setSubIndex(item.id);
     }, [anchorEl, expectedSalesRangeValue]);
+    var getCurrency = React.useMemo(function () {
+        return t(getCurrencyByCountryIso2(countryCode.iso2));
+    }, [countryCode.iso2]);
     return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, { children: t('expected_sales_monthly', {
-                        currency: t(currency)
+                        currency: getCurrency
                     }) }), _jsx(InputStyled, { readOnly: readOnly, value: (isAr ? expectedSalesRangeValue === null || expectedSalesRangeValue === void 0 ? void 0 : expectedSalesRangeValue.name.ar : expectedSalesRangeValue === null || expectedSalesRangeValue === void 0 ? void 0 : expectedSalesRangeValue.name.en) || '', onClick: !!anchorEl ? handleCloseMainMenu : handleOpenMainMenu, placeholder: t('choose_expected_sales'), endAdornment: _jsx(EndAdornmentExpanded, { anchorEl: anchorEl, isVerified: isVerified }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleListStyled, { sx: { maxHeight: '350px', paddingTop: 0 }, list: expectedSalesRangeList, listItemProps: { sx: { padding: 0 } }, onSelectItem: function (item) {
                                 var isOnlyOneItem = !item.sub || item.sub.length === 1;
                                 if (isOnlyOneItem)

package/build/features/business/screens/Customers/RefundPolicy.d.ts

@@ -3,31 +3,18 @@ import { BoxProps } from '@mui/material/Box';
 interface ContainerStyledProps extends BoxProps {
     readOnly?: boolean;
 }
-export declare const ContainerStyled: 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 ContainerStyled: 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> & ContainerStyledProps, {}, {}>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & ContainerStyledProps, {}, {}>;
 export declare const CheckboxStyled: import("@emotion/styled").StyledComponent<import("../../../../components/CheckBox").CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const TextStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "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" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType<any> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const LinkStyled: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyOwnProps, "classes" | "color" | "children" | "variant"> & {
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material/Link").LinkClasses> | undefined;
-    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material/styles").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined>);
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    TypographyClasses?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    underline?: "none" | "always" | "hover" | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+export declare const LinkStyled: import("@emotion/styled").StyledComponent<import("@mui/material/Link").LinkOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | 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" | "sx" | "underline" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses" | "underline"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 type RefundPolicyProps = {
     readOnly?: boolean;
 };

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

@@ -22,7 +22,7 @@ import Button from '../../../shared/Button';
 import { ScreenContainer } from '../../../shared/Containers';
 import { businessSelector, clearError, updateLeadIdentity } from '../../../app/business/businessStore';
 import Collapse from '../../../../components/Collapse';
-import { deepCopy, isOtherThanKWOrSA } from '../../../../utils';
+import { deepCopy, isOtherThanKWOrSA, sendCustomEventToGTM } from '../../../../utils';
 import { NIDOtherCountryValidationSchema, NIDValidationSchema } from './validation';
 import ID from './ID';
 import DOB from './DOB';
@@ -44,6 +44,14 @@ var IDBOD = function (_a) {
         mode: 'onChange'
     });
     useSetFromDefaultValues(methods, data.nidData);
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Account Creation Flow',
+            event_action: 'ID Details Step',
+            event_label: settingsData.businessCountry.iso2
+        });
+    }, []);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
@@ -54,7 +62,7 @@ var IDBOD = function (_a) {
     var handleCollapseOpenClose = function (flag) {
         setCollapse(flag);
     };
-    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(ID, {}) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(Button, __assign({ loading: loading, disableBack: true, isAr: isAr, disabled: disabled, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(IDBOD);

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

@@ -82,7 +82,7 @@ var OTP = function (_a) {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
-    var disabled = !methods.formState.isValid || !!error;
+    var disabled = !methods.formState.isValid;
     var idNumber = data.nidData.nid;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : t('opt_nid_sent_title', { provider: 'ABSHER' }), ' ', !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskID(idNumber || '')) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
 };

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

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

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

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

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

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

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

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

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

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

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

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

package/build/features/connect/Connect.js

@@ -89,7 +89,8 @@ var Connect = memo(function (props) {
     React.useEffect(function () {
         initializeGTM();
         sendPageView({
-            title: 'Connect'
+            title: 'Connect',
+            connect_flow: 'Normal'
         });
         if (props.leadId) {
             dispatch(storeLeadId(props.leadId));
@@ -124,7 +125,7 @@ var Connect = memo(function (props) {
                 event: 'Send Event',
                 event_category: 'User Registration Flow',
                 event_action: 'Registration Landing Page Viewed',
-                event_value: (_b = data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2
+                event_label: (_b = data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2
             });
             sendCustomDimension({
                 event: 'PageView',

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

@@ -56,7 +56,7 @@ var BrandSegment = function (_a) {
         if (error)
             dispatch(clearError());
     }, [methods.formState.isValid]);
-    var disabled = !methods.formState.isValid || !!error;
+    var disabled = !methods.formState.isValid;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(TeamSize, { show: true, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _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: t('next') })) }))] })) })) }));
 };
 export default React.memo(BrandSegment);

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

@@ -52,7 +52,7 @@ import { useAppSelector, useAppDispatch, useLanguage } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
 import BusinessCountry from '../../../shared/BusinessCountry';
 import Button from '../../../shared/Button';
-import { findCountryByIso2, isKW, isOtherThanKWOrSA, updateLocationUrlWithCountry } from '../../../../utils';
+import { findCountryByIso2, isKW, isOtherThanKWOrSA, sendCustomEventToGTM, updateLocationUrlWithCountry } from '../../../../utils';
 import Collapse from '../../../../components/Collapse';
 import { handleNextScreenStep, handleSetCountryByIso2, settingsSelector } from '../../../../app/settings';
 import { connectSelector, setDefaultCountryCode, updateBusinessCountry, storeIsStartFromBusinessCountry, clearError } from '../../../app/connect/connectStore';
@@ -81,7 +81,14 @@ var BusinessCountryScreen = function (_a) {
                         return [2];
                     countryCode = findCountryByIso2(settingsData.countries, iso2);
                     dispatch(handleSetCountryByIso2(iso2));
-                    updateLocationUrlWithCountry(iso2);
+                    sendCustomEventToGTM({
+                        event: 'Send Event',
+                        event_category: 'User Registration Flow',
+                        event_action: 'Country selection page view',
+                        event_label: iso2
+                    });
+                    if (settingsData.appConfig.mode !== 'popup')
+                        updateLocationUrlWithCountry(iso2);
                     if (!data.leadId) return [3, 2];
                     return [4, dispatch(updateBusinessCountry(iso2))];
                 case 1:

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

@@ -97,7 +97,7 @@ var CivilID = 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(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 || 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(CivilID);

package/build/features/connect/screens/Individual/Email.js

@@ -53,6 +53,7 @@ import { useController, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 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,7 +90,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/connect/screens/Individual/Individual.js

@@ -100,7 +100,7 @@ var Individual = function (_a) {
     }, [responseBody]);
     var isLeadEmailAvailable = (contact === null || contact === void 0 ? void 0 : contact.email) === methods.watch('email');
     var isEmailValid = typeof is_available === 'undefined' ? isLeadEmailAvailable : is_available;
-    var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email || !!error;
+    var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email;
     var disabled = emailErrChecks || emailChecking || !isEmailValid;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, { show: !listActive }), _jsx(MobileNumber, { show: !isMobile, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: settingsData.countries }), _jsx(Email, { 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/connect/screens/Merchant/BrandList.js

@@ -60,9 +60,9 @@ var BrandList = function (_a) {
         setAnchorEl(null);
         (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
     };
-    var getBrandName = function (_a) {
-        var name = _a.name;
-        return (isAr ? name === null || name === void 0 ? void 0 : name.ar : name === null || name === void 0 ? void 0 : name.en) || '';
+    var getBrandName = function (brand) {
+        var _a, _b;
+        return (isAr ? (_a = brand === null || brand === void 0 ? void 0 : brand.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = brand === null || brand === void 0 ? void 0 : brand.name) === null || _b === void 0 ? void 0 : _b.en) || '';
     };
     var getBrandId = function (item) {
         return item.id || '';

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

@@ -84,7 +84,7 @@ var Merchant = function (_a) {
         if (termAndConditionChecked === true)
             methods.setValue('termAndConditionChecked', termAndConditionChecked);
     }, [termAndConditionChecked]);
-    var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
+    var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName;
     var disabled = brandErrChecks || brandNameChecking || ((_c = data.brandData.responseBody) === null || _c === void 0 ? void 0 : _c.response_code) === '5';
     var hasBrandList = (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0;
     var isOtherBrand = (brandListItem === null || brandListItem === void 0 ? void 0 : brandListItem.id) === 'other' && hasBrandList;

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

@@ -15,7 +15,7 @@ var SalesChannels = function (_a) {
     var channelList = (responseBody || {}).channel_list;
     var selectedBrandControl = getValues('selectedBrandItem');
     React.useEffect(function () {
-        if (selectedBrandItem.id) {
+        if (selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.id) {
             setValue('selectedBrandItem', selectedBrandItem);
             var sales = mapSalesChannel(selectedBrandItem.channel_services || []);
             field.onChange(sales);

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

@@ -74,12 +74,12 @@ var ListType;
     ListType["CountryCodeList"] = "CountryCodeList";
 })(ListType || (ListType = {}));
 var Mobile = function (_a) {
-    var _b, _c;
+    var _b;
     var settingsStore = useAppSelector(settingsSelector);
-    var _d = useAppSelector(connectSelector), data = _d.data, loading = _d.loading, error = _d.error;
-    var _e = React.useState(), listType = _e[0], setListType = _e[1];
+    var _c = useAppSelector(connectSelector), data = _c.data, loading = _c.loading, error = _c.error;
+    var _d = React.useState(), listType = _d[0], setListType = _d[1];
     var dispatch = useAppDispatch();
-    var _f = data.mobileData, mobile = _f.mobile, countryCode = _f.countryCode, termAndConditionChecked = _f.termAndConditionChecked;
+    var _e = data.mobileData, mobile = _e.mobile, countryCode = _e.countryCode, termAndConditionChecked = _e.termAndConditionChecked;
     var methods = useForm({
         resolver: yupResolver(PhoneValidationSchema),
         defaultValues: {
@@ -92,6 +92,7 @@ var Mobile = function (_a) {
     useSetFromDefaultValues(methods, data.mobileData);
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
+    var country = (_b = settingsStore.data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2;
     var handleMenuListClick = function (flag) {
         setListType(flag);
     };
@@ -107,13 +108,15 @@ var Mobile = function (_a) {
         dispatch(resetNIDScreen());
         dispatch(resetCivilScreen());
     };
-    var isKWCountry = React.useMemo(function () { var _a; return isKW((_a = settingsStore.data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2); }, [(_b = settingsStore.data.businessCountry) === null || _b === void 0 ? void 0 : _b.iso2]);
-    var isOtherThanKWOrSACountry = React.useMemo(function () { var _a; return isOtherThanKWOrSA((_a = settingsStore.data.businessCountry) === null || _a === void 0 ? void 0 : _a.iso2); }, [(_c = settingsStore.data.businessCountry) === null || _c === void 0 ? void 0 : _c.iso2]);
+    var isKWCountry = React.useMemo(function () { return isKW(country); }, [country]);
+    var isOtherThanKWOrSACountry = React.useMemo(function () { return isOtherThanKWOrSA(country); }, [country]);
     var onBack = function () {
+        var eventAction = isKWCountry ? 'PACI Click' : 'Abser Click';
         sendCustomEventToGTM({
             event: 'Send Event',
             event_category: 'User Registration Flow',
-            event_action: 'Switch to ID Login Clicked'
+            event_action: eventAction,
+            event_label: country
         });
         dispatch(handlePrevScreenStep(isKWCountry ? 'CONNECT_CIVIL_ID_STEP' : 'CONNECT_NID_STEP'));
     };
@@ -126,7 +129,7 @@ var Mobile = function (_a) {
     var isBusinessListActive = listType === ListType.BusinessList;
     var isCountryListActive = listType === ListType.CountryCodeList;
     var listActive = isBusinessListActive || isCountryListActive;
-    var disabled = !methods.formState.isValid || !!error;
+    var disabled = !methods.formState.isValid;
     var title = t('join_our_community');
     var subTitle = t('ide_terms_and_conditions_description');
     return (_jsxs(ScreenContainer, { children: [(title || subTitle) && _jsx(MIDTitle, { show: !listActive, title: title, description: subTitle }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: !isBusinessListActive, countries: settingsStore.data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } }) }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ isAr: isAr, onBackClicked: onBackToCountryList, disableBack: !data.isStartFromBusinessCountry, disabled: disabled || settingsStore.loading, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: !methods.formState.isValid && !isOtherThanKWOrSACountry }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), isKWCountry ? (_jsx(MobileButton, __assign({ disabled: settingsStore.loading || loading, onClick: function () { return onBack(); }, icon: ICONS_NAMES.PACI_ICON }, { children: t('paci_button_label') }))) : (_jsx(AbsherButton, __assign({ disabled: settingsStore.loading || loading, onClick: function () { return onBack(); } }, { children: t('absher_button_label') })))] }))] }))] })) }))] }));