So let's go to shop and let's look at our wonderful products here right. We add a couple to the cart, whatever, we go to checkout right, it shows our total, everything's great right except for our images of course, but those are just placeholders right, we've got everything working.

Okay, we proceed to checkout and it brings us to login, just like the design right. It wants to check if you're logged in, and then when you hit login, okay, so I go to shop, and I'm in the design right now, I add some products to the checkout, we check out right, we're brought here and we proceed to checkout and we're brought to the login okay, so we're in the same place right now.

Now we hit login in the design and it brings us to shipping address okay, so what we need to do is basically have it check if we're logged in, except for we're not implementing that on the backend right, so what we're going to do when we hit proceed to check out is we're just going to have a consumer logged in and take us straight to shipping address okay.

Now what we'll have to do to do that is simply just change the route okay, we add some items, we hit checkout, and then we need to just hit proceed to checkout and have it bring us to that route. So to do that, let's go to... let's close the terminal and let's go to reviewForm.js, proceed to checkout, history.push('/sign in') we want to push this to a different route. We haven't created this route so let's think about it, it's going to be shipping address so let's say shipping information okay so shipping, let's just say shipping-information okay and that will be good.

So let's look at this right here, this shipping address right, shipping information. So after that we go to payment information. So really what we should do is we should make a folder called information and include address and payment in it, like address form and payment form in it because we need to have those two forms. And then we can just switch between those forms right. We can just say hey we want to use the same exact component and just switch between these two forms based on the route, or we could just do it like we've been doing it.

So what I'm gonna do is take us to the component here, right, reviewForm and I'm gonna have it push us to information/address. So it's gonna take us to our address right to fill out our shipping address and then we'll have another route that takes us to payment. So let's go create this route, let's go to bootstrap.js and let's say... let's copy this route here and let's say information/shipping okay. Then we're going to copy that and have it be information payment okay, and those are our last two routes.

bootstrap.js

<Switch>
    <Route path='/' exact component={Signin}/>
    <Route path='/signin' exact component={Signin}/>
    <Route path='/signup' exact component={Signup}/>

    <Route path='/account' exact component={Account}/>

    <Route path='/shop' exact component={Shop}/>
    <Route path='/order/review' exact component={Review}/>

    <Route path='/information/shipping' exact component={Shipping}/>
    <Route path='/information/payment' exact component={Payment}/>
</Switch>

Okay, so make sure that in reviewForm.js you have it pushing to information/shipping. So again all we've done in this video in reviewForm.js we have this proceed button taking us to information/shipping okay. And then in bootstrap we created two new routes that say information/shipping and information/payment. Now they both have the review component in there, so let's go ahead and change that by going into our components directory and creating a new folder called information.

In this information folder we're going to create two components the first being shipping.js, okay so basically in here the idea is we want to create a component with an onSubmit button and a form component within it, very much so like all of our other forms have been, like sign in and sign up they all have a form component in the component.

Let me show you the signin.js, just to make sure you understand. Alright, we have all this and then we have the form within it right, we have the title and then we have the form. So really we've been structuring every page like this even the ones without forms, so let's go ahead and build out the shipping component and put the form in there in the next video.

Okay, so let's import React component from react and really what we could just do is copy one of our components okay. So what I want to do is go to signin.js and let's copy everything in here and let's just paste it in shipping. And the reason I want to do this is because we've done this a million times, it would just be kind of redundant to do it again, we practiced it tons of times right, and we know what's going on here okay. We're using redux to connect it right, we could even put a column in here we could say redux and then signinForm and pageTitle that's pretty obvious, the form will go here.

We obviously don't have a form yet so let's get rid of that, and then let's comment out this signinForm right here okay. Then basically the rest is pretty self-explanatory, we've got our submit function, you should be understanding what's going on at this point. Okay, so we've go class signIn, we obviously want to change that to not signIn okay, so I'm going to select it and hit commanded + d a bunch of times right and it's selecting this one, this one, this one, this one, and this one. Notice how it's selecting the commented out form as well.

Next thing we're going to do is we're going to call this Shipping okay. Next thing I want to do is get rid... well we can leave this here because we might accidentally come here from a route that has links and header links right. Okay, now what we need to do is basically copy this and do it in a new component called payment, we want to do the payment as well.

Remember how in bootstrap.js we have the payment route as well? So we want to do the same thing in a component called payment in information. So let's go to information, let's create a new file called payment.js, in here let's paste what we just pasted into shipping.js right, and let's rename things accordingly okay. So we don't want it to be shipping any more we want this want to be payment, that way we kind of have this all set up.

Obviously there's a couple of things like the classNames of things we've got to change those. But for now we're just leaving things as they are because this is a good default setup okay. Now let's go back to our bootstrap.js and import these components and use them.

Let's go into bootstrap.js and let's say import shipping from./components/information/shipping and import payment from ./components/information/payment. Let's now put them in the routes that they belong in okay, so we have shipping and we have payment. Okay, that should be good.

Alight, now one more thing to do before we check these is change the pageTitle within these right, other wise we're not going to notice a difference. Okay so in shipping.js let's changes pageTitle to shipping address right, and then let's head over to payment.js and say Payment Information. Okay, we're all set there.

Let's go ahead and check it out in the browser, alright let's hit proceed, we have shipping address right, information shipping. Then let's go to information payment and see what happens. Alright payment information, so we're all set up and we're ready to go.

What we need to do in the next video is basically create a form for shipping okay, we want to get the shipping form in there like we have it in our design here, and we will move on after that.

So let's commit our code.

Terminal

git status
git add .
git commit -m "built the information routes and container components payment and shipping js"

I'll see you in the next video.

Resources

Source code