removing unused imports, creating a file for global decelaration

package-lock.json

@@ -31,6 +31,7 @@
         "@types/node": "^24.0.10",
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
+        "@types/stylis": "^4.2.7",
         "@typescript-eslint/eslint-plugin": "^8.35.1",
         "@typescript-eslint/parser": "^8.35.1",
         "@vitejs/plugin-react": "^4.5.2",
@@ -1882,6 +1883,13 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.7",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.7.tgz",
+      "integrity": "sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.35.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.1.tgz",

package.json

@@ -34,6 +34,7 @@
     "@types/node": "^24.0.10",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@types/stylis": "^4.2.7",
     "@typescript-eslint/eslint-plugin": "^8.35.1",
     "@typescript-eslint/parser": "^8.35.1",
     "@vitejs/plugin-react": "^4.5.2",

src/components/Toast.tsx

@@ -1,5 +1,5 @@
 import { Alert, Snackbar, type AlertColor } from '@mui/material';
-import React, { type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 
 export interface ToastProps extends PropsWithChildren {
   color: AlertColor | undefined;

src/features/authorization/components/AuthenticationCard.tsx

@@ -1,5 +1,5 @@
-import { Box, Paper } from '@mui/material';
+import { Paper } from '@mui/material';
-import React, { type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 
 // Beacuse in the otp verify there is a element outside of the authentication card
 export const AuthenticationCard = ({ children }: PropsWithChildren) => {

src/features/authorization/components/AuthenticationSteps/AuthenticationSteps.tsx

@@ -1,15 +1,10 @@
-import React, { useState, type JSX } from 'react';
+import { useState, type JSX } from 'react';
 import { LoginRegisterForm } from './LoginRegiserForm';
 import type { AuthMode, AuthType } from '../../types/authTypes';
 import { OtpVerifyForm } from './OtpVerifyForm';
 import { isNumeric } from '@/utils/regexes/isNumeric';
 import { CompleteSignUp } from './CompleteSignUp';
 import { EnterPasswordForm } from './EnterPasswordForm';
-import {
-  getUserStatusByPhoneNumberOrEmail,
-  sendEmailOtp,
-  sendSmsOtp,
-} from '../../api/authorizationAPI';
 import { UserStatus } from '../../types/userTypes';
 import type { CountryCode, GUID } from '@/types/commonTypes';
 import { VerifyPhoneNumber } from './VerifyPhoneNumber';
@@ -134,11 +129,9 @@ export const AuthenticationSteps = (): JSX.Element => {
 
       {currentStep === 'addedPhoneNumberVerify' && (
         <VerifyPhoneNumber
-          authReturnUrl={authReturnUrl}
           countryCode={countryCode}
           onEditValue={() => setCurrentStep('addPhoneNumber')}
           value={addedPhoneNumberValue}
-          email={loginRegisterValue}
           onPhoneNumberVerified={handlePhoneNumberVerified}
         />
       )}

src/features/authorization/components/AuthenticationSteps/CompleteSignUp.tsx

@@ -1,6 +1,6 @@
-import { Box, Button, Paper, TextField, Typography } from '@mui/material';
+import { Button, TextField, Typography } from '@mui/material';
 import parsePhoneNumberFromString from 'libphonenumber-js';
-import React, { useRef, useState, type Dispatch } from 'react';
+import { useRef, useState, type Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AuthenticationCard } from '../AuthenticationCard';
 import { CountryCodeSelector } from '../CountryCodeSelector';

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

@@ -1,6 +1,6 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { AuthenticationCard } from '../AuthenticationCard';
-import { ArrowLeft, Edit2, Eye, EyeSlash, MaskLeft } from 'iconsax-reactjs';
+import { ArrowLeft, Edit2, Eye, EyeSlash } from 'iconsax-reactjs';
 import {
   Box,
   Button,
@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Toast } from '@/components/Toast';
-import { Link, Navigate, useSearchParams } from 'react-router';
+import { Link } from 'react-router';
 import type { AuthType } from '../../types/authTypes';
 import type { CountryCode, GUID } from '@/types/commonTypes';
 import {
@@ -19,7 +19,7 @@ import {
   sendEmailOtp,
   sendSmsOtp,
 } from '../../api/authorizationAPI';
-import type { LoginRequest, PasswordLoginRequest } from '../../types/userTypes';
+import type { PasswordLoginRequest } from '../../types/userTypes';
 
 export interface EnterPasswordFormProps {
   onEditValue: () => void;

src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx

@@ -1,18 +1,11 @@
 import { Button } from '@mui/material';
 import { Google } from 'iconsax-reactjs';
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { GoogleCodeClientResponse } from '../../types/userTypes';
 import { loginOrSignUpWithGoogle } from '../../api/authorizationAPI';
 import type { GUID } from '@/types/commonTypes';
 
-declare global {
-  interface Window {
-    google: typeof google;
-  }
-  const google: any;
-}
-
 export interface GoogleAuthenticationProps {
   disabled: boolean;
   authReturnUrl: string;

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

@@ -1,16 +1,8 @@
-import {
+import { Button, Stack, TextField, Typography } from '@mui/material';
-  Box,
-  Button,
-  Paper,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
 import { useRef, useState, type Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Google } from 'iconsax-reactjs';
 import { isNumeric } from '@/utils/regexes/isNumeric';
-import type { AuthMode, AuthType } from '../../types/authTypes';
+import type { AuthType } from '../../types/authTypes';
 import { isEmail } from '@/utils/regexes/isEmail';
 import parsePhoneNumberFromString from 'libphonenumber-js';
 import { AuthenticationCard } from '../AuthenticationCard';
@@ -45,10 +37,9 @@ export function LoginRegisterForm({
   onGoogleAuthenticated,
 }: LoginRegisterFormProps) {
   const [checkStatusLoading, setCheckStatusLoading] = useState<boolean>(false);
-  const { t, i18n } = useTranslation('authentication');
+  const { t } = useTranslation('authentication');
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const dir = i18n.dir();
   const [error, setError] = useState<string>();
   const [touched, setTouched] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string>();

src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -1,18 +1,13 @@
 import { useTranslation } from 'react-i18next';
-import { Alert, Box, Button, Snackbar, Stack, Typography } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 import { Edit2 } from 'iconsax-reactjs';
 import DigitInput from '@/components/components/DigitsInput';
 import type { AuthMode, AuthType } from '../../types/authTypes';
 import { useEffect, useState } from 'react';
 import { Toast } from '@/components/Toast';
 import { AuthenticationCard } from '../AuthenticationCard';
-import type {
+import type { LoginRequest } from '../../types/userTypes';
-  ConfirmEmailOtpRequest,
-  LoginRequest,
-} from '../../types/userTypes';
-import { useSearchParams } from 'react-router';
 import {
-  confirmEmailOtp,
   loginOrSignUpWithOtp,
   sendEmailOtp,
   sendSmsOtp,

src/features/authorization/components/AuthenticationSteps/VerifyPhoneNumber.tsx

@@ -1,33 +1,22 @@
 import { useTranslation } from 'react-i18next';
-import { Alert, Box, Button, Snackbar, Stack, Typography } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 import { Edit2 } from 'iconsax-reactjs';
 import DigitInput from '@/components/components/DigitsInput';
-import type { AuthMode, AuthType } from '../../types/authTypes';
 import { useEffect, useState } from 'react';
 import { Toast } from '@/components/Toast';
 import { AuthenticationCard } from '../AuthenticationCard';
-import type { ConfirmSmsOtpRequest, LoginRequest } from '../../types/userTypes';
+import type { ConfirmSmsOtpRequest } from '../../types/userTypes';
-import { useSearchParams } from 'react-router';
+import { confirmSmsOtp, sendSmsOtp } from '../../api/authorizationAPI';
-import {
+import type { CountryCode } from '@/types/commonTypes';
-  confirmSmsOtp,
-  loginOrSignUpWithOtp,
-  sendEmailOtp,
-  sendSmsOtp,
-} from '../../api/authorizationAPI';
-import type { CountryCode, GUID } from '@/types/commonTypes';
 
 interface VerifyPhoneNumberProps {
-  authReturnUrl: string;
   value: string;
-  email: string;
   countryCode: CountryCode;
   onEditValue: () => void;
   onPhoneNumberVerified: () => void;
 }
 
 export function VerifyPhoneNumber({
-  authReturnUrl,
-  email,
   value,
   countryCode,
   onEditValue,

src/features/authorization/components/CountryCodeSelector.tsx

@@ -13,7 +13,6 @@ import { useMemo, useRef, useState, type RefObject } from 'react';
 import { ArrowDown2 } from 'iconsax-reactjs';
 import ReactCountryFlag from 'react-country-flag';
 import { useTranslation } from 'react-i18next';
-import { Virtuoso } from 'react-virtuoso';
 import { countries, type Country } from '../data/countries';
 import type { CountryCode } from '@/types/commonTypes';
 interface CountryCodeSelectorProps {

src/features/authorization/components/ForgetPassword/ChangePassword.tsx

@@ -1,13 +1,6 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { AuthenticationCard } from '../AuthenticationCard';
-import {
+import { Edit2, Eye, EyeSlash, TickCircle } from 'iconsax-reactjs';
-  ArrowLeft,
-  Edit2,
-  Eye,
-  EyeSlash,
-  MaskLeft,
-  TickCircle,
-} from 'iconsax-reactjs';
 import {
   Box,
   Button,

src/features/authorization/components/ForgetPassword/ForgetPasswordContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import type { AuthType } from '../../types/authTypes';
 import { ForgettedPasswordInfo } from './ForgettedPasswordInfo';
 import { ForgetPasswordOtp } from './ForgetPasswordOtp';
@@ -14,7 +14,7 @@ export const ForgetPasswordContainer = () => {
   const [infoCountryCode, setInfoCountryCode] = useState<CountryCode>('+98');
   const [infoType, setInfoType] = useState<AuthType>('email');
 
-  const handleVerifyOtp = (value: string) => {
+  const handleVerifyOtp = () => {
     setForgetPassCurrentStep('verifyOtp');
   };
 

src/features/authorization/components/ForgetPassword/ForgetPasswordOtp.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next';
-import { Alert, Box, Button, Snackbar, Stack, Typography } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 import { Edit2 } from 'iconsax-reactjs';
 import DigitInput from '@/components/components/DigitsInput';
-import type { AuthMode, AuthType } from '../../types/authTypes';
+import type { AuthType } from '../../types/authTypes';
 import { useEffect, useState } from 'react';
 import { Toast } from '@/components/Toast';
 import { AuthenticationCard } from '../AuthenticationCard';
@@ -96,8 +96,10 @@ export function ForgetPasswordOtp({
       const jsonRes = await result.json();
 
       if (jsonRes.success) {
+        setVerifyStatus('success');
         onOTPVerified(otpCode);
       } else {
+        setVerifyStatus('failed');
         setVerifyAlertMessage(jsonRes.message);
       }
 

src/features/authorization/components/ForgetPassword/ForgettedPasswordInfo.tsx

@@ -1,16 +1,8 @@
-import {
+import { Button, Stack, TextField, Typography } from '@mui/material';
-  Box,
-  Button,
-  Paper,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
 import { useRef, useState, type Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Google } from 'iconsax-reactjs';
 import { isNumeric } from '@/utils/regexes/isNumeric';
-import type { AuthMode, AuthType } from '../../types/authTypes';
+import type { AuthType } from '../../types/authTypes';
 import { isEmail } from '@/utils/regexes/isEmail';
 import parsePhoneNumberFromString from 'libphonenumber-js';
 import { AuthenticationCard } from '../AuthenticationCard';
@@ -39,10 +31,9 @@ export function ForgettedPasswordInfo({
   countryCode,
   setCountryCode,
 }: ForgettedPasswordInfoProps) {
-  const { t, i18n } = useTranslation('authentication');
+  const { t } = useTranslation('authentication');
   const textFieldRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const dir = i18n.dir();
   const [error, setError] = useState<string>();
   const [touched, setTouched] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string>();

src/features/authorization/routes/AuthenticationPage.tsx

@@ -1,9 +1,6 @@
 import { FlexBox } from '@/components/components/common/FlexBox';
 import Logo from '@/components/Logo';
-import { Paper } from '@mui/material';
-import { useState } from 'react';
 import { AuthenticationSteps } from '../components/AuthenticationSteps/AuthenticationSteps';
-import { ForgetPasswordContainer } from '../components/ForgetPassword/ForgetPasswordContainer';
 
 export function AuthenticationPage() {
   return (

src/features/authorization/routes/ForgetPasswordPage.tsx

@@ -1,8 +1,5 @@
 import { FlexBox } from '@/components/components/common/FlexBox';
 import Logo from '@/components/Logo';
-import { Paper } from '@mui/material';
-import { useState } from 'react';
-import { AuthenticationSteps } from '../components/AuthenticationSteps/AuthenticationSteps';
 import { ForgetPasswordContainer } from '../components/ForgetPassword/ForgetPasswordContainer';
 
 export function ForgetPasswordPage() {

src/global.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+declare global {
+  namespace JSX {
+    interface Element extends React.ReactElement<any, any> {}
+  }
+
+  interface Window {
+    google: typeof google;
+  }
+  const google: any;
+}

vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+        },
+    },
+});