orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/wallet/StorefrontWallet.tsx

@@ -0,0 +1,915 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectProfile } from '@/stores/orionplace';
+import type {
+  IApiPagination,
+  IProfileResponse,
+} from '@/interfaces/orionplace/accounts/IProfileData';
+import type { IPaymentMethod } from '@/interfaces/orionplace/cart/ICartData';
+import {
+  EInvoiceStatus,
+  type IInvoice,
+  type IInvoiceCreateRequest,
+  type IInvoicesRequest,
+  type IInvoicesResponse,
+} from '@/interfaces/orionplace/payments/IInvoice';
+import type { IStorefrontPayment } from '@/interfaces/orionplace/shared/IStorefrontControls';
+import type { ITransformValue } from '@/interfaces/orionplace/shared/ITransformValue';
+import { formatCurrency } from '@/lib/orionplace/currency';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { mergePagination } from '@/lib/orionplace/featureData';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import {
+  walletComment,
+  walletOutgoing,
+  walletPurpose,
+  walletRelation,
+  type IWalletRelation,
+  type WalletPurpose,
+} from '@/lib/orionplace/walletTransaction';
+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 { WalletBalance } from './WalletBalance';
+import { WalletTopUpForm } from './WalletTopUpForm';
+import styles from './StorefrontWallet.module.css';
+import { apiErrorMessage } from '@/lib/orionplace/api';
+
+type InvoicesPage = NonNullable<IInvoicesResponse['page_data']>;
+type ProfilePage = NonNullable<IProfileResponse['page_data']>;
+export type WalletCategory = Extract<
+  NonNullable<IInvoicesRequest['filters']>['invoice_type'],
+  'wallet' | 'orders' | 'paid_subs'
+>;
+
+export interface WalletLoadAction {
+  endpoint: 'invoices_get';
+  request: IInvoicesRequest;
+  signal: AbortSignal;
+}
+
+export interface WalletMethodsAction {
+  endpoint: 'invoices_payment_methods_get';
+  request: {
+    filters: {
+      is_from_balance_payment: false;
+      is_payment_on_delivery: false;
+    };
+  };
+  signal: AbortSignal;
+}
+
+export interface WalletCreateAction {
+  endpoint: 'invoices_create';
+  request: IInvoiceCreateRequest;
+  signal: AbortSignal;
+}
+
+export interface WalletCancelAction {
+  endpoint: 'invoices_cancel_invoice';
+  request: Record<string, never>;
+  path: { invoice_id: number };
+  signal: AbortSignal;
+}
+
+export interface WalletProfileAction {
+  endpoint: 'profile_get';
+  request: { filters: Record<string, never> };
+  signal: AbortSignal;
+}
+
+export interface StorefrontWalletProps {
+  initialData?: InvoicesPage;
+  initialCategory?: WalletCategory;
+  initialError?: string;
+  loadOnMount?: boolean;
+  ordersHref?: (orderId: number, locale: string) => string;
+  subscriptionsHref?: (locale: string) => string;
+  onLoad: (action: WalletLoadAction) => Promise<InvoicesPage> | InvoicesPage;
+  onLoadMethods: (
+    action: WalletMethodsAction,
+  ) => Promise<IPaymentMethod[]> | IPaymentMethod[];
+  onCreate: (
+    action: WalletCreateAction,
+  ) => Promise<IStorefrontPayment> | IStorefrontPayment;
+  onCancel: (action: WalletCancelAction) => Promise<IInvoice> | IInvoice;
+  onLoadProfile: (
+    action: WalletProfileAction,
+  ) => Promise<ProfilePage> | ProfilePage;
+  onPageChange?: (page: number) => void;
+  onCategoryChange?: (category: WalletCategory) => void;
+}
+
+const icons = {
+  wallet: 'M3 7h16v12H3zM3 7l12-3v3M16 13h.01M19 11h-4v4h4',
+  history: 'M12 7v5l3 2M3 12a9 9 0 1 0 3-6.7M3 4v4h4',
+  invoice: 'M6 3h12v18l-3-2-3 2-3-2-3 2zM9 8h6M9 12h6',
+  topUp: 'M3 7h16v12H3zM11 10v6M8 13h6',
+  deduction: 'M3 7h16v12H3zM8 13h6',
+  orderPayment: 'M5 8h14l-1 12H6zM9 8V6a3 3 0 0 1 6 0v2',
+  subscriptionPayment:
+    'M4 12a8 8 0 0 1 14-5.3L20 9M20 4v5h-5M20 12a8 8 0 0 1-14 5.3L4 15M4 20v-5h5',
+  bonus: 'M4 11h16v9H4zM3 7h18v4H3zM12 7v13M12 7c-2-4-6-3-5 0M12 7c2-4 6-3 5 0',
+  refund: 'M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3',
+} as const;
+
+function Icon({ path }: { path: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={path} />
+    </svg>
+  );
+}
+
+function fieldsFrom(reason: unknown) {
+  const record =
+    reason && typeof reason === 'object'
+      ? (reason as Record<string, unknown>)
+      : {};
+  const source = record.fields ?? record.form_errors;
+  if (!source || typeof source !== 'object' || Array.isArray(source)) {
+    return {};
+  }
+  return Object.fromEntries(
+    Object.entries(source).flatMap(([key, entry]) => {
+      const values   = Array.isArray(entry) ? entry : [entry];
+      const messages = values
+        .map((item) =>
+          typeof item === 'string'
+            ? item
+            : item && typeof item === 'object' && 'message' in item
+              ? String(item.message)
+              : '',
+        )
+        .filter(Boolean);
+      return messages.length ? [[key, messages.join('\n')]] : [];
+    }),
+  );
+}
+
+function failureMessage(reason: unknown, fallback: string) {
+  return apiErrorMessage(reason) || fallback;
+}
+
+export function StorefrontWallet({
+  initialData,
+  initialCategory = 'wallet',
+  initialError = '',
+  loadOnMount = true,
+  ordersHref = (id, locale) =>
+    `/orders?order=${id}&locale=${encodeURIComponent(locale)}`,
+  subscriptionsHref = (locale) =>
+    `/subscriptions?locale=${encodeURIComponent(locale)}`,
+  onLoad,
+  onLoadMethods,
+  onCreate,
+  onCancel,
+  onLoadProfile,
+  onPageChange,
+  onCategoryChange,
+}: StorefrontWalletProps) {
+  const profile                         = useOrionplace(selectProfile);
+  const selections                      = useOrionplaceSelections((state) => state);
+  const labels                          = featureLabels(selections.localeCode);
+  const callbacks                       = useRef({
+    onLoad,
+    onLoadMethods,
+    onCreate,
+    onCancel,
+    onLoadProfile,
+  });
+  callbacks.current                     = {
+    onLoad,
+    onLoadMethods,
+    onCreate,
+    onCancel,
+    onLoadProfile,
+  };
+  const active                          = useRef<AbortController | undefined>(undefined);
+  const initialized                     = useRef(false);
+  const [invoices, setInvoices]         = useState(initialData?.data ?? []);
+  const [methods, setMethods]           = useState<IPaymentMethod[]>([]);
+  const [pagination, setPagination]     = useState<Partial<IApiPagination>>(
+    initialData?.rpag ?? { page: 1 },
+  );
+  const [category, setCategory]         = useState<WalletCategory>(initialCategory);
+  const [payment, setPayment]           = useState<IStorefrontPayment>();
+  const [wallet, setWallet]             = useState<Record<string, ITransformValue>>();
+  const [topUp, setTopUp]               = useState(false);
+  const [loaded, setLoaded]             = useState(initialData !== undefined);
+  const [confirmation, setConfirmation] = useState<number>();
+  const [pending, setPending]           = useState(
+    loadOnMount && initialData === undefined,
+  );
+  const [error, setError]               = useState(initialError);
+  const [fields, setFields]             = useState<Record<string, string>>({});
+
+  async function run(
+    work: (controller: AbortController) => Promise<void>,
+    withFields = false,
+  ) {
+    if (active.current) {
+      return;
+    }
+    const controller = new AbortController();
+    active.current   = controller;
+    setPending(true);
+    setError('');
+    if (withFields) {
+      setFields({});
+    }
+
+    try {
+      await work(controller);
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        setError(failureMessage(reason, labels.failed));
+        if (withFields) {
+          setFields(fieldsFrom(reason));
+        }
+      }
+    } finally {
+      if (active.current === controller) {
+        active.current = undefined;
+        setPending(false);
+      }
+    }
+  }
+
+  async function fetchInvoices(
+    controller: AbortController,
+    page = 1,
+    nextCategory = category,
+  ) {
+    const result = await callbacks.current.onLoad({
+      endpoint: 'invoices_get',
+      request: {
+        filters: { invoice_type: nextCategory },
+        paginate: { page, pp_items: 10 },
+      },
+      signal: controller.signal,
+    });
+    if (controller.signal.aborted) {
+      return;
+    }
+    setInvoices(result.data);
+    setPagination((current) => mergePagination(current, result.rpag));
+    setLoaded(true);
+  }
+
+  function load(page = 1, nextCategory = category) {
+    onPageChange?.(page);
+    void run((controller) => fetchInvoices(controller, page, nextCategory));
+  }
+
+  function selectCategory(nextCategory: WalletCategory) {
+    if (pending || nextCategory === category) {
+      return;
+    }
+    setCategory(nextCategory);
+    setPagination({ page: 1 });
+    onCategoryChange?.(nextCategory);
+    load(1, nextCategory);
+  }
+
+  function openTopUp() {
+    void run(async (controller) => {
+      const result = await callbacks.current.onLoadMethods({
+        endpoint: 'invoices_payment_methods_get',
+        request: {
+          filters: {
+            is_from_balance_payment: false,
+            is_payment_on_delivery: false,
+          },
+        },
+        signal: controller.signal,
+      });
+      if (!controller.signal.aborted) {
+        setMethods(result);
+        setTopUp(true);
+      }
+    });
+  }
+
+  function create(request: IInvoiceCreateRequest) {
+    void run(async (controller) => {
+      const nextPayment = await callbacks.current.onCreate({
+        endpoint: 'invoices_create',
+        request,
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) {
+        return;
+      }
+      setPayment(nextPayment);
+      setTopUp(false);
+      // The new top-up is a wallet invoice: show that category from page 1.
+      if (category !== 'wallet') {
+        setCategory('wallet');
+        onCategoryChange?.('wallet');
+      }
+      setPagination({ page: 1 });
+      await fetchInvoices(controller, 1, 'wallet');
+    }, true);
+  }
+
+  function refreshPayment(close = false) {
+    void run(async (controller) => {
+      if (close) {
+        setPayment(undefined);
+      }
+      await fetchInvoices(controller, pagination.page ?? 1, category);
+      const page    = await callbacks.current.onLoadProfile({
+        endpoint: 'profile_get',
+        request: { filters: {} },
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) {
+        return;
+      }
+      const current = page.profile_info.find((item) => item.id === profile?.id);
+      if (current?.wallet) {
+        setWallet(current.wallet);
+      }
+    });
+  }
+
+  function cancel(invoice: IInvoice) {
+    if (
+      invoice.status.int !== EInvoiceStatus.CREATED ||
+      invoice.transaction_type !== 'wallet'
+    ) {
+      return;
+    }
+    void run(async (controller) => {
+      const updated = await callbacks.current.onCancel({
+        endpoint: 'invoices_cancel_invoice',
+        request: {},
+        path: { invoice_id: invoice.id },
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) {
+        return;
+      }
+      setInvoices((current) =>
+        current.map((item) => (item.id === updated.id ? updated : item)),
+      );
+      setConfirmation(undefined);
+      await fetchInvoices(controller, pagination.page ?? 1, category);
+    });
+  }
+
+  function relationLink(relation: IWalletRelation) {
+    if (relation.kind === 'order') {
+      return {
+        href: ordersHref(relation.id, selections.localeCode),
+        label: `${labels.wallet.relatedOrder} #${relation.id}`,
+        hint: labels.wallet.openOrder,
+      };
+    }
+    return {
+      href: subscriptionsHref(selections.localeCode),
+      label: `${labels.wallet.relatedSubscription} #${relation.id}`,
+      hint: labels.wallet.openSubscription,
+    };
+  }
+
+  function statusTone(status: EInvoiceStatus) {
+    if (status === EInvoiceStatus.COMPLETED) {
+      return 'success';
+    }
+    if (status === EInvoiceStatus.CREATED) {
+      return 'attention';
+    }
+    if (status === EInvoiceStatus.FAILED || status === EInvoiceStatus.FRAUD) {
+      return 'danger';
+    }
+    return 'neutral';
+  }
+
+  // The state name in the reader's language; a state the storefront does
+  // not know yet keeps the backend's name.
+  function statusLabel(status: IInvoice['status']) {
+    return labels.wallet.statuses[status.int] ?? status.text;
+  }
+
+  function money(amounts: IInvoice['amount']) {
+    return formatCurrency(
+      amounts[selections.currencyId]?.transform_value,
+      selections.init?.currencies[selections.currencyId],
+      selections.localeCode,
+    );
+  }
+
+  function amountClass(amounts: IInvoice['amount']) {
+    const value = Number(amounts[selections.currencyId]?.transform_value);
+    if (!Number.isFinite(value) || value === 0) {
+      return '';
+    }
+    return value < 0 ? styles.negative : styles.positive;
+  }
+
+  // A payment reads as money going out: a minus and the text colour.
+  function invoiceAmount(amounts: IInvoice['amount'], outgoing: boolean) {
+    const value = amounts[selections.currencyId]?.transform_value;
+    const text  = formatCurrency(
+      outgoing && value != null ? Math.abs(Number(value)) : value,
+      selections.init?.currencies[selections.currencyId],
+      selections.localeCode,
+    );
+
+    return outgoing && Number(value) ? `−${text}` : text;
+  }
+
+  useEffect(() => {
+    if (initialized.current || !loadOnMount) {
+      return;
+    }
+    initialized.current = true;
+    if (initialData) {
+      setPending(false);
+      return;
+    }
+    load(1, initialCategory);
+  }, [loadOnMount, initialCategory]);
+
+  useEffect(
+    () => () => {
+      active.current?.abort();
+      active.current      = undefined;
+      initialized.current = false;
+    },
+    [],
+  );
+
+  const tabs: WalletCategory[]          = ['wallet', 'orders', 'paid_subs'];
+
+  return (
+    <section
+      className={styles.root}
+      aria-busy={pending}
+      data-feature-part="StorefrontWallet"
+    >
+      <div className={styles.heading}>
+        <h1>{labels.wallet.title}</h1>
+        <p>{labels.wallet.description}</p>
+      </div>
+
+      <div className={styles.balance}>
+        <div className={styles.balanceIdentity}>
+          <span
+            className={styles.iconTile}
+            aria-hidden="true"
+          >
+            <Icon path={icons.wallet} />
+          </span>
+          <WalletBalance
+            label={labels.balance}
+            wallet={wallet}
+          />
+        </div>
+        <button
+          type="button"
+          className={`${styles.button} ${styles.primary}`}
+          data-wallet-top-up
+          disabled={pending}
+          aria-label={labels.wallet.topUp}
+          onClick={openTopUp}
+        >
+          <svg
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M10 4.5v11M4.5 10h11" />
+          </svg>
+          {labels.wallet.topUpAction}
+        </button>
+      </div>
+
+      {error ? (
+        <p
+          className={styles.notice}
+          role="alert"
+        >
+          {error}
+        </p>
+      ) : null}
+
+      {topUp ? (
+        <WalletTopUpForm
+          methods={methods}
+          pending={pending}
+          errors={fields}
+          onSubmit={create}
+          onCancel={() => setTopUp(false)}
+        />
+      ) : null}
+
+      {payment ? (
+        <PaymentPanel
+          payment={payment}
+          pending={pending}
+          onRefresh={() => refreshPayment(false)}
+          onClose={() => refreshPayment(true)}
+        />
+      ) : null}
+
+      <section className={styles.panel}>
+        <div className={styles.panelHeading}>
+          <h2>
+            <Icon path={icons.history} />
+            {labels.wallet.history}
+          </h2>
+          <button
+            className={styles.textButton}
+            type="button"
+            disabled={pending}
+            onClick={() => load(pagination.page ?? 1)}
+          >
+            <svg
+              className={styles.refreshIcon}
+              viewBox="0 0 20 20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M15.5 8A6 6 0 0 0 4.7 6.5M4.5 3.5v3h3" />
+              <path d="M4.5 12a6 6 0 0 0 10.8 1.5M15.5 16.5v-3h-3" />
+            </svg>
+            {labels.refresh}
+          </button>
+        </div>
+
+        <nav
+          className={styles.tabs}
+          aria-label={labels.wallet.history}
+        >
+          {tabs.map((tab) => (
+            <button
+              className={styles.tab}
+              key={tab}
+              type="button"
+              aria-current={category === tab ? 'page' : undefined}
+              disabled={pending}
+              onClick={() => selectCategory(tab)}
+            >
+              {labels.wallet[tab]}
+            </button>
+          ))}
+        </nav>
+
+        {pending && !loaded ? (
+          <p
+            className={`${styles.loading} op-feature-loading`}
+            role="status"
+          >
+            <span className={styles.screenReaderOnly}>{labels.loading}</span>
+          </p>
+        ) : loaded && !invoices.length ? (
+          <div className={styles.empty}>
+            <OrionplaceEmptyState
+              kind="wallet"
+              message={labels.wallet.empty}
+            />
+          </div>
+        ) : (
+          <ul className={styles.rows}>
+            {invoices.map((invoice) => {
+              const relation   = walletRelation(invoice);
+              const link       = relation ? relationLink(relation) : null;
+              const purpose    = walletPurpose(invoice);
+              const comment    = walletComment(invoice);
+              const method     = getAvailableNestedValueFromObject(
+                invoice.payment_method?.locale,
+                selections.localeCode,
+                'payment_name',
+              );
+              const methodLogo = invoice.payment_method?.logo;
+              const purposeKey = purpose ?? 'invoice';
+              const outgoing   = walletOutgoing(purpose);
+              const title      = purpose
+                ? labels.wallet.purpose[purpose]
+                : labels.wallet.invoice;
+              return (
+                <li
+                  key={invoice.id}
+                  className={styles.row}
+                  data-wallet-invoice
+                >
+                  <span
+                    className={`${styles.iconTile} ${styles.rowTile}`}
+                    aria-hidden="true"
+                  >
+                    {methodLogo ? (
+                      <OrionplaceImage
+                        src={methodLogo}
+                        alt=""
+                        width={40}
+                        height={40}
+                        ariaHidden
+                      />
+                    ) : (
+                      <Icon
+                        path={
+                          icons[purposeKey as WalletPurpose] ?? icons.invoice
+                        }
+                      />
+                    )}
+                  </span>
+                  <div className={styles.rowMain}>
+                    <div className={styles.rowHeading}>
+                      <span
+                        className={styles.number}
+                        data-wallet-invoice-number
+                      >
+                        {labels.wallet.invoice} #{invoice.id}
+                      </span>
+                      <span className={styles.meta}>
+                        {invoice.dates.created.date}{' '}
+                        {invoice.dates.created.time}
+                        {method ? (
+                          <>
+                            {' '}
+                            · <span data-wallet-method>{method}</span>
+                          </>
+                        ) : null}
+                      </span>
+                    </div>
+                    <p
+                      className={styles.purpose}
+                      data-wallet-purpose
+                    >
+                      {title}
+                    </p>
+                    {link ? (
+                      <a
+                        className={styles.relation}
+                        href={link.href}
+                        aria-label={link.hint}
+                        title={link.hint}
+                      >
+                        {link.label}
+                      </a>
+                    ) : null}
+                  </div>
+                  <div className={styles.amount}>
+                    <span
+                      className={styles.badge}
+                      data-tone={statusTone(invoice.status.int)}
+                    >
+                      {statusLabel(invoice.status)}
+                    </span>
+                    <span
+                      className={`${styles.amountValue} ${outgoing ? '' : amountClass(invoice.amount)}`.trim()}
+                    >
+                      {invoiceAmount(invoice.amount, outgoing)}
+                    </span>
+                  </div>
+                  <div className={styles.rowDetails}>
+                    {invoice.merchant_transaction_id || comment ? (
+                      <Reference
+                        transaction={invoice.merchant_transaction_id}
+                        comment={comment ?? ''}
+                        transactionLabel={labels.wallet.transactionId}
+                        commentLabel={labels.wallet.comment}
+                      />
+                    ) : null}
+                    {invoice.refunds?.length ? (
+                      <ul
+                        className={styles.refunds}
+                        aria-label={labels.wallet.refunds}
+                        data-wallet-refunds
+                      >
+                        {invoice.refunds.map((refund) => (
+                          <li
+                            key={refund.id}
+                            className={styles.refund}
+                            data-wallet-refund
+                          >
+                            <Icon path={icons.refund} />
+                            <div className={styles.refundCopy}>
+                              <div className={styles.rowHeading}>
+                                <span className={styles.number}>
+                                  {labels.wallet.invoice} #{refund.id}
+                                </span>
+                                <span className={styles.meta}>
+                                  {refund.dates.created.date}{' '}
+                                  {refund.dates.created.time}
+                                </span>
+                              </div>
+                              <p>
+                                {labels.wallet.purpose.refund} ·{' '}
+                                {refund.to_balance
+                                  ? labels.wallet.refundToBalance
+                                  : labels.wallet.refundToMethod}
+                              </p>
+                            </div>
+                            <div className={styles.amount}>
+                              <span
+                                className={styles.badge}
+                                data-tone={statusTone(refund.status.int)}
+                              >
+                                {statusLabel(refund.status)}
+                              </span>
+                              <span
+                                className={`${styles.amountValue} ${amountClass(refund.amount)}`.trim()}
+                              >
+                                {money(refund.amount)}
+                              </span>
+                            </div>
+                            {refund.merchant_transaction_id ||
+                            refund.comment ? (
+                              <div className={styles.refundReference}>
+                                <Reference
+                                  transaction={refund.merchant_transaction_id}
+                                  comment={refund.comment}
+                                  transactionLabel={labels.wallet.transactionId}
+                                  commentLabel={labels.wallet.comment}
+                                />
+                              </div>
+                            ) : null}
+                          </li>
+                        ))}
+                      </ul>
+                    ) : null}
+                    <div className={styles.actions}>
+                      {invoice.status.int === EInvoiceStatus.CREATED &&
+                      invoice.payment_generated_link ? (
+                        <button
+                          className={styles.button}
+                          type="button"
+                          data-invoice-pay
+                          disabled={pending}
+                          onClick={() =>
+                            setPayment({
+                              link: invoice.payment_generated_link,
+                              link_type: invoice.link_type,
+                            })
+                          }
+                        >
+                          <svg
+                            viewBox="0 0 20 20"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="1.5"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            aria-hidden="true"
+                          >
+                            <rect
+                              x="2.5"
+                              y="4.5"
+                              width="15"
+                              height="11"
+                            />
+                            <path d="M2.5 8h15M5.5 12.5h3" />
+                          </svg>
+                          {labels.wallet.pay}
+                        </button>
+                      ) : null}
+                      {invoice.status.int === EInvoiceStatus.CREATED &&
+                      invoice.transaction_type === 'wallet' ? (
+                        <button
+                          className={styles.button}
+                          type="button"
+                          disabled={pending}
+                          data-invoice-cancel
+                          onClick={() => setConfirmation(invoice.id)}
+                        >
+                          <svg
+                            viewBox="0 0 20 20"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="1.5"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            aria-hidden="true"
+                          >
+                            <circle
+                              cx="10"
+                              cy="10"
+                              r="7.5"
+                            />
+                            <path d="M7.5 7.5l5 5m0-5-5 5" />
+                          </svg>
+                          {labels.wallet.cancelInvoice}
+                        </button>
+                      ) : null}
+                    </div>
+                    {confirmation === invoice.id ? (
+                      <div className={styles.confirmation}>
+                        <p>{labels.wallet.cancelQuestion}</p>
+                        <div className={styles.confirmationActions}>
+                          <button
+                            className={styles.button}
+                            type="button"
+                            disabled={pending}
+                            onClick={() => cancel(invoice)}
+                          >
+                            <svg
+                              viewBox="0 0 20 20"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              aria-hidden="true"
+                            >
+                              <circle
+                                cx="10"
+                                cy="10"
+                                r="7.5"
+                              />
+                              <path d="M7.5 7.5l5 5m0-5-5 5" />
+                            </svg>
+                            {labels.wallet.cancelInvoice}
+                          </button>
+                          <button
+                            className={styles.button}
+                            type="button"
+                            disabled={pending}
+                            onClick={() => setConfirmation(undefined)}
+                          >
+                            <svg
+                              viewBox="0 0 20 20"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              aria-hidden="true"
+                            >
+                              <path d="M16 10H4m4-4-4 4 4 4" />
+                            </svg>
+                            {labels.back}
+                          </button>
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </section>
+
+      <StorefrontPagination
+        pagination={pagination}
+        pending={pending}
+        onChange={(page) => load(page)}
+      />
+    </section>
+  );
+}
+
+function Reference({
+  transaction,
+  comment,
+  transactionLabel,
+  commentLabel,
+}: {
+  transaction: string;
+  comment: string;
+  transactionLabel: string;
+  commentLabel: string;
+}) {
+  return (
+    <dl className={styles.reference}>
+      {transaction ? (
+        <div>
+          <dt>{transactionLabel}</dt>
+          <dd>{transaction}</dd>
+        </div>
+      ) : null}
+      {comment ? (
+        <div className={styles.note}>
+          <dt>{commentLabel}</dt>
+          <dd>{comment}</dd>
+        </div>
+      ) : null}
+    </dl>
+  );
+}