WEBVTT 00:01.440 --> 00:06.080 So now that we have all the logic in place in our back end, let's turn our attention to the front end. 00:06.510 --> 00:11.490 So right now I'm looking at the all sales page and this pages are these page. 00:11.490 --> 00:13.670 When I click on an order, it works really well. 00:14.010 --> 00:15.540 It says refund order. 00:15.540 --> 00:17.790 It calls to correct you URL on the back end. 00:17.940 --> 00:19.530 And I don't want that to change. 00:19.530 --> 00:25.170 In other words, I don't want to have to make any changes or not many changes that will keep this page 00:25.170 --> 00:26.460 working the way that it does. 00:26.460 --> 00:27.700 And we can do that really easily. 00:27.720 --> 00:29.010 So let's go back to our code. 00:31.230 --> 00:36.090 And I'm looking right now at Handler's dutko and I'm looking at the show sale function. 00:36.120 --> 00:42.650 This handler, which displays the show one sale page, and we already have this string map variable. 00:42.660 --> 00:47.430 And if you think about it, the only things that are going to change between this page, the one that 00:47.430 --> 00:52.740 shows a sale and a page like this, you can see I got rid of Diana Prince. 00:54.060 --> 00:58.860 The only thing that's changing are the label of this button and the world that we're calling on the 00:58.860 --> 01:04.580 back end so we can take advantage of this string map and pass that information. 01:04.590 --> 01:11.400 So in the show sale function, I'm going to add a value to the string map string map and I'll give it 01:11.400 --> 01:13.460 an index of refund dash. 01:13.500 --> 01:21.570 You, Earl, what you Earl, do we call to try to issue a refund while it appears admin's refund? 01:22.650 --> 01:29.640 And I'll also put in a string map with the index of refund DTN the label for the button. 01:29.790 --> 01:34.200 I'll make that refund for exactly what it is right now. 01:34.860 --> 01:41.550 And all I have to do now is go to the sales page, mortgage HTML template and find that button, which 01:41.550 --> 01:50.780 is right here, and change this to our story about the appropriate value from our stream map index dot 01:50.940 --> 01:52.060 string map. 01:52.740 --> 01:57.480 And I called this one refund HPN and close my double quotes. 01:58.290 --> 02:02.490 Then I go all the way down to the part where we're calling the refund. 02:06.310 --> 02:17.320 Which is right here and just replace this with index dot string map, and I called that one refund, 02:17.320 --> 02:23.080 dash you out and then close minded or double curly braces and that should actually work. 02:23.440 --> 02:27.670 And of course, that means I can go back to my handlers and did the same thing here. 02:28.420 --> 02:30.490 So I'll just copy these two and fix them. 02:36.490 --> 02:45.910 So refund early becomes AP slash, slash, AP slash admin slash cancel subscription, which is what 02:45.910 --> 02:55.000 we called it in, in the routes file for the hand for the back end and this one becomes cancel subscription. 02:55.960 --> 03:03.100 So let's save that, stop our application, make stop, make a start and make sure it all worked. 03:04.180 --> 03:08.190 So I'll go back to my web browser and I'm looking at a subscription. 03:08.200 --> 03:09.130 So let's reload that. 03:09.910 --> 03:11.770 And now it says cancel subscription. 03:11.770 --> 03:18.270 And if I view the source for this page and then find the fetch statement that calls the cancel subscription, 03:18.670 --> 03:19.460 there it is right there. 03:19.600 --> 03:25.030 Now, as you can see, goes templating, actually puts or escapes the slashes. 03:25.030 --> 03:25.730 But that's fine. 03:25.810 --> 03:27.630 This will absolutely work. 03:27.640 --> 03:31.750 Just trust the text e-mail package and it will do exactly what it's supposed to. 03:32.170 --> 03:34.120 So that looks like that should work. 03:34.720 --> 03:40.210 OK, so we have it all set up and now let's try testing it and see if we have anything else we have 03:40.210 --> 03:40.440 to do. 03:40.450 --> 03:47.020 So I'll open my template or open my JavaScript window and I'll try cancelling a subscription and see 03:47.020 --> 03:48.520 if everything is hooked up properly. 03:50.080 --> 03:51.760 Yes, I want to refund it. 03:51.760 --> 03:53.410 I probably should change that as well. 03:53.680 --> 03:54.760 Yeah, let's do that first. 03:54.860 --> 04:01.000 Let's cancel that and change this in our HTML template. 04:02.380 --> 04:07.100 Where perhaps that information up, so it's in the show cancel button. 04:08.470 --> 04:18.010 Are you sure it's all I have to do here is change this to index that string map and I call it cancel 04:18.580 --> 04:19.720 button like that. 04:21.150 --> 04:24.760 So let's stop our application and make sure that shows up properly. 04:25.510 --> 04:26.170 Maxed out. 04:27.280 --> 04:27.970 Maxed out. 04:30.290 --> 04:38.750 OK, let's reload that page, reload and now I should say cancel subscription instead of refunding and 04:38.750 --> 04:39.140 it doesn't. 04:39.170 --> 04:40.040 So I got something wrong. 04:43.950 --> 04:52.520 It wasn't cancel button, it was refund button, save, make, stop, start. 04:54.480 --> 05:01.390 Try this again, so I'll cancel that, reload this page, cancel subscription, that looks better. 05:02.040 --> 05:03.210 Now, let's see if we got it right. 05:05.860 --> 05:07.000 Charge refunded. 05:07.030 --> 05:12.440 OK, so we probably also want to change that message from refunded and change this up here. 05:13.210 --> 05:15.080 Now, those are pretty simple changes. 05:15.100 --> 05:20.950 So what I'm going to do is ask you to change the message that's displayed up here when we cancel a subscription 05:20.950 --> 05:25.890 to something appropriate and leave it as charge refunded when we were refunded subscription. 05:25.900 --> 05:30.340 And also, I want this to change from refunded to canceled. 05:30.520 --> 05:33.720 OK, so that should be pretty simple for you to do. 05:33.760 --> 05:37.180 You give it a whirl and in the next lecture, I'll show you how I did it.