@funnelsgrove/payments 0.11.11 → 0.11.13

package/dist/providers/stripe/components/StripeCheckoutExpressCheckoutButton.js

@@ -32,9 +32,11 @@ const buildDefaultOptions = () => ({
 export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAnalytics, checkoutSessionId, returnUrl, confirmEmail = true, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, serverUpdateKey, supportedCountries, onServerUpdate, onAvailabilityChange, onCancel, onError, onPaymentInfoSubmitted, onSuccess, unsupportedCountryMessage, }) {
     const checkoutState = useCheckout();
     const appliedServerUpdateKeyRef = useRef('');
+    const [appliedServerUpdateKey, setAppliedServerUpdateKey] = useState('');
     const serverUpdatePromiseRef = useRef(null);
     const [walletAvailable, setWalletAvailable] = useState(initialAvailable !== null && initialAvailable !== void 0 ? initialAvailable : null);
     const normalizedServerUpdateKey = (serverUpdateKey === null || serverUpdateKey === void 0 ? void 0 : serverUpdateKey.trim()) || '';
+    const serverUpdatePending = Boolean(normalizedServerUpdateKey && appliedServerUpdateKey !== normalizedServerUpdateKey);
     const effectiveWalletAvailable = initialAvailable === true && walletAvailable !== false
         ? true
         : walletAvailable;
@@ -45,6 +47,7 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
         return Object.assign(Object.assign(Object.assign({}, baseOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_a = baseOptions.buttonTheme) !== null && _a !== void 0 ? _a : {})), ((_b = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _b !== void 0 ? _b : {})), buttonType: Object.assign(Object.assign({}, ((_c = baseOptions.buttonType) !== null && _c !== void 0 ? _c : {})), ((_d = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _d !== void 0 ? _d : {})), layout: Object.assign(Object.assign({}, ((_e = baseOptions.layout) !== null && _e !== void 0 ? _e : {})), ((_f = options === null || options === void 0 ? void 0 : options.layout) !== null && _f !== void 0 ? _f : {})), paymentMethods: Object.assign(Object.assign({}, ((_g = baseOptions.paymentMethods) !== null && _g !== void 0 ? _g : {})), ((_h = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _h !== void 0 ? _h : {})), paymentMethodOrder: (_j = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _j !== void 0 ? _j : baseOptions.paymentMethodOrder });
     }, [baseOptions, options]);
     const ensureServerUpdated = useCallback(async (paymentMethod) => {
+        var _a;
         if (!normalizedServerUpdateKey) {
             return true;
         }
@@ -55,7 +58,14 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             return false;
         }
         if (serverUpdatePromiseRef.current) {
-            return serverUpdatePromiseRef.current;
+            const pendingUpdate = serverUpdatePromiseRef.current;
+            const pendingResult = await pendingUpdate.promise;
+            if (pendingUpdate.key === normalizedServerUpdateKey) {
+                return pendingResult;
+            }
+            if (appliedServerUpdateKeyRef.current === normalizedServerUpdateKey) {
+                return true;
+            }
         }
         const updatePromise = (async () => {
             let updateCallbackFailed = false;
@@ -85,20 +95,27 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
                 return false;
             }
             appliedServerUpdateKeyRef.current = normalizedServerUpdateKey;
+            setAppliedServerUpdateKey(normalizedServerUpdateKey);
             onError === null || onError === void 0 ? void 0 : onError(null);
             return true;
         })();
-        serverUpdatePromiseRef.current = updatePromise;
+        serverUpdatePromiseRef.current = {
+            key: normalizedServerUpdateKey,
+            promise: updatePromise,
+        };
         try {
             return await updatePromise;
         }
         finally {
-            serverUpdatePromiseRef.current = null;
+            if (((_a = serverUpdatePromiseRef.current) === null || _a === void 0 ? void 0 : _a.promise) === updatePromise) {
+                serverUpdatePromiseRef.current = null;
+            }
         }
     }, [checkoutAnalytics, checkoutSessionId, checkoutState, normalizedServerUpdateKey, onError, onServerUpdate]);
     useEffect(() => {
         if (!normalizedServerUpdateKey) {
             appliedServerUpdateKeyRef.current = '';
+            setAppliedServerUpdateKey('');
             return;
         }
         if (checkoutState.type !== 'success' || !onServerUpdate) {
@@ -215,8 +232,13 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
             window.location.assign(returnUrl);
         }
     };
-    const handleClick = (event) => {
+    const handleClick = async (event) => {
         queueCheckoutStarted(event.expressPaymentType);
+        const updated = await ensureServerUpdated(event.expressPaymentType);
+        if (!updated) {
+            event.reject();
+            return;
+        }
         event.resolve();
     };
     const handleCancel = () => {
@@ -238,13 +260,14 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, checkoutAna
         }
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: [
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-busy": serverUpdatePending || undefined, "aria-disabled": serverUpdatePending || undefined, className: [
                     'stripe-express-checkout-button',
                     className !== null && className !== void 0 ? className : '',
                     effectiveWalletAvailable === false ? 'is-hidden' : '',
+                    serverUpdatePending ? 'is-server-update-pending' : '',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: _jsx(ExpressCheckoutElementWithCancel, { options: resolvedOptions, onCancel: handleCancel, onClick: handleClick, onConfirm: (event) => void handleConfirm(event), onLoadError: ({ error }) => {
+                    .join(' '), inert: serverUpdatePending, children: _jsx(ExpressCheckoutElementWithCancel, { options: resolvedOptions, onCancel: handleCancel, onClick: handleClick, onConfirm: (event) => void handleConfirm(event), onLoadError: ({ error }) => {
                         setWalletAvailable(false);
                         onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(false);
                         reportFailure(error.message || 'Unable to load wallet checkout.', 'wallet_load');
@@ -267,4 +290,8 @@ const stripeExpressCheckoutButtonStyles = `
 .stripe-express-checkout-button.is-hidden {
   display: none;
 }
+
+.stripe-express-checkout-button.is-server-update-pending {
+  pointer-events: none;
+}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.11.11",
+  "version": "0.11.13",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",