Skip to content

Account area

The customer's account pages (/p/account and its tabs), redesigned in October 2026. What they do is in Customer Account; this page records how they look and why.

What was wrong

/p/account showed a sign-in card and a menu in a narrow left column, and nothing else: a shopper couldn't see their own details or a summary of their orders. The tab pages were the same column beside a plain table.

Decisions

  • Tabs across the top, not a side menu. The menu became a header band with the tabs at its foot, so the content gets the full width and a phone gets the tabs as one swipeable row instead of a stacked list above the content. The current tab takes the page's background colour, so it reads as joined to the page.
  • The band says who is signed in. Picture (Gravatar, else initials), "Hello, {first name}" and the email, with Sign out and, for staff, Site Administration. The separate sign-in card went, since it only repeated this.
  • The site's own header and footer stay. The account pages are ordinary pages inside the shop's chrome; the band sits under the site header, so no "back to the shop" link is needed.
  • An overview, not just a menu. Tiles for what the shopper has with the shop, recent orders, Gift Aid, their details and last address. It is the customer-facing counterpart of the admin customer page and uses the same service methods, so the figures agree.
  • Details are read-only for now. Editing them on the account page is a later step.
  • Addresses are kept, not typed again. Accounts have an address book, filled in by the orders a signed-in shopper places and editable on the Addresses tab. The overview shows the default delivery address; with none saved it falls back to the newest order's, dated, so it's clear where it came from. Checkout offers the book as cards rather than a dropdown, so a shopper sees the whole address before choosing it, and the cards are the delivery-option cards, so they look native in every theme.
  • Every tab is built from the same parts. Donations and Fundraisers, the last tabs still styled inline, now use the account components too (cards, rows, tiles, pills, notices, fields), so each theme's --account-* tokens re-skin them like the rest. Their extra pieces are .nova-account-giftaid__* and .nova-account-fundraiser__*. Forms open in place with <details> (the Gift Aid declaration, sign out everywhere, cancelling an order) rather than Bootstrap modals, so they work on any theme and need no Bootstrap JavaScript. The fundraiser wizard's steps stay JavaScript-driven; elements its script shows start hidden by a class, because Bootstrap's [hidden] rule is !important and would beat the script.
  • Consent is changed on one tab, summarised on the overview. The Preferences tab (CommunicationPreferencesService) is the one place a customer changes their emails, a tick box per list. The overview's Emails and terms card is a read-only summary of the same model (the lists they get, a sign-up waiting for its link, the terms they accepted) with a link to the tab, so the two can't disagree and there is one set of rules. Changed terms get a one-line notice, never a blocking prompt.
  • Card rows, not tables. Lists are rows of title, one line of detail, a status pill and an amount. They wrap on a phone rather than scrolling sideways. Order rows show the number, date and item count, not product names or pictures: lines don't carry names, and looking up products for every order wasn't worth it for this page. The overview's On its way card is the exception: it shows at most two orders, and their pictures come from one product lookup (AccountOrderService), so a shopper recognises the parcel they're waiting for.

  • Generic, recoloured by theme. The parts are Nova's (.nova-account-*); Ridge only sets the --account-* colours and fonts. A new theme gets the account area for free.

  • On its way leads. The thing a shopper most often opens their account to check is an order they're waiting for, so it comes first, with its progress as steps (the only place steps appear, because only there is the content a sequence). Its top edge is the accent, the one emphasis on the page.

  • The order page becomes the order's own after an hour. "Thank you" belongs to the moment of payment; after that the page leads with the order's number, where it is and what can be done with it (Buy again, review, print). The head is a shared fragment so Nova and Brock read the same.

Rules for later changes

  • Everything on these pages comes from the signed-in User the request resolved. Never accept a user, order or donation id from the request on them.
  • Show a feature's tile, tab or card only when the site has the feature on.
  • Keep the wording in messages.properties (accountMenu.*, myaccount.*, preferences.*), as for all storefront text.
  • A tab that changes something (Preferences, added in October 2026) is one plain form posted through its extension, checks ROLE_USER on the request rather than a remembered cookie, and works without JavaScript. Its rows (.nova-account-toggle) and the overview's one-line notice (.nova-account-notice) are Nova parts like the rest.

Mock-ups

  • Nova account area (October 2026): the overview, a list page and the overview at phone width, drawn in Ridge's colours. It shows product pictures on order rows, which didn't ship (see above). Private unless shared.