@occluze/tether 0.7.0 → 0.7.1

package/src/account/page-answers.ts

@@ -1,317 +0,0 @@
-/**
- * The account pages' answers as typed values: addresses, the order page, subscriptions and what a change returns. The
- * rules are answers.ts's: every selected field is kept, a missing one reads as `null`, and the ids the pages act on
- * are required.
- */
-import {
-  countOrZero,
-  field,
-  isRecord,
-  listOf,
-  nodesOf,
-  numberOrNull,
-  textList,
-  textOrNull,
-} from '../../server/src/shared/json.ts';
-import { imageOrNull, moneyOrNull, toOrderLine } from '../../server/src/shared/account-orders.ts';
-import type { AccountImage, AccountOrderLine } from '../../server/src/shared/account-orders.ts';
-import type { Money } from '../shopify-values.ts';
-import { requiredId, unexpected } from './answers.ts';
-
-/** An address as the documents select it. */
-export interface MailingAddress {
-  id: string | null;
-  firstName: string | null;
-  lastName: string | null;
-  company: string | null;
-  address1: string | null;
-  address2: string | null;
-  city: string | null;
-  province: string | null;
-  zoneCode: string | null;
-  zip: string | null;
-  country: string | null;
-  countryCode: string | null;
-  phoneNumber: string | null;
-  /** One line per entry. */
-  formatted: string[];
-}
-/** One of the customer's saved addresses. */
-export type AccountAddress = MailingAddress & { id: string };
-export type CustomerAddress = AccountAddress & { isDefault: boolean };
-interface ReturnReason {
-  id: string;
-  name: string | null;
-  handle: string | null;
-}
-/** A line of the order page's document. */
-export type OrderDetailLine = AccountOrderLine & {
-  id: string;
-  name: string | null;
-  sku: string | null;
-  price: Money | null;
-  totalPrice: Money | null;
-  suggestedReturnReasonDefinitions: { nodes: ReturnReason[] };
-};
-interface Tracking {
-  company: string | null;
-  number: string | null;
-  url: string | null;
-}
-export interface Fulfillment {
-  id: string | null;
-  status: string | null;
-  createdAt: string | null;
-  estimatedDeliveryAt: string | null;
-  latestShipmentStatus: string | null;
-  trackingInformation: Tracking[];
-}
-interface ReturnableLine {
-  quantity: number;
-  lineItem: { id: string } | null;
-}
-/** A return Shopify opened. */
-export interface OpenedReturn {
-  id: string;
-  status: string | null;
-}
-/** The order page's document. */
-export interface OrderDetail {
-  id: string;
-  name: string | null;
-  number: number | null;
-  processedAt: string | null;
-  cancelledAt: string | null;
-  financialStatus: string | null;
-  fulfillmentStatus: string | null;
-  statusPageUrl: string | null;
-  requiresShipping: boolean | null;
-  totalPrice: Money | null;
-  subtotal: Money | null;
-  totalShipping: Money | null;
-  totalTax: Money | null;
-  shippingAddress: MailingAddress | null;
-  billingAddress: MailingAddress | null;
-  lineItems: { nodes: OrderDetailLine[] };
-  fulfillments: { nodes: Fulfillment[] };
-  returnInformation: { returnableLineItems: { nodes: ReturnableLine[] } } | null;
-  returns: { nodes: OpenedReturn[] };
-}
-export interface SubscriptionLine {
-  id: string | null;
-  name: string | null;
-  title: string | null;
-  variantTitle: string | null;
-  quantity: number;
-  sku: string | null;
-  currentPrice: Money | null;
-  lineDiscountedPrice: Money | null;
-  image: AccountImage | null;
-}
-interface BillingCycle {
-  cycleIndex: number | null;
-  skipped: boolean;
-  billingAttemptExpectedDate: string | null;
-}
-/** The subscriptions document. */
-export interface SubscriptionContract {
-  id: string;
-  /** `ACTIVE`, `PAUSED`, `CANCELLED`, `EXPIRED` or `FAILED`. */
-  status: string | null;
-  nextBillingDate: string | null;
-  currencyCode: string | null;
-  deliveryPrice: Money | null;
-  deliveryPolicy: { interval: string | null; intervalCount: { count: number } | null } | null;
-  lines: { nodes: SubscriptionLine[] };
-  upcomingBillingCycles: { nodes: BillingCycle[] };
-}
-export interface Profile {
-  firstName: string | null;
-  lastName: string | null;
-}
-/** What a subscription action changed: the contract (pause, resume, cancel) or its next billing cycle (skip, unskip). */
-export type SubscriptionChange =
-  | { contract: { id: string | null; status: string | null } }
-  | { billingCycle: { cycleIndex: number | null; skipped: boolean } };
-
-function toMailingAddress(value: unknown): MailingAddress {
-  const text = (name: string) => textOrNull(field(value, name));
-  return {
-    id: text('id'),
-    firstName: text('firstName'),
-    lastName: text('lastName'),
-    company: text('company'),
-    address1: text('address1'),
-    address2: text('address2'),
-    city: text('city'),
-    province: text('province'),
-    zoneCode: text('zoneCode'),
-    zip: text('zip'),
-    country: text('country'),
-    countryCode: text('countryCode'),
-    phoneNumber: text('phoneNumber'),
-    formatted: textList(field(value, 'formatted')),
-  };
-}
-
-const mailingAddressOrNull = (value: unknown): MailingAddress | null =>
-  isRecord(value) ? toMailingAddress(value) : null;
-
-/** @throws {TetherError} Without an id. */
-export const toAccountAddress = (value: unknown): AccountAddress => ({
-  ...toMailingAddress(value),
-  id: requiredId(field(value, 'id'), 'address id'),
-});
-
-/**
- * @param value The addresses operation's list, each address with the `isDefault` it adds.
- * @throws {TetherError} For an address without an id.
- */
-export const toCustomerAddresses = (value: unknown): CustomerAddress[] =>
-  listOf(value, (address) => ({ ...toAccountAddress(address), isDefault: field(address, 'isDefault') === true }));
-
-const toOrderDetailLine = (value: unknown): OrderDetailLine => ({
-  ...toOrderLine(value),
-  id: requiredId(field(value, 'id'), 'line item id'),
-  name: textOrNull(field(value, 'name')),
-  sku: textOrNull(field(value, 'sku')),
-  price: moneyOrNull(field(value, 'price')),
-  totalPrice: moneyOrNull(field(value, 'totalPrice')),
-  suggestedReturnReasonDefinitions: nodesOf(field(value, 'suggestedReturnReasonDefinitions'), (reason) => ({
-    id: requiredId(field(reason, 'id'), 'return reason id'),
-    name: textOrNull(field(reason, 'name')),
-    handle: textOrNull(field(reason, 'handle')),
-  })),
-});
-
-const toFulfillment = (value: unknown): Fulfillment => ({
-  id: textOrNull(field(value, 'id')),
-  status: textOrNull(field(value, 'status')),
-  createdAt: textOrNull(field(value, 'createdAt')),
-  estimatedDeliveryAt: textOrNull(field(value, 'estimatedDeliveryAt')),
-  latestShipmentStatus: textOrNull(field(value, 'latestShipmentStatus')),
-  trackingInformation: listOf(field(value, 'trackingInformation'), (tracking) => ({
-    company: textOrNull(field(tracking, 'company')),
-    number: textOrNull(field(tracking, 'number')),
-    url: textOrNull(field(tracking, 'url')),
-  })),
-});
-
-function toReturnableLine(value: unknown): ReturnableLine {
-  const lineId = textOrNull(field(field(value, 'lineItem'), 'id'));
-  return { quantity: countOrZero(field(value, 'quantity')), lineItem: lineId === null ? null : { id: lineId } };
-}
-
-function toReturnInformation(value: unknown): OrderDetail['returnInformation'] {
-  if (!isRecord(value)) return null;
-  return { returnableLineItems: nodesOf(value['returnableLineItems'], toReturnableLine) };
-}
-
-/**
- * @param value The order operation's `order`.
- * @returns `null` when the customer has no such order.
- * @throws {TetherError} For an order, line, reason or return without an id.
- */
-export function toOrderDetail(value: unknown): OrderDetail | null {
-  if (!isRecord(value)) return null;
-  const text = (name: string) => textOrNull(value[name]);
-  const money = (name: string) => moneyOrNull(value[name]);
-  const requiresShipping = value['requiresShipping'];
-  return {
-    id: requiredId(value['id'], 'order id'),
-    name: text('name'),
-    number: numberOrNull(value['number']),
-    processedAt: text('processedAt'),
-    cancelledAt: text('cancelledAt'),
-    financialStatus: text('financialStatus'),
-    fulfillmentStatus: text('fulfillmentStatus'),
-    statusPageUrl: text('statusPageUrl'),
-    requiresShipping: typeof requiresShipping === 'boolean' ? requiresShipping : null,
-    totalPrice: money('totalPrice'),
-    subtotal: money('subtotal'),
-    totalShipping: money('totalShipping'),
-    totalTax: money('totalTax'),
-    shippingAddress: mailingAddressOrNull(value['shippingAddress']),
-    billingAddress: mailingAddressOrNull(value['billingAddress']),
-    lineItems: nodesOf(value['lineItems'], toOrderDetailLine),
-    fulfillments: nodesOf(value['fulfillments'], toFulfillment),
-    returnInformation: toReturnInformation(value['returnInformation']),
-    returns: nodesOf(value['returns'], toReturn),
-  };
-}
-
-const toSubscriptionLine = (value: unknown): SubscriptionLine => ({
-  id: textOrNull(field(value, 'id')),
-  name: textOrNull(field(value, 'name')),
-  title: textOrNull(field(value, 'title')),
-  variantTitle: textOrNull(field(value, 'variantTitle')),
-  quantity: countOrZero(field(value, 'quantity')),
-  sku: textOrNull(field(value, 'sku')),
-  currentPrice: moneyOrNull(field(value, 'currentPrice')),
-  lineDiscountedPrice: moneyOrNull(field(value, 'lineDiscountedPrice')),
-  image: imageOrNull(field(value, 'image')),
-});
-
-const toBillingCycle = (value: unknown): BillingCycle => ({
-  cycleIndex: numberOrNull(field(value, 'cycleIndex')),
-  skipped: field(value, 'skipped') === true,
-  billingAttemptExpectedDate: textOrNull(field(value, 'billingAttemptExpectedDate')),
-});
-
-function toDeliveryPolicy(value: unknown): SubscriptionContract['deliveryPolicy'] {
-  if (!isRecord(value)) return null;
-  const intervalCount = value['intervalCount'];
-  return {
-    interval: textOrNull(value['interval']),
-    intervalCount: isRecord(intervalCount) ? { count: countOrZero(intervalCount['count']) } : null,
-  };
-}
-
-/** @throws {TetherError} Without an id. */
-const toSubscriptionContract = (value: unknown): SubscriptionContract => ({
-  id: requiredId(field(value, 'id'), 'subscription id'),
-  status: textOrNull(field(value, 'status')),
-  nextBillingDate: textOrNull(field(value, 'nextBillingDate')),
-  currencyCode: textOrNull(field(value, 'currencyCode')),
-  deliveryPrice: moneyOrNull(field(value, 'deliveryPrice')),
-  deliveryPolicy: toDeliveryPolicy(field(value, 'deliveryPolicy')),
-  lines: nodesOf(field(value, 'lines'), toSubscriptionLine),
-  upcomingBillingCycles: nodesOf(field(value, 'upcomingBillingCycles'), toBillingCycle),
-});
-
-/**
- * @param value The subscriptions operation's list.
- * @throws {TetherError} For a contract without an id.
- */
-export const toSubscriptionContracts = (value: unknown): SubscriptionContract[] =>
-  listOf(value, toSubscriptionContract);
-
-/**
- * @param result The subscription operation's result.
- * @throws {TetherError} With neither a contract nor a billing cycle.
- */
-export function toSubscriptionChange(result: Record<string, unknown>): SubscriptionChange {
-  const { contract, billingCycle } = result;
-  if (isRecord(contract)) {
-    return { contract: { id: textOrNull(contract['id']), status: textOrNull(contract['status']) } };
-  }
-  if (isRecord(billingCycle)) {
-    const { cycleIndex, skipped } = toBillingCycle(billingCycle);
-    return { billingCycle: { cycleIndex, skipped } };
-  }
-  throw unexpected('changed subscription');
-}
-
-/** @throws {TetherError} Without an id. */
-export function toReturn(value: unknown): OpenedReturn {
-  return { id: requiredId(field(value, 'id'), 'return id'), status: textOrNull(field(value, 'status')) };
-}
-
-/** @throws {TetherError} Without an id. */
-export const toDeletedId = (value: unknown): string => requiredId(value, 'deleted address id');
-
-/** @param value The profile operation's `customer`. */
-export const toProfile = (value: unknown): Profile => ({
-  firstName: textOrNull(field(value, 'firstName')),
-  lastName: textOrNull(field(value, 'lastName')),
-});

package/src/account/page-events.ts

@@ -1,253 +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.ts';
-import {
-  saveAddress,
-  deleteAddress,
-  subscriptionAction,
-  requestReturn,
-  updateProfile,
-  pagesContext,
-} 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';
-
-const SUBSCRIPTION_ACTIONS: readonly SubscriptionAction[] = ['pause', 'resume', 'skip', 'unskip', 'cancel'];
-
-const isSubscriptionAction = (value: string | null): value is SubscriptionAction =>
-  SUBSCRIPTION_ACTIONS.some((action) => action === value);
-
-const isField = (el: Element): el is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement =>
-  el instanceof window.HTMLInputElement ||
-  el instanceof window.HTMLSelectElement ||
-  el instanceof window.HTMLTextAreaElement;
-
-const isForm = (el: Element): el is HTMLFormElement => el instanceof window.HTMLFormElement;
-
-/** @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 (!isField(field)) continue;
-    if (!field.name || field.type === 'submit' || field.type === 'button' || field.type === 'checkbox') continue;
-    fields[field.name] = field.value;
-  }
-  return fields;
-}
-
-/** @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;
-  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.
- */
-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');
-  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, customerMessage(error));
-    });
-    return 'error';
-  } finally {
-    el.classList.remove('is-busy');
-    el.removeAttribute('aria-busy');
-  }
-}
-
-/** @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);
-};
-
-const addressFormReset = (form: HTMLFormElement): void => {
-  form.reset();
-  delete form.dataset['tetherAddressId'];
-};
-
-function onSubmit(event: SubmitEvent): void {
-  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. */
-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 (!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' });
-}
-
-/** @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'))) {
-    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 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');
-  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 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'));
-  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);
-  if (noteText) line.note = noteText;
-  return line;
-}
-
-/** @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'];
-  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);
-  });
-}
-
-function onClick(event: MouseEvent): void {
-  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(): 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) => {
-    const target = event.target;
-    if (target instanceof window.HTMLElement && target.closest(sel('profile-form'))) {
-      target.dataset['tetherTouched'] = '1';
-    }
-  });
-  document.addEventListener('click', onClick);
-}