fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/components/elements/StoreModalUnifiedCheckout.js

@@ -0,0 +1,753 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StoreModalUnifiedCheckout;
+var _StoreModalUnifiedCheckoutCompleteOrderMutation2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckoutCompleteOrderMutation.graphql"));
+var _StoreModalUnifiedCheckoutUpdateOrderMutation2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckoutUpdateOrderMutation.graphql"));
+var _StoreModalUnifiedCheckoutUpdateCustomerMutation2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckoutUpdateCustomerMutation.graphql"));
+var _StoreModalUnifiedCheckout_order2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckout_order.graphql"));
+var _StoreModalUnifiedCheckout_viewer2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckout_viewer.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactGoogleRecaptcha = _interopRequireDefault(require("react-google-recaptcha"));
+var Sentry = _interopRequireWildcard(require("@sentry/react"));
+var _reactRelay = require("react-relay");
+var _AddressFields = _interopRequireDefault(require("../Cart/AddressFields"));
+var _CustomerFields = _interopRequireDefault(require("../Cart/CustomerFields"));
+var _reactStripeJs = require("@stripe/react-stripe-js");
+var _StoreModalLicenseeIsBillingIdentityElement = _interopRequireDefault(require("./StoreModalLicenseeIsBillingIdentityElement"));
+var _reactRedux = require("react-redux");
+var _StripeLogo = _interopRequireDefault(require("../StripeLogo"));
+var _Icons = require("../Icons");
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _Price = require("../Price");
+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 }; }
+/**
+ * StoreModalUnifiedCheckout
+ *
+ * This component handles the checkout flow for orders, collecting customer information,
+ * billing/licensee details, and processing payment through Stripe.
+ *
+ * Key implementation details:
+ *
+ * 1. Auto-save billing identity (fontdue tax system only):
+ *    - When using fontdue's tax system (not Stripe Tax), we need the billing address
+ *      to calculate taxes before showing the final amount
+ *    - The billing identity is auto-saved (with 500ms debounce) once the Stripe Address
+ *      Element reports complete (name + address fields)
+ *    - Email is a separate field (not part of Address Element), so auto-save may trigger
+ *      before email is filled, which will cause backend validation errors to display
+ *    - This ensures taxes are calculated and displayed before the user clicks Pay
+ *    - On page reload, if billing identity already exists, billingAddressComplete starts
+ *      as true to prevent re-triggering auto-save
+ *
+ * 2. Billing identity diff tracking:
+ *    - We track differences between local state and saved backend data (billingIdentityDiff)
+ *    - This determines isBillingIdentitySaved, which controls when payment can proceed
+ *    - If the user edits any field after auto-save, it triggers another save cycle
+ *    - All fields are normalized (null/undefined/empty string treated as equivalent)
+ *
+ * 3. Pay button validation:
+ *    - The Pay button is always enabled (as long as EULA is checked) even if billing
+ *      info isn't fully saved yet
+ *    - This is intentional: we need to allow the user to click Pay so we can call
+ *      elements.submit(), which triggers Stripe's validation and shows any validation
+ *      errors inline in the Stripe UI elements
+ *    - After Stripe validation passes, we check if billing identity is saved
+ *    - If not saved, we show an error message above the Pay button asking them to
+ *      complete billing information (validation errors should now be visible above)
+ *
+ * 4. Customer info pre-fill:
+ *    - When customer submits their contact info, if billing name/email are empty,
+ *      we pre-fill them from customer data as a convenience
+ *
+ * 5. Country mismatch handling (order snapshots):
+ *    - When loading a hydrated order (e.g., from quote/snapshot), the order may have
+ *      a country variable that differs from the user's detected country
+ *    - In this case, we force licenseeIsBillingIdentity to false and always collect
+ *      separate licensee information to ensure the licensee country matches the quote
+ *    - This preserves pricing/availability from the original quote
+ *
+ * 6. Licensee country syncing:
+ *    - When licensee country changes, it automatically updates any country-type order
+ *      variables to maintain consistent pricing based on the selected country
+ *
+ * 7. Zero-order/coupon flow:
+ *    - Orders with $0 total (due to coupons) bypass Stripe payment entirely
+ *    - These use the completeOrder mutation instead of confirmPayment
+ *
+ * 8. Tax system variations:
+ *    - Stripe Tax system: Uses embedded checkout, billing handled by Stripe
+ *    - Fontdue tax system: Collects billing info directly, auto-saves for tax calculation
+ */
+
+/* const LICENSEE_REQUIRED_FIELDS = ['organization', 'country'] as (keyof Identity)[]; */
+
+const IDENTITY_REQUIRED_FIELDS = ['name', 'email', 'country'];
+const defaultIdentity = {
+  name: '',
+  organization: '',
+  email: '',
+  phone: '',
+  country: '',
+  administrativeArea: null,
+  street: '',
+  locality: '',
+  sublocality: '',
+  zip: '',
+  vatNumber: ''
+};
+function getIdentityFields(object) {
+  if (!object) return;
+  return {
+    name: object.name ?? '',
+    organization: object.organization ?? null,
+    email: object.email ?? '',
+    phone: object.phoneNullable ?? '',
+    country: object.country ?? '',
+    administrativeArea: object.administrativeArea ?? null,
+    street: object.street ?? null,
+    locality: object.locality ?? null,
+    sublocality: object.sublocality ?? null,
+    zip: object.zip ?? null,
+    vatNumber: object.vatNumber ?? null
+  };
+}
+function EditableSection({
+  onSubmit,
+  onCancel,
+  onEdit,
+  disabled,
+  disableSubmit,
+  cancelable,
+  editing,
+  children: {
+    show,
+    edit,
+    save
+  }
+}) {
+  const [submitting, setSubmitting] = (0, _react.useState)(false);
+  const handleSubmit = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    setSubmitting(true);
+    onSubmit({
+      onSuccess: () => {
+        setSubmitting(false);
+      },
+      onError: () => setSubmitting(false)
+    });
+  }, [setSubmitting, onSubmit]);
+  const handleCancel = (0, _react.useCallback)(() => {
+    setSubmitting(false);
+    onCancel?.();
+  }, [setSubmitting, onCancel]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__checkout-section",
+    "data-editing": editing,
+    "data-disabled": disabled
+  }, editing ? /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleSubmit
+  }, edit, /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__buttons"
+  }, cancelable ? /*#__PURE__*/_react.default.createElement("button", {
+    className: "store-modal__cart__button",
+    type: "button",
+    onClick: handleCancel
+  }, "Cancel") : null, /*#__PURE__*/_react.default.createElement("button", {
+    className: "store-modal__cart__button",
+    type: "submit",
+    disabled: submitting || disableSubmit
+  }, submitting ? 'Submitting...' : save))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, show, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "store-modal__cart__edit-button",
+    onClick: onEdit
+  }, "Change")));
+}
+function StoreModalUnifiedCheckout({
+  order: orderKey,
+  viewer: viewerKey,
+  onScrollToTop,
+  onUpdateOrderVariableSelections
+}) {
+  const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "048ce405742611f6684cb5306d28478b" && console.error("The definition of 'StoreModalUnifiedCheckout_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_viewer2.default), viewerKey);
+  const order = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_order2.default.hash && _StoreModalUnifiedCheckout_order2.default.hash !== "7c5503876a562732ebaead9b2ae97180" && console.error("The definition of 'StoreModalUnifiedCheckout_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckout_order2.default), orderKey);
+
+  // Check if order has a country-type order variable with a different country than detected
+  // This is important for order snapshot/quote functionality where a quote was created for
+  // a different country than the user's detected country. In this case, we must collect
+  // licensee information to ensure the country variable matches the licensee's country.
+  // If the countries match (or no country variable exists), allow the normal checkout flow.
+  const countryVariableSelection = order.orderVariableSelections?.find(selection => selection.orderVariable.variableType === 'country');
+  const hasCountryMismatch = countryVariableSelection && countryVariableSelection.countryCode && countryVariableSelection.countryCode !== viewer.detectedCountry;
+
+  // When loading a hydrated order (e.g., from order snapshot/quote), initialize the
+  // licensee country from the order variable country if no licensee country exists yet.
+  // This is useful for the "order snapshot" functionality where we want to preserve
+  // the original country selection from the quote.
+  const getInitialCountry = () => {
+    // If order already has a licensee identity with country, use that
+    if (order?.licenseeIdentity?.country) {
+      return order.licenseeIdentity.country;
+    }
+
+    // Otherwise, check if there's a country-type order variable selection
+    const countryVariableSelection = order?.orderVariableSelections?.find(selection => selection.orderVariable.variableType === 'country');
+    if (countryVariableSelection?.countryCode) {
+      return countryVariableSelection.countryCode;
+    }
+
+    // Fall back to detected country or viewer country
+    return viewer.detectedCountry ?? viewer.country;
+  };
+  const initialIdentity = {
+    ...defaultIdentity,
+    country: getInitialCountry()
+  };
+  const [customer, setCustomer] = (0, _react.useState)(order?.customer ?? {
+    name: null,
+    email: null,
+    newsletterOptIn: false
+  });
+  const [licenseeIdentity, setLicenseeIdentity] = (0, _react.useState)(getIdentityFields(order?.licenseeIdentity) ?? initialIdentity);
+  const [billingIdentity, setBillingIdentity] = (0, _react.useState)(getIdentityFields(order?.billingIdentity) ?? initialIdentity);
+
+  // Track if the Stripe Address Element reports as complete
+  // Start as true if order already has billing identity (page reload case)
+  const [billingAddressComplete, setBillingAddressComplete] = (0, _react.useState)(!!order?.billingIdentity);
+
+  // Track differences between local state and saved backend data
+  const billingIdentityDiff = (0, _react.useMemo)(() => {
+    const savedIdentity = order?.billingIdentity;
+    if (!savedIdentity) return null;
+
+    // Helper to normalize values (treat null, undefined, and empty string as equivalent)
+    const normalize = val => val || '';
+    const differences = {};
+    const checkField = (field, localValue, savedValue) => {
+      const normalizedLocal = normalize(localValue);
+      const normalizedSaved = normalize(savedValue);
+      if (normalizedLocal !== normalizedSaved) {
+        differences[field] = {
+          local: normalizedLocal,
+          saved: normalizedSaved
+        };
+      }
+    };
+    checkField('name', billingIdentity.name, savedIdentity.name);
+    checkField('email', billingIdentity.email, savedIdentity.email);
+    checkField('phone', billingIdentity.phone, savedIdentity.phoneNullable);
+    checkField('country', billingIdentity.country, savedIdentity.country);
+    checkField('street', billingIdentity.street, savedIdentity.street);
+    checkField('locality', billingIdentity.locality, savedIdentity.locality);
+    checkField('sublocality', billingIdentity.sublocality, savedIdentity.sublocality);
+    checkField('administrativeArea', billingIdentity.administrativeArea, savedIdentity.administrativeArea);
+    checkField('zip', billingIdentity.zip, savedIdentity.zip);
+    checkField('organization', billingIdentity.organization, savedIdentity.organization);
+    checkField('vatNumber', billingIdentity.vatNumber, savedIdentity.vatNumber);
+    return Object.keys(differences).length > 0 ? differences : null;
+  }, [billingIdentity, order?.billingIdentity]);
+  const isBillingIdentitySaved = billingIdentityDiff === null && !!order?.billingIdentity;
+  const handleCustomerChange = (0, _react.useCallback)(value => setCustomer(currentValue => ({
+    ...currentValue,
+    ...value
+  })), [setCustomer]);
+  const handleLicenseeChange = (0, _react.useCallback)(value => {
+    setErrorsObject(currentValue => {
+      if (currentValue?.licenseeIdentity) {
+        const keys = Object.keys(value);
+        return {
+          ...currentValue,
+          licenseeIdentity: {
+            ...currentValue.licenseeIdentity,
+            ...keys.reduce((acc, field) => {
+              acc[field] = null;
+              return acc;
+            }, {})
+          }
+        };
+      }
+      return currentValue;
+    });
+    setLicenseeIdentity(currentValue => ({
+      ...currentValue,
+      ...value
+    }));
+  }, [setLicenseeIdentity]);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const [error, setError] = (0, _react.useState)(null);
+  const [errorsObject, setErrorsObject] = (0, _react.useState)(null);
+  const [customerErrorsObject, setCustomerErrorsObject] = (0, _react.useState)(null);
+  const [_submitting, setSubmitting] = (0, _react.useState)(false);
+  /* const [licenseeRequiredFields, setLicenseeRequiredFields] = useState<
+   *   (keyof Identity)[]
+   * >(LICENSEE_REQUIRED_FIELDS); */
+  const [acceptedEULA, setAcceptedEULA] = (0, _react.useState)(false);
+  const {
+    form: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+
+  // reCAPTCHA state
+  const [recaptchaToken, setRecaptchaToken] = (0, _react.useState)(null);
+  const [pendingCustomerSubmit, setPendingCustomerSubmit] = (0, _react.useState)(null);
+  const recaptchaRef = (0, _react.useRef)(null);
+  const recaptchaEnabled = viewer.settings?.recaptchaEnabled ?? false;
+  const recaptchaSiteKey = viewer.settings?.recaptchaSiteKey;
+  const onCompleted = (res, errors, onSuccess, onError) => {
+    if (errors && errors.length > 0) {
+      setError(errors[0].message);
+      setSubmitting(false);
+      onError?.();
+    } else if ('updateCustomer' in res && res.updateCustomer?.errors && (res.updateCustomer.errors.name || res.updateCustomer.errors.email || res.updateCustomer.errors.newsletterOptIn)) {
+      setSubmitting(false);
+      setCustomerErrorsObject(res.updateCustomer.errors);
+      onError?.();
+    } else if ('updateOrder' in res && res.updateOrder?.errors) {
+      setSubmitting(false);
+      setErrorsObject(res.updateOrder.errors);
+      onError?.();
+    } else {
+      onSuccess?.();
+      setSubmitting(false);
+      setError(null);
+      setCustomerErrorsObject(null);
+      setErrorsObject(null);
+    }
+  };
+  const onError = error => {
+    setError(error.message);
+    setSubmitting(false);
+  };
+  const updateCustomer = (0, _react.useCallback)((variables, onSuccess, onErrorCallback) => {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: (_StoreModalUnifiedCheckoutUpdateCustomerMutation2.default.hash && _StoreModalUnifiedCheckoutUpdateCustomerMutation2.default.hash !== "a41e423a93ba20f15ebbe826dd802514" && console.error("The definition of 'StoreModalUnifiedCheckoutUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckoutUpdateCustomerMutation2.default),
+      variables,
+      onCompleted: (res, errors) => onCompleted(res, errors, onSuccess, onErrorCallback),
+      onError
+    });
+  }, [environment]);
+  const updateOrder = (0, _react.useCallback)((variables, onSuccess, onError) => {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: (_StoreModalUnifiedCheckoutUpdateOrderMutation2.default.hash && _StoreModalUnifiedCheckoutUpdateOrderMutation2.default.hash !== "189cd7ac579c6898dca2f4b6e07861d1" && console.error("The definition of 'StoreModalUnifiedCheckoutUpdateOrderMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckoutUpdateOrderMutation2.default),
+      variables,
+      onCompleted: (res, errors) => onCompleted(res, errors, onSuccess, onError),
+      onError
+    });
+  }, [environment]);
+
+  // Update country order variable when licensee address country changes
+  (0, _react.useEffect)(() => {
+    if (!licenseeIdentity.country || !order.orderVariableSelections) return;
+
+    // Find country-type order variable
+    const countryVariableSelection = order.orderVariableSelections.find(selection => selection.orderVariable.variableType === 'country');
+    if (!countryVariableSelection) return;
+
+    // Only update if the country has actually changed
+    if (countryVariableSelection.countryCode === licenseeIdentity.country) return;
+
+    // Build updated selections array
+    const updatedSelections = order.orderVariableSelections.map(selection => ({
+      orderVariableId: selection.orderVariable.id,
+      orderVariableOptionId: selection.orderVariableOption?.id ?? null,
+      countryCode: selection.orderVariable.variableType === 'country' ? licenseeIdentity.country : selection.countryCode ?? null
+    }));
+
+    // Update the order with new country via callback
+    onUpdateOrderVariableSelections(updatedSelections);
+  }, [licenseeIdentity.country, order.orderVariableSelections, onUpdateOrderVariableSelections]);
+
+  // When a country mismatch exists, force licenseeIsBillingIdentity to false
+  // This ensures we always collect licensee information for orders with mismatched country
+  (0, _react.useEffect)(() => {
+    if (hasCountryMismatch && (order.licenseeIsBillingIdentity ?? true)) {
+      // Update order to force separate licensee collection
+      updateOrder({
+        input: {
+          licenseeIsBillingIdentity: false
+        }
+      });
+    }
+  }, [hasCountryMismatch, order.licenseeIsBillingIdentity, updateOrder]);
+
+  // Auto-save billing identity when complete (for fontdue tax system only)
+  // This ensures taxes are calculated before showing the payment element
+  (0, _react.useEffect)(() => {
+    const taxSystem = viewer.settings.taxSystem;
+    const canUseEmbeddedCheckout = taxSystem === 'stripe';
+
+    // Only for fontdue tax system (not Stripe Tax/embedded checkout)
+    if (!canUseEmbeddedCheckout && order.customer && !isBillingIdentitySaved) {
+      // Check if the Stripe Address Element reports as complete AND email is filled
+      const isComplete = billingAddressComplete;
+      if (isComplete) {
+        // Debounce the update to avoid sending on every character change
+        const timeoutId = setTimeout(() => {
+          // Save billing identity to backend for tax calculation
+          updateOrder({
+            input: {
+              billingIdentity
+            }
+          });
+        }, 500); // 500ms debounce
+
+        return () => clearTimeout(timeoutId);
+      }
+    }
+  }, [billingIdentity, isBillingIdentitySaved, billingAddressComplete, order.customer, updateOrder, viewer.settings]);
+  let initialEditingState = null;
+  // set initial state depending on if checkout is already in progress
+  if (!order.customer) initialEditingState = 'customer';
+  const [editing, setEditing] = (0, _react.useState)(initialEditingState);
+
+  // Submit customer data with optional reCAPTCHA token
+  const submitCustomer = (0, _react.useCallback)((token, callbacks) => {
+    setPendingCustomerSubmit(null);
+    if (!billingIdentity.name && !billingIdentity.email) {
+      setBillingIdentity({
+        ...billingIdentity,
+        name: customer.name ?? '',
+        email: customer.email ?? ''
+      });
+    }
+    updateCustomer({
+      input: {
+        ...customer,
+        recaptchaToken: token ?? undefined
+      }
+    }, () => {
+      callbacks.onSuccess();
+      setEditing(null);
+      // Reset reCAPTCHA after successful submission
+      recaptchaRef.current?.reset();
+      setRecaptchaToken(null);
+    }, () => {
+      callbacks.onError();
+      // Reset reCAPTCHA on error so user can retry
+      recaptchaRef.current?.reset();
+      setRecaptchaToken(null);
+    });
+  }, [customer, billingIdentity, updateCustomer]);
+  const handleRecaptchaChange = (0, _react.useCallback)(token => {
+    setRecaptchaToken(token);
+    // If we were waiting for a token to submit, do it now
+    if (token && pendingCustomerSubmit) {
+      submitCustomer(token, pendingCustomerSubmit.callbacks);
+    }
+  }, [pendingCustomerSubmit, submitCustomer]);
+  const handleRecaptchaExpired = (0, _react.useCallback)(() => {
+    setRecaptchaToken(null);
+  }, []);
+  const handleCustomerSubmit = callbacks => {
+    // If reCAPTCHA is enabled but no token, execute it and wait for callback
+    if (recaptchaEnabled && recaptchaSiteKey && !recaptchaToken) {
+      setPendingCustomerSubmit({
+        callbacks
+      });
+      recaptchaRef.current?.execute();
+      return;
+    }
+    submitCustomer(recaptchaToken, callbacks);
+  };
+  const handleLicenseeIsBillingIdentityChange = (0, _react.useCallback)(value => {
+    updateOrder({
+      input: {
+        licenseeIsBillingIdentity: value
+      }
+    });
+  }, [updateOrder]);
+  const handleBillingChange = (0, _react.useCallback)((value, complete) => {
+    setError(null);
+    setErrorsObject(currentValue => {
+      if (currentValue?.billingIdentity) {
+        const keys = Object.keys(value);
+        return {
+          ...currentValue,
+          billingIdentity: {
+            ...currentValue.billingIdentity,
+            ...keys.reduce((acc, field) => {
+              acc[field] = null;
+              return acc;
+            }, {})
+          }
+        };
+      }
+      return currentValue;
+    });
+    setBillingIdentity(currentValue => {
+      const newValue = {
+        ...currentValue,
+        ...value
+      };
+      if (typeof complete === 'boolean') {
+        setBillingAddressComplete(complete);
+      }
+      return newValue;
+    });
+  }, [order?.billingIdentity]);
+  const stripe = (0, _reactStripeJs.useStripe)();
+  const elements = (0, _reactStripeJs.useElements)();
+  const [completing, setCompleting] = (0, _react.useState)(false);
+  const [checkingOut, setCheckingOut] = (0, _react.useState)(false);
+  const dispatch = (0, _reactRedux.useDispatch)();
+
+  // When a country mismatch exists, always show licensee section (force collection)
+  // Otherwise, only show when user has selected "Your client" option
+  const showLicenseeSection = order.customer && (hasCountryMismatch || !(order.licenseeIsBillingIdentity ?? false));
+  const handleCheckout = (0, _react.useCallback)(async () => {
+    // Validate Stripe elements first
+    if (elements) {
+      const result = await elements.submit();
+      if (result.error) {
+        // Stripe will show validation errors in the UI
+        return;
+      }
+    }
+
+    // If licensee section is shown, save licensee data before navigating to checkout
+    if (showLicenseeSection) {
+      setCheckingOut(true);
+      updateOrder({
+        input: {
+          licenseeIdentity
+        }
+      }, () => {
+        setCheckingOut(false);
+        dispatch({
+          type: 'STORE_MODAL_NAVIGATE',
+          route: 'checkout'
+        });
+      }, () => {
+        setCheckingOut(false);
+      });
+    } else {
+      dispatch({
+        type: 'STORE_MODAL_NAVIGATE',
+        route: 'checkout'
+      });
+    }
+  }, [showLicenseeSection, licenseeIdentity, updateOrder, dispatch, elements]);
+  const handleComplete = async e => {
+    e.preventDefault();
+    if (!order) return;
+    if (!billingIdentity) {
+      console.error('No billing identity, required for payment');
+      return;
+    }
+
+    // Validate Stripe elements first
+    if (elements) {
+      const result = await elements.submit();
+      if (result.error) {
+        // Stripe will show validation errors in the UI
+        return;
+      }
+    }
+
+    // If billing identity is not saved yet, don't proceed with payment
+    // The validation above will show errors for incomplete fields
+    if (!isBillingIdentitySaved) {
+      setError('Please complete all billing information above');
+      return;
+    }
+    setCompleting(true);
+    setError(null);
+    const processPayment = () => {
+      if (order.canCompleteWithCoupon) {
+        (0, _reactRelay.commitMutation)(environment, {
+          mutation: (_StoreModalUnifiedCheckoutCompleteOrderMutation2.default.hash && _StoreModalUnifiedCheckoutCompleteOrderMutation2.default.hash !== "ea880419670573334e55529f454f8026" && console.error("The definition of 'StoreModalUnifiedCheckoutCompleteOrderMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StoreModalUnifiedCheckoutCompleteOrderMutation2.default),
+          variables: {},
+          onCompleted: (_response, errors) => {
+            if (errors && errors.length > 0) {
+              setCompleting(false);
+              setError(errors[0].message);
+              return;
+            }
+            window.location.href = order.completeUrl;
+          }
+        });
+        return;
+      }
+      if (!stripe || !elements) return;
+      stripe?.confirmPayment({
+        elements,
+        confirmParams: {
+          return_url: order.completeUrl,
+          payment_method_data: {
+            billing_details: {
+              email: billingIdentity.email,
+              name: billingIdentity.name,
+              phone: billingIdentity.phone,
+              address: {
+                line1: billingIdentity.street?.split(/\n/)[0],
+                line2: billingIdentity.street?.split(/\n/)[1] ?? '',
+                city: billingIdentity.locality ?? '',
+                state: billingIdentity.administrativeArea ?? '',
+                country: billingIdentity.country,
+                postal_code: billingIdentity.zip ?? ''
+              }
+            }
+          }
+        }
+      }).then(result => {
+        if ('error' in result) {
+          setCompleting(false);
+          setError(result.error.message ?? 'Payment failed. Please try another payment method.');
+        }
+      }).catch(error => {
+        console.log(error);
+        setCompleting(false);
+      });
+    };
+
+    // Save both licensee (if shown) and billing info before processing payment
+    const orderInput = {
+      billingIdentity
+    };
+    if (showLicenseeSection) {
+      orderInput.licenseeIdentity = licenseeIdentity;
+    }
+    updateOrder({
+      input: orderInput
+    }, () => {
+      processPayment();
+    }, () => {
+      setCompleting(false);
+    });
+  };
+  const taxSystem = viewer.settings.taxSystem;
+  const canUseEmbeddedCheckout = taxSystem === 'stripe';
+  const showBillingSection = !canUseEmbeddedCheckout && order.customer;
+
+  // billing info will be handled by embedded checkout
+  const showCheckoutButton = canUseEmbeddedCheckout && order.customer;
+  const zeroOrder = order.canCompleteWithCoupon;
+  const showPaymentSection = !canUseEmbeddedCheckout && order.customer;
+  const billingComplete = IDENTITY_REQUIRED_FIELDS.every(key => Boolean(billingIdentity[key]));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(EditableSection, {
+    editing: editing === 'customer',
+    disabled: false,
+    onEdit: () => setEditing('customer'),
+    onSubmit: handleCustomerSubmit,
+    disableSubmit: false
+  }, {
+    save: canUseEmbeddedCheckout ? order.customer ? 'Save' : 'Continue' : 'Checkout',
+    show: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
+      className: "store-modal__cart__checkout-section-title"
+    }, "Contact information"), order.customer ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, order.customer.name, /*#__PURE__*/_react.default.createElement("br", null), order.customer.email) : 'Loading...'),
+    edit: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+      className: "store-modal__cart__checkout-section-title"
+    }, "Contact information"), /*#__PURE__*/_react.default.createElement(_CustomerFields.default, {
+      value: customer,
+      onChange: handleCustomerChange,
+      optInLabel: viewer.settings?.newsletterOptInLabel,
+      errors: customerErrorsObject
+    }), recaptchaEnabled && recaptchaSiteKey && /*#__PURE__*/_react.default.createElement(_reactGoogleRecaptcha.default, {
+      ref: recaptchaRef,
+      sitekey: recaptchaSiteKey,
+      size: "invisible",
+      onChange: handleRecaptchaChange,
+      onExpired: handleRecaptchaExpired
+    }))
+  }), order.customer && !hasCountryMismatch ? /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingIdentityElement.default, {
+    disabled: false,
+    value: order.licenseeIsBillingIdentity ?? false,
+    onChange: handleLicenseeIsBillingIdentityChange
+  }, {
+    label: /*#__PURE__*/_react.default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: viewer.settings?.storeModalSelectLicenseeLabel ?? ''
+      }
+    })
+  }) : null, showLicenseeSection ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__checkout-section"
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "store-modal__cart__checkout-section-title"
+  }, hasCountryMismatch ? 'Licensee information' : 'Licensee information (your client)'), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__identity-fields"
+  }, /*#__PURE__*/_react.default.createElement(_AddressFields.default, {
+    viewer: viewer,
+    value: licenseeIdentity,
+    onChange: handleLicenseeChange,
+    errorsObject: errorsObject?.licenseeIdentity,
+    identityType: "licensee"
+  }))) : null, showBillingSection ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__checkout-section",
+    "data-disabled": !order.customer
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "store-modal__cart__checkout-section-title"
+  }, "Billing information"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__identity-fields"
+  }, /*#__PURE__*/_react.default.createElement(_AddressFields.default, {
+    viewer: viewer,
+    value: billingIdentity,
+    onChange: handleBillingChange,
+    errorsObject: errorsObject?.billingIdentity,
+    identityType: "billing"
+  }))) : null, showCheckoutButton ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__checkout-section",
+    "data-disabled": false
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "store-modal__cart__button",
+    onClick: handleCheckout,
+    disabled: checkingOut
+  }, checkingOut ? 'Submitting...' : 'Checkout')) : null, showPaymentSection ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__checkout-section",
+    "data-disabled": false
+  }, /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleComplete
+  }, !zeroOrder && order.stripePaymentIntent?.clientSecret && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "store-modal__cart__checkout-section-title"
+  }, "Payment information", /*#__PURE__*/_react.default.createElement("span", {
+    className: "store-modal__cart__checkout-section-subtitle"
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://stripe.com",
+    target: "_blank",
+    rel: "noopener"
+  }, "Powered by ", /*#__PURE__*/_react.default.createElement(_StripeLogo.default, null)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__payment"
+  }, /*#__PURE__*/_react.default.createElement(Sentry.ErrorBoundary, {
+    fallback: /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong")
+  }, /*#__PURE__*/_react.default.createElement(_reactStripeJs.PaymentElement, {
+    options: {
+      layout: {
+        type: 'tabs',
+        defaultCollapsed: false,
+        radios: true,
+        spacedAccordionItems: true
+      }
+    }
+  })))), error && /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__error"
+  }, error), /*#__PURE__*/_react.default.createElement("div", {
+    className: "store-modal__cart__agreement"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkbox"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    id: "eula-agreement",
+    checked: acceptedEULA,
+    onChange: event => setAcceptedEULA(event.target.checked)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkbox__icon"
+  }, config.checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null))), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "eula-agreement"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: viewer.settings?.eulaAgreementLabel ?? ''
+    }
+  }))), /*#__PURE__*/_react.default.createElement("button", {
+    type: "submit",
+    className: "store-modal__cart__button",
+    disabled: completing || !acceptedEULA
+  }, completing ? 'Submitting...' : zeroOrder ? 'Complete order' : /*#__PURE__*/_react.default.createElement("span", null, "Pay", ' ', order.stripePaymentIntent?.amount && order.stripePaymentIntent?.currency ? /*#__PURE__*/_react.default.createElement(_Price.Price, {
+    price: {
+      amount: order.stripePaymentIntent.amount,
+      currency: order.stripePaymentIntent.currency
+    }
+  }) : null)))) : null);
+}