@occluze/tether 0.6.8 → 0.7.0

package/src/account/{page-events.js → page-events.ts}

@@ -3,7 +3,7 @@
  * actions and return requests. Each change marks its form or row busy (`aria-busy`, `is-busy`), then sets
  * `tether-form-state` to `saved` or `error` with Shopify's message in `tether-form-error`.
  */
-import { attr, get, qsa, sel, setText } from '../dom.js';
+import { attr, get, qsa, sel, setText } from '../dom.ts';
 import {
   saveAddress,
   deleteAddress,
@@ -11,56 +11,39 @@ import {
   requestReturn,
   updateProfile,
   pagesContext,
-} from './operations.js';
-import { renderAddresses, shownAddress } from './addresses-view.js';
-import { renderSubscriptions } from './subscriptions-view.js';
-import { renderOrder } from './order-page.js';
-import { TetherError } from '../client.js';
-/** @import { ReturnLine } from './operations.js' */
-/** @import { SubscriptionAction } from '../../server/src/shared/account-ops.js' */
+} from './operations.ts';
+import type { ReturnLine } from './operations.ts';
+import { renderAddresses, shownAddress } from './addresses-view.ts';
+import { renderSubscriptions } from './subscriptions-view.ts';
+import { renderOrder } from './order-page.ts';
+import { TetherError } from '../client.ts';
+import type { SubscriptionAction } from '../../server/src/shared/account-routes.ts';
 
-/** @type {readonly SubscriptionAction[]} */
-const SUBSCRIPTION_ACTIONS = ['pause', 'resume', 'skip', 'unskip', 'cancel'];
+const SUBSCRIPTION_ACTIONS: readonly SubscriptionAction[] = ['pause', 'resume', 'skip', 'unskip', 'cancel'];
 
-/**
- * @param {string | null} value
- * @returns {value is SubscriptionAction}
- */
-const isSubscriptionAction = (value) => SUBSCRIPTION_ACTIONS.some((action) => action === value);
+const isSubscriptionAction = (value: string | null): value is SubscriptionAction =>
+  SUBSCRIPTION_ACTIONS.some((action) => action === value);
 
-/**
- * @param {Element} el
- * @returns {el is HTMLInputElement}
- */
-const isInput = (el) => el.tagName === 'INPUT';
+const isField = (el: Element): el is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement =>
+  el instanceof window.HTMLInputElement ||
+  el instanceof window.HTMLSelectElement ||
+  el instanceof window.HTMLTextAreaElement;
 
-/**
- * @param {Element} el
- * @returns {el is HTMLFormElement}
- */
-const isForm = (el) => el.tagName === 'FORM';
+const isForm = (el: Element): el is HTMLFormElement => el instanceof window.HTMLFormElement;
 
-/**
- * @param {HTMLFormElement} form
- * @returns {Record<string, string>} The form's text fields by name.
- */
-function fieldsOf(form) {
-  /** @type {Record<string, string>} */
-  const fields = {};
+/** @returns The form's text fields by name. */
+function fieldsOf(form: HTMLFormElement): Record<string, string> {
+  const fields: Record<string, string> = {};
   for (const field of form.elements) {
-    if (!isInput(field) && field.tagName !== 'SELECT' && field.tagName !== 'TEXTAREA') continue;
-    const input = /** @type {HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement} */ (field);
-    if (!input.name || input.type === 'submit' || input.type === 'button' || input.type === 'checkbox') continue;
-    fields[input.name] = input.value;
+    if (!isField(field)) continue;
+    if (!field.name || field.type === 'submit' || field.type === 'button' || field.type === 'checkbox') continue;
+    fields[field.name] = field.value;
   }
   return fields;
 }
 
-/**
- * @param {unknown} error
- * @returns {string} What to tell the customer: Shopify's own messages when it refused the input.
- */
-function messageOf(error) {
+/** @returns What to tell the customer: Shopify's own messages when it refused the input. */
+function customerMessage(error: unknown): string {
   const userErrors = error instanceof TetherError ? (error.userErrors ?? []) : [];
   const message = userErrors.map((userError) => userError.message).join(' ');
   if (message) return message;
@@ -71,12 +54,8 @@ function messageOf(error) {
 /**
  * Runs one change for `el`; a second one while it is on its way (Enter, a double click) is ignored. The failure is
  * shown in `el` (`tether-form-error`), the place the customer looks.
- *
- * @param {HTMLElement} el
- * @param {() => Promise<void>} change
- * @returns {Promise<'saved' | 'error' | 'busy'>}
  */
-async function act(el, change) {
+async function act(el: HTMLElement, change: () => Promise<void>): Promise<'saved' | 'error' | 'busy'> {
   if (el.getAttribute('aria-busy') === 'true') return 'busy';
   el.classList.add('is-busy');
   el.setAttribute('aria-busy', 'true');
@@ -92,7 +71,7 @@ async function act(el, change) {
   } catch (error) {
     el.setAttribute(attr('form-state'), 'error');
     errorBoxes.forEach((box) => {
-      setText(box, messageOf(error));
+      setText(box, customerMessage(error));
     });
     return 'error';
   } finally {
@@ -101,23 +80,18 @@ async function act(el, change) {
   }
 }
 
-/**
- * @param {Element} button
- * @returns {boolean} True when the button asks no `tether-confirm` question, or the visitor agreed.
- */
-const confirmed = (button) => {
+/** @returns True when the button asks no `tether-confirm` question, or the visitor agreed. */
+const confirmed = (button: Element): boolean => {
   const question = get(button, 'confirm');
   return !question || window.confirm(question);
 };
 
-/** @param {HTMLFormElement} form */
-const addressFormReset = (form) => {
+const addressFormReset = (form: HTMLFormElement): void => {
   form.reset();
   delete form.dataset['tetherAddressId'];
 };
 
-/** @param {SubmitEvent} event */
-function onSubmit(event) {
+function onSubmit(event: SubmitEvent): void {
   const form = event.target;
   if (!(form instanceof window.HTMLFormElement)) return;
   if (form.matches(sel('profile-form'))) {
@@ -139,34 +113,27 @@ function onSubmit(event) {
   }
 }
 
-/**
- * Fills the address form with a shown address, to edit it.
- *
- * @param {string} id
- */
-function editAddress(id) {
+/** Fills the address form with a shown address, to edit it. */
+function editAddress(id: string): void {
   const address = shownAddress(id);
   const form = document.querySelector(sel('address-form'));
   if (!address || !form || !isForm(form)) return;
   form.dataset['tetherAddressId'] = address.id;
+  const valuesByName: Readonly<Record<string, unknown>> = { ...address };
   for (const field of form.elements) {
-    if (!isInput(field) && field.tagName !== 'SELECT' && field.tagName !== 'TEXTAREA') continue;
-    const input = /** @type {HTMLInputElement} */ (field);
-    if (input.name === 'isDefault') input.checked = address.isDefault;
-    else if (input.name && Object.hasOwn(address, input.name)) {
-      const value = Object.entries(address).find(([key]) => key === input.name)?.[1];
-      input.value = typeof value === 'string' ? value : '';
+    if (!isField(field)) continue;
+    if (field.name === 'isDefault') {
+      if (field instanceof window.HTMLInputElement) field.checked = address.isDefault;
+    } else if (field.name && Object.hasOwn(valuesByName, field.name)) {
+      const value = valuesByName[field.name];
+      field.value = typeof value === 'string' ? value : '';
     }
   }
   form.scrollIntoView({ block: 'nearest' });
 }
 
-/**
- * @param {MouseEvent} event
- * @param {Element} target
- * @returns {boolean} True when the click was on an address button.
- */
-function onAddressClick(event, target) {
+/** @returns True when the click was on an address button. */
+function onAddressClick(event: MouseEvent, target: Element): boolean {
   const row = target.closest('[data-tether-address]');
   const id = row instanceof window.HTMLElement ? row.dataset['tetherAddress'] : undefined;
   if (target.closest(sel('address-new'))) {
@@ -198,8 +165,8 @@ function onAddressClick(event, target) {
   return true;
 }
 
-/** @param {HTMLElement} button A `tether-subscription-action` button. */
-function onSubscriptionAction(button) {
+/** @param button A `tether-subscription-action` button. */
+function onSubscriptionAction(button: HTMLElement): void {
   const row = button.closest('[data-tether-subscription]');
   const action = get(button, 'subscription-action');
   const disabled = ('disabled' in button && button.disabled === true) || button.classList.contains('is-disabled');
@@ -220,18 +187,17 @@ function onSubscriptionAction(button) {
   });
 }
 
-/**
- * @param {HTMLElement} row A line row of the order page.
- * @returns {ReturnLine}
- */
-function returnLineOf(row) {
+/** @param row A line row of the order page. */
+function returnLineOf(row: HTMLElement): ReturnLine {
   const quantity = row.querySelector(sel('return-quantity'));
   const reason = row.querySelector(sel('return-reason'));
   const note = row.querySelector(sel('return-note'));
-  /** @param {Element | null} field */
-  const valueOf = (field) => (field && 'value' in field && typeof field.value === 'string' ? field.value : '');
-  /** @type {ReturnLine} */
-  const line = { lineItemId: row.dataset['tetherLine'] ?? '', quantity: Number.parseInt(valueOf(quantity) || '0', 10) };
+  const valueOf = (field: Element | null) =>
+    field && 'value' in field && typeof field.value === 'string' ? field.value : '';
+  const line: ReturnLine = {
+    lineItemId: row.dataset['tetherLine'] ?? '',
+    quantity: Number.parseInt(valueOf(quantity) || '0', 10),
+  };
   const reasonId = valueOf(reason);
   if (reasonId) line.reasonId = reasonId;
   const noteText = valueOf(note);
@@ -239,8 +205,8 @@ function returnLineOf(row) {
   return line;
 }
 
-/** @param {HTMLElement} button A `tether-order-return` button. */
-function onReturnRequest(button) {
+/** @param button A `tether-order-return` button. */
+function onReturnRequest(button: HTMLElement): void {
   const scope = button.closest(sel('order'));
   if (!(scope instanceof window.HTMLElement)) return;
   const orderId = scope.dataset['tetherOrderId'];
@@ -256,8 +222,7 @@ function onReturnRequest(button) {
   });
 }
 
-/** @param {MouseEvent} event */
-function onClick(event) {
+function onClick(event: MouseEvent): void {
   const target = event.target;
   if (!(target instanceof window.Element)) return;
   if (onAddressClick(event, target)) return;
@@ -275,7 +240,7 @@ function onClick(event) {
 }
 
 /** Listens on the document once, for every account page rendered into it. */
-export function listenToPages() {
+export function listenToPages(): void {
   // Capture: before a router (Astro's ClientRouter) turns the submit into a navigation with the fields in the URL.
   document.addEventListener('submit', onSubmit, true);
   document.addEventListener('input', (event) => {

package/src/account/server-client.ts

@@ -0,0 +1,183 @@
+/**
+ * The browser's side of the Worker's account routes (`account.server`). The Worker holds the Shopify tokens, and
+ * this browser only a session cookie its scripts can't read; what it keeps itself is the "may be logged in" hint,
+ * which holds no secret. Storage throws in private mode and where the visitor blocks site data: the hint is then
+ * not kept, and only pages with account markup load the part.
+ */
+import { cfg } from '../config.ts';
+import { TetherError } from '../client.ts';
+import { Cart } from '../cart.ts';
+import { emit } from '../dom.ts';
+import { isRecord, textOrNull } from '../../server/src/shared/json.ts';
+import { messageOf } from '../../server/src/shared/error-message.ts';
+import { hintKey } from '../account-marks.ts';
+import { removeStored, setStored } from '../storage.ts';
+import { toAccountCustomer, toUserErrors } from './answers.ts';
+import type { AccountCustomer } from './answers.ts';
+
+/** The Worker's answer, or a 401: the session cookie is missing, has expired, or Shopify ended the login. */
+export type ServerAnswer = { kind: 'answer'; data: Record<string, unknown> } | { kind: 'logged-out' };
+type ServerLogin = { loggedIn: true; customer: AccountCustomer } | { loggedIn: false };
+export interface ServerRequest {
+  method?: 'GET' | 'POST';
+  body?: Record<string, unknown>;
+}
+
+/** The Worker's `/me` answer, until a change of the customer's data. */
+let known: ServerLogin | null = null;
+
+/**
+ * @returns The Worker's account routes, without a trailing slash. `account.server` is a full URL or a path on this
+ *   site.
+ * @throws {TetherError} `NOT_CONFIGURED` without `account.server`.
+ */
+function serverBase(): string {
+  const server = cfg.account?.server;
+  if (!server) {
+    throw new TetherError('Customer accounts need the Worker: set account.server', { code: 'NOT_CONFIGURED' });
+  }
+  return new URL(server, window.location.href).href.replace(/\/$/, '');
+}
+
+/**
+ * Keeps the hint that makes the core load the part on the next page; without storage it is not kept (see the file's
+ * comment).
+ */
+function setLoginHint(loggedIn: boolean): void {
+  if (loggedIn) setStored(hintKey(), '1');
+  else removeStored(hintKey());
+}
+
+/** @throws {TetherError} `NETWORK` when the request fails before an answer. */
+async function fetchFromWorker(url: string, init: RequestInit): Promise<Response> {
+  try {
+    return await fetch(url, init);
+  } catch (error) {
+    throw new TetherError(`Network error: ${messageOf(error)}`, {
+      code: 'NETWORK',
+    });
+  }
+}
+
+/** An error page that isn't JSON reads as an empty answer: the response's status then says what went wrong. */
+async function readJsonObjectOrEmpty(response: Response): Promise<Record<string, unknown>> {
+  let json: unknown;
+  try {
+    json = await response.json();
+  } catch {
+    return {};
+  }
+  return isRecord(json) ? json : {};
+}
+
+/**
+ * One request to the Worker, with the session cookie. A POST carries the header the Worker requires against
+ * cross-site forms.
+ *
+ * @throws {TetherError} `NOT_CONFIGURED` without `account.server`, `INVALID` for refused input, `HTTP_<status>` for
+ *   any other failure but a 401, with the Worker's `userErrors`; `NETWORK` when the Worker can't be reached.
+ */
+export async function serverFetch(path: string, { method = 'GET', body }: ServerRequest = {}): Promise<ServerAnswer> {
+  const init: RequestInit = { method, credentials: 'include' };
+  if (method === 'POST') init.headers = { 'Content-Type': 'application/json', 'X-Tether-Account': '1' };
+  if (body) init.body = JSON.stringify(body);
+  const response = await fetchFromWorker(`${serverBase()}${path}`, init);
+  if (response.status === 401) return { kind: 'logged-out' };
+  const data = await readJsonObjectOrEmpty(response);
+  if (!response.ok) {
+    const reason = textOrNull(data['error']) ?? String(response.status);
+    const userErrors = toUserErrors(data['userErrors']);
+    throw new TetherError(`Customer accounts: ${reason}`, {
+      status: response.status,
+      ...(userErrors.length > 0 && { userErrors }),
+      // The Worker marks refused input (a 400, or a 404 for a contract that isn't the customer's) with `code`.
+      ...(data['code'] === 'INVALID' && { code: 'INVALID' }),
+    });
+  }
+  return { kind: 'answer', data };
+}
+
+/**
+ * Who is logged in, asked once and then kept; the "may be logged in" hint follows the answer.
+ *
+ * @throws {TetherError} When the Worker can't be reached or fails: that says nothing about the login.
+ */
+export async function serverLogin(): Promise<ServerLogin> {
+  if (!known) {
+    const answer = await serverFetch('/me');
+    known =
+      answer.kind === 'answer' && answer.data['loggedIn'] === true
+        ? { loggedIn: true, customer: toAccountCustomer(answer.data['customer']) }
+        : { loggedIn: false };
+  }
+  setLoginHint(known.loggedIn);
+  return known;
+}
+
+/** @returns True when the Worker last said a customer is logged in. */
+export const isServerLoggedIn = (): boolean => known?.loggedIn === true;
+
+/** Asks the Worker again on the next `serverLogin()`, after a change of the customer's data. */
+export function forgetServerLogin(): void {
+  known = null;
+}
+
+/** Goes to the Worker's (or Shopify's) pages, through `account.navigate` when the site replaces the redirect. */
+function navigate(url: string): void {
+  const replacement = cfg.account?.navigate;
+  if (replacement) replacement(url);
+  else window.location.assign(url);
+}
+
+/**
+ * @param locale The caller's choice.
+ * @returns The language of Shopify's login page: the caller's, `account.locale`, else the site's; `''` for Shopify's
+ *   default.
+ */
+const loginLanguage = (locale: string | undefined): string =>
+  locale || cfg.account?.locale || (cfg.locale || '').split('-')[0] || '';
+
+/**
+ * To the Worker's login, which comes back to `returnTo` with `?account=<outcome>`. The cart is linked later, at
+ * checkout, through the Worker's protected `POST /cart`.
+ *
+ * @throws {TetherError} `NOT_CONFIGURED` without `account.server`.
+ */
+export function serverLoginRedirect({ returnTo, locale }: { returnTo: string; locale?: string | undefined }): void {
+  const url = new URL(`${serverBase()}/login`);
+  url.searchParams.set('returnTo', returnTo);
+  const language = loginLanguage(locale);
+  if (language) url.searchParams.set('locale', language);
+  if (cfg.country) url.searchParams.set('country', cfg.country.toUpperCase());
+  navigate(url.toString());
+}
+
+/**
+ * The logged-in customer's checkout, for `Cart.setCheckoutResolver`: the Worker links the cart to the customer and
+ * answers with its checkout URL.
+ *
+ * @returns `null` when nobody is logged in or the Worker linked no cart, so the cart's own checkout URL is used.
+ * @throws {TetherError} When the Worker fails; the cart reports it and checks out without the login.
+ */
+export async function serverCheckoutUrl(): Promise<string | null> {
+  const cartId = Cart.id();
+  if (!(await serverLogin()).loggedIn || !cartId) return null;
+  const answer = await serverFetch('/cart', { method: 'POST', body: { cartId } });
+  if (answer.kind === 'logged-out') return null;
+  return textOrNull(answer.data['checkoutUrl']);
+}
+
+/**
+ * Ends the session at the Worker, which also unlinks the cart, then goes on to Shopify's logout when the Worker says
+ * where. Sends `tether:account-logout`.
+ */
+export async function serverLogout(returnTo: string): Promise<'redirected' | 'stayed'> {
+  const answer = await serverFetch('/logout', { method: 'POST', body: { returnTo, cartId: Cart.id() } });
+  known = null;
+  setLoginHint(false);
+  emit('account-logout', {});
+  const logoutUrl = answer.kind === 'answer' ? textOrNull(answer.data['logoutUrl']) : null;
+  if (!logoutUrl) return 'stayed';
+  navigate(logoutUrl);
+  return 'redirected';
+}

package/src/account/{subscriptions-view.js → subscriptions-view.ts}

@@ -3,39 +3,14 @@
  * `subscriptions-empty` and `subscriptions-error`. Each row's `tether-subscription-show` conditions and action buttons
  * follow the contract's status and its next billing cycle.
  */
-import { reportError } from '../config.js';
-import { attr, formatMoney, get, qsa, repeat, sel, setImage, setText } from '../dom.js';
-import { bindsIn, enumText, ownValue, showIn } from './markup.js';
-import { subscriptions } from './operations.js';
-import { localDate } from '../account-links.js';
-/** @import { Money } from '../shopify-values.js' */
+import { reportError } from '../config.ts';
+import { attr, formatDate, formatMoney, get, qsa, repeat, sel, setImage, setText } from '../dom.ts';
+import { bindsIn, enumText, ownValue, showIn } from './markup.ts';
+import { subscriptions } from './operations.ts';
+import type { SubscriptionContract, SubscriptionLine } from './page-answers.ts';
 
-/**
- * @typedef {object} SubscriptionLine
- * @property {string} title
- * @property {string | null} variantTitle
- * @property {number} quantity
- * @property {Money} currentPrice
- * @property {Money | null} lineDiscountedPrice
- * @property {{ url: string, altText: string | null } | null} image
- */
-/**
- * @typedef {object} SubscriptionContract The subscriptions document in account-ops.js.
- * @property {string} id
- * @property {'ACTIVE' | 'PAUSED' | 'CANCELLED' | 'EXPIRED' | 'FAILED'} status
- * @property {string | null} nextBillingDate
- * @property {string} currencyCode
- * @property {Money | null} deliveryPrice
- * @property {{ interval: string | null, intervalCount: { count: number } | null } | null} deliveryPolicy
- * @property {{ nodes: SubscriptionLine[] }} lines
- * @property {{ nodes: { cycleIndex: number, skipped: boolean }[] }} upcomingBillingCycles
- */
-
-/**
- * @param {SubscriptionContract} contract
- * @returns {Record<string, boolean>} The row's `tether-subscription-show` conditions, `can-<action>` among them.
- */
-function conditionsOf(contract) {
+/** @returns The row's `tether-subscription-show` conditions, `can-<action>` among them. */
+function conditionsOf(contract: SubscriptionContract): Record<string, boolean> {
   const next = contract.upcomingBillingCycles.nodes[0];
   const status = contract.status;
   const active = status === 'ACTIVE';
@@ -54,42 +29,33 @@ function conditionsOf(contract) {
   };
 }
 
-/**
- * @param {SubscriptionContract} contract
- * @returns {string} `month`, `3 months`; `''` without a delivery policy.
- */
-function intervalText(contract) {
+/** @returns `month`, `3 months`; `''` without a delivery policy. */
+function intervalText(contract: SubscriptionContract): string {
   const unit = enumText(contract.deliveryPolicy?.interval);
   if (!unit) return '';
   const count = contract.deliveryPolicy?.intervalCount?.count ?? 1;
-  return count <= 1 ? unit : `${count} ${unit}s`;
+  return count <= 1 ? unit : `${String(count)} ${unit}s`;
 }
 
-/**
- * @param {SubscriptionContract} contract
- * @returns {Record<string, string>} The text of each `tether-subscription-bind` value.
- */
-function contractTexts(contract) {
+/** @returns The text of each `tether-subscription-bind` value. */
+function contractTexts(contract: SubscriptionContract): Record<string, string> {
   const lines = contract.lines.nodes;
   const total = lines.reduce((sum, line) => sum + Number.parseFloat(line.lineDiscountedPrice?.amount ?? '0'), 0);
   return {
     status: enumText(contract.status),
-    next: contract.nextBillingDate ? localDate(contract.nextBillingDate) : '',
+    next: formatDate(contract.nextBillingDate),
     interval: intervalText(contract),
-    products: lines.map((line) => `${line.quantity}× ${line.title}`).join(', '),
-    total: lines.length ? formatMoney({ amount: String(total), currencyCode: contract.currencyCode }) : '',
+    products: lines.map((line) => `${String(line.quantity)}× ${line.title ?? ''}`).join(', '),
+    total: formatMoney(
+      lines.length && contract.currencyCode ? { amount: String(total), currencyCode: contract.currencyCode } : null,
+    ),
     delivery: formatMoney(contract.deliveryPrice),
   };
 }
 
-/**
- * @param {HTMLElement} row
- * @param {SubscriptionLine} line
- */
-function fillLine(row, line) {
-  /** @type {Record<string, string>} */
-  const texts = {
-    title: line.title,
+function fillLine(row: HTMLElement, line: SubscriptionLine): void {
+  const texts: Record<string, string> = {
+    title: line.title ?? '',
     'variant-title': line.variantTitle || '',
     quantity: String(line.quantity),
     price: formatMoney(line.currentPrice),
@@ -97,7 +63,7 @@ function fillLine(row, line) {
   bindsIn(row, 'subscription-line').forEach((el) => {
     const key = get(el, 'subscription-line') ?? '';
     if (key === 'image') {
-      if (line.image) setImage(el, line.image.url, line.image.altText || line.title);
+      if (line.image) setImage(el, line.image.url, line.image.altText || line.title || '');
       return;
     }
     const text = ownValue(texts, key);
@@ -105,11 +71,7 @@ function fillLine(row, line) {
   });
 }
 
-/**
- * @param {HTMLElement} row
- * @param {SubscriptionContract} contract
- */
-function fillContract(row, contract) {
+function fillContract(row: HTMLElement, contract: SubscriptionContract): void {
   row.dataset['tetherSubscription'] = contract.id;
   row.setAttribute(attr('subscription-status'), enumText(contract.status));
   const texts = contractTexts(contract);
@@ -129,17 +91,12 @@ function fillContract(row, contract) {
   });
 }
 
-/**
- * Loads and renders the subscriptions. A failure is reported and shows `subscriptions-error`.
- *
- * @param {ParentNode} root
- */
-export async function renderSubscriptions(root) {
+/** Loads and renders the subscriptions. A failure is reported and shows `subscriptions-error`. */
+export async function renderSubscriptions(root: ParentNode): Promise<void> {
   const boxes = qsa(root, sel('subscriptions'));
   if (!boxes.length) return;
   showIn(root, 'show', { 'subscriptions-loading': true, 'subscriptions-empty': false });
-  /** @type {SubscriptionContract[]} */
-  let list;
+  let list: SubscriptionContract[];
   try {
     list = await subscriptions();
   } catch (error) {