orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/orders/StorefrontOrders.tsx

@@ -0,0 +1,922 @@
+'use client';
+
+import {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  useOrionplaceProductsStore,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type {
+  ICartGetResponse,
+  ICurrencyAmounts,
+  IPaymentMethod,
+} from '@/interfaces/orionplace/cart/ICartData';
+import {
+  EOrderPaymentStatus,
+  EOrderStatus,
+  EOrderTab,
+} from '@/interfaces/orionplace/orders/IOrderActions';
+import type {
+  IOrder,
+  IOrderHistoryRequest,
+  IOrderHistoryResponse,
+} from '@/interfaces/orionplace/orders/IOrderHistory';
+import type { IStorefrontPayment } from '@/interfaces/orionplace/shared/IStorefrontControls';
+import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
+import { cartSnapshotProducts } from '@/lib/orionplace/cartSnapshot';
+import { formatCurrency } from '@/lib/orionplace/currency';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { mergePagination } from '@/lib/orionplace/featureData';
+import { orderItemCount, orderLabels } from '@/lib/orionplace/orderLabels';
+import {
+  hasOrderAmount,
+  orderAmount,
+  orderCanCancel,
+  orderIconPaths,
+  orderPaymentBadge,
+  orderQuantity,
+  orderShipmentItems,
+  orderShipmentProgress,
+  orderStatusBadge,
+  orderThumbnails,
+} from '@/lib/orionplace/orderPresentation';
+import {
+  getAvailableNestedValueFromObject,
+  safePublicUrl,
+} from '@/lib/orionplace/presentation';
+import { OrderDetails, type OrderDownloadKind } from './OrderDetails';
+import { OrderPaymentForm } from './OrderPaymentForm';
+import { PaymentPanel } from '@/components/orionplace/payments/PaymentPanel';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
+import styles from './StorefrontOrders.module.css';
+import { apiErrorMessage } from '@/lib/orionplace/api';
+
+type OrdersPage = NonNullable<IOrderHistoryResponse['page_data']>;
+type CartPage = NonNullable<ICartGetResponse['page_data']>;
+
+export interface OrdersLoadAction {
+  endpoint: 'profile_orders_get';
+  request: IOrderHistoryRequest;
+  signal: AbortSignal;
+}
+
+export interface OrderCancelAction {
+  endpoint: 'orders_cancel';
+  request: Record<string, never>;
+  path: { order_id: number };
+  signal: AbortSignal;
+}
+
+export interface OrderRepeatAction {
+  endpoint: 'orders_repeat';
+  request: { order: number };
+  signal: AbortSignal;
+}
+
+export interface OrderCartReadAction {
+  endpoint: 'cart_guest_get';
+  request: Record<string, never>;
+  signal: AbortSignal;
+}
+
+export interface OrderPaymentMethodsAction {
+  endpoint: 'orders_payment_methods_get';
+  request: Record<string, never>;
+  path: { order_id: number };
+  signal: AbortSignal;
+}
+
+export interface OrderPaymentSetAction {
+  endpoint: 'orders_payment_methods_set';
+  request: { order: number; payment: number };
+  signal: AbortSignal;
+}
+
+export interface OrderDownloadAction {
+  endpoint:
+    | 'profile_get_orders_shipment_attachment'
+    | 'profile_get_orders_options_shipment_attachment'
+    | 'orders_optiongroup_file_get';
+  request: { attached_stock: number } | { option_group: number };
+  filename: string;
+  signal: AbortSignal;
+}
+
+export interface StorefrontOrdersProps {
+  orderId?: number;
+  initial?: OrdersPage;
+  initialError?: string;
+  initialTab?: EOrderTab;
+  loadOnMount?: boolean;
+  ordersHref?: (locale: string) => string;
+  catalogHref?: (locale: string) => string;
+  cartHref?: (locale: string) => string;
+  onLoad: (action: OrdersLoadAction) => Promise<OrdersPage> | OrdersPage;
+  onCancel?: (action: OrderCancelAction) => Promise<void> | void;
+  onRepeat?: (action: OrderRepeatAction) => Promise<void> | void;
+  onReadCart?: (action: OrderCartReadAction) => Promise<CartPage> | CartPage;
+  onLoadPaymentMethods?: (
+    action: OrderPaymentMethodsAction,
+  ) => Promise<Record<string, IPaymentMethod> | IPaymentMethod[]> |
+    Record<string, IPaymentMethod> |
+    IPaymentMethod[];
+  onSetPayment?: (
+    action: OrderPaymentSetAction,
+  ) => Promise<IStorefrontPayment> | IStorefrontPayment;
+  onDownload?: (action: OrderDownloadAction) => Promise<void> | void;
+  onPageChange?: (page: number) => void;
+  onTabChange?: (tab: EOrderTab) => void;
+}
+
+interface SummaryRow {
+  key: string;
+  label: string;
+  note?: string;
+  value: string;
+  tone?: 'discount' | 'total' | 'due';
+}
+
+function Icon({ name }: { name: keyof typeof orderIconPaths }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={styles.icon}
+    >
+      <path d={orderIconPaths[name]} />
+    </svg>
+  );
+}
+
+export function StorefrontOrders({
+  orderId,
+  initial,
+  initialError = '',
+  initialTab = EOrderTab.IN_WORK,
+  loadOnMount = true,
+  ordersHref = (locale) => `/orders?locale=${encodeURIComponent(locale)}`,
+  catalogHref = (locale) => `/catalog?locale=${encodeURIComponent(locale)}`,
+  cartHref = (locale) => `/cart?locale=${encodeURIComponent(locale)}`,
+  onLoad,
+  onCancel,
+  onRepeat,
+  onReadCart,
+  onLoadPaymentMethods,
+  onSetPayment,
+  onDownload,
+  onPageChange,
+  onTabChange,
+}: StorefrontOrdersProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const currencyId = useOrionplaceSelections((state) => state.currencyId);
+  const currency = useOrionplaceSelections(
+    (state) => state.init?.currencies[state.currencyId],
+  );
+  const productStore = useOrionplaceProductsStore();
+  const labels = orderLabels(locale);
+  const common = featureLabels(locale);
+  const automaticLoad = loadOnMount && !initial && !initialError;
+  const activeRequest = useRef<AbortController | undefined>(undefined);
+  const callbacks = useRef({
+    onLoad,
+    onCancel,
+    onRepeat,
+    onReadCart,
+    onLoadPaymentMethods,
+    onSetPayment,
+    onDownload,
+  });
+  callbacks.current = {
+    onLoad,
+    onCancel,
+    onRepeat,
+    onReadCart,
+    onLoadPaymentMethods,
+    onSetPayment,
+    onDownload,
+  };
+  const [orders, setOrders] = useState(initial?.data ?? []);
+  const [pagination, setPagination] = useState<Partial<IApiPagination>>(
+    initial?.rpag ?? { page: 1 },
+  );
+  const [tab, setTab] = useState<EOrderTab>(initialTab);
+  const [loaded, setLoaded] = useState(Boolean(initial));
+  const [pending, setPending] = useState(automaticLoad);
+  const [error, setError] = useState(initialError);
+  const [needsRefresh, setNeedsRefresh] = useState(false);
+  const [confirmation, setConfirmation] = useState<{
+    id: number;
+    action: 'cancel' | 'repeat';
+  }>();
+  const [paymentOrder, setPaymentOrder] = useState<number>();
+  const [methods, setMethods] = useState<IPaymentMethod[]>([]);
+  const [payment, setPayment] = useState<IStorefrontPayment>();
+  const [repeated, setRepeated] = useState(false);
+
+  const tabs = [
+    { id: EOrderTab.IN_WORK, label: labels.active },
+    { id: EOrderTab.CANCELED, label: labels.canceled },
+    { id: EOrderTab.FINISHED, label: labels.finished },
+    { id: EOrderTab.REFUND, label: labels.refund },
+  ];
+  const disabled = pending || needsRefresh;
+
+  function requestBody(page: number): IOrderHistoryRequest {
+    return {
+      filters: orderId ? { id: orderId } : { order_tab: tab },
+      paginate: { page, pp_items: 5 },
+    };
+  }
+
+  async function fetchOrders(controller: AbortController, page: number) {
+    const result = await callbacks.current.onLoad({
+      endpoint: 'profile_orders_get',
+      request: requestBody(page),
+      signal: controller.signal,
+    });
+    if (controller.signal.aborted) {
+      return;
+    }
+    setOrders(result.data);
+    setPagination((previous) => mergePagination(previous, result.rpag));
+    setLoaded(true);
+    setNeedsRefresh(false);
+  }
+
+  async function run(work: (controller: AbortController) => Promise<void>) {
+    if (activeRequest.current) {
+      return;
+    }
+    const controller = new AbortController();
+    activeRequest.current = controller;
+    setPending(true);
+    setError('');
+    try {
+      await work(controller);
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        setError(
+          apiErrorMessage(reason) || common.failed,
+        );
+      }
+    } finally {
+      if (activeRequest.current === controller) {
+        activeRequest.current = undefined;
+        setPending(false);
+      }
+    }
+  }
+
+  function load(page = pagination.page ?? 1) {
+    return run((controller) => fetchOrders(controller, page));
+  }
+
+  function selectTab(nextTab: EOrderTab) {
+    if (pending || nextTab === tab) {
+      return;
+    }
+    setTab(nextTab);
+    setPagination({ page: 1 });
+    onTabChange?.(nextTab);
+    return run(async (controller) => {
+      const result = await callbacks.current.onLoad({
+        endpoint: 'profile_orders_get',
+        request: {
+          filters: { order_tab: nextTab },
+          paginate: { page: 1, pp_items: 5 },
+        },
+        signal: controller.signal,
+      });
+      if (!controller.signal.aborted) {
+        setOrders(result.data);
+        setPagination(mergePagination({ page: 1 }, result.rpag));
+        setLoaded(true);
+        setNeedsRefresh(false);
+      }
+    });
+  }
+
+  function changePage(page: number) {
+    onPageChange?.(page);
+    void load(page);
+  }
+
+  function cancel(order: IOrder) {
+    if (!callbacks.current.onCancel) {
+      return;
+    }
+    return run(async (controller) => {
+      await callbacks.current.onCancel?.({
+        endpoint: 'orders_cancel',
+        request: {},
+        path: { order_id: order.id },
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) {
+        return;
+      }
+      setNeedsRefresh(true);
+      await fetchOrders(controller, pagination.page ?? 1);
+    });
+  }
+
+  function repeat(order: IOrder) {
+    if (!callbacks.current.onRepeat) {
+      return;
+    }
+    return run(async (controller) => {
+      await callbacks.current.onRepeat?.({
+        endpoint: 'orders_repeat',
+        request: { order: order.id },
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) {
+        return;
+      }
+      setRepeated(true);
+      if (callbacks.current.onReadCart) {
+        const cart = await callbacks.current.onReadCart({
+          endpoint: 'cart_guest_get',
+          request: {},
+          signal: controller.signal,
+        });
+        if (!controller.signal.aborted) {
+          productStore.getState().setProductCounters({
+            c_cart_positions: cart.cart.c_cart_positions,
+          });
+          productStore.getState().synchronizeProductCart(
+            cartSnapshotProducts(cart),
+          );
+        }
+      }
+    });
+  }
+
+  function confirm(order: IOrder) {
+    const action = confirmation?.action;
+    setConfirmation(undefined);
+    if (action === 'cancel') {
+      void cancel(order);
+    } else if (action === 'repeat') {
+      void repeat(order);
+    }
+  }
+
+  function openPayment(order: IOrder) {
+    if (!callbacks.current.onLoadPaymentMethods) {
+      return;
+    }
+    return run(async (controller) => {
+      const result = await callbacks.current.onLoadPaymentMethods?.({
+        endpoint: 'orders_payment_methods_get',
+        request: {},
+        path: { order_id: order.id },
+        signal: controller.signal,
+      });
+      if (!controller.signal.aborted && result) {
+        setMethods(Array.isArray(result) ? result : Object.values(result));
+        setPaymentOrder(order.id);
+      }
+    });
+  }
+
+  function pay(method: number) {
+    if (
+      !paymentOrder ||
+      needsRefresh ||
+      !methods.some((item) => item.id === method) ||
+      !callbacks.current.onSetPayment
+    ) {
+      return;
+    }
+    return run(async (controller) => {
+      const result = await callbacks.current.onSetPayment?.({
+        endpoint: 'orders_payment_methods_set',
+        request: { payment: method, order: paymentOrder },
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted || !result) {
+        return;
+      }
+      setPayment(result);
+      setPaymentOrder(undefined);
+      setNeedsRefresh(true);
+      await fetchOrders(controller, pagination.page ?? 1);
+    });
+  }
+
+  function download(
+    kind: OrderDownloadKind,
+    id: number,
+    filename: string,
+  ) {
+    if (!callbacks.current.onDownload) {
+      return;
+    }
+    const endpoint = {
+      product: 'profile_get_orders_shipment_attachment',
+      option: 'profile_get_orders_options_shipment_attachment',
+      group: 'orders_optiongroup_file_get',
+    } as const;
+    void run(async (controller) => {
+      await callbacks.current.onDownload?.({
+        endpoint: endpoint[kind],
+        request: kind === 'group'
+          ? { option_group: id }
+          : { attached_stock: id },
+        filename,
+        signal: controller.signal,
+      });
+    });
+  }
+
+  function closePayment() {
+    setPayment(undefined);
+    void load();
+  }
+
+  function money(amounts: ICurrencyAmounts | null | undefined) {
+    return formatCurrency(orderAmount(amounts, currencyId), currency, locale);
+  }
+
+  function hasMoney(amounts: ICurrencyAmounts | null | undefined) {
+    return hasOrderAmount(amounts, currencyId);
+  }
+
+  function canPay(order: IOrder) {
+    const due = Number(
+      order.prices.order_total_paid_left?.[currencyId]?.transform_value,
+    );
+    return order.status.int === EOrderStatus.CREATED &&
+      !order.prices.delivery_price_is_estimate &&
+      !orderShipmentProgress(order).sent &&
+      (
+        order.payment_status.int === EOrderPaymentStatus.NOT_PAID ||
+        due > 0
+      );
+  }
+
+  function paymentMinutes(order: IOrder) {
+    const minutes = Number(order.cancel_in_minutes);
+    return canPay(order) && Number.isFinite(minutes) && minutes > 0
+      ? `${Math.ceil(minutes)} ${labels.minutes}`
+      : '';
+  }
+
+  function summaryRows(order: IOrder): SummaryRow[] {
+    const price = order.prices;
+    const code = order.promocode;
+    const rows: SummaryRow[] = [{
+      key: 'subtotal',
+      label: labels.subtotal,
+      value: money(price.total_price_no_discount),
+    }];
+    if (hasMoney(price.discount_value)) {
+      rows.push({
+        key: 'discount',
+        label: labels.discount,
+        value: `−${money(price.discount_value)}`,
+        tone: 'discount',
+      });
+    }
+    if (hasMoney(price.promo_value)) {
+      rows.push({
+        key: 'promo',
+        label: labels.promo,
+        note: code,
+        value: `−${money(price.promo_value)}`,
+        tone: 'discount',
+      });
+    }
+    if (hasMoney(price.delivery_discount)) {
+      rows.push({
+        key: 'delivery-discount',
+        label: labels.deliveryDiscount,
+        note: code,
+        value: `−${money(price.delivery_discount)}`,
+        tone: 'discount',
+      });
+    }
+    rows.push({
+      key: 'delivery',
+      label: labels.shippingCost,
+      value: price.delivery_price_is_estimate
+        ? labels.calculating
+        : money(price.total_delivery_price_after_promo),
+    });
+    rows.push({
+      key: 'total',
+      label: labels.total,
+      value: money(price.order_total),
+      tone: 'total',
+    });
+    if (hasMoney(price.order_total_paid)) {
+      rows.push({ key: 'paid', label: labels.paid, value: money(price.order_total_paid) });
+    }
+    if (hasMoney(price.order_total_paid_left)) {
+      rows.push({
+        key: 'left',
+        label: labels.left,
+        value: money(price.order_total_paid_left),
+        tone: 'due',
+      });
+    }
+    if (paymentMinutes(order)) {
+      rows.push({
+        key: 'payment-time',
+        label: labels.paymentTime,
+        value: paymentMinutes(order),
+      });
+    }
+    if (hasMoney(price.total_refund_price_to_pay)) {
+      rows.push({
+        key: 'refund-to-pay',
+        label: labels.refundToPay,
+        value: money(price.total_refund_price_to_pay),
+      });
+    }
+    if (hasMoney(price.total_refund_price_paid)) {
+      rows.push({
+        key: 'refunded',
+        label: labels.refunded,
+        value: money(price.total_refund_price_paid),
+      });
+    }
+    return rows;
+  }
+
+  function productName(product: IProduct | null) {
+    return getAvailableNestedValueFromObject(
+      product?.locale,
+      locale,
+      'product_name',
+    ) || `#${product?.id ?? ''}`;
+  }
+
+  function deliveryMethods(order: IOrder) {
+    const names = (order.delivery_froms ?? []).map((shipment) => {
+      if (!shipment.delivery_method) {
+        return shipment.store?.virtual_goods ? labels.digitalDelivery : '';
+      }
+      return getAvailableNestedValueFromObject(
+        shipment.delivery_method.locales,
+        locale,
+        'tariff_name',
+      ) ?? '';
+    });
+    return [...new Set(names.filter(Boolean))].join(', ');
+  }
+
+  function expectedDelivery(order: IOrder) {
+    if (
+      order.status.int !== EOrderStatus.CREATED &&
+      order.status.int !== EOrderStatus.SENT
+    ) {
+      return '';
+    }
+    const shipment = (order.delivery_froms ?? []).find((entry) =>
+      entry.estimate.delivery_date_from?.date ||
+      entry.estimate.delivery_date_to?.date,
+    );
+    return [...new Set([
+      shipment?.estimate.delivery_date_from?.date,
+      shipment?.estimate.delivery_date_to?.date,
+    ].filter(Boolean))].join(' — ');
+  }
+
+  function shippedCount(order: IOrder) {
+    const progress = orderShipmentProgress(order);
+    return progress.sent && progress.total
+      ? `${progress.sent} ${labels.of} ${progress.total}`
+      : '';
+  }
+
+  useEffect(() => {
+    if (automaticLoad) {
+      void load(1);
+    }
+    // Clear the cancelled request too: React's development mode mounts
+    // twice, and a remount that still saw it would never load.
+    return () => {
+      activeRequest.current?.abort();
+      activeRequest.current = undefined;
+    };
+  }, []);
+
+  // Another order or the list opens clean, as in Nuxt and Svelte: a repeat
+  // notice, a confirmation or a payment form belongs to the page it was made on.
+  const shownOrder = useRef(orderId);
+  useEffect(() => {
+    if (shownOrder.current === orderId) {
+      return;
+    }
+    shownOrder.current = orderId;
+    // The last page's request would answer for the wrong order.
+    activeRequest.current?.abort();
+    activeRequest.current = undefined;
+    setRepeated(false);
+    setConfirmation(undefined);
+    setPaymentOrder(undefined);
+    setPayment(undefined);
+    void load(1);
+  }, [orderId]);
+
+  return (
+    <section
+      className={styles.root}
+      aria-busy={pending}
+      data-feature-part="StorefrontOrders"
+    >
+      <header className={styles.heading}>
+        <div>
+          {orderId ? (
+            <a className={styles.link} href={safePublicUrl(ordersHref(locale))}>
+              <span aria-hidden="true">←</span> {labels.allOrders}
+            </a>
+          ) : null}
+          <h1>{labels.title}</h1>
+        </div>
+        <button
+          className={styles.refresh}
+          type="button"
+          disabled={pending}
+          onClick={() => void load()}
+        >
+          {common.refresh}
+        </button>
+      </header>
+
+      {!orderId ? (
+        <nav className={styles.tabs} aria-label={labels.tabs}>
+          {tabs.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              aria-current={tab === item.id ? 'page' : undefined}
+              disabled={pending}
+              onClick={() => void selectTab(item.id)}
+            >
+              {item.label}
+            </button>
+          ))}
+        </nav>
+      ) : null}
+
+      {pending ? (
+        <p className="op-feature-loading" role="status">
+          <span className={styles.screenReaderOnly}>{labels.loading}</span>
+        </p>
+      ) : null}
+      {error ? <p className={styles.error} role="alert">{error}</p> : null}
+      {needsRefresh ? (
+        <p className={styles.notice} role="alert">{labels.refreshRequired}</p>
+      ) : null}
+      {repeated ? (
+        <div className={styles.success} role="status">
+          <p>{labels.repeated}</p>
+          <a className={styles.link} href={safePublicUrl(cartHref(locale))}>
+            {labels.openCart}
+          </a>
+        </div>
+      ) : null}
+      {payment?.link ? (
+        <PaymentPanel
+          payment={payment}
+          pending={pending}
+          onRefresh={() => void load()}
+          onClose={closePayment}
+        />
+      ) : null}
+
+      {!loaded ? (
+        pending ? (
+          <div className={styles.placeholders} aria-hidden="true">
+            <div data-order-placeholder />
+            <div data-order-placeholder />
+          </div>
+        ) : <p className={styles.notice} role="status">{common.failed}</p>
+      ) : !orders.length ? (
+        <OrionplaceEmptyState
+          kind="orders"
+          messageTag="h2"
+          message={labels.empty}
+          description={labels.emptyHint}
+        >
+          <a className={styles.primary} href={safePublicUrl(catalogHref(locale))}>
+            {labels.catalog}
+          </a>
+        </OrionplaceEmptyState>
+      ) : orders.map((order) => {
+        const status = orderStatusBadge(order);
+        const paymentStatus = orderPaymentBadge(order, currencyId);
+        const thumbnails = orderThumbnails(orderShipmentItems(order));
+        const placed = [order.time_submited?.date, order.time_submited?.time]
+          .filter(Boolean)
+          .join(', ');
+        return (
+          <article
+            key={order.id}
+            className={styles.card}
+            data-order-card
+            aria-labelledby={`order-${order.id}-title`}
+          >
+            <header className={styles.cardHeading}>
+              <div>
+                <h2 id={`order-${order.id}-title`}>
+                  {labels.order} № {order.id}
+                </h2>
+                {placed ? <p>{labels.placed} <time>{placed}</time></p> : null}
+              </div>
+              <dl className={styles.badges}>
+                <div>
+                  <dt className={styles.screenReaderOnly}>{labels.statusOrder}</dt>
+                  <dd>
+                    <span
+                      className={styles.badge}
+                      data-tone={status.tone}
+                      data-order-status={order.status.int}
+                    >
+                      <Icon name={status.icon} />{labels.statuses[status.key]}
+                    </span>
+                  </dd>
+                </div>
+                <div>
+                  <dt className={styles.screenReaderOnly}>{labels.statusPayment}</dt>
+                  <dd>
+                    <span
+                      className={styles.badge}
+                      data-tone={paymentStatus.tone}
+                      data-payment-status={order.payment_status.int}
+                    >
+                      <Icon name={paymentStatus.icon} />
+                      {labels.payments[paymentStatus.key]}
+                    </span>
+                  </dd>
+                </div>
+              </dl>
+            </header>
+
+            <div className={styles.cardBody}>
+              <section>
+                <h3>{labels.items}</h3>
+                {thumbnails.items.length ? (
+                  <ul className={styles.thumbnails}>
+                    {thumbnails.items.map((item) => (
+                      <li key={item.id}>
+                        <OrionplaceImage
+                          src={item.product?.images?.small?.[0]}
+                          alt={productName(item.product)}
+                          width={64}
+                          height={64}
+                        />
+                      </li>
+                    ))}
+                    {thumbnails.extra ? (
+                      <li className={styles.more} data-order-more>
+                        +{thumbnails.extra}
+                      </li>
+                    ) : null}
+                  </ul>
+                ) : null}
+                <p>{orderItemCount(locale, orderQuantity(order))}</p>
+              </section>
+              <section>
+                <h3>{labels.delivery}</h3>
+                <dl className={styles.pairs}>
+                  {deliveryMethods(order) ? (
+                    <div><dt>{labels.method}</dt><dd>{deliveryMethods(order)}</dd></div>
+                  ) : null}
+                  {shippedCount(order) ? (
+                    <div><dt>{labels.sentDate}</dt><dd>{shippedCount(order)}</dd></div>
+                  ) : null}
+                  {expectedDelivery(order) ? (
+                    <div><dt>{labels.estimate}</dt><dd>{expectedDelivery(order)}</dd></div>
+                  ) : null}
+                  {order.prices.delivery_price_is_estimate ? (
+                    <div><dt>{labels.shippingCost}</dt><dd>{labels.calculating}</dd></div>
+                  ) : null}
+                </dl>
+              </section>
+              <section data-order-summary>
+                <h3>{labels.summary}</h3>
+                <dl className={`${styles.pairs} ${styles.amounts}`}>
+                  {summaryRows(order).map((row) => (
+                    <div
+                      key={row.key}
+                      data-order-summary-row={row.key}
+                      data-tone={row.tone}
+                    >
+                      <dt>{row.label}{row.note ? ` ${row.note}` : ''}</dt>
+                      <dd>{row.value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </section>
+            </div>
+
+            {order.prices.delivery_price_is_estimate ? (
+              <p className={styles.notice} role="status">{labels.estimated}</p>
+            ) : null}
+
+            <div className={styles.cardActions}>
+              <div role="group" aria-label={labels.actions}>
+                {canPay(order) ? (
+                  <button
+                    type="button"
+                    className={styles.primary}
+                    data-order-pay
+                    disabled={disabled}
+                    aria-label={labels.payHint}
+                    onClick={() => void openPayment(order)}
+                  >
+                    <Icon name="card" />{labels.pay}
+                  </button>
+                ) : null}
+                <button
+                  type="button"
+                  disabled={disabled || repeated}
+                  aria-label={labels.repeatHint}
+                  onClick={() => setConfirmation({ id: order.id, action: 'repeat' })}
+                >
+                  {labels.repeat}
+                </button>
+                {orderCanCancel(order) ? (
+                  <button
+                    type="button"
+                    disabled={disabled}
+                    aria-label={labels.cancelHint}
+                    onClick={() => setConfirmation({ id: order.id, action: 'cancel' })}
+                  >
+                    {labels.cancel}
+                  </button>
+                ) : null}
+              </div>
+
+              {confirmation?.id === order.id ? (
+                <div className={styles.confirmation}>
+                  <p>
+                    {confirmation.action === 'cancel'
+                      ? labels.cancelQuestion
+                      : labels.repeatQuestion}
+                  </p>
+                  <div>
+                    <button
+                      type="button"
+                      className={styles.primary}
+                      disabled={disabled}
+                      onClick={() => confirm(order)}
+                    >
+                      {common.continue}
+                    </button>
+                    <button
+                      type="button"
+                      disabled={disabled}
+                      onClick={() => setConfirmation(undefined)}
+                    >
+                      {common.back}
+                    </button>
+                  </div>
+                </div>
+              ) : null}
+
+              {paymentOrder === order.id ? (
+                <OrderPaymentForm
+                  methods={methods}
+                  pending={disabled}
+                  onSubmit={(method) => void pay(method)}
+                  onCancel={() => setPaymentOrder(undefined)}
+                />
+              ) : null}
+            </div>
+
+            <details open={Boolean(orderId)} className={styles.disclosure} data-order-details>
+              <summary>{labels.details}</summary>
+              <OrderDetails
+                order={order}
+                pending={pending}
+                onDownload={download}
+              />
+            </details>
+          </article>
+        );
+      })}
+
+      <StorefrontPagination
+        pagination={pagination}
+        pending={pending}
+        onChange={changePage}
+      />
+    </section>
+  );
+}