Skip to content

Commit a825329

Browse files
jimmynjimmyn
committed
refactor: use React state for error handling in blocks payment methods
Replace DOM manipulation with React state-based error handling in Apple/Google Pay, Bizum, and PayPal components to match credit card implementation. Also fix incorrectly declared static methods in subscription stubs.
1 parent 28d0bf1 commit a825329

File tree

4 files changed

+45
-11
lines changed

4 files changed

+45
-11
lines changed

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const MoneiAppleGoogleContent = ( props ) => {
4646

4747
const paymentRequestRef = useRef( null );
4848
const [ isConfirming, setIsConfirming ] = useState( false );
49+
const [ error, setError ] = useState( '' );
4950
const isActive =
5051
activePaymentMethod ===
5152
( props.paymentMethodId || 'monei_apple_google' );
@@ -86,11 +87,18 @@ export const MoneiAppleGoogleContent = ( props ) => {
8687
style: moneiData.paymentRequestStyle || {},
8788
onSubmit( result ) {
8889
if ( result.token ) {
90+
setError( '' );
8991
buttonManager.enableCheckout( result.token );
9092
}
9193
},
9294
onError( error ) {
93-
console.error( error );
95+
const errorMessage =
96+
error.message ||
97+
`${ error.status || 'Error' } ${
98+
error.statusCode ? `(${ error.statusCode })` : ''
99+
}`;
100+
setError( errorMessage );
101+
console.error( 'Payment Request error:', error );
94102
},
95103
} );
96104

@@ -216,7 +224,7 @@ export const MoneiAppleGoogleContent = ( props ) => {
216224
name="monei_payment_token"
217225
value=""
218226
/>
219-
<div id="monei-card-error" className="monei-error" />
227+
{ error && <div className="monei-error">{ error }</div> }
220228
</fieldset>
221229
);
222230
};

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
// State for confirmation overlay
1717
const [ isConfirming, setIsConfirming ] = useState( false );
18+
const [ error, setError ] = useState( '' );
1819

1920
// Use useRef to persist values across re-renders
2021
const requestTokenRef = useRef( null );
@@ -116,6 +117,7 @@
116117
style: bizumData.bizumStyle || {},
117118
onSubmit( result ) {
118119
if ( result.token ) {
120+
setError( '' );
119121
requestTokenRef.current = result.token;
120122
const placeOrderButton = document.querySelector(
121123
'.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button'
@@ -131,6 +133,12 @@
131133
}
132134
},
133135
onError( error ) {
136+
const errorMessage =
137+
error.message ||
138+
`${ error.status || 'Error' } ${
139+
error.statusCode ? `(${ error.statusCode })` : ''
140+
}`;
141+
setError( errorMessage );
134142
console.error( 'Bizum error:', error );
135143
},
136144
} );
@@ -178,6 +186,7 @@
178186
currency: bizumData.currency,
179187
onSubmit( result ) {
180188
if ( result.token ) {
189+
setError( '' );
181190
requestTokenRef.current = result.token;
182191
const placeOrderButton = document.querySelector(
183192
'.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button'
@@ -195,6 +204,14 @@
195204
}
196205
},
197206
onError( error ) {
207+
const errorMessage =
208+
error.message ||
209+
`${ error.status || 'Error' } ${
210+
error.statusCode
211+
? `(${ error.statusCode })`
212+
: ''
213+
}`;
214+
setError( errorMessage );
198215
console.error( 'Bizum error:', error );
199216
},
200217
} );
@@ -363,7 +380,7 @@
363380
name="monei_payment_token"
364381
value=""
365382
/>
366-
<div id="monei-card-error" className="monei-error" />
383+
{ error && <div className="monei-error">{ error }</div> }
367384
</fieldset>
368385
);
369386
};

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@
1616
// Check if redirect flow is enabled
1717
const isRedirectFlow = paypalData.redirectFlow === true;
1818

19-
// State for confirmation overlay
19+
// State for confirmation overlay and error handling
2020
const [ isConfirming, setIsConfirming ] = useState( false );
21+
const [ error, setError ] = useState( '' );
2122

2223
useEffect( () => {
2324
// Don't modify the Place Order button if using redirect flow
@@ -80,6 +81,7 @@
8081
style: paypalData.paypalStyle || {},
8182
onSubmit( result ) {
8283
if ( result.token ) {
84+
setError( '' ); // Clear any previous errors
8385
requestToken = result.token;
8486
const placeOrderButton = document.querySelector(
8587
'.wc-block-components-checkout-place-order-button'
@@ -95,7 +97,13 @@
9597
}
9698
},
9799
onError( error ) {
98-
console.error( error );
100+
const errorMessage =
101+
error.message ||
102+
`${ error.status || 'Error' } - ${
103+
error.statusMessage || 'Payment failed'
104+
}`;
105+
setError( errorMessage );
106+
console.error( 'PayPal error:', error );
99107
},
100108
} );
101109
paypalInstance.render( paypalContainer );
@@ -239,6 +247,7 @@
239247
>
240248
{ /* PayPal button will be inserted here */ }
241249
</div>
250+
{ error && <div className="monei-error">{ error }</div> }
242251
</fieldset>
243252
);
244253
};

‎tests/stubs/woocommerce-subscriptions-stubs.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,21 +68,21 @@ class WCS_Subscription extends WC_Order {
6868
/**
6969
* @return bool
7070
*/
71-
public static function is_subscription() {
71+
public function is_subscription() {
7272
return true;
7373
}
7474

7575
/**
7676
* @return int
7777
*/
78-
public static function get_interval() {
78+
public function get_interval() {
7979
return 1;
8080
}
8181

8282
/**
8383
* @return string
8484
*/
85-
public static function get_period() {
85+
public function get_period() {
8686
return 'month';
8787
}
8888

@@ -104,21 +104,21 @@ class YWSBS_Subscription {
104104
/**
105105
* @return bool
106106
*/
107-
public static function is_subscription() {
107+
public function is_subscription() {
108108
return true;
109109
}
110110

111111
/**
112112
* @return int
113113
*/
114-
public static function get_interval() {
114+
public function get_interval() {
115115
return 1;
116116
}
117117

118118
/**
119119
* @return string
120120
*/
121-
public static function get_period() {
121+
public function get_period() {
122122
return 'month';
123123
}
124124

0 commit comments

Comments
 (0)