orionplace-react 0.7.7 → 0.8.0

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

@@ -1,922 +0,0 @@
-'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>
-  );
-}