@tap-payments/auth-jsconnect 1.0.20 → 1.0.23

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

@@ -35,7 +35,7 @@ export declare const NameContainer: import("@emotion/styled").StyledComponent<im
 export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "primary" | "secondary" | "action" | "info" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "primary" | "secondary" | "action" | "info" | "success" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -49,7 +49,7 @@ export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<
 export declare const RemainingCheck: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "primary" | "secondary" | "action" | "info" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "primary" | "secondary" | "action" | "info" | "success" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -61,6 +61,7 @@ export declare const RemainingCheck: import("@emotion/styled").StyledComponent<{
     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>, {}, {}>;
 interface CustomerLocationsProps {
+    show: boolean;
     onListOpen?: () => void;
     onListClose?: () => void;
 }

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

@@ -101,8 +101,8 @@ var customerLocations = function (_a) {
     };
     var customerLocationsValue = customerLocationsControl.field.value;
     var customerLocationSelected = customerLocationsValue[customerLocationsValue.length - 1];
-    return (_jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, { children: t('select_customer_base') }), _jsx(InputStyled, { readOnly: true, value: isAr ? customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.nameAR : customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: customerLocationsList, placeholder: 'choose_customer_base', onSelectItem: onSelectItem, renderItem: function (item) {
-                        return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (customerLocationsValue === null || customerLocationsValue === void 0 ? void 0 : customerLocationsValue.id) }, { children: isAr ? item.nameAR : item.name })) })), item.id === (customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.id) && _jsx(CheckIconStyled, {}), checkRemainingCondition(item) && item.id != (customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.id) && _jsx(RemainingCheck, {})] }));
-                    } }) }))] }));
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, { children: t('select_customer_base') }), _jsx(InputStyled, { readOnly: true, value: isAr ? customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.nameAR : customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: customerLocationsList, placeholder: 'choose_customer_base', onSelectItem: onSelectItem, renderItem: function (item) {
+                            return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (customerLocationsValue === null || customerLocationsValue === void 0 ? void 0 : customerLocationsValue.id) }, { children: isAr ? item.nameAR : item.name })) })), item.id === (customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.id) && _jsx(CheckIconStyled, {}), checkRemainingCondition(item) && item.id != (customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.id) && _jsx(RemainingCheck, {})] }));
+                        } }) }))] }) })));
 };
 export default React.memo(customerLocations);

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

@@ -29,11 +29,19 @@ import { CUSTOMER_LOCATIONS, EXPECTED_CUSTOMERS, EXPECTED_SALES_RANGE } from '..
 import RefundPolicy from './RefundPolicy';
 import TransactionPolicy from './TransactionPolicy';
 import { ScreenContainer } from '../../../shared/Containers';
+import Collapse from '../../../../components/Collapse';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
+var ListType;
+(function (ListType) {
+    ListType["CustomerLocationsList"] = "CustomerLocationsList";
+    ListType["ExpectedCustomersList"] = "ExpectedCustomersList";
+    ListType["ExpectedSalesList"] = "ExpectedSalesList";
+})(ListType || (ListType = {}));
 var Customers = function (_a) {
+    var _b = React.useState(), listActive = _b[0], setListActive = _b[1];
     var dispatch = useAppDispatch();
     var methods = useForm({
         resolver: yupResolver(CustomerInfoValidation),
@@ -55,6 +63,16 @@ var Customers = function (_a) {
     };
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(CustomerLocations, {}), _jsx(ExpectedCustomers, {}), _jsx(ExpectedSales, {}), _jsx(RefundPolicy, {}), _jsx(TransactionPolicy, {}), _jsx(Box, __assign({ sx: { mt: 2 } }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: !methods.formState.isValid, isAr: isAr }, { children: t('next') })) }))] })) })) }));
+    var handleMenuClick = function (flag) {
+        setListActive(flag);
+    };
+    var isCustomerLocationsListActive = listActive === ListType.CustomerLocationsList;
+    var isExpectedCustomersListActive = listActive === ListType.ExpectedCustomersList;
+    var isExpectedSalesListActive = listActive === ListType.ExpectedSalesList;
+    var whenNotSelectCustomersLocation = !isExpectedCustomersListActive && !isExpectedSalesListActive;
+    var whenNotSelectExpectedCustomers = !isCustomerLocationsListActive && !isExpectedSalesListActive;
+    var whenNotSelectExpectedSales = !isCustomerLocationsListActive && !isExpectedCustomersListActive;
+    var isAnyListSelected = !isExpectedCustomersListActive && !isCustomerLocationsListActive && !isExpectedSalesListActive;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(CustomerLocations, { show: whenNotSelectCustomersLocation, onListOpen: function () { return handleMenuClick(ListType.CustomerLocationsList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(ExpectedCustomers, { show: whenNotSelectExpectedCustomers, onListOpen: function () { return handleMenuClick(ListType.ExpectedCustomersList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(ExpectedSales, { show: whenNotSelectExpectedSales, onListOpen: function () { return handleMenuClick(ListType.ExpectedSalesList); }, onListClose: function () { return handleMenuClick(); } }), _jsxs(Collapse, __assign({ in: isAnyListSelected }, { children: [_jsx(RefundPolicy, {}), _jsx(TransactionPolicy, {}), _jsx(Box, __assign({ sx: { mt: 2 } }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: !methods.formState.isValid, isAr: isAr }, { children: t('next') })) }))] }))] })) })) }));
 };
 export default React.memo(Customers);

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 interface ExpectedCustomersProps {
+    show: boolean;
     onListOpen?: () => void;
     onListClose?: () => void;
 }

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

@@ -67,8 +67,8 @@ var ExpectedCustomers = function (_a) {
     };
     var expectedCustomersValue = expectedCustomersControl.field.value;
     var expectedCustomersSelected = expectedCustomersValue;
-    return (_jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, { children: t('expected_customers_to_serve') }), _jsx(InputStyled, { readOnly: true, value: isAr ? expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.nameAR : expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: expectedCustomersList, onSelectItem: onSelectItem, renderItem: function (item) {
-                        return (_jsxs(_Fragment, { children: [_jsx(ListItemContainer, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (expectedCustomersValue === null || expectedCustomersValue === void 0 ? void 0 : expectedCustomersValue.id) }, { children: isAr ? item.nameAR : item.name })) }), item.id === (expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.id) && _jsx(CheckIconStyled, {})] }));
-                    } }) }))] }));
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, { children: t('expected_customers_to_serve') }), _jsx(InputStyled, { readOnly: true, value: isAr ? expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.nameAR : expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: expectedCustomersList, onSelectItem: onSelectItem, renderItem: function (item) {
+                            return (_jsxs(_Fragment, { children: [_jsx(ListItemContainer, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (expectedCustomersValue === null || expectedCustomersValue === void 0 ? void 0 : expectedCustomersValue.id) }, { children: isAr ? item.nameAR : item.name })) }), item.id === (expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.id) && _jsx(CheckIconStyled, {})] }));
+                        } }) }))] }) })));
 };
 export default ExpectedCustomers;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 interface ExpectedSalesRangeProps {
+    show: boolean;
     onListOpen?: () => void;
     onListClose?: () => void;
 }

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

@@ -68,8 +68,8 @@ var ExpectedSalesRange = function (_a) {
     };
     var expectedSalesRangeValue = expectedSalesRangeControl.field.value || expectedSalesRangeList;
     var expectedSalesRangeSelected = expectedSalesRangeValue;
-    return (_jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, { children: t('expected_sales_yearly') }), _jsx(InputStyled, { readOnly: true, value: isAr ? expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.nameAR : expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, placeholder: t('choose_expected_sales'), endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: expectedSalesRangeList, onSelectItem: onSelectItem, renderItem: function (item) {
-                        return (_jsxs(_Fragment, { children: [_jsx(ListItemContainer, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (expectedSalesRangeValue === null || expectedSalesRangeValue === void 0 ? void 0 : expectedSalesRangeValue.id) }, { children: isAr ? item.nameAR : item.name })) }), item.id === (expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.id) && _jsx(CheckIconStyled, {})] }));
-                    } }) }))] }));
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, { children: t('expected_sales_yearly') }), _jsx(InputStyled, { readOnly: true, value: isAr ? expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.nameAR : expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, placeholder: t('choose_expected_sales'), endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: expectedSalesRangeList, onSelectItem: onSelectItem, renderItem: function (item) {
+                            return (_jsxs(_Fragment, { children: [_jsx(ListItemContainer, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (expectedSalesRangeValue === null || expectedSalesRangeValue === void 0 ? void 0 : expectedSalesRangeValue.id) }, { children: isAr ? item.nameAR : item.name })) }), item.id === (expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.id) && _jsx(CheckIconStyled, {})] }));
+                        } }) }))] }) })));
 };
 export default ExpectedSalesRange;

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

@@ -67,7 +67,7 @@ var VerifyNumber = function (_a) {
         dispatch(handlePrevScreenStep());
     };
     var loading = false;
-    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'), _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(code, " ").concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, disabled: !methods.formState.isValid, type: 'submit', isAr: isAr, loading: loading }, { children: t('next') }))] })) })) }));
+    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'), _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, disabled: !methods.formState.isValid, type: 'submit', isAr: isAr, loading: loading }, { children: t('next') }))] })) })) }));
 };
 VerifyNumber.defaultProps = {
     phone: '564656085',

package/build/features/connect/screens/Individual/Email.d.ts

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

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

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,20 +18,35 @@ import { keepEmailCharacters } from '../../../../utils';
 import { useController, useFormContext } from 'react-hook-form';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
+import { checkEmailAvailability } from '../../../app/connect/connectStore';
+import { useAppDispatch } from '../../../../hooks';
+import { debounce } from 'lodash-es';
+import Collapse from '../../../../components/Collapse';
 var Email = function (_a) {
     var _b;
+    var show = _a.show;
+    var dispatch = useAppDispatch();
     var t = useTranslation().t;
     var control = useFormContext().control;
     var emailControl = useController({ name: 'email', control: control });
+    var emailValue = emailControl.field.value;
+    var error = (_b = emailControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    var checkEmail = debounce(function (value) {
+        dispatch(checkEmailAvailability(value));
+    }, 500);
     var handleEmailChange = function (event) {
         var value = keepEmailCharacters(event.target.value);
         emailControl.field.onChange(value);
     };
-    var emailValue = emailControl.field.value;
-    var error = (_b = emailControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    React.useEffect(function () {
+        var isValid = emailValue && !error && emailValue.length > 3;
+        if (isValid) {
+            checkEmail(emailValue);
+        }
+    }, [emailValue, error]);
     var clearNumber = function () {
         emailControl.field.onChange('');
     };
-    return (_jsx(ScreenContainer, { children: _jsx(Input, { label: t('signup_email_lable'), value: emailValue, onChange: handleEmailChange, type: 'email', placeholder: t('signup_email_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && emailValue ? _jsx(CheckIcon, {}) : emailValue && _jsx(ClearIcon, { onClick: clearNumber }) }) }));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('signup_email_lable'), value: emailValue, onChange: handleEmailChange, type: 'email', placeholder: t('signup_email_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && emailValue ? _jsx(CheckIcon, {}) : emailValue && _jsx(ClearIcon, { onClick: clearNumber }) }) }) })));
 };
 export default React.memo(Email);

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

@@ -28,16 +28,20 @@ import { clearError, connectSelector, updateLeadIndividual } from '../../../app/
 import { useLanguage } from '../../../../hooks';
 import MobileNumber from './MobileNumber';
 import { countriesCode } from '../../../../constants';
+import Collapse from '../../../../components/Collapse';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
 var Individual = function (_a) {
-    var _b;
-    var _c = React.useState(9), mobileLength = _c[0], setMobileLength = _c[1];
+    var _b, _c, _d, _e;
+    var _f = React.useState(false), listActive = _f[0], setListActive = _f[1];
+    var _g = useSelector(connectSelector), data = _g.data, loading = _g.loading, error = _g.error, searchActive = _g.searchActive;
+    var _h = React.useState(((_b = data.individualData.countryCode) === null || _b === void 0 ? void 0 : _b.digits) || 9), mobileLength = _h[0], setMobileLength = _h[1];
     var dispatch = useAppDispatch();
-    var _d = useSelector(connectSelector), data = _d.data, loading = _d.loading, error = _d.error;
-    var isAbsher = (_b = data.otpData) === null || _b === void 0 ? void 0 : _b.isAbsher;
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var isAbsher = (_c = data.otpData) === null || _c === void 0 ? void 0 : _c.isAbsher;
     var methods = useForm({
         resolver: yupResolver(isAbsher ? IndividualMobileValidation(mobileLength) : IndividualValidation()),
         defaultValues: data.individualData,
@@ -47,15 +51,24 @@ var Individual = function (_a) {
         dispatch(updateLeadIndividual(formData));
     };
     var onBack = function () {
-        dispatch(handlePrevScreenStep());
+        dispatch(handlePrevScreenStep(isAbsher ? 'CONNECT_NID_STEP' : 'CONNECT_MOBILE_STEP'));
     };
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
     }, [methods.formState.isValid]);
-    var t = useTranslation().t;
-    var isAr = useLanguage().isAr;
-    var disabled = !methods.formState.isValid || !!error;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, {}), _jsx(MobileNumber, { setMobileLength: setMobileLength, show: isAbsher, countries: countriesCode }), _jsx(Email, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    React.useEffect(function () {
+        var _a, _b;
+        if (((_b = (_a = data.individualData) === null || _a === void 0 ? void 0 : _a.responseBody) === null || _b === void 0 ? void 0 : _b.is_available) === false)
+            methods.setError('email', { message: 'tap_js_email_already_exist' });
+        if (searchActive)
+            methods.setError('email', { message: 'checking...' });
+    }, [(_d = data.individualData) === null || _d === void 0 ? void 0 : _d.responseBody, searchActive]);
+    var handleMenuListClick = function () {
+        listActive ? setListActive(false) : setListActive(true);
+    };
+    var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email || !!error;
+    var disabled = emailErrChecks || searchActive || !((_e = data.individualData.responseBody) === null || _e === void 0 ? void 0 : _e.is_available);
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, { show: !listActive }), _jsx(MobileNumber, { setMobileLength: setMobileLength, show: isAbsher, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: countriesCode }), _jsx(Email, { show: !listActive }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(Individual);

package/build/features/connect/screens/Individual/MobileNumber.d.ts

@@ -4,6 +4,8 @@ interface MobileNumberProps {
     countries: Array<CountryCode>;
     show: boolean;
     setMobileLength?: (length: number) => void;
+    onListOpen?: () => void;
+    onListClose?: () => void;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MobileNumberProps & React.RefAttributes<unknown>>>;
 export default _default;

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

@@ -96,11 +96,15 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var clearMobileNumber = function () {
         phoneControl.field.onChange('');
     };
-    var onOpenCountryList = function (event) {
-        setAnchorEl(event.currentTarget);
-    };
     var onCloseCountryList = function () {
+        var _a;
         setAnchorEl(null);
+        (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+    };
+    var toggleCountryList = function () {
+        var _a, _b;
+        anchorEl ? setAnchorEl(null) : setAnchorEl(true);
+        anchorEl ? (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest) : (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
     };
     var onSelectItem = function (country) {
         var _a;
@@ -113,7 +117,7 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var mobileValue = phoneControl.field.value || '';
     var countryName = (isAr ? (_b = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _c === void 0 ? void 0 : _c.english) || '';
     var error = (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mb: 3 }, ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 9 }, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: onOpenCountryList }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mb: 3 }, ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 9 }, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
                         } }) }))] })) })));
 });

package/build/features/connect/screens/Individual/Name.d.ts

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

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

@@ -18,8 +18,10 @@ import { removeAllOtherThanAlphabetAndSpace } from '../../../../utils';
 import { useController, useFormContext } from 'react-hook-form';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
+import Collapse from '../../../../components/Collapse';
 var Name = function (_a) {
     var _b;
+    var show = _a.show;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var nameControl = useController({ name: 'name', control: control });
@@ -32,6 +34,6 @@ var Name = function (_a) {
     var clearNumber = function () {
         nameControl.field.onChange('');
     };
-    return (_jsx(ScreenContainer, __assign({ sx: { mb: 3, mt: 2.5 } }, { children: _jsx(Input, { label: t('signup_merchant_name_label'), value: nameValue, onChange: handleNameChange, placeholder: t('signup_merchant_name_label'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && nameValue ? _jsx(CheckIcon, {}) : nameValue && _jsx(ClearIcon, { onClick: clearNumber }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mb: 3, mt: 2.5 } }, { children: _jsx(Input, { label: t('signup_merchant_name_label'), value: nameValue, onChange: handleNameChange, placeholder: t('signup_merchant_name_label'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && nameValue ? _jsx(CheckIcon, {}) : nameValue && _jsx(ClearIcon, { onClick: clearNumber }) }) })) })));
 };
 export default React.memo(Name);

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

@@ -24,6 +24,9 @@ import ClearIcon from '../../../shared/ClearIcon';
 import Tooltip from '../../../../components/Tooltip';
 import { removeAllOtherThanCharsNumbersAndSpace } from '../../../../utils';
 import CheckIcon from '../../../shared/CheckIcon';
+import { checkBrandNameAvailability } from '../../../app/connect/connectStore';
+import { useAppDispatch } from '../../../../hooks';
+import { debounce } from 'lodash-es';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -56,14 +59,20 @@ var InfoIconStyled = styled(InfoIcon)(function (_a) {
 });
 var BrandName = function (_a) {
     var _b;
+    var dispatch = useAppDispatch();
     var _c = React.useState(false), isHovered = _c[0], setIsHovered = _c[1];
     var t = useTranslation().t;
     var control = useFormContext().control;
     var brandControl = useController({ control: control, name: 'brandName' });
+    var checkBrand = debounce(function (value) {
+        dispatch(checkBrandNameAvailability(value));
+    }, 500);
     var handleBrandNameChange = function (_a) {
         var target = _a.target;
         var value = removeAllOtherThanCharsNumbersAndSpace(target.value);
         brandControl.field.onChange(value);
+        if (!!value)
+            checkBrand(value);
     };
     var clearBrandName = function () {
         brandControl.field.onChange('');

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

@@ -27,7 +27,8 @@ import BrandName from './BrandName';
 import SocialMedia from './SocialMedia';
 import TAC from './TAC';
 var Merchant = function (_a) {
-    var _b = useSelector(connectSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var _b;
+    var _c = useSelector(connectSelector), data = _c.data, loading = _c.loading, error = _c.error, searchActive = _c.searchActive;
     var methods = useForm({
         resolver: yupResolver(MerchantValidationSchema),
         defaultValues: data.brandData,
@@ -46,7 +47,12 @@ var Merchant = function (_a) {
         if (error)
             dispatch(clearError());
     }, [methods.formState.isValid]);
-    var disabled = !methods.formState.isValid || !!error;
+    React.useEffect(function () {
+        var _a, _b;
+        if (((_b = (_a = data.brandData) === null || _a === void 0 ? void 0 : _a.responseBody) === null || _b === void 0 ? void 0 : _b.response_code) == '5')
+            methods.setError('brandName', { message: 'Profile Name already exists' });
+    }, [(_b = data.brandData) === null || _b === void 0 ? void 0 : _b.responseBody]);
+    var disabled = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error || searchActive;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandName, {}), _jsx(SocialMedia, {}), _jsx(TAC, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(Merchant);

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

@@ -11,7 +11,7 @@ export var MerchantValidationSchema = yup.object().shape({
             if (!instagram && !twitter) {
                 return yup
                     .string()
-                    .matches(/(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/, 'ide_not_valid_url')
+                    .matches(/^[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,63}(:[0-9]{1,5})?(\/.*)?$/, 'ide_not_valid_url')
                     .transform(function (value) { return (!!value ? value : null); })
                     .nullable()
                     .required('enter_at_least_one');

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

@@ -74,10 +74,11 @@ var ListType;
     ListType["CountryCodeList"] = "CountryCodeList";
 })(ListType || (ListType = {}));
 var Mobile = function (_a) {
-    var _b = React.useState(10), mobileLength = _b[0], setMobileLength = _b[1];
-    var _c = React.useState(), listType = _c[0], setListType = _c[1];
-    var dispatch = useAppDispatch();
+    var _b, _c;
     var _d = useSelector(connectSelector), data = _d.data, loading = _d.loading, error = _d.error;
+    var _e = React.useState((_c = (_b = data.mobileData) === null || _b === void 0 ? void 0 : _b.countryCode) === null || _c === void 0 ? void 0 : _c.digits), mobileLength = _e[0], setMobileLength = _e[1];
+    var _f = React.useState(), listType = _f[0], setListType = _f[1];
+    var dispatch = useAppDispatch();
     var methods = useForm({
         resolver: yupResolver(PhoneValidationSchema(mobileLength)),
         defaultValues: data.mobileData,
@@ -94,7 +95,7 @@ var Mobile = function (_a) {
             dispatch(clearError());
     }, [methods.formState.isValid]);
     var onSubmit = function (formData) {
-        dispatch(createMobileAuth(formData));
+        dispatch(createMobileAuth(__assign(__assign({}, formData), { isResend: false })));
     };
     var onAbsherButtonClicked = function () {
         dispatch(handleCurrentActiveScreen('CONNECT_NID_STEP'));

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

@@ -114,16 +114,16 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var clearMobileNumber = function () {
         phoneControl.field.onChange('');
     };
-    var onOpenCountryList = function (event) {
-        var _a;
-        setAnchorEl(event.currentTarget);
-        (_a = rest.onListOpen) === null || _a === void 0 ? void 0 : _a.call(rest);
-    };
     var onCloseCountryList = function () {
         var _a;
         setAnchorEl(null);
         (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
     };
+    var toggleCountryList = function () {
+        var _a, _b;
+        anchorEl ? setAnchorEl(null) : setAnchorEl(true);
+        anchorEl ? (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest) : (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
+    };
     var onSelectItem = function (country) {
         var _a;
         onCloseCountryList();
@@ -135,7 +135,7 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var mobileValue = phoneControl.field.value || '';
     var countryName = (isAr ? (_b = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _c === void 0 ? void 0 : _c.english) || '';
     var error = (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 10 }, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: onOpenCountryList }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 10 }, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
                         } }) }))] })) })));
 });

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

@@ -10,11 +10,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ScreenContainer } from '../../../shared/Containers';
-import DatePicker from '../../../../components/DatePicker';
+import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
+import { useAppDispatch } from '../../../../hooks';
+import { ScreenContainer } from '../../../shared/Containers';
+import DatePicker from '../../../../components/DatePicker';
 import { alpha, styled } from '@mui/material/styles';
+import { clearError, connectSelector } from '../../../app/connect/connectStore';
 import Text from '../../../../components/Text';
 var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
@@ -25,9 +28,16 @@ var DOB = function (_a) {
     var onDateClicked = _a.onDateClicked;
     var t = useTranslation().t;
     var control = useFormContext().control;
+    var dispatch = useAppDispatch();
     var dobControl = useController({ control: control, name: 'dob' });
+    var error = useSelector(connectSelector).error;
     var handleBirthDateChange = function (data) {
         dobControl.field.onChange(data);
+        handleClearError();
+    };
+    var handleClearError = function () {
+        if (error)
+            dispatch(clearError());
     };
     var dateValue = (_b = dobControl === null || dobControl === void 0 ? void 0 : dobControl.field) === null || _b === void 0 ? void 0 : _b.value;
     return (_jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {

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

@@ -43,11 +43,10 @@ var NID = function (_a) {
         mode: 'onChange'
     });
     React.useEffect(function () {
-        if (error)
-            dispatch(clearError());
+        handleClearError();
     }, [methods.formState.isValid]);
     var onSubmit = function (data) {
-        dispatch(createNIDAuth(data));
+        dispatch(createNIDAuth(__assign(__assign({}, data), { isResend: false })));
     };
     var handleCollapseOpenClose = function (flag) {
         setCollapse(flag);
@@ -55,6 +54,10 @@ var NID = function (_a) {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
+    var handleClearError = function () {
+        if (error)
+            dispatch(clearError());
+    };
     var disabled = !methods.formState.isValid || !!error;
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(Box, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }) }))] })) })) }));
 };

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

@@ -4,7 +4,6 @@ export var NIDValidationSchema = yup.object().shape({
     nid: yup
         .string()
         .matches(/^(1|2)([0-9]{1,})$/g, 'signup_invalid_national_id_format')
-        .min(8, 'signup_invalid_national_id_format')
-        .max(10, 'signup_invalid_national_id_format')
+        .min(10, 'signup_invalid_national_id')
         .required('signup_invalid_national_id')
 });

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

@@ -25,7 +25,7 @@ import { useLanguage } from '../../../../hooks';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Form from '../../../../components/Form';
-import { maskPhone } from '../../../../utils';
+import { maskPhone, maskID } from '../../../../utils';
 import { OTPValidation } from './validation';
 import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
@@ -67,11 +67,12 @@ var OTP = function () {
         dispatch(verifyAuth(formData));
     };
     var onBack = function () {
-        handlePrevScreenStep();
+        dispatch(handlePrevScreenStep(isAbsher ? 'CONNECT_NID_STEP' : 'CONNECT_MOBILE_STEP'));
     };
     var disabled = !methods.formState.isValid || !!error;
     var phone = ((_a = data.mobileData.countryCode) === null || _a === void 0 ? void 0 : _a.idd_prefix) + (data.mobileData.mobile || '');
+    var idNumber = data.nidData.nid;
     var title = isAbsher ? t('opt_nid_sent_title', { provider: 'ABSHER' }) : t('ide_opt_sent_title');
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : title, _jsx("span", __assign({ dir: 'ltr' }, { children: maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: isAbsher ? maskID(idNumber) : maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(OTP);

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

@@ -29,7 +29,7 @@ var BoxStyled = styled(Box)(function (_a) {
     });
 });
 var OTPInput = function (_a) {
-    var control = useFormContext().control;
+    var _b = useFormContext(), control = _b.control, setValue = _b.setValue;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
     var otpControl = useController({ name: 'otp', control: control });
@@ -41,19 +41,23 @@ var OTPInput = function (_a) {
         otpControl.field.onChange(otp);
     };
     var handleOnResendOTP = function () {
+        if (otpControl.field.value)
+            setValue('otp', '', { shouldValidate: true });
         var params = {
             businessCountry: mobileData.businessCountry,
             countryCode: mobileData.countryCode,
             mobile: mobileData.mobile
         };
-        dispatch(createMobileAuth(params));
+        dispatch(createMobileAuth(__assign(__assign({}, params), { isResend: true })));
     };
     var handleOnResendAbsherOTP = function () {
+        if (otpControl.field.value)
+            setValue('otp', '', { shouldValidate: true });
         var params = {
             nid: nidData.nid,
             dob: nidData.dob
         };
-        dispatch(createNIDAuth(params));
+        dispatch(createNIDAuth(__assign(__assign({}, params), { isResend: true })));
     };
     var otpValue = otpControl.field.value;
     return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: isAbsher ? handleOnResendAbsherOTP : handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));