Okay.
The next task is the review component and do help with stripe really at this point for this one.
So we are actually going to write some code for our review component.
And let's go back to VS code to configure this.
I'll close everything down once again.
And inside our checkout folder let's create a new file.
And I'll just call it review dot TSX.
And inside here we'll create the boilerplate that we need using the snippet.
And inside here we're going to display effectively the billing and delivery summary.
So we're going to display the shipping address where they're getting their items delivered to and the
payment details.
And we'll also display the contents of what's in their shopping cart as well.
So we're going to need to get Ahold of our basket effectively inside here.
So I'll use const data and give it a name of basket.
And we'll use the fetch basket query which is going to retrieve our basket from cache.
So whenever we use this from our Redux store we're not going out to fetch our basket again.
Of course, we're just getting that from cash.
Unless they refresh the page whilst they're on the checkout.
Then it will go and fetch the basket.
But otherwise it's just like getting it locally from memory and inside here.
Let's we'll keep the div for now, but I'll probably swap this for a fragment if we don't need to provide
any styling for it.
We'll use a box inside here from UI material, and we'll give the box margin top equal to four, and
we'll give it a width equal to 100%.
So it takes up all of its available space.
And we'll use typography below this.
And we'll give this a variant of H6.
And we'll give it a font weight of bold.
And inside the typography we'll just say billing and delivery information.
And below this one, we'll use a DL for a data list.
And inside here we'll use typography again.
And we'll give it a component of PT.
And we'll give it a margin top equal to one.
And we'll give it a color of secondary.
And we'll give it font weights of medium.
And inside here we'll specify shipping address.
And let's just copy this typography below.
And for this one we'll give a component of Rd for the definition.
And we won't use font weights but we'll use a color equal to and we'll use text secondary.
And we'll just have a placeholder for now.
We'll need to get the address from stripe itself, and we'll just say address goes here.
And I'll just copy the two typography elements and paste them below.
We'll keep the component types and we'll just give the.
In fact we just need a bit of margin for the address goes here one.
So we'll specify empty equals one.
And we'll do the same for this one below as well.
We'll set that margin top equal to one.
And instead of shipping address we'll have payment details.
And we'll just say payment details goes here or go here.
Just placeholder text for the time being.
And below this box we'll have another box and we'll give it margin top equal to six.
And we'll use MKS auto to centralize the content.
And we'll use a divider.
And then we'll just use a simple table to display the items in the basket.
So we'll use table container.
And then inside the table container comes a table.
And I'll need to bring this in from my material.
And then we can specify the table body.
And inside the table body we will loop over our basket items.
So I'll say basket dot items dot map.
And we'll use item as the arguments.
And the arrow open parentheses.
And then we'll have a table row inside here.
And we'll need to give this a key.
And we'll set this equal to the item and the product ID.
And we'll give this the SE property, and we'll just make the border bottom the same color as the divider
we're using above.
And we'll make it one pixel.
So one px solid and we'll use RGB a in parentheses 224 comma two.
Two.
Four comma 224 comma one.
And that the closing parentheses after the one and inside.
And it's going to get quite busy inside here this component I'm going to go a bit too far to the right.
Let's try and bring a few things down or bring that down at least.
So then inside the table row we're going to have a table cell.
And for our table cell we'll give it to the SE equals and we'll use p y colon four.
And then inside here we'll display an image of the product as well as the name.
So we'll use box inside our table cell.
We'll give it a display of flex and align items of center.
And we'll use an image tag and we'll give it the source of the item dot picture URL.
We'll give it the alt of the item dot name, and we'll give it a style property.
And inside curly brackets.
Let's start moving this stuff down as well.
There's no way I can avoid going to the right of the screen on this one.
And okay, so inside the style, let's give it a width of 40 and a height of 40.
And below the image tag we'll use typography.
And we'll just use the item dot name.
And below this table cell will add another table cell.
And we'll make this align to the Center and we'll give it the property of P colon four for padding all
around.
And then we'll just use x.
And then inside curly brackets we'll have the item dot quantity.
And let's just copy this table cell and paste it below.
And we'll use this one.
Align right.
Keep the same padding.
And for the content of this table cell we'll open curly brackets.
We'll use our currency format function and pass in the item dot price.
And that should be that bit of or a lot of JSX for this.
And it's the table.
Really this is always quite verbose what we need for a table.
But that should be what we need for this.
We'll come back and deal with the shipping address and payment details soon, but not yet.
And we'll add our review component into our checkout stepper.
And for the review step we will simply add our review Components inside here.
And let's see how we're getting on now.
And I'll just refresh this page.
And I'll click next and next again.
And we can see that we've got our review.
Bit of work to do to complete the functionality here.
It looks like I've got the name way too close to the image there.
That looks a bit weird, so I'll just go back and correct that in the review component.
And there's no errors inside there.
Okay.
So let's just where we've got the box where we're using Display flex.
We can just give this a gap equal to let's say three.
And if we go back and double check then we need to go back to our review components.
And that's a bit more like it okay.
So now we've got all of our elements in place.
Next we're going to take a look at the functionality.
And we're going to start with the address.
And we're going to go out and fetch the address so that we can populate that in our stripe address element.
And we'll take a look at that next.