WEBVTT 00:00.770 --> 00:05.780 So this time around, we want to improve the displaying a sale page, and that means we want to do more 00:05.780 --> 00:09.320 than when you click on refund or just write to the console. 00:09.470 --> 00:10.640 We want things to happen. 00:10.880 --> 00:17.030 And we also want to display the status of an order, whether it's refunded or normal. 00:17.030 --> 00:21.180 And we want to hide this refund order button if it's not possible to refund it anymore. 00:21.200 --> 00:28.160 So let's just turn it over to our Edem and I'm looking at the sales page Orrego HTML. 00:28.610 --> 00:34.340 And the first thing I want to do is right up here after the HRR, before I display the information, 00:34.610 --> 00:37.100 I'm actually going to put a little bit of information in here. 00:37.100 --> 00:40.610 A place to put messages div class equals alert. 00:40.610 --> 00:48.250 And this is exactly the same thing we did on the other sales pages, Alert to Danger Text Center. 00:48.290 --> 00:49.520 And initially it's hidden. 00:49.520 --> 00:53.450 Duchemin and I'm going to. 00:54.550 --> 01:02.450 Close minded and give it an A. And I'll call it messages, idy equals messages. 01:03.040 --> 01:06.040 So there they have a place to display messages now. 01:06.610 --> 01:14.200 And of course, that means we want to come down here in our JavaScript and put a couple of functions 01:14.200 --> 01:14.430 in. 01:14.460 --> 01:19.140 So, first of all, I'll get a reference to the messages left messages not last. 01:19.450 --> 01:27.490 Let messages equal document get element by ID and its messages. 01:28.330 --> 01:31.970 Now I have a reference to it and I will do the same sort of thing we did before. 01:32.290 --> 01:41.110 So that'll be a function show error, which takes a message and I'll close that and a function show 01:41.120 --> 01:44.670 success and that takes a message. 01:45.910 --> 01:50.410 And again, this is code duplication, but I'm going to do it now just so everything's in the same place 01:50.410 --> 01:51.510 when you're looking at files. 01:52.510 --> 02:00.610 So if there's an error, I'll say messages, dot class list, dot and alert that danger can make it 02:00.610 --> 02:10.810 red and I'll say messages dot class list dot remove alert dash success in case there is a success cluster 02:12.370 --> 02:15.040 and all unhide its messages. 02:15.040 --> 02:24.400 Dot class list, remove the daschner and set its text messages. 02:24.400 --> 02:29.540 Dot inner text equals MSJ. 02:30.520 --> 02:35.070 Then I'll copy all this and modify it for success case. 02:36.910 --> 02:45.100 So we're going to add success, remove danger, removed Enan and set its text there. 02:45.160 --> 02:50.020 Now these are available to me and of course I want to use those down here. 02:52.380 --> 02:56.200 After we refund things, so right now, all I'm doing is console log data. 02:57.090 --> 03:05.280 So let's get rid of that and just say if data error something went wrong or else everything worked the 03:05.280 --> 03:05.940 way it's supposed to. 03:06.000 --> 03:06.860 We did a refund. 03:07.320 --> 03:11.580 So if there's a success, if we've done this properly, we can say show success, 03:14.730 --> 03:15.900 charged, refunded. 03:16.110 --> 03:16.910 And that's a good start. 03:17.220 --> 03:23.520 If there's an error, we can say show error and then we just pass it. 03:23.730 --> 03:25.710 DataDot message, whatever that might be. 03:27.390 --> 03:30.800 Now, if the charge has been refunded, we actually want to do something else. 03:30.810 --> 03:36.180 We want to hide that refund button so we can say document, get element by ID. 03:37.290 --> 03:40.350 And I believe we call that refund BTM 03:42.870 --> 03:46.500 classless the ad deduction on. 03:48.680 --> 03:52.370 And we also probably should do something else. 03:52.400 --> 03:53.630 So at the very top here. 03:55.370 --> 04:01.320 After the part where I have the title right here in H2, let's put a couple of things in here. 04:01.340 --> 04:06.910 Now, what I'm going to do, first of all, is open the all sales page and copy this. 04:06.920 --> 04:09.000 The spin class equals batch sale. 04:09.020 --> 04:09.610 Copy that. 04:09.950 --> 04:17.270 Just to have it say some retyping, go back to sell their sales page HTML paste that in there and give 04:17.270 --> 04:24.930 this span the idea of refunded and then duplicate. 04:24.930 --> 04:36.950 It changes to success and make this chart and give it the ID of church and then I'll make both of those 04:36.950 --> 04:45.530 initially hidden the dash and dash not OK and a better spell charged. 04:45.530 --> 04:45.770 Right. 04:47.180 --> 04:49.210 So those are not visible at all right now. 04:49.550 --> 04:56.780 So when this page first loads after we call our back end and get our information about this particular 04:56.780 --> 05:00.680 sale, we'll unhide the appropriate one so we can come down here, first of all. 05:01.850 --> 05:13.070 To where the dome content is loaded and say if data, the status ID is exactly equal to one and it's 05:13.070 --> 05:18.170 a normal church else, it's a refund in our case because those are the only two we're going to handle. 05:18.350 --> 05:23.300 If the data status ID is exactly equal to one, then first of all, I'll say document don't get element 05:23.300 --> 05:33.260 by ID and I will get my refund GTN and I'm going to remove Dinaw, which isn't there yet, but we'll 05:33.260 --> 05:34.030 put it there in a moment. 05:34.160 --> 05:38.180 Remove the daschner, OK, with any. 05:39.380 --> 05:40.270 So we'll do that. 05:40.700 --> 05:43.430 And I'm also going to remove. 05:44.660 --> 05:49.840 Denon Prefunded, so let's go back up here and find that refund button. 05:53.710 --> 06:02.200 And give it the class of deduction, so now when that page initially loads, there will be no refund 06:02.200 --> 06:08.860 button and there will be no status at the top, no BACHE But once we load the actual order or the sale, 06:09.190 --> 06:13.720 if it's a normal sale, then we will remove Denon from charge. 06:13.720 --> 06:18.410 So that becomes visible and we'll remove Denon from this so the refund button becomes visible. 06:18.430 --> 06:19.450 Otherwise, they stay hidden. 06:19.460 --> 06:20.770 And that's exactly what we want. 06:21.670 --> 06:25.260 So now let's go back down to here and see if we got everything right. 06:25.960 --> 06:33.970 So we're going to add Dinon and then, of course, we want to we'll just duplicate this and change this 06:33.970 --> 06:34.850 to refunded. 06:37.450 --> 06:46.600 And I will remove Denon from that and then I'll duplicate that again and find charged and add on to 06:46.600 --> 06:46.940 that. 06:47.620 --> 06:50.050 So that will change the status at the top of the page. 06:50.080 --> 06:50.870 Let's give this a try. 06:51.760 --> 06:53.100 So make stop. 06:54.560 --> 06:55.360 Make start. 06:59.720 --> 07:06.320 And let's go back to our Web browser and go back to the admin menu and choose all sales, so this one 07:06.320 --> 07:08.150 should show up with a refund button. 07:08.180 --> 07:08.780 Let's try that. 07:09.740 --> 07:10.460 There it is. 07:10.490 --> 07:12.550 Now, we didn't get our badge there either. 07:12.710 --> 07:13.520 Let's find out. 07:13.550 --> 07:19.580 Let's go back to Visual Studio code, see what the ID of those badges were. 07:19.850 --> 07:26.870 So at the very top, I have I.D. equals refunded with Dinon and I t equals charged with Dinaw. 07:27.500 --> 07:33.470 OK, and then after we load it down here, if document status equals one. 07:34.460 --> 07:36.260 We want to remove Denon from that. 07:40.290 --> 07:50.970 Document that get element, but ID class list, dot, remove, dot, classless, dot remove 07:53.970 --> 07:58.860 and we're hiding the refund button and we don't want to show the refunded, we want to show charged 08:00.000 --> 08:00.810 because that's normal. 08:01.740 --> 08:08.010 Otherwise, let's copy these, delete the one we don't need, which is the refund button. 08:09.860 --> 08:14.570 We don't want to be able to refund something that's not status aside, so that's gone and this becomes 08:14.570 --> 08:15.040 refunded. 08:16.010 --> 08:16.430 All right. 08:16.640 --> 08:19.190 I was a little sloppy, so mixed up, 08:22.430 --> 08:23.060 Mr.. 08:26.530 --> 08:27.440 And let's try that again. 08:28.120 --> 08:34.100 Back over to here, go to admin, all sales, so this one should show up is refunded. 08:34.510 --> 08:35.300 Let's try that. 08:36.220 --> 08:36.820 So there it is. 08:36.820 --> 08:38.650 It's refunded and we don't have a refund. 08:38.950 --> 08:39.550 Perfect. 08:39.580 --> 08:40.690 Now, let's try the other one. 08:42.190 --> 08:43.300 And it says charged. 08:43.300 --> 08:45.880 And we can refund the order and that should still fire. 08:45.940 --> 08:46.470 All right. 08:47.530 --> 08:48.720 So that's a good start. 08:48.730 --> 08:53.740 And then we have a place for error messages as well, and we have a place for success messages. 08:54.010 --> 08:56.620 So let's move on. 08:56.620 --> 09:03.490 The next step is to update our handler to actually change the status of an order once it's been refunded.