Video-27-Create-Place-Order-Page

Megamigi · Jul 17, 2021 · cdba856 · cdba856
1 parent 921a101
commit cdba856
Show file tree

Hide file tree

Showing 3 changed files with 202 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -136,4 +136,8 @@ $ Open http://localhost:3000
 26. Create Payment Page
     1.  create form
     2.  add radio button
-    3.  save method in context
+    3.  save method in context
+27. Create Place Order Page
+    1.  display order info
+    2.  show order summary
+    3.  add place order button
diff --git a/pages/placeorder.js b/pages/placeorder.js
@@ -0,0 +1,194 @@
+import React, { useContext } from 'react';
+import dynamic from 'next/dynamic';
+import Layout from '../components/Layout';
+import { Store } from '../utils/Store';
+import NextLink from 'next/link';
+import Image from 'next/image';
+import {
+  Grid,
+  TableContainer,
+  Table,
+  Typography,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+  Link,
+  Select,
+  MenuItem,
+  Button,
+  Card,
+  List,
+  ListItem,
+} from '@material-ui/core';
+import axios from 'axios';
+import { useRouter } from 'next/router';
+import useStyles from '../utils/styles';
+
+function PlaceOrder() {
+  const classes = useStyles();
+  const router = useRouter();
+  const { state, dispatch } = useContext(Store);
+  const {
+    cart: { cartItems, shippingAddress, paymentMethod },
+  } = state;
+  const round2 = (num) => Math.round(num * 100 + Number.EPSILON) / 100; // 123.456 => 123.46
+  const itemsPrice = round2(
+    cartItems.reduce((a, c) => a + c.price * c.quantity, 0)
+  );
+  const shippingPrice = itemsPrice > 200 ? 0 : 15;
+  const taxPrice = round2(itemsPrice * 0.15);
+  const totalPrice = round2(itemsPrice + shippingPrice + taxPrice);
+
+  return (
+    <Layout title="Shopping Cart">
+      <Typography component="h1" variant="h1">
+        Place Order
+      </Typography>
+
+      <Grid container spacing={1}>
+        <Grid item md={9} xs={12}>
+          <Card className={classes.section}>
+            <List>
+              <ListItem>
+                <Typography component="h2" variant="h2">
+                  Shipping Address
+                </Typography>
+              </ListItem>
+              <ListItem>
+                {shippingAddress.fullName}, {shippingAddress.address},{' '}
+                {shippingAddress.city}, {shippingAddress.postalCode},{' '}
+                {shippingAddress.country}
+              </ListItem>
+            </List>
+          </Card>
+          <Card className={classes.section}>
+            <List>
+              <ListItem>
+                <Typography component="h2" variant="h2">
+                  Payment Method
+                </Typography>
+              </ListItem>
+              <ListItem>{paymentMethod}</ListItem>
+            </List>
+          </Card>
+          <Card className={classes.section}>
+            <List>
+              <ListItem>
+                <Typography component="h2" variant="h2">
+                  Order Items
+                </Typography>
+              </ListItem>
+              <ListItem>
+                <TableContainer>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableCell>Image</TableCell>
+                        <TableCell>Name</TableCell>
+                        <TableCell align="right">Quantity</TableCell>
+                        <TableCell align="right">Price</TableCell>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {cartItems.map((item) => (
+                        <TableRow key={item._id}>
+                          <TableCell>
+                            <NextLink href={`/product/${item.slug}`} passHref>
+                              <Link>
+                                <Image
+                                  src={item.image}
+                                  alt={item.name}
+                                  width={50}
+                                  height={50}
+                                ></Image>
+                              </Link>
+                            </NextLink>
+                          </TableCell>
+
+                          <TableCell>
+                            <NextLink href={`/product/${item.slug}`} passHref>
+                              <Link>
+                                <Typography>{item.name}</Typography>
+                              </Link>
+                            </NextLink>
+                          </TableCell>
+                          <TableCell align="right">
+                            <Typography>{item.quantity}</Typography>
+                          </TableCell>
+                          <TableCell align="right">
+                            <Typography>${item.price}</Typography>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </ListItem>
+            </List>
+          </Card>
+        </Grid>
+        <Grid item md={3} xs={12}>
+          <Card className={classes.section}>
+            <List>
+              <ListItem>
+                <Typography variant="h2">Order Summary</Typography>
+              </ListItem>
+              <ListItem>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Typography>Items:</Typography>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Typography align="right">${itemsPrice}</Typography>
+                  </Grid>
+                </Grid>
+              </ListItem>
+              <ListItem>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Typography>Tax:</Typography>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Typography align="right">${taxPrice}</Typography>
+                  </Grid>
+                </Grid>
+              </ListItem>
+              <ListItem>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Typography>Shipping:</Typography>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Typography align="right">${shippingPrice}</Typography>
+                  </Grid>
+                </Grid>
+              </ListItem>
+              <ListItem>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Typography>
+                      <strong>Total:</strong>
+                    </Typography>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Typography align="right">
+                      <strong>${totalPrice}</strong>
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </ListItem>
+              <ListItem>
+                <Button variant="contained" color="primary" fullWidth>
+                  Place Order
+                </Button>
+              </ListItem>
+            </List>
+          </Card>
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+}
+
+export default dynamic(() => Promise.resolve(PlaceOrder), { ssr: false });
diff --git a/utils/Store.js b/utils/Store.js
@@ -11,6 +11,9 @@ const initialState = {
     shippingAddress: Cookies.get('shippingAddress')
       ? JSON.parse(Cookies.get('shippingAddress'))
       : {},
+    paymentMethod: Cookies.get('paymentMethod')
+      ? Cookies.get('paymentMethod')
+      : '',
   },
   userInfo: Cookies.get('userInfo')
     ? JSON.parse(Cookies.get('userInfo'))