Okay, let's continue our work on the confirmation of the payment.
Let's start with this button.
And the reason I do want to turn this into a loading button, rather than just disabled, is due to
the fact that we're not using RTK query for this, which means we're not going to have our loading bar
at the top of the page whilst payment is being submitted, because our API is not involved in this step.
And unfortunately, and this is the only styling framework I've seen this on, the button doesn't come
with a loading indicator, or it's one of the only ones I've seen this on, but it is coming at some
point in the future.
And if we go and take a look at material UI and we search for loading button, it does exist.
But where it exists is in the UI lab.
And we need to effectively add this to our project as well.
It's not in the main core M UI libraries to use this, and anything that's inside UI lab is just in
there because currently it's still technically experimental.
Maybe the documentation for it isn't finalized yet, but what this does give us is a loading indicator
that we can utilize, and it'll effectively display a spinner inside the button.
So we need to install the atom UI lab to take advantage of this.
So I'm just going to copy this into my clipboard.
And there should be some documentation inside here about the lab.
And it's called about the lab.
And if we take a look at this then it tells us the reasons this functionality hasn't yet been added
to the main packages yet, but it also gives us our npm install here.
So let's just copy this.
We've already got UI material of course, so we'll go back to VS code, and we'll add this into our
client project.
And I know I'm going to have to do this again because I am on react 19 release candidate.
So I'm going to add the legacy peer dependencies switch there as well.
And this should go ahead and make this available for our use.
So back into the component.
Let's switch this then from a button to a loading button which we get from my lab.
And did that import correctly.
No I didn't need to add it again okay.
So now we have this.
And as well as disabled we can specify loading.
And we can set this to submitting.
And that will suffice.
So when we do make a payment at that point we would also like to clear our basket from effectively our
Redux store as it's currently being cached.
So once they have submitted their payment, let's clear the items from the basket as well and we'll
go to our basket API to do this, the basket API ts.
And we'll add another method inside here.
Now we're not going to make a query to our API to clear the basket on the client.
We don't need to do that, but we do need to affect what's going on inside our Redux cache to clear
it on demand effectively.
So we're going to add another method inside here.
But it's going to be slightly different to the ones we've used previously.
So I'm just going to add it underneath the remove basket item.
And that's this line here.
So I'll add a comma and we'll have a function in here to clear the basket.
And we'll use builder and mutation.
And it's not going to take any parameters and it's not going to return anything.
So void and void for that we'll open parentheses and curly brackets.
And inside here instead of using query we're going to use query function.
And we'll open parentheses.
Add an arrow open parentheses again curly brackets.
And we're going to specify data as undefined.
We don't want to do anything with this query effectively but we still want to execute it.
So we're going to use the on query started make it async.
And we're not going to pass anything as the first argument.
So we'll just use an underscore and we'll get access to dispatch so that we can dispatch something that's
going to update the store.
And then we can use dispatch inside here.
Open parentheses.
And we're going to use our basket API dot util.
And we're going to use the update query data.
And we're going to update the fetch baskets.
Second argument is going to be undefined.
And the third argument is where we get access to our draft state.
And then we add the arrow open curly brackets.
And we'll just set the draft dot items to be an empty array.
And that will effectively clear out the items from the basket inside our Redux store.
And we'll add this as another thing that we're creating a hook for inside here.
So I'll just add the use clear basket mutation to our list of exports.
Now what we're also going to do on the client side is we're going to clear the cookie from our browser.
Now we do have access to this one because this is not an HTTP only cookie where we're storing our basket.
If we go back and take a look and go and take a look at the Chrome DevTools in the application and take
a look at our cookies, then we've got a whole bunch of stripe cookies inside here now as well.
But we've also got our basket ID and we can see that for this one, the HTTP only box is not checked.
And that means that we can access this particular cookie inside our JavaScript code.
So there's no tool in react to help us do this.
So we will need to to make it easy for ourselves just to install something to help us access that cookie.
So I'm just going to install another package here, a helper.
And I'm going to say npm install js dash cookie.
And I'll just add the switch because I think I'm just going to need to do this every single time.
So legacy deps as well.
And also we just need some types for this, because this particular npm package doesn't come with a
type definition file.
So we'll use npm install and type definition files we can store in developer dependencies.
So I'll use dash uppercase D.
And then we can use at types forward slash js dash cookie and press return.
And of course I should have added the switch to this one as well.
So let's do that.
We'll add the legacy dash peer dash deps and press return.
Okay.
So now we've got the ability to clear our cookie.
So inside or below the dispatch.
After we've cleared our baskets let's make use of the cookie utility we have.
And we should be able to get this from cookies.
And then we've got the option to remove.
And then we can specify the basket ID.
And I've got a warning or error about this.
And let's just double check what the import was.
I don't think I got something that I was expecting there.
Okay, so we do need to import cookies from the package that we've added.
So I'm just going to add this manually at the top.
It doesn't import automatically.
So I'm going to say import cookies from JS cookie.
And the error goes away.
And if we take a look at what we've got inside here now then inside our clear basket method, after
we've effectively cleared this from our store or cleared the items from our store, then we're going
to remove the cookie from the browser.
So next time the user adds something to the basket, we will not be sending up that cookie to the API.
So a new basket would be created then.
So let's make use of this clear basket mutation inside our basket hook that we created.
So I'll open up the use basket.
And inside here we can just use our new hook that we've created.
So I'll add this at the top with the other hook.
And we'll use const and call it Clear Baskets and set it equal to use Clear Baskets mutation.
And we'll just add this as an additional thing that we're returning from this.
So I'll also add the clear basket there as well.
And then we can go back to our checkout stepper and inside the confirm payment method that we created.
If we do have payment status of succeeded at this point we're okay to delete or clear our basket, and
we'll just need to bring in the clear basket method as well.
We've already got the use basket in here, so we can just also bring in the clear basket method and
then make use of it inside our confirm payment.
And just underneath the navigate we'll use the clear basket function.
So a bit of work to get this functionality configured and coded.
But now we are in a position to actually start testing our payments.
And that's exactly what we'll do.
In the next lesson, we'll take a look at our progress and see if we have a working payment system,
and we'll take a look at that next.