Skip to content

Commit c6d7deb

Browse files
jimmynjimmyn
committed
fix: use custom overlay class to prevent WooCommerce spinner
Replace wc-block-components-spinner class with custom monei-payment-overlay to avoid WooCommerce built-in spinner. Overlay displays as white semi-transparent screen (opacity 0.5) during confirmPayment() without spinner animation. Updated components: - Credit Card (monei-cc-component.js) - Bizum (monei-block-checkout-bizum.js) - PayPal (monei-block-checkout-paypal.js) - Apple/Google Pay (monei-apple-google-component.js)
1 parent 4fb3443 commit c6d7deb

File tree

5 files changed

+61
-5
lines changed

5 files changed

+61
-5
lines changed

‎assets/css/monei-blocks-checkout.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,21 @@
116116
margin-top: 0.75em;
117117
}
118118

119+
.monei-payment-overlay {
120+
position: fixed;
121+
top: 0;
122+
left: 0;
123+
width: 100%;
124+
height: 100%;
125+
background: rgb(255, 255, 255);
126+
opacity: 0.5;
127+
z-index: 10;
128+
border: none;
129+
margin: 0;
130+
padding: 0;
131+
cursor: default;
132+
}
133+
119134
/* Loading State */
120135
.monei-loading {
121136
text-align: center;

‎assets/js/components/monei-apple-google-component.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const createAppleGoogleLabel = ( moneiData ) => {
3636
* @return {*} JSX Element
3737
*/
3838
export const MoneiAppleGoogleContent = ( props ) => {
39-
const { useEffect, useRef } = wp.element;
39+
const { useEffect, useRef, useState, createPortal } = wp.element;
4040
const { onPaymentSetup, onCheckoutSuccess } = props.eventRegistration;
4141
const { activePaymentMethod } = props;
4242
const moneiData =
@@ -45,6 +45,7 @@ export const MoneiAppleGoogleContent = ( props ) => {
4545
wc.wcSettings.getSetting( 'monei_apple_google_data' );
4646

4747
const paymentRequestRef = useRef( null );
48+
const [ isConfirming, setIsConfirming ] = useState( false );
4849
const isActive =
4950
activePaymentMethod ===
5051
( props.paymentMethodId || 'monei_apple_google' );
@@ -139,6 +140,8 @@ export const MoneiAppleGoogleContent = ( props ) => {
139140
};
140141
}
141142

143+
setIsConfirming( true );
144+
142145
try {
143146
// Component mode: confirm payment with token
144147
const paymentId = paymentDetails.paymentId;
@@ -183,6 +186,7 @@ export const MoneiAppleGoogleContent = ( props ) => {
183186
'Error during payment confirmation:',
184187
error
185188
);
189+
setIsConfirming( false );
186190
return {
187191
type: props.emitResponse.responseTypes.ERROR,
188192
message:
@@ -199,6 +203,11 @@ export const MoneiAppleGoogleContent = ( props ) => {
199203

200204
return (
201205
<fieldset className="monei-fieldset monei-payment-request-fieldset">
206+
{ isConfirming &&
207+
createPortal(
208+
<div className="monei-payment-overlay" />,
209+
document.body
210+
) }
202211
<div
203212
id="payment-request-container"
204213
className="monei-payment-request-container"

‎assets/js/components/monei-cc-component.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {
44
useFormErrors,
55
} from '../helpers/monei-card-input-hooks';
66

7-
const { useEffect, useState, useRef, useCallback, useMemo } = wp.element;
7+
const { useEffect, useState, useRef, useCallback, useMemo, createPortal } =
8+
wp.element;
89

910
/**
1011
* MONEI Credit Card Content Component
@@ -27,6 +28,7 @@ export const MoneiCCContent = ( props ) => {
2728
// State management
2829
const tokenRef = useRef( null );
2930
const [ isProcessing, setIsProcessing ] = useState( false );
31+
const [ isConfirming, setIsConfirming ] = useState( false );
3032

3133
// Form error management
3234
const formErrors = useFormErrors();
@@ -236,6 +238,8 @@ export const MoneiCCContent = ( props ) => {
236238
};
237239
}
238240

241+
setIsConfirming( true );
242+
239243
try {
240244
const result = await monei.confirmPayment( {
241245
paymentId: paymentDetails.paymentId,
@@ -272,6 +276,7 @@ export const MoneiCCContent = ( props ) => {
272276
'Error during payment confirmation:',
273277
error
274278
);
279+
setIsConfirming( false );
275280
return {
276281
type: responseTypes.ERROR,
277282
message:
@@ -288,6 +293,11 @@ export const MoneiCCContent = ( props ) => {
288293

289294
return (
290295
<fieldset className="monei-fieldset monei-card-fieldset wc-block-components-form">
296+
{ isConfirming &&
297+
createPortal(
298+
<div className="monei-payment-overlay" />,
299+
document.body
300+
) }
291301
{ moneiData?.description && <p>{ moneiData.description }</p> }
292302
{ /* Cardholder Name Input */ }
293303
<div className="monei-input-container wc-block-components-text-input">

‎assets/js/monei-block-checkout-bizum.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
( function () {
22
const { registerPaymentMethod } = wc.wcBlocksRegistry;
33
const { __ } = wp.i18n;
4-
const { useEffect, useRef } = wp.element;
4+
const { useEffect, useRef, useState, createPortal } = wp.element;
55
const { useSelect } = wp.data;
66
const bizumData = wc.wcSettings.getSetting( 'monei_bizum_data' );
77

@@ -13,6 +13,9 @@
1313
// Check if redirect flow is enabled
1414
const isRedirectFlow = bizumData.redirectFlow === true;
1515

16+
// State for confirmation overlay
17+
const [ isConfirming, setIsConfirming ] = useState( false );
18+
1619
// Use useRef to persist values across re-renders
1720
const requestTokenRef = useRef( null );
1821
const currentBizumInstanceRef = useRef( null );
@@ -255,6 +258,8 @@
255258
};
256259
}
257260

261+
setIsConfirming( true );
262+
258263
try {
259264
// Component mode: confirm payment with token
260265
const paymentId = paymentDetails.paymentId;
@@ -298,6 +303,7 @@
298303
'Error during payment confirmation:',
299304
error
300305
);
306+
setIsConfirming( false );
301307
return {
302308
type: responseTypes.ERROR,
303309
message:
@@ -341,6 +347,11 @@
341347

342348
return (
343349
<fieldset className="monei-fieldset monei-payment-request-fieldset">
350+
{ isConfirming &&
351+
createPortal(
352+
<div className="monei-payment-overlay" />,
353+
document.body
354+
) }
344355
<div
345356
id="bizum-container"
346357
className="monei-payment-request-container"

‎assets/js/monei-block-checkout-paypal.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
( function () {
22
const { registerPaymentMethod } = wc.wcBlocksRegistry;
33
const { __ } = wp.i18n;
4-
const { useEffect } = wp.element;
4+
const { useEffect, useState, createPortal } = wp.element;
55
const paypalData = wc.wcSettings.getSetting( 'monei_paypal_data' );
66

77
const MoneiPayPalContent = ( props ) => {
@@ -16,6 +16,9 @@
1616
// Check if redirect flow is enabled
1717
const isRedirectFlow = paypalData.redirectFlow === true;
1818

19+
// State for confirmation overlay
20+
const [ isConfirming, setIsConfirming ] = useState( false );
21+
1922
useEffect( () => {
2023
// Don't modify the Place Order button if using redirect flow
2124
if ( isRedirectFlow ) {
@@ -153,7 +156,9 @@
153156
};
154157
}
155158

156-
try {
159+
setIsConfirming( true );
160+
161+
try{
157162
// Component mode: confirm payment with token
158163
const paymentId = paymentDetails.paymentId;
159164
const tokenValue = paymentDetails.token;
@@ -196,6 +201,7 @@
196201
'Error during payment confirmation:',
197202
error
198203
);
204+
setIsConfirming( false );
199205
return {
200206
type: responseTypes.ERROR,
201207
message:
@@ -223,6 +229,11 @@
223229

224230
return (
225231
<fieldset className="monei-fieldset monei-payment-request-fieldset">
232+
{ isConfirming &&
233+
createPortal(
234+
<div className="monei-payment-overlay" />,
235+
document.body
236+
) }
226237
<div
227238
id="paypal-container"
228239
className="monei-payment-request-container"

0 commit comments

Comments
 (0)