@occluze/tether 0.6.4 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occluze/tether",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Free, open-source alternative to Smootify and Storesynk (Shopyflow): Shopify products, cart and subscriptions in Webflow with HTML attributes. Optional Shopify to Webflow CMS sync.",
   "type": "module",
   "main": "dist/esm/index.js",

package/src/account-pages.js

@@ -0,0 +1,305 @@
+/**
+ * Customer account pages (optional part, loaded by the account part on pages that use them):
+ * order detail with returns, profile, addresses, subscriptions. The operations and their input
+ * checks are shared with the Worker (server/src/account-ops.js), so both modes do the same.
+ */
+import { cfg, reportError } from './config.js';
+import { TetherError } from './client.js';
+import { attr, sel, get, qsa, setText, setImage, repeat, show, formatMoney, emit } from './dom.js';
+import { ops, InputError } from '../server/src/account-ops.js';
+
+let ctx = null; // the account part's server(), serverFetch(), query(), customer(), reset()
+let bound = false;
+export function setup(c) { ctx = c; }
+
+const https = (u) => { try { return new URL(u).protocol === 'https:'; } catch { return false; } };
+const date = (s) => { try { return new Date(s).toLocaleDateString(cfg.locale || undefined); } catch { return s; } };
+// ---------------------------------------------------------------- order detail, profile, addresses, subscriptions, returns
+
+// The same fixed operations in both modes: the Worker's routes in server mode, the Customer
+// Account API directly (with the same documents and input checks) in browser mode.
+const ROUTE = {
+  order: (i) => ['GET', `/order?id=${encodeURIComponent(i.id)}`],
+  addresses: () => ['GET', '/addresses'],
+  subscriptions: () => ['GET', '/subscriptions'],
+  profile: () => ['POST', '/profile'],
+  saveAddress: () => ['POST', '/address'],
+  deleteAddress: () => ['POST', '/address/delete'],
+  subscription: () => ['POST', '/subscription'],
+  requestReturn: () => ['POST', '/return'],
+};
+async function run(name, input = {}) {
+  const { server, serverFetch, query } = ctx;
+  if (server()) {
+    const [method, path] = ROUTE[name](input);
+    const data = await serverFetch(path, method === 'POST' ? { method, body: input } : {});
+    if (data.loggedIn === false) throw new TetherError('Not logged in', { code: 'NOT_LOGGED_IN', status: 401 });
+    return data;
+  }
+  try { return await ops[name]((q, v) => query(q, v), input); } catch (err) {
+    if (err instanceof InputError) throw new TetherError(err.message, { code: 'INVALID', userErrors: err.userErrors });
+    throw err;
+  }
+}
+const changed = (what) => { ctx.reset(); emit('account-updated', { what }); };
+
+/** One of the customer's orders, in full (lines, totals, addresses, fulfillments, returns). */
+export const order = (id) => run('order', { id }).then((r) => r.order);
+export const updateProfile = ({ firstName, lastName } = {}) => run('profile', { firstName, lastName }).then((r) => { changed('profile'); return r.customer; });
+export const addresses = () => run('addresses').then((r) => r.addresses);
+/** saveAddress({ address1, city, zip, countryCode, … }, { id, isDefault }): creates, or updates with an id. */
+export const saveAddress = (address, { id, isDefault } = {}) => run('saveAddress', { id, address, isDefault }).then((r) => { changed('addresses'); return r.address; });
+export const deleteAddress = (id) => run('deleteAddress', { id }).then((r) => { changed('addresses'); return r.deleted; });
+export const subscriptions = () => run('subscriptions').then((r) => r.subscriptions);
+/** subscriptionAction(id, 'pause' | 'resume' | 'skip' | 'unskip' | 'cancel') */
+export const subscriptionAction = (id, action) => run('subscription', { id, action }).then((r) => { changed('subscriptions'); return r; });
+/** requestReturn(orderId, [{ lineItemId, quantity, reasonId, note }]) */
+export const requestReturn = (orderId, lines) => run('requestReturn', { orderId, lines }).then((r) => { changed('orders'); return r.return; });
+
+
+const nid = (g) => String(g || '').split('/').pop().split('?')[0];
+/** The order's page: your own (account.orderUrl: '/account/order?id={id}') or Shopify's status page. */
+function orderUrl(o) {
+  const t = cfg.account?.orderUrl;
+  if (t) return String(t).replace('{id}', encodeURIComponent(nid(o.id)));
+  return https(o.statusPageUrl) ? o.statusPageUrl : null;
+}
+const lower = (v) => (v ? String(v).toLowerCase().replace(/_/g, ' ') : '');
+const lines = (a) => (a?.formatted || []).join(', ');
+const showIn = (root, name, conds) => qsa(root, sel(name)).forEach((el) => { const k = get(el, name); if (k in conds) show(el, Boolean(conds[k])); });
+const showGlobal = (root, conds) => showIn(root, 'show', conds);
+
+function fillLines(box, items, returnable = null) {
+  repeat(box, items, (row, l) => {
+    const can = returnable ? returnable.get(l.id) || 0 : 0;
+    row.dataset.tetherLine = l.id;
+    qsa(row, sel('order-line')).concat(row.matches(sel('order-line')) ? [row] : []).forEach((el) => {
+      const k = get(el, 'order-line');
+      if (k === 'image') { if (l.image) setImage(el, l.image.url, l.image.altText || l.title); return; }
+      const v = { title: l.title || l.name, 'variant-title': l.variantTitle || '', quantity: String(l.quantity), price: l.price ? formatMoney(l.price) : '', total: l.totalPrice ? formatMoney(l.totalPrice) : '', sku: l.sku || '', returnable: String(can) }[k];
+      if (v != null) setText(el, v);
+    });
+    showIn(row, 'order-line-show', { returnable: can > 0 });
+    qsa(row, sel('return-quantity')).forEach((input) => { input.max = String(can); input.min = '0'; if (!input.value) input.value = '0'; input.disabled = can < 1; });
+    qsa(row, `select${sel('return-reason')}`).forEach((select) => {
+      const reasons = l.suggestedReturnReasonDefinitions?.nodes || [];
+      if (select.dataset.tetherFilled !== l.id) {
+        select.dataset.tetherFilled = l.id;
+        reasons.forEach((r) => select.appendChild(new Option(r.name, r.id)));
+      }
+    });
+  });
+}
+
+const SCOPE = { order: sel('order') };
+async function renderOrder(el) {
+  const raw = get(el, 'order') || '';
+  const key = raw.startsWith('url:') ? new URL(window.location.href).searchParams.get(raw.slice(4) || 'id') : raw;
+  const state = (s) => el.setAttribute(attr('order-state'), s);
+  if (!key) { state('not-found'); showIn(el, 'order-show', { 'not-found': true }); return; }
+  state('loading');
+  showIn(el, 'order-show', { loading: true, ready: false, 'not-found': false, error: false });
+  let o;
+  try { o = await order(key); } catch (err) {
+    reportError(err, 'order'); state('error'); showIn(el, 'order-show', { loading: false, error: true }); return;
+  }
+  if (!o) { state('not-found'); showIn(el, 'order-show', { loading: false, 'not-found': true }); return; }
+  el.dataset.tetherOrderId = o.id;
+  const returnable = new Map((o.returnInformation?.returnableLineItems?.nodes || []).map((r) => [r.lineItem?.id, r.quantity]));
+  const ships = o.fulfillments?.nodes || [];
+  qsa(el, sel('order-bind')).forEach((b) => {
+    const k = get(b, 'order-bind');
+    if (k === 'url') { if (https(o.statusPageUrl)) b.setAttribute('href', o.statusPageUrl); return; }
+    const v = {
+      name: o.name, date: date(o.processedAt), total: formatMoney(o.totalPrice), subtotal: o.subtotal ? formatMoney(o.subtotal) : '',
+      shipping: o.totalShipping ? formatMoney(o.totalShipping) : '', tax: o.totalTax ? formatMoney(o.totalTax) : '',
+      status: lower(o.financialStatus), fulfillment: lower(o.fulfillmentStatus), 'shipping-address': lines(o.shippingAddress),
+      'billing-address': lines(o.billingAddress), items: (o.lineItems?.nodes || []).map((l) => `${l.quantity}× ${l.title || l.name}`).join(', '),
+      cancelled: o.cancelledAt ? date(o.cancelledAt) : '',
+    }[k];
+    if (v != null) setText(b, v);
+  });
+  qsa(el, sel('order-lines')).forEach((box) => fillLines(box, o.lineItems?.nodes || [], returnable));
+  qsa(el, sel('order-fulfillments')).forEach((box) => repeat(box, ships, (row, f) => {
+    const t = f.trackingInformation?.[0] || {};
+    qsa(row, sel('fulfillment-bind')).concat(row.matches(sel('fulfillment-bind')) ? [row] : []).forEach((b) => {
+      const k = get(b, 'fulfillment-bind');
+      if (k === 'url') { if (https(t.url)) b.setAttribute('href', t.url); return; }
+      const v = { status: lower(f.latestShipmentStatus || f.status), date: date(f.createdAt), eta: f.estimatedDeliveryAt ? date(f.estimatedDeliveryAt) : '', company: t.company || '', number: t.number || '' }[k];
+      if (v != null) setText(b, v);
+    });
+  }));
+  showIn(el, 'order-show', {
+    loading: false, ready: true, error: false, 'not-found': false, cancelled: Boolean(o.cancelledAt), shipped: ships.length > 0,
+    returnable: [...returnable.values()].some((q) => q > 0), 'has-returns': (o.returns?.nodes || []).length > 0, 'return-requested': el.dataset.tetherReturned === '1',
+  });
+  state('ready');
+}
+
+async function renderProfile(form) {
+  const c = await ctx.customer().catch(() => null);
+  if (!c) return;
+  ['firstName', 'lastName'].forEach((n) => { const i = form.elements?.[n]; if (i && !i.dataset.tetherTouched) i.value = c[n] || ''; });
+}
+
+let addressCache = null;
+async function renderAddresses(root) {
+  const boxes = qsa(root, sel('addresses'));
+  if (!boxes.length) return;
+  showGlobal(root, { 'addresses-loading': true, 'addresses-empty': false });
+  let list = [];
+  try { list = addressCache = await addresses(); } catch (err) { reportError(err, 'addresses'); }
+  showGlobal(root, { 'addresses-loading': false, 'addresses-empty': list.length === 0 });
+  boxes.forEach((box) => repeat(box, list, (row, a) => {
+    row.dataset.tetherAddress = a.id;
+    qsa(row, sel('address-bind')).concat(row.matches(sel('address-bind')) ? [row] : []).forEach((b) => {
+      const v = { formatted: lines(a), name: [a.firstName, a.lastName].filter(Boolean).join(' '), company: a.company || '', address1: a.address1 || '', address2: a.address2 || '', city: a.city || '', zip: a.zip || '', province: a.province || '', country: a.country || '', phone: a.phoneNumber || '' }[get(b, 'address-bind')];
+      if (v != null) setText(b, v);
+    });
+    showIn(row, 'address-show', { default: a.isDefault, 'not-default': !a.isDefault });
+  }));
+}
+
+const SUB_ACTIONS = ['pause', 'resume', 'skip', 'unskip', 'cancel'];
+function subConds(c) {
+  const next = c.upcomingBillingCycles?.nodes?.[0];
+  const st = c.status;
+  return {
+    active: st === 'ACTIVE', paused: st === 'PAUSED', cancelled: st === 'CANCELLED', expired: st === 'EXPIRED', failed: st === 'FAILED',
+    skipped: Boolean(next?.skipped), 'can-pause': st === 'ACTIVE', 'can-resume': st === 'PAUSED' || st === 'FAILED',
+    'can-skip': st === 'ACTIVE' && Boolean(next) && !next.skipped, 'can-unskip': st === 'ACTIVE' && Boolean(next?.skipped), 'can-cancel': st === 'ACTIVE' || st === 'PAUSED' || st === 'FAILED',
+  };
+}
+async function renderSubscriptions(root) {
+  const boxes = qsa(root, sel('subscriptions'));
+  if (!boxes.length) return;
+  showGlobal(root, { 'subscriptions-loading': true, 'subscriptions-empty': false });
+  let list = [];
+  try { list = await subscriptions(); } catch (err) { reportError(err, 'subscriptions'); }
+  showGlobal(root, { 'subscriptions-loading': false, 'subscriptions-empty': list.length === 0 });
+  boxes.forEach((box) => repeat(box, list, (row, c) => {
+    row.dataset.tetherSubscription = c.id;
+    row.setAttribute(attr('subscription-status'), lower(c.status));
+    const ls = c.lines?.nodes || [];
+    const n = c.deliveryPolicy?.intervalCount?.count || 1;
+    const unit = lower(c.deliveryPolicy?.interval);
+    const total = ls.reduce((sum, l) => sum + parseFloat(l.lineDiscountedPrice?.amount || 0), 0);
+    qsa(row, sel('subscription-bind')).forEach((b) => {
+      const k = get(b, 'subscription-bind');
+      const v = {
+        status: lower(c.status), next: c.nextBillingDate ? date(c.nextBillingDate) : '', interval: unit ? (n === 1 ? unit : `${n} ${unit}s`) : '',
+        products: ls.map((l) => `${l.quantity}× ${l.title}`).join(', '), total: ls.length ? formatMoney({ amount: String(total), currencyCode: c.currencyCode }) : '',
+        delivery: c.deliveryPrice ? formatMoney(c.deliveryPrice) : '',
+      }[k];
+      if (v != null) setText(b, v);
+    });
+    qsa(row, sel('subscription-lines')).forEach((lb) => repeat(lb, ls, (lr, l) => {
+      qsa(lr, sel('subscription-line')).concat(lr.matches(sel('subscription-line')) ? [lr] : []).forEach((b) => {
+        const k = get(b, 'subscription-line');
+        if (k === 'image') { if (l.image) setImage(b, l.image.url, l.image.altText || l.title); return; }
+        const v = { title: l.title, 'variant-title': l.variantTitle || '', quantity: String(l.quantity), price: formatMoney(l.currentPrice) }[k];
+        if (v != null) setText(b, v);
+      });
+    }));
+    const conds = subConds(c);
+    showIn(row, 'subscription-show', conds);
+    qsa(row, sel('subscription-action')).forEach((btn) => {
+      const a = get(btn, 'subscription-action');
+      const ok = conds[`can-${a}`];
+      btn.disabled = !ok;
+      btn.classList.toggle('is-disabled', !ok);
+    });
+  }));
+}
+
+/** Order page, profile form, addresses, subscriptions: only what the page has. */
+export async function renderPages(root = document) {
+  if (!bound) { bound = true; bindPages(); }
+  await Promise.all([
+    ...qsa(root, sel('order')).map((el) => renderOrder(el)),
+    ...qsa(root, sel('profile-form')).map((f) => renderProfile(f)),
+    renderAddresses(root),
+    renderSubscriptions(root),
+  ]);
+}
+
+const fieldsOf = (form) => Object.fromEntries([...form.elements].filter((i) => i.name && i.type !== 'submit' && i.type !== 'button' && i.type !== 'checkbox').map((i) => [i.name, i.value]));
+async function act(el, fn, { error } = {}) {
+  el.classList.add('is-busy'); el.setAttribute('aria-busy', 'true');
+  el.setAttribute(attr('form-state'), 'pending');
+  qsa(el, sel('form-error')).forEach((e) => setText(e, ''));
+  try {
+    const out = await fn();
+    el.setAttribute(attr('form-state'), 'saved');
+    return out;
+  } catch (err) {
+    el.setAttribute(attr('form-state'), 'error');
+    const msg = err?.userErrors?.map((u) => u.message).join(' ') || err?.message || 'Something went wrong';
+    qsa(el, sel('form-error')).forEach((e) => setText(e, msg.replace(/^Customer accounts: /, '')));
+    if (error) reportError(err, error);
+    return undefined;
+  } finally { el.classList.remove('is-busy'); el.removeAttribute('aria-busy'); }
+}
+
+function bindPages() {
+  document.addEventListener('submit', (e) => {
+    const f = e.target;
+    if (f.matches?.(sel('profile-form'))) {
+      e.preventDefault();
+      act(f, () => updateProfile(fieldsOf(f)));
+    } else if (f.matches?.(sel('address-form'))) {
+      e.preventDefault();
+      const id = f.dataset.tetherAddressId || undefined;
+      const isDefault = Boolean(f.elements?.isDefault?.checked);
+      act(f, async () => { await saveAddress(fieldsOf(f), { id, isDefault }); f.reset(); delete f.dataset.tetherAddressId; await renderAddresses(document); });
+    }
+  });
+  document.addEventListener('input', (e) => { if (e.target.closest?.(sel('profile-form'))) e.target.dataset.tetherTouched = '1'; });
+  document.addEventListener('click', (e) => {
+    const t = e.target;
+    const row = t.closest?.('[data-tether-address]');
+    const confirmOk = (btn) => { const q = get(btn, 'confirm'); return !q || window.confirm(q); };
+    let btn;
+    if ((btn = t.closest?.(sel('address-delete'))) && row) {
+      e.preventDefault();
+      if (confirmOk(btn)) act(row, async () => { await deleteAddress(row.dataset.tetherAddress); await renderAddresses(document); });
+    } else if ((btn = t.closest?.(sel('address-default'))) && row) {
+      e.preventDefault();
+      act(row, async () => { await saveAddress(null, { id: row.dataset.tetherAddress, isDefault: true }); await renderAddresses(document); });
+    } else if ((btn = t.closest?.(sel('address-edit'))) && row) {
+      e.preventDefault();
+      const a = (addressCache || []).find((x) => x.id === row.dataset.tetherAddress);
+      const f = document.querySelector(sel('address-form'));
+      if (a && f) {
+        f.dataset.tetherAddressId = a.id;
+        [...f.elements].forEach((i) => { if (i.name && i.name in a) i.value = a[i.name] ?? ''; if (i.name === 'isDefault') i.checked = a.isDefault; });
+        f.scrollIntoView?.({ block: 'nearest' });
+      }
+    } else if ((btn = t.closest?.(sel('address-new')))) {
+      const f = document.querySelector(sel('address-form'));
+      if (f) { f.reset(); delete f.dataset.tetherAddressId; }
+    } else if ((btn = t.closest?.(sel('subscription-action')))) {
+      e.preventDefault();
+      const sub = btn.closest('[data-tether-subscription]');
+      const a = get(btn, 'subscription-action');
+      if (!sub || !SUB_ACTIONS.includes(a) || btn.disabled || !confirmOk(btn)) return;
+      sub.setAttribute(attr('subscription-state'), 'pending');
+      act(sub, async () => { await subscriptionAction(sub.dataset.tetherSubscription, a); await renderSubscriptions(document); }).then(() => {
+        sub.setAttribute(attr('subscription-state'), sub.getAttribute(attr('form-state')) === 'error' ? 'error' : 'done');
+      });
+    } else if ((btn = t.closest?.(sel('order-return')))) {
+      e.preventDefault();
+      const scope = btn.closest(SCOPE.order);
+      if (!scope?.dataset.tetherOrderId) return;
+      const req = qsa(scope, '[data-tether-line]').map((r) => ({
+        lineItemId: r.dataset.tetherLine,
+        quantity: parseInt(r.querySelector(sel('return-quantity'))?.value || '0', 10),
+        reasonId: r.querySelector(sel('return-reason'))?.value || undefined,
+        note: r.querySelector(sel('return-note'))?.value || undefined,
+      })).filter((l) => l.quantity > 0);
+      if (!req.length || !confirmOk(btn)) return;
+      act(scope, async () => { await requestReturn(scope.dataset.tetherOrderId, req); scope.dataset.tetherReturned = '1'; await renderOrder(scope); });
+    }
+  });
+}
+

package/src/account.js

@@ -21,8 +21,9 @@
  */
 import { cfg, log, reportError } from './config.js';
 import { TetherError } from './client.js';
-import { sel, get, qsa, setText, setImage, repeat, show, formatMoney, emit } from './dom.js';
+import { attr, sel, get, qsa, setText, setImage, repeat, show, formatMoney, emit } from './dom.js';
 import { Cart } from './cart.js';
+import { loadPart } from './lazy.js';
 
 const KEY = () => `${cfg.prefix}:account:${cfg.domain}`;
 const PENDING = () => `${cfg.prefix}:account-login:${cfg.domain}`;
@@ -52,7 +53,7 @@ async function serverFetch(path, { method = 'GET', body } = {}) {
     body: body ? JSON.stringify(body) : undefined,
   });
   const data = await res.json().catch(() => ({}));
-  if (!res.ok && res.status !== 401) throw new TetherError(`Customer accounts: ${data.error || res.status}`, { status: res.status });
+  if (!res.ok && res.status !== 401) throw new TetherError(`Customer accounts: ${data.error || res.status}`, { status: res.status, userErrors: data.userErrors });
   return data;
 }
 async function serverMe() {
@@ -227,6 +228,7 @@ export async function orders({ first = 10 } = {}) {
   return data.customer?.orders?.nodes || [];
 }
 
+
 /** Logs out here and at Shopify, unlinks the cart. */
 export async function logout({ returnTo = cfg.account?.logoutUrl || `${window.location.origin}/` } = {}) {
   if (server()) {
@@ -261,6 +263,13 @@ export async function render(root = document) {
     if (k === 'logged-in') show(el, logged);
     if (k === 'logged-out') show(el, !logged);
   });
+  // Shopify's own pages, for what has to stay there: tether-account-link="subscriptions" / "payment"
+  // (account.subscriptionsUrl / paymentUrl), or the account itself.
+  qsa(root, sel('account-link')).forEach((a) => {
+    const k = get(a, 'account-link');
+    const u = (k === 'payment' && (cfg.account?.paymentUrl || cfg.account?.subscriptionsUrl)) || (k === 'subscriptions' && cfg.account?.subscriptionsUrl);
+    a.setAttribute('href', u || `https://${cfg.domain}/account`);
+  });
   if (!logged) return;
   const binds = qsa(root, sel('account-bind'));
   if (binds.length) {
@@ -286,24 +295,59 @@ export async function render(root = document) {
       const items = o.lineItems?.nodes || [];
       qsa(node, sel('order-bind')).forEach((el) => {
         const k = get(el, 'order-bind');
-        if (k === 'url') { if (https(o.statusPageUrl)) el.setAttribute('href', o.statusPageUrl); return; }
+        if (k === 'url') { const u = orderUrl(o); if (u) el.setAttribute('href', u); return; }
         if (k === 'image') { const im = items.find((l) => l.image)?.image; if (im) setImage(el, im.url, im.altText || items[0]?.title || ''); return; }
         const v = { name: o.name, date: date(o.processedAt), total: formatMoney(o.totalPrice), status: o.financialStatus?.toLowerCase(), fulfillment: o.fulfillmentStatus?.toLowerCase(), items: items.map((l) => `${l.quantity}× ${l.title}`).join(', ') }[k];
         if (v != null) setText(el, v);
       });
       // Per product of the order: <div tether-order-lines><div><img tether-order-line="image"> <span tether-order-line="title"></span></div></div>
-      qsa(node, sel('order-lines')).forEach((box) => repeat(box, items, (row, l) => {
-        qsa(row, sel('order-line')).concat(row.matches(sel('order-line')) ? [row] : []).forEach((el) => {
-          const k = get(el, 'order-line');
-          if (k === 'image') { if (l.image) setImage(el, l.image.url, l.image.altText || l.title); return; }
-          const v = { title: l.title, 'variant-title': l.variantTitle || '', quantity: String(l.quantity) }[k];
-          if (v != null) setText(el, v);
-        });
-      }));
-      if (get(node, 'order-bind') === 'url' && https(o.statusPageUrl)) node.setAttribute('href', o.statusPageUrl);
+      qsa(node, sel('order-lines')).forEach((box) => fillLines(box, items));
+      if (get(node, 'order-bind') === 'url' && orderUrl(o)) node.setAttribute('href', orderUrl(o));
     }));
   }
+  if (PAGE_ATTRS.some((n) => qsa(root, sel(n)).length)) await (await pages()).renderPages(root);
+}
+
+
+const nid = (g) => String(g || '').split('/').pop().split('?')[0];
+/** The order's page: your own (account.orderUrl: '/account/order?id={id}') or Shopify's status page. */
+function orderUrl(o) {
+  const t = cfg.account?.orderUrl;
+  if (t) return String(t).replace('{id}', encodeURIComponent(nid(o.id)));
+  return https(o.statusPageUrl) ? o.statusPageUrl : null;
+}
+function fillLines(box, items) {
+  repeat(box, items, (row, l) => {
+    qsa(row, sel('order-line')).concat(row.matches(sel('order-line')) ? [row] : []).forEach((el) => {
+      const k = get(el, 'order-line');
+      if (k === 'image') { if (l.image) setImage(el, l.image.url, l.image.altText || l.title); return; }
+      const v = { title: l.title, 'variant-title': l.variantTitle || '', quantity: String(l.quantity) }[k];
+      if (v != null) setText(el, v);
+    });
+  });
+}
+
+// Order page, profile, addresses, subscriptions, returns: their own part (account-pages), loaded
+// only on pages that use them. It gets this module's login state, so both share one session.
+const PAGE_ATTRS = ['order', 'addresses', 'subscriptions', 'profile-form', 'address-form'];
+let pagesPart = null;
+function pages() {
+  pagesPart ||= loadPart('account-pages').then((m) => { m.setup({ server, serverFetch, query, customer, reset: () => { customerCache = null; serverState = null; } }); return m; });
+  return pagesPart;
 }
+const viaPages = (name) => (...a) => pages().then((m) => m[name](...a));
+/** One of the customer's orders, in full (lines, totals, addresses, fulfillments, returns). */
+export const order = viaPages('order');
+export const updateProfile = viaPages('updateProfile');
+export const addresses = viaPages('addresses');
+/** saveAddress({ address1, city, zip, countryCode, … }, { id, isDefault }): creates, or updates with an id. */
+export const saveAddress = viaPages('saveAddress');
+export const deleteAddress = viaPages('deleteAddress');
+export const subscriptions = viaPages('subscriptions');
+/** subscriptionAction(id, 'pause' | 'resume' | 'skip' | 'unskip' | 'cancel') */
+export const subscriptionAction = viaPages('subscriptionAction');
+/** requestReturn(orderId, [{ lineItemId, quantity, reasonId, note }]) */
+export const requestReturn = viaPages('requestReturn');
 
 let bound = false;
 /** Called by the core on mount: finish a login that's coming back, then fill the page. */

package/src/diagnose.js

@@ -23,6 +23,7 @@ const SHOW = new Set([
   'subscription-selected', 'one-time-selected', 'has-savings', 'loading', 'ready', 'error', 'not-found',
   'cart-empty', 'cart-filled', 'cart-has-subscription', 'cart-no-subscription', 'cart-has-discount', 'cart-error', 'cart-warning',
   'list-empty', 'list-filled', 'search-empty', 'search-results', 'logged-in', 'logged-out', 'orders-empty', 'orders-loading',
+  'addresses-loading', 'addresses-empty', 'subscriptions-loading', 'subscriptions-empty',
 ]);
 const BIND = new Set([
   'title', 'description', 'description-text', 'vendor', 'type', 'handle', 'published-at', 'price', 'total-price',
@@ -37,7 +38,10 @@ const ATTRS = new Set(`account account-bind account-link account-login account-l
   country-bind country-label country-select default-plan default-purchase discount discount-code discount-form discount-input
   discount-remove display error group group-add hide-single language limit line line-attribute line-attributes line-id
   line-minus line-plan line-plus line-remove line-show list load-more market-pending one-time-label option option-list
-  option-selected option-value order-bind order-line order-lines orders page-country page-language page-locale page-title plan plan-bind plan-list
+  option-selected option-value order order-bind order-line order-lines order-line-show order-show order-state order-fulfillments
+  fulfillment-bind order-return return-quantity return-reason return-note orders profile-form address-form addresses address-bind
+  address-show address-edit address-new address-delete address-default subscriptions subscription-bind subscription-lines
+  subscription-line subscription-show subscription-action subscription-status subscription-state confirm form-state form-error page-country page-language page-locale page-title plan plan-bind plan-list
   plan-value product products purchase purchase-mode qty qty-minus qty-plus quantity recommendations reverse search
   search-bind search-collections search-input search-limit search-min search-products search-queries search-results
   search-state show soldout-text sort state subscribe-text variant variant-select variant-url max-width max-height crop

package/src/index.js

@@ -21,7 +21,7 @@ import { attr, sel, get, qsa, emit, formatMoney, busy, parseJSONAttr, toAttribut
 import { loadPart, coreModules } from './lazy.js';
 import { mountedLists, liveLists, pruneLive, within, mountProduct, retryFailed, hydrateFromPage, settleMarket, trackMarket } from './mounting.js';
 
-export const VERSION = '0.6.4';
+export const VERSION = '0.6.5';
 
 let initPromise = null;
 let observer = null;
@@ -51,7 +51,7 @@ export function mount(root = document) {
   }
 
   // Customer accounts: their own optional part, when configured and the page (or a login) needs it.
-  if ((cfg.account?.clientId || cfg.account?.server) && (within(root, `[${attr('account-login')}],[${attr('account-bind')}],[${attr('orders')}],[${attr('show')}^="logged-"]`).length
+  if ((cfg.account?.clientId || cfg.account?.server) && (within(root, ['account-login', 'account-bind', 'account-link', 'orders', 'order', 'addresses', 'subscriptions', 'profile-form', 'address-form'].map((n) => `[${attr(n)}]`).join(',') + `,[${attr('show')}^="logged-"]`).length
     || /[?&]code=/.test(window.location.search) || hasAccountSession())) {
     loadPart('account').then((m) => m.mountAccount(root)).catch((err) => reportError(err, 'account'));
   }
@@ -61,9 +61,6 @@ export function mount(root = document) {
     loadPart('search').then((m) => m.mountSearch(root)).catch((err) => reportError(err, 'search'));
   }
 
-  qsa(root, sel('account-link')).forEach((a) => {
-    a.setAttribute('href', `https://${cfg.domain}/account`);
-  });
 
   settleMarket();
   Cart.render();

package/src/lazy-iife.js

@@ -41,3 +41,6 @@ export function loadPart(name) {
   });
   return parts[name];
 }
+
+// Parts that load other parts (account -> account-pages) use this same loader.
+coreModules['lazy.js'] = { loadPart, coreModules };

package/src/lazy.js

@@ -9,6 +9,7 @@ const PARTS = {
   search: () => import('./search.js'),
   extras: () => import('./extras.js'),
   account: () => import('./account.js'),
+  'account-pages': () => import('./account-pages.js'),
   analytics: () => import('./analytics.js'),
 };
 export const loadPart = (name) => PARTS[name]();

package/src/parts/account-pages.js

@@ -0,0 +1,3 @@
+import * as part from '../account-pages.js';
+
+window.Tether.__parts['account-pages'] = part;

package/types/index.d.ts

@@ -131,7 +131,16 @@ export interface TetherConfig {
   } | null;
   /** Customer accounts (optional part): the Headless channel's Customer Account API client id, and options. */
   account?: {
-    clientId: string;
+    /** Browser mode: the Customer Account API client id. */
+    clientId?: string;
+    /** Server mode (recommended): the Worker's account routes, a URL or a path on this site ('/_tether/account'). */
+    server?: string;
+    /** Your own order page: tether-order-bind="url" links there, e.g. '/account/order?id={id}' (else Shopify's status page). */
+    orderUrl?: string;
+    /** Shopify's subscription management page (tether-account-link="subscriptions"); payment methods are changed there too. */
+    subscriptionsUrl?: string;
+    /** A separate page for payment methods (tether-account-link="payment"); default subscriptionsUrl. */
+    paymentUrl?: string;
     /** The page Shopify sends the visitor back to after login (registered as callback URI). Default: the current page. */
     callbackUrl?: string;
     /** Where Shopify sends the visitor after logout (registered as logout URI). Default: the home page. */
@@ -351,6 +360,15 @@ export interface Tether {
     orders(opts?: { first?: number }): Promise<Array<{ id: string; name: string; processedAt: string; financialStatus?: string; fulfillmentStatus?: string; statusPageUrl: string; totalPrice: Money }>>;
     query<T = any>(query: string, variables?: Record<string, unknown>): Promise<T>;
     getToken(): Promise<string | null>;
+    /** One order in full (lines, totals, addresses, fulfillments with tracking, returnable lines); null if not the customer's. */
+    order(id: string | number): Promise<Record<string, any> | null>;
+    updateProfile(fields: { firstName?: string; lastName?: string }): Promise<{ firstName?: string | null; lastName?: string | null }>;
+    addresses(): Promise<Array<CustomerAddress & { isDefault: boolean }>>;
+    saveAddress(address: Partial<CustomerAddressInput> | null, opts?: { id?: string; isDefault?: boolean }): Promise<CustomerAddress>;
+    deleteAddress(id: string): Promise<string>;
+    subscriptions(): Promise<Array<Record<string, any>>>;
+    subscriptionAction(id: string | number, action: 'pause' | 'resume' | 'skip' | 'unskip' | 'cancel'): Promise<Record<string, any>>;
+    requestReturn(orderId: string | number, lines: Array<{ lineItemId: string; quantity: number; reasonId?: string; note?: string }>): Promise<{ id: string; status: string }>;
   };
   primeProduct(product: ShopifyProduct): void;
   normalizeProductKey(raw: string | number): string | null;
@@ -398,3 +416,11 @@ declare global {
     TETHER_LANGUAGE?: string;
   }
 }
+
+export interface CustomerAddressInput {
+  firstName: string; lastName: string; company: string; address1: string; address2: string;
+  city: string; zip: string; zoneCode: string; countryCode: string; phoneNumber: string;
+}
+export interface CustomerAddress extends Partial<CustomerAddressInput> {
+  id: string; province?: string | null; country?: string | null; formatted: string[];
+}

package/dist/esm/chunks/account-NVHPA7AX.js

@@ -1 +0,0 @@
-import{b as f}from"./chunk-L2TRRKYV.js";import"./chunk-FIOZPPC5.js";import"./chunk-AJLPU2JC.js";import{A as R,B as x,D as E,G as j,b as a,e as W,g as I,h as S,o as m,p as k,s as _,u as A,w as X}from"./chunk-K2YEQAIH.js";import"./chunk-VC46IEJQ.js";var O=()=>`${a.prefix}:account:${a.domain}`,G=()=>`${a.prefix}:account-login:${a.domain}`,D=()=>a.account?.remember?window.localStorage:window.sessionStorage,Z=t=>btoa(String.fromCharCode(...new Uint8Array(t))).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),B=()=>Z(crypto.getRandomValues(new Uint8Array(32))),at=async t=>Z(await crypto.subtle.digest("SHA-256",new TextEncoder().encode(t))),N=t=>(a.account?.navigate||(e=>window.location.assign(e)))(t),M=(t,e)=>{try{return JSON.parse(t.getItem(e)||"null")}catch{return null}},L=(t,e,n)=>{try{n?t.setItem(e,JSON.stringify(n)):t.removeItem(e)}catch{}},C=null,c=null,J=null,U=null,g=()=>a.account?.server?new URL(String(a.account.server),window.location.href).href.replace(/\/$/,""):"",z=()=>`${a.prefix}:account-hint:${a.domain}`,$=null;async function q(t,{method:e="GET",body:n}={}){let o=await fetch(`${g()}${t}`,{method:e,credentials:"include",headers:e==="POST"?{"Content-Type":"application/json","X-Tether-Account":"1"}:{},body:n?JSON.stringify(n):void 0}),s=await o.json().catch(()=>({}));if(!o.ok&&o.status!==401)throw new S(`Customer accounts: ${s.error||o.status}`,{status:o.status});return s}async function H(){$||($=await q("/me"));try{$.loggedIn?window.localStorage.setItem(z(),"1"):window.localStorage.removeItem(z())}catch{}return $}async function P(){if(C)return C;let t=a.account?.shopDomain||a.domain,e=s=>fetch(`https://${t}/.well-known/${s}`).then(r=>{if(!r.ok)throw new S(`Customer accounts: ${s} answered ${r.status}`,{status:r.status});return r.json()}),[n,o]=await Promise.all([e("openid-configuration"),e("customer-account-api")]);return C={...n,graphql:o.graphql_api},C}var st=()=>a.account?.callbackUrl||`${window.location.origin}${window.location.pathname}`;function tt(){return g()?!!$?.loggedIn:!!(c?.refresh||c?.access&&c.expiresAt>Date.now())}async function ct({returnTo:t=window.location.href,locale:e}={}){if(g()){let d=new URL(`${g()}/login`);d.searchParams.set("returnTo",t);let h=e||a.account.locale||(a.locale||"").split("-")[0];h&&d.searchParams.set("locale",h),a.country&&d.searchParams.set("country",String(a.country).toUpperCase()),N(d.toString());return}if(!a.account?.clientId)throw new S("Customer accounts: set account.clientId",{code:"NOT_CONFIGURED"});let n=await P(),o=B(),s=B(),r=B(),u=st();L(window.sessionStorage,G(),{state:o,nonce:s,verifier:r,redirect:u,returnTo:t,at:Date.now()});let i=new URL(n.authorization_endpoint),w={client_id:a.account.clientId,scope:"openid email customer-account-api:full",response_type:"code",redirect_uri:u,state:o,nonce:s,code_challenge:await at(r),code_challenge_method:"S256"},l=e||a.account.locale||(a.locale||"").split("-")[0];l&&(w.locale=l),a.country&&(w.region_country=String(a.country).toUpperCase()),Object.entries(w).forEach(([d,h])=>i.searchParams.set(d,h)),N(i.toString())}async function et(t){let e=await P(),n=await fetch(a.account.tokenUrl||e.token_endpoint,{method:"POST",body:new URLSearchParams(t)}),o=await n.json().catch(()=>({}));if(!n.ok||!o.access_token)throw new S(`Customer accounts: token ${n.status} ${o.error||""}`.trim(),{status:n.status,code:n.status===400||n.status===401?"SESSION_ENDED":"TOKEN_FAILED"});return o}function it(t){try{return JSON.parse(atob(t.split(".")[1].replace(/-/g,"+").replace(/_/g,"/")))}catch{return null}}function nt(t,e=c){c={access:t.access_token,expiresAt:Date.now()+Math.max(0,(Number(t.expires_in)||3600)-120)*1e3,refresh:t.refresh_token||e?.refresh,idToken:t.id_token||e?.idToken},L(D(),O(),c)}async function lt(){let t=new URLSearchParams(window.location.search),e=M(window.sessionStorage,G());if(!e||!t.has("code")&&!t.has("error")||t.get("state")!==e.state)return!1;L(window.sessionStorage,G(),null);let n=new URL(window.location.href);if(["code","state","iss","error","error_description"].forEach(w=>n.searchParams.delete(w)),window.history.replaceState(window.history.state,"",n),t.has("error"))return A("account-error",{error:t.get("error")}),!1;if(Date.now()-e.at>10*6e4)throw new S("Customer accounts: the login took too long, please try again");let o=await et({grant_type:"authorization_code",client_id:a.account.clientId,redirect_uri:e.redirect,code:t.get("code"),code_verifier:e.verifier}),s=await P(),r=it(o.id_token||""),u=[].concat(r?.aud||[]);if(!r||r.nonce!==e.nonce||r.iss!==s.issuer||!u.includes(a.account.clientId)||r.exp*1e3<Date.now())throw new S("Customer accounts: the login answer did not check out (nonce/issuer/audience)");nt(o,null),await ot(),A("account-login",{});let i=e.returnTo&&new URL(e.returnTo,window.location.href);return i&&i.origin===window.location.origin&&i.href!==n.href&&N(i.href),!0}async function v(){return g()||(c||(c=M(D(),O())),!c)?null:c.access&&c.expiresAt>Date.now()?c.access:c.refresh?(J||(J=(async()=>{try{nt(await et({grant_type:"refresh_token",client_id:a.account.clientId,refresh_token:c.refresh})),await ot()}catch(t){if(t.code==="SESSION_ENDED")F();else throw t}finally{J=null}})()),await J,c?.access||null):(F(),null)}function F(){c=null,U=null,L(D(),O(),null),f.customerAccessToken=null}async function ot(){f.customerAccessToken=c?.access||null,f.id()&&c?.access&&await f.setBuyerIdentity({customerAccessToken:c.access},{create:!1}).catch(t=>I(t,"account cart"))}async function rt(t,e={}){if(g())throw new S("Customer accounts in server mode only answer customer() and orders()",{code:"NOT_ALLOWED"});let n=await v();if(!n)throw new S("Not logged in",{code:"NOT_LOGGED_IN"});let o=await P(),s=i=>fetch(o.graphql,{method:"POST",headers:{"Content-Type":"application/json",Authorization:i},body:JSON.stringify({query:t,variables:e})}),r=await s(n);r.status===401&&c?.refresh&&(c.expiresAt=0,r=await s(await v()));let u=await r.json().catch(()=>({}));if(!r.ok||u.errors?.length)throw new S(u.errors?.map(i=>i.message).join(" | ")||`Customer accounts: ${r.status}`,{status:r.status});return u.data}async function ut(){if(g()){let e=await H();return e.loggedIn?{...e.customer,emailAddress:{emailAddress:e.customer.email},defaultAddress:{formatted:e.customer.address}}:null}return U||(U=(await rt("query TetherCustomer{customer{id firstName lastName displayName emailAddress{emailAddress}defaultAddress{formatted}}}")).customer,U)}async function dt({first:t=10}={}){return g()?(await q(`/orders?first=${t}`)).orders||[]:(await rt("query TetherOrders($first:Int!){customer{orders(first:$first,sortKey:PROCESSED_AT,reverse:true){nodes{id name processedAt financialStatus fulfillmentStatus statusPageUrl totalPrice{amount currencyCode}lineItems(first:20){nodes{title variantTitle quantity image{url altText}}}}}}}",{first:t})).customer?.orders?.nodes||[]}async function ft({returnTo:t=a.account?.logoutUrl||`${window.location.origin}/`}={}){if(g()){let s=await q("/logout",{method:"POST",body:{returnTo:t,cartId:f.id()}});$={loggedIn:!1};try{window.localStorage.removeItem(z())}catch{}A("account-logout",{}),s.logoutUrl?N(s.logoutUrl):K(document);return}let e=c?.idToken||M(D(),O())?.idToken;if(f.id()&&await f.setBuyerIdentity({customerAccessToken:null},{create:!1}).catch(()=>{}),F(),A("account-logout",{}),!e){K(document);return}let n=await P(),o=new URL(n.end_session_endpoint);o.searchParams.set("id_token_hint",e),o.searchParams.set("post_logout_redirect_uri",t),N(o.toString())}var Y=t=>{try{return new URL(t).protocol==="https:"}catch{return!1}},wt=t=>{try{return new Date(t).toLocaleDateString(a.locale||void 0)}catch{return t}};async function K(t=document){let e=g()?!!(await H().catch(()=>({loggedIn:!1}))).loggedIn:tt()||!!await v().catch(()=>null);if(_(t,m("show")).forEach(s=>{let r=k(s,"show");r==="logged-in"&&E(s,e),r==="logged-out"&&E(s,!e)}),!e)return;let n=_(t,m("account-bind"));if(n.length){let s=await ut().catch(r=>(I(r,"account"),null));n.forEach(r=>{let u={"first-name":s?.firstName,"last-name":s?.lastName,name:s?.displayName,email:s?.emailAddress?.emailAddress,address:s?.defaultAddress?.formatted?.join(", ")}[k(r,"account-bind")];u!=null&&x(r,u)})}let o=_(t,m("orders"));if(o.length){let s=(i,w)=>_(t,m("show")).forEach(l=>{let d=k(l,"show");d==="orders-loading"&&E(l,i),d==="orders-empty"&&E(l,w)});s(!0,!1);let r=!1,u=await dt({first:parseInt(k(o[0],"limit")||"10",10)}).catch(i=>(I(i,"orders"),r=!0,[]));s(!1,!r&&u.length===0),o.forEach(i=>j(i,u,(w,l)=>{let d=l.lineItems?.nodes||[];_(w,m("order-bind")).forEach(h=>{let T=k(h,"order-bind");if(T==="url"){Y(l.statusPageUrl)&&h.setAttribute("href",l.statusPageUrl);return}if(T==="image"){let y=d.find(b=>b.image)?.image;y&&R(h,y.url,y.altText||d[0]?.title||"");return}let p={name:l.name,date:wt(l.processedAt),total:X(l.totalPrice),status:l.financialStatus?.toLowerCase(),fulfillment:l.fulfillmentStatus?.toLowerCase(),items:d.map(y=>`${y.quantity}\xD7 ${y.title}`).join(", ")}[T];p!=null&&x(h,p)}),_(w,m("order-lines")).forEach(h=>j(h,d,(T,p)=>{_(T,m("order-line")).concat(T.matches(m("order-line"))?[T]:[]).forEach(y=>{let b=k(y,"order-line");if(b==="image"){p.image&&R(y,p.image.url,p.image.altText||p.title);return}let V={title:p.title,"variant-title":p.variantTitle||"",quantity:String(p.quantity)}[b];V!=null&&x(y,V)})})),k(w,"order-bind")==="url"&&Y(l.statusPageUrl)&&w.setAttribute("href",l.statusPageUrl)}))}}var Q=!1;async function yt(t=document){if(!Q){if(Q=!0,document.addEventListener("click",e=>{let n=e.target;n.closest?.(m("account-login"))?(e.preventDefault(),ct().catch(o=>I(o,"login"))):n.closest?.(m("account-logout"))&&(e.preventDefault(),ft().catch(o=>I(o,"logout")))}),g()){let e=new URL(window.location.href);e.searchParams.get("account")&&(e.searchParams.delete("account"),window.history.replaceState(window.history.state,"",e),A("account-login",{})),f.beforeCheckout=async()=>{if(!(await H()).loggedIn||!f.id())return null;let n=await q("/cart",{method:"POST",body:{cartId:f.id()}}).catch(()=>null);return n?.checkoutUrl?`${n.checkoutUrl}${n.checkoutUrl.includes("?")?"&":"?"}logged_in=true`:null}}else{try{await lt()}catch(e){I(e,"login")}!f.customerAccessToken&&await v().catch(()=>null)&&(f.customerAccessToken=c.access)}W("account",tt()?"logged in":"logged out")}await K(t)}export{ut as customer,v as getToken,lt as handleCallback,tt as isLoggedIn,ct as login,ft as logout,yt as mountAccount,dt as orders,rt as query,K as render};