Similar to the address features, customers will see their order history in their account dashboard. For that, we need a new Section.
On your local environment, create a new folder inside
src/sectionsand name it asAccountOrders.Create an
index.jsfile inside theAccountOrdersfolder.Create a
styles.module.cssfile inside theAccountOrdersfolder.
import * as React from 'react'
import { useCustomerActions, useCustomerState } from 'frontend-customer'
import { useRouter } from 'frontend-router'
import AuthGuard from 'Components/AuthGuard'
const AccountOrders = () => {
const { isLoggedIn, orders } = useCustomerState()
const { getAllOrders } = useCustomerActions()
const router = useRouter()
const { 'order-id': orderId } = router.query
const order = React.useMemo(
() => (orders && orderId ? orders.find(order => order.id === orderId) : undefined),
[orders, orderId],
)
React.useEffect(() => {
if (isLoggedIn && !orders) {
getAllOrders()
}
}, [isLoggedIn, orders, getAllOrders])
return (
<section>
<h1>
{order ? 'Order details' : 'Orders'}
</h1>
<AuthGuard allowedAuthStatus="authenticated" redirectUrl="/account/login">
{order ? (
<div>
{/* Here you can show the order details */}
</div>
) : (
<div>
{/* Here you can display a list of orders */}
</div>
)}
</AuthGuard>
</section>
)
}
export default AccountOrders
Orders page
Let's create our /account/orders page:
Click on the Pages icon from the sidebar.
Click ADD PAGE on the top right corner.
Enter the PAGE NAME: Orders.
Enter the PAGE PATH:
account/orders.If you want, you can select a Frame from the Frame dropdown.
Click ADD PAGE.
Now, add the AccountOrders section to your Orders page (if you are already on the Orders page, skip to step 4):
Click on the Pages icon from the sidebar.
Search for "Orders".
Open the "Orders" page by clicking on its title.
On the sidebar, click on the + (plus sign) where it says "Add sections to start building your page".
A list with all our
Sectionswill appear; search for and selectAccountOrders.Click
SAVE.
That concludes the password-protected pages. Let's move to the final pieces; recovering and resetting passwords.
