@tap-payments/auth-jsconnect 1.1.5-test → 1.1.7-test

package/build/features/featuresScreens.js

@@ -34,6 +34,10 @@ import TaxDetailsPage from './tax/screens/TaxDetails';
 import TaxSuccessPage from './tax/screens/Success';
 import TaxSuccessWithFlowPage from './tax/screens/SuccessWithFlowButtons';
 import TaxResetPasswordSuccessPage from './tax/screens/ResetPasswordSuccess';
+import SignInMobilePage from './signIn/screens/Mobile';
+import SignInEmailPage from './signIn/screens/Email';
+import SignInOTPPage from './signIn/screens/OTP';
+import SignInPasswordPage from './signIn/screens/Password';
 export var connectFeatureScreens = [
     {
         name: 'CONNECT_NID_STEP',
@@ -169,3 +173,21 @@ export var taxFeatureScreens = [
     },
     { name: 'TAX_RESET_PASSWORD_SUCCESS', element: TaxResetPasswordSuccessPage }
 ];
+export var signInFeatureScreens = [
+    {
+        name: 'SIGIN_MOBILE_STEP',
+        element: SignInMobilePage
+    },
+    {
+        name: 'SIGIN_EMAIL_STEP',
+        element: SignInEmailPage
+    },
+    {
+        name: 'SIGIN_OTP_STEP',
+        element: SignInOTPPage
+    },
+    {
+        name: 'SIGIN_PASSWORD_STEP',
+        element: SignInPasswordPage
+    }
+];

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

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { individualSelector, updateLeadSuccess } from '../../../app/individual/individualStore';
+import { individualSelector, updateBoardSuccess } from '../../../app/individual/individualStore';
 import SuccessScreen from '../../../shared/SuccessScreen';
 var Success = function (_a) {
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
     var _b = useAppSelector(individualSelector), loading = _b.loading, error = _b.error;
     var onSuccess = function () {
-        dispatch(updateLeadSuccess());
+        dispatch(updateBoardSuccess());
     };
     return (_jsx(SuccessScreen, { title: t('individual_success_title'), onSuccess: onSuccess, successTitle: t('continue'), loading: loading, error: error || '' }));
 };

package/build/features/password/Password.js

@@ -37,13 +37,13 @@ var Password = memo(function (props) {
         var token = getParameterByName('token');
         var lang = getParameterByName('lang');
         var operationType = getParameterByName('operation_type');
-        var leadId = getParameterByName('lead_id') || '';
+        var boardId = getParameterByName('board_id') || '';
         if (lang)
             dispatch(handleLanguage(lang));
         if (!token)
             throw new Error('Auth token is not found!');
         if (operationType === PASSWORD_OPERATION_TYPE.RESET_PASSWORD) {
-            dispatch(verifyOperationToken({ token: token, leadId: leadId }));
+            dispatch(verifyOperationToken({ token: token, boardId: boardId }));
             return;
         }
         dispatch(verifyLeadToken(token));

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { updateLeadSuccess, passwordSelector, retrieveLeadPassword } from '../../../app/password/passwordStore';
+import { updateBoardSuccess, passwordSelector, retrieveLeadPassword } from '../../../app/password/passwordStore';
 import SuccessScreen from '../../../shared/SuccessScreen';
 import { PASSWORD_OPERATION_TYPE } from '../../../../constants';
 var Success = function (_a) {
@@ -15,7 +15,7 @@ var Success = function (_a) {
             dispatch(retrieveLeadPassword());
             return;
         }
-        dispatch(updateLeadSuccess());
+        dispatch(updateBoardSuccess());
     };
     return (_jsx(SuccessScreen, { title: t('password_success_title'), onSuccess: onSuccess, successTitle: t('continue'), loading: loading, error: error || '' }));
 };

package/build/features/shared/UploadFile/UploadFile.js

@@ -19,8 +19,7 @@ import Mandatory from '../../shared/Mandatory';
 import { DragAndDrop, UploadInput } from '../../../components/FileInput';
 import Collapse from '../../../components/Collapse';
 import Warning from '../../../components/Warning';
-import Icon from '../../../components/Icon';
-import { ICONS_NAMES } from '../../../constants';
+import ClearIcon from '@mui/icons-material/Clear';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -43,12 +42,14 @@ var UploadBoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({}, theme.typography.caption), { background: theme.palette.primary.main, color: theme.palette.common.white, fontWeight: theme.typography.fontWeightRegular, padding: theme.spacing(0.75, 1.75, 0), cursor: 'pointer', width: '15%', display: 'flex', justifyContent: 'center' }));
 });
-var IconStyled = styled(Icon)(function (_a) {
+var ClearIconStyled = styled(ClearIcon)(function (_a) {
     var theme = _a.theme;
     return ({
-        marginBlockStart: theme.spacing(0),
-        width: theme.spacing(3.5),
-        height: theme.spacing(3.5)
+        marginBlockStart: theme.spacing(0.25),
+        width: theme.spacing(3),
+        height: theme.spacing(3),
+        cursor: 'pointer',
+        color: theme.palette.common.white
     });
 });
 export var InputContainerStyled = styled(Box)(function (_a) {
@@ -71,6 +72,6 @@ var UploadFile = function (_a) {
             onReset === null || onReset === void 0 ? void 0 : onReset();
         }
     };
-    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !fileName }, { children: _jsxs(InputContainerStyled, { children: [_jsx(DragAndDrop, { title: dragTitle, onSuccess: handleFileChange }), _jsx(UploadInput, { title: uploadTitle, onChange: handleFileChange })] }) })), _jsx(Collapse, __assign({ in: !!fileName }, { children: _jsxs(InputContainerStyled, { children: [_jsx(BoxStyled, { children: fileName }), _jsx(UploadBoxStyled, __assign({ onClick: handleReset }, { children: _jsx(IconStyled, { src: ICONS_NAMES.DELETE_ICON }) }))] }) })), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: error })) }))] }));
+    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !fileName }, { children: _jsxs(InputContainerStyled, { children: [_jsx(DragAndDrop, { title: dragTitle, onSuccess: handleFileChange }), _jsx(UploadInput, { title: uploadTitle, onChange: handleFileChange })] }) })), _jsx(Collapse, __assign({ in: !!fileName }, { children: _jsxs(InputContainerStyled, { children: [_jsx(BoxStyled, { children: fileName }), _jsx(UploadBoxStyled, __assign({ onClick: handleReset }, { children: _jsx(ClearIconStyled, {}) }))] }) })), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: error })) }))] }));
 };
 export default UploadFile;

package/build/features/signIn/SignIn.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { LibConfig } from '../../@types';
+export interface SignInLibProps extends LibConfig {
+}
+export declare function SignInLib(props: SignInLibProps): JSX.Element;
+export declare function renderSignInLib(config: SignInLibProps, elementId: string): void;
+export declare function unmountSignInLib(elementId: string): void;

package/build/features/signIn/SignIn.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener } from '../../hooks';
+import { settingsSelector } from '../../app/settings';
+import AnimationFlow from '../../components/AnimationFlow';
+import { store } from '../../app/store';
+import { ReduxProvider, ThemeProvider } from '../../components/Providers';
+import Collapse from '../../components/Collapse';
+import { reactElement } from '../../utils';
+import { FeatureContainer } from '../shared/Containers';
+import { SigIn_SCREENS_NAVIGATION } from '../../constants';
+import { signInFeatureScreens } from '../featuresScreens';
+import CustomFooter from '../shared/Footer';
+import { signInSelector } from '../app/signIn/signInStore';
+import Background from '../shared/Background';
+var SignIn = memo(function (props) {
+    var theme = useAppTheme().theme;
+    var _a = useAppSelector(settingsSelector), data = _a.data, error = _a.error, loading = _a.loading;
+    var signInError = useAppSelector(signInSelector).error;
+    useAppConfig(__assign({ navigation: SigIn_SCREENS_NAVIGATION }, props));
+    useErrorListener(signInError || error);
+    useStepStartedListener();
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ isTapOrigin: isTapOrigin, loading: loading }, { children: _jsx(AnimationFlow, __assign({ isTapOrigin: isTapOrigin, open: open, error: error, loading: loading, breakpoint: 'sm', footer: _jsx(CustomFooter, {}), screenId: activeScreen.name }, { children: _jsx(FeatureContainer, { children: signInFeatureScreens.map(function (_a, index) {
+                        var Element = _a.element, name = _a.name;
+                        var isActive = activeScreen.name === name;
+                        return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
+                    }) }) })) })) })));
+});
+export function SignInLib(props) {
+    return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(SignIn, __assign({}, props)) })));
+}
+export function renderSignInLib(config, elementId) {
+    reactElement(elementId).render(_jsx(SignInLib, __assign({}, config)));
+}
+export function unmountSignInLib(elementId) {
+    reactElement(elementId).unmount();
+}

package/build/features/signIn/index.d.ts

@@ -0,0 +1 @@
+export * from './SignIn';

package/build/features/signIn/index.js

@@ -0,0 +1 @@
+export * from './SignIn';

package/build/features/signIn/screens/Email/Email.d.ts

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

package/build/features/signIn/screens/Email/Email.js

@@ -0,0 +1,95 @@
+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 { useTranslation } from 'react-i18next';
+import { alpha, styled } from '@mui/material/styles';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useAppDispatch, useLanguage, useAppSelector } from '../../../../hooks';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
+import { clearError, signInSelector, createEmailAuth } from '../../../app/signIn/signInStore';
+import Form from '../../../../components/Form';
+import Button, { MobileButton } from '../../../shared/Button';
+import { ScreenContainer } from '../../../shared/Containers';
+import Collapse from '../../../../components/Collapse';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Text from '../../../../components/Text';
+import EmailField from './EmailField';
+import { EmailValidationSchema } from './validation';
+var FormStyled = styled(Form)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column'
+}); });
+var TextStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: alpha(theme.palette.primary.dark, 0.4)
+    });
+});
+var DividerStyled = styled(Divider)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: '45%',
+        borderColor: alpha(theme.palette.primary.dark, 0.4),
+        marginBlockEnd: theme.spacing(0.62)
+    });
+});
+var OrBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginBlockEnd: theme.spacing(1.62),
+        marginBlockStart: theme.spacing(-1.25),
+        marginInline: theme.spacing(2.5)
+    });
+});
+var InputsContainerStyled = styled(Box, {
+    shouldForwardProp: function (prop) { return prop !== 'showMobileButton'; }
+})(function (_a) {
+    var theme = _a.theme, showMobileButton = _a.showMobileButton;
+    return ({
+        transition: 'padding-bottom 0.3s',
+        paddingBottom: showMobileButton ? theme.spacing(0) : theme.spacing(7.5)
+    });
+});
+var Email = function (_a) {
+    var isAr = useLanguage().isAr;
+    var dispatch = useAppDispatch();
+    var t = useTranslation().t;
+    var _b = useAppSelector(signInSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var settingsStore = useAppSelector(settingsSelector);
+    var methods = useForm({
+        resolver: yupResolver(EmailValidationSchema),
+        defaultValues: { email: data.auth.email || '' },
+        mode: 'onChange'
+    });
+    React.useEffect(function () {
+        handleClearError();
+    }, [methods.formState.isValid]);
+    var onSubmit = function (data) {
+        dispatch(createEmailAuth(data));
+    };
+    var handleClearError = function () {
+        if (error)
+            dispatch(clearError());
+    };
+    var onBack = function () {
+        dispatch(handlePrevScreenStep());
+    };
+    var disabled = !methods.formState.isValid || !!error;
+    var showMobileButton = !methods.formState.isValid;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, __assign({ showMobileButton: showMobileButton }, { children: _jsx(EmailField, {}) })), _jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: showMobileButton }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading || settingsStore.loading }, { children: t('mobile_button_label') }))] }))] })) })) }));
+};
+export default React.memo(Email);

package/build/features/signIn/screens/Email/EmailField.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface EmailFieldProps {
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<EmailFieldProps & React.RefAttributes<unknown>>>;
+export default _default;

package/build/features/signIn/screens/Email/EmailField.js

@@ -0,0 +1,55 @@
+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 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 '../../../shared/Input';
+import ClearIcon from '../../../shared/ClearIcon';
+import CheckIcon from '../../../shared/CheckIcon';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+var LabelContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: theme.spacing(0, 2.5, 1.25, 2.5)
+    });
+});
+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 EmailField = React.forwardRef(function (_a, ref) {
+    var _b;
+    var t = useTranslation().t;
+    var _c = useFormContext(), control = _c.control, setValue = _c.setValue;
+    var emailControl = useController({ control: control, name: 'email' });
+    React.useEffect(function () {
+        if (emailControl.field.value)
+            setValue('email', emailControl.field.value, { shouldValidate: true });
+    }, []);
+    var handleEmailChange = function (_a) {
+        var target = _a.target;
+        emailControl.field.onChange(target === null || target === void 0 ? void 0 : target.value);
+    };
+    var clearEmail = function () {
+        emailControl.field.onChange('');
+    };
+    var emailValue = emailControl.field.value;
+    var error = (_b = emailControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    return (_jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signin_email_label') }) }), _jsx(Input, { type: 'text', onChange: handleEmailChange, value: emailValue, endAdornment: !error && emailValue ? _jsx(CheckIcon, {}) : emailValue && _jsx(ClearIcon, { onClick: clearEmail }), placeholder: t('signin_email_placeholder'), warningType: 'alert', warningMessage: error && t(error, { number: '1' }), required: true })] })));
+});
+export default React.memo(EmailField);

package/build/features/signIn/screens/Email/index.d.ts

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

package/build/features/signIn/screens/Email/index.js

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

package/build/features/signIn/screens/Email/validation.d.ts

@@ -0,0 +1,8 @@
+import * as yup from 'yup';
+export declare const EmailValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    email: 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, {
+    email: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
+    email: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+}>>>;

package/build/features/signIn/screens/Email/validation.js

@@ -0,0 +1,5 @@
+import * as yup from 'yup';
+import { EMAIL_MAX_LENGTH } from '../../../../constants';
+export var EmailValidationSchema = yup.object().shape({
+    email: yup.string().max(EMAIL_MAX_LENGTH).email('email_not_valid').required('email_not_valid')
+});

package/build/features/signIn/screens/Mobile/Mobile.d.ts

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

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

@@ -0,0 +1,106 @@
+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 Box from '@mui/material/Box';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useTranslation } from 'react-i18next';
+import { styled, alpha } from '@mui/material/styles';
+import Collapse from '../../../../components/Collapse';
+import Form from '../../../../components/Form';
+import Button, { MobileButton } from '../../../shared/Button';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
+import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import { clearError, createMobileAuth, signInSelector } from '../../../app/signIn/signInStore';
+import { useLanguage } from '../../../../hooks';
+import Divider from '@mui/material/Divider';
+import Text from '../../../../components/Text';
+import MobileNumber from './MobileNumber';
+import { PhoneValidationSchema } from './validation';
+var FormStyled = styled(Form)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column'
+}); });
+var InputsContainerStyled = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {},
+        _b[theme.transitions.create(['padding-bottom'])] = {
+            duration: theme.transitions.duration.standard
+        },
+        _b);
+});
+var TextStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: alpha(theme.palette.primary.dark, 0.4)
+    });
+});
+var DividerStyled = styled(Divider)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: '45%',
+        borderColor: alpha(theme.palette.primary.dark, 0.4),
+        marginBlockEnd: theme.spacing(0.62)
+    });
+});
+var OrBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginBlockEnd: theme.spacing(1.62),
+        marginBlockStart: theme.spacing(-1.25),
+        marginInline: theme.spacing(2.5)
+    });
+});
+var ListType;
+(function (ListType) {
+    ListType["CountryCodeList"] = "CountryCodeList";
+})(ListType || (ListType = {}));
+var Mobile = function (_a) {
+    var settingsStore = useAppSelector(settingsSelector);
+    var _b = useAppSelector(signInSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var _c = React.useState(), listType = _c[0], setListType = _c[1];
+    var dispatch = useAppDispatch();
+    var methods = useForm({
+        resolver: yupResolver(PhoneValidationSchema),
+        defaultValues: { mobile: data.auth.mobile || '', countryCode: data.auth.countryCode },
+        mode: 'onChange'
+    });
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var handleMenuListClick = function (flag) {
+        setListType(flag);
+    };
+    React.useEffect(function () {
+        if (data.auth.countryCode) {
+            methods.setValue('countryCode', data.auth.countryCode);
+        }
+    }, [data.auth]);
+    React.useEffect(function () {
+        if (error)
+            dispatch(clearError());
+    }, [methods.formState.isValid]);
+    var onSubmit = function (data) {
+        dispatch(createMobileAuth(data));
+    };
+    var onBack = function () {
+        dispatch(handlePrevScreenStep());
+    };
+    var listActive = listType === ListType.CountryCodeList;
+    var disabled = !methods.formState.isValid || !!error;
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { countries: settingsStore.data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } }) }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ disabled: settingsStore.loading || loading, onClick: function () { return onBack(); } }, { children: t('email_button_label') }))] }))] }))] })) })) }));
+};
+export default React.memo(Mobile);

package/build/features/signIn/screens/Mobile/MobileNumber.d.ts

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