fontdue-js 2.16.1 → 2.17.1

package/dist/components/elements/StoreModalUnifiedCheckout.js

@@ -10,14 +10,13 @@ var _StoreModalUnifiedCheckoutUpdateCustomerMutation2 = _interopRequireDefault(r
 var _StoreModalUnifiedCheckout_order2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckout_order.graphql"));
 var _StoreModalUnifiedCheckout_viewer2 = _interopRequireDefault(require("../../__generated__/StoreModalUnifiedCheckout_viewer.graphql"));
 var _react = _interopRequireWildcard(require("react"));
+var Sentry = _interopRequireWildcard(require("@sentry/react"));
 var _reactRelay = require("react-relay");
 var _AddressFields = _interopRequireDefault(require("../Cart/AddressFields"));
 var _CustomerFields = _interopRequireDefault(require("../Cart/CustomerFields"));
-var _StoreModalReviewIdentity = _interopRequireDefault(require("../StoreModal/StoreModalReviewIdentity"));
 var _reactStripeJs = require("@stripe/react-stripe-js");
 var _StoreModalLicenseeIsBillingIdentityElement = _interopRequireDefault(require("./StoreModalLicenseeIsBillingIdentityElement"));
 var _reactRedux = require("react-redux");
-var _reactErrorBoundary = require("react-error-boundary");
 var _StripeLogo = _interopRequireDefault(require("../StripeLogo"));
 var _Icons = require("../Icons");
 var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
@@ -25,9 +24,68 @@ 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', 'phone', 'country'];
+const IDENTITY_REQUIRED_FIELDS = ['name', 'email', 'country'];
 const defaultIdentity = {
   name: '',
   organization: '',
@@ -43,17 +101,18 @@ const defaultIdentity = {
 };
 function getIdentityFields(object) {
   if (!object) return;
-  const identityKeys = Object.keys(defaultIdentity);
-  const result = {};
-  for (const key of identityKeys) {
-    if (key in object) {
-      const value = object[key];
-      if (value) result[key] = value;
-    }
-  }
   return {
-    ...defaultIdentity,
-    ...result
+    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(_ref) {
@@ -67,7 +126,8 @@ function EditableSection(_ref) {
     editing,
     children: {
       show,
-      edit
+      edit,
+      save
     }
   } = _ref;
   const [submitting, setSubmitting] = (0, _react.useState)(false);
@@ -101,24 +161,54 @@ function EditableSection(_ref) {
     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", {
+  }, 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(_ref2) {
-  var _viewer$settings, _viewer$settings2, _viewer$settings3, _order$stripePaymentI, _order$stripePaymentI2;
+  var _order$orderVariableS, _viewer$settings, _viewer$settings2, _viewer$settings3, _order$stripePaymentI, _order$stripePaymentI2;
   let {
     order: orderKey,
     viewer: viewerKey,
-    onScrollToTop
+    onScrollToTop,
+    onUpdateOrderVariableSelections
   } = _ref2;
-  const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "568763fc3756be6256c132ebf0fcacb7" && 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 !== "94683a80ba2c7104fd80f9e508cd6d70" && 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);
+  const viewer = (0, _reactRelay.useFragment)((_StoreModalUnifiedCheckout_viewer2.default.hash && _StoreModalUnifiedCheckout_viewer2.default.hash !== "83cc5e6f8d508fb1c2356a72b040f9b0" && 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 !== "ea43fb766c4dd1183b46ddf449aa85bd" && 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$orderVariableS = order.orderVariableSelections) === null || _order$orderVariableS === void 0 ? void 0 : _order$orderVariableS.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 = () => {
+    var _order$licenseeIdenti, _order$orderVariableS2;
+    // If order already has a licensee identity with country, use that
+    if (order !== null && order !== void 0 && (_order$licenseeIdenti = order.licenseeIdentity) !== null && _order$licenseeIdenti !== void 0 && _order$licenseeIdenti.country) {
+      return order.licenseeIdentity.country;
+    }
+
+    // Otherwise, check if there's a country-type order variable selection
+    const countryVariableSelection = order === null || order === void 0 ? void 0 : (_order$orderVariableS2 = order.orderVariableSelections) === null || _order$orderVariableS2 === void 0 ? void 0 : _order$orderVariableS2.find(selection => selection.orderVariable.variableType === 'country');
+    if (countryVariableSelection !== null && countryVariableSelection !== void 0 && countryVariableSelection.countryCode) {
+      return countryVariableSelection.countryCode;
+    }
+
+    // Fall back to detected country or viewer country
+    return viewer.detectedCountry ?? viewer.country;
+  };
   const initialIdentity = {
     ...defaultIdentity,
-    country: viewer.country
+    country: getInitialCountry()
   };
   const [customer, setCustomer] = (0, _react.useState)((order === null || order === void 0 ? void 0 : order.customer) ?? {
     name: null,
@@ -127,25 +217,73 @@ function StoreModalUnifiedCheckout(_ref2) {
   });
   const [licenseeIdentity, setLicenseeIdentity] = (0, _react.useState)(getIdentityFields(order === null || order === void 0 ? void 0 : order.licenseeIdentity) ?? initialIdentity);
   const [billingIdentity, setBillingIdentity] = (0, _react.useState)(getIdentityFields(order === null || order === void 0 ? void 0 : 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 !== null && order !== void 0 && order.billingIdentity));
+
+  // Track differences between local state and saved backend data
+  const billingIdentityDiff = (0, _react.useMemo)(() => {
+    const savedIdentity = order === null || order === void 0 ? void 0 : 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 === null || order === void 0 ? void 0 : order.billingIdentity]);
+  const isBillingIdentitySaved = billingIdentityDiff === null && !!(order !== null && order !== void 0 && order.billingIdentity);
   const handleCustomerChange = (0, _react.useCallback)(value => setCustomer(currentValue => ({
     ...currentValue,
     ...value
   })), [setCustomer]);
   const handleLicenseeChange = (0, _react.useCallback)(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] = null;
+              return acc;
+            }, {})
+          }
+        };
+      }
+      return currentValue;
+    });
     setLicenseeIdentity(currentValue => ({
       ...currentValue,
       ...value
     }));
   }, [setLicenseeIdentity]);
-  const handleBillingChange = (0, _react.useCallback)(value => {
-    setBillingIdentity(currentValue => ({
-      ...currentValue,
-      ...value
-    }));
-  }, [setBillingIdentity]);
   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)[]
@@ -155,11 +293,15 @@ function StoreModalUnifiedCheckout(_ref2) {
     form: config
   } = (0, _react.useContext)(_ConfigContext.default);
   const onCompleted = (res, errors, onSuccess, onError) => {
-    var _res$updateOrder;
+    var _res$updateCustomer, _res$updateOrder;
     if (errors && errors.length > 0) {
       setError(errors[0].message);
       setSubmitting(false);
       onError === null || onError === void 0 ? void 0 : onError();
+    } else if ('updateCustomer' in res && (_res$updateCustomer = res.updateCustomer) !== null && _res$updateCustomer !== void 0 && _res$updateCustomer.errors && (res.updateCustomer.errors.name || res.updateCustomer.errors.email || res.updateCustomer.errors.newsletterOptIn)) {
+      setSubmitting(false);
+      setCustomerErrorsObject(res.updateCustomer.errors);
+      onError === null || onError === void 0 ? void 0 : onError();
     } else if ('updateOrder' in res && (_res$updateOrder = res.updateOrder) !== null && _res$updateOrder !== void 0 && _res$updateOrder.errors) {
       setSubmitting(false);
       setErrorsObject(res.updateOrder.errors);
@@ -168,18 +310,19 @@ function StoreModalUnifiedCheckout(_ref2) {
       onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
       setSubmitting(false);
       setError(null);
+      setCustomerErrorsObject(null);
+      setErrorsObject(null);
     }
   };
   const onError = error => {
     setError(error.message);
     setSubmitting(false);
-    onScrollToTop();
   };
-  const updateCustomer = (0, _react.useCallback)((variables, onSuccess) => {
+  const updateCustomer = (0, _react.useCallback)((variables, onSuccess, onErrorCallback) => {
     (0, _reactRelay.commitMutation)(environment, {
-      mutation: (_StoreModalUnifiedCheckoutUpdateCustomerMutation2.default.hash && _StoreModalUnifiedCheckoutUpdateCustomerMutation2.default.hash !== "1927e9fb21dbae898062200a560b1277" && 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),
+      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),
+      onCompleted: (res, errors) => onCompleted(res, errors, onSuccess, onErrorCallback),
       onError
     });
   }, [environment]);
@@ -187,21 +330,82 @@ function StoreModalUnifiedCheckout(_ref2) {
     (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),
+      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 => {
+      var _selection$orderVaria;
+      return {
+        orderVariableId: selection.orderVariable.id,
+        orderVariableOptionId: ((_selection$orderVaria = selection.orderVariableOption) === null || _selection$orderVaria === void 0 ? void 0 : _selection$orderVaria.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.billingIdentity) initialEditingState = 'billing';
-  if (order.licenseeIsBillingIdentity === false && !order.licenseeIdentity) {
-    initialEditingState = 'licensee';
-  }
   if (!order.customer) initialEditingState = 'customer';
   const [editing, setEditing] = (0, _react.useState)(initialEditingState);
   const handleCustomerSubmit = _ref3 => {
     let {
-      onSuccess
+      onSuccess,
+      onError
     } = _ref3;
     if (!billingIdentity.name && !billingIdentity.email) {
       setBillingIdentity({
@@ -215,140 +419,192 @@ function StoreModalUnifiedCheckout(_ref2) {
     }, () => {
       onSuccess();
       setEditing(null);
-      if (order.licenseeIsBillingIdentity) {
-        if (!order.billingIdentity) setEditing('billing');
-      } else {
-        if (!order.licenseeIdentity) setEditing('licensee');
-      }
-    });
+    }, onError);
   };
   const handleLicenseeIsBillingIdentityChange = (0, _react.useCallback)(value => {
     updateOrder({
       input: {
         licenseeIsBillingIdentity: value
       }
-    }, () => {
-      if (!value && !order.licenseeIdentity) {
-        setEditing('licensee');
-      }
-      if (value && !order.billingIdentity) {
-        setEditing('billing');
-      }
     });
-  }, [updateOrder, order.licenseeIdentity]);
-  const handleLicenseeSubmit = _ref4 => {
-    let {
-      onSuccess,
-      onError
-    } = _ref4;
-    updateOrder({
-      input: {
-        licenseeIdentity
+  }, [updateOrder]);
+  const handleBillingChange = (0, _react.useCallback)((value, complete) => {
+    setError(null);
+    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;
+            }, {})
+          }
+        };
       }
-    }, () => {
-      onSuccess();
-      setEditing(null);
-      if (!order.billingIdentity) setEditing('billing');
-    }, onError);
-  };
-  const handleBillingSubmit = _ref5 => {
-    let {
-      onSuccess
-    } = _ref5;
-    updateOrder({
-      input: {
-        billingIdentity
+      return currentValue;
+    });
+    setBillingIdentity(currentValue => {
+      const newValue = {
+        ...currentValue,
+        ...value
+      };
+      if (typeof complete === 'boolean') {
+        setBillingAddressComplete(complete);
       }
-    }, () => {
-      onSuccess();
-      setEditing(null);
+      return newValue;
     });
-  };
+  }, [order === null || order === void 0 ? void 0 : 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)();
-  const handleCheckout = (0, _react.useCallback)(() => {
-    dispatch({
-      type: 'STORE_MODAL_NAVIGATE',
-      route: 'checkout'
-    });
-  }, []);
-  const handleComplete = e => {
-    var _billingIdentity$stre, _billingIdentity$stre2;
+
+  // 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);
-    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;
+    const processPayment = () => {
+      var _billingIdentity$stre, _billingIdentity$stre2;
+      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;
           }
-          window.location.href = order.completeUrl;
-        }
-      });
-      return;
-    }
-    if (!stripe || !elements) return;
-    stripe === null || stripe === void 0 ? void 0 : 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$stre = billingIdentity.street) === null || _billingIdentity$stre === void 0 ? void 0 : _billingIdentity$stre.split(/\n/)[0],
-              line2: ((_billingIdentity$stre2 = billingIdentity.street) === null || _billingIdentity$stre2 === void 0 ? void 0 : _billingIdentity$stre2.split(/\n/)[1]) ?? '',
-              city: billingIdentity.locality ?? '',
-              state: billingIdentity.administrativeArea ?? '',
-              country: billingIdentity.country,
-              postal_code: billingIdentity.zip ?? ''
+        });
+        return;
+      }
+      if (!stripe || !elements) return;
+      stripe === null || stripe === void 0 ? void 0 : 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$stre = billingIdentity.street) === null || _billingIdentity$stre === void 0 ? void 0 : _billingIdentity$stre.split(/\n/)[0],
+                line2: ((_billingIdentity$stre2 = billingIdentity.street) === null || _billingIdentity$stre2 === void 0 ? void 0 : _billingIdentity$stre2.split(/\n/)[1]) ?? '',
+                city: billingIdentity.locality ?? '',
+                state: billingIdentity.administrativeArea ?? '',
+                country: billingIdentity.country,
+                postal_code: billingIdentity.zip ?? ''
+              }
             }
           }
         }
-      }
-    }).then(result => {
-      if ('error' in result) {
+      }).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);
-        setError(result.error.message ?? 'Payment failed. Please try another payment method.');
-      }
-    }).catch(error => {
-      console.log(error);
+      });
+    };
+
+    // 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 showLicenseeSection = order.customer && !order.licenseeIsBillingIdentity;
-  const hasLicensee = order.licenseeIsBillingIdentity ? true : Boolean(order.licenseeIdentity);
-  const showBillingSection = !canUseEmbeddedCheckout && (order.customer && hasLicensee || order.billingIdentity);
+  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 && order.billingIdentity && hasLicensee;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, error && /*#__PURE__*/_react.default.createElement("div", {
-    className: "store-modal__cart__error"
-  }, error), /*#__PURE__*/_react.default.createElement(EditableSection, {
+  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: !customer.name || !customer.email
+    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...'),
@@ -357,11 +613,12 @@ function StoreModalUnifiedCheckout(_ref2) {
     }, "Contact information"), /*#__PURE__*/_react.default.createElement(_CustomerFields.default, {
       value: customer,
       onChange: handleCustomerChange,
-      optInLabel: (_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.newsletterOptInLabel
+      optInLabel: (_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.newsletterOptInLabel,
+      errors: customerErrorsObject
     }))
-  }), order.customer ? /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingIdentityElement.default, {
+  }), order.customer && !hasCountryMismatch ? /*#__PURE__*/_react.default.createElement(_StoreModalLicenseeIsBillingIdentityElement.default, {
     disabled: false,
-    value: order.licenseeIsBillingIdentity,
+    value: order.licenseeIsBillingIdentity ?? false,
     onChange: handleLicenseeIsBillingIdentityChange
   }, {
     label: /*#__PURE__*/_react.default.createElement("div", {
@@ -369,72 +626,42 @@ function StoreModalUnifiedCheckout(_ref2) {
         __html: ((_viewer$settings2 = viewer.settings) === null || _viewer$settings2 === void 0 ? void 0 : _viewer$settings2.storeModalSelectLicenseeLabel) ?? ''
       }
     })
-  }) : null, showLicenseeSection ? /*#__PURE__*/_react.default.createElement(EditableSection, {
-    disabled: false,
-    editing: editing === 'licensee',
-    onEdit: () => setEditing('licensee'),
-    disableSubmit: Object.keys(licenseeIdentity).some(key => {
-      if (IDENTITY_REQUIRED_FIELDS.includes(key)) return Boolean(licenseeIdentity[key]) === false;
-      return false;
-    }),
-    onSubmit: handleLicenseeSubmit
-  }, {
-    edit: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
-      className: "store-modal__cart__checkout-section-title"
-    }, "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 === null || errorsObject === void 0 ? void 0 : errorsObject.licenseeIdentity,
-      identityType: "licensee"
-    }))),
-    show: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
-      className: "store-modal__cart__checkout-section-title"
-    }, "Licensee information (your client)"), order.licenseeIdentity ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "store-modal__cart__identity"
-    }, /*#__PURE__*/_react.default.createElement(_StoreModalReviewIdentity.default, {
-      identity: order.licenseeIdentity
-    })) : 'Loading...')
-  }) : null, showBillingSection ? /*#__PURE__*/_react.default.createElement(EditableSection, {
-    disabled: false,
-    editing: editing === 'billing',
-    onEdit: () => setEditing('billing'),
-    disableSubmit: Object.keys(billingIdentity).some(key => {
-      if (IDENTITY_REQUIRED_FIELDS.includes(key)) return Boolean(billingIdentity[key]) === false;
-      return false;
-    }),
-    onSubmit: handleBillingSubmit
-  }, {
-    edit: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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 === null || errorsObject === void 0 ? void 0 : errorsObject.billingIdentity,
-      identityType: "billing"
-    }))),
-    show: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
-      className: "store-modal__cart__checkout-section-title"
-    }, "Billing information"), order.billingIdentity ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "store-modal__cart__identity"
-    }, /*#__PURE__*/_react.default.createElement(_StoreModalReviewIdentity.default, {
-      identity: order.billingIdentity
-    })) : 'Loading...')
-  }) : null, showCheckoutButton ? /*#__PURE__*/_react.default.createElement("div", {
+  }) : 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 === null || errorsObject === void 0 ? void 0 : errorsObject.licenseeIdentity,
+    identityType: "licensee"
+  }))) : null, showBillingSection ? /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__cart__checkout-section",
-    "data-disabled": showLicenseeSection ? editing === 'licensee' : false
+    "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 === null || errorsObject === void 0 ? void 0 : 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
-  }, "Checkout")) : null, showPaymentSection ? /*#__PURE__*/_react.default.createElement("div", {
+    onClick: handleCheckout,
+    disabled: checkingOut
+  }, checkingOut ? 'Submitting...' : 'Checkout')) : null, showPaymentSection ? /*#__PURE__*/_react.default.createElement("div", {
     className: "store-modal__cart__checkout-section",
-    "data-disabled": editing !== null
+    "data-disabled": false
   }, /*#__PURE__*/_react.default.createElement("form", {
     onSubmit: handleComplete
   }, !zeroOrder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
@@ -447,7 +674,7 @@ function StoreModalUnifiedCheckout(_ref2) {
     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(_reactErrorBoundary.ErrorBoundary, {
+  }, /*#__PURE__*/_react.default.createElement(Sentry.ErrorBoundary, {
     fallback: /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong")
   }, /*#__PURE__*/_react.default.createElement(_reactStripeJs.PaymentElement, {
     options: {
@@ -456,21 +683,11 @@ function StoreModalUnifiedCheckout(_ref2) {
         defaultCollapsed: false,
         radios: true,
         spacedAccordionItems: true
-      },
-      defaultValues: {
-        billingDetails: {
-          name: order.customer.name ?? undefined,
-          email: order.customer.email ?? undefined,
-          phone: order.billingIdentity.phone ?? undefined
-        }
-      },
-      fields: {
-        billingDetails: {
-          address: 'never'
-        }
       }
     }
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+  })))), 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"