fontdue-js 3.6.0 → 3.8.0

package/dist/__tests__/fontPackSelection.test.js

@@ -0,0 +1,435 @@
+import { describe, it, expect, vi } from 'vitest';
+
+// Mock react-relay's graphql tag since productState.ts uses it at import time
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  fetchQuery: vi.fn()
+}));
+import reducer, { isSelected } from '../reducer.js';
+import { additionalCost } from '../selection.js';
+function makeState() {
+  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    cartOpen: false,
+    precartOpen: false,
+    selectedSkuIds: {},
+    requestedSkuIds: [],
+    licenseOptions: [],
+    skuStyleIds: {},
+    collectionSkus: {},
+    productSkuIds: {},
+    viewedProductId: null,
+    skuPrices: {},
+    fetchedCollectionIds: [],
+    storeModalRoute: {
+      name: 'index'
+    },
+    storeModalHistory: [],
+    orderVariableSelections: [],
+    licenseeIsBillingIdentity: null,
+    ...overrides
+  };
+}
+const sku = (id, amount) => ({
+  id,
+  price: {
+    amount
+  }
+});
+const style = (id, skuId, amount) => ({
+  id,
+  sku: sku(skuId, amount)
+});
+const selected = state => Object.keys(state.selectedSkuIds).filter(skuId => state.selectedSkuIds[skuId]).sort();
+
+// ---------------------------------------------------------------------------
+// Fixture: "Starter Pack" = two styles picked out of Thunder Text (a family
+// that is NOT a member as a whole) + all of Thunder Display (a whole-family
+// member). Pack $400; styles $100 each; Display family $250.
+// ---------------------------------------------------------------------------
+const packNode = {
+  __typename: 'FontPack',
+  id: 'pack-id',
+  name: 'Starter Pack',
+  sku: sku('pack-sku', 400),
+  fontStyles: [style('f1', 's1', 100), style('f2', 's2', 100), style('df1', 'ds1', 100), style('df2', 'ds2', 100)],
+  members: [{
+    __typename: 'FontStyle'
+  }, {
+    __typename: 'FontStyle'
+  }, {
+    __typename: 'FontCollection',
+    id: 'display-id',
+    name: 'Thunder Display',
+    sku: sku('display-sku', 250),
+    fontStyles: [style('df1', 'ds1', 100), style('df2', 'ds2', 100)],
+    bundles: null,
+    children: []
+  }]
+};
+const populate = function (node) {
+  let state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : makeState();
+  return reducer(state, {
+    type: 'POPULATE_PRODUCT_STATE',
+    data: {
+      node
+    }
+  });
+};
+const select = function (state, skuId) {
+  let isSelectedNow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  return reducer(state, {
+    type: 'SELECT_SKU_ID',
+    skuId,
+    selected: isSelectedNow
+  });
+};
+describe('populateProductStateReducer with a font pack', () => {
+  const state = populate(packNode);
+  it('registers the pack SKU as granting every style the pack lists', () => {
+    expect(state.skuStyleIds['pack-sku']).toEqual(['f1', 'f2', 'df1', 'df2']);
+  });
+  it('registers a whole-family member like its own product page would', () => {
+    expect(state.skuStyleIds['display-sku']).toEqual(['df1', 'df2']);
+    expect(state.skuStyleIds['ds1']).toEqual(['df1']);
+    expect(state.skuStyleIds['ds2']).toEqual(['df2']);
+  });
+  it('registers each style member by its own SKU', () => {
+    expect(state.skuStyleIds['s1']).toEqual(['f1']);
+    expect(state.skuStyleIds['s2']).toEqual(['f2']);
+  });
+  it('records a price for every SKU seen', () => {
+    expect(state.skuPrices).toEqual({
+      'pack-sku': 400,
+      'display-sku': 250,
+      s1: 100,
+      s2: 100,
+      ds1: 100,
+      ds2: 100
+    });
+  });
+  it('maps the pack id to its SKU and marks it fetched', () => {
+    expect(state.collectionSkus['pack-id']).toBe('pack-sku');
+    expect(state.fetchedCollectionIds).toContain('pack-id');
+  });
+  it('ignores nodes that are neither a collection nor a pack', () => {
+    const before = makeState();
+    expect(populate({
+      __typename: '%other'
+    }, before)).toBe(before);
+    expect(populate(null, before)).toBe(before);
+  });
+});
+describe('selecting the pack SKU', () => {
+  const state = select(populate(packNode), 'pack-sku');
+  it('marks every member style selected', () => {
+    expect(selected(state)).toEqual(['pack-sku']);
+    for (const skuId of ['s1', 's2', 'ds1', 'ds2']) {
+      expect(isSelected(skuId)(state)).toBe(true);
+    }
+    // by style id too, for buttons whose style has no SKU
+    expect(isSelected('f1')(state)).toBe(true);
+  });
+  it('marks the whole-family member selected, as covered by the pack', () => {
+    expect(isSelected('display-sku')(state)).toBe(true);
+    expect(state.selectedSkuIds['display-sku']).toBeUndefined();
+  });
+  it('deselecting a member style deselects the pack', () => {
+    const after = select(state, 'ds1', false);
+    expect(selected(after)).toEqual([]);
+    expect(isSelected('s1')(after)).toBe(false);
+    expect(isSelected('display-sku')(after)).toBe(false);
+  });
+});
+describe('selecting member styles one by one', () => {
+  it('buys the pack once it is the cheaper buy', () => {
+    let state = populate(packNode);
+    state = select(state, 's1');
+    state = select(state, 's2');
+    state = select(state, 'ds1');
+    // $300 of styles; the pack at $400 is still dearer
+    expect(selected(state)).toEqual(['ds1', 's1', 's2']);
+    expect(additionalCost(state, 'ds2')).toBe(100);
+    state = select(state, 'ds2');
+    // every style: $400 = the pack, which wins the tie as one SKU
+    expect(selected(state)).toEqual(['pack-sku']);
+    for (const skuId of ['s1', 's2', 'ds1', 'ds2']) {
+      expect(isSelected(skuId)(state)).toBe(true);
+    }
+  });
+  it('buys the pack when the whole-family member completes it', () => {
+    let state = populate(packNode);
+    state = select(state, 's1');
+    state = select(state, 's2');
+
+    // Display family is $250; the pack costs $200 more than what's selected
+    expect(additionalCost(state, 'display-sku')).toBe(200);
+    state = select(state, 'display-sku');
+    expect(selected(state)).toEqual(['pack-sku']);
+    expect(isSelected('display-sku')(state)).toBe(true);
+  });
+  it('does not buy the pack while it is dearer than the styles', () => {
+    let state = populate({
+      ...packNode,
+      sku: sku('pack-sku', 1000)
+    });
+    for (const skuId of ['s1', 's2', 'ds1', 'ds2']) state = select(state, skuId);
+    // nor Display: $250 is more than its two $100 styles
+    expect(selected(state)).toEqual(['ds1', 'ds2', 's1', 's2']);
+  });
+});
+describe('a superfamily member', () => {
+  const superPackNode = {
+    ...packNode,
+    fontStyles: [style('f1', 's1', 100), style('f2', 's2', 100), style('cf1', 'cs1', 100)],
+    members: [{
+      __typename: 'FontCollection',
+      id: 'super-id',
+      name: 'Thunder Collection',
+      sku: sku('super-sku', 350),
+      fontStyles: [],
+      bundles: null,
+      children: [{
+        id: 'text-id',
+        name: 'Thunder Text',
+        sku: sku('text-sku', 180),
+        fontStyles: [style('f1', 's1', 100), style('f2', 's2', 100)],
+        bundles: [{
+          id: 'bundle-id',
+          name: 'Thunder Text Bundle',
+          sku: sku('bundle-sku', 150),
+          fontStyles: [style('f1', 's1', 100), style('f2', 's2', 100)]
+        }]
+      }, {
+        id: 'caption-id',
+        name: 'Thunder Caption',
+        sku: sku('caption-sku', 90),
+        fontStyles: [style('cf1', 'cs1', 100)],
+        bundles: null
+      }]
+    }]
+  };
+  const state = populate(superPackNode);
+  it('registers the superfamily, its families and their bundles under the pack', () => {
+    expect(state.skuStyleIds['pack-sku']).toEqual(['f1', 'f2', 'cf1']);
+    expect(state.skuStyleIds['super-sku']).toEqual(['f1', 'f2', 'cf1']);
+    expect(state.skuStyleIds['text-sku']).toEqual(['f1', 'f2']);
+    expect(state.skuStyleIds['bundle-sku']).toEqual(['f1', 'f2']);
+    expect(state.skuStyleIds['caption-sku']).toEqual(['cf1']);
+  });
+  it('selecting the pack marks the families and bundles selected', () => {
+    const after = select(state, 'pack-sku');
+    for (const skuId of ['super-sku', 'text-sku', 'caption-sku', 'bundle-sku', 's1', 'cs1']) {
+      expect(isSelected(skuId)(after)).toBe(true);
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Every product a buyer has seen – or has a BuyButton for on the host page –
+// stays registered, so on a product page a pick the page shows only sits
+// inside SKUs the page shows. The page reports the product it shows.
+// ---------------------------------------------------------------------------
+const viewing = (state, productId) => reducer(state, {
+  type: 'STORE_MODAL_VIEW_PRODUCT',
+  productId
+});
+const family = (id, name, skuId, amount, styles) => ({
+  __typename: 'FontCollection',
+  id,
+  name,
+  sku: sku(skuId, amount),
+  fontStyles: styles,
+  bundles: null,
+  children: []
+});
+
+// Display at $180 is bought once both its $100 styles are picked; a $150 pack
+// over it would be cheaper still.
+const displayAt180 = {
+  ...packNode.members[2],
+  sku: sku('display-sku', 180)
+};
+const cheapPack = {
+  ...packNode,
+  sku: sku('pack-sku', 150),
+  members: [displayAt180]
+};
+describe('on a product page', () => {
+  it("buys a family's styles through the family, not a pack seen earlier", () => {
+    // the pack page registered Display as a member; its own page then
+    // registers it as the product being viewed
+    const display = family('display-id', 'Thunder Display', 'display-sku', 180, [style('df1', 'ds1', 100), style('df2', 'ds2', 100)]);
+    let state = viewing(populate(display, populate(cheapPack)), 'display-id');
+    state = select(state, 'ds1');
+    expect(selected(state)).toEqual(['ds1']);
+    state = select(state, 'ds2');
+    expect(selected(state)).toEqual(['display-sku']);
+    expect(isSelected('ds1')(state)).toBe(true);
+  });
+  it("does not buy the pack page's partial block through a family seen earlier", () => {
+    const text = family('text-id', 'Thunder Text', 'text-sku', 180, [style('f1', 's1', 100), style('f2', 's2', 100)]);
+    let state = viewing(populate(packNode, populate(text)), 'pack-id');
+    state = select(state, 's1');
+    state = select(state, 's2');
+    expect(selected(state)).toEqual(['s1', 's2']);
+  });
+  it('still buys a whole-family member through its own SKU on the pack page', () => {
+    let state = viewing(populate({
+      ...packNode,
+      members: [displayAt180]
+    }), 'pack-id');
+    state = select(state, 'ds1');
+    state = select(state, 'ds2');
+    expect(selected(state)).toEqual(['display-sku']);
+  });
+  it("keeps a family that has no SKU of its own to its page, so a pack seen earlier can't claim it", () => {
+    // Display sells à la carte only: there is no family SKU on its page, and
+    // the pack another page registered must not stand in for one
+    const display = {
+      ...family('display-id', 'Thunder Display', 'display-sku', 180, [style('df1', 'ds1', 100), style('df2', 'ds2', 100)]),
+      sku: null
+    };
+    let state = viewing(populate(display, populate(cheapPack)), 'display-id');
+    state = select(state, 'ds1');
+    expect(additionalCost(state, 'ds2')).toBe(100);
+    state = select(state, 'ds2');
+    expect(selected(state)).toEqual(['ds1', 'ds2']);
+  });
+  it('scopes a page opened by slug, once it reports the product it shows', () => {
+    const display = {
+      ...family('display-id', 'Thunder Display', 'display-sku', 180, [style('df1', 'ds1', 100), style('df2', 'ds2', 100)]),
+      sku: null
+    };
+    let state = reducer(populate(display, populate(cheapPack)), {
+      type: 'STORE_MODAL_NAVIGATE',
+      route: 'product',
+      variables: {
+        productSlug: 'thunder-display'
+      }
+    });
+    state = viewing(state, 'display-id');
+    state = select(select(state, 'ds1'), 'ds2');
+    expect(selected(state)).toEqual(['ds1', 'ds2']);
+  });
+  it('keeps every registered SKU once the page is left', () => {
+    const display = {
+      ...family('display-id', 'Thunder Display', 'display-sku', 180, [style('df1', 'ds1', 100), style('df2', 'ds2', 100)]),
+      sku: null
+    };
+    let state = viewing(populate(display, populate(cheapPack)), 'display-id');
+    state = select(select(state, 'ds1'), 'ds2');
+    expect(selected(viewing(state, null))).toEqual(['pack-sku']);
+  });
+  it('re-prices when the page changes', () => {
+    const display = {
+      ...family('display-id', 'Thunder Display', 'display-sku', 180, [style('df1', 'ds1', 100), style('df2', 'ds2', 100)]),
+      sku: null
+    };
+    let state = viewing(populate(display, populate(cheapPack)), 'display-id');
+    state = select(select(state, 'ds1'), 'ds2');
+    expect(selected(state)).toEqual(['ds1', 'ds2']);
+    // on the pack page the pack is shown, and cheaper
+    expect(selected(viewing(state, 'pack-id'))).toEqual(['pack-sku']);
+  });
+  it('keeps a pick in a SKU identical to it that the page does not show', () => {
+    // a one-style pack at a style's price is the same purchase as the style;
+    // only one of the two is offered, and it may be the one off this page
+    const oneStylePack = {
+      ...packNode,
+      id: 'a-pack-id',
+      sku: sku('a-pack-sku', 100),
+      fontStyles: [style('df1', 'ds1', 100)],
+      members: [{
+        __typename: 'FontStyle'
+      }]
+    };
+    const display = family('display-id', 'Thunder Display', 'display-sku', 180, [style('df1', 'ds1', 100), style('df2', 'ds2', 100)]);
+    let state = viewing(populate(display, populate(oneStylePack)), 'display-id');
+    state = select(state, 'ds1');
+    // not pushed into the $180 family for want of a place to sit
+    expect(selected(state)).toHaveLength(1);
+    expect(isSelected('ds1')(state)).toBe(true);
+    expect(additionalCost(state, 'ds2')).toBe(80);
+  });
+  it('remembers every SKU each product page registered', () => {
+    const display = family('display-id', 'Thunder Display', 'display-sku', 180, [style('df1', 'ds1', 100)]);
+    const state = populate(display, populate(cheapPack));
+    // the pack, its two Thunder Text styles, and the whole-family member with its styles
+    expect([...state.productSkuIds['pack-id']].sort()).toEqual(['display-sku', 'ds1', 'ds2', 'pack-sku', 's1', 's2']);
+    expect([...state.productSkuIds['display-id']].sort()).toEqual(['display-sku', 'ds1']);
+    expect(populate({
+      ...display,
+      sku: null
+    }).productSkuIds['display-id']).toEqual(['ds1']);
+  });
+  it('keeps every registered SKU for a pick the page does not show', () => {
+    // a price shown on the host page while the modal sits on another product
+    const other = family('other-id', 'Other', 'other-sku', 150, [style('o1', 'os1', 100), style('o2', 'os2', 100)]);
+    let state = viewing(populate(packNode, populate(other)), 'pack-id');
+    state = select(state, 'os1');
+    expect(additionalCost(state, 'os2')).toBe(50);
+  });
+  it('keeps every registered SKU while the viewed product is not yet registered', () => {
+    let state = viewing(populate(cheapPack), 'not-fetched-id');
+    state = select(state, 'ds1');
+    state = select(state, 'ds2');
+    expect(selected(state)).toEqual(['pack-sku']);
+  });
+});
+describe('a pack without a SKU', () => {
+  const state = populate({
+    ...packNode,
+    sku: null
+  });
+  it('registers only its members', () => {
+    expect(state.skuStyleIds['pack-sku']).toBeUndefined();
+    expect(state.skuPrices['pack-sku']).toBeUndefined();
+    expect(state.collectionSkus['pack-id']).toBeNull();
+    expect(state.fetchedCollectionIds).toContain('pack-id');
+  });
+  it('never puts the pack in the selection', () => {
+    let after = viewing(state, 'pack-id');
+    for (const skuId of ['s1', 's2', 'ds1', 'ds2']) after = select(after, skuId);
+    expect(selected(after)).toEqual(['ds1', 'ds2', 's1', 's2']);
+  });
+});
+describe('a style member without a SKU', () => {
+  const state = populate({
+    ...packNode,
+    fontStyles: [...packNode.fontStyles, {
+      id: 'f3',
+      sku: null
+    }]
+  });
+  it('is granted by the pack SKU, by style id', () => {
+    expect(state.skuStyleIds['pack-sku']).toContain('f3');
+  });
+  it('is selected and deselected with the pack', () => {
+    const withPack = select(state, 'pack-sku');
+    expect(isSelected('f3')(withPack)).toBe(true);
+    expect(isSelected('f3')(select(withPack, 'pack-sku', false))).toBe(false);
+  });
+});
+describe('deselecting via the pack button', () => {
+  const state = select(select(populate(packNode), 'pack-sku'), 'pack-sku', false);
+  it('clears the whole pack', () => {
+    expect(selected(state)).toEqual([]);
+    for (const skuId of ['s1', 's2', 'ds1', 'ds2', 'display-sku', 'f1']) {
+      expect(isSelected(skuId)(state)).toBe(false);
+    }
+  });
+});
+describe("a '%other' member", () => {
+  it('is ignored', () => {
+    const withOther = populate({
+      ...packNode,
+      members: [...packNode.members, {
+        __typename: '%other'
+      }]
+    });
+    const without = populate(packNode);
+    expect(withOther.skuStyleIds).toEqual(without.skuStyleIds);
+    expect(withOther.skuPrices).toEqual(without.skuPrices);
+  });
+});

package/dist/__tests__/infiniteScroll.test.js

@@ -0,0 +1,180 @@
+// @vitest-environment happy-dom
+import React, { act, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import useInfiniteScroll from '../components/useInfiniteScroll.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+class FakeIntersectionObserver {
+  static instances = [];
+  observed = [];
+  disconnected = false;
+  constructor(callback, options) {
+    this.callback = callback;
+    this.options = options;
+    FakeIntersectionObserver.instances.push(this);
+  }
+  observe(element) {
+    this.observed.push(element);
+  }
+  unobserve() {}
+  disconnect() {
+    this.disconnected = true;
+  }
+
+  // Report every observed element as having come into view.
+  enter() {
+    this.callback(this.observed.map(target => ({
+      target,
+      isIntersecting: true
+    })), this);
+  }
+}
+const observers = () => FakeIntersectionObserver.instances;
+const live = () => observers().filter(observer => !observer.disconnected);
+
+// The shape the store modal index renders: the sentinel stays mounted while a
+// page is in flight (`enabled` false) and only goes away once the list is
+// exhausted, and the scroller is an ancestor whose ref is still null while the
+// sentinel renders.
+function Harness(_ref) {
+  let {
+    enabled,
+    hasMore = true,
+    onLoadMore
+  } = _ref;
+  const scrollContainer = useRef(null);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: scrollContainer,
+    "data-testid": "scroller"
+  }, /*#__PURE__*/React.createElement(Sentinel, {
+    enabled: enabled,
+    hasMore: hasMore,
+    onLoadMore: onLoadMore,
+    rootRef: scrollContainer
+  }));
+}
+function Sentinel(_ref2) {
+  let {
+    enabled,
+    hasMore,
+    onLoadMore,
+    rootRef
+  } = _ref2;
+  const sentinelRef = useInfiniteScroll({
+    enabled,
+    onLoadMore,
+    rootRef,
+    rootMargin: '0px 0px 600px 0px'
+  });
+  return hasMore ? /*#__PURE__*/React.createElement("div", {
+    ref: sentinelRef,
+    "data-testid": "sentinel"
+  }) : null;
+}
+let container;
+let root;
+const render = element => {
+  act(() => {
+    root.render(element);
+  });
+};
+beforeEach(() => {
+  FakeIntersectionObserver.instances = [];
+  vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver);
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+describe('useInfiniteScroll', () => {
+  it('loads more when the sentinel comes into view', () => {
+    const onLoadMore = vi.fn();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+    expect(live()).toHaveLength(1);
+    act(() => live()[0].enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+  });
+  it('watches the scrolling ancestor, whose ref is only attached after render', () => {
+    var _options, _options2;
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: vi.fn()
+    }));
+    const [observer] = live();
+    expect((_options = observer.options) === null || _options === void 0 ? void 0 : _options.root).toBe(container.querySelector('[data-testid="scroller"]'));
+    expect((_options2 = observer.options) === null || _options2 === void 0 ? void 0 : _options2.rootMargin).toBe('0px 0px 600px 0px');
+    expect(observer.observed).toEqual([container.querySelector('[data-testid="sentinel"]')]);
+  });
+  it('stops watching while a page is in flight, and picks it up again after', () => {
+    const onLoadMore = vi.fn();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+    act(() => live()[0].enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+
+    // The sentinel is still on screen, but `loadNext` is running: nothing
+    // should be watching it, so the load isn't asked for again on every frame.
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: false,
+      onLoadMore: onLoadMore
+    }));
+    expect(live()).toHaveLength(0);
+
+    // Page arrived, more to come: back to watching, and still in view.
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+    expect(live()).toHaveLength(1);
+    act(() => live()[0].enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(2);
+  });
+  it('never observes when there is nothing left to load', () => {
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: false,
+      hasMore: false,
+      onLoadMore: vi.fn()
+    }));
+    expect(observers()).toHaveLength(0);
+  });
+  it('disconnects when the sentinel is removed', () => {
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: vi.fn()
+    }));
+    const [observer] = observers();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      hasMore: false,
+      onLoadMore: vi.fn()
+    }));
+    expect(observer.disconnected).toBe(true);
+  });
+  it('keeps watching when only the callback identity changes', () => {
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: () => {}
+    }));
+    const [observer] = observers();
+    const onLoadMore = vi.fn();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+
+    // Same observer, and it calls the callback the latest render passed.
+    expect(observers()).toHaveLength(1);
+    expect(observer.disconnected).toBe(false);
+    act(() => observer.enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/__tests__/licenseExclusions.test.js

@@ -10,9 +10,12 @@ function makeState() {
     cartOpen: false,
     precartOpen: false,
     selectedSkuIds: {},
+    requestedSkuIds: [],
     licenseOptions: [],
-    collectionStyleSkus: {},
+    skuStyleIds: {},
     collectionSkus: {},
+    productSkuIds: {},
+    viewedProductId: null,
     skuPrices: {},
     fetchedCollectionIds: [],
     storeModalRoute: {