Merge branch 'develop' into feat/user-profile

src/components/CountryFlag.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { countries } from '@/features/profile/data/countries';
+// TODO: move countries outside of feature directory
+import { countries } from '@/features/authentication/data/Countries';
 
 interface CountryFlagProps {
   code: string;

src/components/Layout/Header.tsx

@@ -0,0 +1,35 @@
+import { Box, IconButton, Typography } from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { More } from 'iconsax-react';
+import type { User } from './type';
+
+interface HeaderProps {
+  user: User;
+}
+
+export const Header: React.FC<HeaderProps> = ({ user }) => {
+  return (
+    <Box
+      sx={{
+        p: 2,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: (t) => t.spacing(10.5),
+      }}
+    >
+      <Box>
+        <Typography variant="body1">
+          {user.firstName + ' ' + user.lastName}
+        </Typography>
+        <Typography variant="body2" color="textSecondary">
+          {user.phoneNumber}
+        </Typography>
+      </Box>
+
+      <IconButton>
+        <Icon Component={More} />
+      </IconButton>
+    </Box>
+  );
+};

src/components/Layout/Layout.tsx

@@ -0,0 +1,69 @@
+import { SideNav } from '@rkheftan/harmony-ui';
+import { buildNavItems } from './buildNavItems';
+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 { Toolbar } from './Toolbar';
+import type { User } from './type';
+
+export const Layout = () => {
+  const navItemConfigs = buildNavItems(appRoutes);
+  const location = useLocation();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [sideNavOpen, setSideNavOpen] = useState(false);
+  const [user] = useState<User>({
+    firstName: 'محمد حسین',
+    lastName: 'برزه گر',
+    phoneNumber: '09123456789',
+  });
+
+  return (
+    <Box
+      sx={{
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          // TODO: Check for better approach
+          width: isMobile ? '100%' : 1070,
+          height: isMobile ? '100vh' : '80%',
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          borderRadius: isMobile ? 0 : 4,
+          backgroundColor: 'background.paper',
+          overflow: 'hidden',
+        }}
+      >
+        <Box sx={{ flex: 1 }}>
+          <Toolbar
+            isMobile={isMobile}
+            sideNavOpen={sideNavOpen}
+            setSideNavOpen={setSideNavOpen}
+            user={user}
+          />
+          <Outlet />
+        </Box>
+
+        <SideNav
+          open={sideNavOpen}
+          onClose={() => setSideNavOpen(false)}
+          header={isMobile ? undefined : <Header user={user} />}
+          footer={isMobile ? <Header user={user} /> : undefined}
+          navConfig={navItemConfigs}
+          activePath={location.pathname + location.hash}
+          selectedVariant="textOnly"
+          positioning="absolute"
+          sideNavVariant={isMobile ? 'temporary' : 'full'}
+          top={8.125}
+        />
+      </Box>
+    </Box>
+  );
+};

src/components/Layout/Toolbar.tsx

@@ -0,0 +1,75 @@
+import {
+  Avatar,
+  Box,
+  IconButton,
+  Toolbar as MuiToolbar,
+  Typography,
+} from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { HambergerMenu, Menu } from 'iconsax-react';
+import type { Dispatch, SetStateAction } from 'react';
+import type { User } from './type';
+
+interface ToolbarProps {
+  sideNavOpen: boolean;
+  setSideNavOpen: Dispatch<SetStateAction<boolean>>;
+  isMobile: boolean;
+  user: User;
+}
+
+export const Toolbar: React.FC<ToolbarProps> = ({
+  sideNavOpen,
+  setSideNavOpen,
+  isMobile,
+  user,
+}) => {
+  return (
+    <MuiToolbar
+      sx={{
+        height: (t) => t.spacing(isMobile ? 8 : 10.5),
+        px: isMobile ? 3 : 2,
+        borderBottom: (t) => `1px solid ${t.palette.divider}`,
+        boxSizing: 'content-box',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Box
+        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 2 }}
+      >
+        {isMobile && (
+          <IconButton
+            sx={{
+              backgroundColor: sideNavOpen ? 'primary.light' : undefined,
+              color: sideNavOpen ? 'primary.main' : undefined,
+              '&:hover': {
+                backgroundColor: sideNavOpen ? 'primary.light' : undefined,
+              },
+            }}
+            onClick={() => setSideNavOpen(!sideNavOpen)}
+          >
+            <Icon Component={HambergerMenu} />
+          </IconButton>
+        )}
+        {/* <Logo /> */}
+        <Typography variant="h6">LOGO placeholder</Typography>
+      </Box>
+      <Box
+        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 1 }}
+      >
+        {isMobile && (
+          <Avatar
+            sx={{ width: 32, height: 32, fontSize: '14px' }}
+            src={user.profileUrl}
+          >
+            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
+          </Avatar>
+        )}
+        <IconButton>
+          <Icon Component={Menu} variant="Bold" />
+        </IconButton>
+      </Box>
+    </MuiToolbar>
+  );
+};

src/components/Layout/buildNavItems.tsx

@@ -0,0 +1,34 @@
+// src/components/SideNav.tsx (Conceptual Example)
+
+import { useTranslation } from 'react-i18next';
+import { type RouteConfig } from '@/routes/config';
+import { Icon, type NavItemConfig } from '@rkheftan/harmony-ui';
+import type { Icon as Iconsax } from 'iconsax-react';
+
+const getIcon = (icon?: Iconsax) => (isSelected: boolean) =>
+  icon ? (
+    <Icon Component={icon} variant={isSelected ? 'Bold' : 'Broken'} />
+  ) : undefined;
+
+export function buildNavItems(routes: RouteConfig[]): NavItemConfig[] {
+  const { t } = useTranslation();
+
+  return routes.flatMap((route) => {
+    // Check if route itself does not have a navItem but its child has
+    if (!route.navConfig && route.children) {
+      return buildNavItems(route.children);
+    }
+
+    // Check if route.navConfig is defined before destructuring
+    if (!route.navConfig) {
+      return []; // Return an empty array to be flattened
+    }
+    const { title, icon } = route.navConfig;
+    return {
+      text: t(title),
+      getIcon: getIcon(icon),
+      path: route.path,
+      children: route.children ? buildNavItems(route.children) : undefined,
+    };
+  });
+}

src/components/Layout/type.ts

@@ -0,0 +1,8 @@
+// TODO: this type file is temporary and should replace it with the actual use type and value when api is ready
+
+export interface User {
+  firstName: string;
+  lastName: string;
+  phoneNumber: string;
+  profileUrl?: string;
+}

src/components/Toast.tsx

@@ -0,0 +1,27 @@
+import { Alert, Snackbar, type AlertColor } from '@mui/material';
+import { type PropsWithChildren } from 'react';
+
+export interface ToastProps extends PropsWithChildren {
+  color: AlertColor | undefined;
+  open: boolean;
+  onClose: () => void;
+}
+
+export const Toast = ({ color, open, onClose, children }: ToastProps) => {
+  return (
+    <Snackbar
+      sx={{ width: (t) => `calc(100% - ${t.spacing(6)})`, maxWidth: '396px' }}
+      open={open}
+      onClose={onClose}
+    >
+      <Alert
+        onClose={onClose}
+        severity={color}
+        variant="filled"
+        sx={{ width: '100%' }}
+      >
+        {children}
+      </Alert>
+    </Snackbar>
+  );
+};

src/components/components/DigitsInput.tsx

@@ -0,0 +1,124 @@
+import React, {
+  useRef,
+  useEffect,
+  type SetStateAction,
+  type Dispatch,
+  useState,
+  type KeyboardEvent,
+} from 'react';
+import { TextField, Stack } from '@mui/material';
+
+interface DigitInputProps {
+  error: boolean;
+  success: boolean;
+  onChange: Dispatch<SetStateAction<string>>;
+}
+
+const DigitInput: React.FC<DigitInputProps> = ({
+  onChange,
+  error,
+  success,
+}) => {
+  const [code, setCode] = useState<string[]>(['', '', '', '']);
+  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+
+  const handleDigitInputValueChange = (value: string[]) => {
+    const formatted = value.filter((char) => char !== '').join('');
+    onChange(formatted);
+  };
+
+  const handleChange = (value: string, index: number) => {
+    if (!/^\d$/.test(value) && value !== '') return;
+
+    const newCode = [...code];
+    newCode[index] = value;
+    setCode(newCode);
+    handleDigitInputValueChange(newCode);
+
+    if (value && index < 4 - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleBackspace = (
+    event: KeyboardEvent<HTMLDivElement>,
+    index: number,
+  ) => {
+    event.preventDefault();
+    if (index >= 0) {
+      handleChange('', index);
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handlePaste = (event: React.ClipboardEvent) => {
+    event.preventDefault();
+    const pastedData = event.clipboardData.getData('text').replace(/\D/g, ''); // Remove non-digit characters
+    const newCode = [...code];
+
+    pastedData.split('').forEach((digit, i) => {
+      if (i < code.length) {
+        newCode[i] = digit;
+      }
+    });
+
+    setCode(newCode);
+    handleDigitInputValueChange(newCode);
+
+    // Focus the next empty input after the last pasted character
+    const lastIndex = Math.min(pastedData.length, code.length) - 1;
+    if (lastIndex >= 0 && inputRefs.current[lastIndex]) {
+      inputRefs.current[lastIndex]?.focus();
+    }
+  };
+
+  return (
+    <Stack
+      direction="row-reverse"
+      alignItems="center"
+      sx={{ gap: 2, width: '100%', my: 4 }}
+      justifyContent="center"
+    >
+      {code.map((digit, index) => (
+        <TextField
+          error={error}
+          color={success ? 'success' : 'primary'}
+          key={index}
+          inputRef={(el) => (inputRefs.current[index] = el)}
+          value={digit}
+          onChange={(e) => handleChange(e.target.value, index)}
+          onKeyDown={(e) => e.key === 'Backspace' && handleBackspace(e, index)}
+          onPaste={(e) => handlePaste(e)}
+          slotProps={{
+            htmlInput: {
+              maxLength: 1,
+              sx: {
+                height: '72px',
+                color: error
+                  ? 'error.main'
+                  : success
+                    ? 'success.main'
+                    : 'text.primary',
+              },
+              style: {
+                textAlign: 'center',
+                fontSize: '48px',
+              },
+            },
+          }}
+          variant="standard"
+          size="medium"
+          sx={{
+            width: '83px',
+          }}
+        />
+      ))}
+    </Stack>
+  );
+};
+
+export default DigitInput;

src/components/components/common/Container.tsx

@@ -0,0 +1,8 @@
+import { Box, styled } from '@mui/material';
+
+export const Container = styled(Box)(() => ({
+  width: '100%',
+  maxWidth: '100vw',
+  height: '100vh',
+  margin: '0 auto',
+}));

src/components/components/common/FlexBox.tsx

@@ -0,0 +1,21 @@
+import { Box, styled, type BoxProps } from '@mui/material';
+
+// Define the props our component will accept
+interface FlexBoxProps extends BoxProps {
+  direction?: 'row' | 'column';
+  justify?: string;
+  align?: string;
+}
+
+export const FlexBox = styled(Box, {
+  // Do not forward these custom props to the DOM element
+  shouldForwardProp: (prop) =>
+    prop !== 'direction' && prop !== 'justify' && prop !== 'align',
+})<FlexBoxProps>(
+  ({ direction = 'row', justify = 'flex-start', align = 'stretch' }) => ({
+    display: 'flex',
+    flexDirection: direction,
+    justifyContent: justify,
+    alignItems: align,
+  }),
+);

src/components/components/common/Stack.tsx

@@ -0,0 +1,19 @@
+import { Box, styled, type BoxProps } from '@mui/material';
+
+interface StackProps extends BoxProps {
+  direction?: 'row' | 'column';
+  spacing?: number; // Spacing factor (multiplied by theme.spacing)
+  align?: string;
+}
+
+export const Stack = styled(Box, {
+  shouldForwardProp: (prop) =>
+    prop !== 'direction' && prop !== 'spacing' && prop !== 'align',
+})<StackProps>(
+  ({ theme, direction = 'column', spacing = 2, align = 'stretch' }) => ({
+    display: 'flex',
+    flexDirection: direction,
+    alignItems: align,
+    gap: theme.spacing(spacing),
+  }),
+);