Okay.
What we're going to take a look at in this particular lesson is, well, it's a bit of a challenge actually.
I'm going to ask you to do some of the work for the order summary so that we can work out the totals
based on what a user has in their basket, and also accommodate the delivery fee based on if their order
is over a certain amount, then the delivery charge will be free.
Otherwise it's going to be just an arbitrary number of $5.
So let's go back to the code, because there's a few things that we need to set up here.
And first of all, I just want to add a helper function for currency formatting.
At the moment when we add a currency, if we take a look at our basket item inside here, if I can find
it, then we've got this code here.
And we're kind of repeating ourselves over and over again.
So we'll convert this into a helper function so we can use that.
Because I've also used that helper function in the code that I'm going to give you, which is just a
boilerplate for the order summary table that we're going to display on the right hand side of our browser
window.
But the functionality and the logic inside there, that's going to be the challenge for you to complete,
not to lay out the page using material UI components.
I'm going to provide that because this is quite a lot of code to write, to get something that looks
a little bit presentable, because that kind of code is pretty straightforward and easy to write.
And I just want to focus on the challenge part of this, which is the functionality, all of the logic
inside here.
First of all, let's go and create a function that will help us out inside our code.
So I'm just going to go to Solution Explorer.
And inside the source folder I'm just going to create a new folder called lib.
And inside this folder I'm just going to create a file called utilities.
And inside here we'll just create a function to help us format currencies as and when we need them.
It is an e-commerce store app.
So clearly we're going to be displaying currencies inside our application.
And since we'll need to do this quite a bit, then we might as well create a simple little function
that will help us just return something in the correct format.
So I'm going to say export function and use currency format.
And we'll pass in the amount.
And that's going to be a number.
And we will return.
And in quotes we'll say dollar.
And then we'll concatenate in parentheses the amount divided by 100.
And then say two fixed and specify two.
So where we've used that.
Then if we go back to our basket item, instead of having this code here, we can remove this.
And inside curly brackets we can use our currency format and pass in the product dot price.
Or in this case it's going to be the item dot price of course.
And we'll also do the same for this one as well.
We'll specify currency formats and item dot price multiplied by item dot quantity.
Okay.
And if we go and take a look, then what we should have in our basket is exactly the same functionality
and our currency is still displaying.
We'll just do the product card as well because we've also used a currency inside there as well.
So we might as well change this one.
And instead of dollar etc., we'll just use our currency format and specify the product price inside
there.
Okay.
So that's the setup.
The next bit of setup we'll do is inside our app component is inside our app folder.
Let's create a new folder or a new file let's say new file.
And we'll call it shared for shared stuff.
And we'll have shared components forward slash and I'll have order Summary dot TSX.
The order summary is not going to be exclusive to our basket.
We can also use this as part of the checkout as well.
So I'll make it a shared component so it doesn't really matter where we use it now like I mentioned,
I'm going to give you a bit of help with this with the material UI components to lay out the styling
of this.
And if we go to our course assets folder inside here we've got an order summary dot txt.
Just open this and then just Ctrl A and Ctrl C and copy this into the Order Summary component.
And I'll just run through what's going on in here.
What we have is some hard coded values for a subtotal and delivery fee at the top.
This is really going to be the challenge is to work out or add the logic so that these are not hard
coded.
But we get these from our basket values inside here.
Then we've got some material UI components.
We've got a box with flex for the layouts.
And then we've got the paper to give it the white background.
And then using typography and we've got orders over 100 qualify for free delivery.
So that's going to be a calculation that you would need to make on the subtotal to work out what the
delivery fee should be.
And then we've got another box, more typography, etc. inside here just to display what's going on
in the order summary.
It's not complex code, but it's tedious to write out.
So I've provided this for you to save us a bit of time and just focus on what the challenge actually
is, which is to use the Redux or RTK query to work out the values that there should be inside here.
And then we've got a checkout button and a continue shopping button here.
And there's a coupon code section again with no functionality inside this.
This is just the material UI components inside here.
And the only functionality that we're really going to take a look at is this for the time being, once
we've updated these values then they've been used at various locations inside here for the subtotal
and the delivery fees.
So once you have that, then we'd expect to see those values inside the order summary.
And of course, we'd expect them to update as somebody adds and removes items from their basket as well.
So where do we use this then?
Well, let's head over to our basket page.
So we'll open that up next.
And below our grid two with the size of eight we'll add another grid two.
And we'll give this one a size equal to four.
And inside our grid we're going to have our order summary.
And if we go and take a look at how this looks, then what we can see on the right hand side is we've
got our order summary.
Of course.
Please note the over $100.
Then they should qualify for free delivery and the delivery fee should be zero.
If the order is over 100 and just make an arbitrary delivery fee, I'm going to suggest $5.
If the order is under $100, then the delivery fee should be $5.
And of course, the total should respect what's going on inside here as well.
So that's going to be the challenge.
And just to give you a hint about how to go about this.
If we go to our nav bar then realistically you're going to be using this kind of approach to work out
the subtotal and the delivery fee.
I'd suggest the reduce function is a good one to use for this, because that will reduce the array of
basket items into a single value.
And then you can work out the basket totals from that.
And then in our order summary of course then you can populate these values.
And then what you'd expect to see is the values on the right hand side updating.
So please give this a go.
See how far you can get on with this.
I'm going to present the solution to this in the next lesson anyway and explain it.
But that's the challenge.
So give it your best shot and I'll see you in the next lesson for the solution.