Account order

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.

URLCopy Anchor Link

Route fileCopy Anchor Link

// @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.

A customised versionCopy Anchor Link

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

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 loadsCopy Anchor Link

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 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.
• Order not found, or not the customer's. A 404 or 410 from the API shows the 404 page: 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 alsoCopy Anchor Link

• Account orders, the list this page opens from
• Thank you, the page shown right after checkout
• Errors, timeouts and retries