orionplace-react 0.7.8 → 0.8.0

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

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