@tap-payments/auth-jsconnect 1.0.5 → 1.0.8

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

@@ -0,0 +1,4 @@
+import * as yup from 'yup';
+export var OTPValidation = yup.object().shape({
+    otp: yup.string().min(6).required('OTP is required')
+});

package/build/features/connect/Connect.js

@@ -10,30 +10,18 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Fragment, memo, useEffect } from 'react';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Footer from './Footer';
+import React, { memo, useEffect } from 'react';
+import { FeatureContainer } from '../shared/Containers';
 import { useAppTheme, useAppDispatch, useAppSelector } from '../../hooks';
 import { handleActiveFlowScreens, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
-import Loader from '../../components/Loader';
+import Collapse from '../../components/Collapse';
 import { reactElement } from '../../utils';
 import { CONNECT_SCREENS_NAVIGATION } from '../../constants';
 import { connectFeatureScreens } from '../featuresScreens';
-var Container = styled(Box)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            width: '100%'
-        },
-        _b[theme.transitions.create('height')] = {
-            duration: theme.transitions.duration.enteringScreen
-        },
-        _b);
-});
+import CustomFooter from '../shared/Footer';
 var Connect = memo(function (props) {
     var open = React.useState(true)[0];
     var theme = useAppTheme().theme;
@@ -43,10 +31,10 @@ var Connect = memo(function (props) {
     useEffect(function () {
         dispatch(handleActiveFlowScreens(CONNECT_SCREENS_NAVIGATION));
     }, []);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ open: open, breakpoint: 'sm', footer: _jsx(Footer, {}) }, { children: _jsx(Container, { children: connectFeatureScreens.map(function (_a, index) {
+    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(React.Suspense, __assign({ fallback: _jsx(Loader, {}) }, { children: _jsx(Fragment, { children: isActive && _jsx(Element, {}) }) }), index));
+                    return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 600, exit: 400, appear: 600 } }, { children: _jsx(Element, {}) }), index));
                 }) }) })) })));
 });
 export function ConnectLib(props) {

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

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

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

@@ -9,39 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Box from '@mui/material/Box/Box';
-import { alpha, styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import Text from '../../../../components/Text';
-import Input from '../../../../components/Input';
+import { ScreenContainer } from '../../../shared/Containers';
+import Input from '../../../shared/Input';
 import { keepEmailCharacters } from '../../../../utils';
 import { useController, useFormContext } from 'react-hook-form';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        direction: theme.direction
-    });
-});
-var LabelContainerStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        padding: theme.spacing(3, 2, 1.25, 2.5)
-    });
-});
-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),
-        direction: theme.direction
-    });
-});
-var Email = React.forwardRef(function (_a, ref) {
+var Email = function (_a) {
     var _b;
     var t = useTranslation().t;
     var control = useFormContext().control;
@@ -51,6 +26,6 @@ var Email = React.forwardRef(function (_a, ref) {
         emailControl.field.onChange(value);
     };
     var emailValue = emailControl.field.value;
-    return (_jsxs(BoxStyled, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_email') }) }), _jsx(InputStyled, { value: emailValue, onChange: handleEmailChange, type: 'email', placeholder: t('signin_email_placeholder'), warningType: 'alert', warningMessage: (_b = emailControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message })] })));
-});
+    return (_jsx(ScreenContainer, __assign({ sx: { mb: 5 } }, { children: _jsx(Input, { label: t('signup_enter_email'), value: emailValue, onChange: handleEmailChange, type: 'email', placeholder: t('signin_email_placeholder'), warningType: 'alert', warningMessage: (_b = emailControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message }) })));
+};
 export default React.memo(Email);

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

@@ -19,22 +19,14 @@ import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Icon from '../../../../components/Icon';
-import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { handleNextScreenStep, settingsSelector } from '../../../../app/settings';
+import { useAppDispatch } from '../../../../hooks';
+import { handleNextScreenStep } from '../../../../app/settings';
 import { IndividualValidation } from './validation';
 import Form from '../../../../components/Form';
-import Button from '../../../../components/Button';
-import { ICONS_NAMES } from '../../../../constants/assets';
+import Button from '../../../shared/Button';
+import { ScreenContainer } from '../../../shared/Containers';
 import Loader from '../../../../components/Loader';
 import { useLanguage } from '../../../../hooks';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        padding: theme.spacing(2.5, 0, 2.5, 0),
-        overflow: 'hidden',
-        direction: theme.direction
-    });
-});
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
@@ -42,7 +34,7 @@ var FormStyled = styled(Form)(function () { return ({
 var ButtonContainer = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        margin: theme.spacing(2.5, 2.5, 0, 2.5)
+        margin: theme.spacing(5, 2.5, 0, 2.5)
     });
 });
 var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
@@ -66,7 +58,6 @@ var LoaderStyled = styled(Loader)(function (_a) {
 });
 var Individual = function (_a) {
     var dispatch = useAppDispatch();
-    var settingStore = useAppSelector(settingsSelector);
     var methods = useForm({
         resolver: yupResolver(IndividualValidation),
         defaultValues: {
@@ -77,10 +68,10 @@ var Individual = function (_a) {
     });
     var onSubmit = function (data) {
         console.log('data', data);
-        dispatch(handleNextScreenStep(settingStore.data.activeScreen));
+        dispatch(handleNextScreenStep());
     };
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsx(BoxStyled, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, {}), _jsx(Email, {}), _jsx(ButtonContainer, { children: _jsx(Button, __assign({ disabled: !methods.formState.isValid, type: 'submit', startIcon: _jsx(LoaderStyled, { innerColor: 'white', outerColor: 'white', size: 30, toggleAnimation: false }), endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, { children: t('next') })) })] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, {}), _jsx(Email, {}), _jsx(Button, __assign({ isAr: isAr, loading: false, disabled: !methods.formState.isValid }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(Individual);

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

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

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

@@ -9,43 +9,16 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Box from '@mui/material/Box/Box';
-import { alpha, styled } from '@mui/material/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import Text from '../../../../components/Text';
-import Input from '../../../../components/Input';
+import { ScreenContainer } from '../../../shared/Containers';
+import Input from '../../../shared/Input';
 import { removeAllNumberFromChars } from '../../../../utils';
 import { useController, useFormContext } from 'react-hook-form';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        flexDirection: 'column'
-    });
-});
-var LabelContainerStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'space-between',
-        padding: theme.spacing(3, 2, 1.25, 2.5)
-    });
-});
-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 Name = React.forwardRef(function (_a, ref) {
+var Name = function (_a) {
     var _b;
-    var _c = useTranslation(), t = _c.t, i18n = _c.i18n;
+    var t = useTranslation().t;
     var control = useFormContext().control;
     var nameControl = useController({ name: 'name', control: control });
     var handleNameChange = function (event) {
@@ -53,6 +26,6 @@ var Name = React.forwardRef(function (_a, ref) {
         nameControl.field.onChange(value);
     };
     var nameValue = nameControl.field.value;
-    return (_jsxs(BoxStyled, __assign({ ref: ref, dir: i18n.dir() }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_merchant_name_label') }) }), _jsx(InputStyled, { value: nameValue, onChange: handleNameChange, placeholder: t('signup_merchant_name_label'), dir: i18n.dir(), warningType: 'alert', warningMessage: (_b = nameControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message })] })));
-});
+    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: (_b = nameControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message }) })));
+};
 export default React.memo(Name);

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

@@ -23,46 +23,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 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 ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ScreenContainer from '../../../../features/shared/Containers/ScreenContainer';
 import Icon from '../../../../components/Icon';
-import Input from '../../../../components/Input';
+import Input from '../../../../features/shared/Input';
+import ExpandIcon from '../../../../features/shared/ExpandIcon';
 import SimpleList from '../../../../components/SimpleList';
 import { useLanguage } from '../../../../hooks';
-var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        padding: theme.spacing(0, 2.5, 0, 2.5),
-        '& .MuiInputBase-input': {
-            cursor: 'pointer'
-        }
-    });
-});
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        padding: theme.spacing(0, 0, 2.5, 0)
-    });
-});
-var LabelContainerStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'space-between',
-        padding: theme.spacing(0, 2, 1, 2.5)
-    });
-});
-var InputLabelStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption), { paddingBottom: theme.spacing(0.6) }));
-});
 var CountryItemContainer = styled(Box)(function () { return ({
     display: 'flex'
 }); });
@@ -89,13 +61,6 @@ var CountryIconStyled = styled(Icon)(function (_a) {
         verticalAlign: 'middle'
     });
 });
-var ExpandIcon = styled(ExpandMoreIcon, { shouldForwardProp: function (prop) { return prop !== 'anchorEl'; } })(function (_a) {
-    var _b;
-    var theme = _a.theme, anchorEl = _a.anchorEl;
-    return (__assign(__assign({}, theme.typography.h6), (_b = { display: 'flex', transform: !!anchorEl ? 'rotate(180deg)' : '' }, _b[theme.transitions.create(['transform'])] = {
-        duration: theme.transitions.duration.standard
-    }, _b)));
-});
 var BusinessCountry = React.forwardRef(function (_a, ref) {
     var _b, _c;
     var countries = _a.countries, rest = __rest(_a, ["countries"]);
@@ -120,7 +85,7 @@ var BusinessCountry = React.forwardRef(function (_a, ref) {
         businessCountryControl.field.onChange(country);
     };
     var businessCountry = businessCountryControl.field.value;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(BoxStyled, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('business_country_label') }) }), _jsx(InputStyled, { readOnly: true, onClick: !!anchorEl ? function () { return onCloseCountrySelect(); } : onOpenCountrySelect, startAdornment: _jsx(CountrySpanStyled, { children: _jsx(CountryIconStyled, { src: (businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.logo) || '' }) }), endAdornment: _jsx(ExpandIcon, { anchorEl: anchorEl }), placeholder: t('business_country_placeholder'), value: (isAr ? (_b = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _c === void 0 ? void 0 : _c.english) || '' }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: businessCountries, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { marginBottom: '25px' } }, { children: [_jsx(Input, { label: t('business_country_label'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseCountrySelect(); } : onOpenCountrySelect, startAdornment: _jsx(CountrySpanStyled, { children: _jsx(CountryIconStyled, { src: (businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.logo) || '' }) }), endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('business_country_placeholder'), value: (isAr ? (_b = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.name) === null || _c === void 0 ? void 0 : _c.english) || '' }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: businessCountries, onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsx(CountryIconStyled, { src: item.logo, alt: item.iso3 }), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (businessCountry === null || businessCountry === void 0 ? void 0 : businessCountry.idd_prefix) && _jsx(CheckIconStyled, {})] }));
                         } }) }))] })) })));
 });

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

@@ -18,45 +18,24 @@ 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 '../../../../components/Input';
-import ClearIcon from '@mui/icons-material/Clear';
+import Input from '../../../../features/shared/Input';
+import ClearIcon from '../../../../features/shared/ClearIcon';
 import Collapse from '../../../../components/Collapse';
 import DatePicker from '../../../../components/DatePicker';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { ICONS_NAMES, ID_NUMBER_LENGTH } from '../../../../constants';
-var BoxStyled = styled(Box)(function () { return ({
-    display: 'flex',
-    flexDirection: 'column'
-}); });
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
         justifyContent: 'space-between',
-        padding: theme.spacing(0, 2.5, 1, 2.5)
+        padding: theme.spacing(0, 2.5, 1.25, 2.5)
     });
 });
 var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return ({
-        color: alpha(theme.palette.text.primary, 0.4),
-        fontSize: theme.spacing(1.5)
-    });
-});
-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)
-    });
+    return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
 });
 var IconStyled = styled(Icon)(function (_a) {
     var theme = _a.theme;
@@ -70,9 +49,15 @@ var IDNumber = React.forwardRef(function (_a, ref) {
     var _b;
     var onSwitchToMobileNumber = _a.onSwitchToMobileNumber, show = _a.show;
     var t = useTranslation().t;
-    var control = useFormContext().control;
+    var _c = useFormContext(), control = _c.control, setValue = _c.setValue;
     var nidControl = useController({ control: control, name: 'nid' });
     var dobControl = useController({ control: control, name: 'dob' });
+    React.useEffect(function () {
+        if (nidControl.field.value)
+            setValue('nid', nidControl.field.value, { shouldValidate: true });
+        if (dobControl.field.value)
+            setValue('dob', dobControl.field.value, { shouldValidate: true });
+    }, [show]);
     var handleIdChange = function (_a) {
         var target = _a.target;
         var value = removeAllCharsFromNumber(target.value);
@@ -85,7 +70,7 @@ var IDNumber = React.forwardRef(function (_a, ref) {
         dobControl.field.onChange(data);
     };
     var nidValue = nidControl.field.value;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(BoxStyled, __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(InputStyled, { dir: 'ltr', 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 }), _jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
+    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 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 })] })) })));

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

@@ -18,13 +18,10 @@ import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import Collapse from '../../../../components/Collapse';
 import Form from '../../../../components/Form';
-import Button from '../../../../components/Button';
-import Loader from '../../../../components/Loader';
-import Slide from '../../../../components/Slide';
-import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { handleNextScreenStep, settingsSelector } from '../../../../app/settings';
-import Icon from '../../../../components/Icon';
-import { ICONS_NAMES } from '../../../../constants/assets';
+import Button from '../../../../features/shared/Button';
+import { useAppDispatch } from '../../../../hooks';
+import { handleNextScreenStep } from '../../../../app/settings';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import { useLanguage } from '../../../../hooks';
 import MIDTitle from './MIDTitle';
 import MobileNumber from './MobileNumber';
@@ -32,24 +29,10 @@ import IDNumber from './IDNumber';
 import BusinessCountry from './BusinessCountry';
 import { NIDValidationSchema, PhoneValidationSchema } from './validation';
 import { countriesCode, defaultCountry, businessCountries } from '../../../../constants/dummy';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        padding: theme.spacing(2.5, 0, 2.5, 0),
-        overflow: 'hidden',
-        direction: theme.direction
-    });
-});
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
-var ButtonContainer = styled(Collapse)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        margin: theme.spacing(0, 2.5, 0, 2.5)
-    });
-});
 var InputsContainerStyled = styled(Box)(function (_a) {
     var _b;
     var theme = _a.theme, listActive = _a.listActive;
@@ -61,25 +44,6 @@ var InputsContainerStyled = styled(Box)(function (_a) {
         },
         _b);
 });
-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 LoaderStyled = styled(Loader)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        marginInlineStart: theme.spacing(-6.25),
-        '& .loader-box-container': {
-            marginInlineStart: theme.spacing(2.5)
-        }
-    });
-});
 var ListType;
 (function (ListType) {
     ListType["BusinessList"] = "BusinessList";
@@ -89,7 +53,6 @@ var MID = function (_a) {
     var _b = React.useState(false), isNID = _b[0], setIsNID = _b[1];
     var _c = React.useState(), listType = _c[0], setListType = _c[1];
     var dispatch = useAppDispatch();
-    var settingStore = useAppSelector(settingsSelector);
     var methods = useForm({
         resolver: yupResolver(isNID ? NIDValidationSchema : PhoneValidationSchema),
         defaultValues: {
@@ -108,11 +71,11 @@ var MID = function (_a) {
     };
     var onSubmit = function (data) {
         console.log('data', data);
-        dispatch(handleNextScreenStep(settingStore.data.activeScreen));
+        dispatch(handleNextScreenStep());
     };
     var isBusinessListActive = listType === ListType.BusinessList;
     var isCountryListActive = listType === ListType.CountryCodeList;
     var listActive = isBusinessListActive || isCountryListActive;
-    return (_jsxs(BoxStyled, { 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(Slide, __assign({ direction: 'right', 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(Slide, __assign({ direction: 'left', in: isNID }, { children: _jsx(IDNumber, { show: !listActive, onSwitchToMobileNumber: function () { return setIsNID(false); } }) }))] })), _jsx(ButtonContainer, __assign({ in: !listActive }, { 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') })) }))] })) }))] }));
+    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') })) }))] })) }))] }));
 };
 export default React.memo(MID);

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

@@ -30,10 +30,11 @@ import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
 import Tooltip from '@mui/material/Tooltip';
 import CheckIcon from '@mui/icons-material/Check';
-import ClearIcon from '@mui/icons-material/Clear';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandIcon from '../../../../features/shared/ExpandIcon';
+import ClearIcon from '../../../../features/shared/ClearIcon';
+import ScreenContainer from '../../../../features/shared/Containers/ScreenContainer';
 import Icon from '../../../../components/Icon';
-import Input from '../../../../components/Input';
+import Input from '../../../../features/shared/Input';
 import SimpleList from '../../../../components/SimpleList';
 import { ICONS_NAMES } from '../../../../constants';
 import { removeAllCharsFromNumber } from '../../../../utils';
@@ -46,41 +47,20 @@ var IconStyled = styled(Icon)(function (_a) {
         cursor: 'pointer'
     });
 });
-var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        padding: theme.spacing(0, 2.5, 0, 2.5)
-    });
-});
-var BoxStyled = styled(Box)(function () { return ({
-    display: 'flex',
-    flexDirection: 'column'
-}); });
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
         justifyContent: 'space-between',
-        padding: theme.spacing(0, 2, 1, 2.5)
+        padding: theme.spacing(0, 2.5, 1.25, 2.5)
     });
 });
-var InputLabelStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign({ color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption));
-});
 var CountryItemContainer = styled(Box)(function () { return ({
     display: 'flex'
 }); });
 var CountryCodeText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
     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 }));
-});
-var ExpandIcon = styled(ExpandMoreIcon, { shouldForwardProp: function (prop) { return prop !== 'anchorEl'; } })(function (_a) {
-    var _b;
-    var theme = _a.theme, anchorEl = _a.anchorEl;
-    return (__assign(__assign({}, theme.typography.h6), (_b = { display: 'flex', transform: !!anchorEl ? 'rotate(180deg)' : '', paddingInlineStart: !!anchorEl ? theme.spacing(0) : theme.spacing(1), paddingInlineEnd: !!anchorEl ? theme.spacing(1) : theme.spacing(0) }, _b[theme.transitions.create(['transform'])] = {
-        duration: theme.transitions.duration.standard
-    }, _b)));
+    return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { width: theme.spacing(10), fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
 });
 var CountryNameText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
@@ -94,19 +74,14 @@ var CheckIconStyled = styled(CheckIcon)(function (_a) {
         alignItems: 'flex-end'
     });
 });
-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 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) }));
 });
+var InputLabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
+});
 var MobileNumber = React.forwardRef(function (_a, ref) {
     var _b;
     var countries = _a.countries, rest = __rest(_a, ["countries"]);
@@ -114,9 +89,17 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     var _c = React.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var control = useFormContext().control;
+    var _d = useFormContext(), control = _d.control, setValue = _d.setValue;
     var phoneControl = useController({ name: 'mobile', control: control });
     var countryCodeControl = useController({ name: 'countryCode', control: control });
+    React.useEffect(function () {
+        if (phoneControl.field.value) {
+            setValue('mobile', phoneControl.field.value, { shouldValidate: true });
+        }
+        if (countryCodeControl.field.value) {
+            setValue('countryCode', countryCodeControl.field.value, { shouldValidate: true });
+        }
+    }, []);
     var onPhoneNumberChange = function (_a) {
         var target = _a.target;
         var value = removeAllCharsFromNumber(target.value);
@@ -141,11 +124,9 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var mobileValue = phoneControl.field.value;
     var countryCodeValue = countryCodeControl.field.value;
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(BoxStyled, __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(InputStyled, { dir: '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(ClearIconStyled, { onClick: clearMobileNumber }), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: (_b = phoneControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
-                            return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ sx: { width: function (_a) {
-                                                        var spacing = _a.spacing;
-                                                        return spacing(10);
-                                                    } }, 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, {})] }));
+    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, {})] }));
                         } }) }))] })) })));
 });
 export default React.memo(MobileNumber);