fontdue-js 1.10.0 → 1.10.2

package/dist/components/Cart/Checkout.js

@@ -4,51 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactRelay = require("react-relay");
-
-var _reactStripeElements = require("react-stripe-elements");
-
+var _reactStripeJs = require("@stripe/react-stripe-js");
 var _Icons = require("../Icons");
-
 var _AddressFields = _interopRequireDefault(require("./AddressFields"));
-
 var _CustomerFields = _interopRequireDefault(require("./CustomerFields"));
-
 var _CheckoutSteps = _interopRequireDefault(require("./CheckoutSteps"));
-
-var _injectRelayEnvironment = _interopRequireDefault(require("./injectRelayEnvironment"));
-
-var _CheckoutUpdateCustomerMutation, _CheckoutUpdateOrderMutation, _Checkout_identity, _Checkout_order, _Checkout_viewer, _Checkout_Refetch_Query;
-
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _Checkout_identity, _CheckoutUpdateCustomerMutation, _Checkout_UpdateOrderErrors, _CheckoutUpdateOrderMutation, _Checkout_order, _Checkout_viewer;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 const MOBILE = 'mobile';
-const DESKTOP = 'desktop'; // countryData will take care of knowing which address fields
-// are required
+const DESKTOP = 'desktop';
 
+// countryData will take care of knowing which address fields
+// are required
 const IDENTITY_REQUIRED_FIELDS = ['name', 'email', 'phone', 'country'];
-const stepFields = {
-  [_CheckoutSteps.default.Customer]: 'customer',
-  [_CheckoutSteps.default.Billing]: 'billingIdentity',
-  [_CheckoutSteps.default.Licensee]: 'licenseeIdentity'
-};
-
-const getCountryFromState = (state, step) => {
-  const currentStateFields = state[stepFields[step]];
-  return currentStateFields ? currentStateFields.country : null;
-};
-
 const parseCustomProperties = props => {
   if (!props) return {};
   return props.reduce((acc, prop) => {
@@ -57,327 +30,267 @@ const parseCustomProperties = props => {
     return acc;
   }, {});
 };
-
+_Checkout_identity !== void 0 ? _Checkout_identity : (_Checkout_identity = require("../../__generated__/Checkout_identity.graphql"), _Checkout_identity.hash && _Checkout_identity.hash !== "e69fe84d0b5b4a205aa52d5eefe1048d" && console.error("The definition of 'Checkout_identity' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_identity);
 const updateCustomerMutation = _CheckoutUpdateCustomerMutation !== void 0 ? _CheckoutUpdateCustomerMutation : (_CheckoutUpdateCustomerMutation = require("../../__generated__/CheckoutUpdateCustomerMutation.graphql"), _CheckoutUpdateCustomerMutation.hash && _CheckoutUpdateCustomerMutation.hash !== "0b5cfd0771be9b3107817aefcc7029cf" && console.error("The definition of 'CheckoutUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CheckoutUpdateCustomerMutation);
-const updateOrderMutation = _CheckoutUpdateOrderMutation !== void 0 ? _CheckoutUpdateOrderMutation : (_CheckoutUpdateOrderMutation = require("../../__generated__/CheckoutUpdateOrderMutation.graphql"), _CheckoutUpdateOrderMutation.hash && _CheckoutUpdateOrderMutation.hash !== "6e5ed083f06e766e8f156ce7ed59999b" && console.error("The definition of 'CheckoutUpdateOrderMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CheckoutUpdateOrderMutation);
-
-class CheckoutFormBase extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-
-    _defineProperty(this, "setMediaQuery", () => {
-      window.requestAnimationFrame(() => {
-        this.setState({
-          mediaQuery: window.innerWidth < 960 ? MOBILE : DESKTOP
-        });
-      });
-    });
-
-    _defineProperty(this, "submitMutation", ({
-      mutation,
-      input,
-      onSuccess
-    }) => {
-      (0, _reactRelay.commitMutation)(this.props.environment, {
-        mutation,
-        variables: {
-          input
-        },
-        onCompleted: (res, errors) => {
-          if (errors && errors.length > 0) {
-            this.setState({
-              error: errors[0].message,
-              submitting: false
-            });
-            this.props.onScrollToTop();
-          } else if (res.updateOrder && res.updateOrder.errors) {
-            this.setState({
-              submitting: false,
-              errorsObject: res.updateOrder.errors
-            });
-            this.props.onScrollToTop();
-          } else {
-            if (typeof onSuccess === 'function') onSuccess();
-            this.setState({
-              submitting: false,
-              error: null
-            });
-          }
-        },
-        onError: ({
-          message
-        }) => {
-          this.setState({
-            error: message,
-            submitting: false
-          });
-          this.props.onScrollToTop();
-        }
-      });
-    });
-
-    _defineProperty(this, "updateCustomer", props => {
-      this.submitMutation({ ...props,
-        mutation: updateCustomerMutation
-      });
+_Checkout_UpdateOrderErrors !== void 0 ? _Checkout_UpdateOrderErrors : (_Checkout_UpdateOrderErrors = require("../../__generated__/Checkout_UpdateOrderErrors.graphql"), _Checkout_UpdateOrderErrors.hash && _Checkout_UpdateOrderErrors.hash !== "d76073037a16138de572dbb22d72da8f" && console.error("The definition of 'Checkout_UpdateOrderErrors' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_UpdateOrderErrors);
+const updateOrderMutation = _CheckoutUpdateOrderMutation !== void 0 ? _CheckoutUpdateOrderMutation : (_CheckoutUpdateOrderMutation = require("../../__generated__/CheckoutUpdateOrderMutation.graphql"), _CheckoutUpdateOrderMutation.hash && _CheckoutUpdateOrderMutation.hash !== "089745e2478edf385a09357905e4173c" && console.error("The definition of 'CheckoutUpdateOrderMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CheckoutUpdateOrderMutation);
+const Checkout = _ref => {
+  var _orderData$customer, _orderData$billingIde, _orderData$licenseeId, _orderData$licenseeIs;
+  let {
+    order,
+    viewer,
+    checkoutStep,
+    setCheckoutStep,
+    onScrollToTop,
+    onComplete,
+    error: errorProp,
+    saveText = 'Next',
+    onCancel
+  } = _ref;
+  const orderData = (0, _reactRelay.useFragment)(_Checkout_order !== void 0 ? _Checkout_order : (_Checkout_order = require("../../__generated__/Checkout_order.graphql"), _Checkout_order.hash && _Checkout_order.hash !== "693ae9c7f2c7fe9a179bad7b86c16928" && console.error("The definition of 'Checkout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_order), order);
+  const viewerData = (0, _reactRelay.useFragment)(_Checkout_viewer !== void 0 ? _Checkout_viewer : (_Checkout_viewer = require("../../__generated__/Checkout_viewer.graphql"), _Checkout_viewer.hash && _Checkout_viewer.hash !== "d20d03a2aab3f8bc454ac19fc6368178" && console.error("The definition of 'Checkout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_viewer), viewer);
+  const identity = {
+    name: '',
+    organization: '',
+    email: '',
+    phone: '',
+    country: 'US',
+    administrativeArea: null,
+    street: '',
+    locality: '',
+    sublocality: '',
+    zip: '',
+    vatNumber: ''
+  };
+  const [customer, setCustomer] = (0, _react.useState)((_orderData$customer = orderData === null || orderData === void 0 ? void 0 : orderData.customer) !== null && _orderData$customer !== void 0 ? _orderData$customer : {
+    name: null,
+    email: null,
+    newsletterOptIn: false
+  });
+  const [billingIdentity, setBillingIdentity] = (0, _react.useState)((_orderData$billingIde = orderData === null || orderData === void 0 ? void 0 : orderData.billingIdentity) !== null && _orderData$billingIde !== void 0 ? _orderData$billingIde : identity);
+  const [licenseeIdentity, setLicenseeIdentity] = (0, _react.useState)((_orderData$licenseeId = orderData === null || orderData === void 0 ? void 0 : orderData.licenseeIdentity) !== null && _orderData$licenseeId !== void 0 ? _orderData$licenseeId : identity);
+  const [billingRequired, setBillingRequired] = (0, _react.useState)();
+  const [licenseeRequired, setLicenseeRequired] = (0, _react.useState)(null);
+  const [licenseeIsBillingIdentity, setLicenseeIsBillingIdentity] = (0, _react.useState)((_orderData$licenseeIs = orderData === null || orderData === void 0 ? void 0 : orderData.licenseeIsBillingIdentity) !== null && _orderData$licenseeIs !== void 0 ? _orderData$licenseeIs : true);
+  const [error, setError] = (0, _react.useState)(null);
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const [mediaQuery, setMediaQuery] = (0, _react.useState)(DESKTOP);
+  (0, _react.useEffect)(() => {
+    const updateMediaQuery = () => {
+      setMediaQuery(window.innerWidth < 960 ? MOBILE : DESKTOP);
+    };
+    updateMediaQuery();
+    window.addEventListener('resize', updateMediaQuery);
+    return () => window.removeEventListener('resize', updateMediaQuery);
+  }, []);
+  (0, _react.useEffect)(() => {
+    setError(null);
+    setErrorsObject(null);
+    onScrollToTop();
+  }, [checkoutStep]);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const [errorsObject, setErrorsObject] = (0, _react.useState)(null);
+  const onCompleted = (res, errors, onSuccess) => {
+    var _res$updateOrder;
+    if (errors && errors.length > 0) {
+      setError(errors[0].message);
+      setSubmitting(false);
+      onScrollToTop();
+    } else if ('updateOrder' in res && (_res$updateOrder = res.updateOrder) !== null && _res$updateOrder !== void 0 && _res$updateOrder.errors) {
+      setSubmitting(false);
+      setErrorsObject(res.updateOrder.errors);
+      onScrollToTop();
+    } else {
+      if (typeof onSuccess === 'function') onSuccess();
+      setSubmitting(false);
+      setError(null);
+    }
+  };
+  const onError = error => {
+    setError(error.message);
+    setSubmitting(false);
+    onScrollToTop();
+  };
+  const updateCustomer = (variables, onSuccess) => {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: updateCustomerMutation,
+      variables,
+      onCompleted: (res, errors) => onCompleted(res, errors, onSuccess),
+      onError
     });
-
-    _defineProperty(this, "updateOrder", props => {
-      this.submitMutation({ ...props,
-        mutation: updateOrderMutation
-      });
+  };
+  const updateOrder = (variables, onSuccess) => {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: updateOrderMutation,
+      variables,
+      onCompleted: (res, errors) => onCompleted(res, errors, onSuccess)
     });
-
-    _defineProperty(this, "handleSubmit", e => {
-      e.preventDefault();
-      const {
-        customer,
-        billingIdentity,
-        licenseeIdentity,
-        licenseeIsBillingIdentity
-      } = this.state;
-      const {
-        onComplete,
-        onCancel,
-        checkoutStep,
-        setCheckoutStep,
-        order
-      } = this.props;
-      this.setState({
-        submitting: true,
-        error: null
+  };
+  const stripe = (0, _reactStripeJs.useStripe)();
+  const elements = (0, _reactStripeJs.useElements)();
+  const handleSubmit = () => {
+    setSubmitting(true);
+    setError(null);
+    if (checkoutStep === _CheckoutSteps.default.Customer) {
+      updateCustomer({
+        input: customer
+      }, () => setCheckoutStep(_CheckoutSteps.default.Billing));
+    }
+    if (checkoutStep === _CheckoutSteps.default.Billing) {
+      updateOrder({
+        input: {
+          billingIdentity
+        }
+      }, () => setCheckoutStep(_CheckoutSteps.default.Licensee));
+    }
+    if (checkoutStep === _CheckoutSteps.default.Licensee) {
+      updateOrder({
+        input: {
+          licenseeIsBillingIdentity,
+          licenseeIdentity: licenseeIsBillingIdentity ? null : licenseeIdentity
+        }
+      }, () => {
+        if (orderData !== null && orderData !== void 0 && orderData.canCompleteWithCoupon) {
+          onComplete();
+        } else {
+          setCheckoutStep(_CheckoutSteps.default.Payment);
+        }
       });
-
-      if (checkoutStep === _CheckoutSteps.default.Customer) {
-        this.updateCustomer({
-          input: { ...customer
-          },
-          onSuccess: () => setCheckoutStep(_CheckoutSteps.default.Billing)
-        });
-      }
-
-      if (checkoutStep === _CheckoutSteps.default.Billing) {
-        this.updateOrder({
-          input: {
-            billingIdentity
-          },
-          onSuccess: () => setCheckoutStep(_CheckoutSteps.default.Licensee)
-        });
+    }
+    if (checkoutStep === _CheckoutSteps.default.Payment) {
+      var _billingIdentity$stre, _billingIdentity$zip;
+      if (!stripe || !elements) {
+        console.error('Stripe failed to load');
+        return;
       }
-
-      if (checkoutStep === _CheckoutSteps.default.Licensee) {
-        this.updateOrder({
-          input: {
-            licenseeIsBillingIdentity,
-            licenseeIdentity: licenseeIsBillingIdentity ? null : licenseeIdentity
-          },
-          onSuccess: () => {
-            if (order.canCompleteWithCoupon) {
-              onComplete();
-            } else {
-              setCheckoutStep(_CheckoutSteps.default.Payment);
-            }
-          }
-        });
+      const card = elements.getElement(_reactStripeJs.CardElement);
+      if (!card) {
+        console.error('Didnt find Stripe Card element');
+        return;
       }
-
-      if (checkoutStep === _CheckoutSteps.default.Payment) {
-        const {
-          stripe
-        } = this.props;
-        stripe.createPaymentMethod('card', {
-          billing_details: {
-            email: billingIdentity.email,
-            name: billingIdentity.name,
-            address: {
-              line1: billingIdentity.street.split(/\n/)[0],
-              city: billingIdentity.locality || '',
-              state: billingIdentity.administrativeArea || '',
-              country: billingIdentity.country,
-              postal_code: billingIdentity.zip
-            }
+      stripe.createPaymentMethod({
+        type: 'card',
+        card,
+        billing_details: {
+          email: billingIdentity.email,
+          name: billingIdentity.name,
+          address: {
+            line1: (_billingIdentity$stre = billingIdentity.street) === null || _billingIdentity$stre === void 0 ? void 0 : _billingIdentity$stre.split(/\n/)[0],
+            city: billingIdentity.locality || '',
+            state: billingIdentity.administrativeArea || '',
+            country: billingIdentity.country,
+            postal_code: (_billingIdentity$zip = billingIdentity.zip) !== null && _billingIdentity$zip !== void 0 ? _billingIdentity$zip : undefined
           }
-        }).then(({
+        }
+      }).then(_ref2 => {
+        let {
           paymentMethod,
           error
-        }) => {
-          if (error) {
-            this.setState({
-              error: error.message,
-              submitting: false
-            });
-          } else {
-            this.updateOrder({
+        } = _ref2;
+        if (error) {
+          var _error$message;
+          setError((_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : 'Unknown Stripe error');
+          setSubmitting(false);
+        } else {
+          if (paymentMethod) {
+            updateOrder({
               input: {
                 stripePaymentMethodId: paymentMethod.id
-              },
-              onSuccess: onComplete
-            });
+              }
+            }, onComplete);
           }
-        }).catch(console.error);
-      }
-    });
-
-    _defineProperty(this, "removeErrorsFromFields", (key, fields) => Object.keys(fields).forEach(field => this.setState(({
-      errorsObject
-    }) => ({
-      errorsObject: errorsObject ? {
-        [key]: { ...errorsObject[key],
-          [field]: null
-        }
-      } : null
-    }))));
-
-    _defineProperty(this, "makeFieldHandler", field => fields => {
-      this.removeErrorsFromFields(field, fields);
-      this.setState(currentState => ({
-        [field]: { ...currentState[field],
-          ...fields
         }
-      }));
-    });
-
-    _defineProperty(this, "handleCustomerChange", this.makeFieldHandler('customer'));
-
-    _defineProperty(this, "handleBillingChange", this.makeFieldHandler('billingIdentity'));
-
-    _defineProperty(this, "handleLicenseeChange", this.makeFieldHandler('licenseeIdentity'));
-
-    _defineProperty(this, "isValid", () => {
-      const {
-        checkoutStep,
-        viewer
-      } = this.props;
-      const currentState = this.state[stepFields[checkoutStep]];
-
-      const fieldHasValue = field => currentState[field] !== '' && currentState[field] !== null && currentState[field] !== undefined;
-
-      if (checkoutStep === _CheckoutSteps.default.Customer) {
-        return ['name', 'email'].every(fieldHasValue);
+      }).catch(console.error);
+    }
+  };
+  const handleCustomerChange = value => setCustomer(currentValue => ({
+    ...currentValue,
+    ...value
+  }));
+  const handleBillingChange = value => {
+    setErrorsObject(currentValue => {
+      if (currentValue !== null && currentValue !== void 0 && currentValue.billingIdentity) {
+        const keys = Object.keys(value);
+        return {
+          ...currentValue,
+          billingIdentity: {
+            ...currentValue.billingIdentity,
+            ...keys.reduce((acc, field) => {
+              acc[field] = null;
+              return acc;
+            }, {})
+          }
+        };
       }
-
-      if (checkoutStep === _CheckoutSteps.default.Billing || checkoutStep === _CheckoutSteps.default.Licensee) {
-        var _viewer$countryData;
-
-        if (!((_viewer$countryData = viewer.countryData) !== null && _viewer$countryData !== void 0 && _viewer$countryData.response)) return false;
-        if (checkoutStep === _CheckoutSteps.default.Licensee && this.state.licenseeIsBillingIdentity) return true;
-        return IDENTITY_REQUIRED_FIELDS.concat(viewer.countryData.response.require).every(fieldHasValue);
+      return null;
+    });
+    setBillingIdentity(currentValue => ({
+      ...currentValue,
+      ...value
+    }));
+  };
+  const handleLicenseeChange = value => {
+    setErrorsObject(currentValue => {
+      if (currentValue !== null && currentValue !== void 0 && currentValue.licenseeIdentity) {
+        const keys = Object.keys(value);
+        return {
+          ...currentValue,
+          licenseeIdentity: {
+            ...currentValue.licenseeIdentity,
+            ...keys.reduce((acc, field) => {
+              acc[field] = undefined;
+              return acc;
+            }, {})
+          }
+        };
       }
-
-      return true;
+      return null;
     });
-
-    const identity = {
-      name: '',
-      organization: '',
-      email: '',
-      phone: '',
-      country: 'US',
-      administrativeArea: null,
-      street: '',
-      locality: '',
-      sublocality: '',
-      zip: '',
-      vatNumber: ''
-    };
-    this.state = {
-      customer: _props.order.customer || {
-        name: '',
-        email: '',
-        newsletterOptIn: false
-      },
-      billingIdentity: _props.order.billingIdentity || identity,
-      licenseeIdentity: _props.order.licenseeIdentity || identity,
-      licenseeIsBillingIdentity: _props.order.licenseeIsBillingIdentity || true,
-      error: null,
-      submitting: false,
-      token: null,
-      confirming: false // show confirmation + 'Pay' button
-
-    };
-  }
-
-  componentDidMount() {
-    this.setMediaQuery();
-    window.addEventListener('resize', this.setMediaQuery);
-
-    if (this.props.checkoutStep === _CheckoutSteps.default.Billing || this.props.checkoutStep === _CheckoutSteps.default.Licensee) {
-      // difficult to query this data from identity stuff,
-      // unless we add support for that to the schema
-      // so we'll just do it after-the-fact
-      this.props.onUpdateCountry(getCountryFromState(this.state, this.props.checkoutStep));
+    setLicenseeIdentity(currentValue => ({
+      ...currentValue,
+      ...value
+    }));
+  };
+  const isValid = () => {
+    if (checkoutStep === _CheckoutSteps.default.Customer) {
+      return Boolean(customer.name && customer.email);
     }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    // get country data for currently visible country;
-    // we need country to be at this level since the isValid() step is here
-    // and we need the `require` prop to know if it's valid
-    if (this.props.checkoutStep === _CheckoutSteps.default.Billing || this.props.checkoutStep === _CheckoutSteps.default.Licensee) {
-      const prevCountry = getCountryFromState(prevState, prevProps.checkoutStep);
-      const currentCountry = getCountryFromState(this.state, this.props.checkoutStep);
-
-      if (prevCountry !== currentCountry) {
-        this.props.onUpdateCountry(currentCountry);
-      }
+    if (checkoutStep === _CheckoutSteps.default.Billing) {
+      const requiredFields = IDENTITY_REQUIRED_FIELDS.concat(billingRequired !== null && billingRequired !== void 0 ? billingRequired : []);
+      return requiredFields.every(field => billingIdentity[field]);
     }
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.setMediaQuery);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.checkoutStep !== nextProps.checkoutStep) {
-      // remove errors if not relavent to the current form
-      this.setState({
-        error: null,
-        errorsObject: null
-      });
+    if (checkoutStep === _CheckoutSteps.default.Licensee) {
+      if (licenseeIsBillingIdentity) return true;
+      const requiredFields = IDENTITY_REQUIRED_FIELDS.concat(licenseeRequired !== null && licenseeRequired !== void 0 ? licenseeRequired : []);
+      return requiredFields.every(field => licenseeIdentity[field]);
     }
-  }
-
-  renderErrors() {
-    if (this.state.errorsObject) {
+    return true;
+  };
+  const renderErrors = () => {
+    if (errorsObject) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "checkout-modal__errors"
       }, "Please correct the errors.");
     }
-
-    if (!this.state.error && !this.props.error) {
+    if (!error && !errorProp) {
       return null;
     }
-
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "checkout-modal__errors"
-    }, this.state.error && /*#__PURE__*/_react.default.createElement("p", null, this.state.error), this.props.error && /*#__PURE__*/_react.default.createElement("p", null, this.props.error));
-  }
-
-  renderStep(checkoutStep) {
-    var _viewer$themeConfig, _viewer$settings;
-
-    const {
-      mediaQuery,
-      billingIdentity,
-      licenseeIdentity,
-      licenseeIsBillingIdentity,
-      errorsObject,
-      customer
-    } = this.state;
-    const {
-      setCheckoutStep,
-      viewer,
-      countryDataUpdating,
-      checkboxStyle
-    } = this.props;
-    const customProperties = parseCustomProperties(viewer === null || viewer === void 0 ? void 0 : (_viewer$themeConfig = viewer.themeConfig) === null || _viewer$themeConfig === void 0 ? void 0 : _viewer$themeConfig.customProperties); // stripe validates that the strings match this pattern and throws an error
+    }, error && /*#__PURE__*/_react.default.createElement("p", null, error), errorProp && /*#__PURE__*/_react.default.createElement("p", null, errorProp));
+  };
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const renderStep = checkoutStep => {
+    var _viewerData$themeConf, _viewerData$settings;
+    const customProperties = parseCustomProperties((_viewerData$themeConf = viewerData.themeConfig) === null || _viewerData$themeConf === void 0 ? void 0 : _viewerData$themeConf.customProperties);
+
+    // stripe validates that the strings match this pattern and throws an error
     // if they don't, and refuses to render the element. for example if a font
     // family has a special character in the name (which is actually valid).
     // so we just don't try to the fontFamily if it's not gonna be valid.
     // this regex is copied from the stripe js
-
     const stripeRegex = /^[#a-zA-Z0-9-_\s,"'().]*$/;
-    let fontFamily = `"${(_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.uiFontName}", sans-serif`;
+    let fontFamily = `"${(_viewerData$settings = viewerData.settings) === null || _viewerData$settings === void 0 ? void 0 : _viewerData$settings.uiFontName}", sans-serif`;
     if (!stripeRegex.test(fontFamily)) fontFamily = undefined;
     const inputStyles = {
       base: {
@@ -393,17 +306,15 @@ class CheckoutFormBase extends _react.default.Component {
         color: customProperties['--error_color']
       }
     };
-
     if (checkoutStep === _CheckoutSteps.default.Customer) {
+      var _viewerData$settings2;
       return /*#__PURE__*/_react.default.createElement(_CustomerFields.default, {
         title: "Contact information",
         value: customer,
-        onChange: this.handleCustomerChange,
-        errorsObject: errorsObject && errorsObject.customer,
-        optInLabel: viewer.settings.newsletterOptInLabel
+        onChange: handleCustomerChange,
+        optInLabel: (_viewerData$settings2 = viewerData.settings) === null || _viewerData$settings2 === void 0 ? void 0 : _viewerData$settings2.newsletterOptInLabel
       });
     }
-
     const customerBreadcrumb = /*#__PURE__*/_react.default.createElement("div", {
       className: "checkout-modal__section"
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -415,10 +326,7 @@ class CheckoutFormBase extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement(_Icons.User, null), " Contact information", ' ', /*#__PURE__*/_react.default.createElement("span", {
       className: "checkout-modal__customer-info__check"
     }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)))));
-
     if (checkoutStep === _CheckoutSteps.default.Billing) {
-      var _viewer$countryData2;
-
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, customerBreadcrumb, /*#__PURE__*/_react.default.createElement("div", {
         className: "checkout-modal__section"
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -426,17 +334,14 @@ class CheckoutFormBase extends _react.default.Component {
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "checkout-modal__customer-info-message"
       }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Icons.Receipt, null), " Billing information")))), /*#__PURE__*/_react.default.createElement(_AddressFields.default, {
-        title: "Billing information",
-        countryData: (viewer === null || viewer === void 0 ? void 0 : (_viewer$countryData2 = viewer.countryData) === null || _viewer$countryData2 === void 0 ? void 0 : _viewer$countryData2.response) || null,
-        viewer: viewer,
+        viewer: viewerData,
         value: billingIdentity,
-        onChange: this.handleBillingChange,
+        onChange: handleBillingChange,
         requireAtLeast: IDENTITY_REQUIRED_FIELDS,
-        errorsObject: errorsObject && errorsObject.billingIdentity,
-        countryDataUpdating: countryDataUpdating
+        errorsObject: errorsObject === null || errorsObject === void 0 ? void 0 : errorsObject.billingIdentity,
+        onRequiredFieldsChange: setBillingRequired
       }));
     }
-
     const billingBreadcrumb = /*#__PURE__*/_react.default.createElement("div", {
       className: "checkout-modal__section"
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -448,10 +353,8 @@ class CheckoutFormBase extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement(_Icons.Receipt, null), " Billing information", ' ', /*#__PURE__*/_react.default.createElement("span", {
       className: "checkout-modal__customer-info__check"
     }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)))));
-
     if (checkoutStep === _CheckoutSteps.default.Licensee) {
-      var _viewer$countryData3;
-
+      var _config$form;
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, customerBreadcrumb, billingBreadcrumb, /*#__PURE__*/_react.default.createElement("div", {
         className: "checkout-modal__section"
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -466,25 +369,20 @@ class CheckoutFormBase extends _react.default.Component {
         type: "checkbox",
         id: "licensee-is-billing-identity",
         checked: licenseeIsBillingIdentity,
-        onChange: e => this.setState({
-          licenseeIsBillingIdentity: e.target.checked
-        })
+        onChange: e => setLicenseeIsBillingIdentity(e.target.checked)
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: "checkbox__icon"
-      }, checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null))), /*#__PURE__*/_react.default.createElement("label", {
+      }, ((_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.checkboxStyle) === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null))), /*#__PURE__*/_react.default.createElement("label", {
         htmlFor: "licensee-is-billing-identity"
       }, "Use the same billing details for licensee")), licenseeIsBillingIdentity === false && /*#__PURE__*/_react.default.createElement(_AddressFields.default, {
-        title: "Licensee information",
-        viewer: viewer,
-        countryData: (viewer === null || viewer === void 0 ? void 0 : (_viewer$countryData3 = viewer.countryData) === null || _viewer$countryData3 === void 0 ? void 0 : _viewer$countryData3.response) || null,
+        viewer: viewerData,
         value: licenseeIdentity,
-        onChange: this.handleLicenseeChange,
+        onChange: handleLicenseeChange,
         requireAtLeast: IDENTITY_REQUIRED_FIELDS,
-        errorsObject: errorsObject && errorsObject.licenseeIdentity,
-        countryDataUpdating: countryDataUpdating
+        errorsObject: errorsObject === null || errorsObject === void 0 ? void 0 : errorsObject.licenseeIdentity,
+        onRequiredFieldsChange: setLicenseeRequired
       }));
     }
-
     const licenseeBreadcrumb = /*#__PURE__*/_react.default.createElement("div", {
       className: "checkout-modal__section"
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -496,7 +394,6 @@ class CheckoutFormBase extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement(_Icons.License, null), " Licensee information", ' ', /*#__PURE__*/_react.default.createElement("span", {
       className: "checkout-modal__customer-info__check"
     }, /*#__PURE__*/_react.default.createElement(_Icons.Check, null)))));
-
     if (checkoutStep === _CheckoutSteps.default.Payment) {
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, customerBreadcrumb, billingBreadcrumb, licenseeBreadcrumb, /*#__PURE__*/_react.default.createElement("div", {
         className: "checkout-modal__section"
@@ -514,121 +411,36 @@ class CheckoutFormBase extends _react.default.Component {
         className: "checkout-modal__credit-card-message__secondary-text"
       }, "(Secure payments powered by Stripe)"))))), /*#__PURE__*/_react.default.createElement("div", {
         className: "checkout-modal__section"
-      }, /*#__PURE__*/_react.default.createElement(_reactStripeElements.CardElement, {
-        style: inputStyles,
-        hidePostalCode: true
+      }, /*#__PURE__*/_react.default.createElement(_reactStripeJs.CardElement, {
+        options: {
+          style: inputStyles,
+          hidePostalCode: true
+        }
       })), errorsObject && errorsObject.stripePaymentMethodId && errorsObject.stripePaymentMethodId.length > 0 && /*#__PURE__*/_react.default.createElement("p", {
         className: "checkout-modal__section__errors"
       }, errorsObject.stripePaymentMethodId[0]));
     }
-
     return null;
-  }
-
-  render() {
-    const {
-      saveText = 'Next',
-      onCancel,
-      checkoutStep
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.renderErrors(), /*#__PURE__*/_react.default.createElement("form", {
-      onSubmit: this.handleSubmit,
-      style: {
-        display: this.state.confirming ? 'none' : 'contents'
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "checkout-modal__sections"
-    }, this.renderStep(checkoutStep)), /*#__PURE__*/_react.default.createElement("div", {
-      className: "checkout-modal__buttons"
-    }, /*#__PURE__*/_react.default.createElement("button", {
-      className: "checkout-modal__button",
-      onClick: onCancel,
-      "data-label": "cancel",
-      type: "button"
-    }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
-      className: "checkout-modal__button",
-      "data-label": "confirm",
-      disabled: !this.isValid() || this.state.submitting,
-      type: "submit"
-    }, this.state.submitting ? 'Submitting...' : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, saveText, /*#__PURE__*/_react.default.createElement("span", {
-      className: "checkout-modal__button__arrow"
-    }, " \u2192"))))));
-  }
-
-}
-
-const CheckoutForm = (0, _injectRelayEnvironment.default)(CheckoutFormBase);
-
-class CheckoutComponent extends _react.default.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      refetching: false
-    });
-
-    _defineProperty(this, "refetchCountryData", countryCode => {
-      const {
-        relay
-      } = this.props;
-
-      if (countryCode) {
-        if (this.currentRefetch) {
-          this.currentRefetch.dispose();
-        }
-
-        this.setState({
-          refetching: true
-        });
-        this.currentRefetch = relay.refetch({
-          countryCode,
-          includeCountryCode: true
-        }, null, () => {
-          this.setState({
-            refetching: false
-          });
-        });
-      }
-    });
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.checkoutStep !== this.props.checkoutStep) {
-      this.props.onScrollToTop();
-    }
-  }
-
-  render() {
-    const {
-      order,
-      onCancel,
-      onComplete,
-      onScrollToTop,
-      viewer,
-      relay,
-      ...rest
-    } = this.props;
-    const {
-      refetching
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement(CheckoutForm, _extends({}, rest, {
-      viewer: viewer,
-      onCancel: onCancel,
-      onComplete: onComplete,
-      order: order,
-      onScrollToTop: onScrollToTop,
-      onUpdateCountry: this.refetchCountryData,
-      countryDataUpdating: refetching
-    }));
-  }
-
-} // eslint-disable-next-line no-unused-expressions
-
-
-_Checkout_identity !== void 0 ? _Checkout_identity : (_Checkout_identity = require("../../__generated__/Checkout_identity.graphql"), _Checkout_identity.hash && _Checkout_identity.hash !== "e69fe84d0b5b4a205aa52d5eefe1048d" && console.error("The definition of 'Checkout_identity' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_identity);
-const Checkout = (0, _reactRelay.createRefetchContainer)(CheckoutComponent, {
-  order: _Checkout_order !== void 0 ? _Checkout_order : (_Checkout_order = require("../../__generated__/Checkout_order.graphql"), _Checkout_order.hash && _Checkout_order.hash !== "693ae9c7f2c7fe9a179bad7b86c16928" && console.error("The definition of 'Checkout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_order),
-  viewer: _Checkout_viewer !== void 0 ? _Checkout_viewer : (_Checkout_viewer = require("../../__generated__/Checkout_viewer.graphql"), _Checkout_viewer.hash && _Checkout_viewer.hash !== "c160a87370232346bf51bc9dff9ab051" && console.error("The definition of 'Checkout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_viewer)
-}, _Checkout_Refetch_Query !== void 0 ? _Checkout_Refetch_Query : (_Checkout_Refetch_Query = require("../../__generated__/Checkout_Refetch_Query.graphql"), _Checkout_Refetch_Query.hash && _Checkout_Refetch_Query.hash !== "74262d3ffae1792d1bb5342c303c422b" && console.error("The definition of 'Checkout_Refetch_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _Checkout_Refetch_Query));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, renderErrors(), /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: e => (e.preventDefault(), handleSubmit())
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__sections"
+  }, renderStep(checkoutStep)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkout-modal__buttons"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "checkout-modal__button",
+    onClick: onCancel,
+    "data-label": "cancel",
+    type: "button"
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
+    className: "checkout-modal__button",
+    "data-label": "confirm",
+    disabled: !isValid() || submitting,
+    type: "submit"
+  }, submitting ? 'Submitting...' : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, saveText, /*#__PURE__*/_react.default.createElement("span", {
+    className: "checkout-modal__button__arrow"
+  }, " \u2192"))))));
+};
 var _default = Checkout;
 exports.default = _default;