Checkout in progress

Author: sivadass

src/assets/scss/pages/_checkout.scss

@@ -0,0 +1,65 @@
+.checkout-page {
+  min-height: calc(100vh - 120px);
+  margin-top: 100px;
+  .container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 32px;
+    display: flex;
+    .order-details {
+      flex-grow: 1;
+    }
+    .order-summary {
+      flex-basis: 300px;
+    }
+  }
+}
+
+.timeline {
+  text-align: center;
+  li {
+    display: inline-block;
+    border-bottom: 2px solid $gray-eighty;
+    cursor: pointer;
+    h2 {
+      padding: 16px 32px;
+      text-align: center;
+      font-size: 16px;
+    }
+    &.active {
+      color: $primary-green;
+      border-bottom-color: $primary-green;
+    }
+  }
+}
+.order-details {
+  padding: 24px 0;
+}
+
+.order-summary {
+  padding: 0 24px 24px 24px;
+  background: $white;
+  margin: 24px 0;
+  border-radius: 6px;
+  h2 {
+    padding: 16px;
+  }
+  .cart-items {
+    width: 300px;
+    max-height: 256px;
+    overflow-y: auto;
+  }
+  .total-breakup {
+    border-top: 1px solid $gray-dark-bg;
+    padding-top: 24px;
+    margin-top: 16px;
+    li {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 4px;
+      h2 {
+        padding: 16px 0;
+      }
+    }
+  }
+}

src/components/ProductList.tsx renamed to src/components/ProductList.jsx

@@ -1,12 +1,77 @@
-import React from "react";
+import React, { useContext } from "react";
+import { useHistory } from "react-router-dom";
+import classNames from "classnames";
+import {
+  CartStateContext,
+  CartDispatchContext,
+  removeFromCart,
+  toggleCartPopup
+} from "contexts/cart";
 
 const Checkout = () => {
+  const { items } = useContext(CartStateContext);
   return (
-    <div>
-      <h1>Checkout Page</h1>
-      <div>Contents</div>
+    <div className="checkout-page">
+      <div className="container">
+        <div className="order-details">
+          <ul className="timeline">
+            <li className="done">
+              <h2>Shipping</h2>
+            </li>
+            <li className="active">
+              <h2>Payment</h2>
+            </li>
+            <li>
+              <h2>Review</h2>
+            </li>
+          </ul>
+        </div>
+        <div className="order-summary">
+          <h2>Summary</h2>
+          <ul className="cart-items">
+            {items.map((product) => {
+              return (
+                <li className="cart-item" key={product.name}>
+                  <img className="product-image" src={product.image} />
+                  <div className="product-info">
+                    <p className="product-name">{product.name}</p>
+                    <p className="product-price">{product.price}</p>
+                  </div>
+                  <div className="product-total">
+                    <p className="quantity">
+                      {`${product.quantity} ${
+                        product.quantity > 1 ? "Nos." : "No."
+                      }`}
+                    </p>
+                    <p className="amount">{product.quantity * product.price}</p>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+
+          <ul className="total-breakup">
+            <li>
+              <p>Subtotal</p>
+              <p>5000</p>
+            </li>
+            <li>
+              <p>Tax</p>
+              <p>5000</p>
+            </li>
+            <li>
+              <p>Shipping</p>
+              <p>5000</p>
+            </li>
+            <li>
+              <h2>Total</h2>
+              <h2>5000</h2>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   );
-}
+};
 
-export default Checkout;
+export default Checkout;

src/pages/checkout.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import React, { useEffect, useContext } from "react";
 import ProductCard from "components/Product";
 import {
   ProductsStateContext,