customer-dashboard/src/Components/AppRoutes/index.js

import { Navigate, Route, Routes } from "react-router-dom";
import { Constants, isDevelopmentEnv } from "../../utils";
import { lazy } from "react";
import { MySupsenseFallback } from "../MySupsenseFallback";
import { AuthenticationMethod } from "../../Pages/Authentication";
import Verification from "../../Pages/Verification";

// Lazy-loaded components
const Authentication = lazy(() => import("../../Pages/Authentication"));
const Dashboard = lazy(() => import("../../Pages/Dashboard"));
const PageNotFound = lazy(() => import("../../Pages/PageNotFound"));
const PageInDevelopment = lazy(() => import("../../Pages/PageInDevelopment"));
const StoreSettings = lazy(() => import("../../Pages/Store/Settings"));
const StoreEmployees = lazy(() => import("../../Pages/Store/Employees"));
const StoreServices = lazy(() => import("../../Pages/Store/Services"));
const StoreCalendar = lazy(() => import("../../Pages/Store/Calendar"));
const StoreCalendarAuth = lazy(() => import("../../Pages/Store/Calendar/Auth"));
const StoreWebsite = lazy(() => import("../../Pages/Store/Website"));
//const Support = lazy(() => import("../../Pages/Support"));
//const Feedback = lazy(() => import("../../Pages/Feedback"));
const UserProfile = lazy(() => import("../../Pages/UserProfile"));

export function AuthenticationRoutes() {
  return (
    <Routes>
      <Route
        path={Constants.ROUTE_PATHS.AUTHENTICATION.LOGIN}
        element={
          <MySupsenseFallback>
            <Authentication method={AuthenticationMethod.LOGIN} />
          </MySupsenseFallback>
        }
      />

      <Route
        path={Constants.ROUTE_PATHS.AUTHENTICATION.SIGN_UP}
        element={
          <MySupsenseFallback>
            <Authentication method={AuthenticationMethod.SIGNUP} />
          </MySupsenseFallback>
        }
      />

      <Route
        path="*"
        element={<Navigate to={Constants.ROUTE_PATHS.AUTHENTICATION.LOGIN} />}
      />
    </Routes>
  );
}

export function VerificationRoutes() {
  return (
    <Routes>
      <Route
        path={`${Constants.ROUTE_PATHS.VERIFY}/:state/:emailVerificationId`}
        element={
          <MySupsenseFallback>
            <Verification />
          </MySupsenseFallback>
        }
      />

      <Route
        path="*"
        element={
          <MySupsenseFallback>
            <Verification />
          </MySupsenseFallback>
        }
      />
    </Routes>
  );
}

export function AppRoutes({ setUserSession }) {
  return (
    <Routes>
      <Route
        path={Constants.ROUTE_PATHS.OVERVIEW}
        element={
          <MySupsenseFallback>
            <Dashboard />
          </MySupsenseFallback>
        }
      />

      <Route
        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.SETTINGS}`}
        element={
          <MySupsenseFallback>
            <StoreSettings />
          </MySupsenseFallback>
        }
      />

      <Route
        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.EMPLOYEES}`}
        element={
          <MySupsenseFallback>
            <StoreEmployees />
          </MySupsenseFallback>
        }
      />

      <Route
        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.SERVICES}`}
        element={
          <MySupsenseFallback>
            <StoreServices />
          </MySupsenseFallback>
        }
      />

      <Route
        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.CALENDAR}`}
        element={
          <MySupsenseFallback>
            <StoreCalendar />
          </MySupsenseFallback>
        }
      />

      <Route
        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/${Constants.ROUTE_PATHS.STORE.CALENDAR_AUTH}/:status/`}
        element={
          <MySupsenseFallback>
            <StoreCalendarAuth />
          </MySupsenseFallback>
        }
      />

      {isDevelopmentEnv() && (
        <>
          <Route
            path={Constants.ROUTE_PATHS.SUPPORT}
            element={
              <MySupsenseFallback>
                <PageInDevelopment />
              </MySupsenseFallback>
            }
          />

          <Route
            path={Constants.ROUTE_PATHS.FEEDBACK}
            element={
              <MySupsenseFallback>
                <PageInDevelopment />
              </MySupsenseFallback>
            }
          />
        </>
      )}

      <Route
        path={Constants.ROUTE_PATHS.USER_PROFILE}
        element={
          <MySupsenseFallback>
            <UserProfile setUserSession={setUserSession} />
          </MySupsenseFallback>
        }
      />

      <Route
        path="*"
        element={
          <MySupsenseFallback>
            <PageNotFound />
          </MySupsenseFallback>
        }
      />
    </Routes>
  );
}

/*
 <Route
        path={`${Constants.ROUTE_PATHS.STORE.OVERVIEW}/:storeId/${Constants.ROUTE_PATHS.STORE.WEBSITE}`}
        element={
          <MySupsenseFallback>
            <StoreWebsite />
          </MySupsenseFallback>
        }
      /> 
*/