00:00:02 To implement a Payment Success page, we can head over to Routes and add a new route right at the bottom.

00:00:11 This will be a route pointing to Travel, Trip ID, and then finally Success.

00:00:18 And we can create a new page for this under routes forward slash root forward slash payment dash success dot tsx.

00:00:28 So let's create this new file.

00:00:31 It'll be right here under root and I'll call it payment dash success dot tsx.

00:00:39 And I'll run RAFCE right within it.

00:00:43 You know the drill, we have to reload our application for the changes to take effect.

00:00:48 So as soon as you do that, you should be able to see a payment success right behind the navbar.

00:00:55 So to start implementing it, let's turn it into a main tag with a class name equal to payment-success and a wrapper class name.

00:01:08 This will center it in the middle of the screen, so I'll create a new section with an article that'll render an image that'll have a source of assets,

00:01:20 icons, check.svg, with a class name of size of 24. This will be a big check.

00:01:29 And an H1 below it that'll say thank you and welcome aboard.

00:01:36 Because we're starting with the trip.

00:01:38 Below it, we can even add an additional P tag saying something like your trip is booked.

00:01:45 Can't wait to have you on this adventure.

00:01:50 Get ready to explore and make memories.

00:01:54 This wasn't written by ChatGPT, I promise.

00:02:00 Let's also add some sparkles at the end.

00:02:02 Perfect.

00:02:03 Now, right below it, I will also render a link And this link component will point to the trip details in case the user wants to,

00:02:14 again, check out what they have booked.

00:02:17 So we'll go to travel, and then we somehow have to get access to the trip details on this page.

00:02:26 How can we do that?

00:02:27 Well, we'll use the loader.

00:02:29 So I'll say export async function loader.

00:02:34 This loader will have access to the params because params contains the ID of this trip we're trying to fetch.

00:02:42 Params will be of a type loader.

00:02:45 function arguments, and the only thing that this function will do is return the params.

00:02:51 Then, back with the payment success, we can get access to that loader data, right through the props, loader data, And then we can set it to be equal to

00:03:06 route.ComponentProps and we have to import that route.ComponentProps coming from payment success, like this.

00:03:13 Now we can navigate over the user to travel.

00:03:17 and then we can take the LoaderData question mark dot trip ID and I'll also give it a class name equal to W full.

00:03:28 Within this link, I will render a button component that'll have an image right within it and this image will have a source of assets,

00:03:37 icons, itinerary, dash button dot SVG with a class name of size of 5. And of course to this button we also have to give a class name equal to button-class

00:03:53 with a height of 11 and a W of full.

00:03:58 There we go.

00:03:59 And now, within this button, below the image, you can also render a span that'll say View Trip Details.

00:04:09 There we go, that's great.

00:04:10 You can make it a class name of P16 Semi-Bold.

00:04:18 and a text white and in case they don't want to see the trip details you can just copy over this entire link duplicate it right below but we'll change

00:04:29 it this time we will point it to the home page so the URL will simply go to the forward slash the icon will render will be the arrow left and the button

00:04:42 will say return to home page.

00:04:46 There we go.

00:04:47 So now we have two of these different buttons and we can also give this button a class name of button class secondary because we don't want to have two

00:04:58 primary buttons and we can just remove this text white since the button is already white.

00:05:04 So if we do that we have two different buttons.

00:05:06 Now, the last remaining thing to do is to add some confetti.

00:05:10 So once we visit this page, we want it to look something like this, so that they're very excited to get started with that trip.

00:05:17 To do that, I'll install a package that does just that.

00:05:21 So I'll run mpm install canvas confetti as well as add types forward slash canvas dash confetti.

00:05:33 I will run it and then I will create a use effect.

00:05:37 that will run as soon as this Payment Success page launches for the first time.

00:05:42 So say useEffect.

00:05:44 We will only run it one time, so that is at the start, which means that the dependency array will be empty.

00:05:51 And within here, we can just call the confetti, which we can import from Canvas Confetti, and trigger the left confetti,

00:06:01 as well as another one, which will be the right confetti.

00:06:06 And these are coming from constants.

00:06:08 I basically figured out what are the best settings for the confetti and angled them in the right direction.

00:06:15 So now, as soon as you visit this page, or when it first loads, you should be able to see confetti pop up on the page.

00:06:23 And now you can either view the trip details that you just ordered or you can head back over to the homepage.

00:06:30 Which leads us to the end of this course.

00:06:33 Hopefully you were able to learn a lot about how to create your own dashboard and what does it mean for a website to have their admin site as well as a

00:06:42 public facing website.

00:06:44 This might not be something you think about on a daily basis, of course, but almost every single website has their back office where they manage the data

00:06:53 and then they have their homepage that real users visit.

00:06:56 So, with that in mind, thank you so much for watching and for coming to the end of this course.

00:07:02 I wish to see how you can further improve this project, so definitely make sure to give it some adjustments and then tag me over on socials and I'll be

00:07:11 super glad to check out what you did.

00:07:13 Once again, amazing job and I'll see you in the next one.

00:07:17 Have a wonderful day.