orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/subscriptions/SubscriptionChangeDialog.vue

@@ -0,0 +1,874 @@
+<script setup lang="ts">
+  import '@/components/orionplace/shared/dialogs.css';
+  import {
+    computed,
+    nextTick,
+    onBeforeUnmount,
+    onMounted,
+    ref,
+    useId,
+    watch,
+  } from 'vue';
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import { useOrionplaceCatalogStore } from '@/stores/orionplaceCatalog';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { tariffMoney } from '@/utils/orionplace/tariffs';
+  import { getAvailableNestedValueFromObject } from '@/utils/orionplace/presentation';
+  import {
+    subscriptionChangeIsAboveBalance,
+    subscriptionChangePeriods,
+    subscriptionChangeTotal,
+    subscriptionOptionChoices,
+    subscriptionPlanChoices,
+    subscriptionRefundAmount,
+  } from '@/utils/orionplace/subscriptionChanges';
+  import {
+    subscriptionDays,
+    subscriptionManageLabels,
+  } from '@/utils/orionplace/subscriptionManageLabels';
+  import {
+    createPageScrollLock,
+    focusedElement,
+    restoreFocus,
+  } from '@/utils/orionplace/modalWindow';
+  import type {
+    ISubscribeTariff,
+    ISubscribeTariffOption,
+  } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+  import type {
+    ICustomerSubscription,
+    ISubscriptionChangeRequest,
+  } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+  import '@/components/orionplace/shared/features.css';
+  import OrionplaceSelect from '@/components/orionplace/shared/OrionplaceSelect.vue';
+  import SubscriptionPlanSummary from '@/components/orionplace/subscriptions/SubscriptionPlanSummary.vue';
+  import OrionplaceInfoHint from '@/components/orionplace/shared/OrionplaceInfoHint.vue';
+
+  const props          = withDefaults(
+    defineProps<{
+      subscription?: ICustomerSubscription;
+      mode?: 'plan' | 'option';
+      plan?: ISubscribeTariff;
+      pending?: boolean;
+      error?: string;
+      fields?: Record<string, string>;
+      modal?: boolean;
+    }>(),
+    {
+      mode: 'plan',
+      pending: false,
+      error: '',
+      fields: () => ({}),
+      modal: true,
+    },
+  );
+  const emit           = defineEmits<{
+    submit: [request: ISubscriptionChangeRequest];
+    close: [];
+  }>();
+  const store          = useOrionplaceStore();
+  const catalogStore   = useOrionplaceCatalogStore();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const id             = useId();
+  const dialog         = ref<HTMLDialogElement>();
+  const planChoice     = ref('');
+  const optionChoice   = ref('');
+  const period         = ref<number>();
+  const renewalChoice  = ref('');
+  const promo          = ref('');
+  const confirming     = ref(false);
+  const copy           = computed(() =>
+    subscriptionManageLabels(selectionStore.localeCode),
+  );
+  const changingPlan   = computed(() => props.mode === 'plan');
+
+  /*
+   * Application Load carries the plans of the storefront with their paid
+   * periods and the price of every service option for each period, so the
+   * dialog offers the same pairs the backend accepts and shows the amounts
+   * the backend returned for them.
+   */
+  const plans          = computed(() => {
+    const subscription = props.subscription;
+
+    if (!subscription || !changingPlan.value) {
+      return [];
+    }
+
+    return subscriptionPlanChoices(
+      subscription,
+      catalogStore.storeTariffs?.data ?? [],
+      catalogStore.storeTariffs?.subscriptions ?? [],
+    );
+  });
+  const targetPlan     = computed(() => {
+    if (!changingPlan.value) {
+      return props.plan;
+    }
+
+    return plans.value.find((item) => String(item.id) === planChoice.value);
+  });
+  const options        = computed(() =>
+    subscriptionOptionChoices(targetPlan.value),
+  );
+  const targetOption   = computed(() =>
+    options.value.find((item) => String(item.id) === optionChoice.value),
+  );
+  const periods        = computed(() =>
+    subscriptionChangePeriods(
+      targetPlan.value,
+      targetOption.value,
+      selectionStore.currencyId,
+    ).map((choice) => ({
+      ...choice,
+      length: subscriptionDays(choice.days, selectionStore.localeCode),
+      price: money(choice.amount),
+    })),
+  );
+  const chosen         = computed(() =>
+    periods.value.find((choice) => choice.id === period.value),
+  );
+  /*
+   * A list with one entry is not a choice: a plan change keeps the plan's
+   * only option and a single period is selected without showing the list.
+   * An option change always lists the options, because choosing one is the
+   * purpose of the dialog.
+   */
+  const showOptions    = computed(
+    () => options.value.length > (changingPlan.value ? 1 : 0),
+  );
+  const showPeriods    = computed(() => periods.value.length > 1);
+  const planOptions    = computed(() => {
+    const entries: Record<string, string> = {};
+
+    for (const item of plans.value) {
+      entries[String(item.id)] = planName(item);
+    }
+
+    return entries;
+  });
+  const optionOptions  = computed(() => {
+    const entries: Record<string, string> = {};
+
+    for (const item of options.value) {
+      entries[String(item.id)] = optionName(item);
+    }
+
+    return entries;
+  });
+  const renewOptions   = computed(() => {
+    const entries: Record<string, string> = { '': copy.value.renewalOff };
+
+    for (const choice of periods.value) {
+      entries[String(choice.id)] = `${choice.length} · ${choice.price}`;
+    }
+
+    return entries;
+  });
+  const renewal        = computed(() =>
+    periods.value.find((choice) => String(choice.id) === renewalChoice.value),
+  );
+  const currentPlan    = computed(() =>
+    copy.value.changeCurrentPlan.replace('{plan}', planName(props.plan)),
+  );
+  const currentOption  = computed(() => {
+    const current = options.value.find(
+      (item) => item.id === props.subscription?.option,
+    );
+
+    return copy.value.changeCurrentOption.replace(
+      '{option}',
+      current ? optionName(current) : copy.value.changeNoOption,
+    );
+  });
+  const balance        = computed(
+    () => store.init?.wallet?.[selectionStore.currencyId]?.transform_value,
+  );
+  /*
+   * The refund for the unused days arrives with the subscription itself in
+   * `returned_amount`, so the dialog shows the amount the storefront backend
+   * will credit and counts it towards what this change can cost. A response
+   * without the field leaves the refund unknown.
+   */
+  const refund         = computed(() =>
+    subscriptionRefundAmount(props.subscription, selectionStore.currencyId),
+  );
+  const available      = computed(() => {
+    if (balance.value === undefined || refund.value === undefined) {
+      return undefined;
+    }
+
+    return balance.value + refund.value;
+  });
+  const low            = computed(() =>
+    subscriptionChangeIsAboveBalance(
+      chosen.value,
+      balance.value,
+      refund.value,
+    ),
+  );
+  const lowNotice      = computed(() =>
+    refund.value === undefined
+      ? copy.value.changeInsufficient
+      : copy.value.changeShort,
+  );
+  const unavailable    = computed(() => {
+    if (changingPlan.value && !plans.value.length) {
+      return copy.value.changeNoPlans;
+    }
+    if (!changingPlan.value && !options.value.length) {
+      return copy.value.changeNoOptions;
+    }
+    if (targetPlan.value && !periods.value.length) {
+      return copy.value.changeNoPeriods;
+    }
+
+    return '';
+  });
+  const after          = computed(() => {
+    const known      = refund.value !== undefined;
+    const forPlan    = known
+      ? copy.value.changeAfterPlanRefund
+      : copy.value.changeAfterPlan;
+    const forOption  = known
+      ? copy.value.changeAfterOptionRefund
+      : copy.value.changeAfterOption;
+    const template   = changingPlan.value ? forPlan : forOption;
+
+    return template
+      .replace('{plan}', planName(targetPlan.value))
+      .replace(
+        '{option}',
+        targetOption.value
+          ? optionName(targetOption.value)
+          : copy.value.changeNoOption,
+      )
+      .replace('{period}', chosen.value?.length || '—')
+      .replace('{refund}', money(refund.value))
+      .replace('{price}', money(subscriptionChangeTotal(chosen.value)));
+  });
+  const renewalNote    = computed(() => {
+    if (!renewal.value) {
+      return copy.value.renewalEffectOff;
+    }
+
+    return copy.value.renewalEffectOn
+      .replace('{price}', renewal.value.price)
+      .replace('{days}', renewal.value.length);
+  });
+  const hasFieldError  = computed(() =>
+    Object.entries(props.fields ?? {}).some(
+      ([name, message]) => name !== '__all__' && Boolean(message),
+    ),
+  );
+  const ready          = computed(() => {
+    if (!props.subscription || !chosen.value) {
+      return false;
+    }
+    if (changingPlan.value && !targetPlan.value) {
+      return false;
+    }
+    /*
+     * The option change needs an option the subscription is not on yet: the
+     * backend refuses a request that repeats the current one.
+     */
+    if (!changingPlan.value) {
+      return Boolean(
+        targetOption.value &&
+          targetOption.value.id !== props.subscription.option,
+      );
+    }
+
+    return !(options.value.length > 0 && !targetOption.value);
+  });
+  /*
+   * A failure that names a field is shown beside that field. The banner then
+   * carries only the general message of the response, or the host's own text
+   * when the request did not reach the storefront backend at all.
+   */
+  const generalError   = computed(
+    () => props.fields?.__all__ || (hasFieldError.value ? '' : props.error),
+  );
+  const submitLabel    = computed(() => {
+    if (props.pending) {
+      return copy.value.changePending;
+    }
+
+    return confirming.value
+      ? copy.value.changeSubmit
+      : copy.value.changeConfirm;
+  });
+  let opener: HTMLElement | undefined;
+  const pageScroll     = createPageScrollLock();
+
+  function money(amount: number | undefined) {
+    return tariffMoney(amount, selectionStore.localeCode, selectionStore.currentCurrency);
+  }
+  function planName(item: ISubscribeTariff | undefined) {
+    return (
+      getAvailableNestedValueFromObject(
+        item?.locales,
+        selectionStore.localeCode,
+        'tariff_name',
+      ) || copy.value.manage
+    );
+  }
+  function optionName(item: ISubscribeTariffOption | undefined) {
+    return (
+      getAvailableNestedValueFromObject(
+        item?.locale,
+        selectionStore.localeCode,
+        'option_name',
+      ) || copy.value.optionPrice
+    );
+  }
+  function fieldError(name: string) {
+    return props.fields?.[name] || '';
+  }
+  // The window is open while it has a subscription. The element with the
+  // focus outside the window is its opener: a modal window gives it the
+  // focus back when it closes. An open window that switches between the
+  // modal and the inline mode leaves the focus on the field the visitor is
+  // in.
+  async function syncDialog() {
+    await nextTick();
+    const element   = dialog.value;
+
+    if (!element) {
+      return;
+    }
+    if (!props.subscription) {
+      element.close();
+      if (pageScroll.locked) {
+        pageScroll.unlock();
+        restoreFocus(opener);
+      }
+
+      return;
+    }
+
+    const switching = element.open && pageScroll.locked !== props.modal;
+    const focused   = focusedElement();
+    const inside    =
+      focused && element.contains(focused) ? focused : undefined;
+
+    if (!inside) {
+      opener = focused;
+    }
+    if (element.open) {
+      element.close();
+    }
+    if (props.modal) {
+      pageScroll.lock();
+      element.showModal();
+    } else {
+      // The page scrolls again once the window leaves the modal mode.
+      // Opened by its attribute, not show(): an inline dialog leaves focus
+      // where it is.
+      pageScroll.unlock();
+      element.setAttribute('open', '');
+    }
+    if (switching) {
+      restoreFocus(inside, { reveal: true });
+    }
+  }
+  /*
+   * A plan change keeps the service option the subscription runs on when the
+   * selected plan also sells it, so the customer only picks what is really
+   * changing. An option change starts on another option instead, because the
+   * backend refuses a request that repeats the current one.
+   */
+  function startFrom(plan: ISubscribeTariff | undefined) {
+    const current   = props.subscription?.option;
+    const available = plan?.options ?? [];
+    const kept      = available.find((item) => item.id === current);
+    const selected  = changingPlan.value
+      ? kept ?? available[0]
+      : available.find((item) => item.id !== current) ?? available[0];
+
+    optionChoice.value = selected ? String(selected.id) : '';
+  }
+  watch(
+    () => [props.subscription?.id, props.mode],
+    () => {
+      const first        = changingPlan.value ? plans.value[0] : props.plan;
+
+      planChoice.value   = changingPlan.value && first ? String(first.id) : '';
+      promo.value        = '';
+      confirming.value   = false;
+      startFrom(first);
+      void syncDialog();
+    },
+    { immediate: true },
+  );
+  /*
+   * Changing the plan or the option changes which paid periods can be bought,
+   * so the period and the automatic renewal are selected again from the
+   * periods of the new pair instead of keeping an identifier the backend
+   * would refuse.
+   */
+  watch(
+    () => [planChoice.value, optionChoice.value],
+    () => {
+      if (changingPlan.value) {
+        const plan = plans.value.find(
+          (item) => String(item.id) === planChoice.value,
+        );
+
+        if (plan && !plan.options.some(
+          (item) => String(item.id) === optionChoice.value,
+        )) {
+          startFrom(plan);
+        }
+      }
+    },
+  );
+  watch(
+    () => periods.value.map((choice) => choice.id).join(','),
+    () => {
+      const current       = props.subscription?.renew_period?.days;
+      const matching      = periods.value.find(
+        (choice) => choice.days === current,
+      );
+      const preselected   = matching ?? periods.value[0];
+
+      period.value        = preselected?.id;
+      // Automatic renewal stays as it was: off stays off, on moves to the
+      // same length of the new plan, else to its first period.
+      renewalChoice.value = current && preselected ? String(preselected.id) : '';
+    },
+    { immediate: true },
+  );
+  /*
+   * A failure that names a field is answered in the form, not on the
+   * confirmation step, so the dialog steps back to the fields and shows the
+   * message beside the one the storefront backend refused.
+   */
+  watch(hasFieldError, (present) => {
+    if (present) {
+      confirming.value = false;
+    }
+  });
+  // The host can switch between the modal and the inline window while it is
+  // open.
+  watch(() => props.modal, syncDialog);
+  onMounted(syncDialog);
+  onBeforeUnmount(() => {
+    dialog.value?.close();
+    if (pageScroll.locked) {
+      pageScroll.unlock();
+      restoreFocus(opener);
+    }
+  });
+  function close() {
+    if (!props.pending) {
+      emit('close');
+    }
+  }
+  function submit() {
+    const subscription = props.subscription;
+
+    if (props.pending || !ready.value || !subscription || !chosen.value) {
+      return;
+    }
+    if (!confirming.value) {
+      confirming.value = true;
+
+      return;
+    }
+
+    const common = {
+      existed_subscription: subscription.id,
+      period: chosen.value.id,
+      ...(renewal.value ? { renew_period: renewal.value.id } : {}),
+      ...(promo.value.trim() ? { attach_issue: promo.value.trim() } : {}),
+    };
+
+    if (changingPlan.value) {
+      emit('submit', {
+        ...common,
+        new_tariff: targetPlan.value!.id,
+        ...(targetOption.value ? { option: targetOption.value.id } : {}),
+      });
+
+      return;
+    }
+    emit('submit', { ...common, option: targetOption.value!.id });
+  }
+  function back() {
+    if (confirming.value) {
+      confirming.value = false;
+
+      return;
+    }
+    close();
+  }
+  function backdrop(event: MouseEvent) {
+    if (!props.modal || event.target !== dialog.value) {
+      return;
+    }
+
+    const bounds = dialog.value!.getBoundingClientRect();
+
+    if (
+      event.clientX < bounds.left ||
+      event.clientX > bounds.right ||
+      event.clientY < bounds.top ||
+      event.clientY > bounds.bottom
+    ) {
+      close();
+    }
+  }
+</script>
+<template>
+  <dialog
+    data-stable-modal="wide"
+    ref="dialog"
+    :aria-labelledby="`${id}-title`"
+    :aria-describedby="`${id}-summary`"
+    :aria-busy="pending"
+    :class="
+      modal
+        ? 'm-auto w-[880px] max-h-[calc(100dvh-32px)] max-w-[calc(100vw-32px)]'
+        : 'relative m-0 w-full max-w-full'
+    "
+    class="
+      @container box-border overflow-auto rounded-none p-0
+      border border-solid border-orionplace-border
+      bg-orionplace-surface font-orionplace text-orionplace-text
+      backdrop:bg-black/35 backdrop:backdrop-blur-[2px]
+    "
+    data-subscription-change-dialog
+    @cancel.prevent="close"
+    @keydown.esc.stop
+    @click="backdrop"
+  >
+    <form
+      class="grid gap-5 p-5 @min-[600px]:p-6"
+      @submit.prevent="submit"
+    >
+      <header class="flex items-start justify-between gap-4">
+        <div class="grid gap-1">
+          <p class="op-feature-muted m-0">
+            {{ changingPlan ? currentPlan : currentOption }}
+          </p>
+          <h2
+            :id="`${id}-title`"
+            class="m-0 text-lg uppercase tracking-[0.04em] @min-[600px]:text-2xl"
+          >
+            {{ changingPlan ? copy.changePlanTitle : copy.changeOptionTitle }}
+          </h2>
+        </div>
+        <button
+          type="button"
+          :disabled="pending"
+          :aria-label="copy.close"
+          class="
+            grid h-10 w-10 shrink-0 place-items-center
+            cursor-pointer border-0 bg-transparent p-0
+            text-2xl text-orionplace-text
+            outline-none transition-colors motion-reduce:transition-none
+            hover:bg-orionplace-hover focus-visible:bg-orionplace-hover
+            disabled:cursor-wait
+          "
+          @click="close"
+        >
+          ×
+        </button>
+      </header>
+      <!--
+        Two columns from 48rem: the choices on the left, the target plan and
+        the amounts on the right, so the dialog fits a laptop screen without
+        scrolling. Narrow screens stack them and scroll inside the dialog.
+      -->
+      <div
+        class="
+          grid min-w-0 gap-5
+          @min-[720px]:grid-cols-[minmax(0,1fr)_minmax(0,320px)] @min-[720px]:gap-6
+        "
+      >
+        <div class="grid min-w-0 content-start gap-4">
+          <p
+            :id="`${id}-summary`"
+            class="m-0 text-sm leading-6 text-orionplace-muted"
+          >
+            {{
+              changingPlan ? copy.changePlanSummary : copy.changeOptionSummary
+            }}
+          </p>
+          <p
+            v-if="unavailable"
+            class="op-notice op-notice-attention m-0"
+            role="status"
+          >
+            {{ unavailable }}
+          </p>
+          <div
+            v-if="changingPlan && !confirming && plans.length"
+            class="grid gap-2"
+          >
+            <OrionplaceSelect
+              v-model="planChoice"
+              :options="planOptions"
+              :label="copy.changePlanField"
+              :disabled="pending"
+            />
+            <span
+              v-if="fieldError('new_tariff')"
+              role="alert"
+              class="op-feature-error"
+            >
+              {{ fieldError('new_tariff') }}
+            </span>
+          </div>
+          <!--
+            A hidden single option still shows the backend's message about
+            it, so the customer learns why the change was refused.
+          -->
+          <div
+            v-if="!confirming && (showOptions || fieldError('option'))"
+            class="grid gap-2"
+          >
+            <OrionplaceSelect
+              v-if="showOptions"
+              v-model="optionChoice"
+              :options="optionOptions"
+              :label="copy.changeOptionField"
+              :disabled="pending"
+            />
+            <span
+              v-if="fieldError('option')"
+              role="alert"
+              class="op-feature-error"
+            >
+              {{ fieldError('option') }}
+            </span>
+          </div>
+          <fieldset
+            v-if="!confirming && showPeriods"
+            class="m-0 grid gap-2 border-0 p-0 @min-[600px]:grid-cols-2"
+          >
+            <legend class="op-feature-muted mb-2 p-0">{{ copy.period }}</legend>
+            <label
+              v-for="choice in periods"
+              :key="choice.id"
+              class="
+                flex cursor-pointer items-baseline justify-between gap-3
+                px-3 py-2
+                border border-solid border-orionplace-border
+                transition-colors motion-reduce:transition-none
+                hover:bg-orionplace-hover
+                has-[:focus-visible]:bg-orionplace-hover
+                has-[:checked]:border-orionplace-text
+              "
+            >
+              <span class="flex items-baseline gap-2">
+                <input
+                  v-model="period"
+                  type="radio"
+                  name="period"
+                  :value="choice.id"
+                  :disabled="pending"
+                  class="accent-orionplace-accent"
+                />
+                <span class="text-sm">{{ choice.length }}</span>
+              </span>
+              <span class="text-sm tabular-nums">{{ choice.price }}</span>
+            </label>
+          </fieldset>
+          <span
+            v-if="!confirming && fieldError('period')"
+            role="alert"
+            class="op-feature-error"
+          >
+            {{ fieldError('period') }}
+          </span>
+          <label
+            v-if="!confirming && periods.length"
+            class="op-feature-label"
+          >
+            <span>{{ copy.promo }}</span>
+            <input
+              v-model="promo"
+              class="op-feature-input"
+              type="text"
+              maxlength="20"
+              autocomplete="off"
+              :placeholder="copy.promoHint"
+              :disabled="pending"
+            />
+            <span
+              v-if="fieldError('attach_issue')"
+              role="alert"
+              class="op-feature-error"
+            >
+              {{ fieldError('attach_issue') }}
+            </span>
+          </label>
+          <div
+            v-if="!confirming && periods.length"
+            class="grid gap-2"
+          >
+            <OrionplaceSelect
+              v-model="renewalChoice"
+              :options="renewOptions"
+              :label="copy.renewalSettings"
+              :disabled="pending"
+            />
+            <span class="op-feature-muted leading-5">{{ renewalNote }}</span>
+            <span
+              v-if="fieldError('renew_period')"
+              role="alert"
+              class="op-feature-error"
+            >
+              {{ fieldError('renew_period') }}
+            </span>
+          </div>
+        </div>
+        <aside
+          class="grid min-w-0 content-start gap-4"
+          data-subscription-change-plan
+        >
+          <SubscriptionPlanSummary
+            :plan="targetPlan"
+            class="p-4 border border-solid border-orionplace-border"
+          />
+          <dl
+            v-if="periods.length"
+            class="
+              m-0 grid gap-3 p-4 text-sm
+              bg-orionplace-muted-surface
+            "
+          >
+            <div class="flex justify-between gap-3">
+              <dt>{{ copy.period }}</dt>
+              <dd class="m-0">{{ chosen?.length || '—' }}</dd>
+            </div>
+            <div class="flex justify-between gap-3">
+              <dt>{{ copy.planPrice }}</dt>
+              <dd class="m-0 tabular-nums">{{ chosen?.price || '—' }}</dd>
+            </div>
+            <div
+              v-if="targetOption"
+              class="flex justify-between gap-3"
+            >
+              <dt>{{ optionName(targetOption) }}</dt>
+              <dd class="m-0 tabular-nums">
+                {{ money(chosen?.optionAmount) }}
+              </dd>
+            </div>
+            <div class="flex justify-between gap-3">
+              <dt>
+                {{ copy.changeRefund
+                }}<OrionplaceInfoHint
+                  :label="copy.changeRefund"
+                  :text="
+                    refund === undefined
+                      ? copy.changeRefundUnknown
+                      : copy.changeRefundHint
+                  "
+                  class="ml-1"
+                />
+              </dt>
+              <dd class="m-0 tabular-nums">{{ money(refund) }}</dd>
+            </div>
+            <div
+              class="
+                flex justify-between gap-3 pt-3
+                border-0 border-t border-solid border-orionplace-border
+              "
+            >
+              <dt>{{ copy.balance }}</dt>
+              <dd class="m-0 grid justify-items-end gap-1">
+                <span class="tabular-nums">{{ money(balance) }}</span>
+                <NuxtLink
+                  v-if="low"
+                  class="
+                    w-fit pb-0.5 text-xs uppercase tracking-[0.08em]
+                    text-orionplace-text no-underline
+                    border-0 border-b border-solid border-current
+                    outline-none hover:opacity-70 focus-visible:opacity-70
+                  "
+                  :to="{ path: '/wallet', query: { locale: selectionStore.localeCode } }"
+                >
+                  {{ copy.topUp }}
+                </NuxtLink>
+              </dd>
+            </div>
+            <div
+              v-if="available !== undefined"
+              class="flex justify-between gap-3"
+            >
+              <dt>{{ copy.changeAvailable }}</dt>
+              <dd class="m-0 tabular-nums">{{ money(available) }}</dd>
+            </div>
+          </dl>
+        </aside>
+      </div>
+      <p
+        v-if="confirming"
+        class="op-notice m-0"
+        role="status"
+      >
+        {{ after }}
+      </p>
+      <p
+        v-if="low"
+        class="op-notice op-notice-attention m-0"
+      >
+        {{ lowNotice }}
+      </p>
+      <p
+        v-if="generalError"
+        role="alert"
+        class="op-notice op-notice-error m-0 whitespace-pre-line"
+      >
+        {{ generalError }}
+      </p>
+      <div class="grid grid-cols-[auto_1fr] gap-2">
+        <button
+          type="button"
+          :disabled="pending"
+          class="
+            h-11 px-6
+            cursor-pointer border border-solid border-orionplace-text
+            bg-transparent
+            text-xs uppercase tracking-[0.08em] text-orionplace-text
+            [font-family:inherit]
+            outline-none transition-colors motion-reduce:transition-none
+            hover:bg-orionplace-hover focus-visible:bg-orionplace-hover
+            disabled:cursor-wait
+          "
+          @click="back"
+        >
+          {{ confirming ? copy.cancel : copy.close }}
+        </button>
+        <button
+          type="submit"
+          :disabled="pending || !ready"
+          class="
+            flex h-11 items-center justify-center gap-2 px-6
+            cursor-pointer border border-solid border-orionplace-accent
+            bg-orionplace-accent
+            text-xs uppercase tracking-[0.08em] text-orionplace-surface
+            [font-family:inherit]
+            outline-none transition-opacity motion-reduce:transition-none
+            hover:opacity-85 focus-visible:opacity-85
+            disabled:cursor-not-allowed disabled:opacity-40
+          "
+        >
+          <span
+            v-if="pending"
+            aria-hidden="true"
+            class="
+              h-4 w-4 animate-spin rounded-full
+              border-2 border-solid border-current border-t-transparent
+              motion-reduce:animate-none
+            "
+          />
+          {{ submitLabel }}
+        </button>
+      </div>
+    </form>
+  </dialog>
+</template>