Edit Profile
8 |
9 |
28 |
10 |
14 |
18 |
19 |
23 |
27 | Shipping Details
29 | 33 |
34 |
38 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | );
49 | }
50 |
51 | export default Profile;
52 |
--------------------------------------------------------------------------------
/frontend/src/components/account/MyOrders.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { fetchOrdersByUserId } from '../../store/actions/orderActions';
4 | import orderItemApi from '../../utils/api/orderItemApi';
5 | import sizeApi from '../../utils/api/sizeApi';
6 | import productApi from '../../utils/api/productApi';
7 | import { useStatusString, formatPrice, formatDateTime } from '../../utils/hooks/useUtil';
8 |
9 | function MyOrders({ currentUser }) {
10 | const [orders, setOrders] = useState([]);
11 | const getStatusString = useStatusString();
12 | const dispatch = useDispatch();
13 |
14 |
15 | useEffect(() => {
16 | dispatch(fetchOrdersByUserId(currentUser.userID)).then(async (response) => {
17 | const ordersWithItems = await Promise.all(response.payload.map(async (order, index) => {
18 | const orderItems = await orderItemApi.getOrderItemsByOrderId(order.orderID);
19 |
20 | const productSizePromises = orderItems.map((orderItem) =>
21 | sizeApi.getProductSize(orderItem.productSizeID)
22 | );
23 | const productSizes = await Promise.all(productSizePromises);
24 |
25 | const productPromises = productSizes.map((productSize) =>
26 | productApi.getProduct(productSize.productID)
27 | );
28 | const products = await Promise.all(productPromises);
29 |
30 | return {
31 | ...order,
32 | orderItems: orderItems.map((orderItem, index) => ({
33 | ...orderItem,
34 | productSize: productSizes[index],
35 | product: products[index]
36 | })),
37 | index
38 | };
39 | }));
40 | setOrders(ordersWithItems);
41 | });
42 | }, [dispatch, currentUser.userID]);
43 |
44 | return (
45 | <>
46 | My Orders
47 | {orders.map((order) => ( 48 |
49 |
50 |
82 | ))}
83 |
84 | );
85 | }
86 |
87 | export default MyOrders;
88 |
--------------------------------------------------------------------------------
/frontend/src/components/account/_account.scss:
--------------------------------------------------------------------------------
1 | .account{
2 | padding: 5rem 0;
3 | gap: 5rem;
4 | @include flex(center, flex-start, row);
5 | @media (max-width: 850px) {
6 | padding: 5rem 1rem;
7 | gap: 2rem;
8 | @include flex(flex-start, center, column);
9 | ul{
10 | @include flex(center, center, row);
11 | li{
12 | padding: 1rem 1rem 1rem 0rem;
13 | }
14 | }
15 | }
16 | }
17 |
18 | .account-menu{
19 | li{
20 | border-bottom: none;
21 | cursor: pointer;
22 | }
23 | li.active {
24 | font-weight: bold;
25 | }
26 | }
27 |
28 | .profile-info, .profile-container{
29 | width: 100%;
30 | max-width: 500px;
31 | h2, button{
32 | margin-top: 1rem;
33 | }
34 | input, textarea, select{
35 | width: 100%;
36 | }
37 | }
38 |
39 | .my-orders-div{
40 | margin-bottom: 2rem;
41 | }
42 |
43 | .my-orders-about{
44 | ul{
45 | gap: 1rem;
46 | display: flex;
47 | margin-bottom: 0.5rem;
48 | li{
49 | padding: 1rem 00;
50 | @include flex(center, center, row)
51 | }
52 | }
53 | }
54 |
55 | td p {
56 | display: inline;
57 | }
--------------------------------------------------------------------------------
/frontend/src/components/admin/OrderItemsTable.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import orderItemApi from '../../utils/api/orderItemApi';
3 | import sizeApi from '../../utils/api/sizeApi';
4 | import { Link } from 'react-router-dom';
5 | import { useProduct } from "../../utils/hooks/useProduct"
6 | import { formatPrice } from '../../utils/hooks/useUtil';
7 |
8 |
9 | function OrderItemsTable({ selectedOrder }) {
10 | const [orderItems, setOrderItems] = useState([]);
11 | const [productSizes, setProductSizes] = useState([]);
12 | const { products }= useProduct();
13 |
14 | useEffect(() => {
15 | if (selectedOrder) {
16 | orderItemApi.getOrderItemsByOrderId(selectedOrder.orderID).then((orderItems) => {
17 | setOrderItems(orderItems);
18 |
19 | const productSizePromises = orderItems.map((orderItem) =>
20 | sizeApi.getProductSize(orderItem.productSizeID)
21 | );
22 | Promise.all(productSizePromises).then((productSizes) => {
23 | setProductSizes(productSizes);
24 | });
25 |
26 | });
27 | }
28 | }, [selectedOrder]);
29 |
30 | return (
31 |
51 |
62 | -
52 |
Order #{order.orderID}
53 | Placed {formatDateTime(order.dateTime)}
54 |
-
56 | {order.status === 0 &&
- Cancel } 57 |
- 58 | {getStatusString(order.status)} 59 | 60 |
63 | {order.orderItems.map((orderItem) => (
64 |
81 |
65 |
79 | ))}
80 |
66 |
78 |
67 | 
68 |
69 |
70 |
77 |
71 |
76 | {orderItem.product.brand} {orderItem.product.name}
72 |Size: {orderItem.productSize.size}
73 |Quantity: {orderItem.quantity}
74 |Price: {formatPrice(orderItem.productSize.price)}
75 |
32 | {orderItems.map((orderItem, index) => (
33 |
58 | );
59 | }
60 |
61 |
62 | export default OrderItemsTable;
63 |
--------------------------------------------------------------------------------
/frontend/src/components/admin/OrderTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function OrderTable({user, selectedOrder}) {
4 |
5 | const handleStatusChange = (event) => {
6 | const newStatus = parseInt(event.target.value);
7 | };
8 |
9 | return (
10 | <>
11 |
34 | {products[index] && (
35 |
56 | ))}
57 |
36 | 
37 |
38 | )}
39 |
40 |
55 |
41 | {products[index] && (
42 |
49 | {productSizes[index] && (
50 | {products[index].brand} {products[index].name}
43 | )} 44 | {productSizes[index] && ( 45 |Size: {productSizes[index].size}
46 | )} 47 |Quantity: {orderItem.quantity}
48 |
51 |
53 | )}
54 | {formatPrice(productSizes[index].price)}
52 |
12 |
16 |
20 |
21 |
25 |
29 |
30 |
34 |
38 |
39 |
43 |
44 |
54 |
55 |
59 |
60 |
61 | )
62 | }
63 |
64 | export default OrderTable
--------------------------------------------------------------------------------
/frontend/src/components/admin/OrdersTable.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { fetchOrders } from "../../store/actions/orderActions"
4 | import { useStatusString, formatDate } from '../../utils/hooks/useUtil';
5 |
6 | import OrderItemsTable from './OrderItemsTable';
7 | import OrderTable from './OrderTable';
8 |
9 | import userApi from '../../utils/api/userApi';
10 |
11 | function Orders() {
12 | const dispatch = useDispatch();
13 | const [orders, setOrders] = useState([])
14 | const [selectedOrder, setSelectedOrder] = useState(null)
15 | const [user, setUser] = useState([]);
16 | const getStatusString = useStatusString();
17 |
18 | useEffect(() => {
19 | dispatch(fetchOrders()).then((response) => setOrders(response.payload));
20 | }, [dispatch]);
21 |
22 | useEffect(() => {
23 | if (selectedOrder) {
24 | userApi.getUser(selectedOrder.userID).then(setUser);
25 | }
26 | }, [selectedOrder]);
27 |
28 | return (
29 |
30 |
31 |
32 |
50 | {selectedOrder &&
51 |
57 | );
58 | }
59 |
60 | export default Orders;
61 |
--------------------------------------------------------------------------------
/frontend/src/components/admin/ProductsTable.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import ProductSizes from './SizesTable';
3 | import { useProduct } from '../../utils/hooks/useProduct';
4 | import { useStock } from '../../utils/hooks/useUtil';
5 |
6 |
7 | function Products() {
8 | const { products, fetchProducts, createProduct, updateExistingProduct, removeProduct } = useProduct();
9 | const [localProduct, setLocalProduct] = useState({});
10 | const getStock = useStock();
11 | const product = products.find((product) => product?.productID === localProduct?.productID);
12 |
13 | useEffect(() => {
14 | fetchProducts();
15 | }, [products])
16 |
17 | const handleInputChange = (e) => {
18 | const { name, value } = e.target;
19 | setLocalProduct(prevState => ({ ...prevState, [name]: value }));
20 | };
21 |
22 | return (
23 | | ID | 34 |Order Date | 35 |Status | 36 |UserID | 37 |
|---|---|---|---|
| {order.orderID} | 43 |{formatDate(order.dateTime)} | 44 |{getStatusString(order.status)} | 45 |{order.userID} | 46 |
52 |
55 | }
56 |
24 |
25 |
26 |
42 |
81 | );
82 | }
83 |
84 | export default Products;
85 |
--------------------------------------------------------------------------------
/frontend/src/components/admin/SizesTable.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { icons } from '../../assets/icons/icons';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { useSize } from '../../utils/hooks/useSize';
5 |
6 | function ProductSizes({ product }) {
7 | const { addSize, updateSize, deleteSize } = useSize();
8 | const [newSize, setNewSize] = useState({ size: '', price: '', quantity: '' });
9 | const [editedSize, setEditedSize] = useState({});
10 |
11 | const handleInputChange = (e, index) => {
12 | const { name, value } = e.target;
13 | const updatedSize = { ...product.sizes[index], [name]: value };
14 | setEditedSize(updatedSize);
15 | };
16 |
17 | return (
18 | <>
19 | | ID | 28 |Model | 29 |Stock | 30 |
|---|---|---|
| {product.productID} | 36 |{product.brand} {product.name} | 37 |{getStock(product.inStock)} | 38 |
43 |
80 | {localProduct?.brand} {localProduct?.name}
44 | {product && ( 45 |
46 | 
47 |
48 | )
49 | }
50 |
51 | { product && ( )}
55 |
59 |
63 |
64 |
68 |
72 |
73 |
74 | { product && ()}
75 | { product?.productID && ()}
76 | { !product?.productID && ()}
77 |
78 | {product && (| Size | 23 |Price | 24 |Quantity | 25 |Edit | 26 |
|---|---|---|---|
| 31 | 41 | | 42 |43 | 44 | setNewSize((prevSize) => ({ 45 | ...prevSize, 46 | price: e.target.value, 47 | })) 48 | }/> 49 | | 50 |51 | 52 | setNewSize((prevSize) => ({ 53 | ...prevSize, 54 | quantity: e.target.value, 55 | })) 56 | }/> 57 | | 58 |59 | 60 | | 61 |
| {size.size} | 65 |66 | handleInputChange(e, index)} 71 | /> 72 | | 73 |74 | handleInputChange(e, index)} 79 | /> 80 | | 81 |82 | 85 | 88 | | 89 |
| UserID | 20 |Full Name | 21 |Phone | 23 |Address | 24 ||
|---|---|---|---|---|
| {user.userID} | 30 |{user.firstName} {user.lastName} | 31 |{user.email} | 32 |{user.phone} | 33 |{user.postalCode} {user.city} {user.address} | 34 |
25 |
46 | )
47 | }
48 |
49 | export default Login;
50 |
--------------------------------------------------------------------------------
/frontend/src/components/auth/RegisterForm.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useForm } from 'react-hook-form';
3 |
4 |
5 | function Register() {
6 | const { register, handleSubmit, formState: { errors } } = useForm();
7 |
8 | const onSubmit = async (registerData) => {
9 | console.log(registerData)
10 | };
11 |
12 | return (
13 | Login
26 | 45 |
14 |
58 | )
59 | }
60 |
61 | export default Register;
62 |
--------------------------------------------------------------------------------
/frontend/src/components/auth/_auth.scss:
--------------------------------------------------------------------------------
1 | .auth{
2 | max-width: 30rem;
3 | @include flex(center, flex-start, column);
4 | h1{
5 | margin-bottom: 0rem;
6 | }
7 | a{
8 | text-decoration: underline;
9 | &.active{
10 | display: none;
11 | }
12 | }
13 | }
14 |
15 |
16 | .login, .register{
17 | @include flex(center, center, column);
18 | button{
19 | margin: 2rem 0 1rem;
20 | width: 100%;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/frontend/src/components/cart/CartItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom';
3 | import { useCart } from '../../utils/hooks/useCart';
4 | import { formatPrice } from '../../utils/hooks/useUtil';
5 |
6 |
7 | function CartItem() {
8 | const { removeFromCart, updateQuantity, items } = useCart();
9 |
10 | return (
11 | <>
12 | {items.map((item) => (
13 | Register
15 | 57 |
14 |
15 |
42 | ))}
43 |
44 | );
45 | }
46 |
47 | export default CartItem;
48 |
--------------------------------------------------------------------------------
/frontend/src/components/cart/_cart.scss:
--------------------------------------------------------------------------------
1 |
2 | .cart-container{
3 | h1{
4 | font-size: 1.4rem;
5 | margin-bottom: 1.6rem;
6 | }
7 | @media (max-width: 850px) {
8 | max-width: none;
9 | }
10 | }
11 | .cart-items{
12 | a:nth-child(2){
13 | text-decoration: underline;
14 | }
15 | }
16 |
17 | .cart-summary{
18 | max-width: 18rem;
19 | width: 100%;
20 | margin-left: 5rem;
21 | @media (max-width: 850px) {
22 | margin: 2rem 0 0 0rem;
23 | max-width: none;
24 | }
25 | }
26 | .summary-content{
27 | margin-bottom: 1.5rem;
28 | button{
29 | width: 100%;
30 | }
31 | }
32 |
33 | .bold{
34 | font-weight: bold;
35 | color: $color-dark;
36 | }
37 |
38 | .cart-item{
39 | display: flex;
40 | flex-direction: row;
41 | width: 100%;
42 | margin-bottom: 1rem;
43 | }
44 |
45 | .cart-item-img{
46 | width: 150px;
47 | height: 150px;
48 | @include flex(center, center, row);
49 | background: #f0f0f0;
50 | margin-right: 1rem;
51 | img{
52 | width: 100%;
53 | object-fit: cover;
54 | }
55 | @media (max-width: 850px) {
56 | width: 120px;
57 | height: 120px;
58 | }
59 | }
60 | .cart-item-about{
61 | display: flex;
62 | justify-content: space-between;
63 | width: 100%;
64 | h3{
65 | font-size: 1rem;
66 | margin-bottom: 0rem;
67 | }
68 | p{
69 | color: $color-grey;
70 | }
71 | }
72 |
73 | .cart-item-left{
74 | @include flex(flex-start, flex-start, column);
75 | p:first-child{
76 | color: $color-dark;
77 | font-weight: bold;
78 | }
79 | a:last-child{
80 | text-decoration: underline;
81 | color: $color-grey;
82 | }
83 | }
84 |
85 | .cart-item-quantity{
86 | @include flex(center, center, row);
87 | border: 1px solid $color-grey;
88 | margin-top: 0.5rem;
89 | input{
90 | text-align: center;
91 | width: 20px;
92 | border: none;
93 | padding: 0rem;
94 | margin: 0rem;
95 | }
96 | a{
97 | text-align: center;
98 | padding: 0 0.2rem;
99 | }
100 | }
101 |
102 | .cart-item-right{
103 | @include flex(flex-start, flex-end, column);
104 | p{
105 | font-weight: bold;
106 | color: black;
107 | }
108 | }
--------------------------------------------------------------------------------
/frontend/src/components/checkout/Complete.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
3 | import { icons } from '../../assets/icons/icons'
4 | import { useUser} from "../../utils/hooks/useUser"
5 | import { Link } from 'react-router-dom'
6 |
7 | function Complete() {
8 | const { currentUser } = useUser();
9 |
10 | return (
11 |
16 | 
17 |
18 |
19 |
20 |
41 |
21 |
27 | {item.product.brand} {item.product.name}
22 |Brand: {item.product.brand}
23 |Size: {item.size}
24 |Quantity: {item.quantity}
25 | removeFromCart(item.product.id, item.size)}>Remove 26 |
28 |
40 | {formatPrice(item.price)}
29 |
30 | updateQuantity(item.product.id, item.size, item.quantity - 1)}>-
31 | {
32 | const newQuantity = parseInt(e.target.value);
33 | if (!isNaN(newQuantity)) {
34 | updateQuantity(item.product.id, item.size, newQuantity);
35 | }
36 | }} />
37 | updateQuantity(item.product.id, item.size, item.quantity + 1)}>+
38 |
39 |
12 |
17 | )
18 | }
19 |
20 | export default Complete
--------------------------------------------------------------------------------
/frontend/src/components/checkout/Confirmation.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import OrderSummary from './OrderSummary'
3 | import CartItem from "../cart/CartItem";
4 | import { useUser} from "../../utils/hooks/useUser"
5 | import { useCart } from "../../utils/hooks/useCart"
6 |
7 |
8 | function Confirmation({onPaymentComplete}) {
9 | const { currentUser } = useUser();
10 | const { discount, applyDiscount } = useCart();
11 | const [discountCode, setDiscountCode] = useState('');
12 |
13 | return (
14 | Your order is confirmed!
14 |Thank you for your order, {currentUser.firstName}.
15 | 16 |
15 |
36 | )
37 | }
38 |
39 | export default Confirmation
--------------------------------------------------------------------------------
/frontend/src/components/checkout/LogIn.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useUser} from "../../utils/hooks/useUser"
3 | import Login from '../auth/LoginForm';
4 |
5 | function Account() {
6 | const { currentUser } = useUser();
7 |
8 | return (
9 |
16 |
20 | REVIEW YOUR ORDER
17 | 18 |
21 |
34 |
35 | SHIPPING ADDRESS
22 | 23 |{currentUser?.firstName} {currentUser?.lastName}
24 |{currentUser?.address}
25 |{currentUser?.postalCode} {currentUser?.city}
26 |Denmark
27 | { !discount > 0 && 28 |
29 | setDiscountCode(e.target.value)} />
30 |
31 |
32 | }
33 |
10 | {currentUser ? (
11 |
20 | );
21 | }
22 |
23 |
24 | export default Account
--------------------------------------------------------------------------------
/frontend/src/components/checkout/OrderSummary.js:
--------------------------------------------------------------------------------
1 | import React, {useEffect} from 'react'
2 | import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js';
3 | import { useCart } from "../../utils/hooks/useCart"
4 |
5 |
6 | function OrderSummary({onPaymentComplete}) {
7 | const buttonStyles = {
8 | layout: 'vertical',
9 | color: 'blue',
10 | label: 'checkout',
11 | };
12 | const { subtotal, delivery, discount, defaultTotal, clearCart } = useCart();
13 |
14 | const onApprove = async (data, actions) => {
15 | const order = await actions.order.capture();
16 | console.log('Order details:', order);
17 | const email = order.payer.email_address;
18 | const transactionId = order.purchase_units[0].payments.captures[0].id;
19 | clearCart();
20 | alert(`An order confirmation will be sent to email: ${email}. Transaction ID: ${transactionId}.`);
21 | onPaymentComplete();
22 | };
23 |
24 | return (
25 |
12 |
14 | ) : (
15 | You are currently logged in as {currentUser.firstName}.
13 |
16 |
18 | )}
19 |
26 |
46 | {
49 | return actions.order.create({
50 | purchase_units: [
51 | {
52 | amount: {
53 | currency_code: "DKK",
54 | value: defaultTotal,
55 | },
56 | },
57 | ],
58 | });
59 | }}
60 | onApprove={onApprove}
61 | />
62 |
63 |
64 | )
65 | }
66 |
67 | export default OrderSummary
--------------------------------------------------------------------------------
/frontend/src/components/checkout/Payment.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | function Payment() {
4 |
5 | return (
6 |
27 |
30 | {discount > 0 && (
31 | Subtotal
28 |{subtotal}
29 |
32 |
35 | )}
36 | Discount
33 |-10%
34 |
37 |
40 |
41 | Delivery
38 |{delivery}
39 |
42 |
45 | Total
43 |{defaultTotal}
44 |
7 |
17 | )
18 | }
19 |
20 | export default Payment;
21 |
--------------------------------------------------------------------------------
/frontend/src/components/checkout/Shipping.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useUser} from "../../utils/hooks/useUser"
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { icons } from '../../assets/icons/icons';
5 | import useToggle from "../../utils/hooks/useUtil"
6 |
7 | function Details() {
8 | const { currentUser } = useUser();
9 | const { toggle, isToggled } = useToggle();
10 |
11 | return (
12 | PAYMENT OPTIONS
8 | 9 |
10 |
14 |
15 | You will be redirected to PayPal to complete your payment.
16 |
13 |
55 | );
56 | }
57 |
58 | export default Details;
59 |
--------------------------------------------------------------------------------
/frontend/src/components/checkout/_checkout.scss:
--------------------------------------------------------------------------------
1 | .checkout{
2 | @include flex(center, flex-start, row);
3 | margin: auto;
4 | width: 100%;
5 | padding: 5rem 1rem;
6 | @media (max-width: 850px) {
7 | display: block;
8 | padding: 3rem 1rem;
9 | }
10 | }
11 |
12 | .checkout-nav{
13 | @include flex(flex-start, center, row);
14 | width: 100%;
15 | p.separator{
16 | padding: 0 0.5rem;
17 | }
18 | }
19 |
20 | .checkout-tab{
21 | @include flex(center, center, column);
22 | flex: 1;
23 | p, span{
24 | font-size: 0.7rem;
25 | text-align: center;
26 | }
27 | span{
28 | border: 1px solid $color-lightgrey;
29 | background: $color-smoke;
30 | height: 35px;
31 | margin: 0 0.5rem;
32 | width: 35px;
33 | border-radius: 50%;
34 | @include flex(center, center, column);
35 | &.completed{
36 | background: $color-blue;
37 | color: white;
38 | }
39 | }
40 | &.active{
41 | p, span{
42 | color: $color-blue;
43 | }
44 | span{
45 | border: 1px solid $color-blue;
46 | color: $color-blue;
47 | }
48 | }
49 | }
50 |
51 | .checkout-tab-line{
52 | height: 2px;
53 | width: 100%;
54 | background: $color-smoke;
55 | transform: translateY(-10px);
56 | &.completed{
57 | background: $color-blue;
58 | }
59 | }
60 |
61 | .checkout-container{
62 | @include flex(flex-start, center, column);
63 | width: 100%;
64 | max-width: 800px;
65 | padding: 1rem;
66 | min-height: 80vh;
67 | }
68 |
69 | .checkout-content{
70 | min-height: 20vh;
71 | margin-top: 2rem;
72 | width: 100%;
73 | max-width: 800px;
74 | button {
75 | display: inline-block;
76 | }
77 | h1, h2{
78 | font-size: 1rem;
79 | margin: 0.5rem 0 0rem;
80 | }
81 | .line-divider{
82 | margin: 1rem 0;
83 | }
84 | }
85 |
86 | .shipping-content{
87 | input{
88 | width: 100%;
89 | }
90 | }
91 |
92 | .payment-option{
93 | @include flex(flex-start, center, row);
94 | input{
95 | width: 5%;
96 | margin-bottom: 0rem;
97 | }
98 | }
99 |
100 | .checkout-bottom{
101 | width: 100%;
102 | margin-top: 2rem;
103 | display: flex;
104 | justify-content: flex-end;
105 | gap: 1rem;
106 | }
107 |
108 | .checkout-contentbox{
109 | width: 100%;
110 | }
111 |
112 |
113 | .checkout-left{
114 | width: 100%;
115 | }
--------------------------------------------------------------------------------
/frontend/src/components/checkout/_confirm.scss:
--------------------------------------------------------------------------------
1 | .order-summary{
2 | color: $color-grey;
3 | background: $color-smoke;
4 | border: 1px solid $color-lightgrey;
5 | padding: 1rem;
6 | width: 100%;
7 | margin-top: 1rem;
8 | button{
9 | border-radius: 0px;
10 | }
11 | .line{
12 | background: $color-lightgrey;
13 | }
14 | @media (max-width: 850px) {
15 | flex-wrap: wrap-reverse;
16 | margin: 1rem 0 0 0;
17 | max-width: none;
18 | width: 100%;
19 | }
20 | }
21 |
22 | .checkout-right{
23 | @include flex(flex-start, flex-start, column);
24 | width: 100%;
25 | max-width: 300px;
26 | margin-left: 2rem;
27 | }
28 |
29 | .payment-method{
30 | width: 100%;
31 | margin-bottom: 1rem;
32 | }
33 |
34 | .discount-code{
35 | @include flex(space-between, center, row);
36 | gap: 1rem;
37 | width: 100%;
38 | margin-top: 1rem;
39 | button, input{
40 | border-radius: 0px;
41 | margin: 0;
42 | }
43 | button{
44 | border: none;
45 | }
46 | }
47 |
48 |
49 | .complete{
50 | width: 100%;
51 | @include flex(center, center, column);
52 | svg{
53 | color: $color-blue;
54 | height: 100px;
55 | margin: 4rem 0 1rem;
56 | }
57 | button{
58 | margin-top: 1rem;
59 | }
60 | }
--------------------------------------------------------------------------------
/frontend/src/components/home/_home.scss:
--------------------------------------------------------------------------------
1 |
2 | .hero{
3 | z-index: -1;
4 | position: absolute;
5 | width: 100%;
6 | max-width: 1200px;
7 | margin: auto;
8 | height: 25rem;
9 | top: 0;
10 | left: 0;
11 | right: 0;
12 | border-radius: 0 0 50px 50px;
13 | background: $color-smoke;
14 | }
15 |
16 | .hero-img{
17 | position: absolute;
18 | width: 40%;
19 | min-width: 30rem;
20 | bottom: 0;
21 | right: 15%;
22 | transform: rotate(-15deg);
23 | transform-origin: center center;
24 | @media (max-width: 850px) {
25 | right: -5%;
26 | transform: scale(80%) rotate(-15deg);
27 | bottom: 10%;
28 | }
29 | }
30 |
31 | .hero-circle{
32 | overflow: hidden;
33 | position: absolute;
34 | top: 0;
35 | right: 0;
36 | transform: translate(-5%, -60%);
37 | z-index: -1;
38 | border-radius: 50%;
39 | height: 50rem;
40 | width: 50rem;
41 | background: white;
42 | }
43 |
44 | .hero-about{
45 | position: sticky;
46 | display: flex;
47 | padding: 5rem 0 5rem 1rem;
48 | max-width: 1080px;
49 | width: 100%;
50 | margin: auto;
51 | h3{
52 | padding: 0rem 0rem;
53 | font-size: 3rem;
54 | margin: 1rem 0;
55 | }
56 | p{
57 | font-size: 1rem;
58 | }
59 | button{
60 | margin-top: 1rem;
61 | width: 100%;
62 | background: $color-dark;
63 | border: 2px solid $color-dark;
64 | font-size: 1rem;
65 | }
66 | @media (max-width: 800px) {
67 | padding-top: 2rem;
68 | h3{
69 | font-size: 2.5rem;
70 | }
71 | }
72 | }
73 |
74 |
75 |
--------------------------------------------------------------------------------
/frontend/src/components/layout/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Link } from 'react-router-dom';
4 | import FacebookIcon from "../../assets/icons/facebook.svg"
5 | import InstagramIcon from "../../assets/icons/instagram.svg"
6 | import TwitterIcon from "../../assets/icons/twitter.svg"
7 |
8 | const Footer = () => {
9 | return (
10 |
14 | toggle()} icon={icons.edit}>
16 |
17 |
18 | SHIPPING ADDRESS
15 |{currentUser?.firstName} {currentUser?.lastName}
19 |{currentUser?.address}
20 |{currentUser?.postalCode} {currentUser?.city}
21 |Denmark
22 | { isToggled() &&
23 |
24 |
}
54 |
25 |
29 |
33 |
34 |
38 |
42 |
43 |
47 |
51 |
52 |
53 |
11 |
44 | );
45 | };
46 |
47 | export default Footer;
--------------------------------------------------------------------------------
/frontend/src/components/layout/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { useDispatch } from 'react-redux';
4 |
5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6 | import { icons } from '../../assets/icons/icons';
7 | import { useLocation } from 'react-router-dom';
8 | import { useCart } from '../../utils/hooks/useCart';
9 | import { useWishlist } from '../../utils/hooks/useWishlist';
10 | import { searchProducts} from '../../store/reducers/productSlice';
11 |
12 | function Header() {
13 | const location = useLocation();
14 | const { quantity } = useCart();
15 | const { wishlistCount } = useWishlist();
16 | const dispatch = useDispatch();
17 |
18 | const isHome = location.pathname === '/';
19 | const isShop = location.pathname === '/shop';
20 |
21 | const handleSearchChange = (e) => {
22 | dispatch(searchProducts(e.target.value))
23 | }
24 |
25 | return (
26 |
71 | );
72 | }
73 |
74 | export default Header
--------------------------------------------------------------------------------
/frontend/src/components/layout/_footer.scss:
--------------------------------------------------------------------------------
1 |
2 | .footer{
3 | padding: 2rem 1rem 1.5rem;
4 | @include flex(center, flex-start, row);
5 | width: 100%;
6 | max-width: 1080px;
7 | margin: auto;
8 | min-height: 10vh;
9 | border-top: 1px solid $color-lightgrey;
10 | @media (max-width: 700px) {
11 | display: block;
12 | }
13 | }
14 |
15 | .footer-section{
16 | flex: 1 1 12rem;
17 | margin-right: 2rem;
18 | h3{
19 | font-size: 0.8rem;
20 | margin-bottom: 0.8rem;
21 | }
22 | ul{
23 | gap: 5rem;
24 | li{
25 | padding: 0 0 0.5rem 0;
26 | }
27 | li a{
28 | font-size: 0.7rem;
29 | }
30 | }
31 | @media (max-width: 850px) {
32 | margin-top: 1rem;
33 | }
34 |
35 | }
36 |
37 | .footer-socials{
38 | flex: 3 1 30rem;
39 | flex-direction: row;
40 | display: flex;
41 | align-items: flex-start;
42 | justify-content: flex-end;
43 | gap: 1rem;
44 | @media (max-width: 1000px) {
45 | flex: 1 1 20rem;
46 | }
47 | }
48 |
49 | .social-icon-container{
50 | border: 1px solid $color-grey;
51 | padding: 0.3rem ;
52 | border-radius: 50%;
53 | a{
54 | @include flex(center, center, row);
55 | img{
56 | height: 24px;
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/frontend/src/components/layout/_header.scss:
--------------------------------------------------------------------------------
1 | .header-container{
2 | width: 100%;
3 | margin: auto;
4 | max-width: 1080px;
5 | margin: auto;
6 | padding: 1rem;
7 | flex: 1;
8 | @include flex(space-between, center, row);
9 | ul{
10 | @include flex(space-between, center, row);
11 | gap: 1.5rem;
12 | @media (max-width: 850px) {
13 | display: none;
14 | }
15 | }
16 | a h1{
17 | margin-bottom: 0;
18 | font-size: 1.2rem;
19 | }
20 | }
21 | .burger{
22 | font-size: 2rem;
23 | margin-left: 1rem;
24 | display: none;
25 | @media (max-width: 850px) {
26 | display: block;
27 | }
28 | }
29 | .header-tools{
30 | flex: 1;
31 | @include flex(flex-end, flex-end, row);
32 | svg{
33 | padding: 0.5rem;
34 | }
35 | }
36 |
37 | .svg-icon{
38 | height: 40px;
39 | width: 35px;
40 | position: relative;
41 | @include flex(center, center, row);
42 | span{
43 | @include flex(center, center, row);
44 | z-index: 9999;
45 | top: 10%;
46 | right: 0;
47 | border: 2px solid white;
48 | height: 18px;
49 | width: 18px;
50 | text-align: center;
51 | border-radius: 50%;
52 | background: $color-blue;
53 | color: white;
54 | font-size: 0.6rem;
55 | position: absolute;
56 | }
57 | }
58 |
59 | .header-second{
60 | width: 100%;
61 | margin: auto;
62 | @include flex(center, center, row);
63 | background: $color-smoke;
64 | border: 1px solid $color-lightgrey;
65 | @media (max-width: 850px) {
66 | display: none;
67 | }
68 | }
69 |
70 | .header-second-msg{
71 | @include flex(space-between, center, row);
72 | max-width: 1080px;
73 | width: 100%;
74 | padding: 0.25rem 1rem;
75 | p{
76 | font-weight: bold;
77 | color: #666666;
78 | font-size: 0.7rem;
79 | }
80 | p span{
81 | color: $color-blue;
82 | }
83 | }
84 |
85 | .header-second-msg p:first-child {
86 | flex: 1;
87 | text-align: left;
88 | }
89 |
90 | .header-second-msg p:nth-child(2) {
91 | flex: 1;
92 | text-align: center;
93 | }
94 |
95 | .header-second-msg p:last-child {
96 | flex: 1;
97 | text-align: right;
98 | }
99 |
100 | .header-main{
101 | flex: 1;
102 |
103 | }
104 |
105 | .header-search{
106 | display: none;
107 | width: 100%;
108 | border-top: 1px solid $color-lightgrey;
109 | border-bottom: 1px solid $color-lightgrey;
110 | .input-wrapper{
111 | border: none;
112 | max-width: 1080px;
113 | margin: auto;
114 | input{
115 | width: 100%;
116 | }
117 | }
118 | &.active{
119 | display: block;
120 | }
121 | }
122 |
123 | .header-line{
124 | height: 1px;
125 | background: $color-lightgrey;
126 | &.active{
127 | display: none;
128 | }
129 | }
--------------------------------------------------------------------------------
/frontend/src/components/product/ProductItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { icons } from '../../assets/icons/icons';
4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5 | import { useWishlist } from '../../utils/hooks/useWishlist';
6 | import { formatPrice } from '../../utils/hooks/useUtil';
7 |
8 | function ProductCard({product, index}) {
9 | const { wishlistItems, toggleWishlistItem } = useWishlist();
10 | const itemExists = wishlistItems.find((item) => item.productID === product.productID);
11 |
12 | return (
13 | <>
14 | {product.inStock &&
15 |
12 |
20 | SHOP
13 |-
14 |
- Men's sneakers 15 |
- Women's sneakers 16 |
- Kid's sneakers 17 |
- Sale items 18 |
21 |
28 | ABOUT US
22 |-
23 |
- Our story 24 |
- Our team 25 |
- Press 26 |
29 |
37 | CUSTOMER SERVICE
30 |-
31 |
- Shipping & Delivery 32 |
- Returns & Exchanges 33 |
- FAQs 34 |
- Contact Us 35 |
38 | 
39 | 
40 |
41 | 
42 |
43 |
40 |
16 | toggleWishlistItem(product)}
19 | />
20 |
31 | }
32 |
33 | );}
34 |
35 | export default ProductCard;
--------------------------------------------------------------------------------
/frontend/src/components/product/ProductList.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import ProductCard from './ProductItem';
3 | import { useProduct } from '../../utils/hooks/useProduct';
4 | import { useSelector } from 'react-redux';
5 | import { icons } from '../../assets/icons/icons';
6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7 | import useToggle from "../../utils/hooks/useUtil"
8 |
9 | function ProductList() {
10 | const { toggle, isToggled } = useToggle();
11 | const { products, fetchProducts } = useProduct();
12 | const { minPrice: filterMinPrice, maxPrice: filterMaxPrice } = useSelector((state) => state.product.filter);
13 |
14 | const [minPrice, setMinPrice] = useState(filterMinPrice || '');
15 | const [maxPrice, setMaxPrice] = useState(filterMaxPrice || '');
16 | const [sortOrder, setSortOrder] = useState('asc');
17 | const [size, setSize] = useState('');
18 |
19 | useEffect(() => {
20 | fetchProducts();
21 | }, []);
22 |
23 | const filteredProducts = products.filter((product) => {
24 | const minPriceFilter = minPrice === '' || product.defaultPrice >= parseFloat(minPrice);
25 | const maxPriceFilter = maxPrice === '' || product.defaultPrice <= parseFloat(maxPrice);
26 | const sizeFilter = size === '' || product.sizes.map(ps => ps.size).includes(parseInt(size));
27 | return minPriceFilter && maxPriceFilter && sizeFilter;
28 | }).sort((a, b) => {
29 | if (sortOrder === 'lowToHigh') {
30 | return a.defaultPrice - b.defaultPrice;
31 | } else if (sortOrder === 'highToLow') {
32 | return b.defaultPrice - a.defaultPrice;
33 | } else {
34 | return 0;
35 | }
36 | });
37 |
38 | return (
39 |
21 | 
22 |
23 |
24 |
25 |
30 | {product.brand}
26 |{product.name}
27 |{formatPrice(product.defaultPrice)}
28 | 29 |
40 |
76 | );
77 | }
78 |
79 | export default ProductList
--------------------------------------------------------------------------------
/frontend/src/components/product/_filter.scss:
--------------------------------------------------------------------------------
1 | .filter-control{
2 | @include flex(flex-start, center, row);
3 | width: 100%;
4 | gap: 0.5rem;
5 | margin-bottom: 1rem;
6 | select, input{
7 | margin-bottom: 0rem;
8 | height: 100%;
9 | padding: 0.5rem;
10 | }
11 | }
12 |
13 | .filter-search{
14 | .input-wrapper{
15 | max-width: 500px;
16 | margin: auto;
17 | margin-bottom: 2rem;
18 | }
19 |
20 | }
21 |
22 | .filter-div{
23 | margin-right: 1rem;
24 | a{
25 | display: block;
26 | padding: 0.25rem;
27 | margin-top: 0.6rem;
28 | transform: translateY(-2px);
29 | }
30 | label{
31 | margin-right: 0.5rem;
32 | }
33 | }
34 |
35 | .filter-option{
36 | width: 100%;
37 | display: flex;
38 | }
39 |
40 | .filter-spec{
41 | @include flex(flex-start, center, row);
42 | p{
43 | padding: 0 0.5rem;
44 | }
45 | input{
46 | width: 100px;
47 | }
48 | }
49 |
50 | input[id=maxPrice], input[id=minPrice] {
51 | width: 80px;
52 | }
53 |
--------------------------------------------------------------------------------
/frontend/src/components/product/_product.scss:
--------------------------------------------------------------------------------
1 | .shop{
2 | padding: 2rem 1rem;
3 | max-width: 1080px;
4 | width: 100%;
5 | margin: auto;
6 | }
7 |
8 | .product-grid {
9 | display: grid;
10 | grid-template-columns: repeat(4, 1fr);
11 | grid-gap: 1rem;
12 | }
13 | @media screen and (max-width: 768px) {
14 | .product-grid {
15 | grid-template-columns: repeat(2, 1fr);
16 | }
17 | }
18 |
19 |
20 | .product-card{
21 | position: relative;
22 | width: 100%;
23 | max-width: 320px;
24 | a{
25 | @include flex(center, center, column)
26 | }
27 | svg{
28 | position: absolute;
29 | z-index: 9999;
30 | top: 0;
31 | right: 0;
32 | background: white;
33 | margin: 0.5rem;
34 | padding: 0.3rem;
35 | border-radius: 50%;
36 | color: $color-dark;
37 | z-index: 9999;
38 | }
39 | @media (max-width: 600px) {
40 | margin-bottom: 1rem;
41 | max-width: none;
42 | }
43 | }
44 |
45 | .product-img{
46 | height: 250px;
47 | @include flex(center, center, row);
48 | background: $color-smoke;
49 | img{
50 | max-width: 90%;
51 | object-fit: cover;
52 | }
53 | a{
54 | height: 100%;
55 | }
56 | }
57 |
58 | .product-info{
59 | margin-top: 1rem;
60 | h3, p{
61 | text-align: center;
62 | font-size: 0.8rem;
63 | margin: 0rem;
64 | }
65 | h3{
66 | white-space: normal;
67 | overflow: hidden;
68 | text-overflow: ellipsis;
69 | text-transform: capitalize;
70 | }
71 | }
72 |
73 |
74 | .product-detail-img{
75 | @include flex(center, center, row);
76 | }
77 |
78 | .product-detail-img{
79 | min-height: 60vh;
80 | background: $color-smoke;
81 | flex: 2;
82 | img{
83 | max-width: 80%;
84 | }
85 | }
86 |
87 | .product-detail-about{
88 | input, select{
89 | width: 100%;
90 | }
91 | h2{
92 | font-size: 1rem;
93 | font-weight: 600;
94 | }
95 | h1{
96 | font-size: 1.6rem;
97 | margin-top: 1rem;
98 | line-height: 100%;
99 | }
100 | p:nth-child(3){
101 | margin: 2.5rem 0;
102 | font-size: 1.4rem;
103 | }
104 | p{
105 | margin-top: 1rem;
106 | }
107 | }
--------------------------------------------------------------------------------
/frontend/src/components/wishlist/_wishlist.scss:
--------------------------------------------------------------------------------
1 | .wishlist-control{
2 | a{
3 | display: block;
4 | margin-bottom: 2rem;
5 | text-decoration: underline;
6 | }
7 | }
--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 | import reportWebVitals from './reportWebVitals';
5 | import { BrowserRouter } from 'react-router-dom';
6 | import { Provider } from 'react-redux';
7 | import store from './store/store';
8 |
9 | global.Buffer = global.Buffer || require('buffer').Buffer;
10 |
11 | const root = ReactDOM.createRoot(document.getElementById('root'));
12 | root.render(
13 |
41 |
72 |
42 | toggle()}>
44 | { isToggled() &&
45 |
46 |
70 | }
71 |
47 |
48 |
54 |
55 |
56 |
57 | setMinPrice(event.target.value)} />
58 |
61 | -
59 | setMaxPrice(event.target.value)} /> 60 |
62 |
63 |
68 |
69 |
73 | {filteredProducts.reverse().map((product, index) =>
75 |
34 |
50 | )}
51 |
52 | );
53 |
54 | }
55 |
56 | export default MyAccount
--------------------------------------------------------------------------------
/frontend/src/pages/AdminPanel.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import Users from '../components/admin/UsersTable';
3 | import Orders from '../components/admin/OrdersTable';
4 | import Products from '../components/admin/ProductsTable';
5 |
6 | const tabs = ['Products', 'Orders', 'Users',];
7 |
8 | function AdminPanel() {
9 | const [activeTab, setActiveTab] = useState(0);
10 |
11 | const handleTabClick = (index) => {
12 | setActiveTab(index);
13 | };
14 |
15 | return (
16 | -
35 | {tabs.map((tab, index) => (
36 |
- handleTabClick(index)} 40 | > 41 | {tab} 42 | 43 | ))} 44 |
46 | {activeTab === 0 && }
48 |
49 |
17 |
32 | );
33 | }
34 |
35 |
36 |
37 | export default AdminPanel
--------------------------------------------------------------------------------
/frontend/src/pages/Authentication.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import Register from "../components/auth/RegisterForm";
3 | import Login from "../components/auth/LoginForm";
4 |
5 | function Authentication() {
6 | const [activeTab, setActiveTab] = useState('login');
7 |
8 | return (
9 | -
18 | {tabs.map((tab, index) => (
19 |
- handleTabClick(index)} 23 | > 24 | {tab} 25 | 26 | ))} 27 |
10 |
27 | );
28 | }
29 |
30 | export default Authentication;
31 |
--------------------------------------------------------------------------------
/frontend/src/pages/Cart.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import CartItems from "../components/cart/CartItem";
3 | import { useCart } from '../utils/hooks/useCart';
4 | import { Link } from 'react-router-dom';
5 | import { formatPrice } from '../utils/hooks/useUtil';
6 | import {DELIVERY_THRESHOLD} from '../store/reducers/cartSlice';
7 |
8 | function CartPage() {
9 | const { discount, applyDiscount, clearCart, items, subtotal, defaultSubtotal, delivery, total, quantity } = useCart();
10 | const [discountCode, setDiscountCode] = useState('');
11 |
12 | return (
13 |
11 | {activeTab === 'login' &&
14 |
26 |
14 |
65 | );
66 | }
67 |
68 | export default CartPage
--------------------------------------------------------------------------------
/frontend/src/pages/Checkout.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import Payment from '../components/checkout/Payment';
3 | import LogIn from '../components/checkout/LogIn';
4 | import Shipping from '../components/checkout/Shipping';
5 | import Confirmation from '../components/checkout/Confirmation';
6 | import Complete from "../components/checkout/Complete"
7 |
8 | import { Link } from 'react-router-dom';
9 | import { selectCurrentUser } from '../store/reducers/userSlice';
10 | import { useSelector } from 'react-redux';
11 |
12 | const tabs = ["Log In", "Shipping", "Payment", "Confirm", "Done"];
13 |
14 | function Checkout() {
15 | const [activeTab, setActiveTab] = useState(0);
16 | const currentUser = useSelector(selectCurrentUser);
17 |
18 | useEffect(() => {
19 | if (currentUser) {
20 | setActiveTab(1);
21 | }
22 | }, [currentUser]);
23 |
24 | const isLastTab = activeTab === tabs.length - 1;
25 | const isSecondLastTab = activeTab === tabs.length - 2;
26 |
27 | const onPaymentComplete = () => {
28 | setActiveTab(4);
29 | };
30 |
31 | return (
32 |
15 |
25 | {quantity > 0 && (
26 | Shopping Bag {quantity > 0 ? "(" + quantity + " " + (quantity === 1 ? "product" : "products") + ")" : ""}
16 | {items.length === 0 ? ( 17 |There’s nothing in your bag yet.
18 | ) : ( 19 |
20 |
23 | )}
24 |
27 |
63 | )}
64 |
28 |
56 | { !discount > 0 &&
57 | Summary
29 |
30 |
33 | {discount > 0 && (
34 | Subtotal
31 |{subtotal ? subtotal : 0}
32 |
35 |
38 | )}
39 | Discount
36 |-10%
37 |
40 |
43 |
44 | Delivery
41 |{delivery ? delivery : "Free"}
42 |
45 |
48 |
49 | {defaultSubtotal < DELIVERY_THRESHOLD ? (
50 | Total
46 |{total ? total : 0}
47 |51 | Spend {formatPrice(DELIVERY_THRESHOLD - defaultSubtotal)} more and get free shipping! 52 |
53 | ) : (Your order is eligible for free shipping.
) 54 | } 55 |
58 | setDiscountCode(e.target.value)} />
59 |
60 |
61 | }
62 |
33 |
70 | )
71 | }
72 |
73 | export default Checkout;
74 |
--------------------------------------------------------------------------------
/frontend/src/pages/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import hero from "../assets/icons/hero2.png"
3 |
4 | function Home() {
5 | return (
6 | <>
7 |
34 |
49 |
69 |
50 | {activeTab === 0 && }
54 | {activeTab === 4 &&
56 |
68 |
8 |
9 | 
10 |
11 |
12 |
19 |
13 |
18 | LIMITED OFFER
14 |SAVE 10%
15 |USE DISCOUNT
16 | 17 |
20 |
24 |
25 | );
26 | }
27 |
28 | export default Home;
--------------------------------------------------------------------------------
/frontend/src/pages/ProductDetail.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 |
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { icons } from '../assets/icons/icons';
5 |
6 | import { useParams } from 'react-router-dom';
7 | import { useCart } from "../utils/hooks/useCart";
8 | import { useProduct } from '../utils/hooks/useProduct';
9 | import { useWishlist } from '../utils/hooks/useWishlist';
10 | import { formatPrice } from '../utils/hooks/useUtil';
11 |
12 | function ProductDetail() {
13 | const { id } = useParams();
14 | const { addToCart } = useCart();
15 | const { products, fetchProducts } = useProduct();
16 | const { wishlistItems, toggleWishlistItem } = useWishlist();
17 | const [selectedSize, setSelectedSize] = useState(null);
18 | const [defaultSize, setDefaultSize] = useState(null);
19 | const product = products.find((product) => product?.productID === Number(id));
20 | const itemExists = wishlistItems.find((item) => item?.productID === product?.productID);
21 |
22 | useEffect(() => {
23 | fetchProducts();
24 | }, []);
25 |
26 | useEffect(() => {
27 | if (product) {
28 | if (!selectedSize) {
29 | const defaultIndex = product?.sizes.findIndex((size) => size.price === product.defaultPrice);
30 | setDefaultSize(defaultIndex);
31 | }
32 | }
33 | }, [selectedSize, product]);
34 |
35 |
36 | return (
37 | <>
38 | {product && (
39 | Just arrived...
21 |Shop brand...
22 |News letter...
23 |
40 |
68 | )}
69 |
70 | );
71 | }
72 |
73 | export default ProductDetail;
74 |
--------------------------------------------------------------------------------
/frontend/src/pages/Shop.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ProductGrid from '../components/product/ProductList'
3 |
4 | function Shop() {
5 | return (
6 |
41 |
42 |
43 |
44 |
67 | {product.brand}
45 |{product.brand} {product.name}
46 |47 | {selectedSize ? `${formatPrice(selectedSize?.price)}` : `${formatPrice(product.defaultPrice)}`} 48 |
49 |
50 |
51 |
58 |
59 |
60 |
61 |
64 |
65 | {product.description}
66 |
10 |
19 | )
20 | }
21 |
22 | export default Wishlist
--------------------------------------------------------------------------------
/frontend/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/frontend/src/store/actions/orderActions.js:
--------------------------------------------------------------------------------
1 | import { createAsyncThunk } from '@reduxjs/toolkit';
2 | import orderApi from '../../utils/api/orderApi';
3 |
4 | export const fetchOrders = createAsyncThunk(
5 | 'orders/fetchOrders',
6 | async () => {
7 | const orders = await orderApi.getOrders();
8 | return orders;
9 | }
10 | );
11 |
12 | export const fetchOrdersByUserId = createAsyncThunk('products/fetchProductById', async (userId) => {
13 | const orders = await orderApi.getOrdersByUserId(userId);
14 | return orders;
15 | });
--------------------------------------------------------------------------------
/frontend/src/store/actions/productActions.js:
--------------------------------------------------------------------------------
1 |
2 | import { createAsyncThunk } from '@reduxjs/toolkit';
3 | import productApi from '../../utils/api/productApi';
4 | import sizeApi from '../../utils/api/sizeApi';
5 |
6 | export const fetchProducts = createAsyncThunk(
7 | 'products/fetchProducts',
8 | async () => {
9 | const products = await productApi.getProducts();
10 | const productSizes = await sizeApi.getProductSizes();
11 | const productSizesMap = productSizes.reduce((map, size) => {
12 | if (!map[size.productID]) {
13 | map[size.productID] = [];
14 | }
15 | map[size.productID].push(size);
16 | return map;
17 | }, {});
18 | const productsWithSizes = products.map(product => {
19 | const { productID } = product;
20 | const sizes = productSizesMap[productID] || [];
21 | const minPrice = Math.min(...sizes.map(({ price }) => price));
22 | const inStock = sizes.length > 0;
23 | return { ...product, sizes, defaultPrice: minPrice, inStock };
24 | });
25 | return productsWithSizes;
26 | }
27 | );
28 |
29 |
30 | export const fetchProductById = createAsyncThunk('products/fetchProductById', async (productId) => {
31 | const product = await productApi.getProduct(productId);
32 | return product;
33 | });
34 |
35 | export const createProduct = createAsyncThunk('products/createProduct', async (product) => {
36 | const createdProduct = await productApi.addProduct(product);
37 | return createdProduct;
38 | });
39 |
40 | export const updateExistingProduct = createAsyncThunk(
41 | 'products/updateExistingProduct',
42 | async ({ productId, product }) => {
43 | const updatedProduct = await productApi.updateProduct(productId, product);
44 | return updatedProduct;
45 | }
46 | );
47 |
48 | export const removeProduct = createAsyncThunk('products/removeProduct', async (productId) => {
49 | const deletedProduct = await productApi.deleteProduct(productId);
50 | return deletedProduct;
51 | });
--------------------------------------------------------------------------------
/frontend/src/store/actions/sizeActions.js:
--------------------------------------------------------------------------------
1 | import sizeApi from '../../utils/api/sizeApi';
2 | import { createAsyncThunk } from '@reduxjs/toolkit';
3 |
4 | export const fetchProductSizes = createAsyncThunk( 'productSizes/fetchProductSizes', async () => {
5 | const productSizes = await sizeApi.getProductSizes();
6 | return productSizes;
7 | }
8 | );
9 |
10 | export const fetchProductSizesByProductId = createAsyncThunk( 'productSizes/fetchProductSizes', async (productId) => {
11 | const productSizes = await sizeApi.getProductSizesByProductId(productId);
12 | return { productId, productSizes };
13 | }
14 | );
15 |
16 | export const addSize = createAsyncThunk('productSizes/addSize', async ({ size, price, quantity, productId }) => {
17 | const newSize = { size, price, quantity, productId };
18 | const createdProductSize = await sizeApi.addProductSize(newSize);
19 | return createdProductSize;
20 | }
21 | );
22 |
23 | export const updateSize = createAsyncThunk(
24 | 'products/updateExistingSize',
25 | async ({ sizeId, size }) => {
26 | try {
27 | const updatedSize = await sizeApi.updateProductSize(sizeId, size);
28 | return updatedSize;
29 | } catch (error) {
30 | console.error('Error updating size: ', error);
31 | throw error;
32 | }
33 | }
34 | );
35 |
36 | export const deleteSize = createAsyncThunk('products/deleteSize', async (productSizeId) => {
37 | const deletedSize = await sizeApi.deleteProductSize(productSizeId);
38 | return deletedSize;
39 | });
--------------------------------------------------------------------------------
/frontend/src/store/actions/userActions.js:
--------------------------------------------------------------------------------
1 | import { createAsyncThunk } from "@reduxjs/toolkit";
2 | import userApi from "../../utils/api/userApi";
3 |
4 | export const getUsers = createAsyncThunk("user/login", async () => {
5 | const users = await userApi.getUsers();
6 | return users;
7 |
8 | });
9 |
10 | export const getUser = createAsyncThunk("user/login", async (userId) => {
11 | const user = await userApi.getUser(userId);
12 | return user;
13 |
14 | });
15 |
16 | export const login = createAsyncThunk("user/login", async (loginData) => {
17 | console.log("in slice", loginData)
18 | const userId = await userApi.login(loginData);
19 | console.log("in slice userid", userId)
20 | return userId;
21 |
22 | });
--------------------------------------------------------------------------------
/frontend/src/store/reducers/cartSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 |
3 | export const DELIVERY_THRESHOLD = 1200;
4 |
5 | const cartSlice = createSlice({
6 | name: 'cart',
7 | initialState: {
8 | items: localStorage.getItem('cartItems')
9 | ? JSON.parse(localStorage.getItem('cartItems'))
10 | : [],
11 | subtotal: 0,
12 | delivery: 0,
13 | discount: 0,
14 | total: 0,
15 | },
16 | reducers: {
17 | addToCart: (state, action) => {
18 | const { product, size, quantity = 1, price } = action.payload;
19 | const existingItem = state.items.find(item => item.product.id === product.id && item.size === size);
20 | if (existingItem) {
21 | existingItem.quantity += quantity;
22 | } else {
23 | state.items.push({ product, size, quantity, price });
24 | }
25 | localStorage.setItem('cartItems', JSON.stringify(state.items));
26 | },
27 |
28 | removeFromCart: (state, action) => {
29 | const { product, size } = action.payload;
30 | state.items = state.items.filter(item => item.product.id !== product.id || item.size !== size);
31 | localStorage.setItem('cartItems', JSON.stringify(state.items));
32 | },
33 | updateQuantity: (state, action) => {
34 | const { productId, size, quantity } = action.payload;
35 | const cartItemIndex = state.items.findIndex(item => item.product.id === productId && item.size === size);
36 | if (cartItemIndex !== -1) {
37 | state.items[cartItemIndex].quantity = quantity;
38 | localStorage.setItem('cartItems', JSON.stringify(state.items));
39 | }
40 | },
41 | clearCart: (state, action) => {
42 | state.items = [];
43 | localStorage.removeItem('cartItems');
44 | },
45 | calculateSubtotal: (state, action) => {
46 | const subtotal = state.items.reduce((acc, item) => acc + (item.price * item.quantity), 0);
47 |
48 | if (subtotal >= DELIVERY_THRESHOLD) {
49 | state.delivery = 0;
50 | state.subtotal = subtotal;
51 | } else {
52 | state.delivery = 60;
53 | state.subtotal = subtotal;
54 | }
55 | },
56 | updateDelivery: (state, action) => {
57 | state.delivery = action.payload.deliveryCost;
58 | },
59 | applyDiscount: (state, action) => {
60 | state.discount = action.payload.discount;
61 | console.log("discount sat:",state.discount)
62 | },
63 | getTotal: (state) => {
64 | state.total = state.subtotal - (state.subtotal * state.discount) + state.delivery;
65 | }
66 | }
67 | });
68 |
69 | export const { addToCart, removeFromCart, updateQuantity, clearCart, calculateSubtotal, updateDelivery, applyDiscount, getTotal } = cartSlice.actions;
70 |
71 | export default cartSlice.reducer;
72 |
--------------------------------------------------------------------------------
/frontend/src/store/reducers/orderSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 | import { fetchOrders } from "../actions/orderActions";
3 |
4 | const initialState = {
5 | orders: [],
6 | status: 'idle',
7 | error: null
8 | }
9 |
10 | const orderSlice = createSlice({
11 | name: 'orders',
12 | initialState,
13 | reducers: {},
14 | extraReducers: (builder) => {
15 | builder
16 | .addCase(fetchOrders.pending, (state, action) => {
17 | state.status = 'loading';
18 | })
19 | .addCase(fetchOrders.fulfilled, (state, action) => {
20 | state.status = 'succeeded';
21 | state.orders = action.payload;
22 | })
23 | .addCase(fetchOrders.rejected, (state, action) => {
24 | state.status = 'failed';
25 | state.error = action.error.message;
26 | });
27 | },
28 | });
29 |
30 |
31 | export default orderSlice.reducer;
32 |
--------------------------------------------------------------------------------
/frontend/src/store/reducers/productSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import { fetchProducts } from '../actions/productActions';
3 |
4 | const initialState = {
5 | products: [],
6 | loading: false,
7 | error: null,
8 | status: 'idle',
9 | filter: {
10 | minPrice: null,
11 | maxPrice: null,
12 | sizes: [],
13 | },
14 | };
15 |
16 | const productSlice = createSlice({
17 | name: 'product',
18 | status: "idle",
19 | initialState,
20 | reducers: {
21 | filterProducts: (state, action) => {
22 | const { minPrice, maxPrice, sizes } = action.payload;
23 | state.products = state.products.filter(product => {
24 | const isInPriceRange = (minPrice === null || product.defaultPrice >= minPrice) && (maxPrice === null || product.defaultPrice <= maxPrice);
25 | const hasSize = sizes.length === 0 || product.sizes.some(size => sizes.includes(size));
26 | return isInPriceRange && hasSize;
27 | });
28 | },
29 | searchProducts: (state, action) => {
30 | const query = action.payload.toLowerCase();
31 | const originalProducts = state.originalProducts || state.products;
32 | const filteredProducts = originalProducts.filter(product => {
33 | return (
34 | product.name.toLowerCase().includes(query) ||
35 | product.description.toLowerCase().includes(query)
36 | );
37 | });
38 | state.products = filteredProducts;
39 | state.originalProducts = originalProducts;
40 | if (query.length === 0) {
41 | state.products = originalProducts;
42 | state.originalProducts = null;
43 | }
44 | },
45 | },
46 | setLoad: (state, action) => {
47 | state.loading = action.payload;
48 | },
49 | setError: (state, action) => {
50 | state.error = action.payload;
51 | state.loading = false;
52 | },
53 | extraReducers: (builder) => {
54 | builder
55 | .addCase(fetchProducts.pending, (state) => {
56 | state.status = 'loading';
57 | })
58 | .addCase(fetchProducts.fulfilled, (state, action) => {
59 | state.status = 'succeeded';
60 | state.products = action.payload;
61 | })
62 | .addCase(fetchProducts.rejected, (state, action) => {
63 | state.status = 'failed';
64 | state.error = action.error.message;
65 | });
66 | },
67 | });
68 |
69 | export const {
70 | loadProducts,
71 | filterProducts,
72 | searchProducts,
73 | setLoad,
74 | setError,
75 | removeSelectedProduct,
76 | selectedProduct,
77 | setProduct,
78 | } = productSlice.actions;
79 |
80 | export default productSlice.reducer;
--------------------------------------------------------------------------------
/frontend/src/store/reducers/reducers.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from '@reduxjs/toolkit';
2 | import cartReducer from './cartSlice';
3 | import productReducer from './productSlice';
4 | import sizeReducer from './sizeSlice';
5 | import userReducer from "./userSlice"
6 | import wishlistReducer from "./wishlistSlice"
7 | import searchReducer from "./wishlistSlice"
8 |
9 | const rootReducer = combineReducers({
10 | cart: cartReducer,
11 | product: productReducer,
12 | productSize: sizeReducer,
13 | user: userReducer,
14 | wishlist: wishlistReducer,
15 | });
16 |
17 | export default rootReducer;
--------------------------------------------------------------------------------
/frontend/src/store/reducers/sizeSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import { fetchProductSizes, addSize } from '../actions/sizeActions';
3 |
4 | const initialState = {
5 | productSizes: [],
6 | loading: 'idle',
7 | error: null
8 | };
9 |
10 | export const productSizeSlice = createSlice({
11 | name: 'productSizes',
12 | initialState,
13 | reducers: {
14 | },
15 | extraReducers: (builder) => {
16 | builder
17 | .addCase(fetchProductSizes.pending, (state) => {
18 | state.loading = 'pending';
19 | })
20 | .addCase(fetchProductSizes.fulfilled, (state, action) => {
21 | const { productId, productSizes } = action.payload;
22 | if (productId === state.productId) {
23 | state.loading = 'idle';
24 | state.productSizes = productSizes;
25 | }
26 | })
27 | .addCase(fetchProductSizes.rejected, (state, action) => {
28 | state.loading = 'idle';
29 | state.error = action.error.message;
30 | })
31 | }
32 | });
33 |
34 | export const { } = productSizeSlice.actions;
35 |
36 | export default productSizeSlice.reducer;
37 |
--------------------------------------------------------------------------------
/frontend/src/store/reducers/userSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 | import { login } from "../actions/userActions";
3 |
4 | const initialState = {
5 | currentUser: null,
6 | token: localStorage.getItem("token") || "",
7 | isLoading: false,
8 | error: null,
9 | };
10 |
11 | export const userSlice = createSlice({
12 | name: "user",
13 | initialState,
14 | reducers: {
15 | logout: (state) => {
16 | localStorage.removeItem("token");
17 | state.currentUser = null;
18 | state.token = "";
19 | },
20 | setUser: (state, action) => {
21 | state.currentUser = action.payload;
22 | },
23 | setLoading: (state, action) => {
24 | state.loading = action.payload;
25 | },
26 | setError: (state, action) => {
27 | state.error = action.payload;
28 | },
29 | },
30 | extraReducers: (builder) => {
31 | builder
32 | .addCase(login.pending, (state) => {
33 | state.isLoading = true;
34 | state.error = null;
35 |
36 | })
37 | .addCase(login.fulfilled, (state, action) => {
38 | state.isLoading = false;
39 | state.error = null;
40 | state.token = action.payload.token;
41 | state.currentUser = action.payload.user;
42 | })
43 | .addCase(login.rejected, (state, action) => {
44 | state.isLoading = false;
45 | state.error = action.error.message;
46 | state.token = "";
47 | state.currentUser = null;
48 | console.log("rejected")
49 | });
50 | },
51 | });
52 |
53 | export const { logout } = userSlice.actions;
54 |
55 | export const selectToken = (state) => state.user.token;
56 | export const selectCurrentUser = (state) => state.user.currentUser;
57 | export const selectIsLoading = (state) => state.user.isLoading;
58 | export const selectError = (state) => state.user.error;
59 |
60 | export const { setUser, setLoading, setError } = userSlice.actions;
61 |
62 |
63 | export default userSlice.reducer;
64 |
--------------------------------------------------------------------------------
/frontend/src/store/reducers/wishlistSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 |
3 | const wishlistSlice1 = createSlice({
4 | name: 'wishlist',
5 | initialState: {
6 | items: localStorage.getItem('wishlist')
7 | ? JSON.parse(localStorage.getItem('wishlist'))
8 | : [],
9 | },
10 | reducers: {
11 | addToWishlist: (state, action) => {
12 | const product = action.payload;
13 | const itemIndex = state.items.findIndex((item) => item.productID === product.productID);
14 | if (itemIndex === -1) {
15 | state.items.push(product);
16 | }
17 | localStorage.setItem('wishlist', JSON.stringify(state.items));
18 | },
19 | removeFromWishlist: (state, action) => {
20 | const product = action.payload;
21 | state.items = state.items.filter((item) => item.productID !== product.productID);
22 | localStorage.setItem('wishlist', JSON.stringify(state.items));
23 | },
24 | clearWishlist: (state) => {
25 | state.items = [];
26 | localStorage.removeItem('wishlist');
27 | },
28 | },
29 | });
30 |
31 | export const { addToWishlist, removeFromWishlist, clearWishlist } =
32 | wishlistSlice1.actions;
33 |
34 | export default wishlistSlice1.reducer;
35 |
--------------------------------------------------------------------------------
/frontend/src/store/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import rootReducer from './reducers/reducers';
3 |
4 |
5 | const store = configureStore({
6 | reducer: rootReducer,
7 | devTools: process.env.NODE_ENV !== 'production'
8 | });
9 |
10 | export default store;
--------------------------------------------------------------------------------
/frontend/src/styles/_global.scss:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | body {
7 | line-height: 150%;
8 | font-family: 'Montserrat', sans-serif;
9 | overflow-x: hidden;
10 | color: $color-dark;
11 | }
12 | h1, h2{
13 | font-size: 1.4rem;
14 | margin-bottom: 1rem;
15 | }
16 | h3, h4{
17 | font-size: 1.2rem;
18 | margin-bottom: 1rem;
19 | }
20 | ul{
21 | list-style: none;
22 | }
23 | li{
24 | font-size: 0.8rem;
25 | list-style: none;
26 | padding: 0.5rem 1rem;
27 |
28 | }
29 | input, textarea, select{
30 | padding: 0.75rem;
31 | font-family: 'Montserrat', sans-serif;
32 | border: 1px solid $color-lightgrey;
33 | font-size: 0.8rem;
34 | margin-bottom: 1rem;
35 | resize: none;
36 | }
37 | select{
38 | cursor: pointer;
39 | }
40 | select{
41 | padding: 0.5rem;
42 | }
43 | button{
44 | padding: 1rem;
45 | cursor: pointer;
46 | margin-bottom : 1rem;
47 | background: $color-blue;
48 | font-size: 0.6rem;
49 | font-weight: bold;
50 | color: white;
51 | border: 2px solid $color-blue;
52 | border-radius: 5px;
53 | flex-grow: 1;
54 | flex-shrink: 0;
55 | letter-spacing: 1px;
56 | transition: all 0.1s ease-in-out;
57 | &:hover{
58 | background: $lighter-main;
59 | border: 2px solid $lighter-main;
60 | }
61 | }
62 | label{
63 | font-size: 0.8rem;
64 | width: 100%;
65 |
66 | }
67 | svg.svg-inline--fa{
68 | height: 1rem;
69 | }
70 | img{
71 | max-width: 100%;
72 | max-height: 100%;
73 | object-fit: cover;
74 | }
75 | p{
76 | font-size: 0.8rem;
77 | }
78 | a{
79 | font-size: 0.8rem;
80 | text-decoration: none;
81 | color: black;
82 | cursor: pointer;
83 | }
84 | input[type=number] {
85 | -moz-appearance: textfield;
86 | appearance: text;
87 | }
88 | input[type=radio]:checked {
89 | font-weight: bold;
90 | }
91 | input::-webkit-outer-spin-button,
92 | input::-webkit-inner-spin-button {
93 | -webkit-appearance: none;
94 | margin: 0;
95 | }
96 | input:-webkit-autofill,
97 | input:-webkit-autofill:hover,
98 | input:-webkit-autofill:focus,
99 | input:-webkit-autofill:active{
100 | -webkit-box-shadow: 0 0 0 30px white inset !important;
101 | }
102 |
103 | table{
104 | width: 100%;
105 | box-sizing: border-box;
106 | border-spacing: 0px;
107 | button{
108 | margin: 0;
109 | padding: 0.5rem;
110 | }
111 | }
112 | th, td {
113 | padding:15px;
114 | }
115 | tr{
116 | th{
117 | font-size: 0.8rem;
118 | font-weight: lighter;
119 | background: $color-dark;
120 | text-align: left;
121 | color: white;
122 |
123 | }
124 | &:nth-child(2n){
125 | background: $color-smoke;
126 | }
127 | }
128 | td{
129 | font-size: 0.8rem;
130 | white-space: nowrap;
131 | overflow: hidden;
132 | text-overflow: ellipsis;
133 | }
134 |
135 | @media (max-width: 600px) {
136 | table,
137 | thead,
138 | tbody,
139 | th,
140 | td,
141 | tr {
142 | display: block;
143 | }
144 |
145 | th {
146 | text-align: center;
147 | }
148 |
149 | td {
150 | border-bottom: none;
151 | }
152 |
153 | td:before {
154 | content: attr(data-label);
155 | float: left;
156 | font-weight: bold;
157 | }
158 | }
--------------------------------------------------------------------------------
/frontend/src/styles/_utilities.scss:
--------------------------------------------------------------------------------
1 | .container{
2 | min-height: 90vh;
3 | width: 100%;
4 | margin: auto;
5 | max-width: 1080px;
6 | padding: 5rem 1rem;
7 | @media (max-width: 850px) {
8 | padding: 1rem;
9 | }
10 | }
11 |
12 | .flex{
13 | @include flex(center, flex-start, row);
14 | @media (max-width: 850px) {
15 | display: block;
16 | }
17 | }
18 | .flex-start{
19 | @include flex(flex-start, flex-start, row);
20 | @media (max-width: 850px) {
21 | display: block;
22 | }
23 | }
24 |
25 | .space-between{
26 | margin-bottom: 0.5rem;
27 | width: 100%;
28 | @include flex(space-between, center, row);
29 | }
30 |
31 | .side-container{
32 | flex: 1;
33 | }
34 |
35 | .flex-1{
36 | margin-left: 3rem;
37 | min-width: 20rem;
38 | flex: 1;
39 | @media (max-width: 850px) {
40 | margin: 2rem 0 0 0;
41 | }
42 | }
43 |
44 | .flex-2{
45 | flex: 2;
46 | }
47 |
48 | .divider{
49 | width: 100%;
50 | display: flex;
51 | gap: 1rem;
52 | }
53 |
54 | .line{
55 | margin: 0.5rem 0;
56 | height: 1px;
57 | width: 100%;
58 | background: $color-grey;
59 | }
60 |
61 | .line-divider{
62 | margin: 2rem 0;
63 | height: 1px;
64 | width: 100%;
65 | background: $color-lightgrey;
66 | }
67 |
68 |
69 | .second-button{
70 | max-width: 10rem;
71 | border: 2px solid $color-smoke;
72 | background: $color-smoke;
73 | color: $color-blue;
74 | gap: 1rem;
75 | flex-grow: 0;
76 | flex-shrink: 1;
77 | transition: all 0.1s ease-in-out;
78 | &:hover{
79 | background: $color-blue;
80 | color: white;
81 | border: 2px solid $color-blue;
82 | }
83 | @include flex(center, center, row);
84 | @media (max-width: 1000px) {
85 | span{
86 | display: none;
87 | }
88 |
89 | }
90 | }
91 |
92 | .txt{
93 | padding: 0.5rem 1rem;
94 | border-radius: 20px;
95 | }
96 |
97 | .grey{
98 | background: #f4f4f4;
99 | color: $color-grey;
100 | }
101 | .red{
102 | background: #f2c4c6;
103 | color: #6e3a39;
104 | }
105 | .yellow{
106 | background: #fcee8e;
107 | color: #7c6d29;
108 | }
109 | .green{
110 | background: #c3f0d2;
111 | color: #3b5f45;
112 | }
113 |
114 | .input-wrapper {
115 | display: flex;
116 | align-items: center;
117 | border: 1px solid $color-lightgrey;
118 | background: white;
119 | border-radius: 3px;
120 | input{
121 | margin-bottom: 0;
122 | border: none;
123 | }
124 | }
125 |
126 | .input-label{
127 | display:inline-block;
128 | margin-top: 1rem;
129 | }
130 |
131 | .input-wrapper > svg {
132 | margin: 1rem 0 1rem 1rem;
133 | }
134 |
135 | form span{
136 | color: rgb(180, 0, 0);
137 | font-size: 0.8rem;
138 | }
--------------------------------------------------------------------------------
/frontend/src/styles/main.scss:
--------------------------------------------------------------------------------
1 | $lighter-main: #0b92e6;
2 | $color-dark: #222;
3 | $color-grey: #6d6c6c;
4 | $color-lightgrey: #dbdbdb;
5 | $color-smoke: #f6f6f6;
6 | $color-blue: #0070ba;
7 |
8 | @mixin flex($justify, $align, $direction){
9 | display: flex;
10 | justify-content: $justify;
11 | align-items: $align;
12 | flex-direction: $direction;
13 | }
14 |
15 | @import "global";
16 | @import "utilities";
17 |
18 | // components
19 | @import "../components/layout/header";
20 | @import "../components/layout/footer";
21 | @import "../components/checkout/confirm";
22 | @import "../components/product/filter";
23 |
24 | // pages
25 | @import "../components/wishlist/wishlist";
26 | @import "../components/account/account";
27 | @import "../components/admin/admin";
28 | @import "../components/auth/auth";
29 | @import "../components/cart/cart";
30 | @import "../components/checkout/checkout";
31 | @import "../components/home/home";
32 | @import "../components/product/product";
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/frontend/src/utils/api/orderApi.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { variables } from './variables.js';
3 |
4 | const API_URL = variables.ORDER_API
5 |
6 | const getOrders = async () => {
7 | const response = await axios.get(API_URL);
8 | return response.data;
9 | }
10 |
11 | const getOrdersByUserId = async (userId) => {
12 | const response = await axios.get(`${API_URL}/${userId}`);
13 | return response.data;
14 | }
15 |
16 | const createOrder = async (order) => {
17 | const response = await axios.post(API_URL, order);
18 | return response.data;
19 | }
20 |
21 | const updateOrder = async (orderId, order) => {
22 | const response = await axios.put(`${API_URL}/${orderId}`, order);
23 | return response.data;
24 | }
25 |
26 | const deleteOrder = async (orderId) => {
27 | const response = await axios.delete(`${API_URL}/${orderId}`);
28 | return response.data;
29 | }
30 |
31 | export default {
32 | getOrders,
33 | getOrdersByUserId,
34 | createOrder,
35 | updateOrder,
36 | deleteOrder
37 | };
--------------------------------------------------------------------------------
/frontend/src/utils/api/orderItemApi.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { variables } from './variables.js';
3 |
4 | const API_URL = variables.ORDERITEM_API
5 |
6 | const getOrderItems = async () => {
7 | const response = await axios.get(`${API_URL}`);
8 | return response.data;
9 | };
10 |
11 | const getOrderItemsByOrderId = async (orderId) => {
12 | const response = await axios.get(`${API_URL}/${orderId}`);
13 | return response.data;
14 | };
15 |
16 | const addOrderItem = async (orderItemData) => {
17 | const response = await axios.post(`${API_URL}`, orderItemData);
18 | return response.data;
19 | };
20 |
21 | const updateOrderItem = async (orderItemId, orderItemIata) => {
22 | const response = await axios.put(`${API_URL}/${orderItemId}`, orderItemIata);
23 | return response.data;
24 | };
25 |
26 | const deleteOrderItem = async (productSizeId) => {
27 | const response = await axios.delete(`${API_URL}/${productSizeId}`);
28 | return response.data;
29 | };
30 |
31 | export default {
32 | getOrderItems,
33 | getOrderItemsByOrderId,
34 | addOrderItem,
35 | updateOrderItem,
36 | deleteOrderItem
37 | };
--------------------------------------------------------------------------------
/frontend/src/utils/api/productApi.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { variables } from './variables.js';
3 |
4 | const API_URL = variables.PRODUCT_API
5 |
6 | const getProducts = async () => {
7 | const response = await axios.get(API_URL);
8 | return response.data;
9 | }
10 |
11 | const getProduct = async (productId) => {
12 | const response = await axios.get(`${API_URL}/${productId}`);
13 | return response.data;
14 | }
15 |
16 | const addProduct = async (product) => {
17 | const response = await axios.post(API_URL, product);
18 | return response.data;
19 | }
20 |
21 | const updateProduct = async (productId, product) => {
22 | const response = await axios.put(`${API_URL}/${productId}`, product);
23 | return response.data;
24 | }
25 |
26 | const deleteProduct = async (productId) => {
27 | const response = await axios.delete(`${API_URL}/${productId}`);
28 | return response.data;
29 | }
30 |
31 | export default {
32 | getProducts,
33 | getProduct,
34 | addProduct,
35 | updateProduct,
36 | deleteProduct
37 | };
--------------------------------------------------------------------------------
/frontend/src/utils/api/sizeApi.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { variables } from './variables.js';
3 |
4 | const API_URL = variables.PRODUCTSIZE_API
5 |
6 | const getProductSizes = async () => {
7 | const response = await axios.get(`${API_URL}`);
8 | return response.data;
9 | };
10 |
11 | const getProductSizesByProductId = async (productId) => {
12 | const response = await axios.get(`${API_URL}/${productId}`);
13 | return response.data;
14 | };
15 |
16 | const getProductSize = async (productSizeId) => {
17 | const response = await axios.get(`${API_URL}/${productSizeId}/size`);
18 | return response.data;
19 | };
20 |
21 | const addProductSize = async (productSizeData) => {
22 | const response = await axios.post(`${API_URL}`, productSizeData);
23 | return response.data;
24 | };
25 |
26 | const updateProductSize = async (productSizeId, productSizeData) => {
27 | const response = await axios.put(`${API_URL}/${productSizeId}`, productSizeData);
28 | console.log("in api", response)
29 | return response.data;
30 | };
31 |
32 | const deleteProductSize = async (productSizeId) => {
33 | const response = await axios.delete(`${API_URL}/${productSizeId}`);
34 | return response.data;
35 | };
36 |
37 | export default {
38 | getProductSizes,
39 | getProductSizesByProductId,
40 | getProductSize,
41 | addProductSize,
42 | updateProductSize,
43 | deleteProductSize
44 | };
--------------------------------------------------------------------------------
/frontend/src/utils/api/userApi.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { variables } from './variables.js';
3 | import jwtDecode from 'jwt-decode';
4 |
5 | const API_URL = variables.USER_API
6 |
7 | const getUsers = async () => {
8 | const response = await axios.get(API_URL);
9 | return response.data;
10 | }
11 |
12 | const getUser = async (userId) => {
13 | const response = await axios.get(`${API_URL}/${userId}`);
14 | return response.data;
15 | }
16 |
17 | const createUser = async (user) => {
18 | const response = await axios.post(API_URL, user);
19 | return response.data;
20 | }
21 |
22 | const updateUser = async (userId, user) => {
23 | const response = await axios.put(`${API_URL}/${userId}`, user);
24 | return response.data;
25 | }
26 |
27 | const deleteUser = async (userId) => {
28 | const response = await axios.delete(`${API_URL}/${userId}`);
29 | return response.data;
30 | }
31 |
32 | const login = async (loginData) => {
33 | try {
34 | const response = await axios.post(`${API_URL}/login`, loginData);
35 | if (response.data.token) {
36 | localStorage.setItem('user', JSON.stringify(response.data));
37 | const token = response.data.token;
38 | const decodedToken = jwtDecode(token);
39 | return decodedToken.nameid;
40 | }
41 | return { token: null };
42 | } catch (error) {
43 | if (error.response && error.response.status === 401) {
44 | alert('Invalid email or password');
45 | } else {
46 | alert('An error occurred');
47 | }
48 | return { token: null };
49 | }
50 |
51 | };
52 |
53 | export default {
54 | login,
55 | getUser,
56 | getUsers,
57 | createUser,
58 | updateUser,
59 | deleteUser
60 | };
--------------------------------------------------------------------------------
/frontend/src/utils/api/variables.js:
--------------------------------------------------------------------------------
1 | export const variables = {
2 | BASE_URL: "https://localhost:7089/api/",
3 | USER_API: "https://localhost:7089/api/user",
4 | PRODUCT_API: "https://localhost:7089/api/product",
5 | ORDER_API: "https://localhost:7089/api/order",
6 | PRODUCTSIZE_API: "https://localhost:7089/api/productsize",
7 | ORDERITEM_API: "https://localhost:7089/api/orderitem",
8 | }
--------------------------------------------------------------------------------
/frontend/src/utils/hooks/useCart.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { addToCart, removeFromCart, updateQuantity, calculateSubtotal, getTotal, applyDiscount, clearCart } from '../../store/reducers/cartSlice';
4 | import { formatPrice } from './useUtil';
5 |
6 | export const useCart = () => {
7 | const dispatch = useDispatch();
8 | const items = useSelector(state => state.cart.items);
9 | const subtotal = useSelector(state => state.cart.subtotal);
10 | const delivery = useSelector(state => state.cart.delivery);
11 | const discount = useSelector(state => state.cart.discount);
12 | const total = useSelector(state => state.cart.total);
13 | const quantity = items.reduce((acc, item) => acc + item.quantity, 0);
14 |
15 | useEffect(() => {
16 | dispatch(calculateSubtotal());
17 | }, [items, dispatch, quantity]);
18 |
19 | useEffect(() => {
20 | dispatch(getTotal());
21 | }, [subtotal, delivery, dispatch, discount]);
22 |
23 | const addToCartHandler = (item) => {
24 | dispatch(addToCart(item));
25 | };
26 |
27 | const removeFromCartHandler = (itemId, size) => {
28 | const item = items.find((item) => item.product.id === itemId && item.size === size);
29 | dispatch(removeFromCart({ product: item.product, size }));
30 | };
31 |
32 | const updateQuantityHandler = (productId, size, newQuantity) => {
33 | if (newQuantity === 0) {
34 | const item = items.find((item) => item.product.id === productId && item.size === size);
35 | if (item) {
36 | dispatch(removeFromCart({ product: item.product, size }));
37 | }
38 | } else if (newQuantity <= 10) {
39 | dispatch(updateQuantity({ productId, size, quantity: newQuantity }));
40 | }
41 | };
42 |
43 | const clearCartHandler = () => {
44 | dispatch(clearCart());
45 | };
46 |
47 | const applyDiscountHandler = (discountCode) => {
48 | const discount = 0.1;
49 | if(discountCode.toLowerCase() === "10off"){
50 | dispatch(applyDiscount({ discount }));
51 | } else{
52 | alert("Wrong discount")
53 | }
54 | };
55 |
56 | return {
57 | addToCart: addToCartHandler,
58 | removeFromCart: removeFromCartHandler,
59 | updateQuantity: updateQuantityHandler,
60 | clearCart: clearCartHandler,
61 | applyDiscount: applyDiscountHandler,
62 | items,
63 | defaultSubtotal: subtotal,
64 | defaultTotal: total,
65 | subtotal: formatPrice(subtotal),
66 | delivery: formatPrice(delivery),
67 | total: formatPrice(total),
68 | quantity,
69 | discount
70 | };
71 | };
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/frontend/src/utils/hooks/useProduct.js:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux';
2 | import { fetchProducts, createProduct, updateExistingProduct, removeProduct } from '../../store/actions/productActions';
3 |
4 | export const useProduct = () => {
5 | const dispatch = useDispatch();
6 | const products = useSelector((state) => state.product.products);
7 | const loading = useSelector((state) => state.product.loading);
8 | const error = useSelector((state) => state.product.error);
9 | const status = useSelector((state) => state.product.status);
10 |
11 | const fetchProductsHandler = () => {
12 | dispatch(fetchProducts());
13 | };
14 |
15 | const createProductHandler = (product) => {
16 | dispatch(createProduct(product))
17 | .then(() => {
18 | alert("Product has been added.")
19 | })
20 | };
21 |
22 | const updateExistingProductHandler = (productId, product) => {
23 | dispatch(updateExistingProduct( productId, product ));
24 | };
25 |
26 | const removeProductHandler = (productId) => {
27 | console.log("hey")
28 | if (window.confirm("Are you sure you want to delete this product?")) {
29 | dispatch(removeProduct(productId))
30 | .then(() => {
31 | alert("Product has been deleted.");
32 | });
33 | }
34 | };
35 |
36 | return {
37 | fetchProducts: fetchProductsHandler,
38 | createProduct: createProductHandler,
39 | updateExistingProduct: updateExistingProductHandler,
40 | removeProduct: removeProductHandler,
41 | products,
42 | loading,
43 | error,
44 | status,
45 | };
46 | };
47 |
48 |
--------------------------------------------------------------------------------
/frontend/src/utils/hooks/useSize.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { deleteSize, addSize, updateSize } from '../../store/actions/sizeActions';
4 |
5 | export const useSize = () => {
6 | const dispatch = useDispatch();
7 |
8 | useEffect(() => {
9 | }, []);
10 |
11 | const addSizeHandler = ({ size, price, quantity, productId }, e) => {
12 | dispatch(addSize({ size, price, quantity, productId }))
13 | };
14 |
15 | const updateSizeHandler = ({ sizeId, size }) => {
16 | dispatch(updateSize({ sizeId, size }));
17 | };
18 |
19 | const deleteSizeHandler = (sizeId, e) => {
20 | e.preventDefault();
21 | console.log("sizehook", sizeId )
22 | if (window.confirm("Are you sure you want to delete this size?")) {
23 | dispatch(deleteSize(sizeId)).then(() => {
24 | alert("Size has been deleted.");
25 | });
26 | }
27 | };
28 |
29 | return {
30 | addSize: addSizeHandler,
31 | updateSize: updateSizeHandler,
32 | deleteSize: deleteSizeHandler,
33 | };
34 | };
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/frontend/src/utils/hooks/useUser.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useDispatch, useSelector } from "react-redux";
3 | import { getUsers, getUser, login } from "../../store/actions/userActions";
4 | import { selectCurrentUser, selectError, selectIsLoading, selectToken, setUser } from "../../store/reducers/userSlice";
5 |
6 | export const useUser = () => {
7 | const dispatch = useDispatch();
8 | const token = useSelector(selectToken);
9 | const currentUser = useSelector(selectCurrentUser);
10 | const isLoading = useSelector(selectIsLoading);
11 | const error = useSelector(selectError);
12 |
13 | const getUsersHandler = async () => {
14 | await dispatch(getUsers());
15 | };
16 |
17 | const getUserHandler = async (userId) => {
18 | await dispatch(getUser(userId));
19 | };
20 |
21 | const loginHandler = async (loginData) => {
22 | const { payload: userId } = await dispatch(login(loginData));
23 | const { payload: user } = await dispatch(getUser(userId));
24 | if (user){
25 | dispatch(setUser(user));
26 | }
27 | return user;
28 | };
29 |
30 | useEffect(() => {
31 | if (token) {
32 | }
33 | }, [token]);
34 |
35 | return {
36 | getUsers: getUsersHandler,
37 | getUser: getUserHandler,
38 | login: loginHandler,
39 | // logout: logoutHandler,
40 | token,
41 | currentUser,
42 | isLoading,
43 | error };
44 | };
45 |
--------------------------------------------------------------------------------
/frontend/src/utils/hooks/useUtil.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | export const useStatusString = () => {
4 | return (status) => {
5 | const statusMap = {
6 | 0: { statusString: 'Pending', className: 'yellow' },
7 | 1: { statusString: 'Processing', className: 'green' },
8 | 2: { statusString: 'Shipped', className: 'green' },
9 | 3: { statusString: 'Delivered', className: 'green' },
10 | 4: { statusString: 'Cancelled', className: 'red' }
11 | };
12 | const statusObj = statusMap[status] ?? { statusString: '', className: '' };
13 | return
11 | Clear Wishlist
12 |
13 |
14 | {wishlistItems.map((product, index) =>
15 |
16 | )}
17 |
18 | {statusObj.statusString}
; 14 | }; 15 | }; 16 | 17 | export const useStock = () => { 18 | return (stock) => { 19 | const stockMap = { 20 | true: { statusString: 'In stock', className: 'green' }, 21 | false: { statusString: 'Out of stock', className: 'red' }, 22 | }; 23 | const stockObj = stockMap[stock] ?? { statusString: '', className: '' }; 24 | return{stockObj.statusString}
; 25 | }; 26 | }; 27 | 28 | export default function useToggle(initialValue = false) { 29 | const [toggled, setToggled] = useState(initialValue); 30 | 31 | function toggle() { 32 | setToggled(!toggled); 33 | } 34 | 35 | function isToggled() { 36 | return toggled; 37 | } 38 | 39 | return { toggle, isToggled }; 40 | } 41 | 42 | export function formatPrice(price) { 43 | return price.toLocaleString('da-DK', { style: 'currency', currency: 'DKK' }); 44 | } 45 | 46 | export function formatDate(date) { 47 | const options = { year: 'numeric', month: 'long', day: 'numeric' }; 48 | return new Date(date).toLocaleDateString('us-US', options); 49 | } 50 | 51 | export function formatDateTime(dateTime) { 52 | const options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }; 53 | return new Date(dateTime).toLocaleDateString('us-US', options); 54 | } -------------------------------------------------------------------------------- /frontend/src/utils/hooks/useWishlist.js: -------------------------------------------------------------------------------- 1 | import { useDispatch, useSelector } from 'react-redux'; 2 | import { addToWishlist, clearWishlist, removeFromWishlist } from '../../store/reducers/wishlistSlice'; 3 | 4 | export const useWishlist = () => { 5 | const dispatch = useDispatch(); 6 | const wishlistItems = useSelector(state => state.wishlist && state.wishlist.items); 7 | const wishlistCount = wishlistItems.length; 8 | 9 | const toggleWishlistItemHandler = (product) => { 10 | const itemExists = wishlistItems.find((item) => item.productID === product.productID); 11 | if (!itemExists){ 12 | dispatch(addToWishlist(product)); 13 | } else{ 14 | dispatch(removeFromWishlist(product)); 15 | } 16 | }; 17 | 18 | const clearWishlistItemsHandler = () => { 19 | dispatch(clearWishlist()); 20 | }; 21 | 22 | return { 23 | toggleWishlistItem: toggleWishlistItemHandler, 24 | clearWishlist: clearWishlistItemsHandler, 25 | wishlistCount, 26 | wishlistItems, 27 | }; 28 | }; 29 | --------------------------------------------------------------------------------