All right, so we have our authentication working.
So now we're going back into the process of purchasing an item.
So right now, if we add the item to the cart and then we click go to checkout, then we go to the shipping
URL, which doesn't exist.
So we need our shipping screen.
But before we do that, let's go to the the cart slice because we're going to add to our our state here.
So in addition to cart items, which is obviously an array of our cart items, we're going to have the
shipping address because we want that to be saved.
And then we're also going to set a payment method in the state as well, which by default is going to
be PayPal.
So the way we're going to set this up is it's just going to use PayPal, but you can also pay with a
credit card through PayPal system.
So it's not like the people need to have a PayPal account.
You can also pay with credit card if you want to implement or integrate Stripe or something else, then
you can do that as well after you after you finish the initial project.
So now that we've done that, we're also going to have another reducer.
Function or I should say an action.
So in addition to add to cart and remove from cart, we're going to have save shipping address.
So let's go right under remove from cart and let's say save.
Shipping address.
And what that's going to do is just set the state dot shipping address, which we just set up here in
our local our local storage and our initial state.
We set it to an empty object.
So what we're going to do here is just set it to whatever that comes in the payload and then we should
be able to just return update cart because our state is set in local storage in that function.
All right.
And we just need to make sure that we export this as well.
So we want to do save shipping address.
We want to export that as a cart slice action.
So now what we'll do is create the shipping screen.
So in screens, create a new file called Shipping screen dot JS.
Okay.
And this is going to actually let's I didn't we want to make this uppercase.
So it should be uppercase s shipping screen and then we'll generate our component.
Still is an uppercase.
All right.
So let's bring in a couple things up top.
We're going to import, let's say use state because we're going to have some component state.
And then let's bring in from React Bootstrap.
We're going to bring in form and we're also going to bring in button.
And then we're also going to use our form container here that we created that we that we used on the
the login and register form.
So form container.
And I think that should be fine for now.
Now, as far as our component level state, let's create that.
So we're going to have an address, a city postal code and a country.
Now, for now, I just want to show this.
I want to be able to show it in the screen here at this URL.
So I'm going to create the route.
However, in the next video, we're going to create a private route component because we don't want
to be able to go to the shipping screen.
We don't want to be able to go to this URL if we're not logged in.
So we're going to have a special route component only for routes that where you have to be registered.
But just for now, we'll throw it in with the rest.
So let's go to our Index.js.
Let's bring in our shipping screen.
And then like I said, for now, we'll just put it in with the rest of these.
Just so we can actually see if we go to slash shipping.
Cannot find file shipping.
Um, this should be uppercase.
Okay, So at least we can see the screen now.
So let's close out.
Let's go back to.
Um, our shipping screen and trying to see what we want to do next.
So we'll just continue on with, with the output here.
So the form container is going to surround everything.
So let's say form.
Container.
And we'll get rid of that.
And let's just have an H1.
We're going to have a form with a Onsubmit and that's going to be set to a function called Submit Handler.
And we'll close that form up.
Okay.
And then this is going to have a few form groups.
So the first one is going to be the address.
So we're going to give it a control ID of address and let's close that form group.
And then I'm also going to just add a class class name here, and that's going to be me, too.
So just a little bit of margin on the top and bottom.
Then inside the form group, we're going to have the form label, which will be address and then the
form control.
So let's see what we got here.
So form control type is text, enter, address value, is this so address from the state.
And then we're calling set address to change that piece of state.
And if we look here, we're just getting submit handler not defined.
So let's just create that real quick.
So right up here, we'll say submit handler and let's just do.
Console log for now.
Submit handlers.
There we go.
So now we can see the address field.
So we have a few more to to add here.
So I'm going to copy the form group.
And let's create the next field, which is going to be the city so we can get rid of this.
I'll just change all that to city and that's going to be uppercase set city.
That's going to be uppercase.
Okay, so that should do.
Now.
The next one is going to be the postal code because we're just going by these our state here.
So we want postal code.
So let's paste in another form group and let's change address.
To say postal code.
And we'll just make this label.
And this here, I'll say enter.
Postal code and then value.
So that's correct.
And then this here, just want to make sure that P is uppercase.
All right, let's take a look.
And then the last field is going to be the country.
So let's paste that in.
Let's change these.
To country.
Make that uppercase.
And this C right here.
Okay, so now we have all of our fields.
So the last thing we want is the button.
So let's go under the last form group and let's add a button.
So the text is just going to say continue because we're going to continue through our process and we
have a type of submit variant is primary class.
I don't know if we really need that.
Let's yeah, we'll keep that.
So, yeah, that should be that should do it as far as the output goes.
There's a few other things we have to do up top here.
So I'm going to bring in since we're interacting with the cart state, we want to bring in use dispatch
and use use selector.
So let's import.
Use dispatch.
And you select her from React Redux.
And then we're also going to need use navigate because we're going to redirect.
So let's import, use, navigate.
And then we're also going to be calling that or dispatching the Save shipping address action that we
created at the beginning of the video.
So we're going to put that let's bring that in right here.
So import.
Save shipping address and that's going to be from the cart slice.
Now, to get the shipping details from the state, we're going to go right above the submit handler
and let's say const Cart because we need to get the cart state and we use use selector for that.
And then we're going to destructure the shipping address from the cart.
Okay.
Because if we look in our cart slice.
You look up here.
So shipping address, we want to get that.
It's going to be just an empty object by default.
And then we want to call this save shipping address or we want to dispatch it so that we can update
that in the state and in local storage.
So let's initialize our dispatch and navigate.
And then in the submit handler, instead of doing a console log, we'll get rid of that.
And we're just going to call dispatch.
We're going to call save shipping address and pass in the address the city, the postal code and the
country.
Okay.
And then we just want to navigate to the payment page.
So slash payment.
Let's see.
Shipping address is assigned.
But never used.
Right here.
So shipping address.
We're getting that.
Um.
Okay, so.
We're getting the shipping address here.
And we want if it's if this exists.
Right.
So if that's in our state and in local storage, we want that to be in these fields.
So what we need to do is actually take this and cut it and move it above the component state.
Because what I want to do is instead of making these just just an empty string, we want to first check
to see if there's a shipping address.
Address city postal code and country.
So in here, let's set it to shipping address, dot address or.
Or an empty string.
Is that right?
Um, no, we want.
Yeah, it should be like that.
And then we're going to do that for the rest of these fields.
For the rest of these.
So let's do.
Paste those in.
So this second one is going to be city that we're looking for.
Third one is going to be postal code.
And this one is going to be country.
All right.
So I'll save that.
And let's see.
Read properties of undefined reading address.
You know what?
Let's put question marks here.
And that should get rid of that error.
Now let's enter something.
We'll say 20 Main Street, Boston.
Um, country.
Just say USA.
And once I submit this, what should happen is it calls the submit handler dispatches saved, shipping
address, put it in local storage and state and then navigate to payment.
So we'll click continue.
We got navigate we navigated to the payment page.
I'm going to go back and you'll see that even if I reload, that's going to stay in there.
Even if I go to some other page and then I go to my cart, proceed to checkout, This is going to stay
there as long as it's in local storage and we can check.
Let's check our state first.
So we'll go to our redux dev tools.
And you can see in Cart we have.
The shipping address and we have that set here also if we go to application.
And we go to our local storage.
Um, right here.
Local storage in the cart.
We have the shipping address.
Okay.
And as long as that's there, it's going to be displayed because we set it to the default in these use
states.
All right, cool.
So that's what I wanted to do in this video.
And the next one, we're going to create our private root component so that we can't come to this page
if we're not logged in.
Because right now you'll see if I log out and then I go to I'll manually go to Slash.
Shipping.
I'm allowed to come here and I shouldn't be.
It should just go to login.
All right.
So in the next video, we'll create our private root component.