fix: trnslation keys and ltr style icons

public/locales/en/authentication.json

@@ -7,7 +7,7 @@
     "loginWithGoogle": "Login with google",
     "emailIsInvalid": "Email is invalid",
     "phoneNumberIsInvalid": "Phone number is invalid",
-    "thisFieldIsRequired": "This field is requried",
+    "thisFieldIsRequired": "This field is required",
     "googleAuthenticationFailed": "Login with google failed"
   },
   "verify": {
@@ -21,7 +21,8 @@
     "youHaveSuccessfullySignedIn": "You have successfully signed in",
     "resendCodeIn": "Resend code in",
     "moreMinute": "minute",
-    "resendCode": "Resend code"
+    "resendCode": "Resend code",
+    "confirmAndLogin": "Confirm & login"
   },
   "completeSignUp": {
     "completeSignUp": "Complete Sign Up",
@@ -61,4 +62,4 @@
     "redirectingTo": "Redirecting to",
     "redirecting": "Redirecting..."
   }
-}
+}

public/locales/en/setting.json

@@ -14,6 +14,7 @@
     "addEmailButton": "Add email",
     "name": "Name",
     "familyName": "Family Name",
+    "fullName": "Full Name",
     "country": "Country",
     "gender": "Gender",
     "nationalCode": "National code",

public/locales/fa/setting.json

@@ -14,6 +14,7 @@
     "addEmailButton": "افزودن ایمیل",
     "name": "نام",
     "familyName": "نام خانوادگی",
+    "fullName": "نام و نام خانوادگی",
     "country": "کشور",
     "gender": "جنسیت",
     "nationalCode": "کد ملی",

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

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { AuthenticationCard } from '../AuthenticationCard';
-import { ArrowLeft, Edit2, Eye, EyeSlash } from 'iconsax-react';
+import { ArrowLeft, ArrowRight, Edit2, Eye, EyeSlash } from 'iconsax-react';
 import {
   Box,
   Button,
@@ -51,7 +51,7 @@ export const EnterPasswordForm = ({
   countryCode,
   authFactory,
 }: EnterPasswordFormProps) => {
-  const { t } = useTranslation('authentication');
+  const { t, i18n } = useTranslation('authentication');
   const [passValue, setPassValue] = useState<string>('');
   const [inputTouched, setInputTouched] = useState<boolean>(false);
   const [showPassword, setShowPassword] = useState<boolean>(false);
@@ -184,7 +184,9 @@ export const EnterPasswordForm = ({
         sx={{ width: 'auto', mb: 2 }}
         variant="text"
         loading={emailResendLoading || smsResendLoading}
-        endIcon={<Icon Component={ArrowLeft} />}
+        endIcon={
+          <Icon Component={i18n.dir() === 'rtl' ? ArrowLeft : ArrowRight} />
+        }
       >
         {t('enterPassword.loginWithOneTimeCode')}
       </Button>

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

@@ -42,7 +42,7 @@ export function LoginRegisterForm({
   onGoogleAuthenticated,
   authFactory,
 }: LoginRegisterFormProps) {
-  const { t } = useTranslation('authentication');
+  const { t, i18n } = useTranslation('authentication');
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [error, setError] = useState<string>();
@@ -167,7 +167,16 @@ export function LoginRegisterForm({
           slotProps={{
             htmlInput: { dir: 'auto', sx: { lineHeight: 1.5 } },
             input: {
-              endAdornment: (
+              endAdornment: i18n.dir() === 'rtl' && (
+                <CountryCodeSelector
+                  value={countryCode}
+                  onChange={setCountryCode}
+                  show={showAdornment}
+                  menuAnchor={menuAnchorEl}
+                  onCloseFocusRef={inputRef}
+                />
+              ),
+              startAdornment: i18n.dir() === 'ltr' && (
                 <CountryCodeSelector
                   value={countryCode}
                   onChange={setCountryCode}

src/features/authentication/components/CountryCodeSelector.tsx

@@ -7,7 +7,6 @@ import {
   Menu,
   MenuItem,
   TextField,
-  Typography,
 } from '@mui/material';
 import { useMemo, useRef, useState, type RefObject } from 'react';
 import { ArrowDown2 } from 'iconsax-react';
@@ -17,6 +16,7 @@ import { countries, type Country } from '../../../data/countries';
 import type { CountryCode } from '@/types/commonTypes';
 import { Icon } from '@rkheftan/harmony-ui';
 import { LTRTypography } from '@/components/common/LTRTypography';
+
 interface CountryCodeSelectorProps {
   show: boolean;
   value: CountryCode;
@@ -41,7 +41,7 @@ export function CountryCodeSelector({
   const open = Boolean(anchorEl);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const menuWidth = menuAnchor ? menuAnchor.clientWidth : 'auto';
-  const { t, i18n } = useTranslation(['country', 'common']);
+  const { t } = useTranslation(['country', 'common']);
 
   const selectedCountry =
     countries.find((c) => c.phone === value) || countries[0];
@@ -83,7 +83,7 @@ export function CountryCodeSelector({
 
   return (
     <InputAdornment
-      position={i18n.dir() === 'rtl' ? 'start' : 'end'}
+      position={'end'}
       sx={{
         mx: 0,
       }}
@@ -107,6 +107,7 @@ export function CountryCodeSelector({
           height: '100%',
           display: 'flex',
           alignItems: 'center',
+          flexDirection: 'row-reverse',
           gap: 0.25,
           pl: show ? 0.25 : 0,
 
@@ -118,14 +119,9 @@ export function CountryCodeSelector({
         {/* This inner Box prevents the content from being squeezed during the transition */}
         <Icon Component={ArrowDown2} size="medium" variant="Bold" />
 
-        <Typography
-          variant="body1"
-          color="text.primary"
-          component="div"
-          sx={{ direction: 'rtl' }} // TODO: need to fixed for both en and fa
-        >
+        <LTRTypography variant="body1" color="text.primary">
           {value}
-        </Typography>
+        </LTRTypography>
 
         <ReactCountryFlag
           countryCode={selectedCountry.code}

src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx

@@ -50,7 +50,7 @@ export function InfoRowDisplay({
             }}
           >
             <Typography variant="caption" color="text.secondary">
-              {t('settingForm.name')} و {t('settingForm.familyName')}
+              {t('settingForm.fullName')}
             </Typography>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
               <Avatar