Okay.
Welcome to the end of course challenge and the optional challenge.
It's not a requirement to do this.
We've got our application published on the internet now with most of its functionality intact.
But what we do have that's been hanging around for some time is this voucher code inside our checkout
that we have not done anything with yet.
And the challenge is to get this functionality to work in your application.
Now, this is a challenging challenge, even with the guidance that I'm going to provide for you.
Please go to your course assets folder.
And inside here there's a challenge folder and two PDFs are inside here the Coupon challenge and the
solution file.
So unless you want to see the solution then please open up the coupon challenge file.
And inside this file I have some guidance about what this challenge involves and some basic steps to
guide you through it without providing the solution or the code.
And I'll just run through the business requirement first to give you a bit of background about this
particular feature or challenge that you're about to embark on.
So to restore app needs a coupon feature, customers should be able to apply coupons at the checkout
page, see discounted prices, and receive error messages for invalid coupons.
The feature must ensure quick validation of the coupon, security of coupon codes and a user friendly
interface, and they should also be able to remove an applied coupon.
So that's the scenario and the general guidance is the next part.
And you have been given this task to complete.
The HTML for the voucher is already in place.
We've seen that and it's just missing the functionality and the usage of the stripe API docs will be
necessary to complete this task.
And there's a couple of links to the coupon API and the promotion code API that you might want to take
a look at to help you accomplish this task, and the suggested approach to tackling this task, which
is to start from the bottom and work your way up.
And also a bit of guidance about what to do if you get yourself in a bit of a pickle.
The code is a mess, and you just want to go back to how it was before you started tackling this.
Then there's a couple of approaches you can use to effectively reset your code before you started carrying
out this work.
Approach one works pretty well, which is to use the git clean dash df command.
This will remove untracked changes and folders for untracked changes, but with files that you're updating
they're classed as tracked files.
Then you can use git checkout dash dash periods.
In addition to this in order to erase the changes from tracked files.
That works pretty well.
Approach two is the more nuclear option if you like.
We use git add, followed by a period to stage all of the changes that you've made.
Then we actually create a commit and are missing the dash m there for the message.
but that would be the message for the commit.
Git commit m and then sad face emoji or whatever name you want to give this commit because the idea
is we're going to remove it and then git reset dash dash hard and then head tilde.
One is just a way of referencing the commit that we have just created, and that will remove all of
the changes to the commit.
And be careful using this command, because this literally removes the commit.
There's no way to get it back.
And using the head tilde one means it's only going to remove the last commit.
There is a soft version of this where we use soft instead of hard, and that removes the commit, but
keeps all of the changes.
So this one actually removes all of the changes and the commits itself.
And also we've got a link to a demo of this to see it in action, which I will demonstrate very soon.
And then we've got the general guidance steps for you to go through in order to help you complete this
task.
I haven't given you the code for this.
It's just steps that you need to take with general guidance and just the shell of any services that
we need to create.
With all of the code missing that you would of course need to create in order to complete this.
Where necessary, I've given a few code snippets to help you out the things that we haven't covered
in this training course.
Things like rounding issues when it comes to casting into a long.
We didn't need to deal with that, but when we're talking about taking a percent of something, then
rounding comes into it.
So there's a few hints inside here.
I won't go through all of this document.
This is really designed for you to take a look at in your own time, and tackle this when you're ready.
If you want to tackle it and see if you can get that functionality to work.
So that's the challenge.
And I just want to go through in stripe where you need to go and set up this functionality.
So if we go to our browser and we go to the stripe dashboard, then if you go to product catalog and
then on here go to coupons.
This is the place where we can create coupons that are going to be used.
So we can create a test coupon and we can give it a name, just a name of what the coupon is going to
do.
And in this case it's going to be 10% discount.
And we can give it an ID but that's optional.
Stripe will create an ID for this if we do not specify it.
And then we can specify the type of discount.
I'm going to go for a percentage discount and say 10% off.
And then we can add some constraints to this coupon.
Do we want to apply it to specific products.
But we're not storing products inside stripe.
So we couldn't use that kind of functionality in here.
But we can limit the date range and total number of times the coupon can be redeemed.
Also, we're going to utilize customer facing coupon codes because the ID of the coupon is not going
to be customer friendly.
So we'll use code to do this.
And then we can specify a customer facing name.
So I'm going to create a coupon called give me ten for the 10% discount.
And we can add further constraints inside here if we wish to do so.
I'm not going to do any of that.
I'm just going to use the Create coupon button.
And now we have our 10% discount coupon, which we can use with the gimme ten code.
Now, over in the published version of this application, I've already got this functionality applied
to the demo project.
So you can come in here, you can mess around with it, you can test it.
And the coupon that will test it with is gimme Ten, the one that I have just created.
So if I click apply code, then what we should see inside here is we get the 10% discount applied.
There's a button here that I can use to remove that discount.
And the discount has been applied up here inside the checkout.
What we should also see inside stripe of course when we do something like this is we would want to see
our payment intent updated to the correct amount.
And in this case it's $180.
If I go back and I remove the discount and use this button.
Then a discount goes away.
I'm back up to 200 and if I go back to the transactions in stripe, I would like to see that change
to back to 200 because the discount has been removed.
And again that is the case.
So I'll go through the checkout, I'll apply the code once again and then I'll next my way through the
checkout.
I'll just use a test card to pay for this order, and put the security code in and skip over the link
stuff and click next again.
And then I can pay 180.
So our discount is highlighted here.
And the total amount matches the payment amount I'll click pay.
And that goes to stripe.
And we've paid for the order.
And if we do view the order then what we should see is the discount being applied inside here as well.
And the total order.
So it all persists.
And it all works in the way that we would expect it to.
So that is the challenge.
That's what you're aiming to achieve by implementing this functionality.
And as I mentioned, it is a challenging challenge.
I'm not going to demonstrate the solution to this.
I've provided the solution in PDF, which will go through each of the different steps that you need
to take, including the code to get this functionality to work.
But please do try and test yourself to see if you can get this functionality to work without taking
a look at that solution.
If you want a really hard challenge, then don't even look at the guidance that I provided to walk you
through each step without providing the code.
If you want to imagine a scenario where you're just given this task to do by a senior developer without
actually being given any steps, then you can go from not looking at that at all, apart from what I've
just demonstrated here, and give that a go if you're feeling confident.
Otherwise, I would recommend following the steps I've laid out in the order that we tackle these steps
to get this functionality to work.
So please give it your best shot and I wish you the best of luck with that.