Checkout

.eslintrc

@@ -8,6 +8,7 @@
         "prettier"
     ],
     "rules": {
+        "react/jsx-props-no-spreading": 0,
         "semi": 0,
         "jsx-a11y/click-events-have-key-events": 0,
         "jsx-a11y/no-static-element-interactions": 0,
@@ -25,4 +26,4 @@
             }
         ]
     }
-}
+}

src/App.js

@@ -67,6 +67,7 @@ const App = () => {
         setIsLoading(false);
       })
       .catch((e) => {
+        // eslint-disable-next-line
         console.log(e);
         setIsLoading(false);
       });
@@ -79,9 +80,6 @@ const App = () => {
           <li>
             <Link to="/">Home</Link>
           </li>
-          <li>
-            <Link to="/shopping-cart">ShoppingCart</Link>
-          </li>
           <li>
             <Link to="/order-completed">Order Completed</Link>
           </li>

src/Checkout/Checkout.js

@@ -1,3 +1,7 @@
+import Form from "./components/Form";
+
 export function Checkout() {
-  return <div>Checkout</div>;
+  return <div>
+          <Form />
+  </div>;
 }

src/Checkout/components/Form.jsx

@@ -0,0 +1,80 @@
+import React, {useState}  from 'react'
+import { useHistory } from "react-router-dom";
+import styled from 'styled-components'
+import {setCustomerDetail} from "../../common/customerInfo"
+
+const FormWrapper = styled.div`
+    margin-bottom: 2rem;
+    max-width: 1000px;
+    margin: auto;
+    background-color: black;
+    color: white;
+    justify-content: centre;
+    align-item: center;
+`;
+const PanelStyle = styled.div`
+  margin: 2rem;
+  background-color: white;
+  padding: 2rem;
+  display: block;
+`;
+const FormLayout = styled.form`
+    display: block;
+    margin: 2px;
+`;
+const Label = styled.label`
+    font-weight: 20px;
+    color: black;
+    display: block;
+`;
+const Input = styled.input`
+    width: 100px;
+    height: 15px;
+`;
+const Address = styled.textarea`
+width: 100px;
+    height: 15px
+`;
+const SubmitButton = styled.button`
+    width : 60px;
+    height: 30px;
+    display: block;
+    margin: 5px;
+`;
+
+
+function Form() {
+  const [customer, setCustomer] = useState();
+  const history = useHistory();
+    const handleChange = (e)=>{
+        const name=e.target.value;
+        setCustomer(name);
+        setCustomerDetail(name);
+    }
+const handleSubmit = () =>{
+    history.push(`/order-completed`);
+}
+
+    return (
+        <FormWrapper>
+            <h1>CHECKOUT</h1>
+            <PanelStyle>
+                <FormLayout onSubmit={handleSubmit}>
+                    <Label>NAME</Label>
+                    <Input type="text" maxLength="20" minLength="3" value={customer} onChange={(e)=>handleChange(e)}/>
+                    <Label>EMAIL</Label>
+                    <Input type="email" />
+                    <Label>CITY</Label>
+                    <Input type="text-area" />
+                    <Label>ADDRESS</Label>
+                    <Address />
+                    <Label>CARD</Label>
+                    <Input type="number"/>
+                    <SubmitButton>SUBMIT</SubmitButton>
+                </FormLayout>
+            </PanelStyle>
+        </FormWrapper>
+    )
+}
+export default Form
+

src/Details/components/MetaSection/index.js

@@ -58,7 +58,7 @@ const SubTitle = styled.h3`
   border-bottom: 1px solid grey;
 `;
 
-const MetaSection = ({ type, name, price, stats, abilities }) => (
+const MetaSection = ({ type, name, price, stats, abilities, onAddToCart }) => (
   <Wrapper>
     <Type>{titleCase(type)}</Type>
     <Title>{titleCase(name)}</Title>
@@ -67,7 +67,7 @@ const MetaSection = ({ type, name, price, stats, abilities }) => (
       {price} ¥ <PriceTax>VAT included</PriceTax>
     </Price>
 
-    <BuyButton>Add to bag</BuyButton>
+    <BuyButton onClick={onAddToCart}>Add to bag</BuyButton>
 
     <SubTitle>Stats</SubTitle>
     <Stats data={stats} />

src/Details/index.js

@@ -1,11 +1,12 @@
 /* eslint-disable react/prop-types */
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useHistory } from "react-router-dom";
 import styled from "styled-components";
 import { DetailsLayout } from "./components/DetailsLayout";
 import { ImageSection } from "./components/ImageSection";
 import { ThumbnailSection } from "./components/ThumbnailSection";
 import { MetaSection } from "./components/MetaSection";
+import { addToCart } from "../common/pokemonStorage";
 
 const CrossSellingSection = styled.div`
   grid-area: crossselling;
@@ -19,6 +20,7 @@ export function Details() {
   const [data, setData] = useState(null);
   const [selectedImage, setSelectedImage] = useState("");
 
+  const history = useHistory();
   useEffect(() => {
     fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
       .then((res) => res.json())
@@ -31,6 +33,17 @@ export function Details() {
       });
   }, [id]);
 
+  const handleAdd = () => {
+    addToCart({
+      img: data.sprites.other["official-artwork"].front_default,
+      name: data.name,
+      type: data.types[0].type.name,
+      price: data.base_experience,
+      quantity: 1,
+    })
+    history.push(`/shopping-cart`);
+  };
+
   if (!data) {
     return <span>Loading</span>;
   }
@@ -59,6 +72,7 @@ export function Details() {
         price={data.base_experience}
         stats={data.stats}
         abilities={data.abilities}
+        onAddToCart={handleAdd}
       />
 
       <CrossSellingSection>

src/OrderCompleted/OrderCompleted.js

@@ -1,3 +1,68 @@
+import styled from 'styled-components'
+import {getCustomerDetail} from '../common/customerInfo'
+import {getCartItems} from '../common/pokemonStorage'
+
+const Wrapper = styled.div`
+  margin: 5px;
+  width: 550px;
+  background-color: #ffffcc ;
+`;
+const Message = styled.h4`
+  padding: 10px;
+  display: flex;
+`;
+const ScrollStyle = styled.div`
+  overflow-y: scroll;
+  max-height: 500px;
+  width: 500px;
+`;
+const CardStyle = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  img {
+    width: 100px;
+    background-color: cream;
+  }
+  div {
+    padding: 1rem;
+  }
+`;
+
+const CardPriceStyle = styled.div`
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`;
+const Card = ({name, img, type, price, quantity}) =>(
+  <CardStyle>
+      <img src={img} alt={name} />
+      <div>
+        <strong>{name}</strong>
+        <p>{type}</p>
+      </div>
+      <CardPriceStyle>
+        <p>{quantity}</p> <p>{price}</p>
+      </CardPriceStyle>
+    </CardStyle>
+);
 export function OrderCompleted() {
-  return <div>OrderCompleted</div>;
+  const customerName = getCustomerDetail();
+  const cart= getCartItems();
+  return (
+  <Wrapper>
+    <Message>Hello {customerName} your order was successfully placed, Thank You for Shopping with us!!</Message>
+    <br />
+    <Message>ORDERED LIST</Message>
+    <ScrollStyle>
+          {cart.map((item) => (
+            <Card
+              key={item.name}
+              {...item}
+            />
+          ))}
+          <h5>TOTAL AMOUNT={cart.reduce((acc, current) => acc + current.price, 0)}</h5>
+        </ScrollStyle>  
+  </Wrapper>
+  );
 }

src/ShoppingCart/ShoppingCart.js

@@ -1,3 +1,67 @@
+import styled from "styled-components";
+import { useState } from "react";
+import { useHistory } from "react-router-dom";
+import { GRAY } from "./constants";
+import { Card } from "./components/Card";
+import { Total } from "./components/Total";
+import { getCartItems, removeFromCart } from "../common/pokemonStorage";
+
+const LayoutStyle = styled.div`
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  max-width: 1024px;
+  background-color: ${GRAY};
+  margin: auto;
+`;
+
+const PanelStyle = styled.div`
+  margin: 1rem;
+  background-color: white;
+  padding: 1rem;
+`;
+
+const ScrollStyle = styled.div`
+  overflow-y: scroll;
+  max-height: 500px;
+`;
+
 export function ShoppingCart() {
-  return <div>ShoppingCart</div>;
+  const [cart, setCart] = useState(getCartItems());
+  const history = useHistory();
+  const handleRemove = (name) => {
+    setCart(removeFromCart(name));
+  };
+
+  const handleCheckout = () =>{
+    history.push(`/checkout`);
+  }
+  if (cart.length === 0) {
+    return (
+      <LayoutStyle>
+        <PanelStyle>
+          <h2>Your cart is empty</h2>{" "}
+        </PanelStyle>
+      </LayoutStyle>
+    );
+  }
+
+  return (
+    <LayoutStyle>
+      <PanelStyle>
+        <h2>Place you order ({cart.length} article)</h2>
+        <ScrollStyle>
+          {cart.map((item) => (
+            <Card
+              key={item.name}
+              {...item}
+              onRemove={() => handleRemove(item.name)}
+            />
+          ))}
+        </ScrollStyle>
+      </PanelStyle>
+      <PanelStyle>
+        <Total total={cart.reduce((acc, current) => acc + current.price, 0)} handleCheckout= {handleCheckout} />
+      </PanelStyle>
+    </LayoutStyle>
+  );
 }

src/ShoppingCart/components/Card.js

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import { GRAY } from "../constants";
+import { HRStyle } from "./Hr";
+
+const CardStyle = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  img {
+    width: 100px;
+    background-color: ${GRAY};
+  }
+  div {
+    padding: 1rem;
+  }
+`;
+
+const CardPriceStyle = styled.div`
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`;
+
+const RemoveStyle = styled.a`
+  color: black;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const Card = ({ name, img, type, price, quantity, onRemove }) => (
+  <>
+    <CardStyle>
+      <img src={img} alt={name} />
+      <div>
+        <strong>{name}</strong>
+        <p>{type}</p>
+        <RemoveStyle onClick={onRemove}>Remove</RemoveStyle>
+      </div>
+      <CardPriceStyle>
+        <p>{quantity}</p>
+        <p>{price}</p>
+      </CardPriceStyle>
+    </CardStyle>
+    <HRStyle />
+  </>
+);

src/ShoppingCart/components/Hr.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { GRAY } from "../constants";
+
+export const HRStyle = styled.hr`
+  border: 0.5px solid ${GRAY};
+`;