Use memoization for payment method checks

client/components/payment-method-unavailable-tax-config-pill/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { __, sprintf } from '@wordpress/i18n';
+import PaymentMethodUnavailablePill from 'wcstripe/components/payment-method-unavailable-pill';
+import usePaymentMethodUnavailableReason from 'utils/use-payment-method-unavailable-reason';
+import { PAYMENT_METHOD_UNAVAILABLE_REASONS } from 'wcstripe/stripe-utils/constants';
+
+const PaymentMethodUnavailableTaxConfigPill = ( { id, label } ) => {
+	const unavailableReason = usePaymentMethodUnavailableReason( id );
+
+	if (
+		unavailableReason !==
+		PAYMENT_METHOD_UNAVAILABLE_REASONS.UNSUPPORTED_TAX_CONFIGURATION
+	) {
+		return null;
+	}
+
+	return (
+		<PaymentMethodUnavailablePill
+			title={ __(
+				'Unsupported tax configuration',
+				'woocommerce-gateway-stripe'
+			) }
+		>
+			{ sprintf(
+				/* translators: $1: a payment method name */
+				__(
+					"%1$s is unavailable due to your store's tax configuration.",
+					'woocommerce-gateway-stripe'
+				),
+				label
+			) }
+		</PaymentMethodUnavailablePill>
+	);
+};
+
+export default PaymentMethodUnavailableTaxConfigPill;

client/utils/use-payment-method-currencies.js

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import UpeToggleContext from '../settings/upe-toggle/context';
 import PaymentMethodsMap from '../payment-methods-map';
 import { useContext } from '@wordpress/element';
@@ -273,7 +274,9 @@ export const getPaymentMethodCurrencies = ( paymentMethodId, isUpeEnabled ) => {
 export const usePaymentMethodCurrencies = ( paymentMethodId ) => {
 	const { isUpeEnabled } = useContext( UpeToggleContext );
 
-	return getPaymentMethodCurrencies( paymentMethodId, isUpeEnabled );
+	return useMemo( () => {
+		return getPaymentMethodCurrencies( paymentMethodId, isUpeEnabled );
+	}, [ paymentMethodId, isUpeEnabled ] );
 };
 
 export default usePaymentMethodCurrencies;

client/utils/use-payment-method-unavailable-reason.js

@@ -1,5 +1,5 @@
 import { getSetting } from '@woocommerce/settings';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
 import getPaymentMethodUnavailableReason from 'utils/get-payment-method-unavailable-reason';
 
@@ -14,11 +14,13 @@ const usePaymentMethodUnavailableReason = ( paymentMethodId ) => {
 
 	const storeCurrencyCode = getSetting( 'currency' )?.code;
 
-	return getPaymentMethodUnavailableReason( {
-		paymentMethodId,
-		isUpeEnabled,
-		storeCurrencyCode,
-	} );
+	return useMemo( () => {
+		return getPaymentMethodUnavailableReason( {
+			paymentMethodId,
+			isUpeEnabled,
+			storeCurrencyCode,
+		} );
+	}, [ paymentMethodId, isUpeEnabled, storeCurrencyCode ] );
 };
 
 export default usePaymentMethodUnavailableReason;