@tap-payments/auth-jsconnect 2.8.55-beta → 2.8.55-development

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

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

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

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

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

@@ -21,10 +21,10 @@ var SuccessWithFlowButtons = function () {
     var _a = useAppSelector(brandSelector), data = _a.data, loading = _a.loading;
     var settingsData = useAppSelector(settingsSelector).data;
     var isScopeAuthentication = settingsData.appConfig.scope === SCOPE_AUTH;
-    var _b = data.verify.responseBody || {}, flows = _b.flows, entity = _b.entity, brand = _b.brand, bank = _b.bank_account, merchant = _b.merchant, user = _b.user, business = _b.business, board_id = _b.board_id, board_info_id = _b.board_info_id, name = _b.name, individuals = _b.individuals;
+    var _b = data.verify.responseBody || {}, flows = _b.flows, entity = _b.entity, brand = _b.brand, bank = _b.bank_account, merchant = _b.merchant, user = _b.user, business = _b.business, board_id = _b.board_id, board_info_id = _b.board_info_id, name = _b.name, individuals = _b.individuals, recipient = _b.recipient;
     var onClose = function () {
         dispatch(onCloseCompleteBrand());
     };
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, loading: loading, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [], onClose: isScopeAuthentication ? onClose : undefined }));
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, loading: loading, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [], onClose: isScopeAuthentication ? onClose : undefined, recipient: recipient }));
 };
 export default memo(SuccessWithFlowButtons);

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

@@ -72,7 +72,7 @@ var VerifyNumber = function (_a) {
     var onSubmit = function (formData) {
         dispatch(verifyBrandLeadOTP(deepCopy(formData)));
     };
-    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, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(VerifyNumber);

package/build/features/business/Business.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useAppTheme, useAppDispatch, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener } from '../../hooks';
-import { handleLanguage, settingsSelector } from '../../app/settings';
+import { handleCurrentActiveScreen, handleLanguage, settingsSelector } from '../../app/settings';
 import { FeatureContainer } from '../shared/Containers';
 import { businessSelector, verifyLeadToken } from '../app/business/businessStore';
 import AnimationFlow from '../../components/AnimationFlow';
@@ -47,9 +47,14 @@ var Business = memo(function (props) {
         dispatch(verifyLeadToken(token));
     };
     useEffect(function () {
-        if (!settingLoading && open)
-            verifyToken();
-    }, [settingLoading]);
+        if (settingLoading || !open)
+            return;
+        if (!data.isValidOperator) {
+            dispatch(handleCurrentActiveScreen('BUSINESS_OPERATOR_ERROR_STEP'));
+            return;
+        }
+        verifyToken();
+    }, [data.isValidOperator, settingLoading]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading || customLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: settingLoading || customLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: isMaturityExpress }, { children: businessFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;

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

@@ -18,9 +18,9 @@ import { useAppDispatch, useLanguage, useAppSelector, useSetFromDefaultValues, u
 import Form from '../../../../components/Form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useTranslation } from 'react-i18next';
-import { handlePrevScreenStep } from '../../../../app/settings';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import Button from '../../../shared/Button';
-import { deepCopy } from '../../../../utils';
+import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
 import { ScreenContainer } from '../../../shared/Containers';
 import Collapse from '../../../../components/Collapse';
 import OperationStartDate from './OperationStartDate';
@@ -36,6 +36,7 @@ var Activities = function () {
     var _b = React.useState(false), anchorEl = _b[0], setAnchorEl = _b[1];
     var _c = React.useState(false), collapse = _c[0], setCollapse = _c[1];
     var dispatch = useAppDispatch();
+    var settingsData = useAppSelector(settingsSelector).data;
     var isAr = useLanguage().isAr;
     var t = useTranslation().t;
     var _d = useAppSelector(businessSelector), data = _d.data, loading = _d.loading, error = _d.error;
@@ -64,6 +65,14 @@ var Activities = function () {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Account Creation Flow',
+            event_action: 'Brand Activities Details Page',
+            event_label: settingsData.businessCountry.iso2
+        });
+    }, []);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
@@ -72,7 +81,7 @@ var Activities = function () {
         anchorEl ? setAnchorEl(false) : setAnchorEl(true);
     };
     var isOperationStartDateVerified = dataVerified['operations.business_start_date'] && (operations === null || operations === void 0 ? void 0 : operations.business_start_date) === methods.watch('operationStartDate');
-    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 && !anchorEl }, { children: _jsx(LicenseName, {}) })), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(ActivitiesList, { readOnly: readOnly['activities'] || noneEditable['activities'], onListOpen: function () { return handleMenuClick(); }, onListClose: function () { return handleMenuClick(); } }) })), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(OperationStartDate, { isVerified: isOperationStartDateVerified, readOnly: readOnly['operationStartDate'] || noneEditable['operations.business_start_date'], onDateClicked: handleCollapseOpenClose }) })), _jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default Activities;

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

@@ -23,7 +23,7 @@ import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import { businessSelector, clearError, updateLeadBusinessType } from '../../../app/business/businessStore';
 import { BusinessType as Type } from '../../../../@types';
 import Button from '../../../shared/Button';
-import { deepCopy, isKW, isOtherLicense, isOtherThanKWOrSA, isSA } from '../../../../utils';
+import { deepCopy, isKW, isOtherLicense, isOtherThanKWOrSA, isSA, sendCustomEventToGTM } from '../../../../utils';
 import { KWLicenseValidationSchema, LicenseValidationSchema, OtherCountryLicenseValidationSchema } from './validation';
 import LicenseList from './LicenseList';
 import LicenseCertificate from './LicenseCertificate';
@@ -46,6 +46,14 @@ var BusinessType = function (_a) {
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var _d = React.useState(), listActive = _d[0], setListActive = _d[1];
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Account Creation Flow',
+            event_action: 'CR Page',
+            event_label: settingsData.businessCountry.iso2
+        });
+    }, []);
     var handleMenuClick = function (flag) {
         setListActive(flag);
     };
@@ -99,7 +107,7 @@ var BusinessType = function (_a) {
     var hasEntityList = !!(entityLicenseList === null || entityLicenseList === void 0 ? void 0 : entityLicenseList.length);
     var showLicenseList = hasEntityList ? (isSACountry || isOtherCountry) && isOtherLicense(selectedLicenseEntity) : isSACountry || isOtherCountry;
     var showEntityList = isKWCountry ? hasEntityList && !isLicenseListActive && isCR : hasEntityList && !isLicenseListActive;
-    var disabled = !methods.formState.isValid || !!error || uploading || uploadingArticle;
+    var disabled = !methods.formState.isValid || uploading || uploadingArticle;
     var disableBack = !data.otpData.isNID;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(LicenseType, { show: !listActive && isKWCountry }), _jsx(EntityLicenseList, { show: showEntityList, onListOpen: function () { return handleMenuClick(ListType.EntityLicenseList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(LicenseList, { show: showLicenseList && !isEntityLicenseListActive, onListOpen: function () { return handleMenuClick(ListType.LicenseList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(EntityName, { show: !isAnyListActive && isKWCountry && isCR }), _jsx(LicenseNumber, { show: isKWCountry ? !isAnyListActive && isCR : !isAnyListActive }), _jsx(LicenseCertificate, { show: !isAnyListActive && isKWCountry && isCR }), _jsx(Article, { show: !isAnyListActive && isKWCountry && isCR }), _jsx(Collapse, __assign({ in: !isAnyListActive, timeout: 500 }, { children: _jsx(Button, __assign({ disableBack: disableBack, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };

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

@@ -62,7 +62,7 @@ var CivilID = function (_a) {
         if (error)
             dispatch(clearError());
     };
-    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: 7.5, transition: 'mb 0.3s' } }), _jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(CivilID);

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/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 _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals;
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, individuals: individuals, boardInfoId: board_info_id, flows: flows || [] }));
+    var settingsData = useAppSelector(settingsSelector).data;
+    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals, recipient = _a.recipient;
+    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 }));
 };
 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') })))] }))] }))] })) }))] }));

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

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