10 |
13 | );
14 | }
15 |
16 |
17 | export default Dashboard;
--------------------------------------------------------------------------------
/src/Pages/Admin/index.tsx:
--------------------------------------------------------------------------------
1 | import AddFood from "../../components/Admin/AddFood";
2 | import Dashboard from "./Dashboard";
3 | import Home from "../Home";
4 | import { useStateValue } from "../../context/StateProvider";
5 | import { isAdmin } from "../../utils/functions";
6 |
7 | const Admin = () => {
8 | const [{user}] = useStateValue()
9 | return (
10 | <>
11 | {isAdmin(user) ?
52 |
114 |
53 |
113 |
55 |
111 |
112 |
56 |
108 |
57 |
107 |
59 |
105 |
106 |
54 |
58 | toast.warn("GitHub Signin is not available yet", {
59 | autoClose: 2000,
60 | icon: (
61 |
70 | AUTH({ provider: GOOGLE_PROVIDER })}
74 | >
75 |
78 |
79 | );
80 | };
81 |
82 | export const ImageBox = () => {
83 | return (
84 |
85 |
97 | );
98 | };
99 |
100 | export default ProviderAuth;
101 |
--------------------------------------------------------------------------------
/src/Pages/Home/index.tsx:
--------------------------------------------------------------------------------
1 | import { FruitsSection, MenuSection, ShowcaseBanner, } from "../../components"
2 |
3 | const Home = () => {
4 | return (
5 |
6 |
11 |
12 | )
13 | }
14 |
15 | export default Home
--------------------------------------------------------------------------------
/src/Pages/Menu/index.tsx:
--------------------------------------------------------------------------------
1 | import { MenuSection } from "../../components";
2 |
3 | const Menu = () => {
4 | return (
5 |
6 |
9 | );
10 | }
11 |
12 | export default Menu;
--------------------------------------------------------------------------------
/src/Pages/Profile/index.tsx:
--------------------------------------------------------------------------------
1 | import { BiUser } from "react-icons/bi";
2 | import { BsPhone } from "react-icons/bs";
3 | import {
4 | MdOutlineDataSaverOn,
5 | MdDeleteOutline,
6 | } from "react-icons/md";
7 |
8 | import { motion } from "framer-motion";
9 | import { toast } from "react-toastify";
10 | import { useState } from "react";
11 | import { useStateValue } from "../../context/StateProvider";
12 | import { AssetUploader, Loader } from "../../components";
13 | import { updateUserData } from "../../utils/functions";
14 | import { firebaseRemoveUploadedImage } from "../../Firebase";
15 |
16 |
17 | const UpdateProfile = () => {
18 | const [{ user }, dispatch] = useStateValue();
19 | const [displayName, setDisplayName] = useState(user.displayName)
20 | // const [email, setEmail] = useState(user.email)
21 | const [photoURL, setPhotoURL] = useState(user.photoURL)
22 | const [loading, setLoading] = useState(false)
23 | const [phoneNumber, setPhoneNumber] = useState(user.phoneNumber)
24 | const [btnText, setBtnText] = useState("Save")
25 | const [loaderMessage, setLoadermessage] = useState("");
26 |
27 | const deleteImage = async () => {
28 | setLoadermessage("Removing Photo......");
29 | firebaseRemoveUploadedImage(photoURL, setPhotoURL, setLoading);
30 | const data = { ...user, photoURL: null };
31 | await updateUserData(data, dispatch, false);
32 | };
33 | const saveChanges = async () => {
34 | setBtnText("Saving....");
35 | if(displayName.lenth < 0 || phoneNumber.length !== 10)
36 | {
37 | toast.error("Fill out fields correctly")
38 | setBtnText("Save")
39 | }else{
40 | const data = {
41 | ...user,
42 | displayName,
43 | phoneNumber,
44 | photoURL,
45 | }
46 | await updateUserData(data, dispatch, true);
47 | setBtnText("Save");
48 | }
49 |
50 | };
51 |
52 | const updatePhotoUrl = async (newUrl: string) => {
53 | setPhotoURL(newUrl);
54 | const data = { ...user, photoURL: newUrl };
55 | await updateUserData(data, dispatch, false)
56 | }
57 |
58 | const validateNumber = (value: any) => {
59 | if (isNaN(value)) {
60 | toast.error("Please enter a valid phone number", { toastId: 123 });
61 | return "";
62 | }
63 | return value;
64 | };
65 |
66 |
67 |
68 | return (
69 |
70 |
145 | );
146 | };
147 |
148 | export default UpdateProfile;
149 |
--------------------------------------------------------------------------------
/src/Pages/Services/index.tsx:
--------------------------------------------------------------------------------
1 | const Services = () => {
2 | return (
3 |
71 |
144 |
72 |
83 |
84 |
85 |
97 |
86 |
96 |
98 | {
99 | loading ? (
100 |
133 |
134 |
106 | 
111 | deleteImage()}
117 | >
118 |
120 |
121 |
122 | ) : (
123 |
135 | saveChanges()}
139 | >
140 |
142 |
143 |
4 |
6 | );
7 | }
8 |
9 | export default Services;
--------------------------------------------------------------------------------
/src/Pages/index.tsx:
--------------------------------------------------------------------------------
1 |
2 | export {default as Home } from './Home';
3 | export {default as Admin} from './Admin';
4 | export {default as Login} from './Auth/Login';
5 | export {default as Signup} from './Auth/Register';
6 | export {default as Profile} from './Profile'
7 | export {default as About} from './About';
8 | export {default as Services} from './Services';
9 | export {default as Menu} from './Menu';
--------------------------------------------------------------------------------
/src/components/Admin/AddFood/CategoriesSelector.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | export type FoodCategory = {
3 | id: number;
4 | name: string;
5 | urlParam: string;
6 | };
7 |
8 | export type FoodCategories = FoodCategory[];
9 |
10 | interface Props {
11 | categories: FoodCategories;
12 | action: any;
13 | selected: string;
14 | }
15 | const CategoriesSelector: React.FCServices Page Cominig Up soon!!
5 |
104 |
224 | );
225 | };
226 |
227 | export default AddFood;
228 |
--------------------------------------------------------------------------------
/src/components/Admin/Content.tsx:
--------------------------------------------------------------------------------
1 | import { FaShopify } from "react-icons/fa";
2 | import { Link } from "react-router-dom";
3 | import { useStateValue } from "../../context/StateProvider";
4 | import { ToggleAdminMode } from "../../utils/functions";
5 |
6 | const Content = ({ pageTitle, Element }: { pageTitle: string, Element:JSX.Element }) => {
7 | const [{}, dispatch] = useStateValue();
8 | return (
9 |
105 |
223 |
106 |
117 |
118 |
119 |
140 |
120 |
127 |
128 |
139 |
141 | {loading ? (
142 |
174 |
148 | 
153 | deleteImage()}
159 | >
160 |
162 |
163 |
164 | ) : (
165 |
175 |
200 |
176 |
187 |
188 |
199 |
201 |
212 |
213 |
214 | saveItem()}
218 | >
219 |
221 |
222 |
10 |
24 | );
25 | };
26 | export default Content;
--------------------------------------------------------------------------------
/src/components/Admin/Dashboard/CategoryCards.tsx:
--------------------------------------------------------------------------------
1 | import { Categories } from "../../../utils/categories"
2 | const CategoryCards = () => {
3 | let category = Categories[Math.floor(Math.random() * Categories.length)];
4 | return (
5 |
11 | {pageTitle}
12 |
13 | {/* home button */}
14 | ToggleAdminMode(dispatch, false)}>
15 |
19 |
20 |
21 | {Element}
22 |
23 |
6 | {/* Catgory card */}
7 |
8 |
9 | )
10 | }
11 |
12 | export default CategoryCards
--------------------------------------------------------------------------------
/src/components/Admin/Dashboard/index.tsx:
--------------------------------------------------------------------------------
1 | import CategoryCards from "./CategoryCards";
2 |
3 | const Dashboard = () => {
4 | return (
5 |
6 |
13 | );
14 | };
15 |
16 | export default Dashboard;
17 |
--------------------------------------------------------------------------------
/src/components/Admin/Menu/index.tsx:
--------------------------------------------------------------------------------
1 | import { FaSearch } from "react-icons/fa";
2 | import { FoodItem } from "../../../../types";
3 | import { SingleFoodItem } from "../../FoodItem";
4 | import React, { useState } from "react";
5 | import { useStateValue } from "../../../context/StateProvider";
6 |
7 | const Menu = () => {
8 | const [{ foodItems }, dispatch] = useStateValue();
9 | const [query, setQuery] = useState("");
10 | const [filteredFoodItems, setFilteredFoodItems] = useState
7 |
12 |
26 | {/* search bar */}
27 |
48 | );
49 | };
50 |
51 | export default Menu;
52 |
--------------------------------------------------------------------------------
/src/components/Admin/Sidenav.tsx:
--------------------------------------------------------------------------------
1 | import { Logo } from "../Assets";
2 | import SidenavMenu from "./SidenavMenu";
3 | import { Link, useNavigate } from "react-router-dom";
4 | import { AiFillLock } from "react-icons/ai";
5 | import { useStateValue } from "../../context/StateProvider";
6 | import { logout, ToggleAdminMode } from "../../utils/functions";
7 | import { motion } from "framer-motion";
8 | const Sidenav = ({
9 | activePage,
10 | setActivePage,
11 | setPageContent,
12 | }: {
13 | activePage: string;
14 | setActivePage: any;
15 | setPageContent: any;
16 | }) => {
17 | return (
18 |
28 | searchFood(e)}
34 | />
35 | {/* search button */}
36 |
39 |
40 |
41 | {
42 | filteredFoodItems.map((item: FoodItem) => (
43 |
47 |
19 |
27 | );
28 | };
29 |
30 | const SidenavHeader = () => {
31 | const [{ adminMode }, dispatch] = useStateValue();
32 | return (
33 | 47 | Bentilzone 48 |
49 | 50 |Logout
68 | Orders
63 | }
64 | />
65 | Settings
81 | }
82 | />
83 | {svgIcon}
115 |{title}
116 | {
117 | (title === "Menu" || title === "Users") && (
118 |
128 |
119 |
125 | )
126 | }
127 | 120 | { 121 | title === "Menu"? foodItems.length:users.length 122 | } 123 |
124 |
26 | {/* search bar */}
27 |
50 | );
51 | };
52 |
53 | export default Users;
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/components/Admin/Users/user.tsx:
--------------------------------------------------------------------------------
1 | import { MdDeleteForever, MdEmail } from "react-icons/md";
2 | import { GiShieldDisabled } from "react-icons/gi";
3 | import { Avatar } from "../../Assets";
4 | import { FcGoogle } from "react-icons/fc";
5 | import {motion} from "framer-motion";
6 | const User = ({item}: {item:any}) => {
7 | return (
8 |
28 | searchUsers(e)}
34 | />
35 | {/* search button */}
36 |
39 |
40 |
41 | {/* dasboard statistics and counts */}
42 |
43 | {
44 | filteredUsers.map((user:any) => (
45 |
49 |
9 |
44 | )
45 | }
46 |
47 | export default User
--------------------------------------------------------------------------------
/src/components/Assets/index.tsx:
--------------------------------------------------------------------------------
1 | import AvatarI from "../../img/avatar.png";
2 | import Cheff1I from "../../img/chef1.png";
3 | import CheffI from "../../img/cheff.png";
4 | import LogoI from "../../img/chef1.png";
5 | import BikeDeliveryI from "../../img/delivery.png";
6 | import HeroBgI from "../../img/hero-bg.png";
7 | import EmptyCartI from "../../img/emptyCart.svg";
8 | import NotFoundI from "../../img/NotFound.svg";
9 | import Visa from "../../img/visa.png";
10 | import Momo from "../../img/momo.png";
11 | // Showcase Banner Static Assets
12 | import IcreamI from "../../img/i1.png";
13 | import StrawberryI from "../../img/f5.png";
14 | import ChickenI from "../../img/c3.png";
15 | import FishI from "../../img/fi3.png";
16 |
17 |
18 |
19 | // Exports
20 | export const Logo = LogoI
21 | export const Avatar = AvatarI
22 | export const Cheff = CheffI
23 | export const Cheff1 = Cheff1I
24 | export const BikeDelivery = BikeDeliveryI
25 | export const HeroBg = HeroBgI
26 | export const Icecream = IcreamI
27 | export const Strawberry = StrawberryI
28 | export const Chicken = ChickenI
29 | export const Fish = FishI
30 | export const EmptyCartImg = EmptyCartI
31 | export const NotFoundImg = NotFoundI
32 | export const CreditCard = Visa
33 | export const MOMO = Momo
--------------------------------------------------------------------------------
/src/components/Cart/Body.tsx:
--------------------------------------------------------------------------------
1 | import CartItem from './Item'
2 | import CartTotal from './CartTotal'
3 | import { useStateValue } from '../../context/StateProvider';
4 |
5 | const CartBody = ({action}:{action:any}) => {
6 | const [{cartItems}] = useStateValue();
7 | return (
8 |
10 |
24 | {
25 | item?.providerId !== 'google.com' ?
28 |
43 |
17 |
23 | 18 | {item?.displayName || 'User'} 19 |
20 | {item?.email} 21 | {item?.phoneNumber} 22 |
29 |
42 |
33 |
39 |
9 |
18 | )
19 | }
20 |
21 | export default CartBody
--------------------------------------------------------------------------------
/src/components/Cart/CartTotal.tsx:
--------------------------------------------------------------------------------
1 | import {motion} from 'framer-motion'
2 | import { useStateValue } from '../../context/StateProvider';
3 |
4 | const CartTotal = ({checkoutState}: {checkoutState:any}) => {
5 | const [{cartTotal}] = useStateValue();
6 | return (
7 |
10 | {
11 | cartItems && cartItems.length > 0 && cartItems.map((item:any, index:number) => {
12 | return
16 |
8 | checkoutState(true)} whileTap={{scale:0.8}} className='w-full p-2 rounded-full bg-gradient-to-tr from-orange-400 to-orange-600 text-gray-50 text-lg my-2 hover:shadow-lg'>
25 | Checkout ₵{cartTotal}
26 |
27 |
28 |
29 | )
30 | }
31 |
32 | export default CartTotal
--------------------------------------------------------------------------------
/src/components/Cart/Header.tsx:
--------------------------------------------------------------------------------
1 | import { BiRefresh } from "react-icons/bi";
2 | import { MdLogin, MdOutlineKeyboardBackspace } from "react-icons/md";
3 | import { motion } from "framer-motion";
4 | import { MdShoppingBasket } from "react-icons/md";
5 | import { useStateValue } from "../../context/StateProvider";
6 | import { emptyCart, hideCart } from "../../utils/functions";
7 | import { Link } from "react-router-dom";
8 | const CartHeader = () => {
9 | const [{ user, cartItems, foodItems }, dispatch] = useStateValue();
10 |
11 | return (
12 |
9 |
13 | Sub Total
10 |-
11 |₵ {cartTotal}
12 |
14 |
18 |
19 | Delivery
15 |-
16 |₵ {0.00}
17 |
20 |
24 | Total
21 |-
22 |₵ {cartTotal}
23 |
13 | hideCart(dispatch)}>
14 |
16 |
17 | emptyCart(cartItems, foodItems, dispatch)}
27 | className="flex items-center justify-center gap-2 p-1 px-2 my-2 bg-cardOverlay rounded-md hover:shadow-sm text-textColor text-base"
28 | >
29 | clear
31 | ) : (
32 | hideCart(dispatch)}>
33 |
38 |
40 |
41 | )}
42 |
43 | );
44 | };
45 |
46 | export default CartHeader;
47 |
--------------------------------------------------------------------------------
/src/components/Cart/Item.tsx:
--------------------------------------------------------------------------------
1 | import { BiMinus, BiPlus } from "react-icons/bi";
2 |
3 | import { MdDelete } from "react-icons/md";
4 | import { motion } from "framer-motion";
5 | import { cartItem } from "../../../types";
6 | import { deleteCartItem, getFoodyById, updateCartItemQty } from "../../utils/functions";
7 | import { useStateValue } from "../../context/StateProvider";
8 |
9 | const CartItem = ({ item }: { item: cartItem }) => {
10 | const [{ foodItems, cartItems }, dispatch] = useStateValue();
11 | const { id, fid, qty } = item;
12 | const foodItem = getFoodyById(foodItems, fid);
13 |
14 | return (
15 |
18 | Cart
19 |
21 |
22 | {user ? (
23 |
16 | deleteCartItem(cartItems, foodItems, item, dispatch)}
55 | >
56 |
58 |
59 | );
60 | };
61 |
62 | export default CartItem;
63 |
--------------------------------------------------------------------------------
/src/components/Cart/index.tsx:
--------------------------------------------------------------------------------
1 | import { useStateValue } from "../../context/StateProvider";
2 | import CartBody from "./Body";
3 | import CarttHeader from "./Header";
4 | import { motion } from "framer-motion";
5 | import EmptyCart from "../EmptyCart";
6 | import NotFound from "../NotFound";
7 | import Checkout from "../Checkout";
8 | import { useState } from "react";
9 | const Cart = () => {
10 | const [{ cartItems }] = useStateValue();
11 | const [checkoutOpen, setCheckoutOpen] = useState(false);
12 | return (
13 | <>
14 | {checkoutOpen ? (
15 |
17 | 
22 |
23 |
30 |
31 |
24 |
29 | {foodItem?.title}
25 |26 | ₵ {foodItem?.price} 27 |
28 |
32 | 1 ? () => updateCartItemQty(cartItems, foodItems, item, dispatch, -1) : () => {}}
36 | >
37 |
39 | updateCartItemQty(cartItems, foodItems, item, dispatch, 1)}
46 | >
47 |
49 |
50 |
51 | 40 | {qty} 41 |
42 |
29 |
31 | )}
32 |
9 | action(false)}>
10 |
12 |
17 |
19 |
24 |
27 |
28 | );
29 | };
30 |
31 | export default Header;
32 |
--------------------------------------------------------------------------------
/src/components/Checkout/Selector.tsx:
--------------------------------------------------------------------------------
1 | import { useStateValue } from "../../context/StateProvider";
2 | import { CreditCard, MOMO } from "../Assets";
3 | const Selector = () => {
4 | const [{paymentMethod}, dispatch] = useStateValue();
5 | const setPaymentMethod = (method:string) => {
6 | dispatch({
7 | type: "SET_PAYMENT_METHOD",
8 | paymentMethod: method,
9 | });
10 | }
11 | return (
12 | Secured Payment
18 |
13 |
54 | );
55 | };
56 |
57 | export default Selector;
58 |
--------------------------------------------------------------------------------
/src/components/Checkout/body.tsx:
--------------------------------------------------------------------------------
1 | import { BiLock } from "react-icons/bi";
2 | import CardForm from "./forms/Card";
3 | import CheckoutFooter from "./footer";
4 | import MomoForm from "./forms/Momo";
5 | import Selector from "./Selector";
6 | import { motion } from "framer-motion";
7 | import { useStateValue } from "../../context/StateProvider";
8 | import { emptyCart } from "../../utils/functions";
9 | import { useState } from "react";
10 | import { ImSpinner3 } from "react-icons/im";
11 | import { toast } from "react-toastify";
12 |
13 | const Body = ({ action }: { action: any }) => {
14 | const [{ checkoutData, cartTotal, paymentMethod, cartItems, foodItems }, dispatch] =
15 | useStateValue();
16 | const [loading, setLoading] = useState(false);
17 |
18 | const completePayment = () => {
19 | if(!checkoutData) return toast.error("Complete payment info")
20 | setLoading(true);
21 | setTimeout(async () => {
22 | setLoading(false);
23 | await emptyCart(cartItems, foodItems, dispatch);
24 | action(false);
25 | toast.success("Order completed successfuly with payment. Thank you for your patronage.", {
26 | position: "top-center",
27 | autoClose: 6000
28 | });
29 | }, 3000);
30 | };
31 | return (
32 |
18 |
32 |
33 |
38 |
52 |
53 |
33 | {/* Payment Selectors */}
34 |
63 | );
64 | };
65 |
66 | export default Body;
67 |
--------------------------------------------------------------------------------
/src/components/Checkout/footer.tsx:
--------------------------------------------------------------------------------
1 | import { BsShieldLock } from "react-icons/bs";
2 |
3 | const CheckoutFooter = () => {
4 | return (
5 |
37 | {paymentMethod === "mobile_money" ?
61 |
39 |
44 | {/* pay now button */}
45 |
46 | 40 | Amount Due:{" "} 41 | {`GH₵${cartTotal}`}{" "} 42 |
43 |
47 |
52 | {!loading &&
59 |
60 |
6 |
13 | );
14 | };
15 |
16 | export default CheckoutFooter;
17 |
--------------------------------------------------------------------------------
/src/components/Checkout/forms/Card.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const CardForm = () => {
4 | return (
5 |
7 |
12 | 9 | Secured by BENSTACK 10 |
11 |
6 |
69 | )
70 | }
71 |
72 | export default CardForm
--------------------------------------------------------------------------------
/src/components/Checkout/forms/Momo.tsx:
--------------------------------------------------------------------------------
1 | import { useStateValue } from "../../../context/StateProvider";
2 |
3 | const MomoForm = () => {
4 | const [{checkoutData}, dispatch] = useStateValue();
5 | const updateCheckoutData = (key:string, val:string) => {
6 | dispatch({
7 | type: "UPDATE_CHECKOUT_DATA",
8 | checkoutData: {
9 | ...checkoutData,
10 | [key]:val
11 | }
12 | });
13 | }
14 | return (
15 |
7 |
13 |
20 |
21 |
22 |
28 |
35 |
36 |
37 |
68 |
38 |
44 |
51 |
52 |
53 |
59 |
66 |
67 |
16 |
67 | )
68 | }
69 |
70 | export default MomoForm
--------------------------------------------------------------------------------
/src/components/Checkout/index.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import Body from "./body";
3 | import Header from "./Header";
4 | const Checkout = ({handler}: {handler: any}) => {
5 | return (
6 |
17 |
23 |
34 |
35 |
36 |
42 |
49 |
50 |
51 |
57 | updateCheckoutData("phone", e.target.value)}
64 | />
65 |
66 |
21 | 
22 |