So let's head to the code and let's uncomment shipping form in our class here. Let's go ahead and write an import, let's say import shipping form from ./shippingForm.

shipping.js

import PageTitle from './pageTitle';

// REDUX

import { connect } from 'react-redux';
import * as actions from '../../actions';

import ShippingForm from './shippingForm';

Let's go ahead and actually create this shipping form component by going into information and saying shippingForm.js. Let's go ahead and create another component called paymentForm.js and let's import that into payment.js, so let's say import PaymentForm from ./paymentForm. Now let's go ahead and get something in these forms alright, because we have both these forms here now. So let's go to signup.js, and let's go into the signupForm.js file, and let's copy everything in here and paste it into paymentForm.js.

Okay, let's go ahead and let's get rid of the info, let's get rid of the details, and let's go ahead and take all these sign up form names and hit command + d to select them all and let's say PaymentForm.

paymentForm.js

PaymentForm = reduxForm({
    form: 'PaymentForm'
})(PaymentForm);

export default PaymentForm;

Let's then copy everything in here and let's throw it in to shippingForm.js that we just made. Now what we need to do in shippingForm.js is we need to change this to say ShippingForm not PaymentForm. Okay so we have our forms here and they have a lot of content. Lets go see what happens once we remove these import the details let's get that out in both of these detail imports and let's see what it looks like in the browser okay.

All I've done so far is in shipping.js I uncommented this ShippingForm component instance and I've imported ShippingForm from ShippingForm. I did the same thing in payment.js, I uncommented this and imported PaymentForm from PaymentForm and we pasted signupForm in here and made some adjustments. Alright, so obviously there's a lot we need to change but we're going to worry primarily about the shippingForm.js in this video okay. Let's go see what it looks like in Google Chrome now, okay let's go to react here and we have these messed up forms right. If you go to information/payment it looks the same but it says payment information.

Okay so back to shipping address, what we need to do is basically get rid of the fields we don't want and add fields we want and then align it all with css grid. Alright, so we need a name, street address, city, state, and zip. Okay so let's just remember that one more time. Name, street address, city, state, and zip. Okay, so name, then let's change email to city, and then we need the state, and zip. And then let's put the password on... let's cut it out, and let's cut out confirm as well and let's leave these two okay, so we're leaving the line, login, and back.

So all we have is name and city right now. Okay, I'm going to copy city two times and in the first one I'm going to say sign-up-form and I'm going to call it address. Now what we're going to do is rename all of these to address and these two are going to be Street Address okay. Now what we need to do is move city below address so it matches our form. And now all we have is state and zip code right there okay, because we have name, street address, and city now.

All we need now is the state and zip, so I'm gonna copy this one more time here and I'm going to call this state okay, and these two are going to be capitol S, right and then same with this one, it's just going to be Zipcode, these two are going to be capital because they're labels.

Alright so we're set in this form. We have name, address, city, state, and zip code, we have our line, we have our login button, and our back button. Now we need to change the login button a bit so that it says Use this Address, so let's go to the login here and let's just say use-this-address, we'll keep the type as submit, and we'll push it to information/payment. We'll change the title to Use this Address and we'll change the name to use-this-address okay.

Alright, everything else is the same. Go ahead and take a look at this, your code should look like this alright. So let me just go through this one more time. Alright, we have our component, shipping form, we're taking our className and handleSubmit and we're returning form okay. This form contains a bunch of field's name, address, city, state, and zip code. It also contains a line, use this address, and a back button okay. And then we're decorating it with redux form and we're exporting the component.

Okay, so that's pretty simple stuff, we've done it a few times now. Obviously it's not going to be 100 percent in your head yet but that's okay. Alright, so Google Chrome, let's see what we've got, alright this is our form so far.

So the reason it's all over the place is because we have a couple fields that belong to the sign up form right. And we're using the sign up className, so we need to change this so we can have our own grid. So let's change all of these sign-up classNames to instead say shipping-form, on all of these. Shipping-form name, shipping-form address, shipping-form city, shipping-form state, shipping-form zipcode, and so on right, that way we can make our own grid.

Let's take a look in the browser and see what it looks like now, they should be all lined up. Alright almost lined up, not quite but it's a little bit different than what we had before.

So what we need to do in this video is align these on our own grid. So let's go ahead and let's go down to our CSS folders and let's create a new folder, and let's call it information. We're going to have a couple CSS files in here, one is going to be shipping.scss and the other will be payment.scss. Alright, let's go ahead and import both of these into our main.scss file.

So I'm going to say information here and I'm going to import information payment and I will import information shipping.

main.scss

// INFORMATION
@import 'information/payment';
@import 'information/shipping';

Alright, so we've got those imports and we've got that set up. Let's go into shipping.scss and let's start building out our shipping styles. So we need to say .shipping and we'll say &__form, then down here we'll say .shipping-form and we'll put in all of our names, so we have name, we have address, we have city, we have state, and we have zip code, we also have our line, our back button, and our use-this-address button. So we have all our fields in here.

shipping.scss

.shipping {
    &__form {

    }
}

.shipping-form {
    &__name {

    }
    &__address {

    }
    &__city {

    }
    &__state {

    }
    &__zipcode {

    }
    &__line {

    }
    &__back {

    }
    &__use-this-address {

    }
}

Okay, let's go ahead and let's take a peek at our shipping.js file, once you get that in. And in this file we need to change these classNames okay, they're all signin still, let's change these to shipping-form okay. So we're all set up, let's go ahead and let's go to our shipping.scss file and let's head to Chrome once we're there and you can see that everything has been taken off the grid because we changed our shipping.js file, so it's no longer on the grid.

So first thing we need to do is put it back on the grid and then deal with the form. So let's deal with all that in the next video so I can kind of separate these concepts a bit. Okay, so we have our style structured you should be ready to go. So let's commit our code.

Terminal

git status
git add .
git commit -m "structured shipping js and shipping form"

Okay I'll see you in the next video.

Resources

Source code