@tap-payments/auth-jsconnect 1.0.10 → 1.0.14

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

@@ -10,82 +10,41 @@ 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 { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-import Text from '../../../../components/Text';
-import OTPTimer from './OTPTimer';
-import Icon from '../../../../components/Icon';
-import Button from '../../../../components/Button';
-import Loader from '../../../../components/Loader';
-import { ICONS_NAMES } from '../../../../constants/assets';
 import { useAppDispatch } from '../../../../hooks';
-import { handleNextScreenStep } from '../../../../app/settings';
-import { useLanguage } from '../../../../hooks';
+import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
+import Box from '@mui/material/Box/Box';
+import { styled } from '@mui/material/styles';
+import { handleNextScreenStep } from '../../../../app/settings';
+import { useLanguage } from '../../../../hooks';
 import Form from '../../../../components/Form';
+import Text from '../../../../components/Text';
+import { ScreenContainer } from '../../../shared/Containers';
+import Button from '../../../shared/Button';
 import { maskID } from '../../../../utils';
 import { OTPValidation } from './validation';
 import OTPInput from './OTPInput';
-var BoxStyled = styled(Box)(function (_a) {
+var OTPTitleContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-        direction: theme.direction
+        background: theme.palette.common.white,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        direction: theme.direction,
+        borderRadius: theme.spacing(0, 0, 1.25, 1.25),
+        marginBottom: theme.spacing(5.75)
     });
 });
-var OTPTitleContainerStyled = styled(Box)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            background: theme.palette.common.white,
-            border: '1px solid',
-            borderColor: theme.palette.divider,
-            direction: theme.direction,
-            borderRadius: theme.spacing(0, 0, 1.25, 1.25)
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            marginBottom: theme.spacing(6)
-        },
-        _b);
-});
 var OTPTitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightLight, color: theme.palette.text.primary, marginBlock: theme.spacing(1.75), marginInlineStart: theme.spacing(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)
-        }
-    });
+    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightLight, color: theme.palette.text.primary, marginBlock: theme.spacing(1.75), marginInlineStart: theme.spacing(2.5), lineHeight: 1.75 }));
 });
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
-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(2.5)
-    });
-});
 var OTP = function (_a) {
     var idNumber = _a.idNumber;
     var dispatch = useAppDispatch();
@@ -104,7 +63,8 @@ var OTP = function (_a) {
             return dispatch(handleNextScreenStep('BUSINESS_IDBOD_STEP'));
         dispatch(handleNextScreenStep('BUSINESS_BUSINESS_TYPE_STEP'));
     };
-    return (_jsx(BoxStyled, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [t('opt_nid_sent_title'), " ", _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskID(idNumber || '')) }))] }) }), _jsx(OTPInput, {}), _jsx(OTPTimer, {}), _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 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('opt_nid_sent_title', { provider: 'ABSHER' }), ' ', _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskID(idNumber || '')) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disabled: !methods.formState.isValid, type: 'submit', isAr: isAr, loading: loading }, { children: t('next') }))] })) })) }));
 };
 OTP.defaultProps = {
     idNumber: '1234567891'

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

@@ -10,42 +10,29 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
-import OTPField from '../../../../components/OTPField';
-import * as React from 'react';
+import OTPField from '../../../../features/shared/OTP';
 import { useController, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { DEFAULT_TIMER_VALUE } from '../../../../constants';
 var BoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        marginBottom: theme.spacing(5)
     });
 });
-var OTPStyled = styled(OTPField)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            marginInlineStart: theme.spacing(2.0),
-            input: {
-                width: "".concat(theme.spacing(3.75), " !important")
-            },
-            '& :focus': {
-                borderColor: theme.palette.primary.main
-            }
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            marginInlineStart: theme.spacing(3)
-        },
-        _b);
-});
 var OTPInput = function (_a) {
     var control = useFormContext().control;
+    var t = useTranslation().t;
     var otpControl = useController({ name: 'otp', control: control });
     var handleOnOTPChange = function (otp) {
         otpControl.field.onChange(otp);
     };
     var otpValue = otpControl.field.value;
-    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPStyled, { value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
+    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: function () { }, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
 };
 export default React.memo(OTPInput);

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

@@ -8,8 +8,7 @@ var Success = function (_a) {
         console.log('success');
         alert('Account created successfully, please check your email');
         alert("It's a fake message, plz wait us to integrate with the backend. <A.Sharkawy>");
-        window.location.href = '/new/business';
     };
-    return _jsx(SuccessScreen, { title: t('success_message'), onSuccess: onSuccess });
+    return _jsx(SuccessScreen, { title: t('ide_successfully_verified_message'), onSuccess: onSuccess });
 };
 export default React.memo(Success);

package/build/features/business/screens/VerifyNumber/OTPInput.d.ts

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

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

@@ -10,59 +10,29 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
-import OTPField from '../../../../components/OTPField';
-import * as React from 'react';
-import { useForm, FormProvider, useController, useFormContext } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { OTPValidation } from './validation';
+import OTPField from '../../../../features/shared/OTP';
+import { useController, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { DEFAULT_TIMER_VALUE } from '../../../../constants';
 var BoxStyled = styled(Box)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            display: 'flex',
-            flexDirection: 'column',
-            direction: theme.direction
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            paddingTop: theme.spacing(2.5)
-        },
-        _b);
-});
-var OTPStyled = styled(OTPField)(function (_a) {
-    var _b;
     var theme = _a.theme;
-    return (_b = {
-            marginInlineStart: theme.spacing(2.0),
-            input: {
-                width: "".concat(theme.spacing(3.75), " !important")
-            },
-            '& :focus': {
-                borderColor: theme.palette.primary.main
-            }
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            marginInlineStart: theme.spacing(3)
-        },
-        _b);
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: theme.spacing(5)
+    });
 });
 var OTPInput = function (_a) {
-    var onOTPChange = _a.onOTPChange;
-    var methods = useForm({
-        resolver: yupResolver(OTPValidation),
-        defaultValues: {
-            otp: ''
-        },
-        mode: 'onChange'
-    });
     var control = useFormContext().control;
+    var t = useTranslation().t;
     var otpControl = useController({ name: 'otp', control: control });
     var handleOnOTPChange = function (otp) {
         otpControl.field.onChange(otp);
-        onOTPChange === null || onOTPChange === void 0 ? void 0 : onOTPChange(otp);
     };
     var otpValue = otpControl.field.value;
-    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsx(OTPStyled, { value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })) })));
+    return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: function () { }, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
 };
 export default React.memo(OTPInput);

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

@@ -10,88 +10,41 @@ 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 { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-import Text from '../../../../components/Text';
-import OTPTimer from './OTPTimer';
-import Icon from '../../../../components/Icon';
-import Button from '../../../../components/Button';
-import Loader from '../../../../components/Loader';
-import { ICONS_NAMES } from '../../../../constants/assets';
 import { useAppDispatch } from '../../../../hooks';
-import { handleNextScreenStep } from '../../../../app/settings';
-import { useLanguage } from '../../../../hooks';
+import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
+import Box from '@mui/material/Box/Box';
+import { styled } from '@mui/material/styles';
+import { handleNextScreenStep } from '../../../../app/settings';
+import { useLanguage } from '../../../../hooks';
 import Form from '../../../../components/Form';
+import Text from '../../../../components/Text';
+import { ScreenContainer } from '../../../shared/Containers';
+import Button from '../../../shared/Button';
 import { maskPhone } from '../../../../utils';
 import { OTPValidation } from './validation';
 import OTPInput from './OTPInput';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-        direction: theme.direction
-    });
-});
-var InputsContainerStyled = styled(Box)(function (_a) {
+var OTPTitleContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        paddingBottom: theme.spacing(3.75)
+        background: theme.palette.common.white,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        direction: theme.direction,
+        borderRadius: theme.spacing(0, 0, 1.25, 1.25),
+        marginBottom: theme.spacing(5.75)
     });
 });
-var OTPTitleContainerStyled = styled(Box)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            background: theme.palette.common.white,
-            border: '1px solid',
-            borderColor: theme.palette.divider,
-            direction: theme.direction,
-            borderRadius: theme.spacing(0, 0, 1.25, 1.25)
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            marginBottom: theme.spacing(6)
-        },
-        _b);
-});
 var OTPTitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightLight, color: theme.palette.text.primary, marginBlock: theme.spacing(1.75), marginInlineStart: theme.spacing(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)
-        }
-    });
+    return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, marginBlock: theme.spacing(1.75), marginInlineStart: theme.spacing(2.5), lineHeight: 1.75 }));
 });
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
-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(2.5)
-    });
-});
 var VerifyNumber = function (_a) {
     var phone = _a.phone, code = _a.code;
     var dispatch = useAppDispatch();
@@ -110,10 +63,11 @@ var VerifyNumber = function (_a) {
             return dispatch(handleNextScreenStep('BUSINESS_IDBOD_STEP'));
         dispatch(handleNextScreenStep('BUSINESS_BUSINESS_TYPE_STEP'));
     };
-    return (_jsx(BoxStyled, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [t('service_otp_send_title'), " ", _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(code, " ").concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, {}), _jsx(OTPTimer, {})] }), _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 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({ disabled: !methods.formState.isValid, type: 'submit', isAr: isAr, loading: loading }, { children: t('next') }))] })) })) }));
 };
 VerifyNumber.defaultProps = {
-    phone: '8940298292',
-    code: '+91'
+    phone: '564656085',
+    code: '+996'
 };
 export default React.memo(VerifyNumber);

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/Individual/Email.js

@@ -16,6 +16,8 @@ import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
 import { keepEmailCharacters } from '../../../../utils';
 import { useController, useFormContext } from 'react-hook-form';
+import ClearIcon from '../../../shared/ClearIcon';
+import CheckIcon from '../../../shared/CheckIcon';
 var Email = function (_a) {
     var _b;
     var t = useTranslation().t;
@@ -26,6 +28,10 @@ var Email = function (_a) {
         emailControl.field.onChange(value);
     };
     var emailValue = emailControl.field.value;
-    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 }) })));
+    var error = (_b = emailControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    var clearNumber = function () {
+        emailControl.field.onChange('');
+    };
+    return (_jsx(ScreenContainer, __assign({ sx: { mb: 5 } }, { 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

@@ -10,7 +10,6 @@ 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 { styled } from '@mui/material/styles';
 import Email from './Email';
 import Name from './Name';
@@ -18,44 +17,17 @@ import * as React from 'react';
 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 } from '../../../../hooks';
 import { handleNextScreenStep } from '../../../../app/settings';
 import { IndividualValidation } from './validation';
 import Form from '../../../../components/Form';
 import Button from '../../../shared/Button';
 import { ScreenContainer } from '../../../shared/Containers';
-import Loader from '../../../../components/Loader';
 import { useLanguage } from '../../../../hooks';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
-var ButtonContainer = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        margin: theme.spacing(5, 2.5, 0, 2.5)
-    });
-});
-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 Individual = function (_a) {
     var dispatch = useAppDispatch();
     var methods = useForm({

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

@@ -14,18 +14,24 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
-import { removeAllNumberFromChars } from '../../../../utils';
+import { keepLettersAndSpace } from '../../../../utils';
 import { useController, useFormContext } from 'react-hook-form';
+import ClearIcon from '../../../shared/ClearIcon';
+import CheckIcon from '../../../shared/CheckIcon';
 var Name = function (_a) {
     var _b;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var nameControl = useController({ name: 'name', control: control });
     var handleNameChange = function (event) {
-        var value = removeAllNumberFromChars(event.target.value);
+        var value = keepLettersAndSpace(event.target.value);
         nameControl.field.onChange(value);
     };
     var nameValue = nameControl.field.value;
-    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 }) })));
+    var error = (_b = nameControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    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 }) }) })));
 };
 export default React.memo(Name);

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

@@ -1,5 +1,8 @@
 import * as yup from 'yup';
 export var IndividualValidation = yup.object().shape({
-    name: yup.string().min(3).required('Name is required'),
-    email: yup.string().email().required('Email is required')
+    name: yup
+        .string()
+        .matches(/^([a-zA-Z0-9]+\s{1}[a-zA-Z0-9]{2,}|[a-zA-Z0-9]+\s{1}[a-zA-Z0-9]{1,}\s{1}[a-zA-Z0-9]{2,})$/g, 'please write your first and last name')
+        .required('please write your first and last name'),
+    email: yup.string().email('email_not_valid').required('email_not_valid')
 });

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 ({
@@ -85,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(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 (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { marginBottom: '25px' } }, { children: [_jsx(Input, { label: t('signup_select_country'), 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('ide_mobile_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,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('enter_national_id') }), _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, { number: '1' }), 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('enter_birth_date') })), _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('join_our_community'), description: t('ide_terms_and_conditions_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);