fontdue-js 2.10.0 → 2.11.0

package/dist/components/Cart/CartItem/index.js

@@ -4,312 +4,101 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = CartItem;
-var _CartItem_product2 = _interopRequireDefault(require("../../../__generated__/CartItem_product.graphql"));
-var _CartItem_licenseSelection2 = _interopRequireDefault(require("../../../__generated__/CartItem_licenseSelection.graphql"));
-var _CartItem_variable2 = _interopRequireDefault(require("../../../__generated__/CartItem_variable.graphql"));
-var _CartItem_license2 = _interopRequireDefault(require("../../../__generated__/CartItem_license.graphql"));
 var _CartItem_node2 = _interopRequireDefault(require("../../../__generated__/CartItem_node.graphql"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _Price = _interopRequireDefault(require("../../Price"));
-var _FontStyle = _interopRequireDefault(require("../../FontStyle"));
-var _CollectionAa = require("../../CollectionAa");
-var _Icons = require("../../Icons");
-var _VariableTextInput = _interopRequireDefault(require("./VariableTextInput"));
-var _VariableTableAmounts = _interopRequireDefault(require("../../VariableTableAmounts"));
-var _Stylesheet = _interopRequireDefault(require("../../Stylesheet"));
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const plural = (count, singularString, pluralString) => {
-  if (count === 1) return `1 ${singularString}`;
-  const str = pluralString || `${singularString}s`;
-  return `${count} ${str}`;
-};
-const groupSelectionsByLicense = node => {
-  var _node$licenseSelectio;
-  return (_node$licenseSelectio = node.licenseSelections) === null || _node$licenseSelectio === void 0 ? void 0 : _node$licenseSelectio.reduce((res, _ref) => {
-    var _res$license$id;
-    let {
-      license,
-      ...selection
-    } = _ref;
-    return {
-      ...res,
-      [license.id]: {
-        license,
-        selections: (((_res$license$id = res[license.id]) === null || _res$license$id === void 0 ? void 0 : _res$license$id.selections) ?? []).concat(selection)
-      }
-    };
-  }, {});
-};
-const productName = product => {
-  if (!product) return '??';
-  if (product.__typename === 'FontStyle' && product.family) return `${product.family.name} ${product.name}`;
-  return product.name;
-};
-const ProductName = _ref2 => {
-  let {
-    product
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement("h3", {
-    className: "cart-item__name"
-  }, productName(product));
-};
-const Variable = _ref3 => {
-  var _selection$option, _selection$option2, _selection$option3, _variable$options;
-  let {
-    selection,
-    variable,
-    onChange
-  } = _ref3;
-  if (!variable) return null;
-  if (!selection.variable) return null;
-  return /*#__PURE__*/_react.default.createElement("label", {
-    className: "cart-item__license-variable__option",
-    "data-variable-type": selection.variable.variableType
-  }, selection.variable.variableType === 'select' || selection.variable.variableType === 'table' ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, selection.variable.variableType === 'table' ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cart-item__license-variable__option-name"
-  }, (_selection$option = selection.option) === null || _selection$option === void 0 ? void 0 : _selection$option.name), /*#__PURE__*/_react.default.createElement(_VariableTableAmounts.default, {
-    variable: selection.variable,
-    option: selection.option
-  })) : (_selection$option2 = selection.option) === null || _selection$option2 === void 0 ? void 0 : _selection$option2.amount, /*#__PURE__*/_react.default.createElement(_Icons.CarrotDown, null), /*#__PURE__*/_react.default.createElement("select", {
-    value: (_selection$option3 = selection.option) === null || _selection$option3 === void 0 ? void 0 : _selection$option3.id,
-    onChange: e => onChange({
-      licenseOptionId: e.target.value
-    })
-  }, (_variable$options = variable.options) === null || _variable$options === void 0 ? void 0 : _variable$options.map((option, i) => {
-    var _selection$variable;
-    return /*#__PURE__*/_react.default.createElement("option", {
-      key: i,
-      value: option.id
-    }, ((_selection$variable = selection.variable) === null || _selection$variable === void 0 ? void 0 : _selection$variable.variableType) === 'table' ? option.name : option.amount);
-  }))) : /*#__PURE__*/_react.default.createElement(_VariableTextInput.default, {
-    defaultValue: selection.variableText,
-    placeholder: `${variable.name} *`,
-    onChange: onChange
-  }));
-};
-const getSelectionIds = _ref4 => {
-  let {
-    license,
-    variable,
-    option,
-    variableText
-  } = _ref4;
-  return {
-    licenseId: license.id,
-    licenseVariableId: variable ? variable.id : null,
-    licenseOptionId: option ? option.id : null,
-    variableText
-  };
-};
-const inputFromOptionChange = (node, variableId, value) => {
-  var _node$licenseSelectio2;
-  return {
-    id: node.id,
-    licenseSelections: ((_node$licenseSelectio2 = node.licenseSelections) === null || _node$licenseSelectio2 === void 0 ? void 0 : _node$licenseSelectio2.map(selection => {
-      if (selection.variable && selection.variable.id === variableId) {
-        return {
-          licenseId: selection.license.id,
-          licenseVariableId: selection.variable.id,
-          licenseOptionId: value.licenseOptionId ?? null,
-          variableText: value.variableText || null
-        };
-      }
-
-      // map gql output to input
-      return getSelectionIds(selection);
-    })) ?? []
-  };
-};
-const inputFromLicenseRemoval = (node, licenseToRemove) => {
-  var _node$licenseSelectio3;
-  const licenseSelections = ((_node$licenseSelectio3 = node.licenseSelections) === null || _node$licenseSelectio3 === void 0 ? void 0 : _node$licenseSelectio3.filter(_ref5 => {
-    let {
-      license
-    } = _ref5;
-    return license.id !== licenseToRemove.id;
-  }).map(getSelectionIds)) ?? [];
-  return {
-    id: node.id,
-    licenseSelections
-  };
-};
-const additionalLicenseInput = license => {
-  if (license.variables && license.variables.length > 0) {
-    return license.variables.map(variable => {
-      var _variable$options2, _variable$options2$;
-      return {
-        licenseId: license.id,
-        licenseVariableId: variable.id,
-        licenseOptionId: ((_variable$options2 = variable.options) === null || _variable$options2 === void 0 ? void 0 : (_variable$options2$ = _variable$options2[0]) === null || _variable$options2$ === void 0 ? void 0 : _variable$options2$.id) ?? null
-      };
-    });
-  }
-  return [{
-    licenseId: license.id,
-    licenseVariableId: null,
-    licenseOptionId: null
-  }];
-};
-const inputFromLicenseAddition = (node, licenseToAdd) => {
-  var _node$licenseSelectio4;
-  const licenseSelections = ((_node$licenseSelectio4 = node.licenseSelections) === null || _node$licenseSelectio4 === void 0 ? void 0 : _node$licenseSelectio4.map(getSelectionIds).concat(additionalLicenseInput(licenseToAdd))) ?? [];
-  return {
-    id: node.id,
-    licenseSelections
-  };
-};
-const AdditionalLicenses = _ref6 => {
-  var _orderItem$licenseSel;
-  let {
-    licenses,
-    orderItem,
-    onAddLicense
-  } = _ref6;
-  if (!licenses) return null;
-  const licenseIds = (_orderItem$licenseSel = orderItem.licenseSelections) === null || _orderItem$licenseSel === void 0 ? void 0 : _orderItem$licenseSel.map(_ref7 => {
-    let {
-      license
-    } = _ref7;
-    return license.id;
-  });
-  const additionalLicenses = licenses.filter(license => !(licenseIds !== null && licenseIds !== void 0 && licenseIds.some(id => id === license.id)));
-  if (additionalLicenses.length < 1) return null;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "cart-item__additional-licenses"
-  }, "+ Add:", ' ', additionalLicenses.map(license => /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: "cart-item__additional-licenses__item",
-    key: license.id,
-    onClick: onAddLicense.bind(null, license)
-  }, license.name)));
-};
-const CartItemLicense = _ref8 => {
+var _CartItemLicense = _interopRequireDefault(require("./CartItemLicense"));
+var _CartItemAdditionalLicenses = _interopRequireDefault(require("./CartItemAdditionalLicenses"));
+var _CartItemProduct = _interopRequireDefault(require("./CartItemProduct"));
+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 CartItem(_ref) {
+  var _node$licenseSelectio, _node$licenseSelectio2, _node$sku2, _node$sku3, _node$sku3$product;
   let {
-    node,
+    node: nodeKey,
     onChange,
-    license,
-    closeButtonMouseEnter: parentCloseButtonMouseEnter,
-    closeButtonMouseLeave: parentCloseButtonMouseLeave,
-    selections
-  } = _ref8;
-  if (!license) return null;
+    errors
+  } = _ref;
+  const node = (0, _reactRelay.useFragment)((_CartItem_node2.default.hash && _CartItem_node2.default.hash !== "c17a59a874f66eaed523d8928f9f1171" && console.error("The definition of 'CartItem_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_node2.default), nodeKey);
   const [closeButtonIsHovered, setCloseButtonIsHovered] = (0, _react.useState)(false);
   const closeButtonMouseEnter = () => {
-    parentCloseButtonMouseEnter();
     setCloseButtonIsHovered(true);
   };
   const closeButtonMouseLeave = () => {
-    parentCloseButtonMouseLeave();
     setCloseButtonIsHovered(false);
   };
-  const handleClick = () => {
-    closeButtonMouseLeave();
-    onChange(inputFromLicenseRemoval(node, license));
+  const groupedSelections = (_node$licenseSelectio = node.licenseSelections) === null || _node$licenseSelectio === void 0 ? void 0 : _node$licenseSelectio.reduce((res, selection) => ({
+    ...res,
+    [selection.license.id]: (res[selection.license.id] ?? []).concat(selection)
+  }), {});
+  if (!groupedSelections) return null;
+  const existingLicenseSelectionsInputs = ((_node$licenseSelectio2 = node.licenseSelections) === null || _node$licenseSelectio2 === void 0 ? void 0 : _node$licenseSelectio2.map(s => {
+    var _s$licenseVariable, _s$licenseOption;
+    return {
+      id: s.id,
+      licenseId: s.license.id,
+      licenseVariableId: (_s$licenseVariable = s.licenseVariable) === null || _s$licenseVariable === void 0 ? void 0 : _s$licenseVariable.id,
+      licenseOptionId: (_s$licenseOption = s.licenseOption) === null || _s$licenseOption === void 0 ? void 0 : _s$licenseOption.id,
+      variableText: s.variableText
+    };
+  })) ?? [];
+  const handleChangeSelection = selection => {
+    onChange({
+      id: node.id,
+      licenseSelections: existingLicenseSelectionsInputs.filter(s => s.id !== selection.id).concat(selection)
+    });
   };
-  return /*#__PURE__*/_react.default.createElement("li", {
-    key: license.id,
-    className: "cart-item__license",
-    "data-close-button-hovered": closeButtonIsHovered
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cart-item__license__wrapper"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cart-item__license-name"
-  }, license.name), selections.length > 0 && /*#__PURE__*/_react.default.createElement("ul", {
-    className: "cart-item__license-variables"
-  }, selections.map(selection => {
-    var _license$variables;
-    return /*#__PURE__*/_react.default.createElement("li", {
-      className: "cart-item__license-variable",
-      key: selection.id
-    }, /*#__PURE__*/_react.default.createElement(Variable, {
-      selection: selection,
-      onChange: value => onChange(inputFromOptionChange(node, selection.variable.id, value)),
-      variable: (_license$variables = license.variables) === null || _license$variables === void 0 ? void 0 : _license$variables.find(_ref9 => {
-        var _selection$variable2;
-        let {
-          id
-        } = _ref9;
-        return id === ((_selection$variable2 = selection.variable) === null || _selection$variable2 === void 0 ? void 0 : _selection$variable2.id);
-      })
-    }));
-  }))), /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: "cart-item__license__delete-button",
-    "aria-label": "Remove license",
-    onClick: handleClick,
-    onMouseEnter: closeButtonMouseEnter,
-    onMouseLeave: closeButtonMouseLeave
-  }, /*#__PURE__*/_react.default.createElement(_Icons.X, null)));
-};
-const productCss = product => {
-  var _product$family, _product$featureStyle, _product$featureStyle2;
-  if (!product) return;
-  if (product.__typename === 'FontStyle') return (_product$family = product.family) === null || _product$family === void 0 ? void 0 : _product$family.cssUrl;
-  if (product.__typename === 'FontCollection') return (_product$featureStyle = product.featureStyle) === null || _product$featureStyle === void 0 ? void 0 : (_product$featureStyle2 = _product$featureStyle.family) === null || _product$featureStyle2 === void 0 ? void 0 : _product$featureStyle2.cssUrl;
-};
-function CartItem(_ref10) {
-  var _node$sku$product, _node$sku$product2, _node$sku$product2$va, _node$sku$product3, _node$sku2, _node$sku2$product;
-  let {
-    node: nodeKey,
-    onChange
-  } = _ref10;
-  const node = (0, _reactRelay.useFragment)((_CartItem_node2.default.hash && _CartItem_node2.default.hash !== "8db972f6d8b84100198d9e31bdb3071a" && console.error("The definition of 'CartItem_node' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_node2.default), nodeKey);
-  const [closeButtonIsHovered, setCloseButtonIsHovered] = (0, _react.useState)(false);
-  const closeButtonMouseEnter = () => {
-    setCloseButtonIsHovered(true);
+  const handleRemoveLicense = licenseId => {
+    onChange({
+      id: node.id,
+      licenseSelections: existingLicenseSelectionsInputs.filter(input => input.licenseId !== licenseId)
+    });
   };
-  const closeButtonMouseLeave = () => {
-    setCloseButtonIsHovered(false);
+  const handleAddLicense = licenseId => {
+    var _node$sku, _node$sku$product, _node$sku$product$lic, _license$licenseVaria;
+    const license = (_node$sku = node.sku) === null || _node$sku === void 0 ? void 0 : (_node$sku$product = _node$sku.product) === null || _node$sku$product === void 0 ? void 0 : (_node$sku$product$lic = _node$sku$product.licenses) === null || _node$sku$product$lic === void 0 ? void 0 : _node$sku$product$lic.find(l => l.id === licenseId);
+    if (!license) return;
+    const newLicenseSelectionInput = (_license$licenseVaria = license.licenseVariables) !== null && _license$licenseVaria !== void 0 && _license$licenseVaria.length ? license.licenseVariables.map(variable => {
+      var _variable$licenseOpti, _variable$licenseOpti2;
+      return {
+        licenseId,
+        licenseVariableId: variable.id,
+        licenseOptionId: (_variable$licenseOpti = variable.licenseOptions) === null || _variable$licenseOpti === void 0 ? void 0 : (_variable$licenseOpti2 = _variable$licenseOpti[0]) === null || _variable$licenseOpti2 === void 0 ? void 0 : _variable$licenseOpti2.id
+      };
+    }) : [{
+      licenseId
+    }];
+    onChange({
+      id: node.id,
+      licenseSelections: existingLicenseSelectionsInputs.concat(newLicenseSelectionInput)
+    });
   };
-  if (!node.sku) return null;
-  if (!node.sku.product) return null;
-  const groupedLicenses = groupSelectionsByLicense(node);
-  if (!groupedLicenses) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cart-item",
     "data-close-button-hovered": closeButtonIsHovered,
-    "data-license-count": Object.keys(groupedLicenses).length
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cart-item__aa"
-  }, node.sku.product ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
-    href: productCss(node.sku.product)
-  }), ['FontCollection', 'Bundle'].indexOf(node.sku.product.__typename) >= 0 ? /*#__PURE__*/_react.default.createElement(_CollectionAa.CollectionAa, {
-    product: node.sku.product
-  }) : /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
-    fontStyle: node.sku.product
-  }, /*#__PURE__*/_react.default.createElement("span", null, "A"), /*#__PURE__*/_react.default.createElement("span", null, "a"))) : '??'), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ProductName, {
-    product: node.sku.product
-  }), (_node$sku$product = node.sku.product) !== null && _node$sku$product !== void 0 && _node$sku$product.isVariableFont || (_node$sku$product2 = node.sku.product) !== null && _node$sku$product2 !== void 0 && (_node$sku$product2$va = _node$sku$product2.variableInstances) !== null && _node$sku$product2$va !== void 0 && _node$sku$product2$va.length ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "cart-item__label"
-  }, "Variable font") : ((_node$sku$product3 = node.sku.product) === null || _node$sku$product3 === void 0 ? void 0 : _node$sku$product3.__typename) === 'FontCollection' && /*#__PURE__*/_react.default.createElement("div", {
-    className: "cart-item__label"
-  }, "(", plural(node.sku.product.totalStyles ?? 0, 'style'), ")")), /*#__PURE__*/_react.default.createElement("ul", {
+    "data-license-count": Object.keys(groupedSelections).length
+  }, /*#__PURE__*/_react.default.createElement(_CartItemProduct.default, {
+    product: ((_node$sku2 = node.sku) === null || _node$sku2 === void 0 ? void 0 : _node$sku2.product) ?? null
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", {
     className: "cart-item__licenses"
-  }, Object.keys(groupedLicenses).map(licenseId => {
-    var _groupedLicenses$lice, _node$sku, _node$sku$product4, _node$sku$product4$li;
-    return /*#__PURE__*/_react.default.createElement(CartItemLicense, {
-      key: licenseId,
-      node: node,
-      onChange: onChange,
-      selections: groupedLicenses === null || groupedLicenses === void 0 ? void 0 : (_groupedLicenses$lice = groupedLicenses[licenseId]) === null || _groupedLicenses$lice === void 0 ? void 0 : _groupedLicenses$lice.selections,
-      license: (_node$sku = node.sku) === null || _node$sku === void 0 ? void 0 : (_node$sku$product4 = _node$sku.product) === null || _node$sku$product4 === void 0 ? void 0 : (_node$sku$product4$li = _node$sku$product4.licenses) === null || _node$sku$product4$li === void 0 ? void 0 : _node$sku$product4$li.find(license => license.id === licenseId),
-      closeButtonMouseEnter: closeButtonMouseEnter,
-      closeButtonMouseLeave: closeButtonMouseLeave
-    });
-  })), node.price && /*#__PURE__*/_react.default.createElement("div", {
+  }, Object.keys(groupedSelections).filter(licenseId => groupedSelections[licenseId].length > 0).map(licenseId => /*#__PURE__*/_react.default.createElement(_CartItemLicense.default, {
+    key: licenseId,
+    onChange: handleChangeSelection,
+    onRemoveLicense: handleRemoveLicense,
+    selections: groupedSelections[licenseId],
+    closeButtonMouseEnter: closeButtonMouseEnter,
+    closeButtonMouseLeave: closeButtonMouseLeave
+  }))), errors !== null && errors !== void 0 && errors.licenseSelections ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__error"
+  }, "License selections ", errors === null || errors === void 0 ? void 0 : errors.licenseSelections) : null), node.price && /*#__PURE__*/_react.default.createElement("div", {
     className: "cart-item__price"
   }, /*#__PURE__*/_react.default.createElement(_Price.default, {
     price: node.price
-  })), /*#__PURE__*/_react.default.createElement(AdditionalLicenses, {
-    licenses: (_node$sku2 = node.sku) === null || _node$sku2 === void 0 ? void 0 : (_node$sku2$product = _node$sku2.product) === null || _node$sku2$product === void 0 ? void 0 : _node$sku2$product.licenses,
+  })), /*#__PURE__*/_react.default.createElement(_CartItemAdditionalLicenses.default, {
+    licenses: ((_node$sku3 = node.sku) === null || _node$sku3 === void 0 ? void 0 : (_node$sku3$product = _node$sku3.product) === null || _node$sku3$product === void 0 ? void 0 : _node$sku3$product.licenses) ?? null,
     orderItem: node,
-    onAddLicense: license => onChange(inputFromLicenseAddition(node, license))
+    onAddLicense: handleAddLicense
   }));
-}
-_CartItem_license2.default.hash && _CartItem_license2.default.hash !== "3d3c0b942c4cb8683b41bb52ab637339" && console.error("The definition of 'CartItem_license' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_license2.default;
-_CartItem_variable2.default.hash && _CartItem_variable2.default.hash !== "3e4dbfb04637c3535a85a0b920aa148b" && console.error("The definition of 'CartItem_variable' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_variable2.default;
-_CartItem_licenseSelection2.default.hash && _CartItem_licenseSelection2.default.hash !== "623e900c36a5bb9ad347ddcad84598e3" && console.error("The definition of 'CartItem_licenseSelection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_licenseSelection2.default;
-_CartItem_product2.default.hash && _CartItem_product2.default.hash !== "228788dc0026bbd807c5e299620953c0" && console.error("The definition of 'CartItem_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartItem_product2.default;
+}

package/dist/components/Cart/CartOrder.js

@@ -24,41 +24,14 @@ var _CartTotals = _interopRequireDefault(require("./CartTotals"));
 var _utils = require("./utils");
 var _reactStripeJs = require("@stripe/react-stripe-js");
 var _reactRedux = require("react-redux");
-var _utils2 = require("../../utils");
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _CartState = _interopRequireDefault(require("./CartState"));
+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 }; }
 // @ts-ignore
 
 // @ts-ignore
 
-const orderChangeInput = (order, orderItem) => {
-  var _order$orderItems;
-  return (_order$orderItems = order.orderItems) === null || _order$orderItems === void 0 ? void 0 : _order$orderItems.reduce((res, item) => {
-    var _item$licenseSelectio;
-    if (item.id === orderItem.id) return res.concat(orderItem);
-    return res.concat({
-      id: item.id,
-      licenseSelections: ((_item$licenseSelectio = item.licenseSelections) === null || _item$licenseSelectio === void 0 ? void 0 : _item$licenseSelectio.map(_ref => {
-        let {
-          license,
-          licenseVariable,
-          licenseOption,
-          variableText
-        } = _ref;
-        return {
-          licenseId: license.id,
-          licenseVariableId: licenseVariable && licenseVariable.id,
-          licenseOptionId: licenseOption && licenseOption.id,
-          variableText
-        };
-      }).filter(_utils2.notEmpty)) ?? []
-    });
-  }, [])
-
-  /* remove order items if there are no licenses */.filter(item => item.licenseSelections.length > 0);
-};
-
 // note here we're only updating the order (by id).
 // careful not to update the current customer's reference
 // to its order, since at this time it will turn to `null`
@@ -71,17 +44,17 @@ const submitCompleteMutation = (_CartOrderCompleteOrderMutation2.default.hash &&
 _CartOrder_UpdateErrors2.default.hash && _CartOrder_UpdateErrors2.default.hash !== "0bc5cd4fa568238d362a545367f9c306" && console.error("The definition of 'CartOrder_UpdateErrors' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_UpdateErrors2.default;
 const orderChangeMutation = (_CartOrderUpdateMutation2.default.hash && _CartOrderUpdateMutation2.default.hash !== "9f208ec36dbea5d90eeae4574b48bd15" && console.error("The definition of 'CartOrderUpdateMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrderUpdateMutation2.default);
 const removeDiscountMutation = (_CartOrderRemoveDiscountMutation2.default.hash && _CartOrderRemoveDiscountMutation2.default.hash !== "8a84a9135f1406fa9c4cc16dc2e11d30" && console.error("The definition of 'CartOrderRemoveDiscountMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrderRemoveDiscountMutation2.default);
-const CartOrder = _ref2 => {
+const CartOrder = _ref => {
   var _order$stripePaymentM, _viewer$settings;
   let {
     order: orderKey,
     viewer: viewerKey,
     status
-  } = _ref2;
+  } = _ref;
   const environment = (0, _reactRelay.useRelayEnvironment)();
   const stripe = (0, _reactStripeJs.useStripe)();
   const dispatch = (0, _reactRedux.useDispatch)();
-  const order = (0, _reactRelay.useFragment)((_CartOrder_order2.default.hash && _CartOrder_order2.default.hash !== "84f966e53ef1100c2ea2bb6ef7aa6c54" && console.error("The definition of 'CartOrder_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_order2.default), orderKey);
+  const order = (0, _reactRelay.useFragment)((_CartOrder_order2.default.hash && _CartOrder_order2.default.hash !== "25ef000c40000c4f76f973ac6ac7f593" && console.error("The definition of 'CartOrder_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_order2.default), orderKey);
   const viewer = (0, _reactRelay.useFragment)((_CartOrder_viewer2.default.hash && _CartOrder_viewer2.default.hash !== "13e1fb5c61670fcdf4add0214ea88ea5" && console.error("The definition of 'CartOrder_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_viewer2.default), viewerKey);
 
   // errors is from the payload, typically user errors,
@@ -261,11 +234,18 @@ const CartOrder = _ref2 => {
     className: "cart__error__button"
   }, "Click here"), ' ', "to empty your cart and continue shopping."), /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__middle"
-  }, orderItems.map((item, i) => /*#__PURE__*/_react.default.createElement(_CartItem.default, {
-    key: i,
-    node: item,
-    onChange: newItem => submitOrderChange(orderChangeInput(order, newItem))
-  }))), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_CartState.default, {
+    order: order
+  }, _ref2 => {
+    let {
+      onUpdateOrderItem
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, orderItems.map((item, i) => /*#__PURE__*/_react.default.createElement(_CartItem.default, {
+      key: i,
+      node: item,
+      onChange: onUpdateOrderItem
+    })));
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__bottom"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "cart__bottom__wrapper"

package/dist/components/Cart/CartState.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import { OrderItemInput } from '../../__generated__/CartStateUpdateMutation.graphql';
+import { OrderVariableSelectionInput } from '../../__generated__/CartStateUpdateMutation.graphql';
 import { CartState_order$key } from '../../__generated__/CartState_order.graphql';
+import { CartItemChangeInput } from './types';
 interface CartStateProps {
     order: CartState_order$key;
     children: (props: {
-        onUpdateOrder: (item: OrderItemInput) => void;
+        onUpdateOrderVariableSelections: (variables: OrderVariableSelectionInput[]) => void;
+        onUpdateOrderItem: (item: CartItemChangeInput) => void;
         onRemoveDiscount: () => void;
         error: any;
         errors: any;

package/dist/components/Cart/CartState.js

@@ -9,40 +9,54 @@ var _CartStateRemoveDiscountMutation2 = _interopRequireDefault(require("../../__
 var _CartStateUpdateMutation2 = _interopRequireDefault(require("../../__generated__/CartStateUpdateMutation.graphql"));
 var _react = require("react");
 var _reactRelay = require("react-relay");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const orderChangeMutation = (_CartStateUpdateMutation2.default.hash && _CartStateUpdateMutation2.default.hash !== "0074879fb29466e5a947a8776a86c5f6" && console.error("The definition of 'CartStateUpdateMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateUpdateMutation2.default);
-const removeDiscountMutation = (_CartStateRemoveDiscountMutation2.default.hash && _CartStateRemoveDiscountMutation2.default.hash !== "a1ce9ee438492737524704a36bbf6713" && console.error("The definition of 'CartStateRemoveDiscountMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateRemoveDiscountMutation2.default);
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const orderChangeMutation = (_CartStateUpdateMutation2.default.hash && _CartStateUpdateMutation2.default.hash !== "eaef5edfd81a204aa6b0c9bd579509ec" && console.error("The definition of 'CartStateUpdateMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateUpdateMutation2.default);
+const removeDiscountMutation = (_CartStateRemoveDiscountMutation2.default.hash && _CartStateRemoveDiscountMutation2.default.hash !== "bdcfcd6638660e83a61555dcd1786886" && console.error("The definition of 'CartStateRemoveDiscountMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartStateRemoveDiscountMutation2.default);
 function CartState(_ref) {
   let {
     order: orderKey,
     children
   } = _ref;
-  const order = (0, _reactRelay.useFragment)((_CartState_order2.default.hash && _CartState_order2.default.hash !== "a4267a6dccade27c1af1b1a71922a10f" && console.error("The definition of 'CartState_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartState_order2.default), orderKey);
+  const order = (0, _reactRelay.useFragment)((_CartState_order2.default.hash && _CartState_order2.default.hash !== "68bef9bb04269f0547150c81f957d45b" && console.error("The definition of 'CartState_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartState_order2.default), orderKey);
   const [error, setError] = (0, _react.useState)(null);
   const [errors, setErrors] = (0, _react.useState)(null);
   const environment = (0, _reactRelay.useRelayEnvironment)();
-  const handleSubmitOrderChange = orderItems => {
+  const handleUpdateOrder = (0, _react.useCallback)(input => {
     (0, _reactRelay.commitMutation)(environment, {
       mutation: orderChangeMutation,
       variables: {
-        input: {
-          orderItems
-        }
+        input
       },
       onCompleted: (result, error) => {
         if (error) {
           setError(error);
         } else if (result.updateOrder && result.updateOrder.errors) {
           setErrors(result.updateOrder.errors);
+        } else {
+          setError(null);
+          setErrors(null);
+        }
+      }
+    });
+  }, [environment, order]);
+  const handleRemoveDiscount = (0, _react.useCallback)(() => {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: removeDiscountMutation,
+      variables: {},
+      onCompleted: (_result, error) => {
+        if (error) {
+          setError(error);
         }
       }
     });
-  };
-  const handleUpdateOrder = (0, _react.useCallback)(newItem => {
-    const newItems = (order.orderItems || []).reduce((res, item) => {
-      if (item.id === newItem.id) return res.concat(newItem);
+  }, [environment]);
+  const handleUpdateOrderItem = (0, _react.useCallback)(item => {
+    // Handle CartItemChangeInput to maintain backward compatibility
+    const newItem = item;
+    const orderItems = (order.orderItems || []).reduce((res, item) => {
+      if (item.id === newItem.id) return res.concat([newItem]);
       if (!item.licenseSelections) return res;
-      return res.concat({
+      return res.concat([{
         id: item.id,
         licenseSelections: item.licenseSelections.map(_ref2 => {
           let {
@@ -59,26 +73,23 @@ function CartState(_ref) {
             variableText
           };
         })
-      }).filter(Boolean);
+      }]).filter(Boolean);
     }, [])
     /* remove order items if there are no licenses */.filter(item => item.licenseSelections.length > 0);
-    handleSubmitOrderChange(newItems);
-  }, [order, handleSubmitOrderChange]);
-  const handleRemoveDiscount = (0, _react.useCallback)(() => {
-    (0, _reactRelay.commitMutation)(environment, {
-      mutation: removeDiscountMutation,
-      variables: {},
-      onCompleted: (_result, error) => {
-        if (error) {
-          setError(error);
-        }
-      }
+    handleUpdateOrder({
+      orderItems
+    });
+  }, [order.orderItems]);
+  const handleUpdateOrderVariableSelections = (0, _react.useCallback)(variables => {
+    handleUpdateOrder({
+      orderVariableSelections: variables
     });
-  }, []);
+  }, [handleUpdateOrder]);
   return children({
-    onUpdateOrder: handleUpdateOrder,
+    onUpdateOrderVariableSelections: handleUpdateOrderVariableSelections,
     onRemoveDiscount: handleRemoveDiscount,
-    errors: errors,
-    error: error
+    onUpdateOrderItem: handleUpdateOrderItem,
+    errors,
+    error
   });
 }

package/dist/components/Cart/CartTotals.js

@@ -11,8 +11,8 @@ var _relayRuntime = require("relay-runtime");
 var _Price = _interopRequireDefault(require("../Price"));
 var _CouponText = _interopRequireDefault(require("../CouponText"));
 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); }
+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 percentage(decimalValue) {
   if (!decimalValue) return null;
   return `${parseFloat(decimalValue) * 100}%`;