fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/components/Cart/CartItem/VariableTextInput.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = VariableTextInput;
+var _react = _interopRequireWildcard(require("react"));
+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 _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 VariableTextInput({
+  defaultValue,
+  onChange,
+  placeholder,
+  ...rest
+}) {
+  const [value, setValue] = (0, _react.useState)(defaultValue || '');
+  const [editing, setEditing] = (0, _react.useState)(!defaultValue);
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const inputRef = (0, _react.useRef)(null);
+  function submit() {
+    setEditing(false);
+    if (value) {
+      if (defaultValue !== value) {
+        onChange(value);
+        setSubmitting(true);
+      }
+    } else {
+      setValue(defaultValue || '');
+      setEditing(!defaultValue);
+    }
+  }
+  (0, _react.useEffect)(() => {
+    if (submitting && value === defaultValue) setSubmitting(false);
+  }, [submitting, setSubmitting, value, defaultValue]);
+  function handleBlur() {
+    submit();
+  }
+  function handleSubmit(e) {
+    e.preventDefault();
+    submit();
+  }
+  function handleChange(e) {
+    setValue(e.target.value);
+  }
+  function handleEditButtonClick() {
+    setEditing(true);
+  }
+  (0, _react.useEffect)(() => {
+    if (editing) {
+      inputRef.current?.focus();
+    }
+  }, [editing]);
+  if (submitting) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "cart-item__license-variable__loading"
+    }, "Updating...");
+  }
+  if (editing) {
+    return /*#__PURE__*/_react.default.createElement("form", {
+      onSubmit: handleSubmit,
+      className: "cart-item__license-variable__text-input-form"
+    }, /*#__PURE__*/_react.default.createElement("input", _extends({
+      ref: inputRef,
+      className: "cart-item__license-variable__text-input",
+      "data-empty": !value,
+      type: "text",
+      value: value,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      placeholder: `Enter ${placeholder}`
+    }, rest)));
+  }
+  return /*#__PURE__*/_react.default.createElement("button", {
+    className: "cart-item__license-variable__text-input-button",
+    type: "button",
+    onClick: handleEditButtonClick
+  }, defaultValue, " ", /*#__PURE__*/_react.default.createElement("span", null, "Edit"));
+}

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

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CartItem;
+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 _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({
+  node: nodeKey,
+  onChange,
+  errors
+}) {
+  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 = () => {
+    setCloseButtonIsHovered(true);
+  };
+  const closeButtonMouseLeave = () => {
+    setCloseButtonIsHovered(false);
+  };
+  const groupedSelections = node.licenseSelections?.reduce((res, selection) => ({
+    ...res,
+    [selection.license.id]: (res[selection.license.id] ?? []).concat(selection)
+  }), {});
+  if (!groupedSelections) return null;
+  const existingLicenseSelectionsInputs = node.licenseSelections?.map(s => ({
+    id: s.id,
+    licenseId: s.license.id,
+    licenseVariableId: s.licenseVariable?.id,
+    licenseOptionId: s.licenseOption?.id,
+    variableText: s.variableText
+  })) ?? [];
+  const handleChangeSelection = selection => {
+    onChange({
+      id: node.id,
+      licenseSelections: existingLicenseSelectionsInputs.filter(s => s.id !== selection.id).concat(selection)
+    });
+  };
+  const handleRemoveLicense = licenseId => {
+    onChange({
+      id: node.id,
+      licenseSelections: existingLicenseSelectionsInputs.filter(input => input.licenseId !== licenseId)
+    });
+  };
+  const handleAddLicense = licenseId => {
+    const license = node.sku?.product?.licenses?.find(l => l.id === licenseId);
+    if (!license) return;
+    const newLicenseSelectionInput = license.licenseVariables?.length ? license.licenseVariables.map(variable => ({
+      licenseId,
+      licenseVariableId: variable.id,
+      licenseOptionId: variable.licenseOptions?.[0]?.id
+    })) : [{
+      licenseId
+    }];
+    onChange({
+      id: node.id,
+      licenseSelections: existingLicenseSelectionsInputs.concat(newLicenseSelectionInput)
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item",
+    "data-close-button-hovered": closeButtonIsHovered,
+    "data-license-count": Object.keys(groupedSelections).length
+  }, /*#__PURE__*/_react.default.createElement(_CartItemProduct.default, {
+    product: node.sku?.product ?? null
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "cart-item__licenses"
+  }, 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?.licenseSelections ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart-item__error"
+  }, "License selections ", 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(_CartItemAdditionalLicenses.default, {
+    licenses: node.sku?.product?.licenses ?? null,
+    orderItem: node,
+    onAddLicense: handleAddLicense
+  }));
+}

package/dist-cjs/components/Cart/CartOrder.js

@@ -0,0 +1,314 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _CartOrder_viewer2 = _interopRequireDefault(require("../../__generated__/CartOrder_viewer.graphql"));
+var _CartOrder_order2 = _interopRequireDefault(require("../../__generated__/CartOrder_order.graphql"));
+var _CartOrderRemoveDiscountMutation2 = _interopRequireDefault(require("../../__generated__/CartOrderRemoveDiscountMutation.graphql"));
+var _CartOrderUpdateMutation2 = _interopRequireDefault(require("../../__generated__/CartOrderUpdateMutation.graphql"));
+var _CartOrder_UpdateErrors2 = _interopRequireDefault(require("../../__generated__/CartOrder_UpdateErrors.graphql"));
+var _CartOrderCompleteOrderMutation2 = _interopRequireDefault(require("../../__generated__/CartOrderCompleteOrderMutation.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _Checkout = _interopRequireDefault(require("./Checkout"));
+var _CheckoutSteps = _interopRequireDefault(require("./CheckoutSteps"));
+var _CartItem = _interopRequireDefault(require("./CartItem"));
+var _Icons = require("../Icons");
+var _Download = _interopRequireDefault(require("./Download"));
+var _CouponCodeInput = _interopRequireDefault(require("./CouponCodeInput"));
+var _EmptyCart = _interopRequireDefault(require("./EmptyCart"));
+var _IdentityBox = _interopRequireDefault(require("./IdentityBox"));
+var _CartTotals = _interopRequireDefault(require("./CartTotals"));
+var _utils = require("./utils");
+var _reactStripeJs = require("@stripe/react-stripe-js");
+var _reactRedux = require("react-redux");
+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
+
+// 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`
+// (this is because the 'order' field on customer represents
+//   their current 'cart', and when we pay for an order, we
+//   want to reset the cart back to empty).
+// but here we want to keep displaying the order that they
+// just paid for
+const submitCompleteMutation = (_CartOrderCompleteOrderMutation2.default.hash && _CartOrderCompleteOrderMutation2.default.hash !== "86f8fe7e3a867ae234cb381df186c107" && console.error("The definition of 'CartOrderCompleteOrderMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrderCompleteOrderMutation2.default);
+_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 = ({
+  order: orderKey,
+  viewer: viewerKey,
+  open
+}) => {
+  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 !== "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 !== "8cf5ab5a33a474483a6c231cc44b0df1" && 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,
+  // whereas 'error' refers to schema/network/catastrophic errors
+  const [error, setError] = (0, _react.useState)(null);
+  const [errors, setErrors] = (0, _react.useState)(null);
+  const [checkingOut, setCheckingOut] = (0, _react.useState)(false);
+  const [completing, setCompleting] = (0, _react.useState)(false);
+  const [paymentError, setPaymentError] = (0, _react.useState)(null);
+  const [checkoutStep, setCheckoutStep] = (0, _react.useState)(0);
+  const [eulaAgreed, setEulaAgreed] = (0, _react.useState)(false);
+  const modal = (0, _react.useRef)(null);
+  const submitOrderChange = orderItems => {
+    if (!orderItems) return;
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: orderChangeMutation,
+      variables: {
+        input: {
+          orderItems
+        }
+      },
+      onCompleted: (result, errors) => {
+        if (errors?.[0]) {
+          setError(errors[0].message);
+        } else if (result.updateOrder?.errors) {
+          setErrors(result.updateOrder.errors);
+        }
+      }
+    });
+  };
+  const openCheckout = () => setCheckingOut(true);
+  const closeCheckout = () => setCheckingOut(false);
+  const openCheckoutStep = checkoutStep => {
+    setCheckingOut(true);
+    setCheckoutStep(checkoutStep);
+  };
+  const complete = () => {
+    setCompleting(true);
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: submitCompleteMutation,
+      variables: {},
+      onCompleted: (response, errors) => {
+        const requiresAction = response.completeOrder && response.completeOrder.requiresAction;
+        if (requiresAction === 'use_stripe_sdk') {
+          const secret = response.completeOrder?.order?.stripePaymentIntent?.clientSecret;
+          if (!secret) throw new Error('Stripe payment secret not found');
+          stripe?.handleCardAction(secret).then(result => {
+            if (result.error?.message) {
+              setPaymentError(result.error.message);
+              setCompleting(false);
+              setCheckingOut(true);
+              setCheckoutStep(_CheckoutSteps.default.Payment);
+            } else {
+              // re-confirm
+              complete();
+            }
+          });
+          return;
+        }
+        if (requiresAction === 'enter_new_payment_method') {
+          setPaymentError('We were unable to complete your payment, please re-enter your card details and try again');
+          setCompleting(false);
+          setCheckingOut(true);
+          setCheckoutStep(_CheckoutSteps.default.Payment);
+          return;
+        }
+        if (errors && errors.length > 0) {
+          setPaymentError(errors[0].message);
+          setCompleting(false);
+          setCheckingOut(true);
+        }
+      }
+    });
+  };
+  const removeDiscount = () => {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: removeDiscountMutation,
+      variables: {},
+      onCompleted: (_result, errors) => {
+        if (errors?.[0]) {
+          setError(errors[0].message);
+        }
+      }
+    });
+  };
+  const requiresCheckout = () => !order.canCompleteWithCoupon;
+  const clearError = () => {
+    submitOrderChange([]);
+    setError(null);
+  };
+  const validateCanSubmit = () => {
+    return eulaAgreed && (0, _utils.textVariablesAllHaveText)(order);
+  };
+  const handleScrollToTop = () => {
+    if (modal.current) {
+      modal.current.scrollTop = 0;
+    }
+  };
+  if (!order) return null;
+  const {
+    orderItems
+  } = order;
+  if (!orderItems || orderItems.length < 1) {
+    return /*#__PURE__*/_react.default.createElement(_EmptyCart.default, {
+      open: open
+    });
+  }
+  const reviewing = Boolean(order.customer && !order.customer.anonymous && order.billingIdentity && (order.licenseeIdentity || order.licenseeIsBillingIdentity) && (order.stripePaymentMethod || order.canCompleteWithCoupon));
+  if (order.completedWithCoupon || order.stripePaymentIntent && order.stripePaymentIntent.status === 'succeeded') {
+    return /*#__PURE__*/_react.default.createElement(_Download.default, {
+      order: order
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart",
+    "data-open": open,
+    "data-eula-agreed": eulaAgreed
+  }, open && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__scroller"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__top"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__nav"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "cart__nav__back",
+    type: "button",
+    onClick: () => dispatch({
+      type: 'CLOSE_CART'
+    })
+  }, /*#__PURE__*/_react.default.createElement(_Icons.X, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__nav__title"
+  }, "Your cart")), (order.customer || order.billingIdentity || order.licenseeIdentity || order.stripePaymentMethod) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__review"
+  }, order.billingIdentity && /*#__PURE__*/_react.default.createElement(_IdentityBox.default, {
+    identity: order.billingIdentity,
+    title: "Billing information",
+    onClick: () => openCheckoutStep(_CheckoutSteps.default.Billing)
+  }, {
+    icon: /*#__PURE__*/_react.default.createElement(_Icons.Receipt, null)
+  }), order.licenseeIdentity && /*#__PURE__*/_react.default.createElement(_IdentityBox.default, {
+    identity: order.licenseeIdentity,
+    title: "Licensee information",
+    onClick: () => openCheckoutStep(_CheckoutSteps.default.Licensee)
+  }, {
+    icon: /*#__PURE__*/_react.default.createElement(_Icons.License, null)
+  }), order.customer && !order.customer.anonymous && /*#__PURE__*/_react.default.createElement("button", {
+    className: "cart__review__button cart__review__user-info",
+    type: "button",
+    onClick: () => openCheckoutStep(_CheckoutSteps.default.Customer)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__review__label"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.User, null), " Contact information", ' ', /*#__PURE__*/_react.default.createElement("span", {
+    className: "cart__review__label__text"
+  }, "Edit")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__review__section"
+  }, order.customer.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__review__section"
+  }, order.customer.email)), order.stripePaymentMethod && /*#__PURE__*/_react.default.createElement("button", {
+    className: "cart__review__button cart__review__credit-info",
+    type: "button",
+    onClick: () => openCheckoutStep(_CheckoutSteps.default.Payment)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__review__label"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CreditCard, null), " Payment", ' ', /*#__PURE__*/_react.default.createElement("span", {
+    className: "cart__review__label__text"
+  }, "Edit")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__review__section"
+  }, "\u2013\u2013\u2013\u2013\u2013\u2013 \u2013\u2013\u2013\u2013\u2013\u2013 ", order.stripePaymentMethod.card?.last4)))), (error || errors) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__error"
+  }, "There was a problem with your order.", ' ', /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: clearError,
+    className: "cart__error__button"
+  }, "Click here"), ' ', "to empty your cart and continue shopping."), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__middle"
+  }, /*#__PURE__*/_react.default.createElement(_CartState.default, {
+    order: order
+  }, ({
+    onUpdateOrderItem
+  }) => /*#__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"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__price-blocks-and-agreement"
+  }, /*#__PURE__*/_react.default.createElement(_CartTotals.default, {
+    order: order,
+    onRemoveDiscount: removeDiscount
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__price-agreement",
+    "data-highlighted": !eulaAgreed && reviewing
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkbox"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    id: "eula-agreement",
+    checked: eulaAgreed,
+    onChange: e => setEulaAgreed(e.target.checked)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkbox__icon"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null))), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "eula-agreement",
+    dangerouslySetInnerHTML: {
+      __html: viewer.settings?.eulaAgreementLabel ?? ''
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__additions"
+  }, !order.discount && /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__coupon-input"
+  }, /*#__PURE__*/_react.default.createElement(_CouponCodeInput.default, null))), reviewing ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__checkout-button"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "submit-button",
+    onClick: complete,
+    disabled: completing || !validateCanSubmit(),
+    "data-label": "submit",
+    type: "button",
+    "data-highlighted": true
+  }, completing ? 'Submitting...' : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, order.canCompleteWithCoupon ? 'Complete order using coupon' : 'Submit payment', /*#__PURE__*/_react.default.createElement("span", {
+    className: "submit-button__arrow"
+  }, ' →')))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "cart__checkout-button"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "submit-button",
+    onClick: openCheckout,
+    type: "button"
+  }, "Proceed", requiresCheckout() && ' to checkout', /*#__PURE__*/_react.default.createElement("span", {
+    className: "submit-button__arrow"
+  }, ' →'))))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: checkingOut ? 'initial' : 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__click-out",
+    onClick: closeCheckout
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__modal",
+    ref: modal
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__form"
+  }, /*#__PURE__*/_react.default.createElement(_Checkout.default, {
+    viewer: viewer,
+    order: order,
+    error: paymentError,
+    onCancel: closeCheckout,
+    onComplete: closeCheckout,
+    setCheckoutStep: setCheckoutStep,
+    checkoutStep: checkoutStep,
+    onScrollToTop: handleScrollToTop
+  }))))))));
+};
+var _default = CartOrder;
+exports.default = _default;

package/dist-cjs/components/Cart/CartState.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CartState;
+var _CartState_order2 = _interopRequireDefault(require("../../__generated__/CartState_order.graphql"));
+var _CartStateRemoveDiscountMutation2 = _interopRequireDefault(require("../../__generated__/CartStateRemoveDiscountMutation.graphql"));
+var _CartStateUpdateMutation2 = _interopRequireDefault(require("../../__generated__/CartStateUpdateMutation.graphql"));
+var _react = require("react");
+var _reactRelay = require("react-relay");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const orderChangeMutation = (_CartStateUpdateMutation2.default.hash && _CartStateUpdateMutation2.default.hash !== "07a639cd3bfbfa0d797f6b8380603859" && 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({
+  order: orderKey,
+  children
+}) {
+  const order = (0, _reactRelay.useFragment)((_CartState_order2.default.hash && _CartState_order2.default.hash !== "43fd3d7af7ffe0b50a192674fde8286c" && 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 handleUpdateOrder = (0, _react.useCallback)(input => {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: orderChangeMutation,
+      variables: {
+        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);
+        }
+      }
+    });
+  }, [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([{
+        id: item.id,
+        licenseSelections: item.licenseSelections.map(({
+          license,
+          licenseVariable,
+          licenseOption,
+          variableText
+        }) => {
+          if (!license) return null;
+          return {
+            licenseId: license.id,
+            licenseVariableId: licenseVariable && licenseVariable.id,
+            licenseOptionId: licenseOption && licenseOption.id,
+            variableText
+          };
+        })
+      }]).filter(Boolean);
+    }, [])
+    /* remove order items if there are no licenses */.filter(item => item.licenseSelections.length > 0);
+    handleUpdateOrder({
+      orderItems
+    });
+  }, [order.orderItems]);
+  const handleUpdateOrderVariableSelections = (0, _react.useCallback)(variables => {
+    handleUpdateOrder({
+      orderVariableSelections: variables
+    });
+  }, [handleUpdateOrder]);
+  return children({
+    onUpdateOrderVariableSelections: handleUpdateOrderVariableSelections,
+    onRemoveDiscount: handleRemoveDiscount,
+    onUpdateOrderItem: handleUpdateOrderItem,
+    errors,
+    error
+  });
+}