Okay, now that we've confirmed we can get the order back, we can now format effectively our checkout
success page.
So back to VS code and we'll work inside the checkout success this time.
And below the variable we created for the order.
We'll check to make sure we have the order.
So if no order then we will return typography and just say problem accessing the order.
And we'll also format the address string that we'll use inside here.
So we'll have an address string.
And we'll use a helper function for this.
And our address is going to be const address equals order dot shipping address.
And I'm just going to go to our review component because we've already got some code that does this
kind of thing.
But it's coming from the confirmation token shipping.
Now we could create a utility method to help us out with this, but that's going to take us longer than
just to copy and paste a bit of code from here.
So for this approach, I'm not going to create a helper method, I'm just going to use copy and paste
and adjust the code inside here to format the address to actually save some time.
If I was going to use this a third time somewhere, then possibly that would be a good option to create
some kind of utility method.
So for the name, we just need to specify the address dot name inside here, and otherwise it stays
the same.
And we'll also do the same for the payment string as well.
So I'll have const payment string equals empty parentheses.
And I'll use const card equals order dot payment summary.
And then inside here I'll just go back to the review component again.
And just take the return statement from here and paste it inside the checkout success.
And then we can use these in our component.
So instead of this code let's swap this now.
And we'll have a container From movie material, and we'll give this a max width of.
MD this time, and we'll open a fragment for what we're going to do inside here.
And then we'll use typography, and we'll give this a variant of H4 and use gutter bottom.
And we'll have font weight equal to bold.
And inside here we'll just say thanks for your fake order exclamation mark.
And we'll add typography again below this one.
We'll give it a variant of body one.
We'll give it a color of text secondary, and we'll use Gutter bottom.
And then we'll specify your order.
And we'll use a strong tag and use hash and curly brackets and order ID And without a space and say
we'll never be processed as this is a fake shop, just in case anyone found our demo sites and confused
it with an actual shop.
So let's use paper next and get that from movie material underneath the typography, and we'll give
this an elevation of one.
We'll give it the SE property and give it a padding of two all around.
We'll use margin bottom of two.
We'll use display and flex.
And we'll have a flex direction of column.
And we'll use a gap of 1.5.
And inside the paper we'll use a box.
And we'll also give this display flex as well.
And specify justify content and space between.
So the children inside this box will be spaced out on the left and right hand sides of the container.
Then we'll use more typography, and we'll give this a variance of body two and give it a color equal
to text secondary.
And inside here we'll specify the order dates.
And I'll just copy this typography and paste it below.
And instead of color secondary we'll just use font weight and set it to be bold.
And then inside here we can use the order dot order date.
And below the box we'll use a divider which we get from Mui material.
And I'll just copy the box that I have here and place it below the divider.
And this one can be for our payment method.
And instead of the order date, we'll use our payment string.
And below the box we'll use another divider.
And I'll just copy the box again that contains the typography and just paste it inside here.
And instead of payment method we'll have shipping address.
And inside here can go the address string.
And I'll copy this again.
And another divider below the box.
And paste in what I have.
And this can be for the amount.
And then we'll use the currency format and the order dot total.
And below the paper we'll use another box.
and give this display of flex and justify content.
And we'll use flex.
Start this.
Time and give it a gap equal to two.
And we'll have a button and we'll make the variance contained.
We'll give it a color equal to primary.
And we'll give it a component equal to link.
That we bring in from React Router Dom.
And we'll specify two equals and in curly brackets in backticks forward slash orders forward slash and
then dollar and the order.id.
And then for the label we'll just say view your order and we'll just have another button below this.
And again this will use the components equal to link.
And we'll say two equals forward slash catalog.
And we'll give it a variant of outlined.
And the color will set to primary.
And inside here we'll just say continue shopping.
And if we go take a look at our checkout success and refresh this.
And it looks like we've got some undefined stuff going on.
But that's probably just because the component's loading before it's had a chance to access the brand,
because we're not seeing the do not have the order, but it looks like maybe there's just an issue there.
So let's be a bit more defensive inside here when we've got our address string and our payment string.
And we'll use optional chaining here just for these payment strings, just to make sure that we don't
cause an error if we do not have these properties at the time the component loads.
So each one of these I'm just going to put the optional chaining inside of.
And I'll do the same for the address name as well.
And if we go back and take a look, then we can see that we've got a lot of undefined and is not a number
inside here, which isn't great.
But let's go back and take a look and create a new order and see if we get the information.
Then, because this has just been updated based on the code changes, so I'd expect an error there.
So let's go back to the catalog and let's add another product into the shopping cart.
And we'll go to the basket then the checkout.
And I'll just next my way through this.
So I'll click next and add the 40 twos or the 40 twos inside here and add some dates in the future.
Random security code.
Click next and then click pay.
And what we should have this time is the same thing again.
So clearly there's an issue with the order here and how it's being received.
So let's go back and I am going to add a console log and check what we have for the order, and go back
to the browser and just take a look at the Chrome dev tools here.
And possibly these errors were from the previous options.
But if I go and take a look inside here, then we've got our data.
And the issue is, is that we've got an object inside an object called data.
And then we have access to things like our payment summary and our shipping address.
So effectively we just need to get the data from the state.
So instead of const order equals states as order we need to use state dot data as order instead.
And if we go back and take a look, then we can see that we have the properties now populated inside
here.
As we would expect, order date could be improved, of course, but otherwise I'm going to say that
looks fine.
And we've got the button to click the order and continue shopping.
Now there are a number of errors in our Chrome DevTools.
Let's just refresh this page and see what we're left with after this.
And okay, so that looks fine.
We've still got the console.log statement, so I can remove that from inside here.
And that should give us a cleaner Chrome DevTools experience when I refresh the page again.
And sure, not completely clean, of course, because I've still got these filters at the top that hide
the nasty stripe warnings that we cannot do anything about.
But we're making progress, and what we can take a look at next is creating the orders page and getting
the details of an order as well.
So we'll take a look at that next.