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

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" />
+    </>
+  );
+}

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

@@ -0,0 +1,39 @@
+import type { HeadDescriptor } from '../../../utils/head';
+import { buildHreflangAlternates } from '../../../utils/baseHead';
+import { lazy } from 'react';
+import { profileLoader } from './loader';
+import type { ProfilePageProps } from './types';
+import type { TwilightContext } from '../../../twilight/context';
+import { RouteId } from '../../../router/route-ids';
+
+const LazyProfilePage = lazy(() =>
+  import('./ProfilePage').then((m) => ({ default: m.ProfilePage }))
+);
+
+export const ProfilePage = LazyProfilePage;
+export { profileLoader } from './loader';
+export type { ProfilePageProps } from './types';
+
+export const Profile = {
+  id: RouteId.CUSTOMER_PROFILE,
+  loader: async (
+    _ctx: { locale?: string },
+    extend?: (
+      data: ProfilePageProps,
+      ctx: { params: Record<string, never> }
+    ) => Promise<Record<string, unknown>> | Record<string, unknown>
+  ): Promise<ProfilePageProps> => {
+    const data = await profileLoader({ locale: _ctx.locale ?? 'ar' });
+    if (extend) {
+      const extra = await extend(data, { params: {} });
+      return { ...data, ...extra } as ProfilePageProps;
+    }
+    return data;
+  },
+  head: (ctx: TwilightContext, data: ProfilePageProps): HeadDescriptor => ({
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  }),
+  Component: LazyProfilePage,
+} as const;

package/tailwind/routes/account/profile/loader.ts.txt

@@ -0,0 +1,16 @@
+import type { ProfilePageProps } from './types';
+import { getTwilightContext } from '../../../twilight/context';
+import { unauthorized } from '../../../providers/NavigationProvider';
+import { getAuthToken } from '../../../api/client';
+import { RouteId } from '../../../router/route-ids';
+
+export async function profileLoader(_ctx: { locale: string }): Promise<ProfilePageProps> {
+  if (!getAuthToken()) throw unauthorized();
+  const { i18n } = getTwilightContext();
+  return {
+    page: {
+      title: i18n.t('common.titles.profile') || 'Profile',
+      slug: RouteId.CUSTOMER_PROFILE,
+    },
+  };
+}

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

@@ -0,0 +1,5 @@
+import type { Page } from '../../../types';
+
+export interface ProfilePageProps {
+  page: Page;
+}

package/tailwind/routes/account/settings/SettingsPage.tsx.txt

@@ -0,0 +1,13 @@
+import { SallaUserSettings } from '@salla.sa/twilight-components-react/user-settings';
+import { HookSlot } from '../../../hooks';
+import type { SettingsPageProps } from './types';
+
+export function SettingsPage(_props: SettingsPageProps) {
+  return (
+    <>
+      <HookSlot name="customer:settings.start" />
+      <SallaUserSettings />
+      <HookSlot name="customer:settings.end" />
+    </>
+  );
+}

package/tailwind/routes/account/settings/index.tsx.txt

@@ -0,0 +1,39 @@
+import type { HeadDescriptor } from '../../../utils/head';
+import { buildHreflangAlternates } from '../../../utils/baseHead';
+import { lazy } from 'react';
+import { settingsLoader } from './loader';
+import type { SettingsPageProps } from './types';
+import type { TwilightContext } from '../../../twilight/context';
+import { RouteId } from '../../../router/route-ids';
+
+const LazySettingsPage = lazy(() =>
+  import('./SettingsPage').then((m) => ({ default: m.SettingsPage }))
+);
+
+export const SettingsPage = LazySettingsPage;
+export { settingsLoader } from './loader';
+export type { SettingsPageProps } from './types';
+
+export const Settings = {
+  id: RouteId.CUSTOMER_SETTINGS,
+  loader: async (
+    _ctx: { locale?: string },
+    extend?: (
+      data: SettingsPageProps,
+      ctx: { params: Record<string, never> }
+    ) => Promise<Record<string, unknown>> | Record<string, unknown>
+  ): Promise<SettingsPageProps> => {
+    const data = await settingsLoader({ locale: _ctx.locale ?? 'ar' });
+    if (extend) {
+      const extra = await extend(data, { params: {} });
+      return { ...data, ...extra } as SettingsPageProps;
+    }
+    return data;
+  },
+  head: (ctx: TwilightContext, data: SettingsPageProps): HeadDescriptor => ({
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  }),
+  Component: LazySettingsPage,
+} as const;

package/tailwind/routes/account/settings/loader.ts.txt

@@ -0,0 +1,13 @@
+import type { SettingsPageProps } from './types';
+import { getTwilightContext } from '../../../twilight/context';
+import { unauthorized } from '../../../providers/NavigationProvider';
+import { getAuthToken } from '../../../api/client';
+
+export async function settingsLoader(_ctx: { locale: string }): Promise<SettingsPageProps> {
+  if (!getAuthToken()) throw unauthorized();
+  const { i18n } = getTwilightContext();
+  return {
+    // Twig's slug for this page; the advertisements API does not filter it, as on Twig.
+    page: { title: i18n.t('common.titles.settings') || 'Settings', slug: 'customer-settings' },
+  };
+}

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

@@ -0,0 +1,5 @@
+import type { Page } from '../../../types';
+
+export interface SettingsPageProps {
+  page: Page;
+}