fontdue-js 2.22.1 → 2.22.3

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

@@ -1,753 +0,0 @@
-"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);
-}