fontdue-js 2.2.0 → 2.3.0-alpha1

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { FontdueProvider_props } from './FontdueProviderClientComponent';
-export { FontdueProvider_props } from './FontdueProviderClientComponent';
 declare const FontdueProvider: ({ children, ...rest }: FontdueProvider_props) => React.JSX.Element;
+export { FontdueProvider_props };
 export default FontdueProvider;

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

@@ -19,7 +19,10 @@ export type Price_props = Price_baseProps & {
         currency: string;
     } | null | undefined;
 };
-export declare const Price: React.FC<Price_props>;
+export declare function Price({ price, format, invert, // multiply by -1
+subtractFrom, // amount to subtract from
+multiplier, // multiply the result amount?
+isLoading, ...rest }: Price_props): React.JSX.Element;
 type RelayPrice_props = Price_baseProps & {
     price: Price_price$key | null;
 };

package/dist/components/Price/index.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.PriceFormat = exports.Price = void 0;
+exports.Price = Price;
+exports.default = exports.PriceFormat = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactRelay = require("react-relay");
 var _Price_price;
@@ -52,7 +53,7 @@ const calculateAmount = _ref => {
   }
   return subtracted * multiplier;
 };
-const Price = _ref2 => {
+function Price(_ref2) {
   let {
     price,
     format = PriceFormat.Default,
@@ -65,18 +66,28 @@ const Price = _ref2 => {
     isLoading = false,
     ...rest
   } = _ref2;
+  let priceBeforeDiscount = null;
+  let priceFormatted = '-';
+  if (price) {
+    priceFormatted = formatMoney(calculateAmount({
+      amount: price.amount,
+      subtractFrom: subtractFrom === null || subtractFrom === void 0 ? void 0 : subtractFrom.amount,
+      invert,
+      multiplier
+    }), format, price.currency);
+    priceBeforeDiscount = formatMoney(calculateAmount({
+      amount: price.amount,
+      subtractFrom: subtractFrom === null || subtractFrom === void 0 ? void 0 : subtractFrom.amount,
+      invert,
+      multiplier: 1
+    }), format, price.currency);
+  }
   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,
-    multiplier
-  }), format, price.currency) : '–');
-};
-exports.Price = Price;
+  }), priceFormatted !== priceBeforeDiscount ? '+' : null, priceFormatted);
+}
 function RelayPrice(_ref3) {
   let {
     price: priceKey,

package/dist/components/SKUPrice/index.js

@@ -18,14 +18,15 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const getSavingsMultiplier = (state, options) => {
   if (options.showCollectionSavings === false) return 1;
   if (!options.sku) return 1;
-  const differences = (0, _reducer.collectionSkuIdsDifferences)(state, options.sku.id);
   const baseSkuPrice = state.skuPrices[options.sku.id];
-  const collectionWithSavings = Object.keys(differences).find(collectionSkuId => differences[collectionSkuId] <= baseSkuPrice);
+  const [collectionWithSavings, savingsAmount] = (0, _reducer.collectionSkuIdWithDiscount)(state, options.sku.id);
 
   // we make it a multiplier since the `collectionSkuIdsDifference`
-  // helper doesnt take license multiplication into account. but this
-  // shouldn't matter?
-  return collectionWithSavings ? differences[collectionWithSavings] / baseSkuPrice : 1;
+  // helper doesnt take license multiplication into account
+  if (collectionWithSavings) {
+    return savingsAmount / baseSkuPrice;
+  }
+  return 1;
 };
 function SKUPrice(_ref) {
   let {
@@ -35,6 +36,7 @@ function SKUPrice(_ref) {
   } = _ref;
   const [isPending, startTransition] = (0, _react.useTransition)();
   const [sku, refetch] = (0, _reactRelay.useRefetchableFragment)(_SKUPrice_sku !== void 0 ? _SKUPrice_sku : (_SKUPrice_sku = require("../../__generated__/SKUPrice_sku.graphql"), _SKUPrice_sku.hash && _SKUPrice_sku.hash !== "9792a6074c64fb4bb018e42df5045514" && console.error("The definition of 'SKUPrice_sku' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SKUPrice_sku), skuKey);
+  const selected = (0, _reactRedux.useSelector)((0, _reducer.isSelected)(sku.id));
   const savingsMultiplier = (0, _reactRedux.useSelector)(state => getSavingsMultiplier(state, {
     showCollectionSavings,
     sku
@@ -60,7 +62,7 @@ function SKUPrice(_ref) {
   if (!(sku !== null && sku !== void 0 && sku.price)) return null;
   return /*#__PURE__*/_react.default.createElement(_Price.default, _extends({}, rest, {
     price: sku.price,
-    multiplier: savingsMultiplier,
+    multiplier: selected ? 1 : savingsMultiplier,
     isLoading: isPending
   }));
 }

package/dist/components/TypeTesters/index.js

@@ -90,6 +90,7 @@ function TypeTestersComponent(_ref) {
   }, {});
   if (!testers) return null;
   return /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, {
+    key: collection.id,
     defaultMode: defaultMode ?? (autofit ? 'local' : 'group'),
     testers: testers
   }, config.toolsPosition === 'floating' && /*#__PURE__*/_react.default.createElement(_TypeTesterFloatingToolbar.default, {

package/dist/components/elements/StoreModalFamilyButton/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Button = _interopRequireDefault(require("../../elements/Button"));
+var _Icons = require("../../Icons");
 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); }
 const StoreModalFamilyButton = _ref => {
@@ -33,7 +34,9 @@ const StoreModalFamilyButton = _ref => {
     className: "store-modal__family-button__name"
   }, name), /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__family-button__label"
-  }, label), /*#__PURE__*/_react.default.createElement("div", {
+  }, label), selected ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__family-button__checked"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__family-button__price"
   }, price)));
 };

package/dist/components/elements/StoreModalStyleButton/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
+var _Icons = require("../../Icons");
 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); }
 const StoreModalStyleButton = _ref => {
@@ -21,11 +22,15 @@ const StoreModalStyleButton = _ref => {
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, rest, {
     "data-selected": selected,
     "data-clickable": Boolean(rest.onClick)
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "store-modal__style-button__button"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__style-button__container"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "store-modal__style-button__aa"
-  }, aa), " ", name, /*#__PURE__*/_react.default.createElement("span", {
+  }, aa), ' ', /*#__PURE__*/_react.default.createElement("span", {
+    className: "store-modal__style-button__style-name"
+  }, name), selected ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__style-button__checked"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__style-button__price"
   }, price)));
 };

package/dist/fontdue.css

@@ -1447,6 +1447,10 @@ body[data-fontdue-store-modal=open] {
   margin-bottom: 20px;
 }
 
+.store-modal__family-button__checked .icon {
+  font-size: 20px;
+}
+
 .store-modal__index-item__button {
   background: none;
   color: inherit;
@@ -1865,8 +1869,10 @@ body[data-fontdue-store-modal=open] {
   color: color(red);
 }
 
-.store-modal__style-button__button {
-  display: flex;
+.store-modal__style-button__container {
+  display: grid;
+  grid-template-columns: minmax(0, max-content) auto max-content;
+  grid-column-gap: 10px;
   align-items: baseline;
 }
 
@@ -1880,6 +1886,10 @@ body[data-fontdue-store-modal=open] {
   margin-left: auto;
 }
 
+.store-modal__style-button__checked .icon {
+  font-size: 20px;
+}
+
 .empty-cart__message {
   font-size: 20px;
   margin-bottom: 60px;

package/dist/reducer.d.ts

@@ -83,6 +83,7 @@ export type FontdueAction = {
 } | {
     type: 'STORE_MODAL_BACK';
 };
+export declare const collectionSkuIdWithDiscount: (state: FontdueState, skuId: string) => [string, number] | [null, null];
 declare const reducer: Reducer<FontdueState, FontdueAction>;
 export declare function createDefaultStore(config: Config | undefined): import("redux").Store<FontdueState, FontdueAction>;
 export default reducer;

package/dist/reducer.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.collectionSkuIdWithDiscount = void 0;
 Object.defineProperty(exports, "collectionSkuIdsDifferences", {
   enumerable: true,
   get: function () {
@@ -77,15 +78,16 @@ const selectLicenseOption = (state, action) => {
     })
   };
 };
-const collectionSkuIdsWithDiscount = (state, skuId) => {
-  const differences = (0, _utils.collectionSkuIdsDifferences)(state, skuId);
-  return Object.keys(differences).filter(collectionSkuId => differences[collectionSkuId] <= state.skuPrices[skuId]);
-};
 const collectionSkuIdWithDiscount = (state, skuId) => {
-  const ids = collectionSkuIdsWithDiscount(state, skuId);
-  if (ids.length > 0) return ids[0];
-  return null;
+  const differences = (0, _utils.collectionSkuIdsDifferences)(state, skuId);
+  const collectionId = Object.keys(differences).filter(collSkuId => differences[collSkuId] <= state.skuPrices[skuId]).reduce((smallest, key) => {
+    if (!smallest || differences[key] < differences[smallest]) return key;
+    return smallest;
+  }, null);
+  if (collectionId) return [collectionId, differences[collectionId]];
+  return [null, null];
 };
+exports.collectionSkuIdWithDiscount = collectionSkuIdWithDiscount;
 const selectedCollectionSkuIdContainingSkuId = (state, skuId) => Object.keys(state.selectedSkuIds).filter(id => state.selectedSkuIds[id] === true).find(selectedSkuId => (0, _utils.collContainsSkuId)(state.collectionStyleSkus[selectedSkuId], skuId));
 const setKeysFalse = (acc, key) => {
   acc[key] = false;
@@ -115,7 +117,8 @@ const selectSkuId = (state, action) => {
   if (selected) {
     // check if selecting any collections instead of this sku
     // would reduce the selection price
-    actualSkuId = collectionSkuIdWithDiscount(state, skuId) || actualSkuId;
+    const [collectionSkuId, _amount] = collectionSkuIdWithDiscount(state, skuId);
+    actualSkuId = collectionSkuId || actualSkuId;
   } else if (state.selectedSkuIds[skuId] === false) {
     // we're clicking "deselect" on an item that's not actually selected,
     // it's a member of a collection which is selected. in this case

package/dist/utils.js

@@ -34,10 +34,14 @@ const isSelected = skuIdOrStyleId => state => {
   const collectionSkuIds = Object.keys(state.collectionStyleSkus).filter(collSkuId => collContainsSkuId(state.collectionStyleSkus[collSkuId], skuIdOrStyleId));
   return state.selectedSkuIds[skuIdOrStyleId] === true || collectionSkuIds.some(collSkuId => state.selectedSkuIds[collSkuId] === true);
 };
+
+// find any collection ancestors that contain this skuId,
+// then for each collection, sum the price of selected skus,
+// and return the delta between the collection price and the sum.
 exports.isSelected = isSelected;
 const collectionSkuIdsDifferences = (state, skuId) => Object.keys(state.collectionStyleSkus).filter(collectionSkuId => {
   const coll = state.collectionStyleSkus[collectionSkuId];
-  return collContainsSkuId(coll, skuId);
+  return skuId === collectionSkuId || collContainsSkuId(coll, skuId);
 }).reduce((acc, collectionSkuId) => {
   const coll = state.collectionStyleSkus[collectionSkuId];
   const selectedSkuIdsInColl = Object.keys(state.selectedSkuIds).filter(selectedSkuId => state.selectedSkuIds[selectedSkuId] === true && collContainsSkuId(coll, selectedSkuId));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha1",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts-declarations",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",