Video-25-Create-Shipping-Page

Edgarwu1984 · Jul 16, 2021 · 57ca901 · 57ca901
1 parent 52b2af7
commit 57ca901
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -128,4 +128,8 @@ $ Open http://localhost:3000
 24. Login and Register Form Validation
     1.  install react-hook-form
     2.  change input to controller
-    3.  use notistack to show errors
+    3.  use notistack to show errors
+25.  Create Shipping Page
+    4.  create form
+    5.  add address fields
+    8.  save in Context and Cookies
diff --git a/components/checkoutWizard.js b/components/checkoutWizard.js
@@ -0,0 +1,16 @@
+import { Step, StepLabel, Stepper } from '@material-ui/core';
+import React from 'react';
+
+export default function CheckoutWizard({ activeStep = 0 }) {
+  return (
+    <Stepper activeStep={activeStep} alternativeLabel>
+      {['Login', 'Shipping Address', 'Payment Method', 'Place Order'].map(
+        (step) => (
+          <Step key={step}>
+            <StepLabel>{step}</StepLabel>
+          </Step>
+        )
+      )}
+    </Stepper>
+  );
+}
diff --git a/pages/shipping.js b/pages/shipping.js
@@ -1,14 +1,213 @@
-import React, { useContext } from 'react';
+import {
+  List,
+  ListItem,
+  Typography,
+  TextField,
+  Button,
+} from '@material-ui/core';
 import { useRouter } from 'next/router';
+import React, { useContext, useEffect } from 'react';
+import Layout from '../components/Layout';
 import { Store } from '../utils/Store';
+import useStyles from '../utils/styles';
+import Cookies from 'js-cookie';
+import { Controller, useForm } from 'react-hook-form';
+import CheckoutWizard from '../components/CheckoutWizard';
 
 export default function Shipping() {
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+    setValue,
+  } = useForm();
   const router = useRouter();
   const { state, dispatch } = useContext(Store);
-  const { userInfo } = state;
-  if (!userInfo) {
-    router.push('/login?redirect=/shipping');
-  }
+  const {
+    userInfo,
+    cart: { shippingAddress },
+  } = state;
+  useEffect(() => {
+    if (!userInfo) {
+      router.push('/login?redirect=/shipping');
+    }
+    setValue('fullName', shippingAddress.fullName);
+    setValue('address', shippingAddress.address);
+    setValue('city', shippingAddress.city);
+    setValue('postalCode', shippingAddress.postalCode);
+    setValue('country', shippingAddress.country);
+  }, []);
 
-  return <div>Shipping page</div>;
+  const classes = useStyles();
+  const submitHandler = ({ fullName, address, city, postalCode, country }) => {
+    dispatch({
+      type: 'SAVE_SHIPPING_ADDRESS',
+      payload: { fullName, address, city, postalCode, country },
+    });
+    Cookies.set('shippingAddress', {
+      fullName,
+      address,
+      city,
+      postalCode,
+      country,
+    });
+    router.push('/payment');
+  };
+  return (
+    <Layout title="Shipping Address">
+      <CheckoutWizard activeStep={1} />
+      <form onSubmit={handleSubmit(submitHandler)} className={classes.form}>
+        <Typography component="h1" variant="h1">
+          Shipping Address
+        </Typography>
+        <List>
+          <ListItem>
+            <Controller
+              name="fullName"
+              control={control}
+              defaultValue=""
+              rules={{
+                required: true,
+                minLength: 2,
+              }}
+              render={({ field }) => (
+                <TextField
+                  variant="outlined"
+                  fullWidth
+                  id="fullName"
+                  label="Full Name"
+                  error={Boolean(errors.fullName)}
+                  helperText={
+                    errors.fullName
+                      ? errors.fullName.type === 'minLength'
+                        ? 'Full Name length is more than 1'
+                        : 'Full Name is required'
+                      : ''
+                  }
+                  {...field}
+                ></TextField>
+              )}
+            ></Controller>
+          </ListItem>
+          <ListItem>
+            <Controller
+              name="address"
+              control={control}
+              defaultValue=""
+              rules={{
+                required: true,
+                minLength: 2,
+              }}
+              render={({ field }) => (
+                <TextField
+                  variant="outlined"
+                  fullWidth
+                  id="address"
+                  label="Address"
+                  error={Boolean(errors.address)}
+                  helperText={
+                    errors.address
+                      ? errors.address.type === 'minLength'
+                        ? 'Address length is more than 1'
+                        : 'Address is required'
+                      : ''
+                  }
+                  {...field}
+                ></TextField>
+              )}
+            ></Controller>
+          </ListItem>
+          <ListItem>
+            <Controller
+              name="city"
+              control={control}
+              defaultValue=""
+              rules={{
+                required: true,
+                minLength: 2,
+              }}
+              render={({ field }) => (
+                <TextField
+                  variant="outlined"
+                  fullWidth
+                  id="city"
+                  label="City"
+                  error={Boolean(errors.city)}
+                  helperText={
+                    errors.city
+                      ? errors.city.type === 'minLength'
+                        ? 'City length is more than 1'
+                        : 'City is required'
+                      : ''
+                  }
+                  {...field}
+                ></TextField>
+              )}
+            ></Controller>
+          </ListItem>
+          <ListItem>
+            <Controller
+              name="postalCode"
+              control={control}
+              defaultValue=""
+              rules={{
+                required: true,
+                minLength: 2,
+              }}
+              render={({ field }) => (
+                <TextField
+                  variant="outlined"
+                  fullWidth
+                  id="postalCode"
+                  label="Postal Code"
+                  error={Boolean(errors.postalCode)}
+                  helperText={
+                    errors.postalCode
+                      ? errors.postalCode.type === 'minLength'
+                        ? 'Postal Code length is more than 1'
+                        : 'Postal Code is required'
+                      : ''
+                  }
+                  {...field}
+                ></TextField>
+              )}
+            ></Controller>
+          </ListItem>
+          <ListItem>
+            <Controller
+              name="country"
+              control={control}
+              defaultValue=""
+              rules={{
+                required: true,
+                minLength: 2,
+              }}
+              render={({ field }) => (
+                <TextField
+                  variant="outlined"
+                  fullWidth
+                  id="country"
+                  label="Country"
+                  error={Boolean(errors.country)}
+                  helperText={
+                    errors.country
+                      ? errors.country.type === 'minLength'
+                        ? 'Country length is more than 1'
+                        : 'Country is required'
+                      : ''
+                  }
+                  {...field}
+                ></TextField>
+              )}
+            ></Controller>
+          </ListItem>
+          <ListItem>
+            <Button variant="contained" type="submit" fullWidth color="primary">
+              Continue
+            </Button>
+          </ListItem>
+        </List>
+      </form>
+    </Layout>
+  );
 }
diff --git a/utils/Store.js b/utils/Store.js
@@ -8,6 +8,9 @@ const initialState = {
     cartItems: Cookies.get('cartItems')
       ? JSON.parse(Cookies.get('cartItems'))
       : [],
+    shippingAddress: Cookies.get('shippingAddress')
+      ? JSON.parse(Cookies.get('shippingAddress'))
+      : {},
   },
   userInfo: Cookies.get('userInfo')
     ? JSON.parse(Cookies.get('userInfo'))
@@ -40,6 +43,11 @@ function reducer(state, action) {
       Cookies.set('cartItems', JSON.stringify(cartItems));
       return { ...state, cart: { ...state.cart, cartItems } };
     }
+    case 'SAVE_SHIPPING_ADDRESS':
+      return {
+        ...state,
+        cart: { ...state.cart, shippingAddress: action.payload },
+      };
     case 'USER_LOGIN':
       return { ...state, userInfo: action.payload };
     case 'USER_LOGOUT':