fontdue-js 1.12.4 → 2.0.0-alpha2

package/dist/components/Precart/index.js

@@ -4,39 +4,54 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _reactRedux = require("react-redux");
-var _reactStaticContainer = _interopRequireDefault(require("react-static-container"));
 var _License = _interopRequireDefault(require("./License"));
 var _Price = require("../Price");
 var _utils = require("../../utils");
 var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
-var _injectRelayEnvironment = _interopRequireDefault(require("../Cart/injectRelayEnvironment"));
-var _PrecartAddToCartMutation, _Precart_viewer, _Precart_collection, _PrecartQuery;
+var _Precart_license, _Precart_viewer, _Precart_collection, _PrecartAddToCartMutation, _PrecartQuery;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const countStyles = precart => {
-  if (!precart.skus) return 0;
+function skuName(sku) {
+  if (sku.product && 'name' in sku.product) return sku.product.name;
+  return null;
+}
+const countStyles = _ref => {
+  let {
+    precart
+  } = _ref;
+  if (!(precart !== null && precart !== void 0 && precart.skus)) return 0;
   return precart.skus.reduce((acc, sku) => {
-    if (['FontCollection', 'Bundle'].indexOf(sku.product.__typename) >= 0) {
-      return acc + sku.product.totalStyles;
+    var _sku$product, _sku$product2;
+    if (((_sku$product = sku.product) === null || _sku$product === void 0 ? void 0 : _sku$product.__typename) === 'FontCollection' || ((_sku$product2 = sku.product) === null || _sku$product2 === void 0 ? void 0 : _sku$product2.__typename) === 'Bundle') {
+      var _sku$product3;
+      return acc + (((_sku$product3 = sku.product) === null || _sku$product3 === void 0 ? void 0 : _sku$product3.totalStyles) ?? 0);
     }
     return acc + 1;
   }, 0);
 };
-const countStylesPrice = precart => {
-  if (!precart.skus) return 0;
+const countStylesPrice = _ref2 => {
+  let {
+    precart
+  } = _ref2;
+  if (!(precart !== null && precart !== void 0 && precart.skus)) return 0;
   return precart.skus.reduce((acc, sku) => {
-    if (['FontCollection', 'Bundle'].indexOf(sku.product.__typename) >= 0) {
-      return acc + sku.product.totalStylesPrice.amount;
+    var _sku$product4, _sku$product5;
+    if (((_sku$product4 = sku.product) === null || _sku$product4 === void 0 ? void 0 : _sku$product4.__typename) === 'FontCollection' || ((_sku$product5 = sku.product) === null || _sku$product5 === void 0 ? void 0 : _sku$product5.__typename) === 'Bundle') {
+      var _sku$product6, _sku$product6$totalSt;
+      return acc + (((_sku$product6 = sku.product) === null || _sku$product6 === void 0 ? void 0 : (_sku$product6$totalSt = _sku$product6.totalStylesPrice) === null || _sku$product6$totalSt === void 0 ? void 0 : _sku$product6$totalSt.amount) ?? 0);
     }
     return acc + sku.price.amount;
   }, 0);
 };
-const calculateBundleDiscounts = precart => {
-  const stylesPrice = countStylesPrice(precart);
-  const subtotal = precart.subtotal ? precart.subtotal.amount : 0;
+const calculateBundleDiscounts = viewer => {
+  var _viewer$precart, _viewer$precart$subto;
+  const stylesPrice = countStylesPrice(viewer);
+  const subtotal = ((_viewer$precart = viewer.precart) === null || _viewer$precart === void 0 ? void 0 : (_viewer$precart$subto = _viewer$precart.subtotal) === null || _viewer$precart$subto === void 0 ? void 0 : _viewer$precart$subto.amount) ?? 0;
   return subtotal - stylesPrice;
 };
 const specFromLicense = license => {
@@ -61,139 +76,130 @@ const specFromLicense = license => {
   }
   return licenseOptionSpec;
 };
-class PrecartBase extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isConfirming: false
-    };
-    this.onSelectLicense = (id, evt) => {
-      const {
-        viewer,
-        onToggleLicense
-      } = this.props;
-      const license = viewer.licenses.find(node => node.id === id);
-      const licenseOptionSpec = specFromLicense(license);
-      onToggleLicense({
-        licenseId: id,
-        checked: evt.target.checked,
-        licenseOptionSpec
-      });
-    };
-    this.onSelectLicenseOption = (licenseId, variableId, evt) => {
-      this.props.onSelectLicenseOption({
-        licenseId,
-        variableId,
-        optionId: evt.target.value
-      });
-    };
-    this.onSelectItem = (id, evt) => {
-      this.props.onSelectSkuId(id, evt.target.checked);
-    };
-    this.selectedItemsArray = () => Object.keys(this.props.selectedSkuIds).filter(id => this.props.selectedSkuIds[id] === true);
-    this.licenseSelectionsArray = () => this.props.licenseOptions.reduce((res, _ref) => {
-      let {
+_Precart_license !== void 0 ? _Precart_license : (_Precart_license = require("../../__generated__/Precart_license.graphql"), _Precart_license.hash && _Precart_license.hash !== "0a642f10f28ca7d3857db23cf645895a" && console.error("The definition of 'Precart_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Precart_license);
+function Precart(_ref3) {
+  var _viewer$precart2, _viewer$licenses3;
+  let {
+    viewer: viewerKey,
+    collection: collectionKey,
+    isLoading
+  } = _ref3;
+  const viewer = (0, _reactRelay.useFragment)(_Precart_viewer !== void 0 ? _Precart_viewer : (_Precart_viewer = require("../../__generated__/Precart_viewer.graphql"), _Precart_viewer.hash && _Precart_viewer.hash !== "f4aacadacda1a2a1a344ca8fda7c2e42" && console.error("The definition of 'Precart_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Precart_viewer), viewerKey);
+  const collection = (0, _reactRelay.useFragment)(_Precart_collection !== void 0 ? _Precart_collection : (_Precart_collection = require("../../__generated__/Precart_collection.graphql"), _Precart_collection.hash && _Precart_collection.hash !== "5ea1b9e6fe156d9a2178a967e8882fec" && console.error("The definition of 'Precart_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Precart_collection), collectionKey);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const subtotal = viewer === null || viewer === void 0 ? void 0 : (_viewer$precart2 = viewer.precart) === null || _viewer$precart2 === void 0 ? void 0 : _viewer$precart2.subtotal;
+  const precartOpen = (0, _reactRedux.useSelector)(state => state.precartOpen);
+  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
+  const selectedSkuIds = (0, _reactRedux.useSelector)(state => state.selectedSkuIds);
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const onPrecartClose = () => dispatch({
+    type: 'CLOSE_PRECART'
+  });
+  const onUnselectSkuIds = () => dispatch({
+    type: 'UNSELECT_SKUS'
+  });
+  const [isConfirming, setIsConfirming] = (0, _react.useState)(false);
+  const onSelectLicense = (id, checked) => {
+    var _viewer$licenses;
+    const license = (_viewer$licenses = viewer.licenses) === null || _viewer$licenses === void 0 ? void 0 : _viewer$licenses.find(node => node.id === id);
+    if (!license) return;
+    const licenseOptionSpec = specFromLicense(license);
+    dispatch({
+      type: 'PRECART_TOGGLE_LICENSE',
+      licenseId: id,
+      checked,
+      licenseOptionSpec
+    });
+  };
+  const onSelectLicenseOption = (licenseId, variableId, optionId) => {
+    dispatch({
+      type: 'PRECART_SELECT_LICENSE_OPTION',
+      licenseId,
+      variableId,
+      optionId
+    });
+  };
+  const selectedItemsArray = () => Object.keys(selectedSkuIds).filter(id => selectedSkuIds[id] === true);
+  const licenseSelectionsArray = () => licenseOptions.reduce((res, _ref4) => {
+    let {
+      licenseId,
+      licenseOptions
+    } = _ref4;
+    const licenseVariableIds = Object.keys(licenseOptions);
+    if (licenseVariableIds.length > 0) {
+      return res.concat(licenseVariableIds.map(licenseVariableId => ({
         licenseId,
-        licenseOptions
-      } = _ref;
-      const licenseVariableIds = Object.keys(licenseOptions);
-      if (licenseVariableIds.length > 0) {
-        return res.concat(licenseVariableIds.map(licenseVariableId => ({
-          licenseId,
-          licenseVariableId,
-          licenseOptionId: licenseOptions[licenseVariableId]
-        })));
+        licenseVariableId,
+        licenseOptionId: licenseOptions[licenseVariableId]
+      })));
+    }
+    return res.concat({
+      licenseId
+    });
+  }, []);
+  const addToCart = () => {
+    const variables = {
+      input: {
+        skuIds: selectedItemsArray(),
+        licenseSelections: licenseSelectionsArray()
       }
-      return res.concat({
-        licenseId
-      });
-    }, []);
-    this.addToCart = () => {
-      const variables = {
-        input: {
-          skuIds: this.selectedItemsArray(),
-          licenseSelections: this.licenseSelectionsArray()
-        }
-      };
-      const mutation = _PrecartAddToCartMutation !== void 0 ? _PrecartAddToCartMutation : (_PrecartAddToCartMutation = require("../../__generated__/PrecartAddToCartMutation.graphql"), _PrecartAddToCartMutation.hash && _PrecartAddToCartMutation.hash !== "ddac11d864f695e07782d928d1e28f03" && console.error("The definition of 'PrecartAddToCartMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PrecartAddToCartMutation);
-      (0, _reactRelay.commitMutation)(this.props.environment, {
-        mutation,
-        variables,
-        onError: error => {
-          console.error('Failed:', error);
-        },
-        onCompleted: (res, errors) => {
-          if (errors) {
-            console.log('ERRORS', errors);
-          } else {
-            this.props.onUnselectSkuIds();
-          }
-        }
-      });
-    };
-    this.addToCartConfirmed = () => {
-      const {
-        onPrecartClose
-      } = this.props;
-      onPrecartClose();
-      this.addToCart();
-      this.deactivateConfirming();
     };
-    this.clearCartConfirming = () => {
-      const {
-        onPrecartClose,
-        onUnselectSkuIds
-      } = this.props;
-      onPrecartClose();
-      onUnselectSkuIds();
-      this.deactivateConfirming();
-    };
-    this.backToBrowse = subtotal => {
-      const {
-        onPrecartClose,
-        onUnselectSkuIds,
-        licenseOptions
-      } = this.props;
-      if (subtotal && subtotal.amount > 0 && licenseOptions && licenseOptions.length > 0) {
-        return this.activateConfirming();
+    const mutation = _PrecartAddToCartMutation !== void 0 ? _PrecartAddToCartMutation : (_PrecartAddToCartMutation = require("../../__generated__/PrecartAddToCartMutation.graphql"), _PrecartAddToCartMutation.hash && _PrecartAddToCartMutation.hash !== "c5ead46ecc07099bee68d4f4f1ecb5bf" && console.error("The definition of 'PrecartAddToCartMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PrecartAddToCartMutation);
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation,
+      variables,
+      onError: error => {
+        console.error('Failed:', error);
+      },
+      onCompleted: (res, errors) => {
+        if (errors) {
+          console.log('ERRORS', errors);
+        } else {
+          onUnselectSkuIds();
+        }
       }
-      onUnselectSkuIds();
-      return onPrecartClose();
-    };
-    this.activateConfirming = () => {
-      this.setState({
-        isConfirming: true
-      });
-    };
-    this.deactivateConfirming = () => {
-      this.setState({
-        isConfirming: false
+    });
+  };
+  const addToCartConfirmed = () => {
+    onPrecartClose();
+    addToCart();
+    deactivateConfirming();
+  };
+  const clearCartConfirming = () => {
+    onPrecartClose();
+    onUnselectSkuIds();
+    deactivateConfirming();
+  };
+  const backToBrowse = subtotal => {
+    if (subtotal !== null && subtotal !== void 0 && subtotal.amount && (licenseOptions === null || licenseOptions === void 0 ? void 0 : licenseOptions.length) > 0) {
+      return activateConfirming();
+    }
+    onUnselectSkuIds();
+    return onPrecartClose();
+  };
+  const activateConfirming = () => {
+    setIsConfirming(true);
+  };
+  const deactivateConfirming = () => {
+    setIsConfirming(false);
+  };
+  (0, _react.useEffect)(() => {
+    function setDataAttr() {
+      requestAnimationFrame(() => {
+        document.body.dataset.precartOpen = `${precartOpen}`;
       });
-    };
-  }
-  componentWillMount() {
-    this.props.viewer.licenses.filter(license => license.defaultSelected).map(specFromLicense).forEach(spec => this.props.onSelectLicense({
+    }
+    setDataAttr();
+  }, [precartOpen]);
+  (0, _react.useEffect)(() => {
+    var _viewer$licenses2;
+    (_viewer$licenses2 = viewer.licenses) === null || _viewer$licenses2 === void 0 ? void 0 : _viewer$licenses2.filter(license => license.defaultSelected).map(specFromLicense).forEach(spec => dispatch({
+      type: 'PRECART_SELECT_LICENSE',
       licenseOptionSpec: spec
     }));
-    this.setDataAttr();
-  }
-  componentDidUpdate(prevProps) {
-    if (this.props.precartOpen !== prevProps.precartOpen) {
-      this.setDataAttr();
-    }
-  }
-  setDataAttr() {
-    window.requestAnimationFrame(() => {
-      document.body.dataset.precartOpen = this.props.precartOpen;
-    });
-  }
-  renderConfirmingModal(subtotal) {
-    const {
-      viewer
-    } = this.props;
-    const {
-      isConfirming
-    } = this.state;
+  }, [viewer]);
+  function renderConfirmingModal(subtotal) {
+    var _viewer$precart3, _viewer$precart3$skus;
     if (!isConfirming) {
       return null;
     }
@@ -207,8 +213,8 @@ class PrecartBase extends _react.default.Component {
       type: "button",
       className: "pre-cart-confirm__button",
       "data-label": "confirm",
-      onClick: this.addToCartConfirmed
-    }, /*#__PURE__*/_react.default.createElement("div", null, "Add selection to cart:", /*#__PURE__*/_react.default.createElement("br", null), "(", viewer.precart.skus.map(sku => sku.product.name).join(', '), ")", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Price.Price, {
+      onClick: addToCartConfirmed
+    }, /*#__PURE__*/_react.default.createElement("div", null, "Add selection to cart:", /*#__PURE__*/_react.default.createElement("br", null), "(", (_viewer$precart3 = viewer.precart) === null || _viewer$precart3 === void 0 ? void 0 : (_viewer$precart3$skus = _viewer$precart3.skus) === null || _viewer$precart3$skus === void 0 ? void 0 : _viewer$precart3$skus.map(skuName).join(', '), ")", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Price.Price, {
       price: subtotal
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "pre-cart-confirm__button__arrow"
@@ -216,19 +222,15 @@ class PrecartBase extends _react.default.Component {
       type: "button",
       className: "pre-cart-confirm__button",
       "data-label": "clear",
-      onClick: this.clearCartConfirming
+      onClick: clearCartConfirming
     }, "Clear selection")));
   }
-  renderPreCartBottom(subtotal) {
-    const {
-      viewer,
-      collection
-    } = this.props;
-    const licenseSelected = this.props.licenseOptions.length > 0;
+  function renderPreCartBottom(subtotal) {
+    const licenseSelected = licenseOptions.length > 0;
     if (!subtotal || subtotal.amount === 0) {
       return null;
     }
-    const bundleDiscounts = calculateBundleDiscounts(viewer.precart);
+    const bundleDiscounts = calculateBundleDiscounts(viewer);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "pre-cart__bottom"
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -239,9 +241,9 @@ class PrecartBase extends _react.default.Component {
       className: "pre-cart__your-selection__items"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "pre-cart__your-selection__item"
-    }, /*#__PURE__*/_react.default.createElement("div", null, collection.name, /*#__PURE__*/_react.default.createElement("br", null), (0, _utils.pluralize)(countStyles(viewer.precart), 'style')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Price.Price, {
+    }, /*#__PURE__*/_react.default.createElement("div", null, collection === null || collection === void 0 ? void 0 : collection.name, /*#__PURE__*/_react.default.createElement("br", null), (0, _utils.pluralize)(countStyles(viewer), 'style')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Price.Price, {
       price: {
-        amount: countStylesPrice(viewer.precart),
+        amount: countStylesPrice(viewer),
         currency: subtotal.currency
       }
     }))), bundleDiscounts < 0 && /*#__PURE__*/_react.default.createElement("div", {
@@ -251,104 +253,65 @@ class PrecartBase extends _react.default.Component {
         amount: bundleDiscounts,
         currency: subtotal.currency
       }
-    })))), licenseSelected > 0 ? /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Consumer, null, components => components.PrecartCta && /*#__PURE__*/_react.default.createElement(components.PrecartCta, {
-      onClick: this.addToCartConfirmed,
+    })))), licenseSelected ? /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Consumer, null, components => components.PrecartCta && /*#__PURE__*/_react.default.createElement(components.PrecartCta, {
+      onClick: addToCartConfirmed,
       subtotal: subtotal
     })) : /*#__PURE__*/_react.default.createElement("div", {
       className: "pre-cart__cta",
       "data-label": "select-license"
     }, "Please select a license"));
   }
-  render() {
-    var _viewer$precart;
-    const {
-      viewer,
-      precartOpen
-    } = this.props;
-    const subtotal = viewer === null || viewer === void 0 ? void 0 : (_viewer$precart = viewer.precart) === null || _viewer$precart === void 0 ? void 0 : _viewer$precart.subtotal;
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "pre-cart",
-      "data-open": precartOpen
-    }, /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Consumer, null, components => components.PrecartTopBar && /*#__PURE__*/_react.default.createElement(components.PrecartTopBar, {
-      backToBrowse: this.backToBrowse.bind(this, subtotal)
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "pre-cart__middle pre-cart__licenses"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "pre-cart__section"
-    }, /*#__PURE__*/_react.default.createElement("ul", null, viewer.licenses.map(license => /*#__PURE__*/_react.default.createElement("li", {
-      key: license.id
-    }, /*#__PURE__*/_react.default.createElement(_License.default, {
-      node: license,
-      selected: this.props.licenseOptions.some(_ref2 => {
-        let {
-          licenseId
-        } = _ref2;
-        return licenseId === license.id;
-      }),
-      onSelectLicense: this.onSelectLicense,
-      selectedLicenseOptions: this.props.licenseOptions,
-      onSelectLicenseOption: this.onSelectLicenseOption
-    }))))), this.selectedItemsArray().length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "pre-cart__section pre-cart__selection-empty"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "pre-cart__selection-empty__arrow"
-    }, '\u25c0 '), "Start selecting fonts to add to your cart")), this.renderPreCartBottom(subtotal), this.renderConfirmingModal(subtotal)));
-  }
-}
-const Precart = (0, _reactRelay.createFragmentContainer)((0, _injectRelayEnvironment.default)(PrecartBase), {
-  viewer: _Precart_viewer !== void 0 ? _Precart_viewer : (_Precart_viewer = require("../../__generated__/Precart_viewer.graphql"), _Precart_viewer.hash && _Precart_viewer.hash !== "4f8b6f050bdae15e0328c109e0a9c8e4" && console.error("The definition of 'Precart_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Precart_viewer),
-  collection: _Precart_collection !== void 0 ? _Precart_collection : (_Precart_collection = require("../../__generated__/Precart_collection.graphql"), _Precart_collection.hash && _Precart_collection.hash !== "5ea1b9e6fe156d9a2178a967e8882fec" && console.error("The definition of 'Precart_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Precart_collection)
-});
-const PrecartQueryRenderer = rest => {
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  return /*#__PURE__*/_react.default.createElement(_reactRelay.QueryRenderer, {
-    environment: environment,
-    query: _PrecartQuery !== void 0 ? _PrecartQuery : (_PrecartQuery = require("../../__generated__/PrecartQuery.graphql"), _PrecartQuery.hash && _PrecartQuery.hash !== "517fbe407b2c13334c4101126038982d" && console.error("The definition of 'PrecartQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PrecartQuery),
-    variables: {
-      licenseOptionsSpecs: rest.licenseOptionsSpecs,
-      selectedSkuIds: Object.keys(rest.selectedSkuIds).filter(id => rest.selectedSkuIds[id] === true),
-      collectionId: rest.collectionId
-    },
-    render: _ref3 => {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pre-cart",
+    "data-open": precartOpen,
+    "data-loading": isLoading
+  }, /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Consumer, null, components => components.PrecartTopBar && /*#__PURE__*/_react.default.createElement(components.PrecartTopBar, {
+    backToBrowse: () => backToBrowse(subtotal)
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pre-cart__middle pre-cart__licenses"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pre-cart__section"
+  }, /*#__PURE__*/_react.default.createElement("ul", null, (_viewer$licenses3 = viewer.licenses) === null || _viewer$licenses3 === void 0 ? void 0 : _viewer$licenses3.map(license => /*#__PURE__*/_react.default.createElement("li", {
+    key: license.id
+  }, /*#__PURE__*/_react.default.createElement(_License.default, {
+    node: license,
+    selected: licenseOptions.some(_ref5 => {
       let {
-        error,
-        props
-      } = _ref3;
-      if (error) return /*#__PURE__*/_react.default.createElement("div", null, error.message);
-      return /*#__PURE__*/_react.default.createElement(_reactStaticContainer.default, {
-        shouldUpdate: props
-      }, props && /*#__PURE__*/_react.default.createElement(Precart, _extends({}, rest, props)));
-    }
-  });
-};
-const mapStateToProps = state => ({
-  precartOpen: state.precartOpen,
-  selectedSkuIds: state.selectedSkuIds,
-  licenseOptions: state.licenseOptions,
-  licenseOptionsSpecs: state.licenseOptions.map(spec => ({
+        licenseId
+      } = _ref5;
+      return licenseId === license.id;
+    }),
+    onSelectLicense: onSelectLicense,
+    onSelectLicenseOption: onSelectLicenseOption
+  }))))), selectedItemsArray().length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "pre-cart__section pre-cart__selection-empty"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "pre-cart__selection-empty__arrow"
+  }, '\u25c0 '), "Start selecting fonts to add to your cart")), renderPreCartBottom(subtotal), renderConfirmingModal(subtotal)));
+}
+function PrecartQueryRenderer(_ref6) {
+  let {
+    collectionId,
+    ...rest
+  } = _ref6;
+  const selectedSkuIds = (0, _reactRedux.useSelector)(state => Object.keys(state.selectedSkuIds).filter(id => state.selectedSkuIds[id] === true));
+  const deferredSelectedSkuIds = (0, _react.useDeferredValue)(selectedSkuIds);
+  const licenseOptionsSpecs = (0, _reactRedux.useSelector)(state => state.licenseOptions.map(spec => ({
     licenseId: spec.licenseId,
     licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
-  }))
-});
-const mapDispatchToProps = dispatch => ({
-  onPrecartClose: () => dispatch({
-    type: 'CLOSE_PRECART'
-  }),
-  onUnselectSkuIds: () => dispatch({
-    type: 'UNSELECT_SKUS'
-  }),
-  onToggleLicense: props => dispatch({
-    type: 'PRECART_TOGGLE_LICENSE',
-    ...props
-  }),
-  onSelectLicenseOption: props => dispatch({
-    type: 'PRECART_SELECT_LICENSE_OPTION',
-    ...props
-  }),
-  onSelectLicense: props => dispatch({
-    type: 'PRECART_SELECT_LICENSE',
-    ...props
-  })
-});
-var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(PrecartQueryRenderer);
+  })));
+
+  // useDeferredValue allows us to show the stale data instead of falling back
+  // to the Suspense fallback in the parent, basically unmounting everything
+  const deferredLicenseOptionsSpecs = (0, _react.useDeferredValue)(licenseOptionsSpecs);
+  const data = (0, _reactRelay.useLazyLoadQuery)(_PrecartQuery !== void 0 ? _PrecartQuery : (_PrecartQuery = require("../../__generated__/PrecartQuery.graphql"), _PrecartQuery.hash && _PrecartQuery.hash !== "517fbe407b2c13334c4101126038982d" && console.error("The definition of 'PrecartQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PrecartQuery), {
+    licenseOptionsSpecs: deferredLicenseOptionsSpecs,
+    selectedSkuIds: deferredSelectedSkuIds,
+    collectionId
+  });
+  return /*#__PURE__*/_react.default.createElement(Precart, _extends({}, data, rest, {
+    isLoading: licenseOptionsSpecs !== deferredLicenseOptionsSpecs || selectedSkuIds !== deferredSelectedSkuIds
+  }));
+}
+var _default = PrecartQueryRenderer;
 exports.default = _default;

package/dist/components/Price/index.d.ts

@@ -1,26 +1,27 @@
 import React from 'react';
-import { RelayProp } from 'react-relay';
-import { Price_price } from '__generated__/Price_price.graphql';
+import { Price_price$key } from '__generated__/Price_price.graphql';
 export declare enum PriceFormat {
     Default = "default",
     Truncated = "truncated"
 }
-export interface Price_props {
-    price: {
-        amount: number;
-        currency: string;
-    } | null;
+type Price_baseProps = {
     format?: PriceFormat;
     invert?: boolean;
     subtractFrom?: {
         amount: number;
     };
     multiplier?: number;
-}
+    isLoading?: boolean;
+};
+export type Price_props = Price_baseProps & {
+    price: {
+        amount: number;
+        currency: string;
+    } | null | undefined;
+};
 export declare const Price: React.FC<Price_props>;
-interface RelayPrice_props extends Omit<Price_props, 'price'> {
-    price: Price_price;
-    relay: RelayProp;
-}
-declare const _default: import("react-relay").Container<RelayPrice_props>;
-export default _default;
+type RelayPrice_props = Price_baseProps & {
+    price: Price_price$key | null;
+};
+declare function RelayPrice({ price: priceKey, ...rest }: RelayPrice_props): React.JSX.Element;
+export default RelayPrice;

package/dist/components/Price/index.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
 var _Price_price;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 let PriceFormat;
 exports.PriceFormat = PriceFormat;
 (function (PriceFormat) {
@@ -61,9 +62,14 @@ const Price = _ref2 => {
     // amount to subtract from
     multiplier = 1,
     // multiply the result amount?
+    isLoading = false,
     ...rest
   } = _ref2;
-  return /*#__PURE__*/_react.default.createElement("span", rest, price ? formatMoney(calculateAmount({
+  return /*#__PURE__*/_react.default.createElement("span", _extends({
+    className: "price"
+  }, rest, {
+    "data-loading": isLoading
+  }), price ? formatMoney(calculateAmount({
     amount: price.amount,
     subtractFrom: subtractFrom === null || subtractFrom === void 0 ? void 0 : subtractFrom.amount,
     invert,
@@ -71,14 +77,15 @@ const Price = _ref2 => {
   }), format, price.currency) : '–');
 };
 exports.Price = Price;
-const RelayPrice = _ref3 => {
+function RelayPrice(_ref3) {
   let {
-    relay,
+    price: priceKey,
     ...rest
   } = _ref3;
-  return /*#__PURE__*/_react.default.createElement(Price, rest);
-};
-var _default = (0, _reactRelay.createFragmentContainer)(RelayPrice, {
-  price: _Price_price !== void 0 ? _Price_price : (_Price_price = require("../../__generated__/Price_price.graphql"), _Price_price.hash && _Price_price.hash !== "7d3425945fe5f6df382005630e30ce86" && console.error("The definition of 'Price_price' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Price_price)
-});
+  const price = (0, _reactRelay.useFragment)(_Price_price !== void 0 ? _Price_price : (_Price_price = require("../../__generated__/Price_price.graphql"), _Price_price.hash && _Price_price.hash !== "7d3425945fe5f6df382005630e30ce86" && console.error("The definition of 'Price_price' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Price_price), priceKey);
+  return /*#__PURE__*/_react.default.createElement(Price, _extends({
+    price: price
+  }, rest));
+}
+var _default = RelayPrice;
 exports.default = _default;

package/dist/components/PriceBar/PriceBarSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PriceBarSection_node$key } from '__generated__/PriceBarSection_node.graphql';
+interface PriceBarSection_props {
+    node: PriceBarSection_node$key;
+}
+declare function PriceBarSection({ node: nodeKey }: PriceBarSection_props): React.JSX.Element;
+export default PriceBarSection;