Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Code to add checkout functionality. #9

Open
wants to merge 1 commit into
base: pokemon-cart
Choose a base branch
from
Open

Code to add checkout functionality. #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Overview } from "./Overview";
import { Checkout } from "./Checkout/Checkout";
import { CheckOut } from "./CheckOut/CheckOut";
import { Details } from "./Details";
import { OrderCompleted } from "./OrderCompleted/OrderCompleted";
import { ShoppingCart } from "./ShoppingCart/ShoppingCart";
Expand All @@ -11,7 +11,6 @@ const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
border-bottom: 1px solid #d0d1d3;
`;

const NavBar = styled.nav`
Expand Down Expand Up @@ -82,11 +81,14 @@ const App = () => {
<li>
<Link to="/order-completed">Order Completed</Link>
</li>
<li>
<Link to="/shopping-cart"> Shopping Cart</Link>
</li>
</ul>
<Title>Pokemon ecommerce</Title>
<Title>Pokemon E-Commerce</Title>
<ul>
<li>
<Link to="/checkout">Checkout</Link>
<Link to="/checkout">CheckOut</Link>
</li>
</ul>
</NavBar>
Expand All @@ -99,7 +101,7 @@ const App = () => {
<ShoppingCart />
</Route>
<Route path="/checkout">
<Checkout />
<CheckOut />
</Route>
<Route path="/order-completed">
<OrderCompleted />
Expand Down
248 changes: 246 additions & 2 deletions src/Checkout/Checkout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,247 @@
export function Checkout() {
return <div>Checkout</div>;
import { useState } from "react";
import { useHistory } from "react-router-dom";
import styled from "styled-components";
import { addOrderDetails } from "../common/pokemonStorage";

const SubmitButton = styled.button`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think since it's too many styled components needed it make sense to move them into a separate file. Nothing wrong with this implementation just nice code splitting :)

grid-column-start: first;
grid-column-end: second;
grid-row-start: r6;
grid-row-end: r6;
font-family: inherit;
font-size: 100%;
line-height: 1.15;
font-weight: 700;
margin: 14px 14px 14px 14px;
background-color: black;
color: white;
outline: none;
display: inline-flex;
justify-content: center;
border: 0;
cursor: pointer;
padding: 24px 0;

align-self: end;
&:hover {
opacity: 0.8;
}
`;
const LayoutStyle = styled.div`
display: grid;
grid-template-columns: [first] 50% [second] 50%;
grid-template-rows: [r1] 65px [r2] 65px [r3] 65px [r4] 65px [r5] 65px [r6] 80px;
max-width: 800px;
margin: auto;
`;

const PanelStyle1 = styled.div`
grid-column-start: first;
grid-column-end: second;
grid-row-start: r1;
grid-row-end: r1;
margin-right: 12px;
margin-left: 12px;
margin-top: 0;
margin-bottom: 0;
background-color: white;
`;

const PanelStyle2 = styled.div`
grid-column-start: first;
grid-column-end: first;
grid-row-start: r2;
grid-row-end: r2;
margin-right: 12px;
margin-left: 12px;
margin-top: 0;
margin-bottom: 0;
background-color: white;
`;

const PanelStyle3 = styled.div`
grid-column-start: second;
grid-column-end: second;
grid-row-start: r2;
grid-row-end: r2;
margin-right: 12px;
margin-left: 12px;
margin-top: 0;
margin-bottom: 0;
background-color: white;
`;

const PanelStyle4 = styled.div`
grid-column-start: first;
grid-column-end: second;
grid-row-start: r3;
grid-row-end: r3;
margin-right: 12px;
margin-left: 12px;
margin-top: 0;
margin-bottom: 0;
background-color: white;
`;

const PanelStyle5 = styled.div`
grid-column-start: first;
grid-column-end: second;
grid-row-start: r4;
grid-row-end: r4;
margin-right: 12px;
margin-left: 12px;
margin-top: 0;
margin-bottom: 0;
background-color: white;
`;

const PanelStyle6 = styled.div`
grid-column-start: first;
grid-column-end: second;
grid-row-start: r5;
grid-row-end: r5;
margin-right: 12px;
margin-left: 12px;
margin-top: 0;
margin-bottom: 0;
background-color: white;
`;

const Input = styled.input`
width: 100%;
font-family: "Source Sans Pro", sans-serif;
padding: 8px 8px;
margin: 5px auto 5px auto;
display: block;
text-align: center;
font-size: 18px;
color: black;
font-weight: 300;
`;

export function CheckOut() {
const [contact, setContact] = useState({
fName: "",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: name property as it is - meaning write it in full words firstName, lastName. Because you're not saving any space here but readability would be way better.

lName: "",
email: "",
address: "",
creditcard: "",
});
const history = useHistory();
const handleSubmit = () => {
addOrderDetails({
fName: contact.fName,
lName: contact.lName,
email: contact.email,
address: contact.address,
creditcard: contact.creditcard,
});
history.push(`/order-completed`);
};

function handleChange(event) {
const { name, value } = event.target;

setContact((prevValue) => {
if (name === "fName") {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All that could be written shorter:

setContact((prevState) => {
  ...prevState,
  [name]: value,
});

Let me know if you don't understand this structure so I can explain what it does :)

return {
fName: value,
lName: prevValue.lName,
email: prevValue.email,
address: prevValue.address,
creditcard: prevValue.creditcard,
};
}
if (name === "lName") {
return {
fName: prevValue.fName,
lName: value,
email: prevValue.email,
address: prevValue.address,
creditcard: prevValue.creditcard,
};
}
if (name === "email") {
return {
fName: prevValue.fName,
lName: prevValue.lName,
email: value,
address: prevValue.address,
creditcard: prevValue.creditcard,
};
}
if (name === "address") {
return {
fName: prevValue.fName,
lName: prevValue.lName,
email: prevValue.email,
address: value,
creditcard: prevValue.creditcard,
};
}
if (name === "creditcard") {
return {
fName: prevValue.fName,
lName: prevValue.lName,
email: prevValue.email,
address: prevValue.address,
creditcard: value,
};
}
return "";
});
}

return (
<LayoutStyle>
<PanelStyle1>
<h1>
Hello {contact.fName} {contact.lName}
</h1>
<p>{contact.email}</p>
</PanelStyle1>
<PanelStyle2>
<Input
onChange={handleChange}
value={contact.fName}
name="fName"
placeholder="First Name"
/>
</PanelStyle2>
<PanelStyle3>
<Input
onChange={handleChange}
value={contact.lName}
name="lName"
placeholder="Last Name"
/>
</PanelStyle3>
<PanelStyle4>
<Input
onChange={handleChange}
value={contact.email}
name="email"
placeholder="Email"
/>
</PanelStyle4>
<PanelStyle5>
<Input
onChange={handleChange}
value={contact.creditcard}
name="creditcard"
placeholder="Credit Card"
/>
</PanelStyle5>
<PanelStyle6>
<Input
onChange={handleChange}
value={contact.address}
name="address"
placeholder="Address"
/>
</PanelStyle6>

<SubmitButton onClick={handleSubmit}>Submit</SubmitButton>
</LayoutStyle>
);
}
59 changes: 58 additions & 1 deletion src/OrderCompleted/OrderCompleted.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,60 @@
import styled from "styled-components";
import { GRAY } from "./constants";
import { Card } from "./components/Card";
import { Total } from "./components/Total";
import {
getCartItems,
getOrderDetails,
getCounter,
} 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 OrderCompleted() {
return <div>OrderCompleted</div>;
const cart = getCartItems();
const order = getOrderDetails();
console.log("order", order);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no need for console.log

const cartCounter = getCounter();
const total = cart.reduce(
(acc, current) => acc + current.price * current.quantity,
0
);

return (
<div className="container">
<h1>
{order.fName} {order.lName}
</h1>
<LayoutStyle>
<PanelStyle>
<h2>Order Details: (Total {cartCounter} articles)</h2>
<ScrollStyle>
{cart.map((item) => (
<Card key={item.name} {...item} />
))}
</ScrollStyle>
</PanelStyle>
<PanelStyle>
<Total total={total} />
</PanelStyle>
</LayoutStyle>
</div>
);
}
40 changes: 40 additions & 0 deletions src/OrderCompleted/components/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
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;
`;

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

too many empty lines



export const Card = ({ name, img, price, quantity }) => (
<>
<CardStyle>
<img src={img} alt={name} />
<div>
<strong>{name}</strong>
</div>
<CardPriceStyle>
<p>{quantity}</p>
<p>{price * quantity}</p>
</CardPriceStyle>
</CardStyle>
<HRStyle />
</>
);
Loading