Implement the Checkout Page

[00:00 - 00:22] Welcome to the third lesson of this module. In this lesson, we're going to complete the checkout process of a shopping cart. As you can see on the page, just like in previous lessons, the initial state of the application is to show a set of static data. Currently, we do not have the items in our cart stored in Lookout storage displayed on the page.

[00:23 - 02:39] We'll do that when it's to illustrate to Visual Studio Code. We're going to click on Visual Studio Code icon. But before we proceed with that, I would like to know that in this lesson, we have Nginx Pypal. The package allows us to make use of Pypal to initiate a checkout process installed. If you want more information on how to utilize this package, all you need to do is to add straight to the Nginx Pypal MPM library. There you have a set of detailed instructions on how to install and then create the checkout process. Currently, I just have the initial configuration commented out. So when we get to the step where we need to click on the checkout button, I'm going to complete the integration. But currently, all I did was to copy this particular initial configuration inside of our component.js file. Also, we need to be aware that we have Superbys installed, but I want to restrict the scope of this course mainly to signals. So I would not be showing how to set our Superbys for about trying to leave a link on resources you can use to install a set of Superbys somewhere in this lesson. So to proceed, I 'm going to add back to the checkout component.js file. Close the packet.js file. We need to inject the product service into this component for us to have access to the amount of items we have in cart. To do that, we need to make use of our constructor. I'm typing "public product service" and then inject it at the top of the page just as we have right here. Next up, what we want to make is of one of the reactive primitives in signals called "effect". With this " effect" reactive primitives, we also log out the current items we have in our shopping cart. Al ia in this course, I mentioned that one of the functions of the "effect" reactive primitives is to help us to log arrow into the console. That is, it's served as a form of debugger. So currently, all I need to do is just to call the "effect" reactive primitives as a call- back. So we create a fast arrow and within this effect, all we need to do is to console.log the product service.art items.

[02:40 - 04:10] Then I save it to the browser, open up the console. As you can see, we have just one item in our array. Before we proceed, I would like us to add more items. I'm going to add part to the landing page, add two more products. So we have three items in our shopping cart. I'm going to increase the amount of quantity for each of these items. Click "Proceed to checkouts" and then try to display all three items on our summary page so quickly, lists about the visual ity of goods. It's time around. We need to make use of the newly introduced "art for" block to display the items and the page. We're in the table tag where we have this "tr" tag right here. We need to create the "art for" block. So I'm going to say "art for" and then open a bracket and I'm going to say "item for piece.product service.cut items" and then we add the track which allows us to track when there are changes in the array by passing in item.ondascoid. Next up, we 're going to wrap this around the brackets and then passing the dynamic values. Let's stop. Let's try to get the "item" type too. So I'm going to say "item.title" and then, yeah, we have the quantity. I'm just going to say "within the string interpolation item.quantity" and then finally, we have the price. So still using the string interpolation, I'm going to say "item.price" multiplied by "item.unt ity".

[04:11 - 04:30] But before we see, what we're going to make is of the "number" pipe in "angular ". It's a built-in pipe in "angular" that allows us to remove the "seamouse" from any figures in " art total price". So I'm just going to pass in "number" and then "save" with that. We can take a look at how our page looks like. As you can see, we have all the details showing on the page.

[04:31 - 05:12] The first item in our shopping cart is called "the cardboard". Then we have the "sofa" for coffee , coffee, and then the "wooding table" along them or beside them, we have the quantity which are "seven" to "and so" respectively and then the "tosa". But we haven't got in the " complete" total. That is the entire total of all selected items. "Lesudanest" by adding "back to our hood". But this time around, we will be making this implementation inside of our product service. I'm going to scroll up. And below the "total items" variable, I'm going to create a new "signal" variable. To do this, we're going to make use of two major features. One, from "JavaScripts" and the other, from "signal".

[05:13 - 06:49] The "signal" is going to be a "competed" reactive primitive, while the "Java Script" method we are going to use within the "competed" is called "reduced" method. So let's create this variable by saying "pogli" "cacheout.totow" is it goes to "on-eated". So "competed" as we know, now is a callback. So we pass in the "fast arrow" and then we don't need the " bracket". So I'm just going to get rid of these brackets. So we need this "fast arrow". Then we can now say "distotat" items, which is the "signal.olds". All the items we currently selected in our "sh ocking" card. And then passing the "reduced" method by saying "dosed reduce". So the "reduced" method in "JavaScripts" takes in two arguments. The "fast" argument serves as the "acumilito". And then the " second" argument serves as the "current" element within the array. So quickly, let's pass in these arguments. So I'm going to call the "fast zone" "preve". And it's going to be a type of "any". And then the "fast zone" is going to be the "current value". And we're going to pass in the "products", which is a "pro duct interface". So after that, we're passing the "fast arrow" on a "bracket". And then we can now return "if value" by typing "britton keyword". And they're saying "preve loss" "corrents", which is the current item in our array. "dosed price" multiplied by the "corrents" "toncity" in our array. Then we're going to pass in an "initial value", which is going to be "zero". And with that, we've been able to calculate the value of the "total" items we've selected in our "shoping" card. To get the value inside of our page, I would like to log it out within the "effect" "reactive primitive plan".

[06:50 - 08:18] I'm going to save, head back to our checkout on "ponend.cs" file. And within this console, I'm going to say "these.prologsavis. We have a "for fitable", which is also 100 USD. With the "corbod", which is " 287", you get a total of 487. And with that, we can pass the value to our "cads". So, put our "esque" "click" to that by adding "straight" to "visacity" or "code". And in our HTML file, I'm going to "screw" to where we have the values to these variables. And then open up "string interpolation". And say "is.prologsavis.passout.toto". Then we're going to still make use of the " number" file to help us to help us to run the "peniform" of decimal. We're going to grab the value for this and also paste it within our "order total" tag. Then I'm going to save, and then we can see the results in the browser. Now that this has been implemented, we can pass in the "total" inside of our "people" object. Before we proceed, as you can see, we have two "dollar icon". So, I'm going to get rid of one of the "dollar icons". And then see, we can now start manipulating the "commented out" "people" objects. I'm going to scroll down to the bottom and then "comment " the entire object.

[08:19 - 10:12] As you can see, we have so many errors showing. But what I want to do is to set each of these instances as a signal. Currently, they are set to "show as observables". To do that, I'm going to scroll to the top of the page and then below the "people" " and then I scroll back to the bottom of the page. I'm going to make a little modification to this by saying these "do-show" "success". And we're going to make use of the "set" method and "signal" because they are all "signals" right now. So, I'm going to set "do-set" and then open the "bracket" and then pass in "true" and get rid of this. And then do the same thing for our "show" console by making use of the "set" method. I'm going to set the values "true". I'm just going to set the "arrow" as true as well. I'm going to set "set" then "true". We don't need to make use of this particular block. So, I'm just going to get rid of that and then we have an error still showing somewhere. So, these details is showing an error. So, because we don't know what this argument retails, I'm just going to pass it, the type of any and with that all our errors are played. But before we're able to show the "hip-out" button on the bridge, we need to simulate a login scenario. What I'm going to do is I'm going to create a variable called "loved" in "stit os" and I'm going to set the initial value as false. And then in the HTML file, I'm going to create a condition, making use of the "at if" block. And to do that, I'm going to say "at if" and then open a "bracket".

[10:13 - 11:07] And then I'm going to say "these thoughts logged in "stitos" because it was true. If it's supposed to prove, I want to show the "hip-out" button. So, for now, I'm just going to copy this button right here and then paste it in. And then we can create the "else" block by making use of "else" and then open a "bracket" and then quote this particular "boting" within the "else" law. Before we proceed, I like to get rid of this "boting". And instead, we're going to have the "hip-out" button showing within the "d" term. So, I'm just going to say "ng x" "ppl" and then we're going to go "ppl tag" by binding the "config" object to the "ppl" variable in "rts" file. Next up, within the "else" block, I'm going to change the "rout" link to " register" and then "change" "text" to "load" and to "place" order. I'm going to save for it since we have an error.

[11:08 - 12:39] And it says "this comparison appears to be unintentional because the type's " right table" signal and "bullying" have no overlap. I think to solve this error, the first thing we need to do is to add the "rentancy" at the end of the "is.log" "daystatus" and with that, it's able to recognize this value as a "signal". So, I'm going to save and then "less" "estret" to the browser. As you can see, we have the "log" into "place order" button showing on the page. This is because our "log" "estatus" is set as "pause". Well, let's set it as "true" and see if we have the "ppl" button showing on the page. As you can see, the "ppl" button is not showing because we have not completed the configuration of the "ppl" object. We have not passed in our environment quite id as well as the "total" "cashouts" signal variable. So, to do that, I'm going to quickly add back to the code and then within this block. Also, we haven't initialized the "initconfig" object. So, that's three things left for us to do. Initialize it "initconfig" objects, set of the environmental variables and pass in the "dynamic cashouts" total. So, the first one, let's set up the environment variable by passing it into our client id which we have right here. So, I'm going to say using the "less sign" environment.clientid which is set in our environment file, was got in from the "developals" account. We created in our "ppl". We created in the "ppl" website.

[12:40 - 13:01] As can see, it also contains the "superbase URL" as well as the "key". I'll try to provide resources on how to go about each of these processes. But for now, let's continue with our implementation. Now that we have our client id, next up, for the value which is currently set as a starting value of 999. We need to play it and then using a "barksy" to allow us to make use of the " less sign", I'll say.

[13:02 - 13:42] We don't need to use the "disk" keyword. We can just use "product service" total. "cashouts" total. It seems in 30 cents, time stores to make use of the "disk" keyword because it's kind of put it in there. Without me typing it, so I'm just going to make use of "to fix", so we'll post around any form of decimal we may have. I'm going to copy this and then paste it inside the "item" total object and then finally in the "item" array, I'm going to paste in the value as well. With that, I think we've been able to implement the second condition for to display the "ppl" button. The final thing is to initiate the "offy" object.

[13:43 - 14:08] So to do that, we can just say within the effects, these dots init config and then pass in the parenthesis. We can then save and then add straight to the browser. As you can see, our "ppl " button is now available and then we can now check out from the shopping cards. So quickly, let's click on the "ppl" button. I already logged in previously. Oh, oh, I thought I did. So I need to log in again.

[14:09 - 15:24] So to do that, I'm going to make use of my "develop us" accounts by passing in the email of my "develop us" accounts and click on "next" as well as the password. Then I'm going to click on "log in" and then we can now see that we have the value of our total price showing in the "ppl" window. This is the value in "USD" and we can then proceed to check out by clicking on the "complete purchase" button. If the request is successful, then we get navigated to a successful page. But one thing I forgot to do is I didn't provide the option within a "ppl" config object. That's why we're still stuck on that page. So quickly, within the "unclined authorization" object, right below it, I can just create a condition that says "if data.stages" is equal to "completed" that is if our request is successfully completed, then we want to make use of the "rata" by saying "diss.rata.navigit" and then we call the name of the routes which is /thank you . This is not product service, it's "rata". But we haven't injected the router in our "ts " file so quickly within the "import array", I can just say "rata module" "imports" and then inject it now.

[15:25 - 15:41] I'll struggle by saying "private router" and then "rata" and I'll save and then reinitialize the process. This time around, as you can see, we get navigated to the "thank you" page before we proceed, I would like to provide those with a simple exercise in the next video.