Main

.env

@@ -0,0 +1 @@
+PUBLIC_KEY = FLWPUBK_TEST-8f49044c9bb98c135e81b380bc057787-X

package.json

@@ -16,11 +16,13 @@
     "bootstrap": "^5.3.2",
     "emailjs": "^4.0.3",
     "firebase": "^10.7.2",
+    "flutterwave-react-v3": "^1.3.0",
     "formik": "^2.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-email": "2.0.0",
     "react-icons": "^4.12.0",
+    "react-paystack": "^5.0.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.20.1",
     "react-toastify": "^9.1.3",

public/env.js

@@ -0,0 +1,3 @@
+window.env = {
+  "PUBLIC_KEY": "FLWPUBK_TEST-8f49044c9bb98c135e81b380bc057787-X"
+};

src/App.jsx

@@ -20,6 +20,11 @@ import Login from "./Pages/Admin/Login";
 import Add from "./Pages/Admin/Upload";
 import Orders from "./Pages/Admin/Orders";
 import Register from "./Pages/Admin/Register";
+import Books from "./Components/Books";
+import Others from "./Components/Others";
+import NewOrders from "./Components/NewOrders";
+import DeliveredOrders from "./Components/DeliveredOrders";
+import OneOrder from "./Components/OneOrder";
 // import Home from "./Components/Home";
 
 function App() {
@@ -31,7 +36,12 @@ function App() {
         <Topnav />
         <Routes>
           <Route path="/" element={<Landing />} />
-          <Route path="/shop" element={<Shop />} />
+          <Route path="/shop" element={<Shop />}>
+            <Route path="" element={<Books />} />
+            <Route path="books" element={<Books />} />
+            <Route path="others" element={<Others />} />
+            <Route path="*" element={<Books />} />
+          </Route>
           <Route path="/view/:id" element={<View />} />
           <Route path="/cart" element={<Cart />} />
           <Route path="/checkout/:id" element={<Checkout />} />
@@ -42,7 +52,12 @@ function App() {
             <Route path="dashboard">
               <Route path="" element={<Dashboard />} />
               <Route path="upload" element={<Add />} />
-              <Route path="orders" element={<Orders />} />
+              <Route path="orders" element={<Orders />} >
+                <Route path="" element={<NewOrders />} />
+                <Route path="new" element={<NewOrders />} />
+                <Route path="delivered" element={<DeliveredOrders />} />
+                <Route path=":id" element={<OneOrder />} />
+              </Route>
             </Route>
             <Route path="login" element={<Login />} />
             <Route path="registernewadmin" element={<Register />} />

src/Components/Books.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import '../Styles/Shop.css'
+import { FaCartPlus } from "react-icons/fa";
+import { Link, useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify';
+
+const Books = () => {
+    const { isFetchingBooks, books, fetchingBooksFailed } = useSelector((state)=>state.BookSlice)
+    const navigate =  useNavigate()
+    const cart = JSON.parse(localStorage.getItem('cart')) || []
+
+
+    const addOne = (e, val) => {
+        e.preventDefault()
+        console.log(val);
+        const book = books.find(el=>el.id == val)
+        // const product = products.find(el=>el.id == val)
+        if (book) {
+        cart.push(book)
+        localStorage.setItem('cart', JSON.stringify(cart))
+        toast.success(`Book added to cart`)
+        }
+    }
+
+    const find = (val) => {
+        let get = cart.find(el=>el.id == val)
+        if (get) {
+        return (
+            <button onClick={(e)=>{e.preventDefault;navigate('/cart')}} className="btn download text-white" style={{whiteSpace: 'nowrap'}}>View in cart</button>
+        )
+        } else {
+        return (
+            <button onClick={(e)=>addOne(e, val)} className="btn download text-white">
+            <FaCartPlus />
+            </button>
+        )
+        }
+    }
+  return (
+    <>
+        <div className="card-div d-flex flex-wrap justify-content-evenly gap-5 py-5">
+            {
+              books && books.map((el, i)=>(
+                <Link key={i} to={`/view/${el.id}`} className="cards d-flex flex-column gap-1 rounded-2 text-decoration-none text-dark">
+                  <div className="img position-relative h-100 rounded-1">
+                    <img src={el.data.images[Math.floor(Math.random() * el.data.images.length)]} alt="" />
+                  </div>
+                  <span className="px-2 fw-bold w-100 text-start">{el.data.title}</span>
+                  <span className="px-2 w-100 text-start">{el.data.author}</span>
+                  <div className="d-flex align-items-end justify-content-between w-100 p-1">
+                    <small className="px-2 w-100 text-start">$ {el.data.price.toLocaleString()}</small>
+                    {
+                      find(el.id)
+                    }
+
+                  </div>
+                </Link>
+              ))
+            }
+        </div>
+    </>
+  )
+}
+
+export default Books

src/Components/DeliveredOrders.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+
+const DeliveredOrders = () => {
+    const { gettingOrders, orders, gettingOrdersFailed } = useSelector(state=>state.OrderSlice)
+    const [delivered, setdelivered] = useState([])
+    const navigate = useNavigate()
+
+    useEffect(() => {
+      if (orders && orders.length > 0) {
+        const all = []
+        for (let i = 0; i < orders.length; i++) {
+            // const find = orders.find(el=> el.data.delivered == true)
+            // console.log(find);
+            console.log(orders[i]);
+            if (orders[i].data.data.delivered == true) {
+                // let findSome = orders.splice(find, 1)
+                all.push(orders[i])
+            }
+            // console.log(all);
+        }
+        // const findSome = orders.some(el=> el.data.delivered == true) 
+        console.log(all);
+        setdelivered(all)
+      }
+      console.log(delivered);
+    }, [orders])
+
+  return (
+    <>
+        <div className='h-100 w-100'>
+            <table className='w-100 mx-4 table table-striped gap-3'>
+                <thead>
+                    <tr>
+                        <td className='fw-bold h6'>Product</td>
+                        <td className='fw-bold h6'>Copies</td>
+                        <td className='fw-bold h6 '>Price</td>
+                        <td className='fw-bold h6 '>User</td>
+                    </tr>
+                </thead>
+            {
+                (delivered && delivered.length > 0) ?
+                <tbody className='w-100'>
+                    {
+                        delivered.map((el, i)=>(
+                            <tr key={i} onClick={()=>navigate(`/admin/dashboard/orders/${el.id}`)} style={{cursor: 'pointer'}}>
+                                <td className="fw-bold">
+                                    {/* {
+                                        el.data.products.map((element, index)=>(
+                                        ))
+                                    } */}
+                                    <span>{el.data.data.product.data.title || el.data.data.product.data.name}<br /></span>
+                                </td>
+                                <td className="fw-bold">
+                                    {/* {
+                                        el.data.products.map((element, index)=>(
+                                        ))
+                                    } */}
+                                    <span>{el.data.data.product.copies}<br /></span>
+                                </td>
+                                <td className=''>{el.data.data.price}</td>
+                                <td className=''>{el.data.data.name}</td>
+                            </tr>
+                        ))
+                    }
+                </tbody>:<tbody><tr><td className="h1">Nothing here</td></tr></tbody>
+            }
+            </table>
+        </div>
+    </>
+  )
+}
+
+export default DeliveredOrders

src/Components/Display.jsx

@@ -2,79 +2,46 @@ import React, { useState } from "react";
 import axios from "axios";
 import "../Styles/Shop.css";
 import { useEffect } from "react";
-import { FaCartPlus } from "react-icons/fa";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, Outlet, useNavigate } from "react-router-dom";
 // import { collection, getDocs } from "firebase/firestore";
 // import { db } from "../Firebase";
 import { useDispatch, useSelector } from "react-redux";
 import { getBooks, getProducts } from "../Services/Controls";
-import { ToastContainer } from "react-toastify";
+import { ToastContainer, toast } from "react-toastify";
 import { add } from "../Redux/cartSlice";
 
 const Display = () => {
   const { isFetchingBooks, books, fetchingBooksFailed } = useSelector((state)=>state.BookSlice)
   const { isFetchingProducts, products, fetchingProductsFailed } = useSelector((state)=>state.productSlice)
+  const [color, setcolor] = useState('left')
   const cart = JSON.parse(localStorage.getItem('cart')) || []
   const dispatch =  useDispatch()
   const navigate = useNavigate()
-
-  const addOne = (e, val) => {
-    e.preventDefault()
-    // console.log(event);
-    console.log(val);
-    const book = books.find(el=>el.id == val)
-    const product = products.find(el=>el.id == val)
-    if (book) {
-      cart.push(book)
-      localStorage.setItem('cart', JSON.stringify(cart))
-    } else if (product) {
-      cart.push(product)
-      localStorage.setItem('cart', JSON.stringify(cart))
+  const route = window.location.pathname.split('/')
+  const myLocation = route[route.length-1]
+
+  useEffect(() => {
+    if (myLocation == 'books' || '' || null) {
+      setcolor('left')
+    } else if (myLocation == 'others') {
+      setcolor('right')
     }
-  }
+  }, [myLocation])
 
   return (
     <>
       <div className="display container p-4">
         <ToastContainer />
         <div className="dd w-100 d-flex flex-column align-items-center justify-content-evenly">
-          <h4 className="text-start w-100 py-3 px-5">All items</h4>
-          <div className="card-div d-flex flex-wrap justify-content-evenly gap-5">
-            {
-              books && books.map((el, i)=>(
-                <Link key={i} to={`/view/${el.id}`} className="cards d-flex flex-column gap-1 rounded-2 text-decoration-none text-dark">
-                  <div className="img position-relative h-100 rounded-1">
-                    <img src={el.data.images[Math.floor(Math.random() * el.data.images.length)]} alt="" />
-                  </div>
-                  <span className="px-2 fw-bold w-100 text-start">{el.data.title}</span>
-                  <span className="px-2 w-100 text-start">{el.data.author}</span>
-                  <div className="d-flex align-items-end justify-content-between w-100 p-1">
-                    <small className="px-2 w-100 text-start">$ {el.data.price}</small>
-                    <button onClick={(e)=>addOne(e, el.id)} className="btn download text-white">
-                      <FaCartPlus />
-                    </button>
-                  </div>
-                </Link>
-              ))
-            }
-            {
-              products && products.map((el, i)=>(
-                <Link key={i} to={`/view/${el.id}`} className="cards d-flex flex-column gap-1 rounded-2 text-decoration-none text-dark">
-                  <div className="img position-relative h-100 rounded-1">
-                    <img src={el.data.images[Math.floor(Math.random() * el.data.images.length)]} alt="" />
-                  </div>
-                  <span className="px-2 fw-bold w-100 text-start">{el.data.name}</span>
-                  {/* <span className="px-2 w-100 text-start">{el.data.author}</span> */}
-                  <div className="d-flex align-items-end justify-content-between w-100 p-1">
-                    <small className="px-2 w-100 text-start">$ {el.data.price}</small>
-                    <button onClick={(e)=>addOne(e, el.id)} className="btn download text-white">
-                      <FaCartPlus />
-                    </button>
-                  </div>
-                </Link>
-              ))
-            }
+          {/* <h4 className="text-start w-100 py-3 px-5">All items</h4> */}
+          <div className="toggle-div">
+            <div className="d-flex align-items-stretch rounded-3 shadow-sm toggle position-relative">
+              <div className={color == 'left'? 'color w-50 position-absolute top-0 bottom-0 rounded-3 start-0': 'color w-50 position-absolute top-0 bottom-0 rounded-3 end-0'}></div>
+              <Link to={'books'} className={color == 'left'? "text-decoration-none p-2 px-4 rounded-start-3 books text-white": "text-decoration-none p-2 px-4 rounded-start-3 books"}>Books</Link>
+              <Link to={'others'} className={color == 'left'? "text-decoration-none p-2 px-4 rounded-end-3 others": "text-decoration-none p-2 px-4 rounded-end-3 others text-white"}>Others</Link>
+            </div>
           </div>
+          <Outlet />
         </div>
       </div>
     </>

src/Components/Footer.jsx

@@ -10,40 +10,34 @@ const Footer = () => {
     <>
         <footer className='footer p-5'>
             <div className="container d-flex justify-content-around align-items-start w-100 h-100 gap-5">
-                <div className='text-start'>
+                <div className='text-start d-flex flex-column gap-4'>
                     <img src={logo} width={'150px'} alt="" />
-                </div>
-                <div className='text-white '>
-                    <h4 className='py-3'>Features</h4>
-                    <div className='text-start'>
-                        <p>• Lorem, ipsum.</p>
-                        <p>• Lorem, ipsum.</p>
-                        <p>• Lorem, ipsum.</p>
-                        <p>• Lorem, ipsum.</p>
-                        <p>• Lorem, ipsum.</p>
-                    </div>
+                    <span className='text-white'>Power the future today</span>
                 </div>
                 <div className='text-white links'>
                     <h4 className='py-3'>Quick Links</h4>
                     <div className='d-flex flex-column w-100 text-start'>
-                        <Link className='text-white w-100 text-start'>Shop</Link>
-                        <Link className='text-white w-100 text-start'>Podcast</Link>
-                        <Link className='text-white w-100 text-start'>Lorem ipsum</Link>
-                        <Link className='text-white w-100 text-start'>Lorem ipsum</Link>
-                        <Link className='text-white w-100 text-start'>Lorem ipsum</Link>
+                        <Link to={'/shop'} className='text-white w-100 text-start'>Shop</Link>
+                        {/* <Link className='text-white w-100 text-start'>Podcast</Link> */}
+                        <Link to={'/cart'} className='text-white w-100 text-start'>Cart</Link>
+                        <Link to={'/admin/dashboard'} className='text-white w-100 text-start fw-normal'><small>Admin</small></Link>
+                        {/* <Link className='text-white w-100 text-start'>Lorem ipsum</Link>
+                        <Link className='text-white w-100 text-start'>Lorem ipsum</Link> */}
                     </div>
                 </div>
                 <div className='text-white follow'>
                     <h4 className='py-3'>Follow us</h4>
-                    <div className=' d-flex gap-3 w-100 text-start'>
-                        <Link className='d-flex align-items-center justify-conteent-center text-white'><FaFacebook className='icon h3' /></Link>
-                        <Link className='d-flex align-items-center justify-conteent-center text-white'><FaInstagramSquare className='icon h3' /></Link>
-                        <Link className='d-flex align-items-center justify-conteent-center text-white'><RiTwitterFill className='icon h3' /></Link>
+                    <div className=' d-flex flex-column gap-3 w-100 text-start'>
+                        <Link to={'https://instagram.com/elixir_bookss'} className='d-flex align-items-center justify-conteent-center text-white'><FaInstagramSquare className='icon h3' />&nbsp; &nbsp; @elixir_bookss</Link>
+                        <Link to={'https://instagram.com/theelixir_brand'} className='d-flex align-items-center justify-content-center text-white'><FaInstagramSquare className='icon h3' />&nbsp; &nbsp; @theelixir_brand</Link>
+                        {/* <Link className='d-flex align-items-center justify-conteent-center text-white'><RiTwitterFill className='icon h3' /></Link> */}
                     </div>
                 </div>
             </div>
+            <hr />
             <div className="text-center mt-5">
-                <span className='w-100 text-center text-white'>© 2023 The elixir brand. All rights reserved.</span>
+                <hr className='text-white' />
+                <small className='w-100 text-center text-secondary'>© 2023 The elixir brand. All rights reserved.</small>
             </div>
         </footer>
     </>