Merge pull request #42 from rkheftan/fix/profile-bugs

Fix/profile bugs

src/components/DigitsInput.tsx

@@ -8,6 +8,7 @@ import React, {
 } from 'react';
 import { TextField, Stack } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { replacePersianWithRealNumbers } from '@/utils/replacePersianWithRealNumbers';
 
 interface DigitInputProps {
   error: boolean;
@@ -34,6 +35,8 @@ const DigitInput: React.FC<DigitInputProps> = ({
   };
 
   const handleChange = (value: string, index: number) => {
+    value = replacePersianWithRealNumbers(value);
+
     if (!/^\d$/.test(value) && value !== '') return;
 
     const newCode = [...code];
@@ -91,6 +94,7 @@ const DigitInput: React.FC<DigitInputProps> = ({
           color={success ? 'success' : 'primary'}
           key={index}
           inputRef={(el) => (inputRefs.current[index] = el)}
+          autoFocus={index === 0}
           value={digit}
           onChange={(e) => handleChange(e.target.value, index)}
           onKeyDown={(e) => e.key === 'Backspace' && handleBackspace(e, index)}
@@ -115,7 +119,7 @@ const DigitInput: React.FC<DigitInputProps> = ({
           variant="standard"
           size="medium"
           sx={{
-            width: '83px',
+            width: { md: '83px', xs: '20%' },
           }}
         />
       ))}

src/components/layout/Header.tsx

@@ -1,4 +1,5 @@
 import {
+  Avatar,
   Box,
   IconButton,
   ListItemIcon,
@@ -9,23 +10,19 @@ import {
 } from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
 import { Logout, More } from 'iconsax-react';
-import type { UserInfo } from '@/contexts/AuthContext';
 import { LTRTypography } from '../common/LTRTypography';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '@/hooks/useAuth';
+import { FlexBox } from '../common/FlexBox';
 
-interface HeaderProps {
-  user: UserInfo;
-}
-
-export const Header: React.FC<HeaderProps> = ({ user }) => {
+export const Header: React.FC = () => {
   const { t, i18n } = useTranslation('sideNav');
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
-  const { logout } = useAuth();
+  const { logout, userInfo: user } = useAuth();
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     event.stopPropagation();
@@ -52,15 +49,26 @@ export const Header: React.FC<HeaderProps> = ({ user }) => {
           height: (t) => t.spacing(10.5),
         }}
       >
-        <Box>
-          <Typography variant="body1" color="textSecondary">
-            {user.fullName}
-          </Typography>
-          {/* TODO: add ternary text color to palette */}
-          <LTRTypography variant="body2" color="#757575">
-            {user.phoneNumber ?? user.email}
-          </LTRTypography>
-        </Box>
+        <FlexBox sx={{ alignItems: 'center', gap: 1 }}>
+          <Avatar
+            sx={{ width: 32, height: 32, fontSize: '14px' }}
+            src={
+              user.picture &&
+              import.meta.env.VITE_IMAGE_BASE_URL + '/' + user.picture
+            }
+          >
+            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
+          </Avatar>
+          <Box>
+            <Typography variant="body1" color="textSecondary">
+              {user.fullName}
+            </Typography>
+            {/* TODO: add ternary text color to palette */}
+            <LTRTypography variant="body2" color="#757575">
+              {user.phoneNumber ?? user.email}
+            </LTRTypography>
+          </Box>
+        </FlexBox>
 
         <IconButton onClick={handleClick} color="primary">
           <Icon Component={More} />

src/components/layout/Layout.tsx

@@ -4,9 +4,10 @@ import { appRoutes } from '@/routes/config';
 import { Outlet, useLocation } from 'react-router-dom';
 import { Box, useMediaQuery, useTheme } from '@mui/material';
 import { Header } from './Header';
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
 import { Toolbar } from './Toolbar';
 import { useAuth } from '@/hooks/useAuth';
+import { Loading } from '../routes/Loading';
 
 export const Layout = () => {
   const navItemConfigs = buildNavItems(appRoutes);
@@ -53,7 +54,9 @@ export const Layout = () => {
               overflowInline: 'auto',
             }}
           >
-            <Outlet />
+            <Suspense fallback={<Loading />}>
+              <Outlet />
+            </Suspense>
           </Box>
         </Box>
 

src/components/layout/Toolbar.tsx

@@ -63,21 +63,9 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         )}
         <Logo />
       </Box>
-      <Box
-        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 1 }}
-      >
-        {isMobile && (
-          <Avatar
-            sx={{ width: 32, height: 32, fontSize: '14px' }}
-            src={user.picture}
-          >
-            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
-          </Avatar>
-        )}
         <IconButton color="primary" onClick={handleClick}>
           <Icon Component={Menu} variant="Bold" />
         </IconButton>
-      </Box>
       <ProductsMenu anchorEl={anchorEl} onClose={handleClose} open={open} />
     </MuiToolbar>
   );