@funnelsgrove/payments 0.7.15 → 0.7.17

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.js

@@ -86,14 +86,38 @@ const safeDestroyPaymentForm = (instance) => {
 };
 function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, hidden, loadingLabel, onError, onMounted, onSubmit, onVerify, }) {
     const instanceRef = useRef(null);
+    const paymentBoundaryRef = useRef(null);
+    const mountedReportedRef = useRef(false);
+    const onMountedRef = useRef(onMounted);
     const applePayContainerRef = useRef(null);
     const googlePayContainerRef = useRef(null);
+    useEffect(() => {
+        onMountedRef.current = onMounted;
+    }, [onMounted]);
+    useEffect(() => {
+        mountedReportedRef.current = false;
+        const boundary = paymentBoundaryRef.current;
+        if (!boundary) {
+            return;
+        }
+        const reportIframeMounted = () => {
+            if (!mountedReportedRef.current
+                && boundary.querySelector('iframe#solid-payment-form-iframe, iframe[name="solid-payment-form-iframe"]')) {
+                mountedReportedRef.current = true;
+                onMountedRef.current();
+            }
+        };
+        reportIframeMounted();
+        const observer = new MutationObserver(reportIframeMounted);
+        observer.observe(boundary, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [checkout.attemptId]);
     useEffect(() => () => {
         safeDestroyPaymentForm(instanceRef.current);
         instanceRef.current = null;
     }, [checkout.attemptId]);
     const walletButtonType = checkout.display.billingInterval ? 'subscribe' : 'buy';
-    return (_jsxs("div", { className: 'solidgate-checkout-payment', "data-solidgate-attempt-id": checkout.attemptId, hidden: hidden, "aria-hidden": hidden || undefined, children: [_jsxs("div", { className: 'solidgate-checkout-wallets', children: [_jsx("div", { ref: applePayContainerRef, "data-solidgate-wallet": 'apple-pay' }), _jsx("div", { ref: googlePayContainerRef, "data-solidgate-wallet": 'google-pay' })] }), _jsx(Suspense, { fallback: (_jsx("p", { role: 'status', className: 'solidgate-checkout-status-text', children: loadingLabel })), children: _jsx(SolidgatePayment, { merchantData: checkout.initialization.merchantData, width: '100%', formParams: {
+    return (_jsxs("div", { ref: paymentBoundaryRef, className: 'solidgate-checkout-payment', "data-solidgate-attempt-id": checkout.attemptId, hidden: hidden, "aria-hidden": hidden || undefined, children: [_jsxs("div", { className: 'solidgate-checkout-wallets', children: [_jsx("div", { ref: applePayContainerRef, "data-solidgate-wallet": 'apple-pay' }), _jsx("div", { ref: googlePayContainerRef, "data-solidgate-wallet": 'google-pay' })] }), _jsx(Suspense, { fallback: (_jsx("p", { role: 'status', className: 'solidgate-checkout-status-text', children: loadingLabel })), children: _jsx(SolidgatePayment, { merchantData: checkout.initialization.merchantData, width: '100%', formParams: {
                         autoFocus: false,
                         isSolidLogoVisible: true,
                         submitButtonText: cardSubmitLabel,
@@ -133,7 +157,12 @@ function SolidgatePaymentForm({ buttonColor, cardSubmitLabel, checkout, hidden,
                             }
                         }
                         instanceRef.current = instance;
-                    }, onMounted: onMounted, onSubmit: onSubmit, onVerify: onVerify, onSuccess: onVerify, onFail: onVerify, onError: onError }, checkout.attemptId) })] }));
+                    }, onMounted: () => {
+                        if (!mountedReportedRef.current) {
+                            mountedReportedRef.current = true;
+                            onMountedRef.current();
+                        }
+                    }, onSubmit: onSubmit, onVerify: onVerify, onSuccess: onVerify, onFail: onVerify, onError: onError }, checkout.attemptId) })] }));
 }
 export function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, presentation, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }) {
     const copy = useMemo(() => (Object.assign(Object.assign({}, defaultContent), content)), [content]);
@@ -458,7 +487,7 @@ const solidgateCheckoutDialogStyles = `
 
 .solidgate-checkout-dialog.is-preparing {
   position: absolute;
-  visibility: hidden;
+  opacity: 0;
   pointer-events: none;
 }
 

package/package.json

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