[wip] Product details

src/App.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Routes, Route } from "react-router-dom";
 import Home from "./pages/Home";
 import About from "./pages/About";
 import Contact from "./pages/Contact";
@@ -11,42 +12,43 @@ import Cart from "./pages/Cart";
 import Signup from "./pages/Signup";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
-import { Route, Routes } from "react-router-dom";
 import ProductDetails from "./components/ProductDetails";
 import CartPanel from "./components/CartPanel";
 import RegistrationService from "./components/RegistrationService";
-import PaymentSuccess from "./pages/PaymentSuccess"
-import PaymentFail from "./pages/PaymentFail"
+import PaymentSuccess from "./pages/PaymentSuccess";
+import PaymentFail from "./pages/PaymentFail";
 import Categories from "./pages/Categories";
-import { BsArrowLeft, BsArrowRight } from "react-icons/bs";
-import { useNavigate } from 'react-router-dom';
 import CheckoutDetails from "./components/CheckoutDetails";
-import {Elements} from '@stripe/react-stripe-js';
-import {loadStripe} from "@stripe/stripe-js/pure";
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js/pure";
+import ScrollOnTopOnRefresh from "./components/ScrollOnTopOnRefresh";
 
 const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY);
 
 const App = () => {
   return (
     <section className="flex flex-col min-h-screen overflow-x-hidden overflow-hidden">
       <Navbar />
-
       <main className="flex-grow">
+      <ScrollOnTopOnRefresh />
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
           <Route path="/product/:category" element={<Product />} />
           <Route path="/product/search/:search_input" element={<Product />} />
           <Route path="/product" element={<Product />} />
-          <Route path="product/:id" element={<ProductDetails />} />
+          <Route path="/product/:id" element={<ProductDetails />} />
           <Route path="/category" element={<Categories />} />
           <Route path="/:id" element={<ProductDetails />} />
           <Route path="/contact" element={<Contact />} />
           <Route path="/login" element={<Login />} />
           <Route path="/signup" element={<Signup />} />
           <Route path="/cart" element={<Cart />} />
           <Route path="/cartPanel" element={<CartPanel />} />
-          <Route path="/checkoutDetails" element={<Elements stripe={stripePromise}><CheckoutDetails /></Elements>} />
+          <Route
+            path="/checkoutDetails"
+            element={<Elements stripe={stripePromise}><CheckoutDetails /></Elements>}
+          />
           <Route path="/cartPanel" element={<CartPanel />} />
           <Route path="/checkout-success" element={<PaymentSuccess />} />
           <Route path="/checkout-fail" element={<PaymentFail />} />
@@ -55,7 +57,6 @@ const App = () => {
           <Route path="*" element={<Notfound />} />
         </Routes>
       </main>
-
       <Footer />
     </section>
   );

src/components/Footer.js

@@ -17,14 +17,14 @@ const categories = [
 ];
 
 const locations = [
-  { name: 'Bucharest', link: '/product?location=Bucharest'},
+  { name: 'București', link: '/product?location=Bucuresti'},
   { name: 'Cluj', link: '/product?location=Cluj'},
-  { name: 'Timisoara', link: '/product?location=Timisoara'},
-  { name: 'Iasi', link: '/product?location=Iasi'},
-  { name: 'Constanta', link: '/product?location=Constanta'},
+  { name: 'Timișoara', link: '/product?location=Timisoara'},
+  { name: 'Iași', link: '/product?location=Iasi'},
+  { name: 'Constanța', link: '/product?location=Constanta'},
   { name: 'Sibiu', link: '/product?location=Sibiu'},
   { name: 'Oradea', link: '/product?location=Oradea'},
-  { name: 'Brasov', link: '/product?location=Brasov'},
+  { name: 'Brașov', link: '/product?location=Brasov'},
   { name: 'Craiova', link: '/product?location=Craiova'},
 ];