# Thank you (https://docs.salla.dev/twilight/react/routes/thank-you)



<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>

After a successful checkout, Salla sends the customer here. They see a confirmation with the order number, a link to the order, store messages, an optional next-order coupon and an invoice-by-email form. Customise it to add your own message or upsell. Guests and signed-in customers both land on it.

## URL [#url]

| Pattern                         | Example                                     |
| ------------------------------- | ------------------------------------------- |
| `/{-$locale}/thankyou/$orderId` | `/thankyou/1234567`, `/ar/thankyou/1234567` |

The path is `thankyou` (one word), not `thank-you`, because the platform redirects to that form.

| Param     | Type                | Notes                                                      |
| --------- | ------------------- | ---------------------------------------------------------- |
| `orderId` | `string`            | Passed to the order APIs as is. Not validated as a number. |
| `locale`  | `string` (optional) | `ar` in the example above                                  |

There are no search params.

## Route file [#route-file]

```tsx title="app/routes/thankyou.$orderId.tsx"
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { ThankYou } from '@salla.sa/twilight-theme-engine/routes/thank-you';
import type { ThankYouPageProps } from '@salla.sa/twilight-theme-engine/routes/thank-you';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/thankyou/$orderId')({
  loader: ({ params }): Promise<ThankYouPageProps> =>
    ThankYou.loader({ params: { orderId: params.orderId }, locale: params.locale }),
  head: withHead(ThankYou),
  component: ThankYouComponent,
});

function ThankYouComponent() {
  const data: ThankYouPageProps = Route.useLoaderData();
  return <ThankYou.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]

Add an extra store message by returning new `messages` from the loader's `extend` argument. The rest of the file stays as generated.

```tsx title="app/routes/thankyou.$orderId.tsx"
loader: ({ params }): Promise<ThankYouPageProps> =>
  ThankYou.loader(
    { params: { orderId: params.orderId }, locale: params.locale },
    (data) => ({ messages: [...(data.messages ?? []), 'Free gift wrapping on your next order'] })
  ),
```

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

The loader makes two requests together: the order itself and the thank-you details (`checkout/thank-you/{id}`). A request that fails is dropped instead of failing the page.

`ThankYouPageProps` has `page` (`{ slug, id, title }`), and optionally `order`, `thank_you_title`, `messages`, `share_message` and `short_share_message`. In the browser the page also shows the next-order coupon and pickup-branch widgets, each of which renders nothing when it does not apply.

The head sets the title, description and language alternates. It sets no canonical or robots tag.

## Edge cases [#edge-cases]

* **Guest checkout.** Loading the order needs a customer token, so for guests `order` is `undefined`. The page still shows the title and messages, and hides the order number and the "View order details" link.
* **Unknown order id.** Both requests fail quietly, so the customer sees the generic confirmation, not a 404.
* **Order link.** When `order` exists, the page links to [`/account/orders/<id>`](https://docs.salla.dev/twilight/react/routes/account-order).
* **Instructions.** `order.instructions` is rendered as HTML when the API sends it.

## See also [#see-also]

* [Cart](https://docs.salla.dev/twilight/react/routes/cart), where checkout starts
* [Account order](https://docs.salla.dev/twilight/react/routes/account-order) and [Account orders](https://docs.salla.dev/twilight/react/routes/account-orders)
* [Overview](https://docs.salla.dev/twilight/react/routes) of every route