@salla.sa/twilight-theme-engine 1.0.145 → 1.0.147

package/dist/vite/plugins/best-practices/hooks-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks-registry.d.ts","sourceRoot":"","sources":["../../../../src/vite/plugins/best-practices/hooks-registry.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CACrC;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,YAAY,EAAE,CAAC;CAC/B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,EAgN1C,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,GAAG,IAAI,CAOxE"}
+{"version":3,"file":"hooks-registry.d.ts","sourceRoot":"","sources":["../../../../src/vite/plugins/best-practices/hooks-registry.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CACrC;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,YAAY,EAAE,CAAC;CAC/B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,EAiN1C,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,GAAG,IAAI,CAOxE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-theme-engine",
-  "version": "1.0.145",
+  "version": "1.0.147",
   "publishConfig": {
     "access": "public"
   },

package/tailwind/routes/blog/loader.ts.txt

@@ -1,7 +1,7 @@
 import { blog } from '../../api/blog';
 import { getTwilightContext } from '../../twilight/context';
 import { RouteId } from '../../router/route-ids';
-import { notFound, orThrow } from '../../providers/NavigationProvider';
+import { notFound, orThrow, responseStatusOf } from '../../providers/NavigationProvider';
 import type { Breadcrumb } from '../../types';
 import type {
   BlogPageProps,
@@ -12,6 +12,24 @@ import type {
 } from './types';
 import type { IdParams, SlugIdParams } from '../types';
 
+/**
+ * {@link orThrow} for the blog, which also answers 404 when the store's plan lacks the blog.
+ *
+ * Every blog endpoint sits behind `feature:store-blog`, which answers 403 ("الميزة غير متاحة في
+ * الوقت الحالي") on such a store, so an article a crawler still links to was a 500. There is no
+ * page to show, so the route answers the router's not-found like a missing article. Twig answers
+ * the same store's `/blog` with its 403 page and an article with a 302 home. Kept to the blog:
+ * elsewhere a 403 can mean the shopper must sign in.
+ */
+async function blogOrNotFound<T>(promise: Promise<T>): Promise<T> {
+  try {
+    return await orThrow(promise);
+  } catch (error) {
+    if (responseStatusOf(error) === 403) return notFound();
+    throw error;
+  }
+}
+
 export async function blogLoader(): Promise<BlogPageProps> {
   const i18n = getTwilightContext().i18n;
 
@@ -56,7 +74,7 @@ export async function blogSingleLoader({
 
   // The API answers a non-numeric id with 417, which `orThrow` would pass through as an error.
   if (!/^\d+$/.test(id)) throw notFound();
-  const article = await blog.articles.findOrThrow(id);
+  const article = await blogOrNotFound(blog.articles.find(id));
 
   const breadcrumbs: Breadcrumb[] = [
     { name: i18n.t('common.titles.home'), url: '/' },
@@ -85,8 +103,8 @@ export async function blogAuthorLoader({
   const i18n = getTwilightContext().i18n;
 
   const [response, overview] = await Promise.all([
-    orThrow(blog.articles.list({ author: id })),
-    blog.get(),
+    blogOrNotFound(blog.articles.list({ author: id })),
+    blogOrNotFound(blog.get()),
   ]);
   const author = response.author;
   // The API answers an unknown id without the author object: 404 instead of a TypeError (500).
@@ -121,8 +139,8 @@ export async function blogCategoryLoader({
   const i18n = getTwilightContext().i18n;
 
   const [response, overview] = await Promise.all([
-    orThrow(blog.articles.list({ category: id })),
-    blog.get(),
+    blogOrNotFound(blog.articles.list({ category: id })),
+    blogOrNotFound(blog.get()),
   ]);
   const category = response.category;
   if (!category) throw notFound();
@@ -151,8 +169,8 @@ export async function blogTagLoader({
   const i18n = getTwilightContext().i18n;
 
   const [response, overview] = await Promise.all([
-    orThrow(blog.articles.list({ tag: id })),
-    blog.get(),
+    blogOrNotFound(blog.articles.list({ tag: id })),
+    blogOrNotFound(blog.get()),
   ]);
   const tag = response.tag;
   if (!tag) throw notFound();

package/tailwind/routes/thank-you/ThankYouPage.tsx.txt

@@ -1,240 +1,155 @@
-import { useState, useEffect } from 'react';
-import { useCopyToClipboard } from '@uidotdev/usehooks';
-import { SallaButton } from '@salla.sa/twilight-components-react/button';
-import { SallaNextOrderCoupon } from '@salla.sa/twilight-components-react/next-order-coupon';
-import { SallaOrderBranch } from '@salla.sa/twilight-components-react/order-branch';
-import { Link } from '../../components/common';
-import { HookSlot, usePageConfig } from '../../hooks';
+import { useMemo } from 'react';
+import { HookSlot, useIsClient, usePageConfig } from '../../hooks';
 import type { ThankYouPageProps } from './types';
 import { useTwilight } from '../../providers/twilight-context';
 import { useTranslation } from '../../providers/I18nProvider';
-import confettiImage from './confetti.svg';
-import { onSallaEvent } from '../../utils/sdk-helpers';
+import { stripUnsafeHtml } from '../../utils/sanitize';
 
 const EMPTY_MESSAGES: NonNullable<ThankYouPageProps['messages']> = [];
+const ICON_FONT_URL = 'https://cdn.salla.network/fonts/hugeicons-font.css';
 
+/** The order confirmation page, built like Twig Raed's from the Twilight thank-you components. */
 export function ThankYouPage({
   page,
   order,
   thank_you_title,
   messages = EMPTY_MESSAGES,
+  instructions,
+  items,
+  is_pickable,
+  created_at,
+  loyalty_points = 0,
+  loyalty_url,
+  cashback,
+  wallet_url,
 }: ThankYouPageProps) {
   const { store } = useTwilight();
   const { t } = useTranslation();
-  // `<salla-order-branch>` reads the order id from `salla.config.page.id` (see OrderSinglePage).
+  // The order components read the order id from `salla.config.page.id`.
   usePageConfig(page);
-  const title =
+  // The components rewrite their light DOM once the SDK loads, which can come before hydration.
+  const isClient = useIsClient();
+  const heading =
     thank_you_title ?? t('pages.thank_you.hero_title', 'Thank you for shopping with us! 😊');
-  const [invoiceSent, setInvoiceSent] = useState(order?.email_sent ?? false);
-  const [invoiceMessage, setInvoiceMessage] = useState<string | null>(null);
-  const [, copyToClipboard] = useCopyToClipboard();
-
-  // Listen for invoice sent event (matches thankyou.js)
-  useEffect(() => {
-    const handleInvoiceSent = (res: { data?: { message?: string } }) => {
-      setInvoiceMessage(
-        res.data?.message || t('pages.thank_you.invoice_sent_success', 'Invoice sent successfully')
-      );
-      setInvoiceSent(true);
-    };
-    const listener = handleInvoiceSent as (...args: unknown[]) => void;
-
-    return onSallaEvent('order::invoice.sent', listener);
-  }, [t]);
+  const currency = order?.currency;
+  const itemsJson = useMemo(() => JSON.stringify(items ?? []), [items]);
+  const discountsJson = useMemo(() => {
+    const discounts = order?.amounts.discounts ?? [];
+    return discounts.length
+      ? JSON.stringify(discounts.map(({ title, discount }) => ({ name: title, discount })))
+      : undefined;
+  }, [order]);
+  const amounts = order?.amounts;
+  const showRewards = loyalty_points > 0 || !!cashback;
 
   return (
     <>
-      <HookSlot name="thank-you:start" />
-
-      <div className="h-52 -mb-52 w-full bg-primary rtl:right-0 ltr:left-0 relative -z-1">
-        <svg
-          className="text-primary absolute top-full"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 1440 320"
-        >
-          <path
-            className="fill-current"
-            fillOpacity="1"
-            d="M0,96L120,112C240,128,480,160,720,165.3C960,171,1200,149,1320,138.7L1440,128L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"
-          ></path>
-        </svg>
-      </div>
-
-      <div className="container mb-20">
-        <nav className="w-full py-5">
-          <ol className="list-reset flex items-center text-sm text-primary-reverse">
-            <li>
-              <Link to="/" className="fix-align text-primary-reverse">
-                {t('common.titles.home', 'Home')}
-              </Link>
-            </li>
-            <li>
-              <i className="sicon-keyboard_arrow_left mx-2"></i>
-            </li>
-            <li>
-              <span className="fix-align">{title}</span>
-            </li>
-          </ol>
-        </nav>
-
-        <div className="bg-white p-4 md:p-8 rounded-md mb-6 md:mb-8">
-          <div className="flex flex-col items-center pt-16 pb-10">
-            <img src={confettiImage} alt={title} className="size-[140px] mb-8" />
-            <h1 className="font-bold text-lg mb-2.5">{title}</h1>
-            <p className="text-gray-500 max-w-xs text-center text-sm leading-6 mb-2.5">
-              {t(
-                'pages.thank_you.description',
-                'Your order has been received and will be reviewed and confirmed shortly.'
-              )}
-            </p>
-            {order && (
-              <>
-                <p className="text-gray-500 max-w-xs text-center text-sm leading-6 mb-6">
-                  {t('pages.thank_you.order_id_label', 'Order ID')}{' '}
-                  <SallaButton
-                    className="relative"
-                    onClick={() => copyToClipboard(String(order.reference_id))}
-                    color="dark"
-                    shape="link"
-                  >
-                    <span>#{order.reference_id}</span>
-                    <i className="copy-icon sicon-swap-stroke pointer-events-none rtl:mr-1 ltr:ml-1"></i>
-                  </SallaButton>
-                </p>
-                <Link
-                  to={`/account/orders/${order.id}`}
-                  className="bg-primary text-white text-sm font-bold h-10 px-4 rounded-md flex items-center justify-center gap-1.5"
-                >
-                  <i className="sicon-newspaper rtl:ml-1 ltr:mr-1"></i>
-                  {t('pages.thank_you.view_order_details', 'View Order Details')}
-                </Link>
-              </>
-            )}
-          </div>
-
-          {(order as { instructions?: string } | undefined)?.instructions && (
-            <article
-              className="article article--main article--small text-center"
-              dangerouslySetInnerHTML={{
-                __html: (order as { instructions?: string }).instructions ?? '',
-              }}
-            />
-          )}
+      <link rel="stylesheet" href={ICON_FONT_URL} />
 
-          {messages.map((message) => (
-            <div
-              key={message}
-              className="flex flex-col items-center pt-1 pb-10 justify-start rtl:space-x-reverse space-x-2"
-            >
-              <span className="font-bold">{message}</span>
-            </div>
-          ))}
-
-          <HookSlot name="thank-you:items.start" />
-          <HookSlot name="thank-you:items.end" />
-        </div>
-
-        {/* Next-order coupon and pickup branch — each renders nothing when it doesn't apply */}
-        <SallaNextOrderCoupon />
-        <SallaOrderBranch />
+      <HookSlot name="thank-you:start" />
 
-        <div className="lg:flex rtl:space-x-reverse lg:space-x-8">
-          {invoiceSent ? (
-            <div className="duration-500 hover:shadow-default flex-1 bg-white p-8 rounded-md mb-6 md:mb-10 flex flex-col items-center justify-center">
-              <div className="bg-gray-100 rounded-icon w-12 h-12 mb-2.5">
-                <i className="sicon-newspaper-alt text-xl"></i>
-              </div>
-              <p className="text-sm mb-2.5">
-                {t('pages.thank_you.email_sent_to', 'Email sent to')}
-              </p>
-              <b className="text-sm">{order?.customer?.email}</b>
-              {invoiceMessage && <p className="text-sm text-green-600 mt-2">{invoiceMessage}</p>}
-            </div>
-          ) : (
-            <div
-              id="invoice-form"
-              className={invoiceMessage ? 'thankyou-block sent' : 'thankyou-block'}
-            >
-              {invoiceMessage ? (
-                <div className="text-center">
-                  <div className="bg-gray-100 rounded-icon w-12 h-12 mb-2.5 mx-auto">
-                    <i className="sicon-newspaper-alt text-xl"></i>
-                  </div>
-                  <p className="text-sm" dangerouslySetInnerHTML={{ __html: invoiceMessage }} />
-                </div>
-              ) : (
-                <>
-                  <div className="bg-gray-100 rounded-icon w-12 h-12 mb-2.5">
-                    <i className="sicon-newspaper-alt text-xl"></i>
-                  </div>
-                  <p className="text-sm mb-2.5">
-                    {t('pages.thank_you.resend_invoice', 'Resend invoice email')}
-                  </p>
-                  <form
-                    onSubmit={(e) => {
-                      e.preventDefault();
-                      window.salla?.form.onSubmit('order.sendInvoice', e);
-                    }}
-                  >
-                    <div className="flex max-w-3xl w-full">
-                      <input
-                        type="email"
-                        className="form-input rtl:rounded-l-none ltr:rounded-r-none rtl:border-l-0 ltr:border-r-0 !w-[160px] sm:!w-[220px]"
-                        placeholder="your@email.com"
-                        required
-                        name="email"
-                      />
-                      <SallaButton
-                        type="submit"
-                        loaderPosition="center"
-                        className="rtl:rounded-r-none ltr:rounded-l-none lg:w-24 h-10"
-                      >
-                        <span className="btn__text">{t('pages.thank_you.send', 'Send')}</span>
-                      </SallaButton>
-                    </div>
-                  </form>
-                </>
+      <div className="container">
+        {isClient && (
+          <salla-thank-you-page className="thank-you-content">
+            <div slot="main">
+              <salla-thank-you-header
+                heading={heading}
+                subtitle={t('pages.thank_you.order_received', 'Your order has been received')}
+                store-logo={store.logo || ''}
+                store-name={store.name}
+                reference-id={order ? String(order.reference_id) : undefined}
+                created-at={created_at}
+              >
+                {instructions && (
+                  <article className="article article--main article--small text-center">
+                    <p
+                      // nosemgrep: the store's own order message, with unsafe markup stripped
+                      dangerouslySetInnerHTML={{ __html: stripUnsafeHtml(instructions) }}
+                    />
+                  </article>
+                )}
+                {messages.map((message) => (
+                  <span key={message} className="font-bold">
+                    {message}
+                  </span>
+                ))}
+              </salla-thank-you-header>
+
+              <HookSlot name="thank-you:items.start" />
+              {order &&
+                (is_pickable ? (
+                  <salla-order-branch
+                    data-testid="store-thankyou-branch"
+                    items={itemsJson}
+                    currency={currency}
+                    sticky-cta
+                  />
+                ) : (
+                  <salla-order-shipments
+                    data-testid="store-thankyou-shipments"
+                    order-id={String(order.id)}
+                    items={itemsJson}
+                    currency={currency}
+                    sticky-cta
+                  />
+                ))}
+              <HookSlot name="thank-you:items.end" />
+
+              {order && amounts && (
+                <salla-order-payment
+                  data-testid="store-thankyou-payment"
+                  payment-method={order.payment?.method}
+                  currency={currency}
+                  payment-logo={
+                    order.payment?.method
+                      ? `https://cdn.salla.network/images/payment/${order.payment.method}_mini.png`
+                      : undefined
+                  }
+                  sub-total={amounts.sub_total.amount}
+                  total={amounts.total.amount}
+                  tax-amount={amounts.tax?.amount.amount}
+                  shipping-cost={amounts.shipping_cost?.amount}
+                  cod-cost={amounts.cash_on_delivery?.amount}
+                  discounts={discountsJson}
+                  invoice-url={order.urls.print}
+                />
               )}
             </div>
-          )}
 
-          <div className="thankyou-block">
-            <div className="bg-gray-100 rounded-icon w-12 h-12 mb-2.5">
-              <i className="sicon-mail-letter text-xl"></i>
-            </div>
-            <p className="text-sm mb-2.5">{t('pages.thank_you.support', 'Support')}</p>
+            <HookSlot name="thank-you:payment.end" />
+
+            {showRewards && (
+              <salla-order-rewards
+                data-testid="store-thankyou-rewards"
+                {...(loyalty_points > 0
+                  ? { 'loyalty-points': loyalty_points, 'loyalty-url': loyalty_url }
+                  : {})}
+                {...(cashback
+                  ? {
+                      'cashback-amount': cashback.amount,
+                      currency: cashback.currency,
+                      'cashback-url': wallet_url,
+                    }
+                  : {})}
+              />
+            )}
 
-            <div className="flex rtl:space-x-reverse space-x-6">
-              {store.contacts.mobile && (
-                <div className="text-sm unicode flex items-center">
-                  <i className="sicon-phone"></i>
-                  <a
-                    href={`tel:${store.contacts.mobile}`}
-                    className="hover:text-primary transition"
-                  >
-                    <b className="unicode mx-1.5">{store.contacts.mobile}</b>
-                  </a>
-                </div>
-              )}
+            <salla-next-order-coupon data-testid="store-thankyou-coupon" />
 
-              {store.contacts.whatsapp && (
-                <div className="text-sm unicode flex items-center">
-                  <i className="sicon-whatsapp"></i>
-                  <a
-                    href={`https://wa.me/${store.contacts.whatsapp.replace(/[\s+-]/g, '')}`}
-                    className="hover:text-primary transition"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <b className="unicode mx-1.5">{store.contacts.whatsapp}</b>
-                  </a>
-                </div>
+            <salla-contacts
+              data-testid="store-thankyou-contacts"
+              introduction={t(
+                'pages.thank_you.contact_us',
+                'Got a question? We are happy to hear from you'
               )}
-            </div>
-          </div>
-        </div>
+              hide-title
+              horizontal
+              icons-only
+            />
 
-        <HookSlot name="thank-you:end" />
+            <HookSlot name="thank-you:end" />
+          </salla-thank-you-page>
+        )}
       </div>
     </>
   );

package/tailwind/routes/thank-you/index.tsx.txt

@@ -23,7 +23,7 @@ async function loader(
     ctx: { params: ThankYouLoaderParams }
   ) => Promise<Record<string, unknown>> | Record<string, unknown>
 ): Promise<ThankYouPageProps> {
-  const data = await thankYouLoader({ params: ctx.params });
+  const data = await thankYouLoader({ params: ctx.params, locale: ctx.locale });
 
   if (extend) {
     const extra = await extend(data, ctx);

package/tailwind/routes/thank-you/loader.ts.txt

@@ -1,30 +1,119 @@
-import type { ThankYouPageProps, ThankYouLoaderParams } from './types';
+import type { ThankYouPageProps, ThankYouLoaderParams, ThankYouLineItem } from './types';
 import type { Order } from '../account/types';
-import { order } from '../../api/order';
+import type { PointBalanceResponse } from '../loyalty/types';
+import type { TransactionItem } from '../../api/wallet';
+import type { StoreOrderInstruction } from '../../types';
+import { api, getAuthToken } from '../../api/client';
+import { order, type TwilightOrder } from '../../api/order';
 import { getTwilightContext } from '../../twilight/context';
+import { storePageUrl } from '../../utils/baseHead';
 import { RouteId } from '../../router/route-ids';
 
+const INSTRUCTION_BY_STATUS: Record<string, keyof StoreOrderInstruction> = {
+  payment_pending: 'order_instructions_payment_waiting',
+  under_review: 'order_instructions_under_review',
+  completed: 'order_instructions_completed',
+};
+
+async function orderLoyaltyPoints(): Promise<PointBalanceResponse['data']> {
+  const response = await api.get('balance/points').json<PointBalanceResponse>();
+  return response.data ?? [];
+}
+
+// A plain array today; `wallet.list` expects the paginated object, so accept both.
+async function walletTransactions(): Promise<TransactionItem[]> {
+  const response = await api
+    .get('balance/wallet?page=1&per_page=20')
+    .json<{ data?: { transactions?: TransactionItem[] | { data?: TransactionItem[] } } }>();
+  const transactions = response.data?.transactions;
+  return Array.isArray(transactions) ? transactions : (transactions?.data ?? []);
+}
+
+function offsetMinutes(timeZone: string, at: number): number {
+  const name = new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'longOffset' })
+    .formatToParts(at)
+    .find((part) => part.type === 'timeZoneName')?.value;
+  const [, sign, hours, minutes] = name?.match(/([+-])(\d{2}):(\d{2})/) ?? [];
+  return sign ? (sign === '-' ? -1 : 1) * (Number(hours) * 60 + Number(minutes)) : 0;
+}
+
+/** `2026-11-03 14:00:42.000000` in `Asia/Riyadh` -> `2026-11-03T14:00:42+03:00`. */
+export function orderCreatedAtIso(createdAt?: Order['created_at']): string | undefined {
+  if (!createdAt?.date) return undefined;
+  const [day, time = '00:00:00'] = createdAt.date.split(' ');
+  const local = `${day}T${time.slice(0, 8)}`;
+  try {
+    const asUtc = Date.parse(`${local}Z`);
+    // The local clock read as UTC can fall on the other side of a DST change; look again.
+    const offset = offsetMinutes(
+      createdAt.timezone,
+      asUtc - offsetMinutes(createdAt.timezone, asUtc) * 60_000
+    );
+    const abs = Math.abs(offset);
+    const hhmm = `${String(Math.floor(abs / 60)).padStart(2, '0')}:${String(abs % 60).padStart(2, '0')}`;
+    return `${local}${offset < 0 ? '-' : '+'}${hhmm}`;
+  } catch {
+    return local;
+  }
+}
+
 export async function thankYouLoader({
   params,
+  locale,
 }: {
   params: ThankYouLoaderParams;
+  locale?: string;
 }): Promise<ThankYouPageProps> {
   const orderId = params.orderId;
+  const { i18n, settings } = getTwilightContext();
+  const store = settings?.store;
+  const signedIn = !!getAuthToken();
+  const loyaltyEnabled = signedIn && !!store?.features?.includes('loyalty-system');
 
-  // orders/{id} needs a customer token that guest checkout / tokenless SSR lacks (400
-  // token_not_provided). Don't let that 500 the page — render whatever resolves.
-  // ponytail: guest order detail needs checkout/thank-you to return the order; source it
-  // here once that payload is confirmed on a correctly store-bound worker.
-  const [orderResult, thankYouResult] = await Promise.allSettled([
+  // Guests have no token for orders/{id}; render whatever resolves.
+  const [orderResult, componentsResult, pointsResult, walletResult] = await Promise.allSettled([
     order.find(orderId),
-    order.thankYou(orderId),
+    order.findForComponents(orderId),
+    loyaltyEnabled ? orderLoyaltyPoints() : Promise.resolve([]),
+    signedIn ? walletTransactions() : Promise.resolve([]),
   ]);
 
   const orderData: Order | undefined =
     orderResult.status === 'fulfilled' ? orderResult.value.order : undefined;
-  const thankYouData = thankYouResult.status === 'fulfilled' ? thankYouResult.value : undefined;
+  const componentsOrder: TwilightOrder | undefined =
+    componentsResult.status === 'fulfilled' ? componentsResult.value : undefined;
+  // Points and wallet entries name the order by its reference number, not its id.
+  const isThisOrder = (id: number | string | null | undefined) =>
+    !!orderData && Number(id) === Number(orderData.reference_id);
+
+  const loyaltyPoints =
+    pointsResult.status === 'fulfilled'
+      ? (pointsResult.value.find(
+          (entry) => entry.key === 'BUY_FROM_STORE' && isThisOrder(entry.order_id)
+        )?.amount ?? 0)
+      : 0;
+  const cashbackAmount =
+    walletResult.status === 'fulfilled'
+      ? walletResult.value
+          .filter((entry) => entry.action_type === 'cashback' && isThisOrder(entry.order_id))
+          .reduce((sum, entry) => sum + Number(entry.amount), 0)
+      : 0;
+
+  const items: ThankYouLineItem[] | undefined = orderData?.items.map((item, index) => ({
+    id: item.id,
+    name: item.name,
+    image: item.thumbnail ?? item.product_thumbnail ?? item.image,
+    quantity: item.quantity,
+    price: item.amounts.amount,
+    url: componentsOrder?.items[index]?.product?.url,
+  }));
+
+  const instructionKey = orderData
+    ? INSTRUCTION_BY_STATUS[orderData.status?.slug ?? '']
+    : undefined;
+  const instruction = instructionKey ? store?.order_instruction?.[instructionKey] : undefined;
+  const storeUrl = (path: string) => storePageUrl(settings, locale ? `/${locale}${path}` : path);
 
-  const i18n = getTwilightContext().i18n;
   return {
     page: {
       slug: RouteId.THANK_YOU,
@@ -32,9 +121,18 @@ export async function thankYouLoader({
       title: i18n.t('common.titles.thank_you') || 'Thank You',
     },
     order: orderData,
-    thank_you_title: thankYouData?.thank_you_title,
-    messages: thankYouData?.messages ?? [],
-    share_message: thankYouData?.share_message,
-    short_share_message: thankYouData?.short_share_message,
+    thank_you_title: store?.order_instruction?.thank_title || undefined,
+    messages: [],
+    instructions: instruction || undefined,
+    items,
+    is_pickable: !!(componentsOrder as { is_pickable?: boolean } | undefined)?.is_pickable,
+    created_at: orderCreatedAtIso(orderData?.created_at),
+    loyalty_points: loyaltyPoints,
+    loyalty_url: storeUrl('/loyalty'),
+    cashback:
+      cashbackAmount > 0 && orderData
+        ? { amount: cashbackAmount, currency: orderData.currency }
+        : undefined,
+    wallet_url: storeUrl('/wallet'),
   };
 }

package/tailwind/routes/thank-you/types.ts.txt

@@ -1,10 +1,20 @@
-import type { Page } from '../../types';
+import type { Money, Page } from '../../types';
 import type { Order } from '../account/types';
 
 export interface ThankYouLoaderParams {
   orderId: string;
 }
 
+/** An order line in the shape the thank-you web components read. */
+export interface ThankYouLineItem {
+  id?: number;
+  name: string;
+  image?: string;
+  quantity: number;
+  price?: Money;
+  url?: string;
+}
+
 export interface ThankYouPageProps {
   page: Page;
   /** Absent when the authenticated `orders/{id}` fetch fails (e.g. guest checkout / no token). */
@@ -13,4 +23,17 @@ export interface ThankYouPageProps {
   share_message?: string;
   short_share_message?: string;
   messages?: string[];
+  /** The merchant's message for the order's status (HTML). */
+  instructions?: string;
+  items?: ThankYouLineItem[];
+  /** Pickup orders show the branch card instead of the shipments card. */
+  is_pickable?: boolean;
+  /** Order time as ISO 8601 with the store's offset. */
+  created_at?: string;
+  /** Loyalty points this order earns; 0 when the store has no loyalty program. */
+  loyalty_points?: number;
+  loyalty_url?: string;
+  /** Cashback already credited to the customer's wallet for this order. */
+  cashback?: Money;
+  wallet_url?: string;
 }