fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/components/Precart/index.js

@@ -0,0 +1,331 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _PrecartQuery2 = _interopRequireDefault(require("../../__generated__/PrecartQuery.graphql"));
+var _PrecartAddToCartMutation2 = _interopRequireDefault(require("../../__generated__/PrecartAddToCartMutation.graphql"));
+var _PrecartClearCartMutation2 = _interopRequireDefault(require("../../__generated__/PrecartClearCartMutation.graphql"));
+var _Precart_collection2 = _interopRequireDefault(require("../../__generated__/Precart_collection.graphql"));
+var _Precart_viewer2 = _interopRequireDefault(require("../../__generated__/Precart_viewer.graphql"));
+var _Precart_license2 = _interopRequireDefault(require("../../__generated__/Precart_license.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _reactRedux = require("react-redux");
+var _License = _interopRequireDefault(require("./License"));
+var _Price = require("../Price");
+var _utils = require("../../utils");
+var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function skuName(sku) {
+  if (sku.product && 'name' in sku.product) return sku.product.name;
+  return null;
+}
+const countStyles = ({
+  precart
+}) => {
+  if (!precart?.skus) return 0;
+  return precart.skus.reduce((acc, sku) => {
+    if (sku.product?.__typename === 'FontCollection' || sku.product?.__typename === 'Bundle') {
+      return acc + (sku.product?.totalStyles ?? 0);
+    }
+    return acc + 1;
+  }, 0);
+};
+const countStylesPrice = ({
+  precart
+}) => {
+  if (!precart?.skus) return 0;
+  return precart.skus.reduce((acc, sku) => {
+    if (sku.product?.__typename === 'FontCollection' || sku.product?.__typename === 'Bundle') {
+      return acc + (sku.product?.totalStylesPrice?.amount ?? sku.price.amount);
+    }
+    return acc + sku.price.amount;
+  }, 0);
+};
+const calculateBundleDiscounts = viewer => {
+  const stylesPrice = countStylesPrice(viewer);
+  const subtotal = viewer.precart?.subtotal?.amount ?? 0;
+  return subtotal - stylesPrice;
+};
+const specFromLicense = license => {
+  let licenseOptionSpec = {
+    licenseId: license.id
+  };
+  if (license.variables) {
+    const options = license.variables.reduce((res, variable) => {
+      if (variable.options && variable.options.length > 0) {
+        res[variable.id] = variable.options[0].id;
+      } else {
+        // FIXME this is only necessary to submit the variable,
+        // since it's required to have a selection for every variable
+        res[variable.id] = null;
+      }
+      return res;
+    }, {});
+    licenseOptionSpec = {
+      ...licenseOptionSpec,
+      licenseOptions: options
+    };
+  }
+  return licenseOptionSpec;
+};
+_Precart_license2.default.hash && _Precart_license2.default.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_license2.default;
+function Precart({
+  viewer: viewerKey,
+  collection: collectionKey,
+  isLoading
+}) {
+  const viewer = (0, _reactRelay.useFragment)((_Precart_viewer2.default.hash && _Precart_viewer2.default.hash !== "fe66a5cdbee38cae7bfb11922f945fd5" && 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_viewer2.default), viewerKey);
+  const collection = (0, _reactRelay.useFragment)((_Precart_collection2.default.hash && _Precart_collection2.default.hash !== "dd2c3385a0fc5149dbfa230cfa5e3e99" && 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_collection2.default), collectionKey);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const subtotal = viewer?.precart?.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 [error, setError] = (0, _react.useState)(null);
+  const clearCart = (0, _react.useCallback)(() => {
+    const mutation = (_PrecartClearCartMutation2.default.hash && _PrecartClearCartMutation2.default.hash !== "af8f953028924bdc7866e645c2d0a903" && console.error("The definition of 'PrecartClearCartMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PrecartClearCartMutation2.default);
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation,
+      variables: {
+        input: {
+          orderItems: []
+        }
+      },
+      onCompleted: () => {
+        setError(null);
+      }
+    });
+  }, [environment]);
+  const onSelectLicense = (id, checked) => {
+    const license = collection?.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, {
+    licenseId,
+    licenseOptions
+  }) => {
+    const licenseVariableIds = Object.keys(licenseOptions);
+    if (licenseVariableIds.length > 0) {
+      return res.concat(licenseVariableIds.map(licenseVariableId => ({
+        licenseId,
+        licenseVariableId,
+        licenseOptionId: licenseOptions[licenseVariableId]
+      })));
+    }
+    return res.concat({
+      licenseId
+    });
+  }, []);
+  const addToCart = () => {
+    const variables = {
+      input: {
+        skuIds: selectedItemsArray(),
+        licenseSelections: licenseSelectionsArray()
+      }
+    };
+    const mutation = (_PrecartAddToCartMutation2.default.hash && _PrecartAddToCartMutation2.default.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."), _PrecartAddToCartMutation2.default);
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation,
+      variables,
+      onError: err => {
+        console.error('Failed:', err);
+        setError(err.message || 'An error occurred');
+      },
+      onCompleted: (res, errors) => {
+        if (errors) {
+          console.error('Failed:', errors);
+          setError(errors[0]?.message || 'An error occurred');
+        } else {
+          setError(null);
+          onUnselectSkuIds();
+        }
+      }
+    });
+  };
+  const addToCartConfirmed = () => {
+    onPrecartClose();
+    addToCart();
+    deactivateConfirming();
+  };
+  const clearCartConfirming = () => {
+    onPrecartClose();
+    onUnselectSkuIds();
+    deactivateConfirming();
+  };
+  const backToBrowse = subtotal => {
+    if (subtotal?.amount && 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}`;
+      });
+    }
+    setDataAttr();
+  }, [precartOpen]);
+  (0, _react.useEffect)(() => {
+    collection?.licenses?.filter(license => license.defaultSelected).map(specFromLicense).forEach(spec => dispatch({
+      type: 'PRECART_SELECT_LICENSE',
+      licenseOptionSpec: spec
+    }));
+  }, []);
+  function renderConfirmingModal(subtotal) {
+    if (!isConfirming) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "pre-cart-confirm"
+    }, /*#__PURE__*/_react.default.createElement("h2", {
+      className: "pre-cart-confirm__header"
+    }, "Do you want to add your selection to your cart?"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "pre-cart-confirm__buttons"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "pre-cart-confirm__button",
+      "data-label": "confirm",
+      onClick: addToCartConfirmed
+    }, /*#__PURE__*/_react.default.createElement("div", null, "Add selection to cart:", /*#__PURE__*/_react.default.createElement("br", null), "(", viewer.precart?.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"
+    }, " \u2192"))), /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "pre-cart-confirm__button",
+      "data-label": "clear",
+      onClick: clearCartConfirming
+    }, "Clear selection")));
+  }
+  function renderPreCartBottom(subtotal) {
+    const licenseSelected = licenseOptions.length > 0;
+    if (!subtotal || subtotal.amount === 0) {
+      return null;
+    }
+    const bundleDiscounts = calculateBundleDiscounts(viewer);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "pre-cart__bottom"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "pre-cart__section pre-cart__your-selection"
+    }, /*#__PURE__*/_react.default.createElement("h3", {
+      className: "pre-cart__your-selection__label"
+    }, "Your Selection"), /*#__PURE__*/_react.default.createElement("div", {
+      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), 'font')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Price.Price, {
+      price: {
+        amount: countStylesPrice(viewer),
+        currency: subtotal.currency
+      }
+    }))), bundleDiscounts < 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "pre-cart__your-selection__item"
+    }, "Bundle discounts:", /*#__PURE__*/_react.default.createElement(_Price.Price, {
+      price: {
+        amount: bundleDiscounts,
+        currency: subtotal.currency
+      }
+    })))), 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"));
+  }
+  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, collection?.licenses?.map(license => /*#__PURE__*/_react.default.createElement("li", {
+    key: license.id
+  }, /*#__PURE__*/_react.default.createElement(_License.default, {
+    node: license,
+    selected: licenseOptions.some(({
+      licenseId
+    }) => 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), error && /*#__PURE__*/_react.default.createElement("div", {
+    className: "pre-cart__error"
+  }, error, ' ', /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: clearCart,
+    className: "pre-cart__error-button"
+  }, "Empty cart and try again")), renderConfirmingModal(subtotal)));
+}
+function PrecartQueryRenderer({
+  collectionId,
+  ...rest
+}) {
+  const selectedSkuIdsObject = (0, _reactRedux.useSelector)(state => state.selectedSkuIds);
+  const selectedSkuIds = Object.keys(selectedSkuIdsObject).filter(id => selectedSkuIdsObject[id] === true);
+  const deferredSelectedSkuIds = (0, _react.useDeferredValue)(selectedSkuIds);
+  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions);
+  const licenseOptionsSpecs = licenseOptions.map(spec => ({
+    licenseId: spec.licenseId,
+    licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
+  }));
+
+  // 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)((_PrecartQuery2.default.hash && _PrecartQuery2.default.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."), _PrecartQuery2.default), {
+    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-cjs/components/Price/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Price = Price;
+exports.default = exports.PriceFormat = void 0;
+var _Price_price2 = _interopRequireDefault(require("../../__generated__/Price_price.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRelay = require("react-relay");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let PriceFormat;
+exports.PriceFormat = PriceFormat;
+(function (PriceFormat) {
+  PriceFormat["Default"] = "default";
+  PriceFormat["Truncated"] = "truncated";
+})(PriceFormat || (exports.PriceFormat = PriceFormat = {}));
+const currencySymbols = {
+  USD: '$',
+  AUD: '$',
+  CAD: '$',
+  EUR: '€',
+  GBP: '£',
+  JPY: '¥',
+  INR: '₹',
+  BRL: 'R$',
+  CHF: 'CHF '
+};
+const formatMoney = (priceInCents, format, currency) => {
+  let value = priceInCents / 100;
+  let precision = format === PriceFormat.Truncated ? 0 : 2;
+  if (currency === 'JPY') {
+    // always show yen as "cents" without any fraction
+    value = priceInCents;
+    precision = 0;
+  }
+  try {
+    const formatter = new window.Intl.NumberFormat(window.navigator.language, {
+      style: 'currency',
+      currency,
+      currencyDisplay: 'symbol',
+      minimumFractionDigits: precision
+    });
+    return formatter.format(value);
+  } catch (e) {
+    // fallback for browsers without support for Intl.NumberFormat
+    const symbol = currencySymbols[currency] ?? '';
+    return `${symbol}${value.toFixed(precision)}`;
+  }
+};
+const calculateAmount = ({
+  amount,
+  invert,
+  subtractFrom,
+  multiplier
+}) => {
+  let subtracted = amount;
+  if (subtractFrom) {
+    subtracted = subtractFrom - amount;
+  }
+  if (invert) {
+    return subtracted * -1 * multiplier;
+  }
+  return subtracted * multiplier;
+};
+function Price({
+  price,
+  format = PriceFormat.Default,
+  invert = false,
+  // multiply by -1
+  subtractFrom,
+  // amount to subtract from
+  multiplier = 1,
+  // multiply the result amount?
+  isLoading = false,
+  ...rest
+}) {
+  let priceBeforeDiscount = null;
+  let priceFormatted = '-';
+  if (price) {
+    priceFormatted = formatMoney(calculateAmount({
+      amount: price.amount,
+      subtractFrom: subtractFrom?.amount,
+      invert,
+      multiplier
+    }), format, price.currency);
+    priceBeforeDiscount = formatMoney(calculateAmount({
+      amount: price.amount,
+      subtractFrom: subtractFrom?.amount,
+      invert,
+      multiplier: 1
+    }), format, price.currency);
+  }
+  return /*#__PURE__*/_react.default.createElement("span", _extends({
+    className: "price"
+  }, rest, {
+    "data-loading": isLoading
+  }), priceFormatted !== priceBeforeDiscount ? '+' : null, priceFormatted);
+}
+function RelayPrice({
+  price: priceKey,
+  ...rest
+}) {
+  const price = (0, _reactRelay.useFragment)((_Price_price2.default.hash && _Price_price2.default.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_price2.default), priceKey);
+  return /*#__PURE__*/_react.default.createElement(Price, _extends({
+    price: price
+  }, rest));
+}
+var _default = RelayPrice;
+exports.default = _default;

package/dist-cjs/components/PriceBar/PriceBarSection.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _PriceBarSection_node2 = _interopRequireDefault(require("../../__generated__/PriceBarSection_node.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _reactRedux = require("react-redux");
+var _Price = _interopRequireWildcard(require("../Price"));
+var _SelectButton = _interopRequireDefault(require("../SelectButton"));
+var _utils = require("../../utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PriceBarSection({
+  node: nodeKey
+}) {
+  const node = (0, _reactRelay.useFragment)((_PriceBarSection_node2.default.hash && _PriceBarSection_node2.default.hash !== "f7d785b4599958bb699c2a706ab763cc" && console.error("The definition of 'PriceBarSection_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PriceBarSection_node2.default), nodeKey);
+  const selected = (0, _reactRedux.useSelector)((0, _utils.isSelected)(node.sku?.id ?? null));
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const onSelectSkuId = (skuId, selected) => {
+    if (!skuId) return;
+    dispatch({
+      type: 'SELECT_SKU_ID',
+      skuId,
+      selected
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "select-button-hover-parent select-button-click-parent price-bar-section",
+    "data-type": node.collectionType,
+    "data-selected": selected
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "price-bar-section__button",
+    type: "button",
+    onClick: () => onSelectSkuId(node.sku?.id, !selected)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar-section__name"
+  }, /*#__PURE__*/_react.default.createElement("span", null, node.name, " ", node.collectionType), "\xA0", /*#__PURE__*/_react.default.createElement("span", {
+    className: "price-bar-section__name__styles"
+  }, "(", node.totalStyles, " styles)")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar-section__price"
+  }, !selected && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar-section__price__full"
+  }, /*#__PURE__*/_react.default.createElement(_Price.default, {
+    price: node.totalStylesPrice,
+    format: _Price.PriceFormat.Truncated
+  })), "\xA0", /*#__PURE__*/_react.default.createElement("div", null, node.sku && node.sku.priceWithLicenseOptions && /*#__PURE__*/_react.default.createElement(_Price.default, {
+    price: node.sku.priceWithLicenseOptions,
+    format: _Price.PriceFormat.Truncated
+  })))), node.sku && /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar-section__select-button"
+  }, /*#__PURE__*/_react.default.createElement(_SelectButton.default, {
+    sku: node.sku,
+    productId: node.sku.id
+  })));
+}
+var _default = PriceBarSection;
+exports.default = _default;

package/dist-cjs/components/PriceBar/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _PriceBar_node2 = _interopRequireDefault(require("../../__generated__/PriceBar_node.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _PriceBarSection = _interopRequireDefault(require("./PriceBarSection"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PriceBar({
+  node: nodeKey
+}) {
+  const node = (0, _reactRelay.useFragment)((_PriceBar_node2.default.hash && _PriceBar_node2.default.hash !== "60c5de3c786db43860478f1b0e00f3df" && console.error("The definition of 'PriceBar_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _PriceBar_node2.default), nodeKey);
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const $pricebar = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    function onScroll() {
+      if (!$pricebar.current) return;
+      if ($pricebar.current.getBoundingClientRect().top === 0) {
+        return setVisible(true);
+      }
+      return setVisible(false);
+    }
+    window.addEventListener('scroll', onScroll);
+    window.addEventListener('resize', onScroll);
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [setVisible, $pricebar]);
+  if (!node) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar",
+    ref: $pricebar,
+    "data-visible": visible
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "price-bar__wrapper"
+  }, node.parent && /*#__PURE__*/_react.default.createElement(_PriceBarSection.default, {
+    node: node.parent
+  }), /*#__PURE__*/_react.default.createElement(_PriceBarSection.default, {
+    node: node
+  })));
+}
+var _default = PriceBar;
+exports.default = _default;