So this time around, we want to improve the displaying a sale page, and that means we want to do more
than when you click on refund or just write to the console.
We want things to happen.
And we also want to display the status of an order, whether it's refunded or normal.
And we want to hide this refund order button if it's not possible to refund it anymore.
So let's just turn it over to our Edem and I'm looking at the sales page Orrego HTML.
And the first thing I want to do is right up here after the HRR, before I display the information,
I'm actually going to put a little bit of information in here.
A place to put messages div class equals alert.
And this is exactly the same thing we did on the other sales pages, Alert to Danger Text Center.
And initially it's hidden.
Duchemin and I'm going to.
Close minded and give it an A. And I'll call it messages, idy equals messages.
So there they have a place to display messages now.
And of course, that means we want to come down here in our JavaScript and put a couple of functions
in.
So, first of all, I'll get a reference to the messages left messages not last.
Let messages equal document get element by ID and its messages.
Now I have a reference to it and I will do the same sort of thing we did before.
So that'll be a function show error, which takes a message and I'll close that and a function show
success and that takes a message.
And again, this is code duplication, but I'm going to do it now just so everything's in the same place
when you're looking at files.
So if there's an error, I'll say messages, dot class list, dot and alert that danger can make it
red and I'll say messages dot class list dot remove alert dash success in case there is a success cluster
and all unhide its messages.
Dot class list, remove the daschner and set its text messages.
Dot inner text equals MSJ.
Then I'll copy all this and modify it for success case.
So we're going to add success, remove danger, removed Enan and set its text there.
Now these are available to me and of course I want to use those down here.
After we refund things, so right now, all I'm doing is console log data.
So let's get rid of that and just say if data error something went wrong or else everything worked the
way it's supposed to.
We did a refund.
So if there's a success, if we've done this properly, we can say show success,
charged, refunded.
And that's a good start.
If there's an error, we can say show error and then we just pass it.
DataDot message, whatever that might be.
Now, if the charge has been refunded, we actually want to do something else.
We want to hide that refund button so we can say document, get element by ID.
And I believe we call that refund BTM
classless the ad deduction on.
And we also probably should do something else.
So at the very top here.
After the part where I have the title right here in H2, let's put a couple of things in here.
Now, what I'm going to do, first of all, is open the all sales page and copy this.
The spin class equals batch sale.
Copy that.
Just to have it say some retyping, go back to sell their sales page HTML paste that in there and give
this span the idea of refunded and then duplicate.
It changes to success and make this chart and give it the ID of church and then I'll make both of those
initially hidden the dash and dash not OK and a better spell charged.
Right.
So those are not visible at all right now.
So when this page first loads after we call our back end and get our information about this particular
sale, we'll unhide the appropriate one so we can come down here, first of all.
To where the dome content is loaded and say if data, the status ID is exactly equal to one and it's
a normal church else, it's a refund in our case because those are the only two we're going to handle.
If the data status ID is exactly equal to one, then first of all, I'll say document don't get element
by ID and I will get my refund GTN and I'm going to remove Dinaw, which isn't there yet, but we'll
put it there in a moment.
Remove the daschner, OK, with any.
So we'll do that.
And I'm also going to remove.
Denon Prefunded, so let's go back up here and find that refund button.
And give it the class of deduction, so now when that page initially loads, there will be no refund
button and there will be no status at the top, no BACHE But once we load the actual order or the sale,
if it's a normal sale, then we will remove Denon from charge.
So that becomes visible and we'll remove Denon from this so the refund button becomes visible.
Otherwise, they stay hidden.
And that's exactly what we want.
So now let's go back down to here and see if we got everything right.
So we're going to add Dinon and then, of course, we want to we'll just duplicate this and change this
to refunded.
And I will remove Denon from that and then I'll duplicate that again and find charged and add on to
that.
So that will change the status at the top of the page.
Let's give this a try.
So make stop.
Make start.
And let's go back to our Web browser and go back to the admin menu and choose all sales, so this one
should show up with a refund button.
Let's try that.
There it is.
Now, we didn't get our badge there either.
Let's find out.
Let's go back to Visual Studio code, see what the ID of those badges were.
So at the very top, I have I.D. equals refunded with Dinon and I t equals charged with Dinaw.
OK, and then after we load it down here, if document status equals one.
We want to remove Denon from that.
Document that get element, but ID class list, dot, remove, dot, classless, dot remove
and we're hiding the refund button and we don't want to show the refunded, we want to show charged
because that's normal.
Otherwise, let's copy these, delete the one we don't need, which is the refund button.
We don't want to be able to refund something that's not status aside, so that's gone and this becomes
refunded.
All right.
I was a little sloppy, so mixed up,
Mr..
And let's try that again.
Back over to here, go to admin, all sales, so this one should show up is refunded.
Let's try that.
So there it is.
It's refunded and we don't have a refund.
Perfect.
Now, let's try the other one.
And it says charged.
And we can refund the order and that should still fire.
All right.
So that's a good start.
And then we have a place for error messages as well, and we have a place for success messages.
So let's move on.
The next step is to update our handler to actually change the status of an order once it's been refunded.