@tap-payments/auth-jsconnect 1.0.9 → 1.0.13

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

@@ -7,11 +7,12 @@ export var ActivitiesValidationSchema = yup.object().shape({
     })),
     salesChannels: yup
         .array()
-        .min(1)
+        .min(1, 'channel_of_service_error')
         .of(yup.object().shape({
         id: yup.number(),
         name: yup.string(),
         nameEn: yup.string()
     }))
-        .required('Is required')
+        .required('Is required'),
+    operationStartDate: yup.string().required('Date is required')
 });

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

@@ -69,11 +69,11 @@ var BusinessType = function (_a) {
     };
     var flList = [];
     var crList = CR_LIST;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, __assign({ listActive: listActive }, { children: [_jsx(SelectType, { show: !listActive, onSwitchToCR: function () { return setIsCR(true); }, onSwitchToFL: function () { return setIsCR(false); } }), _jsx(FreelanceLicense, { show: !isCR, list: flList, onListOpen: function () {
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, __assign({ listActive: listActive }, { children: [_jsx(SelectType, { show: !listActive, onSwitchToCR: function () { return setIsCR(true); }, onSwitchToFL: function () { return setIsCR(false); } }), _jsx(CompanyLicense, { show: isCR, list: crList, onListOpen: function () {
                                     setListActive(true);
                                 }, onListClose: function () {
                                     setListActive(false);
-                                } }), _jsx(CompanyLicense, { show: isCR, list: crList, onListOpen: function () {
+                                } }), _jsx(FreelanceLicense, { show: !isCR, list: flList, onListOpen: function () {
                                     setListActive(true);
                                 }, onListClose: function () {
                                     setListActive(false);

package/build/features/business/screens/IDBOD/DOB.d.ts

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

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

@@ -30,15 +30,18 @@ var InputLabelStyled = styled(Text)(function (_a) {
     return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption), { cursor: 'pointer' }));
 });
 var BOD = function (_a) {
+    var _b;
+    var onDateClicked = _a.onDateClicked;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var dobControl = useController({ control: control, name: 'dob' });
     var handleBirthDateChange = function (data) {
         dobControl.field.onChange(data);
     };
+    var dateValue = (_b = dobControl === null || dobControl === void 0 ? void 0 : dobControl.field) === null || _b === void 0 ? void 0 : _b.value;
     return (_jsxs(BoxStyled, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                         var spacing = _a.spacing;
                         return spacing(2.5, 2.5, 1.5, 2.5);
-                    } } }, { children: t('date_of_birth') })), _jsx(DatePicker, { defaultValue: new Date('2000-01-01'), readOnly: true, locale: 'en', onDateChange: handleBirthDateChange })] }));
+                    } } }, { children: t('date_of_birth') })), _jsx(DatePicker, { readOnly: true, defaultValue: dateValue ? new Date(dateValue) : new Date(), dir: 'ltr', locale: 'en', onClick: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true); }, onDatePicked: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false); }, onDateChange: handleBirthDateChange })] }));
 };
 export default React.memo(BOD);

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

@@ -1,52 +1,13 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import { styled, alpha } from '@mui/material/styles';
-import Text from '../../../../components/Text';
-import Input from '../../../../components/Input';
-import ClearIcon from '@mui/icons-material/Clear';
+import { ScreenContainer } from '../../../shared/Containers';
+import Input from '../../../shared/Input';
+import ClearIcon from '../../../shared/ClearIcon';
+import CheckIcon from '../../../shared/CheckIcon';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { ID_NUMBER_LENGTH } from '../../../../constants';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        direction: theme.direction
-    });
-});
-var InputLabelStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign({ color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption));
-});
-var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        padding: theme.spacing(0, 2, 0, 0)
-    });
-});
-var ClearIconStyled = styled(ClearIcon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(2),
-        height: theme.spacing(2),
-        cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4)
-    });
-});
 var IDNumber = function (_a) {
     var _b;
     var t = useTranslation().t;
@@ -61,9 +22,7 @@ var IDNumber = function (_a) {
         nidControl.field.onChange('');
     };
     var nidValue = nidControl.field.value;
-    return (_jsxs(BoxStyled, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
-                        var spacing = _a.spacing;
-                        return spacing(2.5, 2.5, 1.5, 2.5);
-                    } } }, { children: t('id_number_label') })), _jsx(InputStyled, { inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: nidValue && _jsx(ClearIconStyled, { onClick: clearIdNumber }), placeholder: '0000000000', warningType: 'alert', warningMessage: (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message })] }));
+    var error = (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    return (_jsx(ScreenContainer, { children: _jsx(Input, { label: t('id_number_label'), inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: !error && nidValue ? _jsx(CheckIcon, {}) : nidValue && _jsx(ClearIcon, { onClick: clearIdNumber }), placeholder: '0000000000', warningType: 'alert', warningMessage: error && t(error) }) }));
 };
 export default React.memo(IDNumber);

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

@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import ID from './ID';
@@ -19,52 +18,18 @@ import DOB from './DOB';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { NIDValidationSchema } from './validation';
-import Loader from '../../../../components/Loader';
-import { ICONS_NAMES } from '../../../../constants';
-import Button from '../../../../components/Button';
 import { useAppDispatch, useLanguage } from '../../../../hooks';
 import { handleNextScreenStep } from '../../../../app/settings';
-import Icon from '../../../../components/Icon';
 import Form from '../../../../components/Form';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        direction: theme.direction,
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden'
-    });
-});
-var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
-    var theme = _a.theme, isAr = _a.isAr;
-    return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        paddingInlineStart: theme.spacing(1.5),
-        paddingInlineEnd: theme.spacing(0.5),
-        transform: isAr ? 'scaleX(-1)' : 'scaleX(1)'
-    });
-});
-var ButtonContainer = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        margin: theme.spacing(5, 2.5, 2.5, 2.5)
-    });
-});
-var LoaderStyled = styled(Loader)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        marginInlineStart: theme.spacing(-6.25),
-        '& .loader-box-container': {
-            marginInlineStart: theme.spacing(2.5)
-        }
-    });
-});
+import Button from '../../../shared/Button';
+import { ScreenContainer } from '../../../shared/Containers';
+import Collapse from '../../../../components/Collapse';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
 var IDBOD = function (_a) {
+    var _b = React.useState(false), collapse = _b[0], setCollapse = _b[1];
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var t = useTranslation().t;
@@ -72,7 +37,7 @@ var IDBOD = function (_a) {
         resolver: yupResolver(NIDValidationSchema),
         defaultValues: {
             nid: '',
-            dob: ''
+            dob: '1998-08-22'
         },
         mode: 'onChange'
     });
@@ -80,6 +45,9 @@ var IDBOD = function (_a) {
         console.log('data', data);
         dispatch(handleNextScreenStep());
     };
-    return (_jsx(BoxStyled, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(ID, {}), _jsx(DOB, {}), _jsx(ButtonContainer, { children: _jsx(Button, __assign({ disabled: !methods.formState.isValid, type: 'submit', startIcon: _jsx(LoaderStyled, { innerColor: 'white', outerColor: 'white', size: 30 }), endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, { children: t('next') })) })] })) })) }));
+    var handleCollapseOpenClose = function (flag) {
+        setCollapse(flag);
+    };
+    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({ sx: { mt: 6 }, isAr: isAr, disabled: !methods.formState.isValid }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(IDBOD);

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

@@ -1,5 +1,5 @@
 import * as yup from 'yup';
 export var NIDValidationSchema = yup.object().shape({
-    dob: yup.string().min(5).required('DOB is required'),
-    nid: yup.string().min(8).max(10).required('NID is required')
+    dob: yup.string().min(5).required('dob_is_required'),
+    nid: yup.string().min(8, 'id_number_label_error').max(10, 'id_number_label_error').required('id_number_label_error')
 });

package/build/features/connect/Connect.js

@@ -34,7 +34,7 @@ var Connect = memo(function (props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { children: _jsx(FeatureContainer, { children: connectFeatureScreens.map(function (_a, index) {
                     var Element = _a.element, name = _a.name;
                     var isActive = activeScreen.name === name;
-                    return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 600, exit: 400, appear: 600 } }, { children: _jsx(Element, {}) }), index));
+                    return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
                 }) }) })) })));
 });
 export function ConnectLib(props) {

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

@@ -29,10 +29,10 @@ import { useController, useFormContext } from 'react-hook-form';
 import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
 import CheckIcon from '@mui/icons-material/Check';
-import ScreenContainer from '../../../../features/shared/Containers/ScreenContainer';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import Icon from '../../../../components/Icon';
-import Input from '../../../../features/shared/Input';
-import ExpandIcon from '../../../../features/shared/ExpandIcon';
+import Input from '../../../shared/Input';
+import ExpandIcon from '../../../shared/ExpandIcon';
 import SimpleList from '../../../../components/SimpleList';
 import { useLanguage } from '../../../../hooks';
 var CountryItemContainer = styled(Box)(function () { return ({

package/build/features/connect/screens/MID/IDNumber.js

@@ -18,8 +18,9 @@ import { styled, alpha } from '@mui/material/styles';
 import Text from '../../../../components/Text';
 import Tooltip from '@mui/material/Tooltip';
 import Icon from '../../../../components/Icon';
-import Input from '../../../../features/shared/Input';
-import ClearIcon from '../../../../features/shared/ClearIcon';
+import Input from '../../../shared/Input';
+import ClearIcon from '../../../shared/ClearIcon';
+import CheckIcon from '../../../shared/CheckIcon';
 import Collapse from '../../../../components/Collapse';
 import DatePicker from '../../../../components/DatePicker';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
@@ -46,10 +47,10 @@ var IconStyled = styled(Icon)(function (_a) {
     });
 });
 var IDNumber = React.forwardRef(function (_a, ref) {
-    var _b;
+    var _b, _c;
     var onSwitchToMobileNumber = _a.onSwitchToMobileNumber, show = _a.show;
     var t = useTranslation().t;
-    var _c = useFormContext(), control = _c.control, setValue = _c.setValue;
+    var _d = useFormContext(), control = _d.control, setValue = _d.setValue;
     var nidControl = useController({ control: control, name: 'nid' });
     var dobControl = useController({ control: control, name: 'dob' });
     React.useEffect(function () {
@@ -70,9 +71,11 @@ var IDNumber = React.forwardRef(function (_a, ref) {
         dobControl.field.onChange(data);
     };
     var nidValue = nidControl.field.value;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('id_number_label') }), _jsx(Tooltip, __assign({ title: t('switch_to_mobile') }, { children: _jsx(IconStyled, { onClick: onSwitchToMobileNumber, alt: 'switcher icon', src: ICONS_NAMES.MOBILE_IMAGE }) }))] }), _jsx(Input, { dir: 'ltr', inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: nidValue && _jsx(ClearIcon, { onClick: clearIdNumber }), placeholder: '0000000000', warningType: 'alert', warningMessage: (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message }), _jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
+    var error = (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    var dateValue = (_c = dobControl === null || dobControl === void 0 ? void 0 : dobControl.field) === null || _c === void 0 ? void 0 : _c.value;
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('id_number_label') }), _jsx(Tooltip, __assign({ title: t('switch_to_mobile') }, { children: _jsx(IconStyled, { onClick: onSwitchToMobileNumber, alt: 'switcher icon', src: ICONS_NAMES.MOBILE_IMAGE }) }))] }), _jsx(Input, { dir: 'ltr', inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: !error && nidValue ? _jsx(CheckIcon, {}) : nidValue && _jsx(ClearIcon, { onClick: clearIdNumber }), placeholder: '0000000000', warningType: 'alert', warningMessage: error && t(error), required: true }), _jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                             var spacing = _a.spacing;
                             return spacing(2.5, 2.5, 1.5, 2.5);
-                        } } }, { children: t('date_of_birth') })), _jsx(DatePicker, { defaultValue: new Date('2000-01-01'), readOnly: true, dir: 'ltr', locale: 'en', onDateChange: handleBirthDateChange })] })) })));
+                        } } }, { children: t('date_of_birth') })), _jsx(DatePicker, { defaultValue: dateValue ? new Date(dateValue) : new Date(), readOnly: true, dir: 'ltr', locale: 'en', onDateChange: handleBirthDateChange })] })) })));
 });
 export default React.memo(IDNumber);

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

@@ -54,7 +54,7 @@ var MID = function (_a) {
     var _c = React.useState(), listType = _c[0], setListType = _c[1];
     var dispatch = useAppDispatch();
     var methods = useForm({
-        resolver: yupResolver(isNID ? NIDValidationSchema : PhoneValidationSchema),
+        resolver: yupResolver(isNID ? NIDValidationSchema : PhoneValidationSchema(10)),
         defaultValues: {
             countryCode: defaultCountry,
             businessCountry: defaultCountry,
@@ -76,6 +76,6 @@ var MID = function (_a) {
     var isBusinessListActive = listType === ListType.BusinessList;
     var isCountryListActive = listType === ListType.CountryCodeList;
     var listActive = isBusinessListActive || isCountryListActive;
-    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !listActive, title: t('Welcome to Tap Payments'), description: t('Help us to get your information to start collecting online payments') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, __assign({ listActive: listActive }, { children: [_jsx(BusinessCountry, { show: !isCountryListActive, countries: businessCountries, onListOpen: function () { return handleMenuListClick(ListType.BusinessList); }, onListClose: function () { return handleMenuListClick(); } }), _jsx(Collapse, __assign({ in: !isNID }, { children: _jsx(MobileNumber, { show: !isBusinessListActive, countries: countriesCode, onSwitchToIdNumber: function () { return setIsNID(true); }, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } }) })), _jsx(Collapse, __assign({ in: isNID }, { children: _jsx(IDNumber, { show: !listActive, onSwitchToMobileNumber: function () { return setIsNID(false); } }) }))] })), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ isAr: isAr, disabled: !methods.formState.isValid, loading: false }, { children: t('next') })) }))] })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsx(MIDTitle, { show: !listActive, title: t('mobile_id_title'), description: t('mobile_id_description') }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, __assign({ listActive: listActive }, { children: [_jsx(BusinessCountry, { show: !isCountryListActive, countries: businessCountries, onListOpen: function () { return handleMenuListClick(ListType.BusinessList); }, onListClose: function () { return handleMenuListClick(); } }), _jsx(Collapse, __assign({ in: !isNID }, { children: _jsx(MobileNumber, { show: !isBusinessListActive, countries: countriesCode, onSwitchToIdNumber: function () { return setIsNID(true); }, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } }) })), _jsx(Collapse, __assign({ in: isNID }, { children: _jsx(IDNumber, { show: !listActive, onSwitchToMobileNumber: function () { return setIsNID(false); } }) }))] })), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ isAr: isAr, disabled: !methods.formState.isValid, loading: false }, { children: t('next') })) }))] })) }))] }));
 };
 export default React.memo(MID);

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

@@ -29,12 +29,12 @@ import { styled, alpha } from '@mui/material/styles';
 import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
 import Tooltip from '@mui/material/Tooltip';
-import CheckIcon from '@mui/icons-material/Check';
-import ExpandIcon from '../../../../features/shared/ExpandIcon';
-import ClearIcon from '../../../../features/shared/ClearIcon';
-import ScreenContainer from '../../../../features/shared/Containers/ScreenContainer';
+import ExpandIcon from '../../../shared/ExpandIcon';
+import ClearIcon from '../../../shared/ClearIcon';
+import CheckIcon from '../../../shared/CheckIcon';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import Icon from '../../../../components/Icon';
-import Input from '../../../../features/shared/Input';
+import Input from '../../../shared/Input';
 import SimpleList from '../../../../components/SimpleList';
 import { ICONS_NAMES } from '../../../../constants';
 import { removeAllCharsFromNumber } from '../../../../utils';
@@ -66,14 +66,6 @@ var CountryNameText = styled(Text, { shouldForwardProp: function (prop) { return
     var theme = _a.theme, isSelected = _a.isSelected;
     return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
 });
-var CheckIconStyled = styled(CheckIcon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        color: theme.palette.success.main,
-        display: 'flex',
-        alignItems: 'flex-end'
-    });
-});
 var CountryCodeStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({ cursor: 'pointer' }, theme.typography.body2), { fontWeight: theme.typography.fontWeightRegular, display: 'flex', alignItems: 'center', minWidth: theme.spacing(8.75) }));
@@ -125,8 +117,8 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var mobileValue = phoneControl.field.value;
     var countryCodeValue = countryCodeControl.field.value;
     var error = (_b = phoneControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('mobile_number_label') }), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(Tooltip, __assign({ title: t('switch_to_id') }, { children: _jsx(IconStyled, { onClick: rest.onSwitchToIdNumber, alt: 'switcher icon', src: ICONS_NAMES.ID_IMAGE }) })) }))] }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 10 }, onChange: onPhoneNumberChange, value: mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: onOpenCountryList }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), _jsx(ExpandIcon, { anchorEl: !!anchorEl })] })), endAdornment: mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber }), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: (!anchorEl && error) || '' }), _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(CheckIconStyled, {})] }));
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('mobile_number_label') }), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(Tooltip, __assign({ title: t('switch_to_id') }, { children: _jsx(IconStyled, { onClick: rest.onSwitchToIdNumber, alt: 'switcher icon', src: ICONS_NAMES.ID_IMAGE }) })) }))] }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 10 }, onChange: onPhoneNumberChange, value: mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: onOpenCountryList }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), _jsx(ExpandIcon, { anchorEl: !!anchorEl })] })), endAdornment: !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) }), _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, {})] }));
                         } }) }))] })) })));
 });
 export default React.memo(MobileNumber);

package/build/features/connect/screens/MID/validation.d.ts

@@ -9,7 +9,7 @@ export declare const NIDValidationSchema: yup.ObjectSchema<import("yup/lib/objec
     dob: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     nid: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>>;
-export declare const PhoneValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+export declare const PhoneValidationSchema: (min: number) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     mobile: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;

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

@@ -3,6 +3,8 @@ export var NIDValidationSchema = yup.object().shape({
     dob: yup.string().min(5).required('DOB is required'),
     nid: yup.string().min(8).max(10).required('NID is required')
 });
-export var PhoneValidationSchema = yup.object().shape({
-    mobile: yup.string().min(5).required('Phone number is required')
-});
+export var PhoneValidationSchema = function (min) {
+    return yup.object().shape({
+        mobile: yup.string().min(min).required('mobile_number_error')
+    });
+};

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

@@ -22,7 +22,7 @@ import Text from '../../../../components/Text';
 import Input from '../../../shared/Input';
 import ClearIcon from '../../../shared/ClearIcon';
 import Tooltip from '../../../../components/Tooltip';
-import { removeAllOtherThanAlphabet } from '../../../../utils';
+import { removeAllOtherThanCharsNumbersAndSpace } from '../../../../utils';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -61,7 +61,7 @@ var BrandName = function (_a) {
     var brandControl = useController({ control: control, name: 'brandName' });
     var handleBrandNameChange = function (_a) {
         var target = _a.target;
-        var value = removeAllOtherThanAlphabet(target.value);
+        var value = removeAllOtherThanCharsNumbersAndSpace(target.value);
         brandControl.field.onChange(value);
     };
     var clearBrandName = function () {

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

@@ -52,7 +52,7 @@ var CheckboxStyled = styled(CheckBox)(function (_a) {
         marginInlineEnd: theme.spacing(1.5),
         color: theme.palette.primary.main,
         '& .MuiSvgIcon-root': {
-            fontSize: 30
+            fontSize: theme.spacing(3.75)
         },
         '&.Mui-checked': {
             color: theme.palette.text.primary,

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

@@ -63,7 +63,7 @@ var OTP = function (_a) {
             return dispatch(handleNextScreenStep('CONNECT_PASSWORD_STEP'));
         dispatch(handleNextScreenStep('CONNECT_INDIVIDUAL_STEP'));
     };
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [t('ide_opt_sent_title'), " ", _jsx("span", __assign({ dir: 'ltr' }, { children: maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disabled: !methods.formState.isValid, type: 'submit', isAr: isAr, loading: false }, { 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: [t('otp_sent_title'), " ", _jsx("span", __assign({ dir: 'ltr' }, { children: maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disabled: !methods.formState.isValid, type: 'submit', isAr: isAr, loading: false }, { children: t('next') }))] })) })) }));
 };
 OTP.defaultProps = {
     phone: '+996564656085'

package/build/features/featuresScreens.d.ts

@@ -1,7 +1,7 @@
 import { FeatureScreenStep } from '../@types';
 export declare const connectFeatureScreens: Array<FeatureScreenStep>;
 export declare const businessFeatureScreens: Array<FeatureScreenStep>;
-export declare const ownerFeatureScreens: Array<FeatureScreenStep>;
 export declare const passwordFeatureScreens: Array<FeatureScreenStep>;
+export declare const ownerFeatureScreens: Array<FeatureScreenStep>;
 export declare const bankFeatureScreens: Array<FeatureScreenStep>;
 export declare const taxFeatureScreens: Array<FeatureScreenStep>;

package/build/features/featuresScreens.js

@@ -14,6 +14,7 @@ import SuccessPage from './business/screens/Success';
 import ConfirmPage from './business/screens/Confirm';
 import CreatePasswordPage from './password/screens/CreatePassword';
 import ShowOwnerInfoPage from './owner/screens/ShowOwnerInfo';
+import AdditionalOwnerInfoPage from './owner/screens/AdditionalOwnerInfo';
 import BankDetailsPage from './bank/screens/BankDetails';
 import TaxDetailsPage from './tax/screens/TaxDetails';
 export var connectFeatureScreens = [
@@ -73,27 +74,31 @@ export var businessFeatureScreens = [
     },
     { name: 'BUSINESS_SUCCESS_STEP', element: SuccessPage }
 ];
+export var passwordFeatureScreens = [
+    {
+        name: 'PASSWORD_CREATE_PASSWORD_STEP',
+        element: CreatePasswordPage
+    }
+];
 export var ownerFeatureScreens = [
     {
         name: 'OWNER_SHOW_OWNER_INFO_STEP',
         element: ShowOwnerInfoPage
-    }
-];
-export var passwordFeatureScreens = [
+    },
     {
-        name: 'PASSWORD_CREATE_PASSWORD_STEP',
-        element: CreatePasswordPage
+        name: 'OWNER_ADDITIONAL_OWNER_INFO_STEP',
+        element: AdditionalOwnerInfoPage
     }
 ];
 export var bankFeatureScreens = [
     {
-        name: 'BANK_DETAILS_STEP',
+        name: 'BANK_BANK_DETAILS_STEP',
         element: BankDetailsPage
     }
 ];
 export var taxFeatureScreens = [
     {
-        name: 'TAX_DETAILS_STEP',
+        name: 'TAX_TAX_DETAILS_STEP',
         element: TaxDetailsPage
     }
 ];

package/build/features/owner/Owner.js

@@ -36,7 +36,7 @@ var Owner = memo(function (props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { children: _jsx(FeatureContainer, { children: ownerFeatureScreens.map(function (_a, index) {
                     var Element = _a.element, name = _a.name;
                     var isActive = activeScreen.name === name;
-                    return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 600, exit: 400, appear: 600 } }, { children: _jsx(Element, {}) }), index));
+                    return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
                 }) }) })) })));
 });
 export function OwnerLib(props) {

package/build/features/owner/screens/AdditionalOwnerInfo/AdditionalOwnerInfo.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface AdditionalOwnerInfoProps {
+}
+declare const _default: React.MemoExoticComponent<{
+    ({}: AdditionalOwnerInfoProps): JSX.Element;
+    defaultProps: {};
+}>;
+export default _default;

package/build/features/owner/screens/AdditionalOwnerInfo/AdditionalOwnerInfo.js

@@ -0,0 +1,77 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm, FormProvider } from 'react-hook-form';
+import Box from '@mui/material/Box';
+import { useTranslation } from 'react-i18next';
+import { useAppDispatch } from '../../../../hooks';
+import { handleNextScreenStep } from '../../../../app/settings';
+import { styled } from '@mui/material/styles';
+import Form from '../../../../components/Form';
+import Collapse from '../../../../components/Collapse';
+import Button from '../../../shared/Button';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import { useLanguage } from '../../../../hooks';
+import PEPSwitch from './PEPSwitch';
+import { OwnerInfoValidationSchema } from './validation';
+import InfluencerSwitch from './InfluencerSwitch';
+import MonthlyIncome from './MonthlyIncome';
+import EmployerName from './EmployerName';
+import EmployerLocation from './EmployerLocation';
+import SourceOfIncome from './SourceOfIncome';
+import { countriesCode, SOURCE_OF_INCOME } from '../../../../constants';
+var InputsContainerStyled = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme, listActive = _a.listActive;
+    return (_b = {
+            paddingBottom: theme.spacing(listActive ? 0 : 5),
+            overflow: 'scroll',
+            maxHeight: 'calc(100vh - 250px)'
+        },
+        _b[theme.transitions.create(['padding-bottom'])] = {
+            duration: theme.transitions.duration.standard
+        },
+        _b);
+});
+var AdditionalOwnerInfo = function (_a) {
+    var methods = useForm({
+        resolver: yupResolver(OwnerInfoValidationSchema),
+        defaultValues: {
+            monthlyIncome: '',
+            employerName: '',
+            isPEP: null,
+            isInfluencer: null
+        },
+        mode: 'onChange'
+    });
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var dispatch = useAppDispatch();
+    var _b = React.useState(false), listActive = _b[0], setListActive = _b[1];
+    var _c = React.useState(false), employerFieldsActive = _c[0], setEmployerFieldsActive = _c[1];
+    var onSubmit = function (data) {
+        console.log('data', data);
+        dispatch(handleNextScreenStep());
+    };
+    var handleSelectSource = function (country) {
+        var _a;
+        if (((_a = country.nameEn) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'salary')
+            setEmployerFieldsActive(true);
+        else
+            setEmployerFieldsActive(false);
+    };
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, __assign({ listActive: listActive }, { children: [_jsx(SourceOfIncome, { show: !listActive, list: SOURCE_OF_INCOME, onSelectSource: handleSelectSource }), _jsx(MonthlyIncome, { show: !listActive }), _jsx(EmployerName, { show: !listActive && employerFieldsActive }), _jsx(EmployerLocation, { show: employerFieldsActive, countries: countriesCode, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(PEPSwitch, { show: !listActive }), _jsx(InfluencerSwitch, { show: !listActive })] })), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ isAr: isAr, disabled: !methods.formState.isValid, loading: false }, { children: t('next') })) }))] })) })) }));
+};
+export default React.memo(AdditionalOwnerInfo);
+AdditionalOwnerInfo.defaultProps = {};

package/build/features/owner/screens/AdditionalOwnerInfo/EmployerLocation.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { CountryCode } from '../../../../@types';
+interface EmployerLocationProps {
+    countries: Array<CountryCode>;
+    show: boolean;
+    onListOpen?: () => void;
+    onListClose?: () => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<EmployerLocationProps & React.RefAttributes<unknown>>>;
+export default _default;