@salla.sa/twilight-theme-engine 1.0.85 → 1.0.87

package/tailwind/routes/account/orders/single/OrderHeader.tsx.txt

@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { useDate, useNumber } from '../../../../hooks';
+import { useTranslation } from '../../../../providers/I18nProvider';
+import { useTwilight } from '../../../../providers/twilight-context';
+import type { Order, TwigOrder } from './types';
+
+const PRINT_WINDOW = 'noopener, toolbar=yes, scrollbars=yes, resizable=yes, width=900, height=700';
+
+function OrderStatus({ order, paymentExpired }: { order: Order; paymentExpired: boolean }) {
+  const { t } = useTranslation();
+  if (paymentExpired) {
+    return <span className="text-red-500">{t('pages.orders.pending_payment_expired')}</span>;
+  }
+  return (
+    <span
+      className="text-primary inline-flex items-center rtl:space-x-reverse space-x-1"
+      style={{ color: order.status.color }}
+    >
+      <i className={`mt-1 ${order.status.icon}`}></i>
+      <span> {order.status.name}</span>
+    </span>
+  );
+}
+
+/** Twig's `order.print_url()`; `urls.receipt` is the buyer's bank-transfer image. */
+function PrintAction({ order }: { order: Order }) {
+  const { t } = useTranslation();
+  const { store } = useTwilight();
+  const [printNoticeOpen, setPrintNoticeOpen] = useState(false);
+  const print = () =>
+    window.open(
+      order.urls.print ??
+        `${(store?.url ?? '').replace(/\/$/, '')}/account/orders/${order.id}/print`,
+      '_blank',
+      PRINT_WINDOW
+    );
+
+  return order.actions.invoice_printable === false ? (
+    <div
+      className={`tooltip-toggle tooltip-toggle--clickable inline-block${printNoticeOpen ? ' visible' : ''}`}
+    >
+      <button
+        type="button"
+        className="text-primary border border-primary rounded text-center px-4 py-2 cursor-pointer"
+        onClick={() => setPrintNoticeOpen(true)}
+      >
+        <i className="sicon-printer2 v-align"></i> {t('pages.orders.print')}
+      </button>
+      <div className="tooltip-content shadow-md rounded text-gray-500">
+        <small>
+          {' '}
+          {t('pages.orders.to_order_invoice_contact_vendor')}
+          <br />
+          {t('pages.orders.print_order_details')}{' '}
+          <button type="button" className="text-primary underline cursor-pointer" onClick={print}>
+            {t('pages.orders.click_here')}
+          </button>
+        </small>
+        <SallaButton
+          shape="link"
+          color="danger"
+          size="small"
+          className="close-tooltip"
+          onClick={() => setPrintNoticeOpen(false)}
+        >
+          <i className="sicon-cancel"></i>
+        </SallaButton>
+      </div>
+    </div>
+  ) : (
+    <SallaButton fill="outline" size="small" onClick={print}>
+      <i className="sicon-printer2 v-align"></i> {t('pages.orders.print')}
+    </SallaButton>
+  );
+}
+
+/** The date / status / links / print row at the top of the order page. */
+export function OrderHeader({
+  order,
+  links,
+  paymentExpired,
+}: {
+  order: Order;
+  links: TwigOrder['links'];
+  paymentExpired: boolean;
+}) {
+  const { t, direction } = useTranslation();
+  const { format: formatDate } = useDate();
+  const { format: formatNumber } = useNumber();
+
+  return (
+    <table className="min-w-full rounded-md overflow-hidden">
+      <tbody>
+        <tr className="bg-white overflow-hidden flex md:table-row flex-row md:flex-row flex-wrap md:flex-no-wrap py-1.5 md:py-0">
+          <td
+            data-testid="store-order-status"
+            className="single-order-header-item w-full md:w-auto  px-3 md:px-6 py-2 md:py-4 md:h-20 whitespace-nowrap text-sm "
+          >
+            <div className="rtl:ml-2 ltr:mr-2 font-normal text-gray-400">
+              {t('pages.orders.date')}
+            </div>
+            <b>{formatNumber(formatDate(order.created_at.date))}</b>
+          </td>
+
+          <td className="single-order-header-item flex justify-between items-center w-full md:w-auto px-3 md:px-6 py-2 md:py-4 md:h-20 whitespace-nowrap text-sm ">
+            <OrderStatus order={order} paymentExpired={paymentExpired} />
+
+            <div className="flex items-center justify-between">
+              {order.type === 'quote' && (
+                <span className="text-red-500 ml-4">
+                  {t('pages.orders.your_order_is_under_review')}
+                </span>
+              )}
+
+              {!!links?.length && (
+                <div className="flex space-x-2 rtl:space-x-reverse text-start flex-none px-2">
+                  {links.map((link) => (
+                    <a
+                      key={link.url}
+                      href={link.url}
+                      className="text-primary-reverse bg-primary px-4 py-2 rounded"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {link.label}{' '}
+                      <i
+                        className={
+                          direction === 'rtl' ? 'sicon-arrow-up-left' : 'sicon-arrow-up-right'
+                        }
+                      ></i>
+                    </a>
+                  ))}
+                </div>
+              )}
+              <PrintAction order={order} />
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

package/tailwind/routes/account/orders/single/OrderItemRow.tsx.txt

@@ -0,0 +1,209 @@
+import { createElement } from 'react';
+import { SallaOrderDetails } from '@salla.sa/twilight-components-react/order-details';
+import { useDate, useNumber } from '../../../../hooks';
+import { useTranslation } from '../../../../providers/I18nProvider';
+import type { FormatMoney, OrderItem, TwigItem } from './types';
+
+function ItemAttachments({ item }: { item: OrderItem }) {
+  const { t } = useTranslation();
+  if (!item.attachments?.length) return null;
+  return (
+    <div className="flow-root rounded-md px-4 border border-gray-200">
+      <dl className="text-sm text-dark divide-y divide-border-color">
+        {item.attachments.map((attachment) => (
+          <div
+            key={`${attachment.type}:${attachment.url}`}
+            className="py-3.5 md:flex items-center justify-between"
+          >
+            <dt className="mb-2 md:mb-0">{t('pages.products.attachments')}</dt>
+            <dd
+              className={`font-medium ${attachment.type === 'image' ? 'text-gray-900' : 'text-xs'}`}
+            >
+              {attachment.type === 'image' ? (
+                <div className="flex rtl:space-x-reverse space-x-2.5">
+                  <a href={attachment.url} target="_blank" rel="noreferrer">
+                    <img
+                      className="h-7 w-7 object-cover rounded-md"
+                      src={attachment.url}
+                      alt={item.name}
+                    />
+                  </a>
+                </div>
+              ) : (
+                <a href={attachment.url}>{t('pages.orders.file_url')}</a>
+              )}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}
+
+/** A date-only day (`2026-09-20`) as that calendar day wherever it is formatted, not UTC midnight. */
+function calendarDay(day: unknown): Date | string {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(day));
+  return match ? new Date(+match[1], +match[2] - 1, +match[3]) : String(day);
+}
+
+/** Twig's booking block: the location and each reservation's day and time. */
+function ItemReservations({ item, productType }: { item: OrderItem; productType?: string }) {
+  const { t } = useTranslation();
+  const { format: formatDate } = useDate();
+  const { format: formatNumber, useArabicNumerals } = useNumber();
+  const reservations = item.product_reservations ?? [];
+  if (productType !== 'booking' || !reservations.length) return null;
+  const time = (value: unknown) =>
+    useArabicNumerals
+      ? formatNumber(String(value)).replace(/PM/g, 'م').replace(/AM/g, 'ص')
+      : String(value);
+
+  return (
+    <>
+      {item.booking_location && (
+        <ul className="font-medium text-xs text-gray-600">
+          <li className="py-1 flex justify-between items-baseline">
+            <span className="mt-5 mb-3.5 text-sm font-bold">{t('common.elements.location')}</span>
+            <span className="text-unicode">{item.booking_location}</span>
+          </li>
+        </ul>
+      )}
+      <h2 className="mt-5 mb-3.5 text-sm font-bold">
+        {reservations.length > 1 ? t('pages.cart.reservations') : t('pages.cart.item_options')}
+      </h2>
+      <div className="rounded-md p-4 border border-gray-200 mb-2">
+        <ul className="font-medium text-xs text-gray-600">
+          {reservations.map((reservation) => (
+            <li key={`${reservation.day}:${reservation.from}`} className="py-1">
+              <span className="text-unicode">
+                {formatNumber(formatDate(calendarDay(reservation.day)))}
+                {reservation.from_timestamp
+                  ? ` (${time(reservation.from)} - ${time(reservation.to)})`
+                  : ''}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}
+
+function ItemSummary({
+  item,
+  twigItem,
+  money,
+  currency,
+}: {
+  item: OrderItem;
+  twigItem?: TwigItem;
+  money: FormatMoney;
+  currency: string;
+}) {
+  const { t } = useTranslation();
+  const product = twigItem?.product;
+  const image = product?.image?.url || item.image || item.thumbnail;
+  const price = item.amounts.amount ?? { amount: 0, currency };
+  const priceText = money(price.amount, price.currency);
+  const total = item.amounts.total ?? { amount: 0, currency };
+
+  return (
+    <div className="mb-5 last:mb-0">
+      {product ? (
+        <div className="flex rtl:space-x-reverse space-x-5 mb-4">
+          <a href={product.url} className="shrink-0">
+            <img
+              src={image || '/images/placeholder.png'}
+              alt={item.name}
+              className={`w-18 h-14 object-${image ? 'cover' : 'contain'} rounded-md`}
+            />
+          </a>
+          <div>
+            <a
+              href={product.url}
+              className="block leading-5 mb-1.5 md:text-base font-semibold transition-colors text-gray-500 hover:text-primary"
+            >
+              {item.name}
+            </a>
+            <b>{priceText}</b>
+          </div>
+        </div>
+      ) : (
+        <div className="w-full  flex  justify-between text-sm py-2.5">
+          <span className="w-40 inline-block font-normal">{item.name}</span>
+          <b>{priceText}</b>
+        </div>
+      )}
+
+      <div className="w-full flex justify-between text-sm py-2.5">
+        <span className="w-40 inline-block font-normal">{t('pages.products.quantity')}</span>
+        <b>{item.quantity}</b>
+      </div>
+      <div className="flex justify-between text-sm py-2.5">
+        <span className=" w-40 inline-block font-normal">{t('pages.products.price')}</span>
+        <b>{priceText}</b>
+      </div>
+      <div className="flex justify-between  text-sm py-2.5">
+        <span className="w-40 inline-block font-normal">{t('pages.orders.total')}</span>
+        <b>{money(total.amount, total.currency)}</b>
+      </div>
+    </div>
+  );
+}
+
+/** One item of the order page (the body of `{% for item in package.items %}`). */
+export function OrderItemRow({
+  item,
+  twigItem,
+  money,
+  currency,
+}: {
+  item: OrderItem;
+  twigItem?: TwigItem;
+  money: FormatMoney;
+  currency: string;
+}) {
+  const { t } = useTranslation();
+  const productId = twigItem?.product?.id;
+
+  return (
+    <div
+      data-testid={`store-order-item-${item.id}`}
+      data-order-item-id={item.id}
+      data-order-item-product-id={productId}
+      className="order-item bg-white p-5 border-b border-gray-100 first:rounded-t-md last:rounded-b-md last:border-none"
+    >
+      <ItemSummary item={item} twigItem={twigItem} money={money} currency={currency} />
+
+      {item.availability_date && (
+        <div className="flex gap-2 text-sm py-2.5 text-blue-500">
+          <i className="sicon-info"></i>
+          <span>
+            {t('pages.products.expected_to_be')}:{' '}
+            <b>{String(item.availability_date).slice(0, 10)}</b>
+          </span>
+        </div>
+      )}
+
+      <ItemReservations item={item} productType={twigItem?.product?.type ?? item.product?.type} />
+
+      <SallaOrderDetails orderDetails={JSON.stringify(twigItem ?? item)} />
+
+      {item.note && (
+        <p className="mt-3 text-sm text-gray-500">
+          <span>{t('common.elements.note')} : </span>
+          {item.note}
+        </p>
+      )}
+
+      <ItemAttachments item={item} />
+
+      {/* No React wrapper yet; Twilight upgrades it (adds `hydrated`) before React hydrates. */}
+      {productId &&
+        createElement('salla-review-order-item', {
+          'product-id': productId,
+          suppressHydrationWarning: true,
+        })}
+    </div>
+  );
+}

package/tailwind/routes/account/orders/single/OrderSections.tsx.txt

@@ -0,0 +1,215 @@
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaRatingStars } from '@salla.sa/twilight-components-react/rating-stars';
+import { useTranslation } from '../../../../providers/I18nProvider';
+import { useQuery } from '@tanstack/react-query';
+import { order as orderApi } from '../../../../api/order';
+import type { FormatMoney, Order, TwigOrder, TwigRating } from './types';
+
+function RatingAction({
+  disabled,
+  endedKey,
+  color,
+  fill,
+  icon,
+  onClick,
+}: {
+  disabled: boolean;
+  endedKey: string;
+  color: 'dark' | 'danger';
+  fill: 'outline';
+  icon: string;
+  onClick: () => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className="tooltip-toggle tooltip-toggle--hover icon-trigger mobile-shifted">
+      {disabled && (
+        <div className="tooltip-content shadow-md rounded">
+          <small> {t(endedKey)}.</small>
+        </div>
+      )}
+      <SallaButton
+        loaderPosition="center"
+        disabled={disabled}
+        shape="icon"
+        fill={fill}
+        color={color}
+        size="medium"
+        onClick={disabled ? undefined : onClick}
+      >
+        <i className={`${icon} text-xl`}></i>
+      </SallaButton>
+    </div>
+  );
+}
+
+/** A store or shipping rating the customer left, with its edit / delete buttons. */
+export function RatingSection({
+  title,
+  rating,
+  type,
+  allowUpdate,
+}: {
+  title: string;
+  rating: TwigRating;
+  type: 'store' | 'shipping';
+  allowUpdate: boolean;
+}) {
+  const dispatch = (event: string, payload: Record<string, unknown>) =>
+    window.salla?.event?.dispatch(event, payload);
+  const locked = !rating.can_update;
+
+  return (
+    <section className="flex justify-between items-start bg-white p-5 rounded-md">
+      <div>
+        <h2 className="text-lg font-bold mb-5">{title}</h2>
+        <p className="mb-2">{rating.content}</p>
+        <SallaRatingStars withLabel value={rating.stars} />
+      </div>
+      <div className="rating-actions">
+        {allowUpdate && (
+          <>
+            <RatingAction
+              disabled={locked}
+              endedKey="pages.order.edit_period_ended"
+              color="dark"
+              fill="outline"
+              icon="sicon-format-border-color"
+              onClick={() => dispatch('rating::edit', { type, feedback_id: String(rating.id) })}
+            />
+            <RatingAction
+              disabled={locked}
+              endedKey="pages.order.delete_period_ended"
+              color="danger"
+              fill="outline"
+              icon="sicon-trash-2"
+              onClick={() => dispatch('rating::delete', { feedback_id: String(rating.id) })}
+            />
+          </>
+        )}
+      </div>
+    </section>
+  );
+}
+
+interface Shipment {
+  id?: number;
+  name?: string;
+  logo?: string;
+  number?: string;
+  tracking?: string | null;
+}
+
+function ShippingRow({ shipment }: { shipment: Shipment }) {
+  const { t } = useTranslation();
+  // Twig treats the string "0" as empty.
+  const hasNumber = !!shipment.number && shipment.number !== '0';
+
+  return (
+    <div className="flex flex-col md:flex-row justify-between md:items-center bg-white px-5 py-3 border-b border-gray-100 rounded-t-md text-sm space-y-4 md:space-y-0">
+      <div className="flex items-center space-x-2 rtl:space-x-reverse">
+        {shipment.logo && (
+          <img src={shipment.logo} className="max-w-16 max-h-8" alt={shipment.name} />
+        )}
+        <span>{shipment.name}</span>
+      </div>
+      <div className="flex space-x-5 rtl:space-x-reverse">
+        {hasNumber && (
+          <span>
+            {t('pages.orders.shipment_no')}: <span className="font-bold">{shipment.number}</span>
+          </span>
+        )}
+        {shipment.tracking && (
+          <a
+            className="font-bold text-primary hover:opacity-80 flex items-center"
+            href={shipment.tracking}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <span className="sicon-shipping rtl:ml-1 ltr:mr-1"></span>
+            {t('pages.orders.tracking_url')}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The shipping company rows above the items (Twig's per-package titles). The order carries only
+ * its first shipment, so the rest come from the shipments endpoint.
+ */
+export function ShippingHeader({ twig, order }: { twig: TwigOrder; order: Order }) {
+  const { data } = useQuery({
+    ...orderApi.queries.shipments(String(order.id)),
+    enabled: order.features.shippable && !twig.is_pickable,
+  });
+  if (twig.is_pickable) return null;
+
+  const shipments: Shipment[] = data?.length
+    ? data.map((shipment) => ({ ...shipment, tracking: shipment.tracking_url }))
+    : twig.shipping
+      ? [{ ...twig.shipping, tracking: twig.shipping.tracing_link }]
+      : [];
+
+  return (
+    <>
+      {shipments.map((shipment) => (
+        <ShippingRow key={shipment.id ?? shipment.name} shipment={shipment} />
+      ))}
+    </>
+  );
+}
+
+/** An option's price as a number: the API sends a number, `{ amount }` or an empty array. */
+const optionPrice = (price: unknown): number =>
+  typeof price === 'number' ? price : ((price as { amount?: number } | null)?.amount ?? 0);
+
+/** The order-level options table (`order.options`). */
+export function OrderOptionsTable({
+  options,
+  money,
+  currency,
+}: {
+  options: NonNullable<TwigOrder['options']>;
+  money: FormatMoney;
+  currency: string;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className="bg-white p-5 rounded-md">
+      <h2 className="mb-3.5 text-sm font-bold">{t('pages.checkout.cart_options_title')}</h2>
+      <table className="table-fixed w-full border border-gray-200">
+        <thead>
+          <tr className="border-b border-gray-200">
+            <th scope="col" className="p-3 text-start text-sm">
+              {t('pages.order.option_name')}
+            </th>
+            <th scope="col" className="p-3 text-sm">
+              {t('pages.order.option_content')}
+            </th>
+            <th scope="col" className="p-3 rtl:text-left ltr:text-right text-sm">
+              {t('pages.products.price')}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {options.flatMap((option) =>
+            (option.options ?? []).map((value) => (
+              <tr
+                key={`${value.name}:${value.value}`}
+                className="border-b last:border-b-0 border-gray-200"
+              >
+                <td className="text-sm p-3">{value.name} :</td>
+                <td className="text-center p-3 font-medium text-xs">{value.value}</td>
+                <td className="rtl:text-start ltr:text-end p-3 font-medium text-xs">
+                  <strong>{money(optionPrice(value.price), currency)}</strong>
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/tailwind/routes/account/orders/single/types.ts.txt

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import type { OrderSinglePageProps } from '../types';
+
+export type Order = OrderSinglePageProps['order'];
+export type OrderItem = Order['items'][number];
+
+export interface TwigRating {
+  id?: number;
+  stars?: number;
+  content?: string;
+  can_update?: boolean;
+}
+
+export interface TwigItem {
+  name: string;
+  quantity: number;
+  product?: { id: number; url?: string; type?: string; image?: { url?: string } };
+  options?: unknown[];
+}
+
+/** The order as `orders/{id}` answers a non-React theme: what the Twig templates read. */
+export interface TwigOrder {
+  items: TwigItem[];
+  links?: Array<{ url: string; label: string }>;
+  shipping?: {
+    id?: number;
+    name?: string;
+    logo?: string;
+    number?: string;
+    tracing_link?: string | null;
+  };
+  rating?: { store?: TwigRating; shipping?: TwigRating } | unknown[];
+  can_rate?: boolean;
+  is_pickable?: boolean;
+  options?: Array<{ options?: Array<{ name: string; value: string; price?: unknown }> }>;
+}
+
+export type FormatMoney = (amount: number, currency?: string) => ReactNode;

package/tailwind/routes/account/orders/types.ts.txt

@@ -0,0 +1,29 @@
+import type { Page } from '../../../types';
+import type { Pagination } from '../../../api/types';
+import type { TwilightOrder } from '../../../api/order';
+import type { Order, OrderListItem } from '../types';
+
+export type { Order, OrderListItem };
+
+/** URL query parameters for orders page */
+export interface OrdersQuery {
+  status?: string;
+  feedback_status?: string;
+}
+
+export interface OrdersPageProps {
+  page: Page;
+  orders: OrderListItem[];
+  cursor?: Pagination;
+  query?: OrdersQuery;
+}
+
+export interface OrderSinglePageProps {
+  page: Page;
+  order: Order;
+  /** The same order as the Twilight components read it; null when it could not be loaded. */
+  componentsOrder?: TwilightOrder | null;
+}
+
+/** URL search params for orders routes - aliases OrdersQuery */
+export type OrdersSearchParams = OrdersQuery;

package/tailwind/routes/account/profile/ProfilePage.tsx.txt

@@ -0,0 +1,30 @@
+import { SallaUserProfile } from '@salla.sa/twilight-components-react/user-profile';
+import { SallaVerify } from '@salla.sa/twilight-components-react/verify';
+import { SallaUserSettings } from '@salla.sa/twilight-components-react/user-settings';
+import { HookSlot, useUser } from '../../../hooks';
+import type { ProfilePageProps } from './types';
+
+export function ProfilePage(_props: ProfilePageProps) {
+  const { data: user } = useUser();
+
+  return (
+    <>
+      <HookSlot name="customer:profile.start" />
+
+      <HookSlot name="customer:profile.form.start" />
+
+      <SallaUserProfile />
+
+      <HookSlot name="customer:profile.form.end" />
+
+      <SallaVerify />
+
+      <SallaUserSettings
+        {...(user?.preferences?.notifications_enabled ? { isNotifiable: true } : {})}
+        className="mt-10 block"
+      />
+
+      <HookSlot name="customer:profile.end" />
+    </>
+  );
+}