Skip to content
Twilight React Playground
ثيم رائدaren

ThankYou

route-moduleBeginnerserverbrowser

The order confirmation page Salla sends shoppers to after paying, which renders even when the order details cannot be loaded.

import { ThankYou, ThankYouPage, thankYouLoader, ThankYouPageProps, ThankYouLoaderParams } from '@salla.sa/twilight-theme-engine/routes/thank-you';

In plain words

After checkout, Salla sends the shopper to /thankyou/<order id>. The page thanks them, shows the order number with a link to its details, offers to email the invoice and lists the store's phone and WhatsApp.

A guest who checked out without an account may not read the order, so for guests the page shows the thank-you message without the order block.

It needs a real order, so it is not on Built-in pages.

Signature

const ThankYou: {
  readonly id: 'thank-you';
  readonly loader: (
    ctx: { params: ThankYouLoaderParams; locale?: string },
    extend?: (data: ThankYouPageProps, ctx: { params: ThankYouLoaderParams }) => Record<string, unknown> | Promise<Record<string, unknown>>
  ) => Promise<ThankYouPageProps>;
  readonly head: (ctx: TwilightContext, data: ThankYouPageProps) => HeadDescriptor;
  readonly Component: React.LazyExoticComponent<(props: ThankYouPageProps) => JSX.Element>;
};

const ThankYouPage: typeof ThankYou.Component;
function thankYouLoader({ params }: { params: ThankYouLoaderParams }): Promise<ThankYouPageProps>;

interface ThankYouLoaderParams { orderId: string }

interface ThankYouPageProps {
  page: Page;
  order?: Order;                  // absent when the order request fails (guests)
  thank_you_title?: string;
  share_message?: string;
  short_share_message?: string;
  messages?: string[];            // [] when the thank-you request fails
}

Example

app/routes/thankyou.$orderId.tsx (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} />;
}

How it behaves

  • URL: /{-$locale}/thankyou/$orderId, without a hyphen: the address Salla's checkout redirects to. The route id is thank-you.

  • thankYouLoader requests the order and the thank-you messages with Promise.allSettled, so it never throws for an API error. page.id is the order's id when the order loaded, otherwise the id from the address. The title is the common.titles.thank_you translation, or Thank You.

  • ThankYouPage shows thank_you_title (or a translated default), the order reference with a copy button and a link to /account/orders/<id>, the order's instructions HTML, each of messages, an invoice email form (or "email sent to" when order.email_sent), the store's contacts, and the slots thank-you:start, thank-you:items.start, thank-you:items.end and thank-you:end.

  • The invoice form submits through window.Salla.form.onSubmit('order.sendInvoice', event) and listens for the SDK's invoice-sent event. share_message and short_share_message are loaded but not drawn.

  • Lazy: outside a route, wrap ThankYouPage in <Suspense>.

Gotchas

  • docs/getting-started/06-add-or-override-a-page.md lists this route as /{-$locale}/thank-you/$orderId. The generated path is /thankyou/$orderId: a link to /thank-you/… matches no page.

Related

OrderSingle

One order's details for its customer: items, amounts, shipping and status, with reorder, cancel, receipt and rating actions.

Order, OrderItem, OrderListItem

The order shapes the account and thank-you pages use: a full order, one line of it, and the lighter row the orders list returns.

Source and docs