WEBVTT 00:00.000 --> 00:00.300 Okay. 00:00.300 --> 00:04.320 Welcome to the end of course challenge and the optional challenge. 00:04.320 --> 00:05.490 It's not a requirement to do this. 00:05.490 --> 00:10.740 We've got our application published on the internet now with most of its functionality intact. 00:10.740 --> 00:16.710 But what we do have that's been hanging around for some time is this voucher code inside our checkout 00:16.710 --> 00:19.110 that we have not done anything with yet. 00:19.110 --> 00:24.330 And the challenge is to get this functionality to work in your application. 00:24.330 --> 00:29.160 Now, this is a challenging challenge, even with the guidance that I'm going to provide for you. 00:29.190 --> 00:32.160 Please go to your course assets folder. 00:32.370 --> 00:38.100 And inside here there's a challenge folder and two PDFs are inside here the Coupon challenge and the 00:38.100 --> 00:39.270 solution file. 00:39.270 --> 00:45.090 So unless you want to see the solution then please open up the coupon challenge file. 00:45.090 --> 00:52.080 And inside this file I have some guidance about what this challenge involves and some basic steps to 00:52.110 --> 00:55.260 guide you through it without providing the solution or the code. 00:55.260 --> 00:59.130 And I'll just run through the business requirement first to give you a bit of background about this 00:59.170 --> 01:03.160 particular feature or challenge that you're about to embark on. 01:03.160 --> 01:08.110 So to restore app needs a coupon feature, customers should be able to apply coupons at the checkout 01:08.110 --> 01:14.140 page, see discounted prices, and receive error messages for invalid coupons. 01:14.740 --> 01:20.050 The feature must ensure quick validation of the coupon, security of coupon codes and a user friendly 01:20.050 --> 01:24.130 interface, and they should also be able to remove an applied coupon. 01:24.130 --> 01:27.940 So that's the scenario and the general guidance is the next part. 01:27.940 --> 01:30.640 And you have been given this task to complete. 01:30.790 --> 01:33.250 The HTML for the voucher is already in place. 01:33.250 --> 01:39.880 We've seen that and it's just missing the functionality and the usage of the stripe API docs will be 01:39.880 --> 01:41.530 necessary to complete this task. 01:41.530 --> 01:47.980 And there's a couple of links to the coupon API and the promotion code API that you might want to take 01:47.980 --> 01:54.160 a look at to help you accomplish this task, and the suggested approach to tackling this task, which 01:54.160 --> 01:57.310 is to start from the bottom and work your way up. 01:57.340 --> 02:01.240 And also a bit of guidance about what to do if you get yourself in a bit of a pickle. 02:01.270 --> 02:06.670 The code is a mess, and you just want to go back to how it was before you started tackling this. 02:06.700 --> 02:13.390 Then there's a couple of approaches you can use to effectively reset your code before you started carrying 02:13.390 --> 02:14.920 out this work. 02:14.950 --> 02:20.770 Approach one works pretty well, which is to use the git clean dash df command. 02:20.800 --> 02:29.920 This will remove untracked changes and folders for untracked changes, but with files that you're updating 02:29.920 --> 02:32.020 they're classed as tracked files. 02:32.020 --> 02:36.190 Then you can use git checkout dash dash periods. 02:36.190 --> 02:40.570 In addition to this in order to erase the changes from tracked files. 02:40.600 --> 02:41.680 That works pretty well. 02:41.710 --> 02:45.910 Approach two is the more nuclear option if you like. 02:45.940 --> 02:51.700 We use git add, followed by a period to stage all of the changes that you've made. 02:51.730 --> 02:56.080 Then we actually create a commit and are missing the dash m there for the message. 02:56.110 --> 02:58.600 but that would be the message for the commit. 02:58.630 --> 03:04.570 Git commit m and then sad face emoji or whatever name you want to give this commit because the idea 03:04.570 --> 03:11.170 is we're going to remove it and then git reset dash dash hard and then head tilde. 03:11.200 --> 03:16.630 One is just a way of referencing the commit that we have just created, and that will remove all of 03:16.630 --> 03:18.130 the changes to the commit. 03:18.130 --> 03:22.900 And be careful using this command, because this literally removes the commit. 03:22.900 --> 03:24.400 There's no way to get it back. 03:24.400 --> 03:29.410 And using the head tilde one means it's only going to remove the last commit. 03:29.410 --> 03:34.510 There is a soft version of this where we use soft instead of hard, and that removes the commit, but 03:34.510 --> 03:36.040 keeps all of the changes. 03:36.040 --> 03:39.850 So this one actually removes all of the changes and the commits itself. 03:39.850 --> 03:45.580 And also we've got a link to a demo of this to see it in action, which I will demonstrate very soon. 03:45.580 --> 03:51.370 And then we've got the general guidance steps for you to go through in order to help you complete this 03:51.370 --> 03:51.730 task. 03:51.730 --> 03:53.170 I haven't given you the code for this. 03:53.200 --> 03:59.570 It's just steps that you need to take with general guidance and just the shell of any services that 03:59.570 --> 04:00.440 we need to create. 04:00.440 --> 04:05.300 With all of the code missing that you would of course need to create in order to complete this. 04:05.330 --> 04:10.670 Where necessary, I've given a few code snippets to help you out the things that we haven't covered 04:10.670 --> 04:11.630 in this training course. 04:11.660 --> 04:17.210 Things like rounding issues when it comes to casting into a long. 04:17.210 --> 04:22.130 We didn't need to deal with that, but when we're talking about taking a percent of something, then 04:22.130 --> 04:23.600 rounding comes into it. 04:23.600 --> 04:25.340 So there's a few hints inside here. 04:25.340 --> 04:26.930 I won't go through all of this document. 04:26.930 --> 04:32.330 This is really designed for you to take a look at in your own time, and tackle this when you're ready. 04:32.330 --> 04:36.950 If you want to tackle it and see if you can get that functionality to work. 04:36.950 --> 04:38.120 So that's the challenge. 04:38.120 --> 04:42.890 And I just want to go through in stripe where you need to go and set up this functionality. 04:42.890 --> 04:50.780 So if we go to our browser and we go to the stripe dashboard, then if you go to product catalog and 04:50.780 --> 04:53.040 then on here go to coupons. 04:53.310 --> 04:56.400 This is the place where we can create coupons that are going to be used. 04:56.400 --> 05:02.160 So we can create a test coupon and we can give it a name, just a name of what the coupon is going to 05:02.160 --> 05:02.370 do. 05:02.370 --> 05:05.250 And in this case it's going to be 10% discount. 05:05.850 --> 05:08.010 And we can give it an ID but that's optional. 05:08.010 --> 05:11.070 Stripe will create an ID for this if we do not specify it. 05:11.070 --> 05:13.320 And then we can specify the type of discount. 05:13.320 --> 05:17.040 I'm going to go for a percentage discount and say 10% off. 05:17.250 --> 05:20.100 And then we can add some constraints to this coupon. 05:20.100 --> 05:21.960 Do we want to apply it to specific products. 05:21.960 --> 05:24.210 But we're not storing products inside stripe. 05:24.210 --> 05:26.670 So we couldn't use that kind of functionality in here. 05:26.670 --> 05:32.460 But we can limit the date range and total number of times the coupon can be redeemed. 05:32.730 --> 05:38.220 Also, we're going to utilize customer facing coupon codes because the ID of the coupon is not going 05:38.250 --> 05:39.600 to be customer friendly. 05:39.600 --> 05:42.330 So we'll use code to do this. 05:42.330 --> 05:45.390 And then we can specify a customer facing name. 05:45.390 --> 05:49.860 So I'm going to create a coupon called give me ten for the 10% discount. 05:49.860 --> 05:53.980 And we can add further constraints inside here if we wish to do so. 05:54.010 --> 05:55.180 I'm not going to do any of that. 05:55.180 --> 05:57.610 I'm just going to use the Create coupon button. 05:57.820 --> 06:04.450 And now we have our 10% discount coupon, which we can use with the gimme ten code. 06:04.450 --> 06:10.690 Now, over in the published version of this application, I've already got this functionality applied 06:10.690 --> 06:11.950 to the demo project. 06:11.950 --> 06:14.830 So you can come in here, you can mess around with it, you can test it. 06:14.830 --> 06:20.020 And the coupon that will test it with is gimme Ten, the one that I have just created. 06:20.020 --> 06:26.140 So if I click apply code, then what we should see inside here is we get the 10% discount applied. 06:26.260 --> 06:29.860 There's a button here that I can use to remove that discount. 06:29.860 --> 06:33.820 And the discount has been applied up here inside the checkout. 06:33.850 --> 06:40.090 What we should also see inside stripe of course when we do something like this is we would want to see 06:40.090 --> 06:43.090 our payment intent updated to the correct amount. 06:43.090 --> 06:45.400 And in this case it's $180. 06:45.400 --> 06:50.530 If I go back and I remove the discount and use this button. 06:50.560 --> 06:52.090 Then a discount goes away. 06:52.090 --> 06:57.880 I'm back up to 200 and if I go back to the transactions in stripe, I would like to see that change 06:57.880 --> 07:01.150 to back to 200 because the discount has been removed. 07:01.150 --> 07:03.070 And again that is the case. 07:03.070 --> 07:08.860 So I'll go through the checkout, I'll apply the code once again and then I'll next my way through the 07:08.890 --> 07:09.640 checkout. 07:09.640 --> 07:20.080 I'll just use a test card to pay for this order, and put the security code in and skip over the link 07:20.080 --> 07:21.940 stuff and click next again. 07:21.940 --> 07:24.100 And then I can pay 180. 07:24.100 --> 07:26.110 So our discount is highlighted here. 07:26.110 --> 07:29.800 And the total amount matches the payment amount I'll click pay. 07:30.010 --> 07:31.990 And that goes to stripe. 07:31.990 --> 07:33.610 And we've paid for the order. 07:33.610 --> 07:40.120 And if we do view the order then what we should see is the discount being applied inside here as well. 07:40.120 --> 07:41.260 And the total order. 07:41.260 --> 07:42.610 So it all persists. 07:42.610 --> 07:46.360 And it all works in the way that we would expect it to. 07:46.390 --> 07:47.530 So that is the challenge. 07:47.530 --> 07:52.730 That's what you're aiming to achieve by implementing this functionality. 07:52.760 --> 07:55.430 And as I mentioned, it is a challenging challenge. 07:55.430 --> 07:57.470 I'm not going to demonstrate the solution to this. 07:57.470 --> 08:03.230 I've provided the solution in PDF, which will go through each of the different steps that you need 08:03.230 --> 08:07.640 to take, including the code to get this functionality to work. 08:07.640 --> 08:12.740 But please do try and test yourself to see if you can get this functionality to work without taking 08:12.740 --> 08:14.570 a look at that solution. 08:14.570 --> 08:19.700 If you want a really hard challenge, then don't even look at the guidance that I provided to walk you 08:19.730 --> 08:22.070 through each step without providing the code. 08:22.070 --> 08:26.690 If you want to imagine a scenario where you're just given this task to do by a senior developer without 08:26.690 --> 08:32.750 actually being given any steps, then you can go from not looking at that at all, apart from what I've 08:32.750 --> 08:35.780 just demonstrated here, and give that a go if you're feeling confident. 08:35.810 --> 08:41.210 Otherwise, I would recommend following the steps I've laid out in the order that we tackle these steps 08:41.210 --> 08:43.100 to get this functionality to work. 08:43.100 --> 08:47.390 So please give it your best shot and I wish you the best of luck with that.