OK, so we've got our component set up and let's go ahead and check out delivery component HTML and
the search function in this code is pretty forgiving.
And even though I've put a mess of text up the top there, it still recognizes that I actually wanted
the check out delivery component.
So let's implement this.
And what we'll do, we'll just give this a class of margin, top and fall.
And once again, we need to pass our form group here.
And we want to get access to the check out form.
And inside here, will additive of type Roe.
And we'll add our form group name here, which is going to be equal to our delivery form.
And inside here, what we want to do is loop over our different delivery methods, so what we'll do
is we'll say they've got Collum or Cold Dash six and we want this to have a class of form group.
And at the end, G force will say Atash energy for and will let method of delivery methods.
And inside here will add our input and we'll say input.
And we'll give it a type of radio.
And inside this impacts what we need to do, we need to give an ID and it's going to be the methods
Dotts ID.
And the value is going to be equal to the method, also the idea, because this is what we're going
to use to send up to our API.
We need the delivery method ID.
It also needs our form control name.
So without firm control, name equals delivery.
Methods, not methods, as a suggestion.
Whatever we call it, inside out check out component is what we need to call it here as well.
And we'll give it a class and this is a bootstrap class and custom control dash input's.
And underneath, the experts will give it a label.
And the label for.
The method dots ID, and we'll give it a class equal to custom control.
That's label.
And inside are labor will actually add a few things in here.
What would you give it?
A strong tag.
And in here will add method.
Dot, short name.
And will add a dash and then will say method drop price and we'll make clear the type of currency.
And Bill, early, strong tide, but just a break.
And then we'll have spane.
And this is going to have a class of lable.
Dasch description.
And tomorrow, passing the method description of our delivery method, and it's just reformats less,
and I'm not sure that made much of an improvement.
So I'm just going to manually sort these out there a bit more readable.
And that feels a bit better.
So just like our address component, what we also need to pass to our.
Delivery component is the check out forms, let's open up the checkout's.
Component XHTML.
And we'll add our checkout form as the property we need here as well, and we'll just pass in check
out form.
So let's go take a look and see if this is working, and we'll just go back and let's just refresh the
page, because that looks like it's got a bit stuck.
And if we go to our delivery component, hmm, nothing, let's take a look at the console and see what's
going on here.
And it's telling us that this Check-Out service get delivery methods is not a function.
I feel like we've seen this kind of error before and every time we've seen it, simply restarting angular
makes it go away.
So let's do that and we'll get to our angular time.
And we'll just stop.
This and restarts the angular app.
And only if we still get the error do we then start investigating the error.
That's the rule and this is restarted successfully.
Let's head back over and telling me I'm not authorized.
But then the app was just restarting.
So we're not worry about that.
We'll just refresh and we're still getting everyone at authorized and clearly we're locked in.
Let's just go to the console and investigate what's happened here.
And it's a network related error.
We're getting a 41 back.
So we go to our network tab and let's reproduce the error.
And we still get the unauthorized but against delivery methods, and this is telling us that we're not
authorized, but we didn't turn off authorisation for less specific methods in our API.
Now, we could have done because it's just our delivery methods.
But since this is only available in our checkout and we don't need access to this anywhere else, we
might as well leave the authentication turned on.
But what we are not doing because we don't see it inside here is any authentication header that we're
sending up to our server.
And if we don't send up that authorization header with the bearer token, then our server is not going
to authenticate us.
So what are we going to do is look at how we can send a token if we have it to our server by default.
And to do that, rather than add it manually in every single hasty, deep request, we can use our friend,
the HTP Interceptor to do this for us.
And we'll take a look at implementing that next.