fontdue-js 3.7.0 → 3.8.0

package/dist/__generated__/productState_fontPack.graphql.js

@@ -0,0 +1,117 @@
+/**
+ * @generated SignedSource<<c00a5a25369b3afa2e42b1f47d1fa26a>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    v1 = {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    v2 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "Sku",
+      "kind": "LinkedField",
+      "name": "sku",
+      "plural": false,
+      "selections": [v0 /*: any*/, {
+        "alias": null,
+        "args": null,
+        "concreteType": "Money",
+        "kind": "LinkedField",
+        "name": "price",
+        "plural": false,
+        "selections": [{
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "amount",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }],
+      "storageKey": null
+    },
+    v3 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "FontStyle",
+      "kind": "LinkedField",
+      "name": "fontStyles",
+      "plural": true,
+      "selections": [v0 /*: any*/, v2 /*: any*/],
+      "storageKey": null
+    },
+    v4 = {
+      "alias": null,
+      "args": null,
+      "concreteType": "Bundle",
+      "kind": "LinkedField",
+      "name": "bundles",
+      "plural": true,
+      "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/],
+      "storageKey": null
+    };
+  return {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": {
+      "mask": false
+    },
+    "name": "productState_fontPack",
+    "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, {
+      "alias": null,
+      "args": null,
+      "concreteType": null,
+      "kind": "LinkedField",
+      "name": "members",
+      "plural": true,
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "__typename",
+        "storageKey": null
+      }, {
+        "kind": "InlineFragment",
+        "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, v4 /*: any*/, {
+          "alias": null,
+          "args": [{
+            "kind": "Literal",
+            "name": "collectionTypes",
+            "value": ["FAMILY"]
+          }],
+          "concreteType": "FontCollection",
+          "kind": "LinkedField",
+          "name": "children",
+          "plural": true,
+          "selections": [v0 /*: any*/, v1 /*: any*/, v2 /*: any*/, v3 /*: any*/, v4 /*: any*/],
+          "storageKey": "children(collectionTypes:[\"FAMILY\"])"
+        }],
+        "type": "FontCollection",
+        "abstractKey": null
+      }],
+      "storageKey": null
+    }],
+    "type": "FontPack",
+    "abstractKey": null
+  };
+}();
+node.hash = "43a236a4ddb4436a51d765a07e2b0eac";
+export default node;

package/dist/__tests__/bundleSelectionOrder.test.js

@@ -55,6 +55,8 @@ function loadedState() {
     licenseOptions: [],
     skuStyleIds: {},
     collectionSkus: {},
+    productSkuIds: {},
+    viewedProductId: null,
     skuPrices: {},
     fetchedCollectionIds: [],
     storeModalRoute: {

package/dist/__tests__/collectionBundleSelection.test.js

@@ -28,6 +28,8 @@ function makeState() {
     licenseOptions: [],
     skuStyleIds,
     collectionSkus: {},
+    productSkuIds: {},
+    viewedProductId: null,
     skuPrices,
     fetchedCollectionIds: [],
     storeModalRoute: {

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__/licenseExclusions.test.js

@@ -14,6 +14,8 @@ function makeState() {
     licenseOptions: [],
     skuStyleIds: {},
     collectionSkus: {},
+    productSkuIds: {},
+    viewedProductId: null,
     skuPrices: {},
     fetchedCollectionIds: [],
     storeModalRoute: {

package/dist/__tests__/storeModalPackButton.test.js

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+
+// The pack's row at the top of its product page: the name is shown exactly as
+// the admin entered it, the à-la-carte total is struck through with an <s>,
+// and a pack without a SKU is not clickable.
+
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  stateRef
+} = vi.hoisted(() => ({
+  stateRef: {
+    current: null
+  }
+}));
+
+// The fragment reader hands back the data it was given; the redux selector
+// runs against a default store's state.
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  fetchQuery: vi.fn(),
+  useFragment: (_fragment, key) => key
+}));
+vi.mock('react-redux', async importOriginal => ({
+  ...(await importOriginal()),
+  useSelector: selector => selector(stateRef.current)
+}));
+import StoreModalPackButton from '../components/StoreModal/StoreModalPackButton.js';
+import { createDefaultStore } from '../reducer.js';
+const money = amount => ({
+  amount,
+  currency: 'USD'
+});
+const pack = function () {
+  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    name: 'Pack of Basics',
+    sku: {
+      id: 'pack-sku',
+      price: money(15000)
+    },
+    featureStyle: null,
+    totalStyles: 3,
+    totalStylesPrice: money(30000),
+    ...overrides
+  };
+};
+const markup = packData => renderToStaticMarkup( /*#__PURE__*/React.createElement(StoreModalPackButton, {
+  pack: packData,
+  onSelectSku: () => {}
+}));
+const mount = async (packData, onSelectSku) => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  await act(async () => {
+    root.render( /*#__PURE__*/React.createElement(StoreModalPackButton, {
+      pack: packData,
+      onSelectSku: onSelectSku
+    }));
+  });
+  return container.querySelector('button');
+};
+describe('StoreModalPackButton', () => {
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    stateRef.current = createDefaultStore(undefined).getState();
+    document.body.innerHTML = '';
+  });
+  it("shows the pack's name as entered, without adding a suffix", () => {
+    expect(markup(pack())).toContain('>Pack of Basics<');
+    expect(markup(pack())).not.toContain('Pack of Basics Pack');
+    expect(markup(pack({
+      name: 'Essentials'
+    }))).toContain('>Essentials<');
+  });
+  it('strikes through the à-la-carte total with an <s> when the pack is cheaper', () => {
+    expect(markup(pack())).toMatch(/<s class="store-modal__family-button__styles-price">/);
+    expect(markup(pack({
+      totalStylesPrice: money(15000)
+    }))).not.toContain('store-modal__family-button__styles-price');
+  });
+  it('selects the pack SKU on click', async () => {
+    const onSelectSku = vi.fn();
+    const button = await mount(pack(), onSelectSku);
+    expect(button.dataset.clickable).toBe('true');
+    await act(async () => button.click());
+    expect(onSelectSku).toHaveBeenCalledWith('pack-sku', true);
+  });
+  it('is not clickable without a SKU', async () => {
+    const onSelectSku = vi.fn();
+    const button = await mount(pack({
+      sku: null,
+      totalStylesPrice: null
+    }), onSelectSku);
+    expect(button.dataset.clickable).toBe('false');
+    await act(async () => button.click());
+    expect(onSelectSku).not.toHaveBeenCalled();
+  });
+});