@occluze/tether 0.6.8 → 0.7.1

package/src/account/shopify-auth.js

@@ -1,150 +0,0 @@
-/**
- * Shopify's side of the browser-mode login: the OAuth and Customer Account API endpoints, found through the shop's
- * `.well-known` documents (a shop with its own accounts domain has other ones), the token endpoint, and the check of
- * the id token it answers with.
- */
-import { cfg } from '../config.js';
-import { TetherError } from '../client.js';
-import { fromBase64Url } from '../../server/src/shared/base64url.js';
-import { isRecord, readJsonObjectOrEmpty, textOrNull } from './shared.js';
-
-/**
- * @typedef {object} Endpoints
- * @property {string} issuer The id token's `iss`.
- * @property {string} authorizationEndpoint
- * @property {string} tokenEndpoint
- * @property {string} endSessionEndpoint
- * @property {string} graphql The Customer Account API.
- */
-/**
- * @typedef {object} TokenAnswer
- * @property {string} access
- * @property {string | null} refresh Left out of some refresh answers.
- * @property {string | null} idToken Left out of refresh answers.
- * @property {number} expiresInSeconds
- */
-
-/** Shopify's access tokens last an hour; an answer without `expires_in` is taken to say so. */
-const DEFAULT_TOKEN_SECONDS = 3600;
-
-/** @type {Endpoints | null} */
-let endpoints = null;
-
-/**
- * @param {string} document `openid-configuration` or `customer-account-api`.
- * @returns {Promise<Record<string, unknown>>}
- */
-async function wellKnown(document) {
-  const shop = cfg.account?.shopDomain || cfg.domain;
-  const response = await fetch(`https://${shop}/.well-known/${document}`);
-  if (!response.ok) {
-    throw new TetherError(`Customer accounts: ${document} answered ${response.status}`, { status: response.status });
-  }
-  const json = /** @type {unknown} */ (await response.json());
-  return isRecord(json) ? json : {};
-}
-
-/**
- * @param {Record<string, unknown>} json
- * @param {string} name
- * @returns {string}
- * @throws {TetherError} When Shopify's document lacks the endpoint.
- */
-function endpointIn(json, name) {
-  const url = textOrNull(json[name]);
-  if (!url) throw new TetherError(`Customer accounts: Shopify named no ${name}`);
-  return url;
-}
-
-/**
- * @returns {Promise<Endpoints>} The shop's endpoints, asked once per page.
- * @throws {TetherError} When Shopify's documents can't be read.
- */
-export async function discover() {
-  if (endpoints) return endpoints;
-  const [openid, api] = await Promise.all([wellKnown('openid-configuration'), wellKnown('customer-account-api')]);
-  endpoints = {
-    issuer: endpointIn(openid, 'issuer'),
-    authorizationEndpoint: endpointIn(openid, 'authorization_endpoint'),
-    tokenEndpoint: endpointIn(openid, 'token_endpoint'),
-    endSessionEndpoint: endpointIn(openid, 'end_session_endpoint'),
-    graphql: endpointIn(api, 'graphql_api'),
-  };
-  return endpoints;
-}
-
-/**
- * A token request, as a "simple" request (a form body, no custom header) so the browser sends it without a CORS
- * preflight. `account.tokenUrl` replaces Shopify's endpoint for a browser that can't reach it; it must be the shop's
- * own first-party endpoint passing the form on to Shopify, because the id token in the answer is trusted unsigned
- * (`idTokenClaims`).
- *
- * @param {Record<string, string>} params
- * @returns {Promise<TokenAnswer>}
- * @throws {TetherError} `SESSION_ENDED` when Shopify refuses the code or refresh token (400, 401), else `TOKEN_FAILED`.
- */
-export async function requestToken(params) {
-  const { tokenEndpoint } = await discover();
-  const response = await fetch(cfg.account?.tokenUrl || tokenEndpoint, {
-    method: 'POST',
-    body: new URLSearchParams(params),
-  });
-  const data = await readJsonObjectOrEmpty(response);
-  const access = textOrNull(data['access_token']);
-  if (!response.ok || !access) {
-    const ended = response.status === 400 || response.status === 401;
-    throw new TetherError(`Customer accounts: token ${response.status} ${textOrNull(data['error']) ?? ''}`.trim(), {
-      status: response.status,
-      code: ended ? 'SESSION_ENDED' : 'TOKEN_FAILED',
-    });
-  }
-  return {
-    access,
-    refresh: textOrNull(data['refresh_token']) || null,
-    idToken: textOrNull(data['id_token']) || null,
-    expiresInSeconds: Number(data['expires_in']) || DEFAULT_TOKEN_SECONDS,
-  };
-}
-
-/**
- * The id token's claims. Its signature isn't checked: the token comes straight from Shopify's token endpoint over
- * TLS, in answer to this browser's own code and verifier, so nobody else could have written it. That holds only while
- * `account.tokenUrl` (when set) is the shop's own first-party endpoint passing the request on to Shopify (see
- * `requestToken`).
- *
- * @param {string} idToken
- * @returns {Record<string, unknown> | null}
- */
-function idTokenClaims(idToken) {
-  const payload = idToken.split('.')[1];
-  if (!payload) return null;
-  /** @type {unknown} */
-  let claims;
-  try {
-    claims = JSON.parse(new TextDecoder().decode(fromBase64Url(payload)));
-  } catch {
-    // Not base64url JSON: not an id token, which the caller refuses.
-    return null;
-  }
-  return isRecord(claims) ? claims : null;
-}
-
-/**
- * @param {string | null} idToken
- * @param {{ nonce: string, issuer: string, client: string }} expected The login's nonce, Shopify's issuer, our client.
- * @returns {boolean} True when the id token answers this login: the expected claims, and not expired.
- */
-export function answersLogin(idToken, { nonce, issuer, client }) {
-  const claims = idToken ? idTokenClaims(idToken) : null;
-  if (!claims) return false;
-  const audience = claims['aud'];
-  const audiences = Array.isArray(audience) ? audience : [audience];
-  const expiresAt = claims['exp'];
-  return (
-    claims['nonce'] === nonce &&
-    claims['iss'] === issuer &&
-    audiences.includes(client) &&
-    typeof expiresAt === 'number' &&
-    expiresAt * 1000 >= Date.now()
-  );
-}

package/src/account/subscriptions-view.js

@@ -1,158 +0,0 @@
-/**
- * The customer's subscriptions (`tether-subscriptions`), with `tether-show="subscriptions-loading"`,
- * `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' */
-
-/**
- * @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) {
-  const next = contract.upcomingBillingCycles.nodes[0];
-  const status = contract.status;
-  const active = status === 'ACTIVE';
-  return {
-    active,
-    paused: status === 'PAUSED',
-    cancelled: status === 'CANCELLED',
-    expired: status === 'EXPIRED',
-    failed: status === 'FAILED',
-    skipped: Boolean(next?.skipped),
-    'can-pause': active,
-    'can-resume': status === 'PAUSED' || status === 'FAILED',
-    'can-skip': active && next !== undefined && !next.skipped,
-    'can-unskip': active && Boolean(next?.skipped),
-    'can-cancel': active || status === 'PAUSED' || status === 'FAILED',
-  };
-}
-
-/**
- * @param {SubscriptionContract} contract
- * @returns {string} `month`, `3 months`; `''` without a delivery policy.
- */
-function intervalText(contract) {
-  const unit = enumText(contract.deliveryPolicy?.interval);
-  if (!unit) return '';
-  const count = contract.deliveryPolicy?.intervalCount?.count ?? 1;
-  return count <= 1 ? unit : `${count} ${unit}s`;
-}
-
-/**
- * @param {SubscriptionContract} contract
- * @returns {Record<string, string>} The text of each `tether-subscription-bind` value.
- */
-function contractTexts(contract) {
-  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) : '',
-    interval: intervalText(contract),
-    products: lines.map((line) => `${line.quantity}× ${line.title}`).join(', '),
-    total: lines.length ? formatMoney({ amount: String(total), currencyCode: contract.currencyCode }) : '',
-    delivery: formatMoney(contract.deliveryPrice),
-  };
-}
-
-/**
- * @param {HTMLElement} row
- * @param {SubscriptionLine} line
- */
-function fillLine(row, line) {
-  /** @type {Record<string, string>} */
-  const texts = {
-    title: line.title,
-    'variant-title': line.variantTitle || '',
-    quantity: String(line.quantity),
-    price: formatMoney(line.currentPrice),
-  };
-  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);
-      return;
-    }
-    const text = ownValue(texts, key);
-    if (text !== undefined) setText(el, text);
-  });
-}
-
-/**
- * @param {HTMLElement} row
- * @param {SubscriptionContract} contract
- */
-function fillContract(row, contract) {
-  row.dataset['tetherSubscription'] = contract.id;
-  row.setAttribute(attr('subscription-status'), enumText(contract.status));
-  const texts = contractTexts(contract);
-  qsa(row, sel('subscription-bind')).forEach((el) => {
-    const text = ownValue(texts, get(el, 'subscription-bind') ?? '');
-    if (text !== undefined) setText(el, text);
-  });
-  qsa(row, sel('subscription-lines')).forEach((box) => {
-    repeat(box, contract.lines.nodes, fillLine);
-  });
-  const conditions = conditionsOf(contract);
-  showIn(row, 'subscription-show', conditions);
-  qsa(row, sel('subscription-action')).forEach((button) => {
-    const allowed = ownValue(conditions, `can-${get(button, 'subscription-action') ?? ''}`) === true;
-    if ('disabled' in button) button.disabled = !allowed;
-    button.classList.toggle('is-disabled', !allowed);
-  });
-}
-
-/**
- * Loads and renders the subscriptions. A failure is reported and shows `subscriptions-error`.
- *
- * @param {ParentNode} root
- */
-export async function renderSubscriptions(root) {
-  const boxes = qsa(root, sel('subscriptions'));
-  if (!boxes.length) return;
-  showIn(root, 'show', { 'subscriptions-loading': true, 'subscriptions-empty': false });
-  /** @type {SubscriptionContract[]} */
-  let list;
-  try {
-    list = await subscriptions();
-  } catch (error) {
-    reportError(error, 'subscriptions');
-    showIn(root, 'show', { 'subscriptions-loading': false, 'subscriptions-error': true });
-    return;
-  }
-  showIn(root, 'show', {
-    'subscriptions-loading': false,
-    'subscriptions-empty': list.length === 0,
-    'subscriptions-error': false,
-  });
-  boxes.forEach((box) => {
-    repeat(box, list, fillContract);
-  });
-}

package/src/account-api.js

@@ -1,118 +0,0 @@
-/**
- * The core's side of customer accounts, which are an optional part: whether a page needs the part, and
- * `Tether.account`, whose functions load it on first call. Every function returns a promise, the part's own sync ones
- * (`isLoggedIn`) too, because the part may still have to load.
- */
-import { cfg, reportError } from './config.js';
-import { attr } from './dom.js';
-import { loadPart } from './lazy.js';
-import { within } from './mounting.js';
-/** @import { Parts } from './lazy.js' */
-
-/** @typedef {Parts['account']} AccountPart */
-/**
- * @template {keyof AccountPart} Name
- * @typedef {Awaited<ReturnType<AccountPart[Name]>>} AccountResult
- */
-/**
- * @template {keyof AccountPart} Name
- * @typedef {(...args: Parameters<AccountPart[Name]>) => Promise<AccountResult<Name>>} AccountFunction
- */
-/** @typedef {{ [Name in keyof AccountPart]: AccountFunction<Name> }} AccountApi */
-
-/** The attributes of the account markup: a page with one of them loads the part. */
-const ACCOUNT_ATTRIBUTES = [
-  'account-login',
-  'account-bind',
-  'account-link',
-  'orders',
-  'order',
-  'addresses',
-  'subscriptions',
-  'profile-form',
-  'address-form',
-];
-
-/** @returns {string} A selector for every element the account part fills in or shows. */
-const accountSelector = () =>
-  [...ACCOUNT_ATTRIBUTES.map((name) => `[${attr(name)}]`), `[${attr('show')}^="logged-"]`].join(',');
-
-/**
- * Whether this browser keeps an account session or the hint of one, so a page without account markup still finishes
- * a login. Storage throws where the browser blocks it, and then there is no session.
- *
- * @returns {boolean}
- */
-function hasSavedSession() {
-  const sessionKey = `${cfg.prefix}:account:${cfg.domain}`;
-  const hintKey = `${cfg.prefix}:account-hint:${cfg.domain}`;
-  try {
-    return Boolean(
-      sessionStorage.getItem(sessionKey) || localStorage.getItem(sessionKey) || localStorage.getItem(hintKey),
-    );
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Loads the account part and mounts it on `root`, when accounts are configured and the page needs them: account
- * markup in `root`, a login coming back from Shopify (`?code=`), or a saved session.
- *
- * @param {ParentNode} root
- */
-export function mountAccountIfUsed(root) {
-  if (!cfg.account?.clientId && !cfg.account?.server) return;
-  const needed =
-    within(root, accountSelector()).length > 0 || /[?&]code=/.test(window.location.search) || hasSavedSession();
-  if (!needed) return;
-  loadPart('account')
-    .then((part) => part.mountAccount(root))
-    .catch((/** @type {unknown} */ error) => {
-      reportError(error, 'account');
-    });
-}
-
-/**
- * @template {keyof AccountPart} Name
- * @param {Name} name
- * @returns {AccountFunction<Name>} `name` of the account part, called once the part has loaded.
- */
-function fromPart(name) {
-  return (...args) =>
-    loadPart('account').then((part) => {
-      // `Name` picks one function of the part, and `args` are that function's parameters.
-      const call =
-        /**
-         * @type {(...callArgs: Parameters<AccountPart[Name]>) => AccountResult<Name> | PromiseLike<AccountResult<Name>>}
-         */ (part[name]);
-      return call(...args);
-    });
-}
-
-/**
- * `Tether.account`: the account part's functions, each loading the part on first call. A plain object, so `await
- * Tether.account` and `Object.keys(Tether.account)` behave as for any object.
- *
- * @type {AccountApi}
- */
-export const accountApi = {
-  login: fromPart('login'),
-  logout: fromPart('logout'),
-  handleCallback: fromPart('handleCallback'),
-  getToken: fromPart('getToken'),
-  isLoggedIn: fromPart('isLoggedIn'),
-  query: fromPart('query'),
-  customer: fromPart('customer'),
-  orders: fromPart('orders'),
-  order: fromPart('order'),
-  updateProfile: fromPart('updateProfile'),
-  addresses: fromPart('addresses'),
-  saveAddress: fromPart('saveAddress'),
-  deleteAddress: fromPart('deleteAddress'),
-  subscriptions: fromPart('subscriptions'),
-  subscriptionAction: fromPart('subscriptionAction'),
-  requestReturn: fromPart('requestReturn'),
-  render: fromPart('render'),
-  mountAccount: fromPart('mountAccount'),
-};

package/src/account-links.js

@@ -1,35 +0,0 @@
-/** Order links and dates, shared by the account part's order list and the account pages part. */
-import { cfg } from './config.js';
-import { isHttpsUrl } from './shopify-values.js';
-
-export { isHttpsUrl };
-
-/**
- * An ISO date in the configured locale; the input itself for a locale `Intl` doesn't know (a RangeError).
- *
- * @param {string} iso
- */
-export function localDate(iso) {
-  try {
-    return new Date(iso).toLocaleDateString(cfg.locale);
-  } catch (error) {
-    if (error instanceof RangeError) return iso;
-    throw error;
-  }
-}
-
-/**
- * The order's page: the site's own (`account.orderUrl`, e.g. `/account/order?id={id}`, with the numeric order id),
- * else Shopify's status page when it is https.
- *
- * @param {{ id: string, statusPageUrl?: string | null }} order
- * @returns {string | null}
- */
-export function orderUrl(order) {
-  const template = cfg.account?.orderUrl;
-  if (template) {
-    const numericId = order.id.split('/').pop()?.split('?')[0] ?? '';
-    return template.replace('{id}', encodeURIComponent(numericId));
-  }
-  return isHttpsUrl(order.statusPageUrl) ? (order.statusPageUrl ?? null) : null;
-}

package/src/account-pages.js

@@ -1,89 +0,0 @@
-/**
- * Customer account pages, an optional part the account part loads on pages that use them: the order page with
- * returns, the profile form, addresses and subscriptions. The operations and their input checks are shared with the
- * Worker (server/src/shared/account-ops.js), so both modes do the same.
- */
-import { reportError } from './config.js';
-import { qsa, sel } from './dom.js';
-import { pagesContext } from './account/operations.js';
-import { renderOrder, showOrderState } from './account/order-page.js';
-import { renderAddresses } from './account/addresses-view.js';
-import { renderSubscriptions } from './account/subscriptions-view.js';
-import { listenToPages } from './account/page-events.js';
-import { showIn } from './account/markup.js';
-
-export {
-  setup,
-  order,
-  updateProfile,
-  addresses,
-  saveAddress,
-  deleteAddress,
-  subscriptions,
-  subscriptionAction,
-  requestReturn,
-} from './account/operations.js';
-
-/** The profile fields a `tether-profile-form` is filled with. */
-const PROFILE_FIELDS = /** @type {const} */ (['firstName', 'lastName']);
-
-/**
- * Fills the profile form with the customer's name, leaving a field the visitor has typed in alone.
- *
- * @param {HTMLElement} form
- */
-async function renderProfile(form) {
-  const customer = await pagesContext()
-    .customer()
-    .catch((/** @type {unknown} */ error) => {
-      // The form stays empty and still saves: only the prefill is missing.
-      reportError(error, 'account');
-      return null;
-    });
-  if (!customer || form.tagName !== 'FORM') return;
-  const fields = /** @type {HTMLFormElement} */ (form).elements;
-  PROFILE_FIELDS.forEach((name) => {
-    const input = fields.namedItem(name);
-    const isTextField = input instanceof window.HTMLInputElement || input instanceof window.HTMLTextAreaElement;
-    if (isTextField && !input.dataset['tetherTouched']) input.value = customer[name] ?? '';
-  });
-}
-
-let listening = false;
-
-/**
- * Renders the order page, profile form, addresses and subscriptions in `root`: only what it has.
- *
- * @param {ParentNode} [root]
- * @returns {Promise<void>}
- */
-export async function renderPages(root = document) {
-  if (!listening) {
-    listening = true;
-    listenToPages();
-  }
-  await Promise.all([
-    ...qsa(root, sel('order')).map((el) => renderOrder(el)),
-    ...qsa(root, sel('profile-form')).map((form) => renderProfile(form)),
-    renderAddresses(root),
-    renderSubscriptions(root),
-  ]);
-}
-
-/**
- * The error state of every account page in `root`, for when nobody can say whether a customer is logged in (the
- * Worker or Shopify can't be reached).
- *
- * @param {ParentNode} root
- */
-export function showUnavailable(root) {
-  qsa(root, sel('order')).forEach((el) => {
-    showOrderState(el, 'error');
-  });
-  showIn(root, 'show', {
-    'addresses-loading': false,
-    'addresses-error': true,
-    'subscriptions-loading': false,
-    'subscriptions-error': true,
-  });
-}