Account orders

The customer sees their past orders with a status filter and a "load more" list. Customise it to change what the list shows, for example to include each order's items.

URLCopy Anchor Link

Pending orders redirects here with ?status=pending.

Route fileCopy Anchor Link

// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Orders } from '@salla.sa/twilight-theme-engine/routes/account/orders';
import type { OrdersPageProps } 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')({
  validateSearch: (search: Record<string, unknown>) => {
    const status = (search.status as string) || undefined;
    return status ? { status } : {};
  },
  loaderDeps: ({ search }) => ({ status: search.status }),
  loader: ({ deps, params }): Promise<OrdersPageProps> =>
    Orders.loader({ search: { status: deps.status }, locale: params.locale }),
  head: withHead(Orders),
  pendingComponent: () => <CustomerPageSkeleton />,
  component: OrdersComponent,
});

function OrdersComponent() {
  const data: OrdersPageProps = Route.useLoaderData();
  return <Orders.Component {...data} />;
}

To take the page over, delete the // @auto-generated line and edit the file. See Fork a built-in route.

A customised versionCopy Anchor Link

Ask the API to include each order's items (with_items), so a custom component can show product names. Only the loader changes:

loader: ({ deps, params }): Promise<OrdersPageProps> =>
  Orders.loader({
    search: { status: deps.status },
    locale: params.locale,
    with_items: true,
  }),

What it loadsCopy Anchor Link

OrdersPageProps is { page, orders, cursor, query }. Each order has id, reference_id, status, amounts, currency, created_at, actions (cancellable, reorderable, payable, rateable) and, with with_items, items. The loader calls the orders API with the customer's token. Later pages load in the browser through the returned cursor.

The title is "Orders", or "Pending orders" when ?status=pending. The head also sets the description and language alternates.

Edge casesCopy Anchor Link

• 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.
• No orders. The page shows a "no orders" message.
• Filter options. No endpoint lists statuses, so the filter offers "All", the statuses seen on loaded orders, and the selected one.
• Reloading. The URL has no page number, so a reload starts again at the first page.

See alsoCopy Anchor Link

• Account order, one order in detail
• Pending orders and Account layout
• Errors, timeouts and retries