WEBVTT 00:00.000 --> 00:04.380 Okay, the next thing we want to take a look at and see is populating the address. 00:04.920 --> 00:09.960 When the user goes to the checkout, if they have an address saved into our database. 00:09.960 --> 00:16.350 Now one of the things that we looked at earlier was updating our address and getting the address for 00:16.380 --> 00:17.100 a user. 00:17.100 --> 00:20.580 And if I click send on this request, I've still got the cookie in postman. 00:20.580 --> 00:28.140 For this user of Bob Bobotie and an address inside here, we want to take this address and populate 00:28.140 --> 00:31.110 that inside our stripe address element. 00:31.110 --> 00:34.800 And one of the options that we can give to our address. 00:34.800 --> 00:40.260 If I take a look at the different options here, we can provide this with some default values. 00:40.260 --> 00:42.000 And what this takes. 00:42.090 --> 00:50.340 It takes a name property and it also takes the address property as two separate things really. 00:50.340 --> 00:57.120 So we need to take what we have our response with the name and the address. 00:57.510 --> 01:04.020 And we need to format that in such a way that stripe address elements will accept it. 01:04.050 --> 01:10.500 So that's what we're aiming for, is to use the default values here and get our address and populate 01:10.500 --> 01:11.970 it inside here. 01:11.970 --> 01:16.710 But first of all, we'll need to create a type for the address that we're getting back from our API. 01:16.740 --> 01:23.970 So we'll go to in fact let's just do this in the user dot ts, something that we've already created 01:23.970 --> 01:26.370 rather than creating a new file for this. 01:26.370 --> 01:31.020 And inside here we'll export a type and call it address. 01:31.020 --> 01:32.670 And we'll set it equal to. 01:32.700 --> 01:36.480 And we'll just populate the properties inside here for the address. 01:36.480 --> 01:37.440 So we're going to have name. 01:37.440 --> 01:38.520 That's a string line one. 01:38.520 --> 01:40.890 That's a string line two which is optional. 01:40.890 --> 01:45.300 And a string will have the city again a string. 01:47.190 --> 01:50.250 The states is going to be a string. 01:50.250 --> 01:54.690 The postal underscore code is going to be a string. 01:55.350 --> 02:00.090 And finally the country is also a string. 02:00.090 --> 02:02.730 So do be careful with spelling inside here. 02:02.730 --> 02:05.270 Use the JSON to TTS. 02:05.390 --> 02:10.790 If you want to be 100% sure you're not going to make any typos inside here. 02:10.910 --> 02:14.180 And then we'll go over to our accounts API. 02:14.180 --> 02:20.600 And we'll use this to go and fetch our address from our account controller. 02:20.630 --> 02:29.300 So inside here below the logout let's just add a comma and we'll have another request to fetch the address. 02:29.540 --> 02:34.610 And let's move my screen up a bit and we'll use builder. 02:37.280 --> 02:38.540 Dot query. 02:38.540 --> 02:41.240 And we're going to get an address back. 02:41.240 --> 02:47.150 So please make sure you select this from the correct location because stripe also provides an address 02:47.150 --> 02:48.290 type as well. 02:49.130 --> 02:51.320 And we're not going to pass up any arguments. 02:51.320 --> 02:52.490 So that's going to be void. 02:52.490 --> 02:54.950 And then open parentheses curly brackets. 02:54.950 --> 02:56.990 And we'll use query. 02:56.990 --> 02:59.720 And we'll add the callback function. 02:59.750 --> 03:00.680 Open parentheses. 03:00.710 --> 03:02.030 Open curly brackets. 03:02.030 --> 03:03.860 And this is quite a simple one. 03:03.860 --> 03:08.580 We just need the URL and the account forward slash address. 03:10.560 --> 03:15.270 And we also need another query to update the user address as well. 03:15.270 --> 03:19.560 So we'll add this and specify builder dot mutation. 03:19.710 --> 03:26.160 And inside here we're going to have an address that goes up as an argument. 03:26.430 --> 03:30.930 And we'll also use an address as what we get back from this. 03:30.930 --> 03:35.970 And we'll open parentheses open curly brackets and we'll add the query. 03:35.970 --> 03:38.880 And we'll pass up the address as an argument. 03:38.940 --> 03:42.510 Add the arrow open parentheses curly brackets. 03:42.510 --> 03:47.040 And we'll have the URL which is going to be account forward slash address. 03:47.790 --> 03:51.720 The method is going to be a post. 03:53.190 --> 03:57.600 And the body is going to be the address that we send up here. 03:57.630 --> 04:03.600 Now when we do get the response back from our server for this one, if we've already gone and fetched 04:03.600 --> 04:07.570 the address, then we want to update what we have inside cache for this query. 04:07.600 --> 04:13.930 So inside our update user address once again we're going to use the on query started method. 04:14.110 --> 04:19.540 We'll make it async and we'll take in an address as the first parameter. 04:20.590 --> 04:25.330 And then we'll use the dispatch and the query fulfilled. 04:26.470 --> 04:29.740 And we'll add the arrow open curly brackets. 04:29.860 --> 04:32.980 And we're going to do an optimistic update here. 04:32.980 --> 04:34.390 We've looked at this before. 04:34.420 --> 04:37.120 And we'll create a variable to store the results. 04:37.120 --> 04:44.890 And we'll use const patch results as this will allow us to undo things if the request goes wrong. 04:44.920 --> 04:48.520 And we'll set it equal to dispatch open parentheses. 04:48.520 --> 04:53.080 And inside here we can use our accounts API dot util. 04:53.110 --> 04:56.110 And we can use the update query data. 04:56.590 --> 05:00.850 Then we can use the fetch address as the first argument. 05:01.150 --> 05:03.940 The arguments is going to be undefined here. 05:03.940 --> 05:06.910 And then we get access to our draft states. 05:07.030 --> 05:14.980 And then we can use the arrow and open curly brackets, and we effectively want to assign our new address 05:14.980 --> 05:15.490 to this. 05:15.490 --> 05:17.170 So we can use object assign here. 05:17.170 --> 05:24.700 Use a method on the object that we're going to use for the draft, and we'll use object assign. 05:24.880 --> 05:29.080 We'll pass in draft for the current state of the address. 05:29.140 --> 05:36.040 Add a comma and then in curly brackets, we'll use the spread operator and update this with the updated 05:36.040 --> 05:36.820 address. 05:36.820 --> 05:44.470 So below the patch results and below this variable let's add a try catch block. 05:44.800 --> 05:51.130 And if we get an error we'll use patch results dot undo to undo our changes there. 05:51.130 --> 05:54.700 And we'll just console dot log any error that we get. 05:54.700 --> 05:59.380 And inside the try we can just use await and query fulfill. 05:59.410 --> 06:02.950 And let's also export what we've just created there. 06:02.950 --> 06:08.740 So we'll have a use fetch user address query. 06:08.740 --> 06:17.530 And we'll also have a use update user address mutation that we are exporting from this component or 06:17.530 --> 06:20.950 from this RTK query functionality. 06:20.980 --> 06:24.160 So let's head over to our checkout step next. 06:24.160 --> 06:30.460 And we're going to effectively get our address from the API and use that to populate what we have inside 06:30.460 --> 06:31.240 here. 06:31.510 --> 06:38.200 So in the checkout stepper let's use const. 06:38.440 --> 06:44.620 And we'll use our use fetch address query here. 06:44.620 --> 06:46.540 And we'll need to do something. 06:46.780 --> 06:52.690 Or we'll need to use some trickery really to get hold of the address part and the name part separately 06:52.690 --> 06:53.890 from what we get back. 06:53.920 --> 07:00.640 And if we remind ourselves we've got this inside a single object that includes the name and the address 07:00.640 --> 07:01.810 all combined. 07:01.840 --> 07:06.250 Now we need to populate the name in the name part of the address element. 07:06.250 --> 07:10.210 And the rest of this is going to be the address that we need to populate. 07:10.210 --> 07:14.580 So one way we can do that we can use some spread operator trickery here. 07:14.580 --> 07:16.560 So I'm going to use data colon. 07:16.590 --> 07:23.490 Then open curly brackets and specify name as one of the things I'm effectively destructuring from the 07:23.490 --> 07:24.600 address. 07:24.840 --> 07:30.360 And then I can use dot dot dot rest address which can be called anything we want. 07:30.390 --> 07:34.170 But this is going to contain the rest of the address properties. 07:34.170 --> 07:37.470 So what we'll have is the name is going to be list. 07:37.470 --> 07:43.530 And then rest address is going to be all of this which is what stripe needs to populate the address 07:43.530 --> 07:44.490 element. 07:44.520 --> 07:49.920 And then we can come back here and inside our address element. 07:49.920 --> 07:52.230 For the name we can use name. 07:52.770 --> 07:58.560 And for the address we can give it the rest address. 07:59.820 --> 08:03.090 And it looks like I've still got an error inside here. 08:03.750 --> 08:08.970 And it's saying name does not exist on type, address or undefined. 08:08.970 --> 08:14.080 And if I take a look at what this is returning then this can return undefined. 08:14.080 --> 08:18.580 So we need more trickery inside here to make this work. 08:18.580 --> 08:25.960 And to the right of the first closing curly brackets, I'm going to set this equal to an empty object 08:25.960 --> 08:31.630 and then specify as address, which we get from our own type inside here. 08:31.630 --> 08:35.410 And what this should do is remove any of the warnings inside here. 08:35.440 --> 08:40.270 Because now we're saying that the name does exist because it exists in the address property. 08:40.270 --> 08:43.180 And that will suffice for this. 08:43.180 --> 08:44.740 So no more warnings. 08:44.740 --> 08:47.260 And we're supplying the address here. 08:47.800 --> 08:53.830 So if we go back and take a look at our progress, what we should find is that our address is populated 08:53.830 --> 08:56.140 inside the stripe form fields. 08:56.140 --> 09:02.200 And it is so we can see the name and the address details populated there. 09:02.200 --> 09:05.200 And then our next step is to go on to the payment. 09:05.230 --> 09:06.430 Marvelous. 09:06.430 --> 09:11.890 But our next step in the code is going to be able to give the user the facility to actually update the 09:11.890 --> 09:12.400 address. 09:12.400 --> 09:14.980 And that's what we'll take a look at next.