WEBVTT 00:00.020 --> 00:00.290 Okay. 00:00.290 --> 00:05.360 What we're going to take a look at in this particular lesson is, well, it's a bit of a challenge actually. 00:05.360 --> 00:11.150 I'm going to ask you to do some of the work for the order summary so that we can work out the totals 00:11.150 --> 00:18.170 based on what a user has in their basket, and also accommodate the delivery fee based on if their order 00:18.170 --> 00:22.340 is over a certain amount, then the delivery charge will be free. 00:22.370 --> 00:25.790 Otherwise it's going to be just an arbitrary number of $5. 00:25.790 --> 00:31.010 So let's go back to the code, because there's a few things that we need to set up here. 00:31.010 --> 00:36.320 And first of all, I just want to add a helper function for currency formatting. 00:36.710 --> 00:45.020 At the moment when we add a currency, if we take a look at our basket item inside here, if I can find 00:45.020 --> 00:47.030 it, then we've got this code here. 00:47.060 --> 00:50.030 And we're kind of repeating ourselves over and over again. 00:50.030 --> 00:54.650 So we'll convert this into a helper function so we can use that. 00:54.650 --> 01:00.230 Because I've also used that helper function in the code that I'm going to give you, which is just a 01:00.230 --> 01:05.690 boilerplate for the order summary table that we're going to display on the right hand side of our browser 01:05.690 --> 01:06.290 window. 01:06.290 --> 01:12.050 But the functionality and the logic inside there, that's going to be the challenge for you to complete, 01:12.110 --> 01:15.530 not to lay out the page using material UI components. 01:15.530 --> 01:20.870 I'm going to provide that because this is quite a lot of code to write, to get something that looks 01:20.870 --> 01:25.070 a little bit presentable, because that kind of code is pretty straightforward and easy to write. 01:25.070 --> 01:29.660 And I just want to focus on the challenge part of this, which is the functionality, all of the logic 01:29.660 --> 01:30.650 inside here. 01:30.650 --> 01:34.610 First of all, let's go and create a function that will help us out inside our code. 01:34.610 --> 01:36.890 So I'm just going to go to Solution Explorer. 01:36.890 --> 01:41.210 And inside the source folder I'm just going to create a new folder called lib. 01:41.870 --> 01:47.840 And inside this folder I'm just going to create a file called utilities. 01:47.840 --> 01:53.930 And inside here we'll just create a function to help us format currencies as and when we need them. 01:53.930 --> 01:55.190 It is an e-commerce store app. 01:55.190 --> 01:59.240 So clearly we're going to be displaying currencies inside our application. 01:59.240 --> 02:03.320 And since we'll need to do this quite a bit, then we might as well create a simple little function 02:03.320 --> 02:07.340 that will help us just return something in the correct format. 02:07.340 --> 02:13.760 So I'm going to say export function and use currency format. 02:13.970 --> 02:15.980 And we'll pass in the amount. 02:15.980 --> 02:17.900 And that's going to be a number. 02:18.050 --> 02:19.490 And we will return. 02:19.490 --> 02:21.710 And in quotes we'll say dollar. 02:22.370 --> 02:30.950 And then we'll concatenate in parentheses the amount divided by 100. 02:31.280 --> 02:34.700 And then say two fixed and specify two. 02:34.820 --> 02:36.020 So where we've used that. 02:36.020 --> 02:43.040 Then if we go back to our basket item, instead of having this code here, we can remove this. 02:43.970 --> 02:50.180 And inside curly brackets we can use our currency format and pass in the product dot price. 02:51.770 --> 02:55.460 Or in this case it's going to be the item dot price of course. 02:55.460 --> 02:58.250 And we'll also do the same for this one as well. 02:58.280 --> 03:07.430 We'll specify currency formats and item dot price multiplied by item dot quantity. 03:07.460 --> 03:08.090 Okay. 03:08.120 --> 03:13.100 And if we go and take a look, then what we should have in our basket is exactly the same functionality 03:13.100 --> 03:14.960 and our currency is still displaying. 03:14.960 --> 03:21.200 We'll just do the product card as well because we've also used a currency inside there as well. 03:21.200 --> 03:23.330 So we might as well change this one. 03:23.900 --> 03:30.140 And instead of dollar etc., we'll just use our currency format and specify the product price inside 03:30.140 --> 03:30.650 there. 03:30.680 --> 03:31.250 Okay. 03:31.280 --> 03:32.270 So that's the setup. 03:32.270 --> 03:38.750 The next bit of setup we'll do is inside our app component is inside our app folder. 03:38.780 --> 03:43.070 Let's create a new folder or a new file let's say new file. 03:43.070 --> 03:46.610 And we'll call it shared for shared stuff. 03:46.610 --> 03:53.600 And we'll have shared components forward slash and I'll have order Summary dot TSX. 03:53.630 --> 03:57.080 The order summary is not going to be exclusive to our basket. 03:57.080 --> 04:00.380 We can also use this as part of the checkout as well. 04:00.380 --> 04:06.420 So I'll make it a shared component so it doesn't really matter where we use it now like I mentioned, 04:06.450 --> 04:11.340 I'm going to give you a bit of help with this with the material UI components to lay out the styling 04:11.370 --> 04:12.420 of this. 04:12.570 --> 04:20.130 And if we go to our course assets folder inside here we've got an order summary dot txt. 04:20.160 --> 04:28.770 Just open this and then just Ctrl A and Ctrl C and copy this into the Order Summary component. 04:28.770 --> 04:30.930 And I'll just run through what's going on in here. 04:31.020 --> 04:36.390 What we have is some hard coded values for a subtotal and delivery fee at the top. 04:36.540 --> 04:42.150 This is really going to be the challenge is to work out or add the logic so that these are not hard 04:42.180 --> 04:42.870 coded. 04:42.870 --> 04:47.010 But we get these from our basket values inside here. 04:47.010 --> 04:48.930 Then we've got some material UI components. 04:48.930 --> 04:51.660 We've got a box with flex for the layouts. 04:51.660 --> 04:54.000 And then we've got the paper to give it the white background. 04:54.000 --> 05:00.150 And then using typography and we've got orders over 100 qualify for free delivery. 05:00.150 --> 05:05.400 So that's going to be a calculation that you would need to make on the subtotal to work out what the 05:05.400 --> 05:07.050 delivery fee should be. 05:07.050 --> 05:13.890 And then we've got another box, more typography, etc. inside here just to display what's going on 05:13.890 --> 05:14.910 in the order summary. 05:14.910 --> 05:17.520 It's not complex code, but it's tedious to write out. 05:17.550 --> 05:24.030 So I've provided this for you to save us a bit of time and just focus on what the challenge actually 05:24.030 --> 05:33.390 is, which is to use the Redux or RTK query to work out the values that there should be inside here. 05:33.390 --> 05:38.130 And then we've got a checkout button and a continue shopping button here. 05:38.130 --> 05:42.180 And there's a coupon code section again with no functionality inside this. 05:42.390 --> 05:46.830 This is just the material UI components inside here. 05:47.100 --> 05:52.410 And the only functionality that we're really going to take a look at is this for the time being, once 05:52.410 --> 05:59.700 we've updated these values then they've been used at various locations inside here for the subtotal 05:59.700 --> 06:00.720 and the delivery fees. 06:00.720 --> 06:07.050 So once you have that, then we'd expect to see those values inside the order summary. 06:07.200 --> 06:13.590 And of course, we'd expect them to update as somebody adds and removes items from their basket as well. 06:13.620 --> 06:14.970 So where do we use this then? 06:15.000 --> 06:17.040 Well, let's head over to our basket page. 06:17.040 --> 06:19.170 So we'll open that up next. 06:20.730 --> 06:26.010 And below our grid two with the size of eight we'll add another grid two. 06:27.630 --> 06:32.130 And we'll give this one a size equal to four. 06:32.730 --> 06:37.020 And inside our grid we're going to have our order summary. 06:37.830 --> 06:42.690 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 06:42.690 --> 06:43.980 got our order summary. 06:43.980 --> 06:44.430 Of course. 06:44.430 --> 06:47.970 Please note the over $100. 06:47.970 --> 06:53.520 Then they should qualify for free delivery and the delivery fee should be zero. 06:53.520 --> 07:02.130 If the order is over 100 and just make an arbitrary delivery fee, I'm going to suggest $5. 07:02.130 --> 07:08.490 If the order is under $100, then the delivery fee should be $5. 07:08.490 --> 07:13.140 And of course, the total should respect what's going on inside here as well. 07:13.440 --> 07:15.270 So that's going to be the challenge. 07:15.270 --> 07:19.020 And just to give you a hint about how to go about this. 07:19.050 --> 07:26.490 If we go to our nav bar then realistically you're going to be using this kind of approach to work out 07:26.490 --> 07:29.250 the subtotal and the delivery fee. 07:29.280 --> 07:35.070 I'd suggest the reduce function is a good one to use for this, because that will reduce the array of 07:35.070 --> 07:37.590 basket items into a single value. 07:37.590 --> 07:41.400 And then you can work out the basket totals from that. 07:42.870 --> 07:49.080 And then in our order summary of course then you can populate these values. 07:50.520 --> 07:55.230 And then what you'd expect to see is the values on the right hand side updating. 07:55.230 --> 07:56.340 So please give this a go. 07:56.370 --> 07:57.960 See how far you can get on with this. 07:57.960 --> 08:04.230 I'm going to present the solution to this in the next lesson anyway and explain it. 08:04.290 --> 08:05.700 But that's the challenge. 08:05.700 --> 08:10.140 So give it your best shot and I'll see you in the next lesson for the solution.