fix: problem with + in phone numbers

src/components/Layout/Header.tsx

@@ -2,6 +2,7 @@ import { Box, IconButton, Typography } from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
 import { More } from 'iconsax-react';
 import type { UserInfo } from '@/contexts/AuthContext';
+import { LTRBox } from '../common/LTRBox';
 
 interface HeaderProps {
   user: UserInfo;
@@ -20,8 +21,8 @@ export const Header: React.FC<HeaderProps> = ({ user }) => {
     >
       <Box>
         <Typography variant="body1">{user.fullName}</Typography>
-        <Typography variant="body2" color="textSecondary">
-          {user.phoneNumber ?? user.email}
+        <Typography variant="body2" component="span" color="textSecondary">
+          <LTRBox>{user.phoneNumber ?? user.email}</LTRBox>
         </Typography>
       </Box>
 

src/components/common/LTRBox.tsx

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+
+export const LTRBox = styled('span')`
+  /* @noflip */
+  direction: ltr;
+`;

src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx

@@ -25,6 +25,7 @@ import {
   generateTokenWithPassword,
   type GenerateTokenResponse,
 } from '../../api/identityAPI';
+import { LTRBox } from '@/components/common/LTRBox';
 
 export interface EnterPasswordFormProps {
   onEditValue: () => void;
@@ -136,7 +137,9 @@ export const EnterPasswordForm = ({
           endIcon={<Icon Component={Edit2} />}
           onClick={onEditValue}
         >
-          {authType === 'phone' ? countryCode + emailOrPhone : emailOrPhone}
+          <LTRBox>
+            {authType === 'phone' ? countryCode + emailOrPhone : emailOrPhone}
+          </LTRBox>
         </Button>
       </Box>
 

src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -18,6 +18,7 @@ import {
   generateTokenWithOtp,
   type GenerateTokenResponse,
 } from '../../api/identityAPI';
+import { LTRBox } from '@/components/common/LTRBox';
 
 interface OtpVerifyFormProps {
   value: string;
@@ -55,8 +56,6 @@ export function OtpVerifyForm({
   const { loading: loginSignUpLoading, execute: loginSignUpCall } =
     useApi(loginOrSignUpWithOtp);
 
-  console.log(countryCode);
-
   useEffect(() => {
     let interval: NodeJS.Timeout;
     if (resendTimer > 0) {
@@ -191,11 +190,16 @@ export function OtpVerifyForm({
             <Button
               variant="outlined"
               size="large"
-              sx={{ textTransform: 'lowercase', width: 'auto' }}
+              sx={{
+                textTransform: 'lowercase',
+                width: 'auto',
+              }}
               endIcon={<Icon Component={Edit2} />}
               onClick={onEditValue}
             >
-              {authType === 'phone' ? countryCode + value : value}
+              <LTRBox>
+                {authType === 'phone' ? countryCode + value : value}
+              </LTRBox>
             </Button>
           </Box>