Frontend Routing

/cart  /blog  /checkout  /account  /orders  /payment  /invoice
/settings  /login  /logout  /privacy-policy  /terms  /about-us  /return-policy

import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./pages/Home";
import ProductsPage from "./pages/Products";
import ProductDetailPage from "./pages/ProductDetail";
import CategoriesPage from "./pages/Categories";
import CategoryProductsPage from "./pages/CategoryProducts";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/products" element={<ProductsPage />} />
        <Route path="/product/:slug" element={<ProductDetailPage />} />
        <Route path="/category" element={<CategoriesPage />} />
        <Route path="/category/:slug" element={<CategoryProductsPage />} />
      </Routes>
    </BrowserRouter>
  );
}

import { Link } from "react-router-dom";

function Footer() {
  return (
    <footer>
      <nav>
        <Link to="/about-us">About Us</Link>
        <Link to="/privacy-policy">Privacy Policy</Link>
        <Link to="/terms">Terms & Conditions</Link>
        <Link to="/return-policy">Return Policy</Link>
      </nav>
      
      <nav>
        <Link to="/account">My Account</Link>
        <Link to="/orders">Order History</Link>
        <Link to="/settings">Settings</Link>
        <Link to="/logout">Logout</Link>
      </nav>
    </footer>
  );
}

import { useNavigate } from "react-router-dom";
import { orders } from "salesive-api-axios";

function CartPage() {
  const navigate = useNavigate();

  const handleCheckout = async () => {
    if (cartItems.length === 0) return;

    // Convert the cart into an order (returns the created order)
    const { data } = await orders.createFromCart({});
    const orderId = data?.data?._id;

    if (orderId) {
      navigate(`/checkout/${orderId}`);
    }
  };

  return (
    <div>
      {/* Cart items display */}
      <button onClick={handleCheckout}>
        Proceed to Checkout
      </button>
    </div>
  );
}

src/
├── App.jsx                  # <Routes> for the manual routes below
└── pages/
    ├── Home.jsx             # /
    ├── Products.jsx         # /products
    ├── ProductDetail.jsx    # /product/:slug
    ├── Categories.jsx       # /category
    └── CategoryProducts.jsx # /category/:slug

import { useEffect, useState } from "react";
import { auth } from "salesive-api-axios";
import { Link } from "react-router-dom";

function Header() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  useEffect(() => {
    const checkAuth = async () => {
      try {
        // Verify if user has a valid session
        const token = localStorage.getItem("salesive_token");
        setIsAuthenticated(!!token);
      } catch (error) {
        setIsAuthenticated(false);
      }
    };
    checkAuth();
  }, []);
  
  return (
    <header>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/products">Products</Link>
        <Link to="/category">Categories</Link>
        
        {isAuthenticated ? (
          <>
            <Link to="/account">Account</Link>
            <Link to="/orders">Orders</Link>
            <Link to="/logout">Logout</Link>
          </>
        ) : (
          <button onClick={() => window.location.href = "/login"}>
            Login
          </button>
        )}
      </nav>
    </header>
  );
}