# Account order (https://docs.salla.dev/twilight/react/routes/account-order)



<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

The customer sees one order: its status, items with options and ratings, totals, shipping and payment details. Customise it to add your own summary or support blocks around the engine's order view.

## URL [#url]

| URL                          | Notes                  |
| ---------------------------- | ---------------------- |
| `/account/orders/1234567`    | default language       |
| `/ar/account/orders/1234567` | with a language prefix |

| Param    | Type                | Notes                                                          |
| -------- | ------------------- | -------------------------------------------------------------- |
| `id`     | `string`            | The order id, passed straight to the API. It is not validated. |
| `locale` | `string` (optional) | `ar` in the example above                                      |

## Route file [#route-file]

```tsx title="app/routes/account.orders.$id.tsx"
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { OrderSingle } from '@salla.sa/twilight-theme-engine/routes/account/orders';
import type { OrderSinglePageProps } from '@salla.sa/twilight-theme-engine/routes/account/orders';
import { CustomerPageSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/account/orders/$id')({
  loader: ({ params }): Promise<OrderSinglePageProps> =>
    OrderSingle.loader({ params: { id: params.id }, locale: params.locale }),
  head: withHead(OrderSingle),
  pendingComponent: () => <CustomerPageSkeleton />,
  component: OrderSingleComponent,
});

function OrderSingleComponent() {
  const data: OrderSinglePageProps = Route.useLoaderData();
  return <OrderSingle.Component {...data} />;
}
```

To take the page over, delete the `// @auto-generated` line and edit the file. See [Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route).

### A customised version [#a-customised-version]

Draw your own summary above the engine's order view. Only the component changes:

```tsx title="app/routes/account.orders.$id.tsx"
function OrderSingleComponent() {
  const data: OrderSinglePageProps = Route.useLoaderData();
  return (
    <>
      <p className="mb-4">
        Order #{data.order.reference_id} is {data.order.status.name}.
      </p>
      <OrderSingle.Component {...data} />
    </>
  );
}
```

## What it loads [#what-it-loads]

`OrderSinglePageProps` is `{ page, order }`. `page.title` is the translated "order details" text with the id filled in. `order` is the full order: customer, items, `amounts`, `payment`, `shipping`, `shipments`, `ratings`, `urls` and `actions`. The loader fetches the order with the customer's token.

The head sets the title, description and language alternates.

## Edge cases [#edge-cases]

* **Signed out or expired token.** A guest, or a customer whose token the API rejects with 401 or 403, is sent to the home page with `?intended_to=` holding the page they asked for. The Salla SDK opens the sign-in form there and returns them to the page after sign-in.
* **Order not found, or not the customer's.** A 404 or 410 from the API shows the [404 page](https://docs.salla.dev/twilight/react/routes/not-found): the loader wraps both requests in `orThrow` as well as `orUnauthorized`. Any other API error is rethrown and shows the router's generic error page. Test what your API returns for another customer's order before you rely on it.

## See also [#see-also]

* [Account orders](https://docs.salla.dev/twilight/react/routes/account-orders), the list this page opens from
* [Thank you](https://docs.salla.dev/twilight/react/routes/thank-you), the page shown right after checkout
* [Errors, timeouts and retries](https://docs.salla.dev/twilight/react/api/errors-timeouts-and-retries)