@occluze/tether 0.6.7 → 0.7.0

package/src/product-state.ts

@@ -0,0 +1,318 @@
+/**
+ * What a product scope shows for the visitor's choice: the variant, the purchase it is bought as, its prices, the
+ * text of every `tether-bind` and every `tether-show` condition. Pure, no DOM and no config: the browser scope
+ * (`product.ts`) and the server's `initialState()` (`initial.ts`) derive their view here, so a server-rendered page
+ * shows what the script shows when it takes over.
+ */
+import {
+  GID,
+  allPlans,
+  allocationFor,
+  findPlan,
+  planAdjustment,
+  planCheckoutCharge,
+  planPrice,
+  planSavings,
+} from './selling-plans.ts';
+import { fromMinorUnits, toMinorUnits } from './amounts.ts';
+import type { Money } from './shopify-values.ts';
+import type { Product, ProductVariant } from './fragments.ts';
+import type { PlanInGroup } from './selling-plans.ts';
+
+/** Option name → chosen value. */
+export type Selection = Record<string, string>;
+/**
+ * How the visitor wants to buy. Buying once keeps the plan offered next to the one-time price (the subscription
+ * binds `subscription-price` and `plan-name` show it, and subscribing switches to it); `null` for a product without
+ * plans.
+ */
+export type Purchase = { kind: 'one-time'; offeredPlanId: string | null } | { kind: 'subscription'; planId: string };
+/** How the line is bought: on a plan only when the visitor subscribes and the variant is on that plan. */
+type LinePurchase = { kind: 'one-time' } | { kind: 'subscription'; planId: string };
+/** What the visitor chose, before it is checked against the product. */
+interface ProductChoice {
+  selected: Selection;
+  purchase: Purchase;
+  quantity: number;
+}
+export type ShowCondition =
+  | 'in-stock'
+  | 'out-of-stock'
+  | 'backorder'
+  | 'on-sale'
+  | 'not-on-sale'
+  | 'has-variants'
+  | 'single-variant'
+  | 'low-stock'
+  | 'plenty-in-stock'
+  | 'subscription-available'
+  | 'subscription-unavailable'
+  | 'subscription-only'
+  | 'one-time-available'
+  | 'subscription-selected'
+  | 'one-time-selected'
+  | 'has-savings';
+export interface ProductView {
+  variant: ProductVariant;
+  /** The selection, matching `variant`. */
+  selected: Selection;
+  /** The choice, made valid for the product and `variant`. */
+  purchase: Purchase;
+  /** The purchase's plan, offered or chosen. */
+  plan: PlanInGroup | null;
+  /** How the line is bought. */
+  line: LinePurchase;
+  /** The variant is on at least one plan. */
+  subscriptionAvailable: boolean;
+  quantity: number;
+  /** What one item costs as bought. */
+  price: Money;
+  /** Only when on sale. */
+  compareAtPrice: Money | null;
+  /** What `plan` saves on the one-time price. */
+  savings: { amount: Money | null; percentage: number };
+  show: Record<ShowCondition, boolean>;
+}
+/** How the caller writes values as text. */
+export interface Formatters {
+  money: (money: Money | null) => string;
+  percent: (percentage: number) => string;
+}
+/** What a bind writes; `null` and `undefined` clear it. */
+type BindText = string | number | null | undefined;
+
+const PERCENT = 100;
+
+const timesQuantity = (money: Money, quantity: number): Money =>
+  fromMinorUnits(toMinorUnits(money) * quantity, money.currencyCode);
+
+export const selectionOf = (variant: ProductVariant): Selection =>
+  Object.fromEntries(variant.selectedOptions.map((option) => [option.name, option.value]));
+
+/** @returns The variant with exactly these option values. */
+function findVariant(product: Product, selected: Selection): ProductVariant | null {
+  return (
+    product.variants.nodes.find((variant) =>
+      variant.selectedOptions.every((option) => selected[option.name] === option.value),
+    ) ?? null
+  );
+}
+
+/**
+ * @param name An option name.
+ * @returns True when a variant for sale has this value and the other selected values.
+ */
+export function isValueAvailable(product: Product, selected: Selection, name: string, value: string): boolean {
+  return product.variants.nodes.some(
+    (variant) =>
+      variant.availableForSale &&
+      variant.selectedOptions.every((option) =>
+        option.name === name ? option.value === value : selected[option.name] === option.value,
+      ),
+  );
+}
+
+/** @returns The plan subscribed on, or offered while buying once. */
+export const purchasePlanId = (purchase: Purchase): string | null =>
+  purchase.kind === 'subscription' ? purchase.planId : purchase.offeredPlanId;
+
+/** @returns On the plan when subscribing and the variant is on it, else once. */
+export function linePurchase(purchase: Purchase, variant: ProductVariant | null): LinePurchase {
+  if (purchase.kind === 'subscription' && allocationFor(variant, purchase.planId)) return purchase;
+  return { kind: 'one-time' };
+}
+
+/**
+ * The purchase the visitor wants, made valid for the product and variant: one-time without plans, a subscription when
+ * the product requires one, and a plan the variant is on when it is on any (else a plan of the product, for the binds
+ * to offer).
+ *
+ * @param kind The way of buying the visitor asked for.
+ * @param preferredPlanId The plan to keep when it is the product's: the visitor's last one.
+ */
+export function normalisePurchase(
+  product: Product,
+  variant: ProductVariant | null,
+  kind: Purchase['kind'],
+  preferredPlanId: string | null,
+): Purchase {
+  const plans = allPlans(product);
+  const known = plans.find((plan) => plan.id === preferredPlanId) ?? plans[0];
+  if (!known) return { kind: 'one-time', offeredPlanId: null };
+  const onVariant = allocationFor(variant, known.id)
+    ? known
+    : (plans.find((plan) => allocationFor(variant, plan.id)) ?? known);
+  if (product.requiresSellingPlan || kind === 'subscription') return { kind: 'subscription', planId: onVariant.id };
+  return { kind: 'one-time', offeredPlanId: onVariant.id };
+}
+
+interface InitialChoiceOptions {
+  /** A variant id or gid (`?variant=`); the first variant for sale without. */
+  variant?: string | null | undefined;
+  /** A plan to subscribe on (`?selling_plan=`). */
+  sellingPlan?: string | null | undefined;
+  /** The plan offered first, by id, name or option value. */
+  defaultPlan?: string | null | undefined;
+  /** `subscription` subscribes; anything else buys once. */
+  defaultPurchase?: string | null | undefined;
+}
+
+/** What a product starts with before the visitor chooses anything. */
+export function initialChoice(
+  product: Product,
+  { variant, sellingPlan, defaultPlan, defaultPurchase }: InitialChoiceOptions,
+): Omit<ProductChoice, 'quantity'> {
+  const variants = product.variants.nodes;
+  const wantedId = GID.variant(variant);
+  const start =
+    variants.find((candidate) => candidate.id === wantedId) ??
+    variants.find((candidate) => candidate.availableForSale) ??
+    variants[0] ??
+    null;
+  const fromUrl = findPlan(product, sellingPlan);
+  const offered = fromUrl ?? findPlan(product, defaultPlan);
+  const kind = fromUrl || defaultPurchase === 'subscription' ? 'subscription' : 'one-time';
+  return {
+    selected: start ? selectionOf(start) : {},
+    purchase: normalisePurchase(product, start, kind, offered?.id ?? null),
+  };
+}
+
+function showConditions(
+  variant: ProductVariant,
+  lowStock: number,
+  variantCount: number,
+  sale: Pick<ProductView, 'line' | 'subscriptionAvailable' | 'compareAtPrice' | 'savings'>,
+  requiresSellingPlan: boolean,
+): Record<ShowCondition, boolean> {
+  const stock = variant.quantityAvailable;
+  const low = stock != null && stock > 0 && stock <= lowStock;
+  const onSale = sale.compareAtPrice !== null;
+  const onPlan = sale.line.kind === 'subscription';
+  return {
+    'in-stock': variant.availableForSale,
+    'out-of-stock': !variant.availableForSale,
+    backorder: variant.availableForSale && variant.currentlyNotInStock,
+    'on-sale': onSale,
+    'not-on-sale': !onSale,
+    'has-variants': variantCount > 1,
+    'single-variant': variantCount === 1,
+    'low-stock': low,
+    'plenty-in-stock': variant.availableForSale && !low,
+    'subscription-available': sale.subscriptionAvailable,
+    'subscription-unavailable': !sale.subscriptionAvailable,
+    'subscription-only': requiresSellingPlan,
+    'one-time-available': !requiresSellingPlan,
+    'subscription-selected': onPlan,
+    'one-time-selected': !onPlan,
+    'has-savings': onPlan ? sale.savings.percentage > 0 : onSale,
+  };
+}
+
+/**
+ * The view for the visitor's choice. A selection no variant has falls back to the first variant.
+ *
+ * @param lowStock `low-stock` at this many or fewer.
+ * @returns `null` for a product without variants.
+ */
+export function productView(product: Product, choice: ProductChoice, lowStock: number): ProductView | null {
+  const exact = findVariant(product, choice.selected);
+  const variant = exact ?? product.variants.nodes[0];
+  if (!variant) return null;
+  const purchase = normalisePurchase(product, variant, choice.purchase.kind, purchasePlanId(choice.purchase));
+  const planId = purchasePlanId(purchase);
+  const plans = allPlans(product);
+  const line = linePurchase(purchase, variant);
+  const allocation = line.kind === 'subscription' ? allocationFor(variant, line.planId) : null;
+  // The plan helpers fall back to the one-time price only without a variant, which `variant` rules out.
+  const price = allocation ? (planPrice(variant, planId) ?? variant.price) : variant.price;
+  const compareAt = allocation?.priceAdjustments[0]?.compareAtPrice ?? variant.compareAtPrice;
+  const sale = {
+    line,
+    subscriptionAvailable: plans.some((plan) => allocationFor(variant, plan.id)),
+    compareAtPrice: compareAt && parseFloat(compareAt.amount) > parseFloat(price.amount) ? compareAt : null,
+    savings: planSavings(variant, planId),
+  };
+  return {
+    ...sale,
+    variant,
+    selected: exact ? choice.selected : selectionOf(variant),
+    purchase,
+    plan: plans.find((plan) => plan.id === planId) ?? null,
+    quantity: choice.quantity,
+    price,
+    show: showConditions(variant, lowStock, product.variants.nodes.length, sale, product.requiresSellingPlan),
+  };
+}
+
+/** The `tether-bind` values that follow the variant and purchase. Thunks, so only the binds on the page are computed. */
+export function variantBindTexts(view: ProductView, format: Formatters): Map<string, () => BindText> {
+  const { variant, plan, price, compareAtPrice, quantity } = view;
+  const planId = purchasePlanId(view.purchase);
+  // Prices for the quantity count one item when it is 0 (an optional bundle item).
+  const forQuantity = (money: Money) => timesQuantity(money, Math.max(1, quantity));
+  const checkoutCharge = () => {
+    const charge = view.line.kind === 'subscription' ? (planCheckoutCharge(variant, planId) ?? price) : price;
+    return format.money(forQuantity(charge));
+  };
+  const discountPercentage = () => {
+    if (!compareAtPrice) return '0%';
+    return `${Math.round((1 - parseFloat(price.amount) / parseFloat(compareAtPrice.amount)) * PERCENT)}%`;
+  };
+  const discountAmount = () => {
+    if (!compareAtPrice) return '';
+    return format.money(fromMinorUnits(toMinorUnits(compareAtPrice) - toMinorUnits(price), price.currencyCode));
+  };
+  const texts: Record<string, () => BindText> = {
+    price: () => format.money(price),
+    'total-price': () => format.money(forQuantity(price)),
+    'one-time-price': () => format.money(variant.price),
+    'subscription-price': () => format.money(planId ? planPrice(variant, planId) : null),
+    'subscription-savings': () => format.percent(view.savings.percentage),
+    'subscription-savings-amount': () => format.money(view.savings.amount),
+    'checkout-charge': checkoutCharge,
+    'plan-name': () => plan?.name,
+    'plan-description': () => plan?.description,
+    'plan-group': () => plan?.group.name,
+    'compare-at-price': () => format.money(compareAtPrice),
+    'unit-price': () => format.money(variant.unitPrice),
+    'discount-percentage': discountPercentage,
+    'discount-amount': discountAmount,
+    'variant-title': () => variant.title,
+    'variant-id': () => variant.id,
+    sku: () => variant.sku,
+    barcode: () => variant.barcode,
+    stock: () => variant.quantityAvailable,
+    quantity: () => quantity,
+  };
+  return new Map(Object.entries(texts));
+}
+/**
+ * The `tether-plan-bind` values of one plan in a plan list, for the variant.
+ *
+ * @param planId The list item's `tether-plan-value`.
+ * @param plan The product's plan with that id.
+ */
+export function planBindTexts(
+  variant: ProductVariant,
+  planId: string,
+  plan: PlanInGroup | undefined,
+  format: Formatters,
+): Map<string, () => BindText> {
+  const adjustmentText = () => {
+    const adjustment = planAdjustment(plan);
+    if (!adjustment) return '';
+    return adjustment.type === 'percentage' ? `${adjustment.value}%` : format.money(adjustment.value);
+  };
+  const texts: Record<string, () => BindText> = {
+    name: () => plan?.name,
+    // The option values alone ("1 month"), without the price text a store may put in the plan name.
+    option: () => (plan?.options ?? []).map((option) => option.value).join(', '),
+    description: () => plan?.description,
+    price: () => format.money(planPrice(variant, planId)),
+    savings: () => format.percent(planSavings(variant, planId).percentage),
+    'savings-amount': () => format.money(planSavings(variant, planId).amount),
+    adjustment: adjustmentText,
+  };
+  return new Map(Object.entries(texts));
+}

package/src/product.ts

@@ -0,0 +1,308 @@
+/**
+ * ProductScope: everything inside [tether-product="<handle>"] binds to one Shopify product: options, variants,
+ * quantity, subscriptions and add to cart. The scope holds the visitor's choice and the actions on it;
+ * `product-state.ts` derives what the choice shows, `product-render.ts` and `variant-render.ts` write it, and
+ * `product-events.ts` turns clicks and changes into actions.
+ */
+import { cfg } from './config.ts';
+import {
+  attr,
+  sel,
+  get,
+  has,
+  scoped,
+  emit,
+  setText,
+  notifyLayoutChanged,
+  watchImages,
+  parseJSONAttr,
+  attributesFromJson,
+} from './dom.ts';
+import { Cart } from './cart.ts';
+import { allPlans, allocationFor, findPlan, GID } from './selling-plans.ts';
+import {
+  initialChoice,
+  linePurchase,
+  normalisePurchase,
+  productView,
+  purchasePlanId,
+  selectionOf,
+} from './product-state.ts';
+import { writeProduct } from './product-render.ts';
+import { writeVariant } from './variant-render.ts';
+import { bindProductEvents } from './product-events.ts';
+import type { Product, ProductVariant } from './fragments.ts';
+import type { ShopifyCart } from './cart/store.ts';
+import type { PlanInGroup } from './selling-plans.ts';
+import type { Purchase, Selection } from './product-state.ts';
+
+/** What a scope adds to the cart. */
+interface CartLineInput {
+  merchandiseId: string;
+  quantity: number;
+  sellingPlanId?: string;
+  attributes?: { key: string; value: string }[];
+}
+
+export const scopes = new WeakMap<Element, ProductScope>();
+
+const productSelector = () => sel('product');
+
+/**
+ * Option names as written in the markup (the build's language), by product handle. In another language Shopify
+ * translates them (Size → Größe), so markup names that aren't the product's are matched by position.
+ */
+const knownOptionNames = new Map<string, string[]>();
+
+export function rememberOptionNames(products: readonly Pick<Product, 'handle' | 'options'>[]): void {
+  products.forEach((product) => {
+    if (!knownOptionNames.has(product.handle)) {
+      knownOptionNames.set(
+        product.handle,
+        product.options.map((option) => option.name),
+      );
+    }
+  });
+}
+
+const isInput = (el: Element): el is HTMLInputElement => el.tagName === 'INPUT';
+
+const isField = (el: Element): el is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement =>
+  el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA';
+
+/**
+ * @param el A `tether-line-attribute` field.
+ * @returns Its value for the cart line; `null` for an unchecked or empty field.
+ */
+function lineAttributeValue(el: HTMLElement): string | null {
+  if (isInput(el) && el.type === 'checkbox') {
+    if (!el.checked) return null;
+    return el.value && el.value !== 'on' ? el.value : 'Yes';
+  }
+  if (isInput(el) && el.type === 'radio') return el.checked ? el.value : null;
+  return (isField(el) && el.value) || null;
+}
+
+export class ProductScope {
+  readonly root: HTMLElement;
+  product: Product;
+  plans: PlanInGroup[];
+  selected: Selection;
+  /** How the visitor buys; `setPurchase` and `selectPlan` change it. */
+  purchase: Purchase;
+  variant: ProductVariant | null;
+  quantity: number;
+
+  constructor(root: HTMLElement, product: Product) {
+    this.root = root;
+    this.product = product;
+    this.plans = allPlans(product);
+    const params = new URLSearchParams(window.location.search);
+    const choice = initialChoice(product, {
+      variant: params.get('variant') || get(root, 'variant'),
+      sellingPlan: params.get('selling_plan'),
+      defaultPlan: get(root, 'default-plan'),
+      defaultPurchase: get(root, 'default-purchase') || cfg.defaultPurchase,
+    });
+    this.selected = choice.selected;
+    this.purchase = choice.purchase;
+    this.variant = null;
+    this.quantity = has(root, 'quantity') ? Math.max(0, parseInt(get(root, 'quantity') ?? '', 10) || 0) : 1;
+
+    scopes.set(root, this);
+    root.setAttribute(attr('state'), 'ready');
+    root.removeAttribute(attr('error'));
+    this.renderProduct();
+    bindProductEvents(this);
+    this.renderVariant();
+
+    watchImages(root, 'product');
+    notifyLayoutChanged('product');
+    emit('product-ready', { product, scope: this }, root);
+  }
+
+  /** New data for the same product (a country switch). Keeps the visitor's choice. */
+  update(product: Product): void {
+    const variantId = this.variant?.id;
+    this.product = product;
+    this.plans = allPlans(product);
+    const same = product.variants.nodes.find((variant) => variant.id === variantId);
+    if (same) this.selected = selectionOf(same);
+    this.root.setAttribute(attr('state'), 'ready');
+    this.root.removeAttribute(attr('error'));
+    this.renderProduct();
+    this.renderVariant();
+    notifyLayoutChanged('product');
+    emit('product-updated', { product, scope: this }, this.root);
+  }
+
+  /** @returns Matches in this scope, including the root itself (a card link with tether-bind="link"). */
+  $(selector: string): HTMLElement[] {
+    const inner = scoped(this.root, selector, productSelector());
+    return this.root.matches(selector) ? [this.root, ...inner] : inner;
+  }
+
+  /**
+   * @param authored An option name in the markup.
+   * @returns The product's option of that name, or at that position in the build's language.
+   */
+  optName(authored: string | null): string {
+    if (!authored) return '';
+    const { options } = this.product;
+    if (options.some((option) => option.name === authored)) return authored;
+    const index = (knownOptionNames.get(this.product.handle) ?? []).indexOf(authored);
+    return options[index]?.name ?? authored;
+  }
+
+  get plan(): PlanInGroup | null {
+    const planId = purchasePlanId(this.purchase);
+    return this.plans.find((plan) => plan.id === planId) ?? null;
+  }
+
+  /** True when the current variant can be bought on a plan. */
+  get subscriptionAvailable(): boolean {
+    return this.plans.some((plan) => allocationFor(this.variant, plan.id));
+  }
+
+  /** True when the line is bought on a plan: subscribing, and the variant is on the plan. */
+  get isSubscription(): boolean {
+    return linePurchase(this.purchase, this.variant).kind === 'subscription';
+  }
+
+  /** @returns What would be added to the cart right now. */
+  getLine(): CartLineInput | null {
+    if (!this.variant) return null;
+    const line: CartLineInput = { merchandiseId: this.variant.id, quantity: this.quantity };
+    const bought = linePurchase(this.purchase, this.variant);
+    if (bought.kind === 'subscription') line.sellingPlanId = bought.planId;
+    const attributes = this.collectAttributes();
+    if (attributes.length) line.attributes = attributes;
+    return line;
+  }
+
+  /** @returns `tether-line-attributes` and the filled `tether-line-attribute` fields. */
+  collectAttributes(): { key: string; value: string }[] {
+    const fixed = attributesFromJson(parseJSONAttr(this.root, 'line-attributes'));
+    const fields = this.$(sel('line-attribute')).flatMap((el) => {
+      const value = lineAttributeValue(el);
+      return value === null ? [] : [{ key: get(el, 'line-attribute') ?? '', value }];
+    });
+    return [...fixed, ...fields];
+  }
+
+  /**
+   * Selects an option value. A combination no variant has moves to the closest variant with the value: the most other
+   * choices kept, then one for sale.
+   */
+  select(name: string, value: string): void {
+    if (this.selected[name] === value) return;
+    const withValue = this.product.variants.nodes.filter((variant) =>
+      variant.selectedOptions.some((option) => option.name === name && option.value === value),
+    );
+    const [firstWithValue] = withValue;
+    // A value no variant has: nothing to select, the visitor's choice stays.
+    if (!firstWithValue) return;
+    const next = { ...this.selected, [name]: value };
+    if (!withValue.some((variant) => variant.selectedOptions.every((option) => next[option.name] === option.value))) {
+      const score = (variant: ProductVariant) => {
+        const kept = variant.selectedOptions.filter(
+          (option) => option.name !== name && this.selected[option.name] === option.value,
+        ).length;
+        // One kept choice outweighs being for sale.
+        return kept * 2 + (variant.availableForSale ? 1 : 0);
+      };
+      const closest = withValue.reduce(
+        (best, variant) => (score(variant) > score(best) ? variant : best),
+        firstWithValue,
+      );
+      Object.assign(next, selectionOf(closest));
+    }
+    this.selected = next;
+    this.renderVariant();
+  }
+
+  /** @param id A variant gid or numeric id. */
+  selectVariant(id: string): void {
+    const variant = this.product.variants.nodes.find((candidate) => candidate.id === GID.variant(id));
+    if (!variant) return;
+    this.selected = selectionOf(variant);
+    this.renderVariant();
+  }
+
+  setPurchase(kind: Purchase['kind']): void {
+    const next = normalisePurchase(this.product, this.variant, kind, purchasePlanId(this.purchase));
+    // The product decides when the wanted kind isn't possible (no plans, or a plan required).
+    if (next.kind === this.purchase.kind) return;
+    this.purchase = next;
+    this.renderVariant();
+  }
+
+  /** @param ref A plan id, numeric id, name or option value. */
+  selectPlan(ref: string | null): void {
+    const plan = findPlan(this.product, ref);
+    if (!plan) return;
+    this.purchase = { kind: 'subscription', planId: plan.id };
+    this.renderVariant();
+  }
+
+  setQuantity(quantity: number | string): void {
+    const minimum = has(this.root, 'quantity') ? 0 : 1;
+    this.quantity = Math.max(minimum, parseInt(String(quantity), 10) || 0);
+    this.$(sel('qty')).forEach((el) => {
+      setText(el, this.quantity);
+    });
+    this.renderVariant();
+  }
+
+  /** @returns The cart after adding; `null` when the variant can't be added. */
+  async addToCart(): Promise<ShopifyCart | null> {
+    if (!this.variant?.availableForSale) return null;
+    const line = this.getLine();
+    if (!line || line.quantity < 1) return null;
+    const cart = await Cart.add(line);
+    emit('product-added', { product: this.product, variant: this.variant, line }, this.root);
+    return cart;
+  }
+
+  /** Learns the markup's option names when they are the product's, then writes the product. */
+  renderProduct(): void {
+    const { product } = this;
+    if (!knownOptionNames.has(product.handle)) {
+      const authored = this.$(`${sel('option-list')},select${sel('option')}`).map(
+        (el) => get(el, 'option-list') || get(el, 'option'),
+      );
+      if (authored.some((name) => product.options.some((option) => option.name === name))) {
+        rememberOptionNames([product]);
+      }
+    }
+    writeProduct(this);
+  }
+
+  /** Derives the view of the current choice, keeps its variant, selection and purchase, and writes it. */
+  renderVariant(): void {
+    const view = productView(
+      this.product,
+      { selected: this.selected, purchase: this.purchase, quantity: this.quantity },
+      cfg.lowStock,
+    );
+    if (!view) {
+      this.variant = null;
+      return;
+    }
+    this.variant = view.variant;
+    this.selected = view.selected;
+    this.purchase = view.purchase;
+    writeVariant(this, view);
+    emit(
+      'variant-changed',
+      {
+        product: this.product,
+        variant: view.variant,
+        selected: { ...view.selected },
+        purchase: view.purchase.kind,
+        sellingPlanId: view.line.kind === 'subscription' ? view.line.planId : null,
+      },
+      this.root,
+    );
+  }
+}