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

Order, OrderItem, OrderListItem

typeAdvanced

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.

import { Order, OrderItem, OrderListItem } from '@salla.sa/twilight-theme-engine/routes/account';

In plain words

An order from the Salla API is a large object: items, amounts, shipping, payment, status. These types describe it, so a component of yours that shows part of an order gets autocompletion and type checks.

Signature

interface OrderListItem {
  id: number;
  reference_id: number;          // the number shoppers see
  status: OrderStatus;           // { name, slug?, icon?, color? … }
  amounts: Moneys;               // { sub_total, total, shipping_cost?, tax?, discounts? … }
  created_at: OrderDate;         // { date, timezone_type, timezone }
  currency: string;
  features: OrderFeatures;
  actions: OrderActions;
  references: OrderReferences;
  exchange_rate: OrderExchangeRate;
  weight: OrderWeight | null;
  type: string;
  items?: OrderItem[];           // only when listed with with_items
}

interface Order extends Omit<OrderListItem, 'items'> {   // written out in full in the source
  customer: OrderCustomer;
  urls: OrderUrls;               // { customer, receipt?, invoice?, checkout?, tracking? … }
  payment: OrderPayment;
  source: OrderSource;
  tags: string[];
  items: OrderItem[];
  receiver?; shipping?; shipments?; ratings?; refund_message?; email_sent?: boolean; instructions?: string;
}

interface OrderItem {
  id: number;
  name: string;
  quantity: number;
  amounts: OrderItemAmounts;     // { total, price_without_tax?, discount? … }
  image?: string;
  sku?: string;
  options?: OrderItemOption[];
  rating?: OrderItemRating;
  // …product, attachments, notes, reservations
}

Example

app/components/OrderTotal.tsx
import { useMoney } from '@salla.sa/twilight-theme-engine/hooks/useMoney';
import type { OrderListItem } from '@salla.sa/twilight-theme-engine/routes/account';

export function OrderTotal({ order }: { order: OrderListItem }) {
  const { format } = useMoney();
  const { amount, currency } = order.amounts.total;
  return (
    <span>
      #{order.reference_id}: {format(amount, { currency })}
    </span>
  );
}

How it behaves

  • OrderListItem is what ordersLoader returns per row. Order is what orderSingleLoader and thankYouLoader return: it adds the customer, URLs, payment, source, tags and always carries items.

  • created_at is the PHP date object { date, timezone_type, timezone }; useDate().format reads its date.

  • The smaller types they reference (OrderStatus, Moneys, OrderUrls…) are not exported.

  • These three are also exported from the /routes barrel. OrdersPageProps and OrderSinglePageProps are re-exported next to them here.

Related

Orders

The signed-in customer's order history, optionally filtered by status, as a table that loads more orders on request.

OrderSingle

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

ThankYou

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

Source and docs