@@ -15,7 +15,7 @@ const stripe = require("stripe")('sk_test_51HeTtQImEgmfO9dxsYTv9vHitaqlfq2bW9QkR
 const app = express();
 
 // - Middlrwares
-app.use(cors({ origin: true }))
+app.use(cors())
 app.use(express.json());
 
 // - API Routes

@@ -15,6 +15,7 @@
 "firebase": "^7.23.0",
 "formik": "^2.2.0",
 "history": "^5.0.0",
+"moment": "^2.29.1",
 "node-sass": "^4.14.1",
 "react": "^16.13.1",
 "react-bootstrap": "^1.3.0",

@@ -19,3 +19,6 @@
 @import './components/card/CheckoutCard.scss';
 @import './views/product/Product.scss';
 @import './views/payment/Payment.scss';
+@import './components/order/Order.scss';
+@import './views/orders/Orders.scss';
+@import './views/payment/Payment.scss';

@@ -11,6 +11,7 @@ const CheckoutCard = ({
 active,
 title,
 quantity,
+hiddenAction
 }) => {
 const dis = useDis();
 const formatedPrice = price.toLocaleString("en-US", {
@@ -47,7 +48,8 @@ const CheckoutCard = ({
 <div className="checkout-card__delivery">
 <span>Enable for FREE Delivery </span>
 </div>
-<div className="checkout-card__action">
+{
+!hiddenAction && <div className="checkout-card__action">
 <div className="checkout-card__action__qty">
 <Form>
 <Form.Group>
@@ -65,6 +67,7 @@ const CheckoutCard = ({
 <span onClick={removeCartItem}> Delete</span>
 </div>
 </div>
+}
 </div>
 <div className="checkout-card__price">
 <span>{formatedPrice}</span>

@@ -59,11 +59,12 @@ const Header = () => {
 <span>{user ? "Sign Out" : "Sign In"}</span>
 </div>
 </RouterLink>
-
-<div className="header__nav__option">
-<span>returns</span>
-<span>&orders</span>
-</div>
+<RouterLink to='/orders'>
+<div className="header__nav__option">
+<span>returns</span>
+<span>&orders</span>
+</div>
+</RouterLink>
 <RouterLink to="/checkout">
 <div className="header__nav__cart">
 <span>{cartCount}</span>

@@ -0,0 +1,38 @@
+import React from "react";
+import moment from "moment";
+import CheckoutCard from "./../card/CheckoutCard";
+import CurrencyFormat from "react-currency-format";
+
+const Order = ({ order }) => {
+console.log(order);
+return (
+<div className="order">
+<h2>Order</h2>
+<p>{moment.unix(order.data.created).format("MMMM Do YYYY,h:mma")}</p>
+<p className="order__id">
+<small>{order.id}</small>
+</p>
+{order.data.cartItems &&
+order.data.cartItems.map(({ productId, ...props }) => (
+<div key={productId}>
+<CheckoutCard productId={productId} hiddenAction {...props} />
+<div className="checkout__cart__card" />
+</div>
+))}
+<CurrencyFormat
+value={order.data.amount / 100}
+displayType={"text"}
+thousandSeparator={true}
+decimalScale={2}
+prefix={"$"}
+renderText={(value) => (
+<div className='order__total'>
+<h3>Order Total : {value}</h3>
+</div>
+)}
+/>
+</div>
+);
+};
+
+export default Order;

@@ -0,0 +1,17 @@
+.order {
+padding: 40px;
+margin: 20px 0;
+border: 1px solid lightgray;
+position: relative;
+background-color: white;
+
+&__id {
+position: absolute;
+top: 40px;
+right: 20px;
+}
+&__total {
+font-weight: 500;
+text-align: right;
+}
+}

@@ -39,9 +39,12 @@ export const cartSlice = createSlice({
 removeItem: (state, action) => {
 state.cart = state.cart.filter((item) => item.productId !== action.payload);
 },
+emptyCart: (state) => {
+state.cart=[]
+}
 },
 });
 
-export const { addItem, removeItem , updateItemQuantity} = cartSlice.actions;
+export const { addItem, removeItem , updateItemQuantity, emptyCart} = cartSlice.actions;
 
 export default cartSlice.reducer;

@@ -22,7 +22,7 @@ export const fetchUser = (uid) => {
 .get()
 .then((doc) => {
 if (doc.exists) {
-dis(setUser(doc.data()));
+dis(setUser({...doc.data(), uid: doc.id}));
 } else {
 console.log("No user found !");
 }

@@ -12,6 +12,7 @@ import Product from "./views/product/Product";
 import Payment from "./views/payment/Payment";
 import { loadStripe } from "@stripe/stripe-js";
 import { Elements } from "@stripe/react-stripe-js";
+import Orders from "./views/orders/Orders";
 
 const promise = loadStripe(
 "pk_test_51HeTtQImEgmfO9dx3rV5DTtE8sIiZOUG8KZbdXdfOEAzOG54ej7Xivl2kXmgMrHGV8dLRSlLioJ56v4KbB0bkMnP00UWd0uuAL"
@@ -35,6 +36,10 @@ const routes = [
 path: 'payment',
 element: <Elements stripe={promise}><Payment/></Elements>
 },
+{
+path: 'orders',
+element:<Orders/>
+},
 {
 path: 'product/:productId',
 element: <Product/>

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import { db } from "../../firebase.utils";
+import { selectUser } from "../../redux/userSlice";
+import { useSelector } from "react-redux";
+import Order from './../../components/order/Order';
+
+const Orders = () => {
+const [orders, setOrders] = useState([]);
+const user = useSelector(selectUser);
+
+useEffect(() => {
+if (user) {
+db.collection("users")
+.doc(user?.uid)
+.collection("orders")
+.orderBy("created", "desc")
+.onSnapshot((snapshot) =>
+setOrders(
+snapshot.docs.map((doc) => ({
+id: doc.id,
+data: doc.data(),
+}))
+)
+);
+} else {
+setOrders([])
+}
+}, [user]);
+
+
+return (
+<div className="orders">
+<h1>Your Orders</h1>
+<div className="orders__order">
+{
+orders?.map(order => (
+<Order order={order} key={order.id}/>
+))
+}
+</div>
+</div>
+);
+};
+
+export default Orders;

@@ -0,0 +1,7 @@
+.orders{
+padding: 20px 80px;
+
+& > h1 {
+padding: 30px 0;
+}
+}

@@ -1,18 +1,23 @@
 import React, { useState, useEffect } from "react";
-import {useNavigate} from 'react-router-dom';
-import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { useSelector, useDis } from "react-redux";
 import { selectUser } from "../../redux/userSlice";
+import { emptyCart } from "../../redux/cartSlice";
 import CheckoutCard from "../../components/card/CheckoutCard";
-import { selectCartItems } from "../../redux/cartSelector";
-import { selectCartItemsCount, selectSubtotal } from "../../redux/cartSelector";
+import {
+selectCartItemsCount,
+selectSubtotal,
+selectCartItems,
+} from "../../redux/cartSelector";
 import { Link } from "react-router-dom";
 import { useStripe, useElements, CardElement } from "@stripe/react-stripe-js";
 import CurrencyFormat from "react-currency-format";
 import axios from "../../axios";
+import { db } from "../../firebase.utils";
 
 const Payment = () => {
-
 const navigate = useNavigate();
+const dis = useDis();
 
 const user = useSelector(selectUser);
 const cartItems = useSelector((state) => selectCartItems(state));
@@ -35,29 +40,39 @@ const Payment = () => {
 // Stripe expects the total in a currencies subunits
 url: `/payments/create?total=${subtotal * 100}`,
 });
-
+
 setClientSecret(response.data.clientSecret);
 };
 getClientSecret();
 }, [subtotal]);
-
-
-
+console.log(clientSecret)
 const handleSubmit = async (event) => {
 event.preventDefault();
 setProcessing(true);
 
-const payload = await stripe.confirmCardPayment(clientSecret, {
-payment_method: {
-card: elements.getElement(CardElement)
-}
-}).then(({ paymentIntent }) => {
-// paymentIntent = payment confirmation
-setSucceeded(true)
-setError(null)
-setProcessing(false)
-navigate('/orders')
-})
+await stripe
+.confirmCardPayment(clientSecret, {
+payment_method: {
+card: elements.getElement(CardElement),
+},
+})
+.then(({ paymentIntent }) => {
+// paymentIntent = payment confirmation
+db.collection("users")
+.doc(user?.uid)
+.collection("orders")
+.doc(paymentIntent.id)
+.set({
+cartItems,
+amount: paymentIntent.amount,
+created: paymentIntent.created,
+});
+setSucceeded(true);
+setError(null);
+setProcessing(false);
+dis(emptyCart());
+navigate("/orders");
+});
 };
 
 const handleChange = (event) => {
@@ -92,7 +107,7 @@ const Payment = () => {
 {cartItems.length > 0 &&
 cartItems.map(({ productId, ...props }) => (
 <div key={productId}>
-<CheckoutCard productId={productId} {...props} />
+<CheckoutCard productId={productId} hiddenAction {...props} />
 <div className="checkout__cart__card" />
 </div>
 ))}

@@ -28,4 +28,23 @@
 &__address, &__items,&__details {
 flex: 0.8;
 }
+
+&__details > form {
+max-width: 400px;
+}
+
+&__details > h3 {
+padding-bottom: 20px;
+}
+&__details > form > div > button{
+background: #f0c14b;
+border-radius: 2px;
+width: 100%;
+height: 30px;
+border: 1px solid;
+font-weight: bold;
+margin-top: 10px;
+border-color: #a88724 #9c7e31 #846a29;
+color: #111;
+}
 }

@@ -7815,6 +7815,11 @@ mixin-object@^2.0.1:
 dependencies:
 minimist "^1.2.5"
 
+moment@^2.29.1:
+version "2.29.1"
+resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
 version "1.0.1"
 resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"