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

package/tailwind/routes/account/orders/OrderSinglePage.tsx.txt

@@ -0,0 +1,181 @@
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaRatingModal } from '@salla.sa/twilight-components-react/rating-modal';
+import { SallaEditOrderButton } from '@salla.sa/twilight-components-react/edit-order-button';
+import { SallaOrderBranch } from '@salla.sa/twilight-components-react/order-branch';
+import { SallaOrderTotalsCard } from '@salla.sa/twilight-components-react/order-totals-card';
+import { HookSlot, usePageConfig } from '../../../hooks';
+import { useMoney } from '../../../hooks/useMoney';
+import { useTranslation } from '../../../providers/I18nProvider';
+import { useTwilight } from '../../../providers/twilight-context';
+import type { OrderSinglePageProps } from '../types';
+import { OrderHeader } from './single/OrderHeader';
+import { OrderItemRow } from './single/OrderItemRow';
+import { OrderActions } from './single/OrderActions';
+import { OrderOptionsTable, RatingSection, ShippingHeader } from './single/OrderSections';
+import type { TwigOrder } from './single/types';
+
+/** Twig's `inner_title` extras: the gift tag and the edit-order button. */
+function TitleRow({ order }: { order: OrderSinglePageProps['order'] }) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex justify-between items-center">
+      {order.type === 'buy_as_gift' || order.source?.type === 'buy_as_gift' ? (
+        <span className="inline-block text-primary">
+          <i className="sicon-gift-sharing"></i>&nbsp;{t('pages.orders.gift_tag')}
+        </span>
+      ) : (
+        <span />
+      )}
+      <div className="flex items-center gap-3 flex-wrap">
+        <SallaEditOrderButton data-testid="store-order-edit-btn" orderId={String(order.id)} />
+      </div>
+    </div>
+  );
+}
+
+function RefundMessage({ message }: { message?: string }) {
+  if (!message) return null;
+  return (
+    <div className="min-w-full rounded-md overflow-hidden">
+      <div className="bg-white flex items-center gap-1 rounded-md px-3 py-5 md:px-5">
+        <i className="sicon-refund h-6 w-6"></i>
+        <p className="font-medium text-base" dangerouslySetInnerHTML={{ __html: message }} />
+      </div>
+    </div>
+  );
+}
+
+function RatingNotices({ twig }: { twig: TwigOrder }) {
+  const { t } = useTranslation();
+  const { store } = useTwilight();
+  const settings = store?.settings?.rating;
+  const rated = !!twig.rating && !Array.isArray(twig.rating);
+
+  return (
+    <>
+      {settings?.allow_update && rated && (
+        <div className="flex items-start gap-2 bg-blue-50 border border-blue-200 text-blue-500 px-2 py-3 rounded-md text-sm">
+          <i className="sicon-info"></i>
+          <p>
+            {t('pages.order.can_edit_or_delete_your_review_within')} {settings.update_period}{' '}
+            {t('pages.order.days_since_added')}.
+          </p>
+        </div>
+      )}
+      {twig.can_rate && (
+        <div className="rating-header gradient-bg center-between">
+          <div>
+            <h2 className="font-bold mb-1">{t('pages.order.order_rating_title')}</h2>
+            <p className="text-sm">{t('pages.order.order_rating_message')}</p>
+          </div>
+          <SallaButton
+            data-testid="store-order-rate-btn"
+            color="light"
+            className="btn--rounded-full !text-primary"
+            onClick={() => window.salla?.event?.dispatch('rating::open')}
+          >
+            {t('pages.rating.rate')}
+          </SallaButton>
+        </div>
+      )}
+    </>
+  );
+}
+
+function OrderRatings({ twig }: { twig: TwigOrder }) {
+  const { t } = useTranslation();
+  const { store } = useTwilight();
+  const allowUpdate = !!store?.settings?.rating?.allow_update;
+  const rating = Array.isArray(twig.rating) ? undefined : twig.rating;
+
+  return (
+    <>
+      {rating?.store?.stars ? (
+        <RatingSection
+          title={t('pages.rating.rate_the_store')}
+          rating={rating.store}
+          type="store"
+          allowUpdate={allowUpdate}
+        />
+      ) : null}
+      {rating?.shipping?.stars ? (
+        <RatingSection
+          title={t('pages.rating.rate_shipping')}
+          rating={rating.shipping}
+          type="shipping"
+          allowUpdate={allowUpdate}
+        />
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * The order page as the Twig storefront renders it (Raed's `pages/customer/orders/single.twig`).
+ * The markup and the Twilight components read the order in Twig's shape (`componentsOrder`);
+ * `order` supplies what that shape lacks and Twig computed on the server: the actions and the
+ * receipt and payment URLs.
+ */
+export function OrderSinglePage({ order, page, componentsOrder }: OrderSinglePageProps) {
+  // The order components read the order id from `salla.config.page.id`, which the router
+  // only sets on client-side navigations — seed it so a direct load works too.
+  usePageConfig(page);
+  const { store } = useTwilight();
+  const { format } = useMoney();
+  const twig = (componentsOrder ?? { items: [] }) as unknown as TwigOrder;
+  const paymentExpired =
+    order.actions.payable && (order.payment?.pending_payment_ends_at ?? 0) === 0;
+  const money = (amount: number, currency?: string) => format(amount, { currency });
+
+  return (
+    <div className="space-y-4">
+      <TitleRow order={order} />
+
+      <HookSlot name="customer:orders.single.details.start" />
+
+      <OrderHeader order={order} links={twig.links} paymentExpired={paymentExpired} />
+
+      {twig.is_pickable && <SallaOrderBranch data-testid="store-order-branch" stackCards />}
+
+      <RefundMessage message={order.refund_message} />
+
+      <RatingNotices twig={twig} />
+
+      <div className="overflow-hidden space-y-5">
+        <div className="shipping-orders">
+          <ShippingHeader twig={twig} order={order} />
+          {order.items.map((item, index) => (
+            <OrderItemRow
+              key={item.id}
+              item={item}
+              twigItem={twig.items[index]}
+              money={money}
+              currency={order.currency}
+            />
+          ))}
+        </div>
+
+        {!!twig.options?.length && (
+          <OrderOptionsTable options={twig.options} money={money} currency={order.currency} />
+        )}
+      </div>
+
+      {componentsOrder && (
+        <SallaOrderTotalsCard
+          data-testid="store-order-totals"
+          order={JSON.stringify(componentsOrder)}
+        />
+      )}
+
+      <OrderActions order={order} paymentExpired={paymentExpired} />
+
+      <OrderRatings twig={twig} />
+
+      <HookSlot name="customer:orders.single.details.end" />
+
+      {(twig.can_rate || store?.settings?.rating?.allow_update) && (
+        <SallaRatingModal data-testid="store-order-rating-modal" />
+      )}
+    </div>
+  );
+}

package/tailwind/routes/account/orders/OrdersPage.tsx.txt

@@ -0,0 +1,28 @@
+import { SallaOrders } from '@salla.sa/twilight-components-react/orders';
+import { HookSlot } from '../../../hooks';
+import { useTranslation } from '../../../providers/I18nProvider';
+import type { OrdersPageProps } from './types';
+
+/** The orders list as the Twig storefront renders it: `<salla-orders>` loads and shows it. */
+export function OrdersPage({ orders, query }: OrdersPageProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <HookSlot name="customer:orders.index.items.start" />
+      {orders.length ? (
+        <SallaOrders
+          data-testid="store-orders-list"
+          // Typed as status ids; the API also takes the `pending` slug the loader uses.
+          params={query?.status ? ({ status: query.status } as never) : undefined}
+        />
+      ) : (
+        <div data-testid="store-orders-empty" className="no-content-placeholder">
+          <i className="sicon-packed-box icon"></i>
+          <p>{t('pages.orders.non_orders')}</p>
+        </div>
+      )}
+      <HookSlot name="customer:orders.index.items.end" />
+    </>
+  );
+}

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

@@ -0,0 +1,86 @@
+import type { HeadDescriptor } from '../../../utils/head';
+import { buildHreflangAlternates } from '../../../utils/baseHead';
+import { lazy } from 'react';
+import { ordersLoader, orderSingleLoader } from './loader';
+import type { OrdersPageProps, OrderSinglePageProps, OrdersSearchParams } from './types';
+import type { IdParams } from '../../types';
+import type { TwilightContext } from '../../../twilight/context';
+import { RouteId } from '../../../router/route-ids';
+
+// Lazy-load components for code-splitting
+const LazyOrdersPage = lazy(() => import('./OrdersPage').then((m) => ({ default: m.OrdersPage })));
+const LazyOrderSinglePage = lazy(() =>
+  import('./OrderSinglePage').then((m) => ({ default: m.OrderSinglePage }))
+);
+
+export const OrdersPage = LazyOrdersPage;
+export const OrderSinglePage = LazyOrderSinglePage;
+export { ordersLoader, orderSingleLoader } from './loader';
+export type {
+  OrdersPageProps,
+  OrderSinglePageProps,
+  OrdersSearchParams,
+  OrdersQuery,
+} from './types';
+
+async function ordersLoaderWithExtend(
+  ctx: { search?: OrdersSearchParams; locale?: string; with_items?: boolean | number },
+  extend?: (
+    data: OrdersPageProps,
+    ctx: { params: Record<string, never> }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<OrdersPageProps> {
+  const query = ctx.search;
+  // ordersLoader already merges the result of `extend`; calling it again here ran it twice.
+  return ordersLoader({ query, with_items: ctx.with_items }, extend);
+}
+
+function ordersHead(ctx: TwilightContext, data: OrdersPageProps): HeadDescriptor {
+  const isPending = data.query?.status === 'pending';
+  const base: HeadDescriptor = {
+    title: ctx.i18n.t(isPending ? 'common.titles.pending_orders' : 'common.titles.orders'),
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+async function orderSingleLoaderWithExtend(
+  ctx: { params: IdParams; locale?: string },
+  extend?: (
+    data: OrderSinglePageProps,
+    ctx: { params: IdParams }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<OrderSinglePageProps> {
+  const data = await orderSingleLoader({ params: ctx.params });
+
+  if (extend) {
+    const extra = await extend(data, ctx);
+    return { ...data, ...extra } as OrderSinglePageProps;
+  }
+  return data;
+}
+
+function orderSingleHead(ctx: TwilightContext, data: OrderSinglePageProps): HeadDescriptor {
+  const base: HeadDescriptor = {
+    title: data.page.title,
+    description: data.page.description,
+    alternateLanguages: buildHreflangAlternates(ctx.settings, ctx.location.pathname),
+  };
+
+  return base;
+}
+
+export const Orders = {
+  id: RouteId.CUSTOMER_ORDERS_INDEX,
+  loader: ordersLoaderWithExtend,
+  head: ordersHead,
+  Component: LazyOrdersPage,
+} as const;
+export const OrderSingle = {
+  id: RouteId.CUSTOMER_ORDERS_SINGLE,
+  loader: orderSingleLoaderWithExtend,
+  head: orderSingleHead,
+  Component: LazyOrderSinglePage,
+} as const;

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

@@ -0,0 +1,66 @@
+import { order } from '../../../api/order';
+import { getTwilightContext } from '../../../twilight/context';
+import { RouteId } from '../../../router/route-ids';
+import { orThrow, orUnauthorized, unauthorized } from '../../../providers/NavigationProvider';
+import { getAuthToken } from '../../../api/client';
+import type { OrdersPageProps, OrderSinglePageProps, OrdersQuery } from './types';
+import type { IdParams } from '../../types';
+
+export async function ordersLoader(
+  ctx: { query?: OrdersQuery; with_items?: boolean | number },
+  extend?: (
+    data: OrdersPageProps,
+    ctx: { params: Record<string, never> }
+  ) => Promise<Record<string, unknown>> | Record<string, unknown>
+): Promise<OrdersPageProps> {
+  if (!getAuthToken()) throw unauthorized();
+  const query = ctx.query;
+  const isPending = query?.status === 'pending';
+  const response = await orUnauthorized(
+    order.list({
+      // Only decides the empty state; <salla-orders> applies its own review filter (`?tab=waiting`).
+      status: query?.status,
+      ...(ctx.with_items ? { with_items: ctx.with_items } : {}),
+    })
+  );
+  const i18n = getTwilightContext().i18n;
+  const pageData: OrdersPageProps = {
+    page: {
+      title: isPending ? i18n.t('common.titles.pending_orders') : i18n.t('common.titles.orders'),
+      slug: RouteId.CUSTOMER_ORDERS_INDEX,
+    },
+    orders: response.data,
+    cursor: response.cursor,
+    query,
+  };
+
+  if (extend) {
+    const extra = await extend(pageData, { params: {} });
+    return { ...pageData, ...extra } as OrdersPageProps;
+  }
+  return pageData;
+}
+
+export async function orderSingleLoader({
+  params,
+}: {
+  params: IdParams;
+}): Promise<OrderSinglePageProps> {
+  if (!getAuthToken()) throw unauthorized();
+  const [data, componentsOrder] = await Promise.all([
+    order.findOrThrow(params.id),
+    orThrow(orUnauthorized(order.findForComponents(params.id))),
+  ]);
+  const i18n = getTwilightContext().i18n;
+  return {
+    page: {
+      slug: RouteId.CUSTOMER_ORDERS_SINGLE,
+      id: String(params.id),
+      title: i18n
+        .t('pages.orders.order_details')
+        .replace(':id', String(data.order.reference_id ?? params.id)),
+    },
+    order: data.order,
+    componentsOrder,
+  };
+}

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

@@ -0,0 +1,197 @@
+import { useState } from 'react';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaModal } from '@salla.sa/twilight-components-react/modal';
+import { useIsClient, useUser } from '../../../../hooks';
+import { useAsyncFn } from '../../../../hooks/useAsyncFn';
+import { useTranslation } from '../../../../providers/I18nProvider';
+import { useLocation, useNavigate } from '../../../../providers/NavigationProvider';
+import type { Order } from './types';
+
+function ConfirmModal({
+  visible,
+  onVisibleChange,
+  title,
+  subTitle,
+  iconStyle,
+  confirmColor,
+  onConfirm,
+  busy,
+}: {
+  visible: boolean;
+  onVisibleChange: (visible: boolean) => void;
+  title: string;
+  subTitle: string;
+  iconStyle: 'success' | 'error';
+  confirmColor?: 'danger';
+  onConfirm: () => void;
+  busy: boolean;
+}) {
+  const { t } = useTranslation();
+  // The modal wrapper renders only in the browser, so mount after hydration to match the server.
+  const isClient = useIsClient();
+  if (!isClient) return null;
+  return (
+    <SallaModal
+      width="sm"
+      visible={visible}
+      onModalVisibilityChanged={(e) => onVisibleChange(Boolean(e.detail))}
+      {...{ 'modal-title': title }}
+      subTitle={subTitle}
+      iconStyle={iconStyle}
+    >
+      <div slot="footer" className="grid grid-cols-2 gap-3">
+        <SallaButton
+          width="wide"
+          color={confirmColor}
+          className="w-full cursor-pointer"
+          onClick={onConfirm}
+          disabled={busy}
+        >
+          {t('common.elements.ok')}
+        </SallaButton>
+        <SallaButton
+          className="w-full"
+          fill="outline"
+          color="light"
+          onClick={() => onVisibleChange(false)}
+          disabled={busy}
+        >
+          {t('common.elements.cancel')}
+        </SallaButton>
+      </div>
+    </SallaModal>
+  );
+}
+
+function PaymentOrReorder({
+  order,
+  paymentExpired,
+  canReorder,
+  onReorder,
+  busy,
+}: {
+  order: Order;
+  paymentExpired: boolean;
+  canReorder: boolean;
+  onReorder: () => void;
+  busy: boolean;
+}) {
+  const { t } = useTranslation();
+  if (order.actions.payable) {
+    return paymentExpired || !order.urls.checkout ? (
+      <span className="text-red-500">{t('pages.orders.pending_payment_expired')}</span>
+    ) : (
+      <SallaButton width="wide" href={order.urls.checkout}>
+        <i className="sicon sicon-wallet rtl:ml-2 ltr:mr-2"></i>
+        <span>{t('pages.orders.finish_payment')}</span>
+      </SallaButton>
+    );
+  }
+  if (!canReorder) return null;
+  return (
+    <>
+      <div className="text-sm">
+        <h3 className="font-bold text-lg leading-none mb-1">{t('pages.orders.reorder')}</h3>
+        <p className="text-gray-500">{t('pages.orders.reorder_description')}</p>
+      </div>
+      <SallaButton
+        data-testid="store-order-reorder-btn"
+        shape="link"
+        onClick={onReorder}
+        disabled={busy}
+      >
+        <i className="sicon sicon-rotate rtl:ml-2 ltr:mr-2"></i>
+        <span>{t('pages.orders.reorder')}</span>
+      </SallaButton>
+    </>
+  );
+}
+
+/** The "Reorder & Cancel" card, its pending-payment state and the two confirmations. */
+export function OrderActions({ order, paymentExpired }: { order: Order; paymentExpired: boolean }) {
+  const { t } = useTranslation();
+  // Token-based, so the server and the first client render agree (the user query loads later).
+  const { isLoggedIn } = useUser();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [showReorder, setShowReorder] = useState(false);
+  const [showCancel, setShowCancel] = useState(false);
+  const { reorderable, cancellable, payable } = order.actions;
+  const canReorder = isLoggedIn && reorderable;
+
+  const [reorderState, handleReorder] = useAsyncFn(async () => {
+    await window.salla?.order.createCartFromOrder(Number(order.id));
+    setShowReorder(false);
+    navigate('/cart');
+  }, [navigate, order.id]);
+
+  const [cancelState, handleCancel] = useAsyncFn(async () => {
+    await window.salla?.order.cancel(Number(order.id));
+    setShowCancel(false);
+    navigate(location.pathname, { replace: true });
+  }, [navigate, order.id, location.pathname]);
+
+  if (!reorderable && !cancellable && !payable) return null;
+
+  return (
+    <>
+      <div className="bg-white rounded-md p-5 divide-y divide-border-color space-y-4">
+        {(reorderable || payable) && (
+          <div className={payable ? 'flex-center' : 'center-between'}>
+            <PaymentOrReorder
+              order={order}
+              paymentExpired={paymentExpired}
+              canReorder={!!canReorder}
+              onReorder={() => setShowReorder(true)}
+              busy={reorderState.loading}
+            />
+          </div>
+        )}
+
+        {cancellable && (
+          <div className="center-between pt-4">
+            <div className="text-sm">
+              <h3 className="font-bold text-lg leading-none mb-1">{t('pages.orders.cancel')}</h3>
+              <p className="text-gray-500">{t('pages.order.order_cancelation_desc')}</p>
+            </div>
+            <SallaButton
+              data-testid="store-order-cancel-btn"
+              shape="link"
+              color="danger"
+              onClick={() => setShowCancel(true)}
+              disabled={cancelState.loading}
+            >
+              <i className="sicon sicon-cancel-circle rtl:ml-2 ltr:mr-2"></i>
+              <span>{t('pages.orders.cancel')}</span>
+            </SallaButton>
+          </div>
+        )}
+      </div>
+
+      {/* Always mounted: salla-modal moves itself under <body> and opens from `visible`. */}
+      {canReorder && (
+        <ConfirmModal
+          visible={showReorder}
+          onVisibleChange={setShowReorder}
+          title={t('pages.orders.reorder')}
+          subTitle={t('pages.orders.reorder_confirmation')}
+          iconStyle="success"
+          onConfirm={handleReorder}
+          busy={reorderState.loading}
+        />
+      )}
+      {cancellable && (
+        <ConfirmModal
+          visible={showCancel}
+          onVisibleChange={setShowCancel}
+          title={t('common.elements.warning')}
+          subTitle={t('pages.orders.cancel_confirmation')}
+          iconStyle="error"
+          confirmColor="danger"
+          onConfirm={handleCancel}
+          busy={cancelState.loading}
+        />
+      )}
+    </>
+  );
+}