So let's add some styling to this page, and you might have noticed that we are repeating ourselves a little bit when it comes to adding these white boxes. So we added this to our cart page, we have one for each and every product. So I think it's a good time to refactor this to use a Blade component, so we don't have to repeat ourselves every time, and it makes it more maintainable. So if we switch back to our editor, we can go into our Vue's components directory, and let's create a new file called panel.blade.php. So this is going to be a div, we'll add a slot here, and if we take a look at the classes that we applied earlier, you can see that we applied the following classes. Let's go back to our panel, and I got the attributes, next we'll pass an array with

that we applied earlier, you can see that we applied the following classes. Let's go back to our panel, and I got the attributes, next we'll pass an array with the default classes, so now we can simply say x-panel, and there we go. Now because we're using a Blade component, we can also add additional classes, and it will automatically merge those in. So if we add class, and let's say margin-top 12, you can see that the default classes are applied, and any classes that were added additionally were merged in. Okay, so this works, let's go to our home page, storefront, and let's update this as well. There we go, it still works.

well. There we go, it still works. Let's head over to our cart, and here we need to make sure that we add the correct col-span class, so let's change this into a panel as well, and add the col-span class. And finally, we'll do the same for this block. Okay, there's a little less padding, but that's fine. So now we've refactored this to be the same component across our different pages, so making changes is quite easy. Now while we're here, let's do one minor thing, let's make this button full-width. I think it just looks better, so let's apply a full-width, and censor our text.

Now while we're here, let's do one minor thing, let's make this button full-width. I think it just looks better, so let's apply a full-width, and censor our text. There we go, that looks a bit better. Okay, let's continue with our order page. So first, let's set up a grid, and let's make a grid that has two columns, and we'll make the table that contains all of our items that we ordered full-width, so we'll set the col-span to 2, and we'll have two additional panels, and we'll set these to a col-span of 1, so this is going to contain our shipping address, and this one is going to contain our billing information. So let's take a look, we can see that we now have three separate panels, and let's make

information. So let's take a look, we can see that we now have three separate panels, and let's make sure that we add a little gap between each of them, maybe four, yeah, that looks alright. Now let's add a title to each of our panels. We could add a title within each of our slots, so we could do title and say, order, but we can also make it part of our panel, so we can easily use this on any different page where we use our panel component. So if we open our panel component, we can add the props directive to define the different properties that this component will accept, so we can say title. And now we can say, if title, we're going to add the outer title, let's set our font.

properties that this component will accept, so we can say title. And now we can say, if title, we're going to add the outer title, let's set our font to medium, maybe textExcel, and we'll set the title to false by default, there we go. So now when we go to view order, we should be able to add a title attribute, and we can say, your order, and I got the order ID, and now we get a nice title here. Let's fix that, there we go, that looks better. Let's add some padding between our title and our slot, get a bit more room there, I think the font can be slightly smaller, so let's turn this into a large, yeah, that looks all right. Okay, now we can continue and simply show each of the items which are in our order. So let's save some time, let's head over to our cards, and here we'll simply copy and

Okay, now we can continue and simply show each of the items which are in our order. So let's save some time, let's head over to our cards, and here we'll simply copy and paste our table, we'll add this here, and let's update this accordingly, so we have order items, and then we have our order name, sorry, our item name, and a description, let's add quantity, let's remove these two columns, we don't have a button either, this one we can remove as well, so we have product, quantity, and total, there we go, let's take a look, we are not found, this for us, this is order, and total, there we go, we need to make sure that these columns align correctly, so 1, 2, 3, 1, 2, 3, there we go, similarly like our order confirmation email, we also want to list the subtotal and the amount tax, discount and shipping, so let's make sure that we add these as well, shipping, discount, tax, and

our order confirmation email, we also want to list the subtotal and the amount tax, discount and shipping, so let's make sure that we add these as well, shipping, discount, tax, and finally subtotal, now let's make sure that we hide shipping and discount in case they are not positive, and we'll do the same for the discount, there we go, now we can move on and show our billing and shipping information, so what we can do here, we can simply foreach, for our billing address, this will return a collection, let's add filter to remove any null values, and here we can simply echo out each value, and we can do the same for our shipping information, so now our customer has a nice view of their products that they've ordered and all the billing information, let's add a tab here for our User or maybe here on their account that they can click to get an overview of their orders as well, so if we head

ordered and all the billing information, let's add a tab here for our User or maybe here on their account that they can click to get an overview of their orders as well, so if we head over to our navigation menu component, and let's add a new drop-down, and let's name this myOrders, let's create a Livewire component that we can reference, and that we can set up the route as well, so let's do php artisan livewire make and create a new component called myOrders, let's go to a routes file, and create a new route called myOrders, let's reference the correct component, and let's name the route myOrders, next we can go back to our navigation menu and update our app, so now when we click myOrders, we look at the page, and here we can make a list of all the different orders that have been placed, now I see I just got an S there, because it has to be myOrders, so let's rename this component, and we can actually use the Livewire

a list of all the different orders that have been placed, now I see I just got an S there, because it has to be my orders, so let's rename this component, and we can actually use the php artisan livewire:move command to achieve this, so let's open up our terminal, and run php artisan livewire:move, and we add the existing name, followed by the new name, now you could also do this manually by renaming the class and the view file, but this is just a bit easier, and it saves you a bit of time, now let's make sure that we update this reference, let's head over to our component, let's add a public property, which is going to be called getOrdersProperty, and this is going to return all the orders of our User, let's head to our blade file, and let's simply copy and paste one of the tables that we created earlier to save some time, you can remove the footer, and we'll update the columns, order, total, and let's add an ordered.

and let's simply copy and paste one of the tables that we created earlier to save some time, you can remove the footer, and we'll update the columns, order, total, and let's add an orderedAds column, so now we can loop through each of our orders, here we're going to add our orderId, next we have our orderTotal, and let's swap these columns, we'll have order, orderedAds, and total, and this is going to return a Carbon object, so we can actually say diffForHumans(), to create a nicely formatted text line that will say, okay, you ordered this five days ago, there you go, we have our order, orderedAd one day ago, and the totalAmount of our order, let's make sure that we wrap this inside a panel, we'll add a title, myOrders, perfect, let's add a little bit of styling, so add a maxWidth, large, and we'll center it on the page, and a margin of 12, there we go, now let's make sure that we can actually click the order,

perfect, let's add a little bit of styling, so add a max-width, large, and we'll center it on the page, and a margin of 12, there we go, now let's make sure that we can actually click the order, we'll add a # here, and wrap this inside an <a> tag, and we'll add our route, which is viewOrder, and we'll pass the orderId, and let's add an underline, and make the font a little bit bolder, so now we can click to view all our order information,