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

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

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