Skip to content

Commit ea753ea

Browse files
basirbasir
authored
Video-27-PlaceOrder-Screen-UI (basir#27)
1 parent 2913710 commit ea753ea

File tree

4 files changed

+173
-18
lines changed

4 files changed

+173
-18
lines changed

‎README.md‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -253,47 +253,39 @@ JS AMAZONA
253253
1. add paypal checkout script
254254
2. show paypal button
255255
3. update order after payment
256-
31. User Profile UI
257-
1. create ProfileScreen.js
258-
2. style elements
259-
32. User Profile Data
260-
1. Create profile info backend api
261-
2. Create user orders api
262-
3. Call apis in the backend
263-
33. Update Profile
264-
1. handle form submit
265-
2. send request to backend
266-
3. create api to update profile
267-
34. Admin Products UI
256+
31. User Order History
257+
1. Create order history api
258+
2. Show orders in profile screen
259+
32. Admin Products
268260
1. create Admin Order menu in header
269261
2. create ProductListScreen.js
270262
3. show products with edit and delete button
271263
4. show create product button
272264
5. implement create product backend
273265
6. redirect user to edit product screen
274-
35. Edit Product
266+
33. Edit Product
275267
1. create ProductListScreen.js
276268
2. load product data from backend
277269
3. handle form submit
278270
4. save product in backend
279-
36. Delete Product
271+
34. Delete Product
280272
1. update ProductListScreen.js
281273
2. handle delete button
282274
3. rerender after deletion
283-
37. Admin Orders
275+
35. Admin Orders
284276
1. create Admin Order menu in header
285277
2. create AdminOrder.js
286278
3. load orders from backend
287279
4. list them in the screen
288280
5. show delete and edit button
289281
6. redirect to order details on edit action
290-
38. Edit Order
282+
36. Edit Order
291283
1. if order is payed show deliver button for admin
292284
2. handle click on deliver button
293285
3. set state to delivered
294-
39. Delete Order
286+
37. Delete Order
295287
1. update OrderListScreen.js
296288
2. handle delete button
297289
3. rerender after deletion
298-
40. Publish heroku
290+
38. Publish heroku
299291
1. publish steps

‎frontend/src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import RegisterScreen from './srceens/RegisterScreen';
99
import ProfileScreen from './srceens/ProfileScreen';
1010
import ShippingScreen from './srceens/ShippingScreen';
1111
import PaymentScreen from './srceens/PaymentScreen';
12+
import PlaceOrderScreen from './srceens/PlaceOrderScreen';
1213

1314
const routes = {
1415
'/': HomeScreen,
@@ -20,6 +21,7 @@ const routes = {
2021
'/profile': ProfileScreen,
2122
'/shipping': ShippingScreen,
2223
'/payment': PaymentScreen,
24+
'/placeorder': PlaceOrderScreen,
2325
};
2426
const router = async () => {
2527
showLoading();

‎frontend/src/srceens/PlaceOrderScreen.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { getCartItems, getShipping, getPayment } from '../localStorage';
2+
import CheckoutSteps from '../components/CheckoutSteps';
3+
4+
const convertCartToOrder = () => {
5+
const orderItems = getCartItems();
6+
if (orderItems.length === 0) {
7+
document.location.hash = '/cart';
8+
}
9+
const shipping = getShipping();
10+
if (!shipping.address) {
11+
document.location.hash = '/shipping';
12+
}
13+
const payment = getPayment();
14+
if (!payment.paymentMethod) {
15+
document.location.hash = '/payment';
16+
}
17+
const itemsPrice = orderItems.reduce((a, c) => a + c.price * c.qty, 0);
18+
const shippingPrice = itemsPrice > 100 ? 0 : 10;
19+
const taxPrice = Math.round(0.15 * itemsPrice * 100) / 100;
20+
const totalPrice = itemsPrice + shippingPrice + taxPrice;
21+
return {
22+
orderItems,
23+
shipping,
24+
payment,
25+
itemsPrice,
26+
shippingPrice,
27+
taxPrice,
28+
totalPrice,
29+
};
30+
};
31+
const PlaceOrderScreen = {
32+
after_render: () => {},
33+
render: () => {
34+
const {
35+
orderItems,
36+
shipping,
37+
payment,
38+
itemsPrice,
39+
shippingPrice,
40+
taxPrice,
41+
totalPrice,
42+
} = convertCartToOrder();
43+
return `
44+
<div>
45+
${CheckoutSteps.render({
46+
step1: true,
47+
step2: true,
48+
step3: true,
49+
step4: true,
50+
})}
51+
<div class="order">
52+
<div class="order-info">
53+
<div>
54+
<h2>Shipping</h2>
55+
<div>
56+
${shipping.address}, ${shipping.city}, ${shipping.postalCode},
57+
${shipping.country}
58+
</div>
59+
</div>
60+
<div>
61+
<h2>Payment</h2>
62+
<div>
63+
Payment Method : ${payment.paymentMethod}
64+
</div>
65+
</div>
66+
<div>
67+
<ul class="cart-list-container">
68+
<li>
69+
<h2>Shopping Cart</h2>
70+
<div>Price</div>
71+
</li>
72+
${orderItems
73+
.map(
74+
(item) => `
75+
<li>
76+
<div class="cart-image">
77+
<img src="${item.image}" alt="${item.name}" />
78+
</div>
79+
<div class="cart-name">
80+
<div>
81+
<a href="/#/product/${item.product}">${item.name} </a>
82+
</div>
83+
<div> Qty: ${item.qty} </div>
84+
</div>
85+
<div class="cart-price"> $${item.price}</div>
86+
</li>
87+
`
88+
)
89+
.join('\n')}
90+
</ul>
91+
</div>
92+
</div>
93+
<div class="order-action">
94+
<ul>
95+
<li>
96+
<h2>Order Summary</h2>
97+
</li>
98+
<li><div>Items</div><div>$${itemsPrice}</div></li>
99+
<li><div>Shipping</div><div>$${shippingPrice}</div></li>
100+
<li><div>Tax</div><div>$${taxPrice}</div></li>
101+
<li class="total"><div>Order Total</div><div>$${totalPrice}</div></li>
102+
<li>
103+
<button class="primary fw">
104+
Place Order
105+
</button>
106+
</div>
107+
</div>
108+
</div>
109+
`;
110+
},
111+
};
112+
export default PlaceOrderScreen;

‎frontend/style.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,3 +294,52 @@ footer {
294294
color: #f08000;
295295
border-top-color: #f08000;
296296
}
297+
/* Order */
298+
.order {
299+
display: flex;
300+
flex-wrap: wrap;
301+
padding: 1rem;
302+
justify-content: space-between;
303+
}
304+
.order h2 {
305+
margin: 0;
306+
padding-bottom: 1rem;
307+
font-size: 2rem;
308+
}
309+
.order .cart-list-container {
310+
padding: 0;
311+
}
312+
.order-info {
313+
flex: 3 1 60rem;
314+
}
315+
.order-info > div {
316+
border: 0.1rem #c0c0c0 solid;
317+
border-radius: 0.5rem;
318+
background-color: #fcfcfc;
319+
padding: 1rem;
320+
margin: 1rem;
321+
}
322+
.order-info > div:first-child {
323+
margin-top: 0;
324+
}
325+
.order-action {
326+
flex: 1 1 20rem;
327+
border: 0.1rem #c0c0c0 solid;
328+
border-radius: 0.5rem;
329+
background-color: #fcfcfc;
330+
padding: 1rem;
331+
}
332+
.order-action > ul {
333+
padding: 0;
334+
list-style-type: none;
335+
}
336+
.order-action li {
337+
display: flex;
338+
justify-content: space-between;
339+
margin-bottom: 1rem;
340+
}
341+
.order-action .total {
342+
font-size: 2rem;
343+
font-weight: bold;
344+
color: #c04000;
345+
}

0 commit comments

Comments
 (0)