setModalVisible(false)} />
77 | )}
78 |
79 | );
80 | }
81 |
82 | export default MenuScreen;
83 |
--------------------------------------------------------------------------------
/client/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import { Provider } from 'react-redux';
4 | import { RouterProvider, createBrowserRouter } from 'react-router-dom';
5 |
6 | // Import App
7 | import App from './App.jsx';
8 | import './index.css';
9 | import store from './redux/store.js';
10 |
11 | // Import Screens
12 | import AboutScreen from './screens/AboutScreen.jsx';
13 | import AdminDashboardScreen from './screens/Admin/AdminDashboardScreen.jsx';
14 | import AdminLoginScreen from './screens/Admin/AdminLoginScreen.jsx';
15 | import AdminRegisterScreen from './screens/Admin/AdminRegisterScreen.jsx';
16 | import HomeScreen from './screens/HomeScreen.jsx';
17 | import MenuScreen from './screens/MenuScreen.jsx';
18 | import CheckoutScreen from './screens/User/CheckoutScreen.jsx';
19 | import ForgetPasswordScreen from './screens/User/ForgetPasswordScreen.jsx';
20 | import ProfileScreen from './screens/User/ProfileScreen.jsx';
21 | import UserCreateCustomPizzaScreen from './screens/User/UserCreateCustomPizzaScreen.jsx';
22 | import UserLoginScreen from './screens/User/UserLoginScreen.jsx';
23 | import UserOrdersScreen from './screens/User/UserOrdersScreen.jsx';
24 | import UserRegisterScreen from './screens/User/UserRegisterScreen.jsx';
25 |
26 | // Create Router
27 | const router = createBrowserRouter([
28 | {
29 | path: '/',
30 | element:
92 |
93 |
95 |
96 | );
97 |
--------------------------------------------------------------------------------
/client/src/components/ui/Cart/CartModal/CartItemList.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { FaMinus, FaPlus, FaTrash } from 'react-icons/fa';
3 | import { useDispatch, useSelector } from 'react-redux';
4 |
5 | // Import Thunks
6 | import { addToCart, removeFromCart } from '../../../../redux/slices/cartSlice';
7 |
8 | // Import Components
9 | import Button from '../../Button';
10 |
11 | function CartItemList() {
12 | const dispatch = useDispatch();
13 |
14 | const cart = useSelector((state) => state.cart);
15 | const { cartItems } = cart;
16 |
17 | // State to manage item quantities
18 | const [itemQuantities, setItemQuantities] = useState({});
19 |
20 | // Function to update item quantity
21 | const updateQuantity = (itemId, quantity) => {
22 | setItemQuantities({
23 | ...itemQuantities,
24 | [itemId]: quantity,
25 | });
26 | };
27 |
28 | return (
29 | <>
30 | {cartItems.map((item) => (
31 |
35 |
36 |
37 |
{item.name}
38 |
39 | Price: ${item.price} | Size:{' '}
40 | {item.size.charAt(0).toUpperCase() + item.size.slice(1)}
41 |
42 |
43 |
{
46 | const newQuantity =
47 | (itemQuantities[item._id] || item.qty) - 1;
48 | if (newQuantity >= 1) {
49 | dispatch(addToCart({ id: item._id, qty: newQuantity }));
50 | updateQuantity(item._id, newQuantity);
51 | }
52 | }}
53 | >
54 |
56 |
Qty: {item.qty}
57 |
{
60 | const newQuantity =
61 | (itemQuantities[item._id] || item.qty) + 1;
62 | if (newQuantity <= 10) {
63 | dispatch(addToCart({ id: item._id, qty: newQuantity }));
64 | updateQuantity(item._id, newQuantity);
65 | }
66 | }}
67 | >
68 |
70 |
71 |
72 |
dispatch(removeFromCart(item._id))}
76 | >
77 |
79 |
80 |
Total: ${item.price * item.qty}
81 |
26 |
setDropIsOpen(!dropIsOpen)}
29 | className="text-black hover:text-orange-500 border-2 border-orange-500 rounded-full inline-flex items-center p-2 focus:outline-none"
30 | >
31 |
34 | {dropIsOpen && (
35 |
36 | {adminUserInfo && (
37 |
66 |
69 |
70 | )}
71 |
69 |
All Staff
70 | {loading ? (
71 |
72 | ) : (
73 | <>
74 | {(adminUserListError ||
75 | adminUserDeleteByIdError ||
76 | adminUserUpdateProfileByIdError) && (
77 |
78 | {adminUserListError ||
79 | adminUserDeleteByIdError ||
80 | adminUserUpdateProfileByIdError}
81 |
82 | )}
83 | {successMessageDelete ||
84 | (successMessageUpdate && (
85 |
{successMessageDelete || successMessageUpdate}
86 | ))}
87 |
88 | {adminUserList.length > 0 ? (
89 |
95 | ) : (
96 |
97 | No Staff Found..
98 |
99 | )}
100 |
101 |
102 | )}
103 |
{
89 | if (window.rzp1) {
90 | window.rzp1.open();
91 | }
92 | }}
93 | >
94 | Pay Now
95 |
96 | );
97 | }
98 |
99 | RazorPayPaymentButton.propTypes = {
100 | amount: PropTypes.number.isRequired,
101 | orderId: PropTypes.string.isRequired,
102 | };
103 |
104 | export default RazorPayPaymentButton;
105 |
--------------------------------------------------------------------------------
/client/src/components/ui/Auth/ForgetPassword/OTPForm.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useState, useEffect } from 'react';
3 | import { useDispatch, useSelector } from 'react-redux';
4 |
5 | // Import Thunks
6 | import { setPasswordResetOTP } from '../../../../redux/slices/userSlice';
7 | import { forgotPassword } from '../../../../redux/asyncThunks/userThunks';
8 |
9 | // Import Components
10 | import Button from '../../Button';
11 | import Loader from '../../Loader';
12 | import Message from '../../Message';
13 |
14 | function OTPForm({ setCurrentStep }) {
15 | const [otp, setOtp] = useState('');
16 |
17 | const dispatch = useDispatch();
18 |
19 | const user = useSelector((state) => state.user);
20 | const { loading, userPasswordResetEmail, userForgotPasswordError } = user;
21 |
22 | const submitHandler = (e) => {
23 | e.preventDefault();
24 | dispatch(setPasswordResetOTP(otp));
25 | setInterval(() => {
26 | setCurrentStep('PasswordForm');
27 | }, 1000);
28 | };
29 |
30 | useEffect(() => {
31 | if (userForgotPasswordError) {
32 | setInterval(() => {
33 | setCurrentStep('EmailForm');
34 | }, 1000);
35 | }
36 | }, [userForgotPasswordError, setCurrentStep]);
37 |
38 | return (
39 | <>
40 | {loading ? (
41 |
42 |
44 | ) : (
45 |
97 | )}
98 |
99 | );
100 | }
101 |
102 | OTPForm.propTypes = {
103 | setCurrentStep: PropTypes.func.isRequired,
104 | };
105 |
106 | export default OTPForm;
107 |
--------------------------------------------------------------------------------
/client/src/screens/Admin/AdminDashboardScreen.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import {
3 | FaBoxes,
4 | FaClipboardList,
5 | FaHome,
6 | FaPizzaSlice,
7 | FaUser,
8 | FaUsers,
9 | } from 'react-icons/fa';
10 | import { useDispatch, useSelector } from 'react-redux';
11 | import { useNavigate } from 'react-router-dom';
12 |
13 | // Import Thunks
14 | import { listAdminUsers } from '../../redux/asyncThunks/adminThunks';
15 | import { listOrders } from '../../redux/asyncThunks/orderThunks';
16 | import { listPizzas } from '../../redux/asyncThunks/pizzaThunks';
17 | import { listUsers } from '../../redux/asyncThunks/userThunks';
18 | import { listInventory } from '../../redux/asyncThunks/inventoryThunks';
19 |
20 | // Import Components
21 | import MainContent from '../../components/ui/Admin/Dashboard/MainContent';
22 | import SideBar from '../../components/ui/Admin/Dashboard/SideBar/SideBar';
23 |
24 | function AdminDashboardScreen() {
25 | const menuItems = [
26 | {
27 | name: 'Home',
28 | icon:
93 | {adminUserInfo ? (
94 | <>
95 | {collapsible && (
96 |
115 | );
116 | }
117 |
118 | export default AdminDashboardScreen;
119 |
--------------------------------------------------------------------------------
/client/src/components/ui/Auth/UserLoginForm.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { Link } from 'react-router-dom';
4 |
5 | import Button from '../Button';
6 | import Loader from '../Loader';
7 | import Message from '../Message';
8 |
9 | import { loginUser } from '../../../redux/asyncThunks/userThunks';
10 |
11 | function UserLoginForm() {
12 | const [email, setEmail] = useState('');
13 | const [password, setPassword] = useState('');
14 |
15 | const dispatch = useDispatch();
16 |
17 | const user = useSelector((state) => state.user);
18 | const { loading, userLoginError } = user;
19 |
20 | const handleLogin = (e) => {
21 | e.preventDefault();
22 | dispatch(loginUser({ email, password }));
23 | };
24 |
25 | const forgetPwdHandler = () => {
26 | console.log('Forget Password');
27 | };
28 |
29 | return (
30 | <>
31 | {loading ? (
32 |
33 |
35 | ) : (
36 |
102 | )}
103 |
104 | );
105 | }
106 |
107 | export default UserLoginForm;
108 |
--------------------------------------------------------------------------------
/client/src/components/ui/Admin/Auth/LoginForm.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { Link } from 'react-router-dom';
4 |
5 | import Button from '../../Button';
6 | import Loader from '../../Loader';
7 | import Message from '../../Message';
8 |
9 | import { loginAdmin } from '../../../../redux/asyncThunks/adminThunks';
10 |
11 | function AdminLoginForm() {
12 | const [email, setEmail] = useState('');
13 | const [password, setPassword] = useState('');
14 |
15 | const dispatch = useDispatch();
16 |
17 | const admin = useSelector((state) => state.admin);
18 | const { loading, adminUserLoginError } = admin;
19 |
20 | const handleLogin = (e) => {
21 | e.preventDefault();
22 | dispatch(loginAdmin({ email, password }));
23 | };
24 |
25 | const forgetPwdHandler = () => {
26 | console.log('Forget Password');
27 | };
28 |
29 | return (
30 | <>
31 | {loading ? (
32 |
33 |
35 | ) : (
36 |
102 | )}
103 |
104 | );
105 | }
106 |
107 | export default AdminLoginForm;
108 |
--------------------------------------------------------------------------------
/client/src/components/ui/Admin/Dashboard/Lists/PizzasList.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 |
4 | // Import Thunks
5 | import {
6 | deletePizzaById,
7 | listPizzas,
8 | } from '../../../../../redux/asyncThunks/pizzaThunks';
9 |
10 | // Import Components
11 | import Loader from '../../../Loader';
12 | import Message from '../../../Message';
13 | import Table from '../Table';
14 |
15 | function PizzasList() {
16 | const pizzaColumns = ['_id', 'name', 'price', 'size'];
17 |
18 | const dispatch = useDispatch();
19 |
20 | const pizza = useSelector((state) => state.pizza);
21 | const {
22 | loading,
23 | pizzaList,
24 | pizzaListError,
25 | pizzaDeleteByIdError,
26 | pizzaDeleteByIdSuccess,
27 | } = pizza;
28 |
29 | const handleDelete = (id) => {
30 | dispatch(deletePizzaById(id)).then(() => dispatch(listPizzas({})));
31 | };
32 |
33 | const successMessageDelete = pizzaDeleteByIdSuccess && {
34 | status: '200',
35 | message: 'pizza Deleted Successfully!',
36 | };
37 |
38 | const PizzaByAdmin = pizzaList.filter((pizza) => pizza.createdBy === 'admin');
39 | const customPizzas = pizzaList.filter((pizza) => pizza.createdBy === 'user');
40 |
41 | useEffect(() => {
42 | if (!pizzaList) {
43 | dispatch(listPizzas({}));
44 | }
45 | }, [dispatch, pizzaList]);
46 |
47 | return (
48 |
49 |
All pizzas
50 | {loading ? (
51 |
52 | ) : (
53 | <>
54 | {(pizzaListError || pizzaDeleteByIdError) && (
55 |
{pizzaListError || pizzaDeleteByIdError}
56 | )}
57 | {successMessageDelete &&
{successMessageDelete} }
58 |
59 | {pizzaList.length > 0 ? (
60 | <>
61 | {PizzaByAdmin.length > 0 ? (
62 |
63 |
64 | Pizzas By Admin
65 |
66 |
71 |
72 | ) : (
73 |
74 | No Pizzas Created By Admin Found..
75 |
76 | )}
77 | {customPizzas.length > 0 ? (
78 |
79 |
80 | Custom Pizzas
81 |
82 |
87 |
88 | ) : (
89 |
90 | No Custom Pizzas Found..
91 |
92 | )}
93 |
94 | ) : (
95 |
96 | No Pizzas Found..
97 |
98 | )}
99 |
100 |
101 | )}
102 |
50 |
All Stocks
51 | {loading ? (
52 |
53 | ) : (
54 | <>
55 | {(inventoryListError || inventoryDeleteByIdError) && (
56 |
{inventoryListError || inventoryDeleteByIdError}
57 | )}
58 | {successMessageDelete &&
{successMessageDelete} }
59 |
60 | {inventoryList ? (
61 | <>
62 |
63 |
64 | All Bases
65 |
66 |
72 |
73 |
74 |
75 | All Cheeses
76 |
77 |
83 |
84 |
85 |
86 | All Sauces
87 |
88 |
94 |
95 |
96 |
97 | All Veggies
98 |
99 |
105 |
106 |
107 | ) : (
108 |
109 | No Stock Found..
110 |
111 | )}
112 |
113 |
114 | )}
115 |
48 |
e.stopPropagation()}
51 | >
52 |
53 |
54 |
57 |
61 |
63 |
64 | {loading ? (
65 |
66 | ) : (
67 | <>
68 | {(cartAddItemError || cartRemoveItemError) && (
69 |
{cartAddItemError || cartRemoveItemError}
70 | )}
71 | {cartItems && cartItems.length > 0 ? (
72 |
73 |
74 |
75 |
76 | Total Cost: $
77 | {cartItems
78 | .reduce((acc, item) => acc + item.qty * item.price, 0)
79 | .toFixed(2)}
80 |
81 |
82 | *Shipping and taxes calculated at checkout
83 |
84 |
85 |
86 | By proceeding to checkout, you agree to our Terms of Service
87 | and Privacy Policy.
88 |
89 |
90 | You also agree that your order will be handled by our third
91 | party payment processor.
92 |
93 |
99 |
102 |
103 |
104 | ) : (
105 |
Your Cart is Empty!
106 | )}
107 |
108 | )}
109 |
110 |
70 | {loading || orderLoading ? (
71 | {userDetailsError || orderListByUserIdError}
74 | ) : (
75 | userDetails && (
76 | <>
77 |
78 |
79 | {isEditing ? 'Edit Profile' : 'Your Profile'}
80 |
81 | {isEditing ? (
82 |
83 | ) : (
84 | <>
85 | {successMessage &&
{successMessage} }
86 |
87 |
88 | )}
89 | {!isEditing && (
90 |
setIsEditing(!isEditing)}
94 | >
95 | Edit Profile
96 |
97 | )}
98 |
100 | {orderListByUserId.length > 0 ? (
101 | <>
102 |
103 | My Orders
104 |
105 |
106 |
107 | ) : (
108 |
109 | No Orders Found!
110 |
111 | )}
112 |
117 | {modalVisible && (
118 | setModalVisible(false)} />
119 | )}
120 |
121 | );
122 | }
123 |
124 | export default ProfileScreen;
125 |
--------------------------------------------------------------------------------
/client/src/components/ui/Auth/ForgetPassword/PasswordForm.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useState, useEffect } from 'react';
3 | import { useNavigate } from 'react-router-dom';
4 | import { useDispatch, useSelector } from 'react-redux';
5 |
6 | // Import Thunks
7 | import { resetPassword } from '../../../../redux/asyncThunks/userThunks';
8 | import {
9 | setPasswordResetOTP,
10 | setPasswordResetEmail,
11 | } from '../../../../redux/slices/userSlice';
12 |
13 | // Import Components
14 | import Button from '../../Button';
15 | import Loader from '../../Loader';
16 | import Message from '../../Message';
17 |
18 | function PasswordForm({ setCurrentStep }) {
19 | const [password, setPassword] = useState('');
20 | const [confirmPassword, setConfirmPassword] = useState('');
21 |
22 | const navigate = useNavigate();
23 | const dispatch = useDispatch();
24 |
25 | const user = useSelector((state) => state.user);
26 | const {
27 | loading,
28 | userPasswordResetOTP,
29 | userPasswordResetEmail,
30 | userResetPasswordError,
31 | userResetPasswordSuccess,
32 | } = user;
33 |
34 | const submitHandler = (e) => {
35 | e.preventDefault();
36 | dispatch(
37 | resetPassword({
38 | email: userPasswordResetEmail,
39 | resetToken: userPasswordResetOTP,
40 | newPassword: password,
41 | confirmNewPassword: confirmPassword,
42 | })
43 | ).then(() => {
44 | dispatch(setPasswordResetOTP(''));
45 | dispatch(setPasswordResetEmail(''));
46 | });
47 | };
48 |
49 | useEffect(() => {
50 | if (userResetPasswordError) {
51 | setInterval(() => {
52 | setCurrentStep('EmailForm');
53 | }, 1000);
54 | }
55 | }, [userResetPasswordError, setCurrentStep]);
56 |
57 | useEffect(() => {
58 | if (userResetPasswordSuccess) {
59 | navigate('/login');
60 | setInterval(() => {
61 | setCurrentStep('EmailForm');
62 | }, 1000);
63 | }
64 | }, [userResetPasswordSuccess, setCurrentStep, navigate]);
65 |
66 | return (
67 | <>
68 | {loading ? (
69 |
70 |
72 | ) : (
73 |
127 | )}
128 |
129 | );
130 | }
131 |
132 | PasswordForm.propTypes = {
133 | setCurrentStep: PropTypes.func.isRequired,
134 | };
135 |
136 | export default PasswordForm;
137 |
--------------------------------------------------------------------------------
/client/src/components/ui/Admin/Auth/RegisterForm.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 |
4 | import Button from '../../Button';
5 | import Loader from '../../Loader';
6 | import Message from '../../Message';
7 |
8 | import { registerAdmin } from '../../../../redux/asyncThunks/adminThunks';
9 |
10 | function AdminRegisterForm() {
11 | const [name, setName] = useState('');
12 | const [email, setEmail] = useState('');
13 | const [password, setPassword] = useState('');
14 | const [confirmPassword, setConfirmPassword] = useState('');
15 |
16 | const dispatch = useDispatch();
17 |
18 | const admin = useSelector((state) => state.admin);
19 | const { loading, adminUserRegisterError } = admin;
20 |
21 | const handleRegister = (e) => {
22 | e.preventDefault();
23 | dispatch(
24 | registerAdmin({
25 | name,
26 | email,
27 | password,
28 | confirmPassword,
29 | })
30 | );
31 | };
32 |
33 | return (
34 | <>
35 | {loading ? (
36 |
37 |
39 | ) : (
40 |
134 | )}
135 |
136 | );
137 | }
138 |
139 | export default AdminRegisterForm;
140 |
--------------------------------------------------------------------------------
/client/src/redux/asyncThunks/pizzaThunks.js:
--------------------------------------------------------------------------------
1 | import { createAsyncThunk } from '@reduxjs/toolkit';
2 | import axios from 'axios';
3 |
4 | // Create Async Thunks
5 |
6 | // Create Pizza
7 | export const createPizza = createAsyncThunk(
8 | 'pizza/createPizza',
9 | async (pizzaData, { rejectWithValue, getState }) => {
10 | try {
11 | const {
12 | admin: { adminUserInfo },
13 | user: { userInfo },
14 | } = getState();
15 |
16 | const config = {
17 | headers: {
18 | Authorization: `Bearer ${
19 | adminUserInfo ? adminUserInfo.token : userInfo.token
20 | }`,
21 | },
22 | };
23 |
24 | const { data } = await axios.post(
25 | `${import.meta.env.VITE_SERVER_URL}/pizzas`,
26 | {
27 | name: pizzaData.name,
28 | description: pizzaData.description,
29 | bases: pizzaData.bases,
30 | sauces: pizzaData.sauces,
31 | cheeses: pizzaData.cheeses,
32 | veggies: pizzaData.veggies,
33 | price: pizzaData.price,
34 | size: pizzaData.size,
35 | imageUrl: pizzaData.imageUrl,
36 | },
37 | config
38 | );
39 |
40 | return data;
41 | } catch (error) {
42 | return rejectWithValue({
43 | status: error.response && error.response.status,
44 | message:
45 | error.response && error.response.data.message
46 | ? error.response.data.message
47 | : error.message,
48 | });
49 | }
50 | }
51 | );
52 |
53 | // Fetch All Pizzas
54 | export const listPizzas = createAsyncThunk(
55 | 'pizza/listPizzas',
56 | async (_, { rejectWithValue }) => {
57 | try {
58 | const { data } = await axios.get(
59 | `${import.meta.env.VITE_SERVER_URL}/pizzas`
60 | );
61 |
62 | return data;
63 | } catch (error) {
64 | return rejectWithValue({
65 | status: error.response && error.response.status,
66 | message:
67 | error.response && error.response.data.message
68 | ? error.response.data.message
69 | : error.message,
70 | });
71 | }
72 | }
73 | );
74 |
75 | // Fetch Single Pizza
76 | export const getPizzaById = createAsyncThunk(
77 | 'pizza/getPizzaById',
78 | async (id, { rejectWithValue }) => {
79 | try {
80 | const { data } = await axios.get(
81 | `${import.meta.env.VITE_SERVER_URL}/pizzas/${id}`
82 | );
83 |
84 | return data;
85 | } catch (error) {
86 | return rejectWithValue({
87 | status: error.response && error.response.status,
88 | message:
89 | error.response && error.response.data.message
90 | ? error.response.data.message
91 | : error.message,
92 | });
93 | }
94 | }
95 | );
96 |
97 | // Update Pizza By Id
98 | export const updatePizzaById = createAsyncThunk(
99 | 'pizza/updatePizzaById',
100 | async (
101 | {
102 | id,
103 | name,
104 | description,
105 | base,
106 | sauces,
107 | cheeses,
108 | veggies,
109 | price,
110 | size,
111 | imageUrl,
112 | },
113 | { rejectWithValue, getState }
114 | ) => {
115 | try {
116 | const {
117 | admin: { adminUserInfo },
118 | } = getState();
119 |
120 | const config = {
121 | headers: {
122 | Authorization: `Bearer ${adminUserInfo.token}`,
123 | },
124 | };
125 |
126 | const { data } = await axios.put(
127 | `${import.meta.env.VITE_SERVER_URL}/pizzas/${id}`,
128 | {
129 | name,
130 | description,
131 | base,
132 | sauces,
133 | cheeses,
134 | veggies,
135 | price,
136 | size,
137 | imageUrl,
138 | },
139 | config
140 | );
141 |
142 | return data;
143 | } catch (error) {
144 | return rejectWithValue({
145 | status: error.response && error.response.status,
146 | message:
147 | error.response && error.response.data.message
148 | ? error.response.data.message
149 | : error.message,
150 | });
151 | }
152 | }
153 | );
154 |
155 | // Delete Pizza By Id
156 | export const deletePizzaById = createAsyncThunk(
157 | 'pizza/deletePizzaById',
158 | async (id, { rejectWithValue, getState }) => {
159 | try {
160 | const {
161 | admin: { adminUserInfo },
162 | } = getState();
163 |
164 | const config = {
165 | headers: {
166 | Authorization: `Bearer ${adminUserInfo.token}`,
167 | },
168 | };
169 |
170 | const { data } = await axios.delete(
171 | `${import.meta.env.VITE_SERVER_URL}/pizzas/${id}`,
172 | config
173 | );
174 |
175 | return data;
176 | } catch (error) {
177 | return rejectWithValue({
178 | status: error.response && error.response.status,
179 | message:
180 | error.response && error.response.data.message
181 | ? error.response.data.message
182 | : error.message,
183 | });
184 | }
185 | }
186 | );
187 |
--------------------------------------------------------------------------------
/client/src/components/ui/Auth/VerficationModal.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useEffect, useState } from 'react';
3 | import { FaTimes } from 'react-icons/fa';
4 | import { useDispatch, useSelector } from 'react-redux';
5 |
6 | // Import THunks
7 | import {
8 | getUserDetails,
9 | verifyEmail,
10 | } from '../../../redux/asyncThunks/userThunks';
11 |
12 | // Import Components
13 | import Button from '../Button';
14 | import Loader from '../Loader';
15 | import Message from '../Message';
16 |
17 | function VerficationModal({ onClose }) {
18 | const [modalVisible, setModalVisible] = useState(false);
19 |
20 | const dispatch = useDispatch();
21 |
22 | const user = useSelector((state) => state.user);
23 | const { loading, userDetails, userVerifyEmailError, userVerifyEmailSuccess } =
24 | user;
25 |
26 | const [email, setEmail] = useState(userDetails?.email || '');
27 | const [verificationCode, setVerificationCode] = useState('');
28 |
29 | const handleModalClose = () => {
30 | setModalVisible(false);
31 | setTimeout(() => {
32 | onClose();
33 | }, 300);
34 | };
35 |
36 | const submitHandler = (e) => {
37 | e.preventDefault();
38 | dispatch(verifyEmail({ email, verificationCode }));
39 | console.log('VerficationModal', email, verificationCode);
40 | };
41 |
42 | useEffect(() => {
43 | if (!userDetails) {
44 | dispatch(getUserDetails({}));
45 | }
46 |
47 | if (userVerifyEmailSuccess) {
48 | dispatch(getUserDetails({}));
49 | setModalVisible(false);
50 | setTimeout(() => {
51 | onClose();
52 | }, 300);
53 | }
54 |
55 | if (onClose) {
56 | setModalVisible(true);
57 | }
58 | }, [dispatch, onClose, userVerifyEmailSuccess, userDetails]);
59 | return (
60 |
66 |
e.stopPropagation()}
69 | >
70 |
71 |
72 | Verfiy Your Email
73 |
74 |
78 |
80 |
81 | {loading ? (
82 |
83 | ) : (
84 |
138 | )}
139 |
140 |
50 |
51 |
52 |
53 | Order ID
54 | User ID
55 | Total Price
56 | Status
57 | Date
58 |
59 |
60 |
61 | {orders.slice(startIndex, endIndex).map((order) => (
62 |
63 |
64 | {order._id}
65 |
66 |
67 | {order.user}
68 |
69 |
70 | ${order.totalPrice}
71 |
72 |
73 | {getStatusIcon(order.status)}
74 |
75 |
76 | {order.createdAt.substring(0, 10)}
77 |
78 |
79 | ))}
80 |
81 |
82 |
86 | {currentPage > 1 && (
87 | setCurrentPage((prev) => prev - 1)}
91 | >
92 | Prev
93 |
94 | )}
95 |
96 | Page {currentPage} of {Math.ceil(orders.length / ordersPerPage)}
97 |
98 | {currentPage < Math.ceil(orders.length / ordersPerPage) && (
99 | setCurrentPage((prev) => prev + 1)}
103 | >
104 | Next
105 |
106 | )}
107 |
108 | )}
109 |
110 |
111 |
112 |
115 |
116 |
120 |
123 |
124 |
128 |
131 |
132 |
136 |
139 |
140 |
141 | );
142 | }
143 |
144 | UserOrdersTable.propTypes = {
145 | orders: PropTypes.array.isRequired,
146 | };
147 |
148 | export default UserOrdersTable;
149 |
--------------------------------------------------------------------------------
/client/src/redux/asyncThunks/orderThunks.js:
--------------------------------------------------------------------------------
1 | import { createAsyncThunk } from '@reduxjs/toolkit';
2 | import axios from 'axios';
3 |
4 | // Create THunks
5 |
6 | // Order Create
7 | export const createOrder = createAsyncThunk(
8 | 'order/createOrder',
9 | async (orderData, { getState, rejectWithValue }) => {
10 | try {
11 | const {
12 | user: { userInfo },
13 | } = getState();
14 |
15 | const config = {
16 | headers: {
17 | 'Content-Type': 'application/json',
18 | Authorization: `Bearer ${userInfo.token}`,
19 | },
20 | };
21 |
22 | const { data } = await axios.post(
23 | `${import.meta.env.VITE_SERVER_URL}/orders`,
24 | {
25 | orderItems: orderData.orderItems,
26 | deliveryAddress: orderData.deliveryAddress,
27 | salesTax: orderData.salesTax,
28 | deliveryCharges: orderData.deliveryCharges,
29 | totalPrice: orderData.totalPrice,
30 | payment: orderData.payment,
31 | },
32 | config
33 | );
34 |
35 | return data;
36 | } catch (error) {
37 | return rejectWithValue({
38 | status: error.response && error.response.status,
39 | message:
40 | error.response && error.response.data.message
41 | ? error.response.data.message
42 | : error.message,
43 | });
44 | }
45 | }
46 | );
47 |
48 | // Order List By User Id
49 | export const listOrdersByUserId = createAsyncThunk(
50 | 'order/listOrdersByUserId',
51 | async (_, { getState, rejectWithValue }) => {
52 | try {
53 | const {
54 | user: { userInfo },
55 | } = getState();
56 |
57 | const config = {
58 | headers: {
59 | Authorization: `Bearer ${userInfo.token}`,
60 | },
61 | };
62 |
63 | const { data } = await axios.get(
64 | `${import.meta.env.VITE_SERVER_URL}/orders/user`,
65 | config
66 | );
67 |
68 | return data;
69 | } catch (error) {
70 | return rejectWithValue({
71 | status: error.response && error.response.status,
72 | message:
73 | error.response && error.response.data.message
74 | ? error.response.data.message
75 | : error.message,
76 | });
77 | }
78 | }
79 | );
80 |
81 | // Order List (Admin)
82 | export const listOrders = createAsyncThunk(
83 | 'order/listOrders',
84 | async (_, { getState, rejectWithValue }) => {
85 | try {
86 | const {
87 | admin: { adminUserInfo },
88 | } = getState();
89 |
90 | const config = {
91 | headers: {
92 | Authorization: `Bearer ${adminUserInfo.token}`,
93 | },
94 | };
95 |
96 | const { data } = await axios.get(
97 | `${import.meta.env.VITE_SERVER_URL}/orders`,
98 | config
99 | );
100 |
101 | return data;
102 | } catch (error) {
103 | return rejectWithValue({
104 | status: error.response && error.response.status,
105 | message:
106 | error.response && error.response.data.message
107 | ? error.response.data.message
108 | : error.message,
109 | });
110 | }
111 | }
112 | );
113 |
114 | // Order Details By Id (Admin)
115 | export const getOrderById = createAsyncThunk(
116 | 'order/getOrderById',
117 | async (id, { getState, rejectWithValue }) => {
118 | try {
119 | const {
120 | admin: { adminUserInfo },
121 | } = getState();
122 |
123 | const config = {
124 | headers: {
125 | Authorization: `Bearer ${adminUserInfo.token}`,
126 | },
127 | };
128 |
129 | const { data } = await axios.get(
130 | `${import.meta.env.VITE_SERVER_URL}/orders/${id}`,
131 | config
132 | );
133 |
134 | return data;
135 | } catch (error) {
136 | return rejectWithValue({
137 | status: error.response && error.response.status,
138 | message:
139 | error.response && error.response.data.message
140 | ? error.response.data.message
141 | : error.message,
142 | });
143 | }
144 | }
145 | );
146 |
147 | // Order Update by Id (Admin)
148 | export const updateOrderById = createAsyncThunk(
149 | 'order/updateOrderById',
150 | async ({ id, status }, { getState, rejectWithValue }) => {
151 | try {
152 | const {
153 | admin: { adminUserInfo },
154 | } = getState();
155 |
156 | const config = {
157 | headers: {
158 | Authorization: `Bearer ${adminUserInfo.token}`,
159 | },
160 | };
161 |
162 | const { data } = await axios.put(
163 | `${import.meta.env.VITE_SERVER_URL}/orders/${id}`,
164 | { status },
165 | config
166 | );
167 |
168 | return data;
169 | } catch (error) {
170 | return rejectWithValue({
171 | status: error.response && error.response.status,
172 | message:
173 | error.response && error.response.data.message
174 | ? error.response.data.message
175 | : error.message,
176 | });
177 | }
178 | }
179 | );
180 |
181 | // Order Delete by Id (Admin)
182 | export const deleteOrderById = createAsyncThunk(
183 | 'order/deleteOrderById',
184 | async (id, { getState, rejectWithValue }) => {
185 | try {
186 | const {
187 | admin: { adminUserInfo },
188 | } = getState();
189 |
190 | const config = {
191 | headers: {
192 | Authorization: `Bearer ${adminUserInfo.token}`,
193 | },
194 | };
195 |
196 | const { data } = await axios.delete(
197 | `${import.meta.env.VITE_SERVER_URL}/orders/${id}`,
198 | config
199 | );
200 |
201 | return data;
202 | } catch (error) {
203 | return rejectWithValue({
204 | status: error.response && error.response.status,
205 | message:
206 | error.response && error.response.data.message
207 | ? error.response.data.message
208 | : error.message,
209 | });
210 | }
211 | }
212 | );
213 |
--------------------------------------------------------------------------------
/client/src/components/ui/Profile/EditProfileForm.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useState } from 'react';
3 | import { useDispatch, useSelector } from 'react-redux';
4 |
5 | import Button from '../Button';
6 | import Loader from '../Loader';
7 | import Message from '../Message';
8 |
9 | import {
10 | getUserDetails,
11 | updateUserProfile,
12 | } from '../../../redux/asyncThunks/userThunks';
13 |
14 | function EditProfileForm({ setIsEditing }) {
15 | const dispatch = useDispatch();
16 |
17 | const user = useSelector((state) => state.user);
18 | const { loading, userUpdateProfileError, userDetails } = user;
19 |
20 | const initialFormData = {
21 | name: userDetails.name,
22 | email: userDetails.email,
23 | address: userDetails.address,
24 | phoneNumber: userDetails.phoneNumber,
25 | password: '',
26 | confirmPassword: '',
27 | };
28 |
29 | const [formData, setFormData] = useState(initialFormData);
30 |
31 | const handleFieldChange = (e) => {
32 | setFormData({
33 | ...formData,
34 | [e.target.name]: e.target.value,
35 | });
36 | };
37 |
38 | const handleSubmit = (e) => {
39 | e.preventDefault();
40 | dispatch(updateUserProfile(formData)).then(() => {
41 | setIsEditing(false);
42 | dispatch(getUserDetails({}));
43 | });
44 | };
45 |
46 | const handleCancel = () => {
47 | setFormData(initialFormData);
48 | setIsEditing(false);
49 | };
50 |
51 | return (
52 | <>
53 | {loading ? (
54 | {userUpdateProfileError}
59 | )}
60 |
162 |
163 | )}
164 |
165 | );
166 | }
167 |
168 | EditProfileForm.propTypes = {
169 | setIsEditing: PropTypes.func.isRequired,
170 | user: PropTypes.object.isRequired,
171 | };
172 | export default EditProfileForm;
173 |
--------------------------------------------------------------------------------
/client/src/components/ui/CheckoutSteps/ShippingStep.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useState } from 'react';
3 | import { useDispatch, useSelector } from 'react-redux';
4 |
5 | // Import Actions
6 | import { saveShippingAddress } from '../../../redux/slices/cartSlice';
7 |
8 | // Import Components
9 | import Button from '../Button';
10 |
11 | function ShippingStep({ setCurrentStep }) {
12 | const dispatch = useDispatch();
13 |
14 | const cart = useSelector((state) => state.cart);
15 | const { shippingAddress, cartItems } = cart;
16 |
17 | const [phoneNumber, setPhoneNumber] = useState(shippingAddress.phoneNumber);
18 | const [address, setAddress] = useState(shippingAddress.address);
19 | const [city, setCity] = useState(shippingAddress.city);
20 | const [postalCode, setPostalCode] = useState(shippingAddress.postalCode);
21 | const [country, setCountry] = useState(shippingAddress.country);
22 |
23 | const submitHandler = (e) => {
24 | e.preventDefault();
25 | dispatch(
26 | saveShippingAddress({ phoneNumber, address, city, postalCode, country })
27 | );
28 | setCurrentStep('Payment');
29 | };
30 |
31 | return (
32 |
161 | );
162 | }
163 |
164 | ShippingStep.propTypes = {
165 | setCurrentStep: PropTypes.func.isRequired,
166 | };
167 |
168 | export default ShippingStep;
169 |
--------------------------------------------------------------------------------