Move Order History out of the My Account modal onto its own page #121

New Issue

2026-08-22T10:35:00-05:00

bermudalamb commented

2026-08-22 10:35:00 -05:00

The My Account modal now holds a profile line, a name form, two collapsed panels for changing email and password, two consent switches, an order table, and four account controls. It has become clunky, and the order table is the part that fits worst: it is tabular data inside a 700px modal whose body is capped at 70vh and scrolls.

Move it to a real page at /orders, following the precedent /cart and /privacy already set, rather than to another modal route.

What moves

Out of Account.tsx: the divider, the Order History heading, the table, the orders state, the fetchMyOrders effect and its import.

Into Account.tsx: a View order history button alongside Download my data and Log out.

Into a new frontend/src/customer/Orders.tsx: the same fetchMyOrders() call and the same four columns. Registered in the backdrop Routes in main.tsx, not in MODAL_ROUTES, so it is a page rather than a modal. Page shell follows Cart.tsx: a Layout with a Header carrying a Back to Shop button and the page title, and the same auth guard that sends a signed-out visitor to /login.

The part that is a fix rather than a move

A failed load currently calls message.error('Could not load your orders') and leaves an empty table behind. The toast disappears and the empty table does not, so a customer whose orders failed to load sees exactly what a customer with no orders sees. On a page whose entire purpose is that table, this matters more than it did in a modal.

So the three states become distinct: loading, an Alert with a Retry button when the request failed, and an Empty with a Continue Shopping link when there genuinely are no orders, mirroring the empty cart.

Beyond that: a max-width container so rows are not stretched across a wide monitor, Amount right aligned, and Status rendered as a Tag rather than the raw string the modal prints today.

Not in scope

Per-order detail and server-side paging or filtering were both considered and deliberately left out. Detail needs a new endpoint and a second view, and paging is speculative until someone has enough orders to scroll. Either can be its own issue when there is a reason.

No backend change. GET /api/customers/me/orders already returns what the page needs.

Verification

New frontend/tests/e2e/orders.spec.ts: a signed-out visit redirects to /login; the page renders for a signed-in customer; the empty state appears when there are no orders; Back to Shop returns to the storefront; and the My Account link navigates there.

Two existing tests in account-modal.spec.ts assert that the modal contains the text Order History, in the settings test and in the phone test. Both must be updated to assert the link rather than the table. Deleting them would remove the only coverage that the account view still offers a route to the orders.

Sequencing

This edits Account.tsx, which the #111 account-details work also edits. #111 should land first so the two do not conflict for no reason.

The My Account modal now holds a profile line, a name form, two collapsed panels for changing email and password, two consent switches, an order table, and four account controls. It has become clunky, and the order table is the part that fits worst: it is tabular data inside a 700px modal whose body is capped at 70vh and scrolls. Move it to a real page at `/orders`, following the precedent `/cart` and `/privacy` already set, rather than to another modal route. ## What moves Out of `Account.tsx`: the divider, the Order History heading, the table, the `orders` state, the `fetchMyOrders` effect and its import. Into `Account.tsx`: a `View order history` button alongside `Download my data` and `Log out`. Into a new `frontend/src/customer/Orders.tsx`: the same `fetchMyOrders()` call and the same four columns. Registered in the backdrop `Routes` in `main.tsx`, not in `MODAL_ROUTES`, so it is a page rather than a modal. Page shell follows `Cart.tsx`: a `Layout` with a `Header` carrying a Back to Shop button and the page title, and the same auth guard that sends a signed-out visitor to `/login`. ## The part that is a fix rather than a move A failed load currently calls `message.error('Could not load your orders')` and leaves an empty table behind. The toast disappears and the empty table does not, so a customer whose orders failed to load sees exactly what a customer with no orders sees. On a page whose entire purpose is that table, this matters more than it did in a modal. So the three states become distinct: loading, an `Alert` with a Retry button when the request failed, and an `Empty` with a Continue Shopping link when there genuinely are no orders, mirroring the empty cart. Beyond that: a max-width container so rows are not stretched across a wide monitor, Amount right aligned, and Status rendered as a `Tag` rather than the raw string the modal prints today. ## Not in scope Per-order detail and server-side paging or filtering were both considered and deliberately left out. Detail needs a new endpoint and a second view, and paging is speculative until someone has enough orders to scroll. Either can be its own issue when there is a reason. No backend change. `GET /api/customers/me/orders` already returns what the page needs. ## Verification New `frontend/tests/e2e/orders.spec.ts`: a signed-out visit redirects to `/login`; the page renders for a signed-in customer; the empty state appears when there are no orders; Back to Shop returns to the storefront; and the My Account link navigates there. Two existing tests in `account-modal.spec.ts` assert that the modal contains the text `Order History`, in the settings test and in the phone test. Both must be updated to assert the link rather than the table. Deleting them would remove the only coverage that the account view still offers a route to the orders. ## Sequencing This edits `Account.tsx`, which the #111 account-details work also edits. #111 should land first so the two do not conflict for no reason.

bermudalamb self-assigned this 2026-08-22 10:40:04 -05:00

bermudalamb added this to the Make the password-reset email editable from Admin project 2026-08-22 10:40:11 -05:00

bermudalamb referenced this issue from a commit

2026-08-22 10:41:30 -05:00

docs: design for moving Order History onto its own page (#121)

bermudalamb moved this to In Progress in Make the password-reset email editable from Admin on 2026-08-22 10:41:40 -05:00

bermudalamb referenced this issue

2026-08-22 10:42:01 -05:00

docs: design for moving Order History onto its own page (#121) #122

bermudalamb referenced this issue from a commit

2026-08-22 10:42:19 -05:00

Merge pull request 'docs: design for moving Order History onto its own page (#121)' (#122) from feature/121-orders-page into main