orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/wallet/StorefrontWallet.vue

@@ -0,0 +1,863 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { NuxtLink } from '#components';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { useOrionplaceWallet } from '@/composables/useOrionplaceWallet';
+  import { featureLabels } from '@/utils/orionplace/featureLabels';
+  import { formatCurrency } from '@/utils/orionplace/currency';
+  import { getAvailableNestedValueFromObject } from '@/utils/orionplace/presentation';
+  import {
+    walletComment,
+    walletOutgoing,
+    walletPurpose,
+    walletRelation,
+  } from '@/utils/orionplace/walletTransaction';
+  import { EInvoiceStatus } from '@/interfaces/orionplace/payments/IInvoice';
+  import WalletBalance from '@/components/orionplace/wallet/WalletBalance.vue';
+  import WalletTopUpForm from '@/components/orionplace/wallet/WalletTopUpForm.vue';
+  import PaymentPanel from '@/components/orionplace/payments/PaymentPanel.vue';
+  import StorefrontPagination from '@/components/orionplace/shared/StorefrontPagination.vue';
+  import '@/components/orionplace/shared/features.css';
+  import OrionplaceEmptyState from '@/components/orionplace/shared/OrionplaceEmptyState.vue';
+  import OrionplaceImage from '@/components/orionplace/shared/OrionplaceImage.vue';
+  import type {
+    IWalletRelation,
+    WalletPurpose,
+  } from '@/utils/orionplace/walletTransaction';
+  import type { IInvoiceRefund } from '@/interfaces/orionplace/payments/IInvoice';
+
+  const selectionStore = useOrionplaceSelectionsStore();
+  const wallet         = useOrionplaceWallet();
+  const labels         = computed(() => featureLabels(selectionStore.localeCode));
+  const tabs           = ['wallet', 'orders', 'paid_subs'] as const;
+  const busy           = computed(() => Boolean(wallet.task.state.pending));
+  // 24 × 24 stroke icons: the wallet itself and one per kind of payment.
+  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;
+
+  /*
+   * The record a payment belongs to keeps the selected language, like every
+   * other storefront address. An order opens its own details; a subscription
+   * payment opens the subscriptions section, because the response names the
+   * paid subscription without a page of its own.
+   */
+  function relationLink(relation: IWalletRelation) {
+    const locale  = selectionStore.localeCode;
+    const wording = labels.value.wallet;
+
+    if (relation.kind === 'order') {
+      return {
+        to: { path: '/orders', query: { order: relation.id, locale } },
+        label: `${wording.relatedOrder} #${relation.id}`,
+        hint: wording.openOrder,
+      };
+    }
+
+    return {
+      to: { path: '/subscriptions', query: { locale } },
+      label: `${wording.relatedSubscription} #${relation.id}`,
+      hint: wording.openSubscription,
+    };
+  }
+
+  function purposeIcon(purpose: WalletPurpose | null) {
+    return purpose ? icons[purpose] : icons.invoice;
+  }
+
+  // The badge colour follows the invoice state: paid, waiting for payment,
+  // refused by the payment provider, or closed without payment. A refund
+  // carries the same states.
+  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: IInvoiceRefund['status']) {
+    return labels.value.wallet.statuses[status.int] ?? status.text;
+  }
+
+  function money(amounts: IInvoiceRefund['amount']) {
+    return formatCurrency(
+      amounts[selectionStore.currencyId]?.transform_value,
+      selectionStore.currentCurrency,
+      selectionStore.localeCode,
+    );
+  }
+
+  // A positive amount reads green and a negative amount red; zero and an
+  // amount missing in the selected currency keep the text colour.
+  function amountTone(amounts: IInvoiceRefund['amount']) {
+    const value = Number(amounts[selectionStore.currencyId]?.transform_value);
+
+    if (!Number.isFinite(value) || value === 0) {
+      return '';
+    }
+
+    return value < 0 ? 'text-orionplace-danger' : 'text-orionplace-success';
+  }
+
+  // A payment reads as money going out: a minus and the text colour.
+  function invoiceAmount(amounts: IInvoiceRefund['amount'], outgoing: boolean) {
+    const value = amounts[selectionStore.currencyId]?.transform_value;
+    const text  = formatCurrency(
+      outgoing && value != null ? Math.abs(Number(value)) : value,
+      selectionStore.currentCurrency,
+      selectionStore.localeCode,
+    );
+
+    return outgoing && Number(value) ? `−${text}` : text;
+  }
+
+  function refundDestination(refund: IInvoiceRefund) {
+    return refund.to_balance
+      ? labels.value.wallet.refundToBalance
+      : labels.value.wallet.refundToMethod;
+  }
+
+  const rows   = computed(() =>
+    wallet.invoices.value.map((invoice) => {
+      const relation = walletRelation(invoice);
+      const purpose  = walletPurpose(invoice);
+
+      return {
+        invoice,
+        link: relation ? relationLink(relation) : null,
+        comment: walletComment(invoice),
+        title: purpose
+          ? labels.value.wallet.purpose[purpose]
+          : labels.value.wallet.invoice,
+        icon: purposeIcon(purpose),
+        outgoing: walletOutgoing(purpose),
+        tone: statusTone(invoice.status.int),
+        method: getAvailableNestedValueFromObject(
+          invoice.payment_method?.locale,
+          selectionStore.localeCode,
+          'payment_name',
+        ),
+        methodLogo: invoice.payment_method?.logo || '',
+      };
+    }),
+  );
+</script>
+
+<template>
+  <section
+    class="op-feature @container flex flex-col gap-6"
+    :aria-busy="busy"
+  >
+    <div class="flex min-w-0 flex-col gap-2">
+      <h1 class="commerce-title">{{ labels.wallet.title }}</h1>
+      <p class="op-feature-copy op-feature-muted">
+        {{ labels.wallet.description }}
+      </p>
+    </div>
+    <!-- The balance card carries the top-up, the action it leads to. -->
+    <div class="commerce-balance">
+      <div class="flex min-w-0 items-center gap-4">
+        <span
+          class="commerce-icon-tile h-12 w-12"
+          aria-hidden="true"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-6 w-6"
+          >
+            <path :d="icons.wallet" />
+          </svg>
+        </span>
+        <WalletBalance :label="labels.balance" />
+      </div>
+      <button
+        type="button"
+        class="commerce-button commerce-primary"
+        data-wallet-top-up
+        :disabled="busy"
+        :aria-label="labels.wallet.topUp"
+        @click="wallet.openTopUp()"
+      >
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          class="h-4 w-4 shrink-0"
+        >
+          <path d="M10 4.5v11M4.5 10h11" />
+        </svg>
+        {{ labels.wallet.topUpAction }}
+      </button>
+    </div>
+    <p
+      v-if="wallet.task.state.error"
+      class="op-notice op-notice-error"
+      role="alert"
+    >
+      {{ wallet.task.state.error }}
+    </p>
+    <WalletTopUpForm
+      v-if="wallet.topUp.value"
+      :methods="wallet.methods.value"
+      :pending="busy"
+      :errors="wallet.task.state.fields"
+      data-feature-part="WalletTopUpForm"
+      @submit="wallet.create"
+      @cancel="wallet.topUp.value = false"
+    />
+    <PaymentPanel
+      v-if="wallet.payment.value"
+      :payment="wallet.payment.value"
+      :pending="busy"
+      data-feature-part="PaymentPanel"
+      @refresh="wallet.refreshPayment()"
+      @close="wallet.closePayment()"
+    />
+    <section class="commerce-panel">
+      <div class="commerce-panel-head">
+        <h2 class="commerce-subtitle flex items-center gap-2">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="h-4 w-4 shrink-0"
+          >
+            <path :d="icons.history" />
+          </svg>
+          {{ labels.wallet.history }}
+        </h2>
+        <button
+          class="commerce-text-button"
+          type="button"
+          :disabled="busy"
+          @click="wallet.load(wallet.pagination.value.page)"
+        >
+          <svg
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="h-3.5 w-3.5 shrink-0"
+          >
+            <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 class="commerce-tabs">
+        <button
+          class="commerce-tab"
+          v-for="tab in tabs"
+          :key="tab"
+          type="button"
+          :aria-current="wallet.category.value === tab ? 'page' : undefined"
+          :disabled="busy"
+          @click="wallet.selectCategory(tab)"
+        >
+          {{ labels.wallet[tab] }}
+        </button>
+      </nav>
+      <p
+        v-if="busy && !wallet.loaded.value"
+        class="op-feature-loading min-h-40 m-0 px-5 @min-[592px]:px-6"
+        role="status"
+      >
+        <span class="sr-only">{{ labels.loading }}</span>
+      </p>
+      <OrionplaceEmptyState
+        v-else-if="wallet.loaded.value && !wallet.invoices.value.length"
+        class="px-5 py-8 @min-[592px]:px-6"
+        kind="wallet"
+        :message="labels.wallet.empty"
+      />
+      <ul class="commerce-rows">
+        <li
+          v-for="{
+            invoice,
+            link,
+            comment,
+            title,
+            icon,
+            outgoing,
+            tone,
+            method,
+            methodLogo,
+          } in rows"
+          :key="invoice.id"
+          class="
+            commerce-row grid items-start gap-x-3 gap-y-3
+            grid-cols-[auto_minmax(0,1fr)_auto] @min-[592px]:gap-x-4
+          "
+          data-wallet-invoice
+        >
+          <span
+            class="commerce-icon-tile h-10 w-10 overflow-hidden"
+            aria-hidden="true"
+          >
+            <!--
+              The logo of the payment method identifies the payment; a
+              method without a logo keeps the icon of what the money did.
+            -->
+            <OrionplaceImage
+              v-if="methodLogo"
+              :src="methodLogo"
+              alt=""
+              class="box-border h-full w-full object-contain p-1"
+              data-wallet-method-logo
+            />
+            <svg
+              v-else
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="h-5 w-5"
+            >
+              <path :d="icon" />
+            </svg>
+          </span>
+          <div class="flex min-w-0 flex-col gap-2">
+            <!--
+              The invoice number opens the row with the date and the payment
+              method beside it; what the money did is the line below.
+            -->
+            <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+              <span
+                class="commerce-number"
+                data-wallet-invoice-number
+              >
+                {{ labels.wallet.invoice }} #{{ invoice.id }}
+              </span>
+              <span class="commerce-meta">
+                {{ invoice.dates.created.date }}
+                {{ invoice.dates.created.time }}
+                <template v-if="method">
+                  · <span data-wallet-method>{{ method }}</span>
+                </template>
+              </span>
+            </div>
+            <p
+              class="m-0 text-sm text-orionplace-text"
+              data-wallet-purpose
+            >
+              {{ title }}
+            </p>
+            <NuxtLink
+              v-if="link"
+              class="commerce-link"
+              :to="link.to"
+              :aria-label="link.hint"
+              :title="link.hint"
+            >
+              {{ link.label }}
+            </NuxtLink>
+          </div>
+          <!--
+            The references, refunds and actions start where the invoice
+            number starts, so every line of the payment shares one left edge;
+            they also use the width under the amount.
+          -->
+          <div class="col-start-2 col-span-2 flex min-w-0 flex-col gap-3">
+            <dl
+              v-if="invoice.merchant_transaction_id || comment"
+              class="commerce-reference"
+            >
+              <div
+                v-if="invoice.merchant_transaction_id"
+                class="commerce-reference-item"
+              >
+                <dt>{{ labels.wallet.transactionId }}</dt>
+                <dd>{{ invoice.merchant_transaction_id }}</dd>
+              </div>
+              <div
+                v-if="comment"
+                class="commerce-reference-item commerce-reference-note"
+              >
+                <dt>{{ labels.wallet.comment }}</dt>
+                <dd>{{ comment }}</dd>
+              </div>
+            </dl>
+            <!--
+              Refunds of this payment stay inside it, so the money returned
+              is read next to the payment it came from.
+            -->
+            <ul
+              v-if="invoice.refunds?.length"
+              class="commerce-refunds"
+              :aria-label="labels.wallet.refunds"
+              data-wallet-refunds
+            >
+              <li
+                v-for="refund in invoice.refunds"
+                :key="refund.id"
+                class="commerce-refund"
+                data-wallet-refund
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="mt-0.5 h-4 w-4 shrink-0 text-orionplace-muted"
+                >
+                  <path :d="icons.refund" />
+                </svg>
+                <div class="flex min-w-0 flex-col gap-1">
+                  <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+                    <span class="commerce-number">
+                      {{ labels.wallet.invoice }} #{{ refund.id }}
+                    </span>
+                    <span class="commerce-meta">
+                      {{ refund.dates.created.date }}
+                      {{ refund.dates.created.time }}
+                    </span>
+                  </div>
+                  <p class="m-0 text-sm text-orionplace-text">
+                    {{ labels.wallet.purpose.refund }}
+                    <span class="text-orionplace-muted">
+                      · {{ refundDestination(refund) }}
+                    </span>
+                  </p>
+                </div>
+                <div class="flex flex-col items-end gap-1.5 text-right">
+                  <span
+                    class="commerce-badge"
+                    :data-tone="statusTone(refund.status.int)"
+                  >
+                    {{ statusLabel(refund.status) }}
+                  </span>
+                  <span
+                    class="text-sm font-medium tabular-nums"
+                    :class="amountTone(refund.amount)"
+                  >
+                    {{ money(refund.amount) }}
+                  </span>
+                </div>
+                <dl
+                  v-if="refund.merchant_transaction_id || refund.comment"
+                  class="commerce-reference col-start-2 col-span-2 mt-2"
+                >
+                  <div
+                    v-if="refund.merchant_transaction_id"
+                    class="commerce-reference-item"
+                  >
+                    <dt>{{ labels.wallet.transactionId }}</dt>
+                    <dd>{{ refund.merchant_transaction_id }}</dd>
+                  </div>
+                  <div
+                    v-if="refund.comment"
+                    class="commerce-reference-item commerce-reference-note"
+                  >
+                    <dt>{{ labels.wallet.comment }}</dt>
+                    <dd>{{ refund.comment }}</dd>
+                  </div>
+                </dl>
+              </li>
+            </ul>
+            <div class="op-feature-actions">
+              <button
+                class="commerce-button"
+                v-if="
+                  invoice.status.int === EInvoiceStatus.CREATED &&
+                  invoice.payment_generated_link
+                "
+                type="button"
+                data-invoice-pay
+                :disabled="busy"
+                @click="
+                  wallet.payment.value = {
+                    link: invoice.payment_generated_link,
+                    link_type: invoice.link_type,
+                  }
+                "
+              >
+                <svg
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="h-4 w-4 shrink-0"
+                >
+                  <rect
+                    x="2.5"
+                    y="4.5"
+                    width="15"
+                    height="11"
+                  />
+                  <path d="M2.5 8h15M5.5 12.5h3" />
+                </svg>
+                {{ labels.wallet.pay }}
+              </button>
+              <button
+                class="commerce-button"
+                v-if="
+                  invoice.status.int === EInvoiceStatus.CREATED &&
+                  invoice.transaction_type === 'wallet'
+                "
+                type="button"
+                :disabled="busy"
+                data-invoice-cancel
+                @click="wallet.confirmation.value = invoice.id"
+              >
+                <svg
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="h-4 w-4 shrink-0"
+                >
+                  <circle
+                    cx="10"
+                    cy="10"
+                    r="7.5"
+                  />
+                  <path d="M7.5 7.5l5 5m0-5-5 5" />
+                </svg>
+                {{ labels.wallet.cancelInvoice }}
+              </button>
+            </div>
+            <div
+              v-if="wallet.confirmation.value === invoice.id"
+              class="op-feature-stack"
+            >
+              <p class="op-feature-copy">{{ labels.wallet.cancelQuestion }}</p>
+              <div class="op-feature-actions">
+                <button
+                  class="commerce-button"
+                  type="button"
+                  :disabled="busy"
+                  @click="wallet.cancel(invoice)"
+                >
+                  <svg
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                    class="h-4 w-4 shrink-0"
+                  >
+                    <circle
+                      cx="10"
+                      cy="10"
+                      r="7.5"
+                    />
+                    <path d="M7.5 7.5l5 5m0-5-5 5" />
+                  </svg>
+                  {{ labels.wallet.cancelInvoice }}
+                </button>
+                <button
+                  class="commerce-button"
+                  type="button"
+                  :disabled="busy"
+                  @click="wallet.confirmation.value = undefined"
+                >
+                  <svg
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                    class="h-4 w-4 shrink-0"
+                  >
+                    <path d="M16 10H4m4-4-4 4 4 4" />
+                  </svg>
+                  {{ labels.back }}
+                </button>
+              </div>
+            </div>
+          </div>
+          <!--
+            The state of the payment stands level with the invoice number,
+            and its amount level with the description below.
+          -->
+          <div
+            class="
+              col-start-3 row-start-1
+              flex flex-col items-end gap-1.5 text-right
+            "
+          >
+            <span
+              class="commerce-badge"
+              :data-tone="tone"
+            >
+              {{ statusLabel(invoice.status) }}
+            </span>
+            <span
+              class="text-base font-medium tabular-nums"
+              :class="outgoing ? '' : amountTone(invoice.amount)"
+            >
+              {{ invoiceAmount(invoice.amount, outgoing) }}
+            </span>
+          </div>
+        </li>
+      </ul>
+    </section>
+    <StorefrontPagination
+      :pagination="wallet.pagination.value"
+      :pending="busy"
+      data-feature-part="StorefrontPagination"
+      @change="wallet.load"
+    />
+  </section>
+</template>
+
+<style scoped>
+  @reference "@/assets/css/orionplace.css";
+
+  .commerce-title {
+    @apply m-0 text-2xl font-medium uppercase leading-tight;
+    @apply tracking-[0.04em] @min-[592px]:text-3xl;
+  }
+
+  .commerce-subtitle {
+    @apply m-0 p-0 text-sm font-medium uppercase tracking-[0.08em];
+  }
+
+  .commerce-meta {
+    @apply m-0 text-xs uppercase tracking-[0.08em] text-orionplace-muted;
+  }
+
+  /*
+   * The payment references are a two-column table: the label on a tinted
+   * column, the value beside it, one row per reference.
+   */
+  .commerce-reference {
+    @apply m-0 grid grid-cols-1 @min-[592px]:grid-cols-[11rem_minmax(0,1fr)];
+    @apply border border-solid border-orionplace-border text-xs;
+    @apply bg-orionplace-surface;
+  }
+
+  .commerce-reference-item {
+    @apply contents;
+  }
+
+  .commerce-reference dt,
+  .commerce-reference dd {
+    @apply m-0 px-3 py-1.5 leading-5;
+    @apply border-0 border-solid border-orionplace-border;
+  }
+
+  /*
+   * The label column has one width in every payment, so the tables of
+   * consecutive payments line up; a rule separates it from the value.
+   */
+  .commerce-reference dt {
+    @apply bg-orionplace-muted-surface text-[11px] uppercase;
+    @apply tracking-[0.06em] text-orionplace-muted @min-[592px]:border-r;
+  }
+
+  .commerce-reference dd {
+    @apply min-w-0 break-all text-orionplace-text;
+  }
+
+  /*
+   * Rows are separated by one rule; a narrow table puts each label above
+   * its value.
+   */
+  .commerce-reference-item + .commerce-reference-item > dt {
+    @apply border-t;
+  }
+
+  .commerce-reference-item + .commerce-reference-item > dd {
+    @apply @min-[592px]:border-t;
+  }
+
+  /* A comment is written text, so it wraps between words like ordinary copy. */
+  .commerce-reference-note dd {
+    word-break: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .commerce-badge {
+    @apply inline-flex items-center px-2 py-0.5;
+    @apply border border-solid border-orionplace-border;
+    @apply bg-orionplace-muted-surface text-orionplace-muted;
+    @apply text-[11px] uppercase leading-4 tracking-[0.08em];
+  }
+
+  .commerce-badge[data-tone='success'] {
+    @apply border-orionplace-success bg-orionplace-success-surface;
+    @apply text-orionplace-success;
+  }
+
+  .commerce-badge[data-tone='attention'] {
+    @apply border-orionplace-attention bg-orionplace-attention-surface;
+    @apply text-orionplace-attention;
+  }
+
+  .commerce-badge[data-tone='danger'] {
+    @apply border-orionplace-danger bg-orionplace-danger-surface;
+    @apply text-orionplace-danger;
+  }
+
+  /*
+   * The invoice number opens every payment and refund: it is the reference a
+   * customer quotes to support, so it stands apart from the title.
+   */
+  .commerce-number {
+    @apply inline-flex items-center whitespace-nowrap px-2 py-0.5;
+    @apply border border-solid border-orionplace-text;
+    @apply text-[11px] font-medium uppercase leading-4 tracking-[0.08em];
+    @apply tabular-nums text-orionplace-text;
+  }
+
+  /* The balance card: the icon and the amount beside the top-up action. */
+  .commerce-balance {
+    @apply box-border flex flex-wrap items-center justify-between gap-4;
+    @apply px-5 py-6 @min-[592px]:px-6;
+    @apply border border-solid border-orionplace-border;
+    @apply bg-orionplace-muted-surface;
+  }
+
+  .commerce-icon-tile {
+    @apply box-border grid shrink-0 place-items-center;
+    @apply border border-solid border-orionplace-border;
+    @apply bg-orionplace-surface text-orionplace-text;
+  }
+
+  /*
+   * The payment history is one framed panel: its heading, the tabs and the
+   * payments, each separated by a single rule.
+   */
+  .commerce-panel {
+    @apply flex min-w-0 flex-col;
+    @apply border border-solid border-orionplace-border;
+  }
+
+  .commerce-panel-head {
+    @apply flex flex-wrap items-center justify-between gap-4;
+    @apply px-5 pt-5 pb-3 @min-[592px]:px-6;
+  }
+
+  .commerce-button {
+    @apply box-border inline-flex h-11 items-center justify-center gap-2 px-6;
+    @apply cursor-pointer rounded-none border border-solid;
+    @apply border-orionplace-text bg-transparent text-orionplace-text;
+    @apply text-xs font-medium uppercase tracking-[0.08em] no-underline;
+    @apply outline-none hover:bg-orionplace-hover;
+    @apply focus-visible:bg-orionplace-hover;
+    @apply disabled:cursor-not-allowed disabled:opacity-40;
+    font-family: inherit;
+  }
+
+  .commerce-primary {
+    @apply border-orionplace-accent bg-orionplace-accent;
+    @apply text-orionplace-surface hover:bg-orionplace-accent;
+    @apply hover:opacity-85 focus-visible:bg-orionplace-accent;
+    @apply focus-visible:opacity-85;
+  }
+
+  .commerce-text-button,
+  .commerce-link {
+    @apply inline-flex cursor-pointer items-center gap-1 self-start;
+    @apply border-0 border-b border-solid border-current bg-transparent;
+    @apply px-0 pt-0 pb-0.5 text-xs uppercase tracking-[0.08em];
+    @apply text-orionplace-text no-underline outline-none;
+    @apply hover:opacity-70 focus-visible:opacity-70;
+    @apply disabled:cursor-not-allowed disabled:opacity-40;
+    font-family: inherit;
+  }
+
+  .commerce-tabs {
+    @apply flex flex-wrap gap-x-6 px-5 @min-[592px]:px-6;
+    @apply border-0 border-b border-solid border-orionplace-border;
+  }
+
+  .commerce-tab {
+    @apply -mb-px cursor-pointer bg-transparent px-0 py-3;
+    @apply border-0 border-b-2 border-solid border-transparent;
+    @apply text-xs font-medium uppercase tracking-[0.08em];
+    @apply text-orionplace-muted outline-none;
+    @apply hover:text-orionplace-text focus-visible:text-orionplace-text;
+    @apply disabled:cursor-not-allowed disabled:opacity-40;
+    font-family: inherit;
+  }
+
+  .commerce-tab[aria-current="page"] {
+    @apply border-orionplace-text text-orionplace-text;
+  }
+
+  .commerce-rows {
+    @apply m-0 flex list-none flex-col p-0;
+  }
+
+  .commerce-row {
+    @apply border-0 border-b border-solid border-orionplace-border;
+    @apply px-5 py-5 last:border-b-0 @min-[592px]:px-6;
+  }
+
+  /*
+   * The refunds of a payment form one tinted block inside its row; each
+   * refund is separated from the next by a single rule.
+   */
+  .commerce-refunds {
+    @apply m-0 flex list-none flex-col p-0;
+    @apply bg-orionplace-muted-surface;
+  }
+
+  .commerce-refund {
+    @apply grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-3;
+    @apply gap-y-1;
+    @apply px-4 py-3;
+    @apply border-0 border-t border-solid border-orionplace-border;
+    @apply first:border-t-0;
+  }
+
+  /* Row actions are secondary to the payment, so they are compact. */
+  .commerce-row .commerce-button {
+    @apply h-9 px-4;
+  }
+</style>