Okay, the next thing we want to take a look at and see is populating the address.
When the user goes to the checkout, if they have an address saved into our database.
Now one of the things that we looked at earlier was updating our address and getting the address for
a user.
And if I click send on this request, I've still got the cookie in postman.
For this user of Bob Bobotie and an address inside here, we want to take this address and populate
that inside our stripe address element.
And one of the options that we can give to our address.
If I take a look at the different options here, we can provide this with some default values.
And what this takes.
It takes a name property and it also takes the address property as two separate things really.
So we need to take what we have our response with the name and the address.
And we need to format that in such a way that stripe address elements will accept it.
So that's what we're aiming for, is to use the default values here and get our address and populate
it inside here.
But first of all, we'll need to create a type for the address that we're getting back from our API.
So we'll go to in fact let's just do this in the user dot ts, something that we've already created
rather than creating a new file for this.
And inside here we'll export a type and call it address.
And we'll set it equal to.
And we'll just populate the properties inside here for the address.
So we're going to have name.
That's a string line one.
That's a string line two which is optional.
And a string will have the city again a string.
The states is going to be a string.
The postal underscore code is going to be a string.
And finally the country is also a string.
So do be careful with spelling inside here.
Use the JSON to TTS.
If you want to be 100% sure you're not going to make any typos inside here.
And then we'll go over to our accounts API.
And we'll use this to go and fetch our address from our account controller.
So inside here below the logout let's just add a comma and we'll have another request to fetch the address.
And let's move my screen up a bit and we'll use builder.
Dot query.
And we're going to get an address back.
So please make sure you select this from the correct location because stripe also provides an address
type as well.
And we're not going to pass up any arguments.
So that's going to be void.
And then open parentheses curly brackets.
And we'll use query.
And we'll add the callback function.
Open parentheses.
Open curly brackets.
And this is quite a simple one.
We just need the URL and the account forward slash address.
And we also need another query to update the user address as well.
So we'll add this and specify builder dot mutation.
And inside here we're going to have an address that goes up as an argument.
And we'll also use an address as what we get back from this.
And we'll open parentheses open curly brackets and we'll add the query.
And we'll pass up the address as an argument.
Add the arrow open parentheses curly brackets.
And we'll have the URL which is going to be account forward slash address.
The method is going to be a post.
And the body is going to be the address that we send up here.
Now when we do get the response back from our server for this one, if we've already gone and fetched
the address, then we want to update what we have inside cache for this query.
So inside our update user address once again we're going to use the on query started method.
We'll make it async and we'll take in an address as the first parameter.
And then we'll use the dispatch and the query fulfilled.
And we'll add the arrow open curly brackets.
And we're going to do an optimistic update here.
We've looked at this before.
And we'll create a variable to store the results.
And we'll use const patch results as this will allow us to undo things if the request goes wrong.
And we'll set it equal to dispatch open parentheses.
And inside here we can use our accounts API dot util.
And we can use the update query data.
Then we can use the fetch address as the first argument.
The arguments is going to be undefined here.
And then we get access to our draft states.
And then we can use the arrow and open curly brackets, and we effectively want to assign our new address
to this.
So we can use object assign here.
Use a method on the object that we're going to use for the draft, and we'll use object assign.
We'll pass in draft for the current state of the address.
Add a comma and then in curly brackets, we'll use the spread operator and update this with the updated
address.
So below the patch results and below this variable let's add a try catch block.
And if we get an error we'll use patch results dot undo to undo our changes there.
And we'll just console dot log any error that we get.
And inside the try we can just use await and query fulfill.
And let's also export what we've just created there.
So we'll have a use fetch user address query.
And we'll also have a use update user address mutation that we are exporting from this component or
from this RTK query functionality.
So let's head over to our checkout step next.
And we're going to effectively get our address from the API and use that to populate what we have inside
here.
So in the checkout stepper let's use const.
And we'll use our use fetch address query here.
And we'll need to do something.
Or we'll need to use some trickery really to get hold of the address part and the name part separately
from what we get back.
And if we remind ourselves we've got this inside a single object that includes the name and the address
all combined.
Now we need to populate the name in the name part of the address element.
And the rest of this is going to be the address that we need to populate.
So one way we can do that we can use some spread operator trickery here.
So I'm going to use data colon.
Then open curly brackets and specify name as one of the things I'm effectively destructuring from the
address.
And then I can use dot dot dot rest address which can be called anything we want.
But this is going to contain the rest of the address properties.
So what we'll have is the name is going to be list.
And then rest address is going to be all of this which is what stripe needs to populate the address
element.
And then we can come back here and inside our address element.
For the name we can use name.
And for the address we can give it the rest address.
And it looks like I've still got an error inside here.
And it's saying name does not exist on type, address or undefined.
And if I take a look at what this is returning then this can return undefined.
So we need more trickery inside here to make this work.
And to the right of the first closing curly brackets, I'm going to set this equal to an empty object
and then specify as address, which we get from our own type inside here.
And what this should do is remove any of the warnings inside here.
Because now we're saying that the name does exist because it exists in the address property.
And that will suffice for this.
So no more warnings.
And we're supplying the address here.
So if we go back and take a look at our progress, what we should find is that our address is populated
inside the stripe form fields.
And it is so we can see the name and the address details populated there.
And then our next step is to go on to the payment.
Marvelous.
But our next step in the code is going to be able to give the user the facility to actually update the
address.
And that's what we'll take a look at next.