From a7e7f90975103c1cb8274fea2cd8ae490d9aa71a Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Sat, 7 May 2022 15:45:44 -0700
Subject: [PATCH] doc: add moment, CheckoutProduct and CurrencyFormat

---
 src/Checkout/Orders/Order.js | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/Checkout/Orders/Order.js b/src/Checkout/Orders/Order.js
index 0e745f4..7b6e44a 100644
--- a/src/Checkout/Orders/Order.js
+++ b/src/Checkout/Orders/Order.js
@@ -1,8 +1,39 @@
 import React from "react";
+import moment from "moment";
+import CheckoutProduct from "../CheckoutProduct";
+import CurrencyFormat from "react-currency-format";
 import "./Order.css";
 
-function Order() {
-  return <section>Order</section>;
+function Order({ 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.basket?.map((item) => (
+        <CheckoutProduct
+          id={item.id}
+          title={item.title}
+          image={item.image}
+          price={item.price}
+          rating={item.rating}
+          hideButton
+        />
+      ))}
+      <CurrencyFormat
+        renderText={(value) => (
+          <h3 className="order__total">Order Total: {value}</h3>
+        )}
+        decimalScale={2}
+        value={order.data.amount / 100}
+        displayType={"text"}
+        thousandSeparator={true}
+        prefix={"$"}
+      />
+    </div>
+  );
 }
 
 export default Order;