@occluze/tether 0.6.8 → 0.7.1

package/src/account/page-events.js

@@ -1,288 +0,0 @@
-/**
- * What the visitor does on the account pages: the profile and address forms, the address buttons, subscription
- * 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 {
-  saveAddress,
-  deleteAddress,
-  subscriptionAction,
-  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' */
-
-/** @type {readonly SubscriptionAction[]} */
-const SUBSCRIPTION_ACTIONS = ['pause', 'resume', 'skip', 'unskip', 'cancel'];
-
-/**
- * @param {string | null} value
- * @returns {value is SubscriptionAction}
- */
-const isSubscriptionAction = (value) => SUBSCRIPTION_ACTIONS.some((action) => action === value);
-
-/**
- * @param {Element} el
- * @returns {el is HTMLInputElement}
- */
-const isInput = (el) => el.tagName === 'INPUT';
-
-/**
- * @param {Element} el
- * @returns {el is HTMLFormElement}
- */
-const isForm = (el) => el.tagName === 'FORM';
-
-/**
- * @param {HTMLFormElement} form
- * @returns {Record<string, string>} The form's text fields by name.
- */
-function fieldsOf(form) {
-  /** @type {Record<string, string>} */
-  const fields = {};
-  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;
-  }
-  return fields;
-}
-
-/**
- * @param {unknown} error
- * @returns {string} What to tell the customer: Shopify's own messages when it refused the input.
- */
-function messageOf(error) {
-  const userErrors = error instanceof TetherError ? (error.userErrors ?? []) : [];
-  const message = userErrors.map((userError) => userError.message).join(' ');
-  if (message) return message;
-  const text = error instanceof Error && error.message ? error.message : 'Something went wrong';
-  return text.replace(/^Customer accounts: /, '');
-}
-
-/**
- * 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) {
-  if (el.getAttribute('aria-busy') === 'true') return 'busy';
-  el.classList.add('is-busy');
-  el.setAttribute('aria-busy', 'true');
-  el.setAttribute(attr('form-state'), 'pending');
-  const errorBoxes = qsa(el, sel('form-error'));
-  errorBoxes.forEach((box) => {
-    setText(box, '');
-  });
-  try {
-    await change();
-    el.setAttribute(attr('form-state'), 'saved');
-    return 'saved';
-  } catch (error) {
-    el.setAttribute(attr('form-state'), 'error');
-    errorBoxes.forEach((box) => {
-      setText(box, messageOf(error));
-    });
-    return 'error';
-  } finally {
-    el.classList.remove('is-busy');
-    el.removeAttribute('aria-busy');
-  }
-}
-
-/**
- * @param {Element} button
- * @returns {boolean} True when the button asks no `tether-confirm` question, or the visitor agreed.
- */
-const confirmed = (button) => {
-  const question = get(button, 'confirm');
-  return !question || window.confirm(question);
-};
-
-/** @param {HTMLFormElement} form */
-const addressFormReset = (form) => {
-  form.reset();
-  delete form.dataset['tetherAddressId'];
-};
-
-/** @param {SubmitEvent} event */
-function onSubmit(event) {
-  const form = event.target;
-  if (!(form instanceof window.HTMLFormElement)) return;
-  if (form.matches(sel('profile-form'))) {
-    event.preventDefault();
-    void act(form, async () => {
-      await updateProfile(fieldsOf(form));
-      await pagesContext().bindCustomer(document);
-    });
-  } else if (form.matches(sel('address-form'))) {
-    event.preventDefault();
-    const id = form.dataset['tetherAddressId'];
-    const box = form.elements.namedItem('isDefault');
-    const isDefault = box instanceof window.HTMLInputElement && box.checked;
-    void act(form, async () => {
-      await saveAddress(fieldsOf(form), { id, isDefault });
-      addressFormReset(form);
-      await renderAddresses(document);
-    });
-  }
-}
-
-/**
- * Fills the address form with a shown address, to edit it.
- *
- * @param {string} id
- */
-function editAddress(id) {
-  const address = shownAddress(id);
-  const form = document.querySelector(sel('address-form'));
-  if (!address || !form || !isForm(form)) return;
-  form.dataset['tetherAddressId'] = address.id;
-  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 : '';
-    }
-  }
-  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) {
-  const row = target.closest('[data-tether-address]');
-  const id = row instanceof window.HTMLElement ? row.dataset['tetherAddress'] : undefined;
-  if (target.closest(sel('address-new'))) {
-    const form = document.querySelector(sel('address-form'));
-    if (form && isForm(form)) addressFormReset(form);
-    return true;
-  }
-  if (!(row instanceof window.HTMLElement) || !id) return false;
-  const deleteButton = target.closest(sel('address-delete'));
-  if (deleteButton) {
-    event.preventDefault();
-    if (!confirmed(deleteButton)) return true;
-    void act(row, async () => {
-      await deleteAddress(id);
-      await renderAddresses(document);
-    });
-  } else if (target.closest(sel('address-default'))) {
-    event.preventDefault();
-    void act(row, async () => {
-      await saveAddress(null, { id, isDefault: true });
-      await renderAddresses(document);
-    });
-  } else if (target.closest(sel('address-edit'))) {
-    event.preventDefault();
-    editAddress(id);
-  } else {
-    return false;
-  }
-  return true;
-}
-
-/** @param {HTMLElement} button A `tether-subscription-action` button. */
-function onSubscriptionAction(button) {
-  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');
-  if (!(row instanceof window.HTMLElement) || !isSubscriptionAction(action) || disabled || !confirmed(button)) return;
-  const id = row.dataset['tetherSubscription'] ?? '';
-  row.setAttribute(attr('subscription-state'), 'pending');
-  void act(row, async () => {
-    await subscriptionAction(id, action);
-    await renderSubscriptions(document);
-  }).then((outcome) => {
-    const state = outcome === 'error' ? 'error' : 'done';
-    // The re-render may have replaced the row: mark the one that shows this subscription now.
-    qsa(document, '[data-tether-subscription]')
-      .filter((candidate) => candidate === row || candidate.dataset['tetherSubscription'] === id)
-      .forEach((candidate) => {
-        candidate.setAttribute(attr('subscription-state'), state);
-      });
-  });
-}
-
-/**
- * @param {HTMLElement} row A line row of the order page.
- * @returns {ReturnLine}
- */
-function returnLineOf(row) {
-  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 reasonId = valueOf(reason);
-  if (reasonId) line.reasonId = reasonId;
-  const noteText = valueOf(note);
-  if (noteText) line.note = noteText;
-  return line;
-}
-
-/** @param {HTMLElement} button A `tether-order-return` button. */
-function onReturnRequest(button) {
-  const scope = button.closest(sel('order'));
-  if (!(scope instanceof window.HTMLElement)) return;
-  const orderId = scope.dataset['tetherOrderId'];
-  if (!orderId) return;
-  const lines = qsa(scope, '[data-tether-line]')
-    .map(returnLineOf)
-    .filter((line) => line.quantity > 0);
-  if (!lines.length || !confirmed(button)) return;
-  void act(scope, async () => {
-    await requestReturn(orderId, lines);
-    scope.dataset['tetherReturned'] = '1';
-    await renderOrder(scope);
-  });
-}
-
-/** @param {MouseEvent} event */
-function onClick(event) {
-  const target = event.target;
-  if (!(target instanceof window.Element)) return;
-  if (onAddressClick(event, target)) return;
-  const subscriptionButton = target.closest(sel('subscription-action'));
-  if (subscriptionButton instanceof window.HTMLElement) {
-    event.preventDefault();
-    onSubscriptionAction(subscriptionButton);
-    return;
-  }
-  const returnButton = target.closest(sel('order-return'));
-  if (returnButton instanceof window.HTMLElement) {
-    event.preventDefault();
-    onReturnRequest(returnButton);
-  }
-}
-
-/** Listens on the document once, for every account page rendered into it. */
-export function listenToPages() {
-  // 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) => {
-    const target = event.target;
-    if (target instanceof window.HTMLElement && target.closest(sel('profile-form'))) {
-      target.dataset['tetherTouched'] = '1';
-    }
-  });
-  document.addEventListener('click', onClick);
-}

package/src/account/server-client.js

@@ -1,172 +0,0 @@
-/**
- * Server mode (`account.server`): the site's Worker holds the Shopify tokens, and this browser only a session cookie
- * its scripts can't read. This module is the browser's side of the Worker's account routes.
- */
-import { cfg } from '../config.js';
-import { TetherError } from '../client.js';
-import { Cart } from '../cart.js';
-import { emit } from '../dom.js';
-import {
-  isRecord,
-  loginCountry,
-  loginLanguage,
-  navigate,
-  readJsonObjectOrEmpty,
-  setLoginHint,
-  textOrNull,
-} from './shared.js';
-/** @import { UserError } from '../client.js' */
-
-/**
- * @typedef {{ kind: 'answer', data: Record<string, unknown> } | { kind: 'logged-out' }} ServerAnswer The Worker's
- *   answer, or a 401: the session cookie is missing, has expired, or Shopify ended the login.
- */
-/**
- * @typedef {object} ServerCustomer The profile the Worker's `/me` sends.
- * @property {string | null} firstName
- * @property {string | null} lastName
- * @property {string | null} displayName
- * @property {string | null} email
- * @property {string[] | null} address The default address, one line per entry.
- */
-/** @typedef {{ loggedIn: true, customer: ServerCustomer } | { loggedIn: false }} ServerLogin */
-/** @typedef {{ method?: 'GET' | 'POST', body?: Record<string, unknown> }} ServerRequest */
-
-/** @type {ServerLogin | null} The Worker's `/me` answer, until a change of the customer's data. */
-let known = null;
-
-/**
- * @returns {string} The Worker's account routes, without a trailing slash; `''` in browser mode. `account.server` is a
- *   full URL or a path on this site.
- */
-export function serverBase() {
-  const server = cfg.account?.server;
-  if (!server) return '';
-  return new URL(server, window.location.href).href.replace(/\/$/, '');
-}
-
-/**
- * One request to the Worker, with the session cookie. A POST carries the header the Worker requires against
- * cross-site forms.
- *
- * @param {string} path
- * @param {ServerRequest} [request]
- * @returns {Promise<ServerAnswer>}
- * @throws {TetherError} `HTTP_<status>` for any failure but a 401, with the Worker's `userErrors`.
- */
-export async function serverFetch(path, { method = 'GET', body } = {}) {
-  /** @type {RequestInit} */
-  const init = { 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 fetch(`${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);
-    /** @type {TetherError['userErrors']} */
-    const userErrors = Array.isArray(data['userErrors'])
-      ? // The Worker sends Shopify's own `userErrors` list unchanged.
-        /** @type {UserError[]} */ (data['userErrors'])
-      : undefined;
-    throw new TetherError(`Customer accounts: ${reason}`, {
-      status: response.status,
-      ...(userErrors && { userErrors }),
-    });
-  }
-  return { kind: 'answer', data };
-}
-
-/**
- * @param {unknown} value
- * @returns {ServerCustomer}
- */
-function toServerCustomer(value) {
-  const customer = isRecord(value) ? value : {};
-  const address = customer['address'];
-  return {
-    firstName: textOrNull(customer['firstName']),
-    lastName: textOrNull(customer['lastName']),
-    displayName: textOrNull(customer['displayName']),
-    email: textOrNull(customer['email']),
-    address: Array.isArray(address) ? address.filter((line) => typeof line === 'string') : null,
-  };
-}
-
-/**
- * Who is logged in, asked once and then kept; the "may be logged in" hint follows the answer.
- *
- * @returns {Promise<ServerLogin>}
- * @throws {TetherError} When the Worker can't be reached or fails: that says nothing about the login.
- */
-export async function serverLogin() {
-  if (!known) {
-    const answer = await serverFetch('/me');
-    known =
-      answer.kind === 'answer' && answer.data['loggedIn'] === true
-        ? { loggedIn: true, customer: toServerCustomer(answer.data['customer']) }
-        : { loggedIn: false };
-  }
-  setLoginHint(known.loggedIn);
-  return known;
-}
-
-/** @returns {boolean} True when the Worker last said a customer is logged in. */
-export const isServerLoggedIn = () => known?.loggedIn === true;
-
-/** Asks the Worker again on the next `serverLogin()`, after a change of the customer's data. */
-export function forgetServerLogin() {
-  known = null;
-}
-
-/**
- * To the Worker's login, which comes back to `returnTo`. The cart is linked later, at checkout, through the Worker's
- * protected `POST /cart`.
- *
- * @param {{ returnTo: string, locale?: string | undefined }} options
- */
-export function serverLoginRedirect({ returnTo, locale }) {
-  const url = new URL(`${serverBase()}/login`);
-  url.searchParams.set('returnTo', returnTo);
-  const language = loginLanguage(locale);
-  if (language) url.searchParams.set('locale', language);
-  const country = loginCountry();
-  if (country) url.searchParams.set('country', country);
-  navigate(url.toString());
-}
-
-/**
- * The logged-in customer's checkout, for `Cart.beforeCheckout`: the Worker links the cart to the customer and answers
- * with its checkout URL.
- *
- * @returns {Promise<string | null>} `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() {
-  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;
-  const url = textOrNull(answer.data['checkoutUrl']);
-  if (!url) return null;
-  return `${url}${url.includes('?') ? '&' : '?'}logged_in=true`;
-}
-
-/**
- * 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`.
- *
- * @param {string} returnTo
- * @returns {Promise<'redirected' | 'stayed'>}
- */
-export async function serverLogout(returnTo) {
-  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/shared.js

@@ -1,111 +0,0 @@
-/**
- * What both account modes share: the storage keys, the redirect to Shopify's pages, the login language, and reading
- * the JSON that Shopify and the Worker answer with. Storage throws in private mode and where the visitor blocks site
- * data; a login then lasts as long as the page.
- */
-import { cfg } from '../config.js';
-
-/** @typedef {'session' | 'local'} StorageArea */
-
-/** @returns {string} The browser-mode session's key. */
-export const sessionKey = () => `${cfg.prefix}:account:${cfg.domain}`;
-
-/** @returns {string} The key of the login in progress (browser mode), between leaving for Shopify and coming back. */
-export const pendingLoginKey = () => `${cfg.prefix}:account-login:${cfg.domain}`;
-
-/**
- * Server mode's "may be logged in" mark: it makes the core load this part on the next page, and holds no secret.
- *
- * @returns {string}
- */
-const hintKey = () => `${cfg.prefix}:account-hint:${cfg.domain}`;
-
-/** @returns {StorageArea} Where the browser-mode session lives: `localStorage` with `account.remember`. */
-export const sessionArea = () => (cfg.account?.remember ? 'local' : 'session');
-
-/** @param {StorageArea} area */
-const storageOf = (area) => (area === 'local' ? window.localStorage : window.sessionStorage);
-
-/**
- * @param {StorageArea} area
- * @param {string} key
- * @returns {unknown} The stored JSON value; `null` without one, for text that isn't JSON, or with storage blocked.
- */
-export function readJsonIfAllowed(area, key) {
-  try {
-    return JSON.parse(storageOf(area).getItem(key) ?? 'null');
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Keeps `value` as JSON; without storage nothing is kept (see the file's comment).
- *
- * @param {StorageArea} area
- * @param {string} key
- * @param {unknown} value `null` removes the key.
- */
-export function writeJsonIfAllowed(area, key, value) {
-  try {
-    if (value === null) storageOf(area).removeItem(key);
-    else storageOf(area).setItem(key, JSON.stringify(value));
-  } catch {
-    // Private mode or blocked storage: see the file's comment.
-  }
-}
-
-/** @param {boolean} loggedIn */
-export function setLoginHint(loggedIn) {
-  writeJsonIfAllowed('local', hintKey(), loggedIn ? 1 : null);
-}
-
-/**
- * @param {unknown} value
- * @returns {value is Record<string, unknown>}
- */
-export const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
-
-/**
- * @param {unknown} value
- * @returns {string | null}
- */
-export const textOrNull = (value) => (typeof value === 'string' ? value : null);
-
-/**
- * An error page that isn't JSON reads as an empty answer: the response's status then says what went wrong.
- *
- * @param {Response} response
- * @returns {Promise<Record<string, unknown>>}
- */
-export async function readJsonObjectOrEmpty(response) {
-  /** @type {unknown} */
-  let json;
-  try {
-    json = await response.json();
-  } catch {
-    return {};
-  }
-  return isRecord(json) ? json : {};
-}
-
-/**
- * Goes to one of Shopify's (or the Worker's) pages, through `account.navigate` when the site replaces the redirect.
- *
- * @param {string} url
- */
-export function navigate(url) {
-  const replacement = cfg.account?.navigate;
-  if (replacement) replacement(url);
-  else window.location.assign(url);
-}
-
-/**
- * @param {string | undefined} locale The caller's choice.
- * @returns {string} The language of Shopify's login page: the caller's, `account.locale`, else the site's; `''` for
- *   Shopify's default.
- */
-export const loginLanguage = (locale) => locale || cfg.account?.locale || (cfg.locale || '').split('-')[0] || '';
-
-/** @returns {string} The market's country for Shopify's login page, `''` without one. */
-export const loginCountry = () => (cfg.country ? cfg.country.toUpperCase() : '');