remove proptypes from payment-method-card and payment-method-error-bo… (

#9817)

* proptype removal

* updated payment-method-error-boundary.tsx

---------

Co-authored-by: Niels Lange <[email protected]>

assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.js → assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-card.tsx

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { useEditorContext } from '@woocommerce/base-context';
 import { CheckboxControl } from '@woocommerce/blocks-checkout';
-import PropTypes from 'prop-types';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY, PAYMENT_STORE_KEY } from '@woocommerce/block-data';
 
@@ -23,7 +22,14 @@ import PaymentMethodErrorBoundary from './payment-method-error-boundary';
  *
  * @return {*} The rendered component.
  */
-const PaymentMethodCard = ( { children, showSaveOption } ) => {
+interface PaymentMethodCardProps {
+	showSaveOption: boolean;
+	children: React.ReactNode;
+}
+const PaymentMethodCard = ( {
+	children,
+	showSaveOption,
+}: PaymentMethodCardProps ) => {
 	const { isEditor } = useEditorContext();
 	const { shouldSavePaymentMethod, customerId } = useSelect( ( select ) => {
 		const paymentMethodStore = select( PAYMENT_STORE_KEY );
@@ -58,9 +64,4 @@ const PaymentMethodCard = ( { children, showSaveOption } ) => {
 	);
 };
 
-PaymentMethodCard.propTypes = {
-	showSaveOption: PropTypes.bool,
-	children: PropTypes.node,
-};
-
 export default PaymentMethodCard;

assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-error-boundary.tsx

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
+import { StoreNoticesContainer } from '@woocommerce/blocks-checkout';
+import { noticeContexts } from '@woocommerce/base-context';
+import { NoticeType } from '@woocommerce/types';
+interface PaymentMethodErrorBoundaryProps {
+	isEditor: boolean;
+	children: React.ReactNode;
+}
+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'
+				);
+			}
+		}
+		const notices: NoticeType[] = [
+			{
+				id: '0',
+				content: errorText,
+				isDismissible: false,
+				status: 'error',
+			},
+		];
+		return (
+			<StoreNoticesContainer
+				additionalNotices={ notices }
+				context={ noticeContexts.PAYMENTS }
+			/>
+		);
+	}
+	return <>{ children }</>;
+};
+export default PaymentMethodErrorBoundary;