WEBVTT 00:00.110 --> 00:04.340 Okay, so now that we can fetch the address, our next task is to be able to update the address. 00:04.340 --> 00:07.850 So let's head back to VS code to now configure this. 00:07.850 --> 00:14.120 And if we go back to our account API we created the method inside here to update the user address. 00:14.120 --> 00:15.770 So we're halfway there already. 00:15.770 --> 00:18.020 And let's go back to our checkout. 00:18.020 --> 00:21.650 Step up as this is where we'll use this functionality. 00:21.650 --> 00:27.860 And at the top here let's add the hook that we generated to update the address. 00:27.860 --> 00:32.300 So we'll use const and we'll use the update or we'll call it update address. 00:32.300 --> 00:37.550 And we'll set it equal to the use update user address mutation. 00:37.550 --> 00:42.020 And we'll also have some local state for the checkbox button as well. 00:42.020 --> 00:44.390 We need to know if it's been checked or it's not checked. 00:44.390 --> 00:53.570 So we'll also use local state and we'll have save address checked as the property name and set save 00:53.600 --> 00:59.090 address checked as the method to update it. 00:59.090 --> 01:04.470 And we'll use the use state hook and we'll set its initial value to be false. 01:04.500 --> 01:11.130 Now, in order to get the address, because we're using stripe functionality to populate the address 01:11.130 --> 01:15.960 inside the component, we'll need access to stripe elements. 01:15.990 --> 01:22.380 Now, the stripe react package that we are using comes with a hook that we can utilize. 01:22.380 --> 01:25.260 So I'm going to say const elements equals. 01:25.260 --> 01:31.590 And we can use use elements that we get from react stripe js. 01:31.590 --> 01:39.540 And then in the handle next when they click to go on to the next step in our wizard, if the checkbox 01:39.570 --> 01:42.870 is checked to save the address, we'll check for that. 01:42.870 --> 01:46.110 And then we can update the address on our APIs. 01:46.110 --> 01:52.680 So we'll add an if statement, and we'll check to see if the active step is equal to zero, which means 01:52.680 --> 01:54.420 they're on the address step. 01:54.450 --> 01:59.430 And the save address checked is true. 01:59.430 --> 02:05.240 And just by specifying save address checked here like that will equate to true the opposite of that 02:05.240 --> 02:06.920 if we wanted to check if it was false. 02:06.950 --> 02:12.620 Of course we would use the Not operator, and we'll also check to make sure that we have the elements 02:12.620 --> 02:15.110 before we try and use that inside here. 02:15.140 --> 02:20.480 And we'll specify const address equals await. 02:20.780 --> 02:27.590 And we will use the get stripe address function that we're about to create because we'll need to go 02:27.590 --> 02:28.790 and get this from stripe. 02:28.790 --> 02:31.940 So slightly awkward to get this, but not too tricky. 02:31.970 --> 02:35.090 We'll add a missing function declaration for this. 02:35.090 --> 02:36.860 And where did that go. 02:38.300 --> 02:41.300 And let's go find our function that should be created okay. 02:41.330 --> 02:43.220 So it's created it underneath our component. 02:43.220 --> 02:47.150 I'm going to move this inside our component code. 02:47.180 --> 02:49.550 That didn't work out quite how I was hoping for. 02:49.820 --> 02:55.640 For some reason I was hoping it would appear just below the method I was working in, but that appears 02:55.640 --> 02:56.510 not to be the case. 02:56.510 --> 03:05.840 I'll use an arrow function just to be consistent inside here and add the arrow function, and I'll also 03:05.840 --> 03:11.460 make it async as well, because we need to use an async function from stripe to be able to use this. 03:11.460 --> 03:20.610 So instead of throw new error, let's say const address elements equals elements. 03:20.730 --> 03:23.130 And we can use the get element method. 03:23.130 --> 03:27.480 And then we can use the address to get hold of the address element. 03:28.560 --> 03:34.980 And if we do not have the address element because this is going to return either the address element 03:34.980 --> 03:36.840 or null or undefined. 03:36.840 --> 03:38.790 So we'll need to check that we have this. 03:38.790 --> 03:41.730 And we'll use if not address element. 03:41.880 --> 03:47.400 And we will return null as we cannot do anything else with this method at this time. 03:47.400 --> 03:50.940 And then we're going to need to get hold of the address from stripe. 03:50.940 --> 03:55.980 So we will use const and we'll destructure what we get back from this in curly brackets. 03:55.980 --> 04:00.840 But let's just use the equals and specify await address element. 04:00.840 --> 04:02.760 And then we can get the value. 04:02.820 --> 04:04.680 So what does this give us. 04:04.680 --> 04:11.330 And this gives us effectively the value that's going to contain our address information. 04:11.540 --> 04:18.290 It'll also tell us if the address element has been completed, and it will also tell us if this is a 04:18.290 --> 04:18.860 new address. 04:18.860 --> 04:24.650 But we need to get the value from this so we can look for inside here the value. 04:24.770 --> 04:30.470 But also we want to separate the name and address as well, because our value is going to have those 04:30.470 --> 04:35.270 two different elements, just like we needed to specify this inside here. 04:35.270 --> 04:37.640 This is going to come as a name and address. 04:37.640 --> 04:42.560 And we really want to combine this so that when we do send it up to our API, it's going to be in the 04:42.560 --> 04:45.470 format that our API is expecting. 04:45.470 --> 04:52.040 So after the value I'll add a colon and then we'll destructure the name and the address from this. 04:52.040 --> 04:56.900 And then we can check to make sure that we have the name and address. 04:56.900 --> 05:02.480 And if we do, we can return both the name and the address but combined into a single object. 05:02.480 --> 05:04.550 So we'll check to make sure we have the name. 05:04.550 --> 05:06.650 And we have the address. 05:06.680 --> 05:12.480 And if we do we will return and we'll open curly brackets, will use the spread operator again, and 05:12.480 --> 05:17.940 will return the address and append onto this object effectively the name as well. 05:17.940 --> 05:23.760 And this is going to give the address in the format that we expect it, or our API is expecting it in, 05:23.760 --> 05:29.670 and will also accommodate the fact that the name and address may be undefined or null, and will return 05:29.670 --> 05:30.540 null from this. 05:30.540 --> 05:36.660 Because again, we can't do anything if we do not have these values, we can't send up an empty address 05:36.660 --> 05:37.830 to our API. 05:37.920 --> 05:43.530 So now that we have the address and I'll need to make this handle next method async as well as I'm getting 05:43.530 --> 05:46.290 an error with the await keyword there. 05:46.290 --> 05:48.870 And then we can check to make sure we have the address. 05:48.870 --> 05:55.680 And if we do, then we can use await and update address and pass in the address. 05:55.680 --> 05:59.670 So let's head down to our check box so that we can make use of this. 05:59.700 --> 06:01.230 In fact I've got an error here. 06:01.230 --> 06:03.510 And what is the problem. 06:03.510 --> 06:07.290 And it says types of property line two are incompatible. 06:07.290 --> 06:12.160 And it says string or null is not assignable to type string or undefined. 06:12.490 --> 06:19.960 And the reason for that is there's a slight difference between the type of property we've used versus 06:19.990 --> 06:23.140 what is coming back from stripe for line two. 06:23.170 --> 06:27.100 I'll have made it optional using the question mark in our type. 06:27.130 --> 06:34.270 But stripe is using null instead, so undefined and null are two different things, even though effectively 06:34.270 --> 06:37.150 we treat them roughly the same way inside here. 06:37.150 --> 06:44.440 So let's go back to our users and we'll give line two an alternative value of null as well, to accommodate 06:44.470 --> 06:46.060 what stripe is using. 06:46.060 --> 06:50.920 And if we go back to our checkout stepper, then the problem with the address has gone away. 06:50.920 --> 06:53.230 So undefined is not equivalent to null. 06:53.230 --> 06:58.660 And we do need to specify that if we want this to function based on the way that stripe is returning 06:58.660 --> 06:59.830 that address. 06:59.830 --> 07:05.800 So then we can just go down to our checkout box and use the function we have here. 07:05.800 --> 07:09.910 So let's scroll down to where we have our checkbox. 07:09.910 --> 07:16.940 And let's just move down the closing tag for this, and we'll give it its checked property and set it 07:16.940 --> 07:20.750 equal to save address checked. 07:20.930 --> 07:24.050 And we'll also give it an Onchange event. 07:24.110 --> 07:26.300 And we'll take the events. 07:26.360 --> 07:37.400 And we can use the set save address checked function and use E dot target dot checked which is something 07:37.400 --> 07:40.100 that we get of course from a check box. 07:40.100 --> 07:45.140 So the idea being is that when somebody does check that particular check box, then we can check for 07:45.170 --> 07:47.390 that in our handle. 07:47.420 --> 07:52.910 Next, as long as we're on step zero, when we click on the handle next we're going to check this and 07:52.940 --> 07:55.640 then update our address. 07:55.640 --> 07:57.770 So let's give that a go. 07:57.770 --> 07:59.840 And I'll head back to the browser. 08:00.890 --> 08:07.040 And let's just refresh the page so that we go out and get the updated address. 08:07.040 --> 08:14.860 And looks like I've got an issue now because my user is not currently displaying the address from the 08:14.860 --> 08:17.050 API that's caught me by surprise. 08:17.050 --> 08:22.540 Let's take a look at the console and see what is happening when we do this. 08:23.290 --> 08:25.630 So I'll just refresh the page. 08:28.420 --> 08:31.840 And okay stripes in the mix now. 08:31.840 --> 08:35.650 So we have a lot going on inside our network tab. 08:35.650 --> 08:46.120 So let's go up and take a look at what is happening and where is the request to go and get the address 08:46.120 --> 08:47.350 inside here. 08:47.410 --> 08:50.050 I don't see that happening in the console. 08:50.200 --> 08:52.390 I've still got those two warnings there. 08:52.390 --> 08:57.430 And I've also got a warning about default values not being a recognized parameter. 08:57.430 --> 09:01.240 I'm going to ignore this for now, and take a look at this and come back to this in the end. 09:01.240 --> 09:06.280 Because default values is a recognized parameter, it's in their documentation. 09:06.280 --> 09:08.800 That is how we need to set the address. 09:08.800 --> 09:15.160 So these kind of warnings from this stripe JavaScript, they can be quite infuriating especially when 09:15.160 --> 09:21.650 you follow their documentation to use it, and then they spout warnings in our Chrome dev tools when 09:21.650 --> 09:23.330 there's nothing we can do about it. 09:23.330 --> 09:24.770 So I'll ignore that one. 09:24.770 --> 09:31.640 And I'm not seeing the network request going to go out and get the address, which we then use to populate 09:31.640 --> 09:32.840 this. 09:33.290 --> 09:35.810 So something is awry. 09:36.170 --> 09:42.800 Okay, so after a bit of off screen troubleshooting, I have discovered that when it doesn't work, 09:42.800 --> 09:50.540 then our address is being loaded after the stripe elements are being loaded. 09:50.540 --> 09:56.510 And if I take a look at this request because I can see I'm missing the full name there, inside here 09:56.510 --> 10:01.520 I can see I'm making the fetch request to go and get user info basket and payments. 10:01.730 --> 10:05.120 And then we've got some stripe requests going on inside here. 10:05.120 --> 10:08.030 And somewhere buried down here is the address. 10:08.030 --> 10:09.680 So it's just a timing issue. 10:09.710 --> 10:11.270 The address is getting loaded. 10:11.270 --> 10:17.360 Or our request to go out to our API is getting loaded after the elements are being populated on the 10:17.400 --> 10:18.150 page. 10:18.150 --> 10:23.370 And then the way that we're using the default elements, it's not giving it a chance to go and get it. 10:23.370 --> 10:32.040 So fairly easy fix actually inside our use fetch address query, we can just use the Isloading flag. 10:32.040 --> 10:38.100 And we can make sure that this isn't loading before we return the stripe elements. 10:38.100 --> 10:48.240 So I'll just go back to the checkout page and I will just copy this typography where we're loading our 10:48.240 --> 10:49.320 checkouts. 10:49.320 --> 10:53.160 And I'll effectively replicate that inside our stepper as well. 10:53.160 --> 11:00.120 So before we return what's going on here I will add an if statement and say is loading. 11:00.120 --> 11:05.370 And then we can return the typography here. 11:05.370 --> 11:09.870 And I'll just bring in what we need for the imports. 11:09.930 --> 11:16.170 And if we go back to the browser, what we should find now is consistently every time, no matter how 11:16.170 --> 11:23.060 many times we refresh, we're going to see the address populate inside there because the address elements 11:23.060 --> 11:28.220 cannot load until we have the address, or there is no address, of course. 11:28.220 --> 11:32.450 And then it will just be the default address that we saw, or empty address that we saw when we didn't 11:32.450 --> 11:33.710 have the address. 11:33.710 --> 11:36.350 So that fixes that little problem. 11:36.350 --> 11:37.340 So great. 11:37.340 --> 11:39.890 But we didn't actually test the updating of the address. 11:39.890 --> 11:41.090 So that's something we should do. 11:41.120 --> 11:43.760 Let's change the country to United States. 11:43.760 --> 11:50.150 And I'll change the address line 1 to 100 somewhere center streets in New York. 11:50.270 --> 11:55.070 And if I click save as default address and click next, we should see loading going on. 11:55.070 --> 11:58.220 And that should mean that our address has been updated. 11:58.220 --> 12:03.350 So if I click back and then I refresh the page, this will force a request to go to our API. 12:03.350 --> 12:07.250 And we would expect to see the address being persisted inside here. 12:07.250 --> 12:08.180 And we do. 12:08.210 --> 12:13.610 However, we've still got the possibility even if we have an invalid address of going on to the next 12:13.610 --> 12:14.210 step. 12:14.210 --> 12:15.860 And I would like to avoid that. 12:15.860 --> 12:21.200 So we'll take a look at validating these inputs and checking that they're complete before allowing progress 12:21.200 --> 12:22.220 to the next step.