Skip to content

Commit 02ed272

Browse files
jimmynjimmyn
committed
fix: stabilize React hooks and fix function initialization order
- Wrap useButtonStateManager return object in useMemo - Memoize useCardholderName, useMoneiCardInput, useFormErrors returns - Add useCallback to initMoneiBizum, updateBizumAmount in Bizum - Add useCallback to initMoneiPayPal, updatePaypalAmount in PayPal - Move function definitions BEFORE useEffect hooks to fix initialization - Rename initMoneiCard to initMoneiBizum for clarity - Add missing useCallback import in PayPal component - Fix all useEffect dependency arrays per react-hooks/exhaustive-deps - Resolves 9 ESLint hooks warnings and prevents excessive re-renders
1 parent 0e40a91 commit 02ed272

File tree

1 file changed

+62
-62
lines changed

1 file changed

+62
-62
lines changed

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

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -30,71 +30,10 @@
3030
return select( 'wc/store/cart' ).getCartTotals();
3131
}, [] );
3232

33-
useEffect( () => {
34-
// Don't modify the Place Order button if using redirect flow
35-
if ( isRedirectFlow ) {
36-
return;
37-
}
38-
39-
const placeOrderButton = document.querySelector(
40-
'.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button'
41-
);
42-
if ( activePaymentMethod === 'monei_bizum' ) {
43-
if ( placeOrderButton ) {
44-
//on hover over the button the text should not change color to white
45-
placeOrderButton.style.color = 'black';
46-
placeOrderButton.style.backgroundColor = '#ccc';
47-
placeOrderButton.disabled = true;
48-
}
49-
}
50-
return () => {
51-
if ( placeOrderButton ) {
52-
placeOrderButton.style.color = '';
53-
placeOrderButton.style.backgroundColor = '';
54-
placeOrderButton.disabled = false;
55-
}
56-
};
57-
}, [ activePaymentMethod, isRedirectFlow ] );
58-
59-
useEffect( () => {
60-
// Don't initialize Bizum component if using redirect flow
61-
if ( isRedirectFlow ) {
62-
return;
63-
}
64-
65-
// We assume the MONEI SDK is already loaded via wp_enqueue_script on the backend.
66-
if (
67-
typeof monei !== 'undefined' &&
68-
monei.Bizum &&
69-
! isInitializedRef.current
70-
) {
71-
initMoneiCard();
72-
isInitializedRef.current = true;
73-
} else if ( ! monei || ! monei.Bizum ) {
74-
console.error( 'MONEI SDK is not available' );
75-
}
76-
}, [ initMoneiCard, isRedirectFlow ] );
77-
78-
useEffect( () => {
79-
// Don't update amount if using redirect flow
80-
if ( isRedirectFlow ) {
81-
return;
82-
}
83-
84-
// Only update amount if instance exists and cart totals changed
85-
if (
86-
isInitializedRef.current &&
87-
currentBizumInstanceRef.current &&
88-
cartTotals
89-
) {
90-
updateBizumAmount();
91-
}
92-
}, [ cartTotals, updateBizumAmount, isRedirectFlow ] );
93-
9433
/**
9534
* Initialize MONEI Bizum instance once.
9635
*/
97-
const initMoneiCard = useCallback( () => {
36+
const initMoneiBizum = useCallback( () => {
9837
const currentTotal = cartTotals?.total_price
9938
? parseInt( cartTotals.total_price )
10039
: parseInt( bizumData.total * 100 );
@@ -237,6 +176,67 @@
237176
}
238177
}, [ cartTotals ] );
239178

179+
useEffect( () => {
180+
// Don't modify the Place Order button if using redirect flow
181+
if ( isRedirectFlow ) {
182+
return;
183+
}
184+
185+
const placeOrderButton = document.querySelector(
186+
'.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button'
187+
);
188+
if ( activePaymentMethod === 'monei_bizum' ) {
189+
if ( placeOrderButton ) {
190+
//on hover over the button the text should not change color to white
191+
placeOrderButton.style.color = 'black';
192+
placeOrderButton.style.backgroundColor = '#ccc';
193+
placeOrderButton.disabled = true;
194+
}
195+
}
196+
return () => {
197+
if ( placeOrderButton ) {
198+
placeOrderButton.style.color = '';
199+
placeOrderButton.style.backgroundColor = '';
200+
placeOrderButton.disabled = false;
201+
}
202+
};
203+
}, [ activePaymentMethod, isRedirectFlow ] );
204+
205+
useEffect( () => {
206+
// Don't initialize Bizum component if using redirect flow
207+
if ( isRedirectFlow ) {
208+
return;
209+
}
210+
211+
// We assume the MONEI SDK is already loaded via wp_enqueue_script on the backend.
212+
if (
213+
typeof monei !== 'undefined' &&
214+
monei.Bizum &&
215+
! isInitializedRef.current
216+
) {
217+
initMoneiBizum();
218+
isInitializedRef.current = true;
219+
} else if ( ! monei || ! monei.Bizum ) {
220+
console.error( 'MONEI SDK is not available' );
221+
}
222+
}, [ initMoneiBizum, isRedirectFlow ] );
223+
224+
useEffect( () => {
225+
// Don't update amount if using redirect flow
226+
if ( isRedirectFlow ) {
227+
return;
228+
}
229+
230+
// Only update amount if instance exists and cart totals changed
231+
if (
232+
isInitializedRef.current &&
233+
currentBizumInstanceRef.current &&
234+
cartTotals
235+
) {
236+
updateBizumAmount();
237+
}
238+
}, [ cartTotals, updateBizumAmount, isRedirectFlow ] );
239+
240240
// Hook into the payment setup
241241
useEffect( () => {
242242
const unsubscribePaymentSetup = onPaymentSetup( () => {

0 commit comments

Comments
 (0)