# StoreOrderHistory > The customer's store account. Order history with status filters and reorder, an order page with the tracking timeline and a carrier link, a return and refund request flow with RMA status, a wishlist with move to cart and back-in-stock notify, an address book and recently viewed products. The reorder, return and wishlist rules are pure and tested. Source: https://docs.nasaqui.com/components/store-account ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/store-account.json ``` The pieces of a shopper's account. Each one is presentational: you pass data and callbacks, the component owns only the form and filter state. `StoreAccountNav` and `StoreAccountLayout` frame them, and every rule (what "order again" can add today, what can still be returned, what a return is worth, how the address book keeps one default) is a pure function that is exported and tested. Money is integer minor units in one currency. ## When to use - The account area of a storefront. ## When not to use - The admin side of orders: use `store-orders-admin`. - The product page or listing: use `product-detail` and `store-listing`. ## Import ```tsx import { StoreOrderHistory, StoreAccountOrder } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { StoreOrderHistory, type CommerceOrder, type CommerceProduct } from "@fadymondy/nasaq/web"; export function Orders({ orders, products }: { orders: CommerceOrder[]; products: CommerceProduct[] }) { return ( navigate(`/account/orders/${o.id}`)} onReorder={(_order, plan) => plan.add.forEach((l) => cart.add(l.variantId, l.quantity))} onOpenCart={() => navigate("/cart")} /> ); } ``` ## Anatomy ``` StoreAccountLayout > StoreAccountNav + main StoreOrderHistory [data-slot="store-order-history"] search, group filters with counts, order cards, reorder notice StoreAccountOrder [data-slot="store-account-order"] header, StoreOrderTimeline, items, totals, address, returns StoreReturnRequest [data-slot="store-return-request"] lines and quantities, reason, note, photos, refund method, estimate StoreReturnStatus [data-slot="store-return-status"] RMA number, five steps, refund, reject reason, cancel StoreWishlist [data-slot="store-wishlist"] cards with availability, price drop, move to cart, notify StoreAddressBook [data-slot="store-address-book"] cards, add and edit dialog, default, delete confirm StoreRecentlyViewed [data-slot="store-recently-viewed"] ``` ## API ### StoreOrderHistory | Prop | Type | Default | Description | | --- | --- | --- | --- | | `orders` | `CommerceOrder[]` | `required` | The customer's orders. | | `products` | `CommerceProduct[]` | `[]` | The current catalogue, to plan a reorder. | | `currency` | `string` | `"USD"` (`"SAR"` in Arabic) | ISO code. | | `trackingTemplate` | `string` | | Carrier link with `{number}`. | | `onOpenOrder, onReorder, onOpenCart` | `callbacks` | | `onReorder(order, plan)` gets `plan.add`; the list shows what was added, reduced or skipped. | | `loading, error, onRetry` | | | States. | ### StoreAccountOrder | Prop | Type | Default | Description | | --- | --- | --- | --- | | `order` | `CommerceOrder` | `required` | The order. | | `requests` | `ReturnRequest[]` | `[]` | Returns; those for this order are listed. | | `products, trackingTemplate` | | | For reorder and the carrier link. | | `returnDays` | `number` | `30` | Days after delivery a return can start. | | `now` | `number \| Date` | now | Reference time for the window. | | `onBack, onReorder, onOpenCart, onReturn, onCancelReturn` | `callbacks` | | "Return items" shows only when the window is open and something is returnable. | ### StoreReturnRequest | Prop | Type | Default | Description | | --- | --- | --- | --- | | `order` | `CommerceOrder` | `required` | The order to return from. | | `requests` | `ReturnRequest[]` | `[]` | Units already in a return are not offered. | | `returnDays, now, maxPhotos` | | `30, now, 5` | Window and photo limit (5 MB each). | | `onSubmit` | `(submission: ReturnSubmission) => void` | | Lines, reason, note, photo files, refund method, estimate. | | `onBack` | `() => void` | | | Defective, wrong and not-as-described reasons need a photo; "Something else" needs a note. Refund methods are the original method or store credit, and for cash on delivery store credit or bank transfer. ### StoreReturnStatus `request: ReturnRequest`, `order`, `currency`, `onCancel` (offered while requested or approved). ### StoreWishlist `items: WishlistItem[]`, `products`, `currency`, `onMoveToCart(entry)`, `onToggleNotify(item)`, `onRemove(item)`, `onOpenProduct(product)`, `loading`, `error`, `onRetry`. Only sold-out items can be notified; only available ones can move to the cart. A banner appears when a notify item is back in stock. ### StoreAddressBook `addresses: CommerceAddress[]`, `onChange(book)`, `countries` (ISO codes), `makeId`, `loading`, `error`, `onRetry`. Validation: name, line 1, city, country and phone are required; a phone needs 8 digits. The book always has exactly one default and the first address is the default. ### StoreRecentlyViewed `ids` (newest first), `products`, `currency`, `onOpenProduct`, `onRemove(id)`, `onClear`, `loading`. ### StoreAccountNav `active`, `onNavigate(section)`, `counts`, `sections` (which of `orders`, `returns`, `wishlist`, `addresses`, `recent` to list, in order; default all five, pass fewer when your store has no returns or recently viewed). ### Pure modules - `account-logic`: `reorderPlan`, `filterCustomerOrders`, `orderGroupCounts`, `wishlistEntries`, `backInStock`, `toggleNotify`, `pushRecentlyViewed`, `validateAddress`, `upsertAddress`, `setDefaultAddress`, `removeAddress`. - `return-math`: `returnableLines`, `returnWindow`, `refundEstimate`, `planReturn`, `rmaSteps`, `RMA_FLOW`. ## Examples **Sections with the layout** ```tsx }> cart.add(e.item.variantId, 1)} /> ``` **Check a return before sending** ```tsx const plan = planReturn(order, requests, { picks: [{ lineId: "l1", quantity: 1 }], reason: "defective", photos: 1, refundMethod: "original" }); plan.ok; // true, plan.refundAmount is the estimate in minor units ``` ## Accessibility - Filters are a toggle group with counts; status chips carry words. - Form errors are text under the field with `role="alert"`; the quantity steppers are labelled buttons with a live count. - Each image is decorative where the name sits beside it. | Key | Action | | --- | --- | | Tab | Moves through cards, fields and buttons. | | Space, Enter | Toggles a checkbox, opens a card. | | Esc | Closes the address dialog or a confirm. | ## RTL & i18n - Logical spacing, so the layout mirrors. Numbers and dates go through `Num` and `DateTime`; phone numbers, postal codes and RMA numbers are isolated left to right. - Country names use `Intl.DisplayNames` in the active locale. - Strings live in `STRINGS = { en, ar }` in `account-strings.ts`; replace with `labels`. ## Styling & tokens - `--nq-*` tokens only. Target the `data-slot` values above; `data-state` on RMA steps. ## Do / Don't - Do pass the live catalogue to `products`; reorder and the wishlist depend on current stock and price. - Do run `planReturn` on the server too. - Don't upload photos in the form; `onSubmit` gives you the `File` objects. ## Related - [`store-order-timeline`](https://docs.nasaqui.com/components/store-order-timeline) - [`store-orders-admin`](https://docs.nasaqui.com/components/store-orders-admin) - [`file-upload`](https://docs.nasaqui.com/components/file-upload) ## Lab https://docs.nasaqui.com/?path=/docs/components-storefront-store-account--docs ## Code ### React ```tsx import { StoreOrderHistory, type CommerceOrder, type CommerceProduct } from "@fadymondy/nasaq/web"; export function Orders({ orders, products }: { orders: CommerceOrder[]; products: CommerceProduct[] }) { return ( navigate(`/account/orders/${o.id}`)} onReorder={(_order, plan) => plan.add.forEach((l) => cart.add(l.variantId, l.quantity))} onOpenCart={() => navigate("/cart")} /> ); } ``` ### shadcn ```tsx import { StoreOrderHistory, type CommerceOrder, type CommerceProduct } from "@/components/ui/store-account"; export function Orders({ orders, products }: { orders: CommerceOrder[]; products: CommerceProduct[] }) { return ( navigate(`/account/orders/${o.id}`)} onReorder={(_order, plan) => plan.add.forEach((l) => cart.add(l.variantId, l.quantity))} onOpenCart={() => navigate("/cart")} /> ); } ``` ### Vue ```vue ``` ### Blade ```blade @php $line = fn ($id, $name, $price, $qty, $extra = []) => array_merge(['id' => $id, 'productId' => 'p-'.$id, 'variantId' => 'v-'.$id, 'name' => $name, 'unitPrice' => $price, 'quantity' => $qty], $extra); $delivered = [ 'id' => 'o1', 'number' => '#1040', 'placedAt' => '2026-09-20T10:00:00Z', 'status' => 'delivered', 'payment' => 'paid', 'customer' => ['name' => 'Sara Ali'], 'lines' => [$line('a', 'Coffee beans 250g', 1800, 2, ['fulfilled' => 2]), $line('b', 'Paper filters', 600, 1, ['fulfilled' => 1])], 'shippingAddress' => ['name' => 'Sara Ali', 'line1' => '12 Olaya St', 'city' => 'Riyadh', 'country' => 'SA', 'phone' => '+966 50 123 4567'], 'totals' => ['subtotal' => 4200, 'discount' => 0, 'shipping' => 500, 'tax' => 0, 'total' => 4700, 'itemCount' => 3, 'savings' => 0], 'events' => [ ['at' => '2026-09-20T10:00:00Z', 'kind' => 'placed', 'label' => 'Order placed'], ['at' => '2026-09-22T09:00:00Z', 'kind' => 'shipped', 'label' => 'Shipped'], ['at' => '2026-09-25T10:00:00Z', 'kind' => 'delivered', 'label' => 'Delivered'], ], 'tracking' => ['carrier' => 'Aramex', 'number' => 'AB123'], ]; $shipped = [ 'id' => 'o2', 'number' => '#1044', 'placedAt' => '2026-09-27T08:00:00Z', 'status' => 'shipped', 'payment' => 'paid', 'customer' => ['name' => 'Sara Ali'], 'lines' => [$line('c', 'Ceramic mug', 1500, 1)], 'totals' => ['subtotal' => 1500, 'discount' => 0, 'shipping' => 0, 'tax' => 0, 'total' => 1500, 'itemCount' => 1, 'savings' => 0], 'events' => [['at' => '2026-09-27T08:00:00Z', 'kind' => 'placed', 'label' => 'Order placed']], 'tracking' => ['carrier' => 'Aramex', 'number' => 'ZX900'], ]; $orders = [$delivered, $shipped]; $product = fn ($id, $name, $price, $stock = null, $extra = []) => array_merge(['id' => 'p-'.$id, 'name' => $name, 'images' => [], 'options' => [], 'variants' => [['id' => 'v-'.$id, 'options' => [], 'price' => $price] + ($stock === null ? [] : ['stock' => $stock])]], $extra); $catalogue = [$product('a', 'Coffee beans 250g', 1900, 12), $product('b', 'Paper filters', 600, 0), $product('c', 'Ceramic mug', 1500, 4), $product('d', 'Pour-over kettle', 5400, 2), $product('e', 'Retired grinder', 9000, 3, ['status' => 'archived'])]; $requests = [[ 'id' => 'r1', 'number' => 'RMA-1001', 'orderId' => 'o1', 'createdAt' => '2026-09-26T10:00:00Z', 'status' => 'approved', 'lines' => [['lineId' => 'b', 'quantity' => 1]], 'reason' => 'defective', 'refundMethod' => 'original', 'refundAmount' => 600, ]]; $saved = [ ['id' => 'w1', 'productId' => 'p-a', 'variantId' => 'v-a', 'addedAt' => '2026-09-01T10:00:00Z', 'priceWhenSaved' => 2200], ['id' => 'w2', 'productId' => 'p-b', 'variantId' => 'v-b', 'addedAt' => '2026-09-02T10:00:00Z'], ['id' => 'w3', 'productId' => 'p-d', 'variantId' => 'v-d', 'addedAt' => '2026-09-03T10:00:00Z'], ]; $book = [ ['id' => 'home', 'name' => 'Sara Ali', 'phone' => '+966 50 123 4567', 'line1' => '12 Olaya St', 'city' => 'Riyadh', 'postalCode' => '12211', 'country' => 'SA', 'isDefault' => true], ['id' => 'work', 'name' => 'Sara Ali', 'phone' => '+966 50 765 4321', 'line1' => '45 King Fahd Rd', 'city' => 'Jeddah', 'country' => 'SA'], ]; @endphp
``` ### HTML + Alpine ```html

My account

Order

Placed on

Order progress

  1. Order placed
  2. Payment confirmed Done
  3. Shipped
  4. Out for delivery Done
  5. Delivered
Carrier: Aramex Tracking number: AB123 Track shipment

Items

Subtotal
Discount
Shipping
Tax
Total

Shipping address

Sara Ali 12 Olaya St Riyadh +966 50 123 4567

Returns for this order

Return Requested on

Refund:

Return items

Choose what you are sending back and tell us why.

What are you returning?
Why are you returning it?
Photos

Refund me by
Estimated refund

Shipping is not refunded. The final amount is confirmed when we receive your items.

Return Requested on

Refund:

items

```