fix: remove duplicate component instance

package-lock.json

@@ -6297,21 +6297,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

public/locales/en/setting.json

@@ -35,8 +35,7 @@
     "profilePicture": "User account image",
     "allowedFormat": "Allowed formats: PNG, JPEG, GIF (maximum 10 MB)",
     "uploadPicture": "Upload image",
-    "phoneNumberText": "Your new contact number will replace your previous contact number.",
+    "phoneNumberText": "Your new contact number will replace your previous contact number (<1>{{phoneNumber}}</1>)",
-    "verb": ".",
     "notDetermined": "Not determined",
     "successfulChangePhone": "Phone number changed successfully",
     "phoneNumberIsInvalid": "Phone number is invalid",
@@ -72,7 +71,6 @@
     "errorChangePhone": "Failed to change phone number",
     "verificationCodeSent": "Verification code sent"
   },
-
   "active": {
     "activeDevices": "Active devices",
     "activeDevicesCaption": "Watch and manage all your active devices",
@@ -88,7 +86,6 @@
     "successDelete": "Deleted successfully",
     "deleteFailed": "Deletion failed"
   },
-
   "settings": {
     "title": "Base settings",
     "description": "Change your base settings",
@@ -111,7 +108,6 @@
     "saveFailed": "Save failed",
     "invalidSelection": "Invalid selection"
   },
-
   "securityForm": {
     "password": "Password",
     "determinePassword": "Log in to your Harmony account more easily by setting a strong password.",
@@ -138,4 +134,4 @@
     "passwordAdded": "Password added",
     "error": "Password change failed"
   }
-}
+}

public/locales/fa/setting.json

@@ -36,8 +36,7 @@
     "profilePicture": "تصویر حساب کاربری",
     "allowedFormat": "فرمت‌های مجاز: PNG، JPEG، GIF (حداکثر ۱۰ مگابایت)",
     "uploadPicture": "بارگذاری تصویر",
-    "phoneNumberText": "شماره تماس جدید شما جایگزین شماره تماس قبلی",
+    "phoneNumberText": "شماره تماس جدید شما جایگزین شماره قبلی (<1>{{phoneNumber}}</1>) خواهد شد",
-    "verb": "خواهد شد",
     "notDetermined": "تعیین نشده",
     "successfulChangePhone": "شماره تماس با موفقیت تغییر کرد",
     "phoneNumberIsInvalid": "شماره وارد شده نامعتبر میباشد",
@@ -73,7 +72,6 @@
     "errorChangePhone": "تغییر تلفن همراه با خطا مواجه شد",
     "verificationCodeSent": "کد تایید ارسال شد"
   },
-
   "active": {
     "activeDevices": "نشست های فعال",
     "activeDevicesCaption": "مشاهده و مدیریت تمام نشست های فعال شما",
@@ -89,7 +87,6 @@
     "successDelete": "با موفقیت حذف شد",
     "deleteFailed": "حذف با مشکل مواجه شد"
   },
-
   "settings": {
     "title": "تنظیمات پایه",
     "description": "تنظیمات پایه‌ای حساب خود را تغییر دهید",
@@ -112,7 +109,6 @@
     "saveFailed": "خطا در ذخیره",
     "invalidSelection": "انتخاب نامعتبر است"
   },
-
   "securityForm": {
     "password": "رمز عبور",
     "determinePassword": "با تعیین یک رمز عبور قوی راحت تر به اکانت هارمونی خود وارد شوید",
@@ -139,4 +135,4 @@
     "passwordAdded": "رمز عبور اضافه شد",
     "error": "تعویض رمز عبور با مشکل مواجه شد"
   }
-}
+}

src/components/common/LTRTypography.tsx

@@ -3,4 +3,5 @@ import { styled, Typography } from '@mui/material';
 export const LTRTypography = styled(Typography)`
   /* @noflip */
   direction: ltr;
+  unicode-bidi: isolate;
 `;

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

@@ -1,5 +1,5 @@
 import { Button, Stack, TextField, Typography, Box } from '@mui/material';
-import { useRef, useState, type Dispatch } from 'react';
+import { useEffect, useRef, useState, type Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isNumeric } from '@/utils/regexes/isNumeric';
 import type { AuthFactory, AuthType } from '../../types/authTypes';
@@ -14,6 +14,7 @@ import { useToast } from '@rkheftan/harmony-ui';
 import { useApi } from '@/hooks/useApi';
 import type { GenerateTokenResponse } from '../../api/identityAPI';
 import { GoogleAuthenticationV2 } from './GoogleAuthenticationV2';
+import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
 
 export interface LoginRegisterFormProps {
   loginRegisterValue: string;
@@ -47,11 +48,22 @@ export function LoginRegisterForm({
   const [error, setError] = useState<string>();
   const [touched, setTouched] = useState<boolean>(false);
   const inputError: boolean = touched && !!error;
+  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
   const toast = useToast();
   const { loading: userStatusLoading, execute: execUserStatus } = useApi(
     getUserStatusByPhoneNumberOrEmail,
   );
 
+  useEffect(() => {
+    if (textFieldRef.current) {
+      const inputBaseElement =
+        textFieldRef.current.querySelector('.MuiInputBase-root');
+      if (inputBaseElement) {
+        setMenuAnchorEl(inputBaseElement as HTMLElement);
+      }
+    }
+  }, []);
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     let newValue = event.target.value;
     newValue = replacePersianWithRealNumbers(newValue);
@@ -160,7 +172,7 @@ export function LoginRegisterForm({
                   value={countryCode}
                   onChange={setCountryCode}
                   show={showAdornment}
-                  menuAnchor={textFieldRef.current}
+                  menuAnchor={menuAnchorEl}
                   onCloseFocusRef={inputRef}
                 />
               ),

src/features/authentication/components/CountryCodeSelector.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { countries, type Country } from '../../../data/countries';
 import type { CountryCode } from '@/types/commonTypes';
 import { Icon } from '@rkheftan/harmony-ui';
-import { LTRBox } from '@/components/common/LTRBox';
+import { LTRTypography } from '@/components/common/LTRTypography';
 interface CountryCodeSelectorProps {
   show: boolean;
   value: CountryCode;
@@ -133,7 +133,6 @@ export function CountryCodeSelector({
           style={{
             height: '1.5rem',
             width: '1.5rem',
-            // TODO: Check alignment for better styling definition
             marginTop: '-2px',
             marginRight: '4px',
           }}
@@ -183,7 +182,6 @@ export function CountryCodeSelector({
             />
           </Box>
 
-          {/* Can improve preformance with using virtual scrolling */}
           <Box sx={{ width: '100%', maxHeight: '14.75rem', overflow: 'auto' }}>
             {filteredCountries.length === 0 ? (
               <MenuItem disabled>
@@ -211,48 +209,13 @@ export function CountryCodeSelector({
                     />
                   </ListItemIcon>
                   <ListItemText primary={t(country.label, { ns: 'country' })} />
-                  <Typography color="text.secondary">
+                  <LTRTypography color="text.secondary">
-                    <Typography>
+                    {country.phone}
-                      <LTRBox>{country.phone}</LTRBox>
+                  </LTRTypography>
-                    </Typography>
-                  </Typography>
                 </MenuItem>
               ))
             )}
           </Box>
-
-          {/* virtual scrolling  */}
-          {/* <Virtuoso
-            style={{ height: '14.75rem' }} // Adjust height to account for the search bar
-            data={filteredCountries}
-            components={{
-              EmptyPlaceholder: () => (
-                <MenuItem disabled>
-                  <ListItemText>{t('messages.noResultFound')}</ListItemText>
-                </MenuItem>
-              ),
-            }}
-            initialTopMostItemIndex={countries.indexOf(selectedCountry)}
-            itemContent={(_, country) => (
-              <MenuItem
-                key={country.code}
-                selected={country.phone === value}
-                onClick={() => handleSelect(country)}
-              >
-                <ListItemIcon>
-                  <ReactCountryFlag
-                    countryCode={country.code}
-                    svg
-                    style={{ fontSize: '1.25em', lineHeight: '1.25em' }}
-                  />
-                </ListItemIcon>
-                <ListItemText primary={country.label} />
-                <Typography variant="body2" color="text.secondary">
-                  {country.phone}
-                </Typography>
-              </MenuItem>
-            )}
-          /> */}
         </Menu>
       </Box>
     </InputAdornment>

src/features/profile/components/CountryCodeSelector.tsx

@@ -1,254 +0,0 @@
-import {
-  Box,
-  InputAdornment,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { useMemo, useRef, useState, type RefObject } from 'react';
-import { ArrowDown2 } from 'iconsax-react';
-import ReactCountryFlag from 'react-country-flag';
-import { useTranslation } from 'react-i18next';
-import { countries, type Country } from '@/data/countries';
-
-interface CountryCodeSelectorProps {
-  show: boolean;
-  value: string;
-  onChange: (newValue: string) => void;
-  menuAnchor: HTMLElement | null;
-  onCloseFocusRef: RefObject<HTMLInputElement | null>;
-}
-
-/**
- * An animated country code adornment that fades and slides into view.
- * Its visibility is controlled by the `show` prop.
- */
-export function CountryCodeSelector({
-  show,
-  value,
-  onChange,
-  menuAnchor,
-  onCloseFocusRef,
-}: CountryCodeSelectorProps) {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [searchTerm, setSearchTerm] = useState('');
-  const open = Boolean(anchorEl);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const menuWidth = menuAnchor ? menuAnchor.clientWidth : 'auto';
-  const { t, i18n } = useTranslation();
-
-  const selectedCountry =
-    countries.find((c) => c.phone === value) || countries[0];
-
-  const handleClick = () => {
-    setAnchorEl(menuAnchor);
-  };
-
-  const handleClose = () => {
-    setTimeout(() => {
-      setAnchorEl(null);
-    }, 0);
-    setTimeout(() => {
-      onCloseFocusRef.current?.focus();
-    }, 100);
-    setSearchTerm(''); // Reset search on close
-  };
-
-  const handleSelect = (country: Country) => {
-    onChange(country.phone);
-    handleClose();
-  };
-
-  const handleMenuEntered = () => {
-    // Focus the input field after the menu has finished opening
-    searchInputRef.current?.focus();
-  };
-
-  const filteredCountries = useMemo(
-    () =>
-      countries.filter(
-        (country) =>
-          t(country.label).toLowerCase().includes(searchTerm.toLowerCase()) ||
-          country.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          country.phone.includes(searchTerm),
-      ),
-    [searchTerm, t],
-  );
-
-  return (
-    <InputAdornment
-      position={i18n.dir() === 'rtl' ? 'start' : 'end'}
-      sx={{
-        mx: 0,
-      }}
-    >
-      <Box
-        onClick={handleClick}
-        sx={{
-          // Animate width and opacity based on the 'show' prop
-          width: show ? 'auto' : 0,
-          opacity: show ? 1 : 0,
-          transition: (theme) =>
-            theme.transitions.create(['width', 'opacity'], {
-              duration: theme.transitions.duration.standard,
-            }),
-
-          // Prevent content from wrapping or spilling out during animation
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-
-          // layout styles
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 0.25,
-          pl: show ? 0.25 : 0,
-
-          '&:hover': {
-            cursor: 'pointer',
-          },
-        }}
-      >
-        {/* This inner Box prevents the content from being squeezed during the transition */}
-        <ArrowDown2 size="24" variant="Bold" />
-
-        <Typography
-          variant="body1"
-          color="text.primary"
-          component="div"
-          sx={{ direction: 'rtl' }} // TODO: need to fixed for both en and fa
-        >
-          {value}
-        </Typography>
-
-        <ReactCountryFlag
-          countryCode={selectedCountry.code}
-          svg
-          style={{
-            height: '1.5rem',
-            width: '1.5rem',
-            // TODO: Check alignment for better styling definition
-            marginTop: '-2px',
-            marginRight: '4px',
-          }}
-        />
-
-        <Menu
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          slotProps={{
-            list: {
-              sx: {
-                // Set the width to match the anchor element's width
-                width: menuWidth,
-                height: '18.75rem',
-              },
-            },
-            transition: {
-              onEntered: handleMenuEntered,
-            },
-          }}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
-          }}
-          transformOrigin={{
-            vertical: 'top',
-            horizontal: 'left',
-          }}
-        >
-          <Box
-            sx={{
-              position: 'sticky',
-              top: 0,
-              zIndex: 1,
-              p: 1,
-              backgroundColor: 'background.paper',
-            }}
-          >
-            <TextField
-              inputRef={searchInputRef}
-              size="small"
-              fullWidth
-              label={t('labels.search')}
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-          </Box>
-
-          {/* Can improve preformance with using virtual scrolling */}
-          <Box sx={{ width: '100%', maxHeight: '14.75rem', overflow: 'auto' }}>
-            {filteredCountries.length === 0 ? (
-              <MenuItem disabled>
-                <ListItem>
-                  <ListItemText>{t('messages.noResualtFound')}</ListItemText>
-                </ListItem>
-              </MenuItem>
-            ) : (
-              filteredCountries.map((country) => (
-                <MenuItem
-                  key={country.code}
-                  selected={country.phone === value}
-                  onClick={() => handleSelect(country)}
-                >
-                  <ListItemIcon>
-                    <ReactCountryFlag
-                      countryCode={country.code}
-                      svg
-                      style={{
-                        height: '1.125rem',
-                        width: '1.125rem',
-                      }}
-                    />
-                  </ListItemIcon>
-                  <ListItemText primary={t(country.label)} />
-                  <Typography color="text.secondary">
-                    {country.phone}
-                  </Typography>
-                </MenuItem>
-              ))
-            )}
-          </Box>
-
-          {/* virtual scrolling  */}
-          {/* <Virtuoso
-            style={{ height: '14.75rem' }} // Adjust height to account for the search bar
-            data={filteredCountries}
-            components={{
-              EmptyPlaceholder: () => (
-                <MenuItem disabled>
-                  <ListItemText>{t('messages.noResultFound')}</ListItemText>
-                </MenuItem>
-              ),
-            }}
-            initialTopMostItemIndex={countries.indexOf(selectedCountry)}
-            itemContent={(_, country) => (
-              <MenuItem
-                key={country.code}
-                selected={country.phone === value}
-                onClick={() => handleSelect(country)}
-              >
-                <ListItemIcon>
-                  <ReactCountryFlag
-                    countryCode={country.code}
-                    svg
-                    style={{ fontSize: '1.25em', lineHeight: '1.25em' }}
-                  />
-                </ListItemIcon>
-                <ListItemText primary={country.label} />
-                <Typography variant="body2" color="text.secondary">
-                  {country.phone}
-                </Typography>
-              </MenuItem>
-            )}
-          /> */}
-        </Menu>
-      </Box>
-    </InputAdornment>
-  );
-}

src/features/profile/components/userInformation/PhoneNumber.tsx

@@ -17,6 +17,7 @@ import {
 import { type Phone } from '../../types/settingsType';
 import { useToast } from '@rkheftan/harmony-ui';
 import { useProfile } from '../../hooks/useProfile';
+import type { CountryCode } from '@/types/commonTypes';
 
 export function PhoneNumber() {
   const { t, i18n } = useTranslation('setting');
@@ -29,7 +30,7 @@ export function PhoneNumber() {
   );
   const [isVerified, setIsVerified] = useState(false);
   const [phones, setPhones] = useState<Phone[]>([]);
-  const [countryCode, setCountryCode] = useState('+98');
+  const [countryCode, setCountryCode] = useState<CountryCode>('+98');
   const [phoneNumberError, setPhoneNumberError] = useState<string>();
   const [verificationCodeError, setVerificationCodeError] = useState<string>();
   const [phoneNumberTouched, setPhoneNumberTouched] = useState<boolean>(false);

src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx

@@ -9,11 +9,12 @@ import {
 } from '@mui/material';
 import { Edit2, TickCircle } from 'iconsax-react';
 import { CountDownTimer } from '@/components/CountDownTimer';
-import { CountryCodeSelector } from '../../CountryCodeSelector';
 import { Icon } from '@rkheftan/harmony-ui';
 import { type PhoneEditFormProps } from '@/features/profile/types/settingsType';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
+import { CountryCodeSelector } from '@/features/authentication/components/CountryCodeSelector';
+import { LTRTypography } from '@/components/common/LTRTypography';
 
 export default function PhoneEditForm({
   phoneNumber,
@@ -35,6 +36,7 @@ export default function PhoneEditForm({
   verificationCodeError,
 }: PhoneEditFormProps) {
   const { t } = useTranslation('setting');
+  const [codeSent, setCodeSent] = useState(false);
 
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -44,8 +46,16 @@ export default function PhoneEditForm({
       <Box sx={{ mb: 4 }}>
         <Typography variant="h6">{t('settingForm.editPhoneNumber')}</Typography>
         <Typography variant="body2" color="text.secondary">
-          {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)})
+          <Trans
-          {t('settingForm.verb')}
+            i18nKey="settingForm.phoneNumberText"
+            ns="setting"
+            values={{
+              phoneNumber: phones.map((p) => p.withCode).join(', '),
+            }}
+            components={{
+              1: <LTRTypography as="span" />,
+            }}
+          />
         </Typography>
       </Box>
       <Box
@@ -53,6 +63,7 @@ export default function PhoneEditForm({
           display: 'flex',
           gap: 2,
           alignItems: 'center',
+          pb: 2,
           flexDirection: { xs: 'column', sm: 'row' },
         }}
       >
@@ -117,7 +128,10 @@ export default function PhoneEditForm({
           <Button
             variant="text"
             loading={isSendingCode}
-            onClick={handleSendCode}
+            onClick={() => {
+              setCodeSent(true);
+              handleSendCode();
+            }}
             sx={{
               color: 'primary.main',
               width: { xs: '100%', sm: 208 },
@@ -135,14 +149,15 @@ export default function PhoneEditForm({
         )}
       </Box>
       {/* buttonState === 'counting' && !isVerified && */}
-      {buttonState === 'counting' && !isVerified && (
+      {codeSent && !isSendingCode && !isVerified && (
         <Box
           sx={{
             display: 'flex',
             gap: 2,
             alignItems: 'center',
             flexDirection: { xs: 'column', sm: 'row' },
-            mb: 1,
+            mb: 2,
+            pt: 2,
           }}
         >
           <TextField

src/features/profile/types/settingsType.ts

@@ -1,3 +1,4 @@
+import type { CountryCode } from '@/types/commonTypes';
 import type { TFunction } from 'i18next';
 
 export enum Gender {
@@ -107,8 +108,8 @@ export interface PhoneDisplayProps {
 export interface PhoneEditFormProps {
   phoneNumber: string;
   setPhoneNumber: (v: string) => void;
-  countryCode: string;
+  countryCode: CountryCode;
-  setCountryCode: (v: string) => void;
+  setCountryCode: (v: CountryCode) => void;
   verificationCode: string;
   setVerificationCode: (v: string) => void;
   isVerified: boolean;

src/lib/apiClient.ts

@@ -1,3 +1,4 @@
+import i18n from '@/config/i18n';
 import { ACCESS_TOKEN_KEY } from '@/providers/AuthProvider';
 import axios from 'axios';
 
@@ -24,6 +25,14 @@ apiClient.interceptors.request.use(
       // Add the authorization token to the headers
       config.headers.Authorization = `Bearer ${token}`;
     }
+
+    const currentLang = i18n.language;
+    if (currentLang) {
+      // If language is 'fa', send 'fa-IR', otherwise send the language code as is
+      config.headers['Accept-Language'] =
+        currentLang === 'fa' ? 'fa-IR' : 'en-US';
+    }
+
     return config;
   },
   (error) => {