From 7267b6033f26e94468ad5245c29265b6ed201843 Mon Sep 17 00:00:00 2001
From: Sajad Mirjalili <sajadmrjll@gmail.com>
Date: Sun, 14 Sep 2025 13:19:35 +0330
Subject: [PATCH] fix: problem with + in phone numbers

---
 src/components/Layout/Header.tsx                     |  5 +++--
 src/components/common/LTRBox.tsx                     |  6 ++++++
 .../AuthenticationSteps/EnterPasswordForm.tsx        |  5 ++++-
 .../components/AuthenticationSteps/OtpVerifyForm.tsx | 12 ++++++++----
 4 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 src/components/common/LTRBox.tsx

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 9121b43..13056e2 100644
--- a/src/components/Layout/Header.tsx
+++ b/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>
 
diff --git a/src/components/common/LTRBox.tsx b/src/components/common/LTRBox.tsx
new file mode 100644
index 0000000..78e0512
--- /dev/null
+++ b/src/components/common/LTRBox.tsx
@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+
+export const LTRBox = styled('span')`
+  /* @noflip */
+  direction: ltr;
+`;
diff --git a/src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx b/src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx
index 6dc9f56..1c03e69 100644
--- a/src/features/authentication/components/AuthenticationSteps/EnterPasswordForm.tsx
+++ b/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>
 
diff --git a/src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx b/src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx
index f7b40bd..4e98f23 100644
--- a/src/features/authentication/components/AuthenticationSteps/OtpVerifyForm.tsx
+++ b/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>