All language subtitles for 006 Adding A Checkout Form_en

So now we added a couple of items to our cart,

it would now be nice if we could order them.

For this we have the Order button

but currently that's not doing anything.

I want to make sure that when we click this Order button

we kind of expand this modal,

and we also show a form

where the users should enter the address and the name,

and thereafter we can confirm that input

to send off that order to the backend.

And therefore the first step is to add that form

and to add validation to that form.

For this, let's go back to the code

and there into the Cart folder

where we have this cart component

which renders this modal with our cart data

with the total and with those buttons.

And here below the total above those buttons,

I now wanna render the form where we enter our data.

Before that I'll add a new component

and I'll name it Checkout.js

because it will be the check out form.

And we'll also need a Checkout.module.css file

for the styling.

Though I'll provide the styling to you

once we're done setting up that form.

So here in the checkout component

we now wanna create a new Functional Component.

So we create our component as we always did.

We can import React depends on your project setup

if you need that or not.

I don't need it here so I'll omit it,

and it will already import classes

from ./Checkout.module.css.

Now in here we wanna return a form.

We wanna return a form with the various inputs

for the different values we wanna fetch.

For this I'll wrap every input into a div

with a className of classes.control,

and in there we can have a label

let's say for the name of the user.

So that will be for a input with an idea of name.

And then we have that input thereafter of type text

with an ID of name should be matching that value here

for accessibility.

And we also add a never input

where we fetched the address of the user.

So we want to have to the street

and that should also be able to type text.

However, I'll give it an ID of street,

and I add a new input where I also wanna get the postal code

so that will get an ID of postal

and will also still be of type text.

Technically the postal code looks like a number

but it should be text so that we can also start with zero

without kind of treating this as a null value

which I don't want.

So that will also be text.

And then last but not least let's also wrap the city

which is also text.

So a bunch of text data which we're fetching here.

The name, the street, the postal code, and the city.

And then we also need a button to confirm this.

So I'll say confirm on that button.

Now that we built this basic unstyled checkout component,

we can go back to the Cart

and here I will then import Checkout from ./Checkout

so that new checkout component

and render that here below the total amount.

And for the moment I will always render it.

We'll later make sure that it only shows up

once we click on Order.

If I now save this we have that form here

with the Confirm button.

Now, of course there are a couple of styling issues

which we'll fix in a second,

but before we fix those issues

let's make sure that this form only shows up

when we click Order, and that when it shows up

we actually get rid of these two buttons down there.

And instead we only showed a Confirm button

and maybe also a Cancel button here.

And that we then also have basic functions

that get triggered when we click those buttons.

So, let's make sure that this form only shows up

once we did click on Order.

Now for this in the cart component,

we have this Order button

and currently it's not doing anything.

So of course here we can add onClick listener

the onClick prop to trigger some function

when it is clicked.

So here I'll add a new function orderHandler.

And whenever this is clicked I wanna make sure

that we show the checkout form.

So we wire up the Order button to the orderHandler

to the orderHandler function we just added.

And then to show this checkout component conditionally

we need to useState.

So, let's import useState from React,

and then set up some state for this cart component.

And here we could name the state isCheckingOut

or something like this.

That sounds a bit weird.

Let's maybe name it isCheckout like this

and set IsCheckout.

And initially that's false

because initially we're not in checkout mode,

but I wanna set it to true

if we clicked on the orderHandler,

so here I'll set IsCheckout to true then.

And now we can use the IsCheckout state

to conditionally render the checkout component.

So we can check if isCheckout is truthy and use this syntax

which you saw a lot in the course to render checkout

if isCheckout is truthy.

And with that if we save this

initially there is nothing here,

but if I click on Order we show that.

Now we might be running into some space issues here

if that gets longer and longer,

but we'll work on the styling in a second.

Before we work on the styling,

let's hide these two buttons when we clicked on Order

and let's also add a second button to the front therefore

which still allows us to cancel.

Now to hide these two buttons

we of course just again need to render them conditionally.

And I could therefore just add code

where I check if isnotCheckout

and only if that's the case we render that div.

But to keep the JSX code down there a bit more structured

I'll grab that div with those buttons

and add a new constant here with my modalActions

and store my div in there in the modalActions.

And then it's the modalActions

which I wanna render conditionally if not isCheckout.

So that the JSX down there stays lean

and we have that div with the actions up there.

Okay, so now with that these buttons are gone.

Now let's add a new button to that form.

So for this in the checkout component

I'll add a second button where I say cancel and important

this button will be of type buttons

so that it doesn't submit the form.

Only this button will submit the form.

And speaking off that I wanna handle both button clicks.

If we click the Cancel button I wanna close the modal

and that therefore means that I in the end wanna do

the same thing as I did in the Cart component

when this Close button was clicked.

There we triggered props.onClose.

So in the end I wanna trigger that same function now

from inside the checkout component.

Henceforth the Cancel button on,

click, I expect to get some function through props

which I can forward this event to.

And I will simply expect the onCancel prop here.

It's our component so we can expect whichever prop we want.

And I will expect the onCancel prop

which means that now when we use checkout

in the Cart component, we need to set our onCancel prop.

And as a value I wanna point at the onClose prop value

to forward that event even further.

And now of course we have some props drilling here.

So we're passing props

through multiple levels of components.

And hence we could consider using context instead

for managing the modal visibility.

But I will stick to passing down props here

because I don't wanna make that too complex here

and kind of go into a totally different area

and add another context.

So I will simply pass down my props here.

Now with that if I save this,

if I click Cancel this modal is again closed.

Okay, so that works.

Now when we click Confirm the form will be submitted

and here we then wanna validate the user input

and show errors, show some feedback if something is invalid.

And of course if it is valid

we wanna submit it to the backend, to Firebase.

So for the moment therefore I wanna focus on

doing something on triggering some function

and hence in Checkout.js we can add a new function here

confirmHandler where we get an event object

and we will get that automatically

because I bind this function to the onSubmit event

on the form.

And then you learned that we should call

event.preventDefault to ensure that the browser default

which would be to send an HTTP request is prevented

so that this request is not sent.

And with that this button will trigger this form submission

and will therefore trigger this function.

Now we need to validate the user input.

And for that we need to read what the user entered

and we then wanna show some feedback,

and of course potentially if everything is alright

send the cart data to the backend.

That's step-by-step.

In the next lecture we'll work on validating this

and on showing some feedback.