WEBVTT 00:00.020 --> 00:04.280 Okay, let's continue our work on the confirmation of the payment. 00:04.280 --> 00:05.600 Let's start with this button. 00:05.600 --> 00:11.030 And the reason I do want to turn this into a loading button, rather than just disabled, is due to 00:11.060 --> 00:16.670 the fact that we're not using RTK query for this, which means we're not going to have our loading bar 00:16.670 --> 00:22.880 at the top of the page whilst payment is being submitted, because our API is not involved in this step. 00:22.880 --> 00:29.930 And unfortunately, and this is the only styling framework I've seen this on, the button doesn't come 00:29.930 --> 00:35.270 with a loading indicator, or it's one of the only ones I've seen this on, but it is coming at some 00:35.270 --> 00:36.440 point in the future. 00:36.440 --> 00:45.260 And if we go and take a look at material UI and we search for loading button, it does exist. 00:45.350 --> 00:50.960 But where it exists is in the UI lab. 00:52.460 --> 00:56.690 And we need to effectively add this to our project as well. 00:56.690 --> 01:04.460 It's not in the main core M UI libraries to use this, and anything that's inside UI lab is just in 01:04.490 --> 01:08.280 there because currently it's still technically experimental. 01:08.280 --> 01:15.390 Maybe the documentation for it isn't finalized yet, but what this does give us is a loading indicator 01:15.390 --> 01:19.740 that we can utilize, and it'll effectively display a spinner inside the button. 01:19.740 --> 01:25.470 So we need to install the atom UI lab to take advantage of this. 01:25.470 --> 01:27.900 So I'm just going to copy this into my clipboard. 01:28.620 --> 01:32.700 And there should be some documentation inside here about the lab. 01:33.570 --> 01:35.880 And it's called about the lab. 01:35.880 --> 01:42.300 And if we take a look at this then it tells us the reasons this functionality hasn't yet been added 01:42.300 --> 01:46.500 to the main packages yet, but it also gives us our npm install here. 01:46.500 --> 01:47.520 So let's just copy this. 01:47.520 --> 01:54.150 We've already got UI material of course, so we'll go back to VS code, and we'll add this into our 01:54.150 --> 01:55.920 client project. 01:56.100 --> 02:02.280 And I know I'm going to have to do this again because I am on react 19 release candidate. 02:02.280 --> 02:06.870 So I'm going to add the legacy peer dependencies switch there as well. 02:07.380 --> 02:10.790 And this should go ahead and make this available for our use. 02:10.790 --> 02:14.300 So back into the component. 02:14.300 --> 02:22.010 Let's switch this then from a button to a loading button which we get from my lab. 02:22.340 --> 02:24.020 And did that import correctly. 02:24.020 --> 02:26.630 No I didn't need to add it again okay. 02:26.660 --> 02:28.100 So now we have this. 02:29.180 --> 02:32.120 And as well as disabled we can specify loading. 02:32.120 --> 02:34.820 And we can set this to submitting. 02:36.440 --> 02:37.970 And that will suffice. 02:37.970 --> 02:45.830 So when we do make a payment at that point we would also like to clear our basket from effectively our 02:45.830 --> 02:49.730 Redux store as it's currently being cached. 02:49.730 --> 02:54.830 So once they have submitted their payment, let's clear the items from the basket as well and we'll 02:54.830 --> 02:59.420 go to our basket API to do this, the basket API ts. 02:59.420 --> 03:02.030 And we'll add another method inside here. 03:02.060 --> 03:06.830 Now we're not going to make a query to our API to clear the basket on the client. 03:06.830 --> 03:12.410 We don't need to do that, but we do need to affect what's going on inside our Redux cache to clear 03:12.410 --> 03:14.730 it on demand effectively. 03:14.730 --> 03:17.370 So we're going to add another method inside here. 03:17.370 --> 03:20.640 But it's going to be slightly different to the ones we've used previously. 03:20.640 --> 03:24.150 So I'm just going to add it underneath the remove basket item. 03:24.930 --> 03:26.730 And that's this line here. 03:26.730 --> 03:31.350 So I'll add a comma and we'll have a function in here to clear the basket. 03:31.350 --> 03:34.740 And we'll use builder and mutation. 03:34.740 --> 03:38.910 And it's not going to take any parameters and it's not going to return anything. 03:38.910 --> 03:43.530 So void and void for that we'll open parentheses and curly brackets. 03:43.530 --> 03:48.660 And inside here instead of using query we're going to use query function. 03:50.310 --> 03:52.590 And we'll open parentheses. 03:52.620 --> 03:56.670 Add an arrow open parentheses again curly brackets. 03:56.670 --> 04:00.720 And we're going to specify data as undefined. 04:01.560 --> 04:07.140 We don't want to do anything with this query effectively but we still want to execute it. 04:07.140 --> 04:12.600 So we're going to use the on query started make it async. 04:12.600 --> 04:15.480 And we're not going to pass anything as the first argument. 04:15.480 --> 04:21.350 So we'll just use an underscore and we'll get access to dispatch so that we can dispatch something that's 04:21.350 --> 04:23.030 going to update the store. 04:23.030 --> 04:26.030 And then we can use dispatch inside here. 04:26.060 --> 04:27.590 Open parentheses. 04:27.740 --> 04:31.070 And we're going to use our basket API dot util. 04:31.070 --> 04:34.100 And we're going to use the update query data. 04:34.370 --> 04:37.370 And we're going to update the fetch baskets. 04:37.580 --> 04:40.130 Second argument is going to be undefined. 04:40.220 --> 04:45.110 And the third argument is where we get access to our draft state. 04:45.110 --> 04:48.560 And then we add the arrow open curly brackets. 04:48.560 --> 04:53.240 And we'll just set the draft dot items to be an empty array. 04:54.470 --> 05:00.980 And that will effectively clear out the items from the basket inside our Redux store. 05:00.980 --> 05:05.930 And we'll add this as another thing that we're creating a hook for inside here. 05:05.930 --> 05:13.160 So I'll just add the use clear basket mutation to our list of exports. 05:13.190 --> 05:21.050 Now what we're also going to do on the client side is we're going to clear the cookie from our browser. 05:21.080 --> 05:27.270 Now we do have access to this one because this is not an HTTP only cookie where we're storing our basket. 05:27.270 --> 05:33.270 If we go back and take a look and go and take a look at the Chrome DevTools in the application and take 05:33.270 --> 05:39.270 a look at our cookies, then we've got a whole bunch of stripe cookies inside here now as well. 05:39.450 --> 05:49.320 But we've also got our basket ID and we can see that for this one, the HTTP only box is not checked. 05:49.320 --> 05:56.250 And that means that we can access this particular cookie inside our JavaScript code. 05:56.970 --> 06:01.320 So there's no tool in react to help us do this. 06:01.320 --> 06:07.650 So we will need to to make it easy for ourselves just to install something to help us access that cookie. 06:07.650 --> 06:10.830 So I'm just going to install another package here, a helper. 06:10.830 --> 06:16.110 And I'm going to say npm install js dash cookie. 06:17.400 --> 06:22.740 And I'll just add the switch because I think I'm just going to need to do this every single time. 06:22.740 --> 06:25.110 So legacy deps as well. 06:25.110 --> 06:31.460 And also we just need some types for this, because this particular npm package doesn't come with a 06:31.460 --> 06:32.690 type definition file. 06:32.690 --> 06:38.330 So we'll use npm install and type definition files we can store in developer dependencies. 06:38.330 --> 06:41.120 So I'll use dash uppercase D. 06:41.720 --> 06:47.900 And then we can use at types forward slash js dash cookie and press return. 06:47.900 --> 06:51.950 And of course I should have added the switch to this one as well. 06:52.400 --> 06:54.080 So let's do that. 06:54.080 --> 06:59.420 We'll add the legacy dash peer dash deps and press return. 06:59.450 --> 06:59.990 Okay. 07:00.020 --> 07:03.410 So now we've got the ability to clear our cookie. 07:03.410 --> 07:06.620 So inside or below the dispatch. 07:06.620 --> 07:12.800 After we've cleared our baskets let's make use of the cookie utility we have. 07:12.800 --> 07:15.290 And we should be able to get this from cookies. 07:18.020 --> 07:21.050 And then we've got the option to remove. 07:21.050 --> 07:24.710 And then we can specify the basket ID. 07:26.030 --> 07:29.780 And I've got a warning or error about this. 07:29.780 --> 07:32.200 And let's just double check what the import was. 07:32.230 --> 07:35.320 I don't think I got something that I was expecting there. 07:35.350 --> 07:39.370 Okay, so we do need to import cookies from the package that we've added. 07:39.370 --> 07:41.140 So I'm just going to add this manually at the top. 07:41.140 --> 07:42.640 It doesn't import automatically. 07:42.640 --> 07:46.990 So I'm going to say import cookies from JS cookie. 07:47.320 --> 07:48.940 And the error goes away. 07:48.940 --> 07:56.110 And if we take a look at what we've got inside here now then inside our clear basket method, after 07:56.110 --> 08:00.730 we've effectively cleared this from our store or cleared the items from our store, then we're going 08:00.760 --> 08:03.130 to remove the cookie from the browser. 08:03.160 --> 08:09.220 So next time the user adds something to the basket, we will not be sending up that cookie to the API. 08:09.250 --> 08:11.890 So a new basket would be created then. 08:11.890 --> 08:18.370 So let's make use of this clear basket mutation inside our basket hook that we created. 08:18.370 --> 08:20.710 So I'll open up the use basket. 08:21.100 --> 08:27.280 And inside here we can just use our new hook that we've created. 08:27.280 --> 08:29.320 So I'll add this at the top with the other hook. 08:29.350 --> 08:37.460 And we'll use const and call it Clear Baskets and set it equal to use Clear Baskets mutation. 08:37.460 --> 08:41.510 And we'll just add this as an additional thing that we're returning from this. 08:41.510 --> 08:44.900 So I'll also add the clear basket there as well. 08:44.900 --> 08:52.610 And then we can go back to our checkout stepper and inside the confirm payment method that we created. 08:53.480 --> 09:02.120 If we do have payment status of succeeded at this point we're okay to delete or clear our basket, and 09:02.120 --> 09:05.390 we'll just need to bring in the clear basket method as well. 09:05.390 --> 09:10.970 We've already got the use basket in here, so we can just also bring in the clear basket method and 09:10.970 --> 09:14.000 then make use of it inside our confirm payment. 09:14.000 --> 09:19.760 And just underneath the navigate we'll use the clear basket function. 09:20.870 --> 09:26.060 So a bit of work to get this functionality configured and coded. 09:26.540 --> 09:31.160 But now we are in a position to actually start testing our payments. 09:31.160 --> 09:33.170 And that's exactly what we'll do. 09:33.170 --> 09:38.780 In the next lesson, we'll take a look at our progress and see if we have a working payment system, 09:38.780 --> 09:40.910 and we'll take a look at that next.