Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Convert PaymentMethodErrorBoundary to class component #11746

Closed
wants to merge 4 commits into from
Closed

Convert PaymentMethodErrorBoundary to class component #11746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d34a0c1
Convert PaymentMethodErrorBoundary to class component
Nov 10, 2023
5757773
Wrap each express payment button inside PaymentMethodErrorBoundary co…
Nov 16, 2023
d7f8424
Deregister express payment method if has an error.
Nov 17, 2023
bf8ac4c
Merge branch 'trunk' into fix/10565-express-payment-error
Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 19 additions & 15 deletions assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,17 +141,23 @@ const ExpressPaymentMethods = () => {
const expressPaymentMethod = isEditor
? paymentMethod.edit
: paymentMethod.content;
const expressPaymentMethodId = paymentMethod.name;
return isValidElement( expressPaymentMethod ) ? (
<li key={ id } id={ `express-payment-method-${ id }` }>
{ cloneElement( expressPaymentMethod, {
...paymentMethodInterface,
onClick: onExpressPaymentClick( id ),
onClose: onExpressPaymentClose,
onError: onExpressPaymentError,
setExpressPaymentError:
deprecatedSetExpressPaymentError,
} ) }
</li>
<PaymentMethodErrorBoundary
expressPaymentMethodId={ expressPaymentMethodId }
isEditor={ isEditor }
>
<li key={ id } id={ `express-payment-method-${ id }` }>
{ cloneElement( expressPaymentMethod, {
...paymentMethodInterface,
onClick: onExpressPaymentClick( id ),
onClose: onExpressPaymentClose,
onError: onExpressPaymentError,
setExpressPaymentError:
deprecatedSetExpressPaymentError,
} ) }
</li>
</PaymentMethodErrorBoundary>
) : null;
} )
) : (
Expand All @@ -164,11 +170,9 @@ const ExpressPaymentMethods = () => {
);

return (
<PaymentMethodErrorBoundary isEditor={ isEditor }>
<ul className="wc-block-components-express-payment__event-buttons">
{ content }
</ul>
</PaymentMethodErrorBoundary>
<ul className="wc-block-components-express-payment__event-buttons">
{ content }
</ul>
);
};

Expand Down
96 changes: 61 additions & 35 deletions assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-error-boundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,77 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { Component } from '@wordpress/element';
import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
import { StoreNoticesContainer } from '@woocommerce/blocks-components';
import { noticeContexts } from '@woocommerce/base-context';
import { NoticeType } from '@woocommerce/types';
import {
DerivedStateReturn,
ReactError,
} from '@woocommerce/base-components/block-error-boundary/types';
import { __experimentalDeRegisterExpressPaymentMethod } from '@woocommerce/blocks-registry';

interface PaymentMethodErrorBoundaryProps {
isEditor: boolean;
children: React.ReactNode;
expressPaymentMethodId: string | undefined;
}
const PaymentMethodErrorBoundary = ( {
isEditor,
children,
}: PaymentMethodErrorBoundaryProps ) => {
const [ errorMessage ] = useState( '' );
const [ hasError ] = useState( false );
if ( hasError ) {
let errorText = __(
'We are experiencing difficulties with this payment method. Please contact us for assistance.',
'woo-gutenberg-products-block'
);
if ( isEditor || CURRENT_USER_IS_ADMIN ) {
if ( errorMessage ) {
errorText = errorMessage;
} else {
errorText = __(
"There was an error with this payment method. Please verify it's configured correctly.",
'woo-gutenberg-products-block'

class PaymentMethodErrorBoundary extends Component< PaymentMethodErrorBoundaryProps > {
state = { errorMessage: '', hasError: false };
expressPaymentMethodId = this.props.expressPaymentMethodId;
static getDerivedStateFromError( error: ReactError ): DerivedStateReturn {
return {
errorMessage: error.message,
hasError: true,
};
}

render() {
const { hasError, errorMessage } = this.state;
const { isEditor } = this.props;

if ( hasError ) {
let errorText = __(
'We are experiencing difficulties with this payment method. Please contact us for assistance.',
'woo-gutenberg-products-block'
);
if ( isEditor || CURRENT_USER_IS_ADMIN ) {
if ( errorMessage ) {
errorText = errorMessage;
} else {
errorText = __(
"There was an error with this payment method. Please verify it's configured correctly.",
'woo-gutenberg-products-block'
);
}
}
const notices: NoticeType[] = [
{
id: '0',
content: errorText,
isDismissible: false,
status: 'error',
},
];

// De-register the express payment method if has an error.
if ( this.expressPaymentMethodId !== undefined ) {
__experimentalDeRegisterExpressPaymentMethod(
this.expressPaymentMethodId
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Such calls shouldn't be done in the render() method, but in effects, i.e., the lifecycle methods like componentDidMount and componentDidUpdate.

Also, is it a good idea to unregister the method? Maybe the PaymentMethodErrorBoundary should do just one job, reporting the error, and nothing else.

);
}

return (
<StoreNoticesContainer
additionalNotices={ notices }
context={ noticeContexts.PAYMENTS }
/>
);
}
const notices: NoticeType[] = [
{
id: '0',
content: errorText,
isDismissible: false,
status: 'error',
},
];
return (
<StoreNoticesContainer
additionalNotices={ notices }
context={ noticeContexts.PAYMENTS }
/>
);

return this.props.children;
}
return <>{ children }</>;
};
}
export default PaymentMethodErrorBoundary;
Loading