Consolidate implementation for payment method pills

changelog.txt

@@ -33,6 +33,7 @@
 * Dev - Make 'Add to cart' more robust in e2e tests
 * Dev - Ensure e2e tests enable or disable Optimized Checkout during setup
 * Fix - Fix some PHP warnings
+* Dev - Consolidate component used for unavailable payment methods
 
 = 9.8.1 - 2025-08-15 =
 * Fix - Remove connection type requirement from PMC sync migration attempt

client/components/payment-method-capability-status-pill/index.js

@@ -1,49 +1,10 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import interpolateComponents from 'interpolate-components';
-import { Icon, info } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import Pill from 'wcstripe/components/pill';
-import Popover from 'wcstripe/components/popover';
 import { useGetCapabilities } from 'wcstripe/data/account';
-
-const StyledPill = styled( Pill )`
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	padding: 4px 8px;
-	border: 1px solid #fcf9e8;
-	border-radius: 2px;
-	background-color: #fcf9e8;
-	color: #674600;
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 16px;
-	width: fit-content;
-`;
-
-const StyledLink = styled.a`
-	&:focus,
-	&:visited {
-		box-shadow: none;
-	}
-`;
-
-const IconWrapper = styled.span`
-	height: 16px;
-	cursor: pointer;
-`;
-
-const AlertIcon = styled( Icon )`
-	fill: #674600;
-`;
-
-const IconComponent = ( { children, ...props } ) => (
-	<IconWrapper { ...props }>
-		<AlertIcon icon={ info } size="16" />
-		{ children }
-	</IconWrapper>
-);
+import PaymentMethodUnavailablePill, {
+	PaymentMethodPopoverLink,
+} from 'wcstripe/components/payment-method-unavailable-pill';
 
 const PaymentMethodCapabilityStatusPill = ( { id, label } ) => {
 	const capabilities = useGetCapabilities();
@@ -55,72 +16,53 @@ const PaymentMethodCapabilityStatusPill = ( { id, label } ) => {
 	return (
 		<>
 			{ capabilityStatus === 'pending' && (
-				<StyledPill>
-					{ __( 'Pending approval', 'woocommerce-gateway-stripe' ) }
-
-					<Popover
-						BaseComponent={ IconComponent }
-						content={ interpolateComponents( {
-							mixedString: sprintf(
-								/* translators: %s: a payment method name. */
-								__(
-									'%s is {{stripeDashboardLink}}pending approval{{/stripeDashboardLink}}. Once approved, you will be able to use it.',
-									'woocommerce-gateway-stripe'
-								),
-								label
+				<PaymentMethodUnavailablePill
+					title={ __(
+						'Pending approval',
+						'woocommerce-gateway-stripe'
+					) }
+				>
+					{ interpolateComponents( {
+						mixedString: sprintf(
+							/* translators: %s: a payment method name. */
+							__(
+								'%s is {{stripeDashboardLink}}pending approval{{/stripeDashboardLink}}. Once approved, you will be able to use it.',
+								'woocommerce-gateway-stripe'
+							),
+							label
+						),
+						components: {
+							stripeDashboardLink: (
+								<PaymentMethodPopoverLink href="https://dashboard.stripe.com/settings/payment_methods" />
 							),
-							components: {
-								stripeDashboardLink: (
-									<StyledLink
-										href="https://dashboard.stripe.com/settings/payment_methods"
-										target="_blank"
-										rel="noreferrer"
-										onClick={ ( ev ) => {
-											// Stop propagation is necessary so it doesn't trigger the tooltip click event.
-											ev.stopPropagation();
-										} }
-									/>
-								),
-							},
-						} ) }
-					/>
-				</StyledPill>
+						},
+					} ) }
+				</PaymentMethodUnavailablePill>
 			) }
 
 			{ capabilityStatus === 'inactive' && (
-				<StyledPill>
-					{ __(
+				<PaymentMethodUnavailablePill
+					title={ __(
 						'Requires activation',
 						'woocommerce-gateway-stripe'
 					) }
-
-					<Popover
-						BaseComponent={ IconComponent }
-						content={ interpolateComponents( {
-							mixedString: sprintf(
-								/* translators: %s: a payment method name. */
-								__(
-									'%s requires activation in your {{stripeDashboardLink}}Stripe dashboard{{/stripeDashboardLink}}. Follow the instructions there and check back soon.',
-									'woocommerce-gateway-stripe'
-								),
-								label
+				>
+					{ interpolateComponents( {
+						mixedString: sprintf(
+							/* translators: %s: a payment method name. */
+							__(
+								'%s requires activation in your {{stripeDashboardLink}}Stripe dashboard{{/stripeDashboardLink}}. Follow the instructions there and check back soon.',
+								'woocommerce-gateway-stripe'
+							),
+							label
+						),
+						components: {
+							stripeDashboardLink: (
+								<PaymentMethodPopoverLink href="https://dashboard.stripe.com/settings/payment_methods" />
 							),
-							components: {
-								stripeDashboardLink: (
-									<StyledLink
-										href="https://dashboard.stripe.com/settings/payment_methods"
-										target="_blank"
-										rel="noreferrer"
-										onClick={ ( ev ) => {
-											// Stop propagation is necessary so it doesn't trigger the tooltip click event.
-											ev.stopPropagation();
-										} }
-									/>
-								),
-							},
-						} ) }
-					/>
-				</StyledPill>
+						},
+					} ) }
+				</PaymentMethodUnavailablePill>
 			) }
 		</>
 	);

client/components/payment-method-deprecation-pill/index.js

@@ -1,78 +1,29 @@
 import React from 'react';
-import styled from '@emotion/styled';
-import { Icon, info } from '@wordpress/icons';
 import interpolateComponents from 'interpolate-components';
 import { __ } from '@wordpress/i18n';
-import Pill from 'wcstripe/components/pill';
-import Popover from 'wcstripe/components/popover';
-
-const StyledPill = styled( Pill )`
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	padding: 4px 8px;
-	border: 1px solid #fcf9e8;
-	border-radius: 2px;
-	background-color: #fcf9e8;
-	color: #674600;
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 16px;
-	width: fit-content;
-`;
-
-const StyledLink = styled.a`
-	&:focus,
-	&:visited {
-		box-shadow: none;
-	}
-`;
-
-const IconWrapper = styled.span`
-	height: 16px;
-	cursor: pointer;
-`;
-
-const AlertIcon = styled( Icon )`
-	fill: #674600;
-`;
-
-const IconComponent = ( { children, ...props } ) => (
-	<IconWrapper { ...props }>
-		<AlertIcon icon={ info } size="16" />
-		{ children }
-	</IconWrapper>
-);
+import PaymentMethodUnavailablePill, {
+	PaymentMethodPopoverLink,
+} from 'wcstripe/components/payment-method-unavailable-pill';
 
 const PaymentMethodDeprecationPill = () => {
 	return (
-		<StyledPill>
-			{ __( 'Deprecated', 'woocommerce-gateway-stripe' ) }
-			<Popover
-				BaseComponent={ IconComponent }
-				content={ interpolateComponents( {
-					mixedString:
-						/* translators: $1: a payment method name. %2: Currency(ies). */
-						__(
-							'This payment method is deprecated on the {{currencySettingsLink}}legacy checkout as of Oct 29th, 2024{{/currencySettingsLink}}.',
-							'woocommerce-gateway-stripe'
-						),
-					components: {
-						currencySettingsLink: (
-							<StyledLink
-								href="https://woocommerce.com/document/stripe/admin-experience/legacy-checkout-experience/"
-								target="_blank"
-								rel="noreferrer"
-								onClick={ ( ev ) => {
-									// Stop propagation is necessary so it doesn't trigger the tooltip click event.
-									ev.stopPropagation();
-								} }
-							/>
-						),
-					},
-				} ) }
-			/>
-		</StyledPill>
+		<PaymentMethodUnavailablePill
+			title={ __( 'Deprecated', 'woocommerce-gateway-stripe' ) }
+		>
+			{ interpolateComponents( {
+				mixedString:
+					/* translators: $1: a payment method name. %2: Currency(ies). */
+					__(
+						'This payment method is deprecated on the {{currencySettingsLink}}legacy checkout as of Oct 29th, 2024{{/currencySettingsLink}}.',
+						'woocommerce-gateway-stripe'
+					),
+				components: {
+					currencySettingsLink: (
+						<PaymentMethodPopoverLink href="https://woocommerce.com/document/stripe/admin-experience/legacy-checkout-experience/" />
+					),
+				},
+			} ) }
+		</PaymentMethodUnavailablePill>
 	);
 };
 

client/components/payment-method-missing-currency-pill/index.js

@@ -1,51 +1,13 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import interpolateComponents from 'interpolate-components';
-import { Icon, info } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import Popover from 'wcstripe/components/popover';
 import { usePaymentMethodCurrencies } from 'utils/use-payment-method-currencies';
 import usePaymentMethodUnavailableReason from 'utils/use-payment-method-unavailable-reason';
+import PaymentMethodUnavailablePill, {
+	PaymentMethodPopoverLink,
+} from 'wcstripe/components/payment-method-unavailable-pill';
 import { PAYMENT_METHOD_UNAVAILABLE_REASONS } from 'wcstripe/stripe-utils/constants';
 
-const StyledPill = styled.span`
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	padding: 4px 8px;
-	border: 1px solid #fcf9e8;
-	border-radius: 2px;
-	background-color: #fcf9e8;
-	color: #674600;
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 16px;
-	width: fit-content;
-`;
-
-const StyledLink = styled.a`
-	&:focus,
-	&:visited {
-		box-shadow: none;
-	}
-`;
-
-const IconWrapper = styled.span`
-	height: 16px;
-	cursor: pointer;
-`;
-
-const AlertIcon = styled( Icon )`
-	fill: #674600;
-`;
-
-const IconComponent = ( { children, ...props } ) => (
-	<IconWrapper { ...props }>
-		<AlertIcon icon={ info } size="16" />
-		{ children }
-	</IconWrapper>
-);
-
 const PaymentMethodMissingCurrencyPill = ( { id, label } ) => {
 	const paymentMethodCurrencies = usePaymentMethodCurrencies( id );
 	const unavailableReason = usePaymentMethodUnavailableReason( id );
@@ -58,36 +20,26 @@ const PaymentMethodMissingCurrencyPill = ( { id, label } ) => {
 	}
 
 	return (
-		<StyledPill>
-			{ __( 'Requires currency', 'woocommerce-gateway-stripe' ) }
-			<Popover
-				BaseComponent={ IconComponent }
-				content={ interpolateComponents( {
-					mixedString: sprintf(
-						/* translators: $1: a payment method name. %2: Currency(ies). */
-						__(
-							'%1$s requires store currency to be set to %2$s. {{currencySettingsLink}}Set currency{{/currencySettingsLink}}',
-							'woocommerce-gateway-stripe'
-						),
-						label,
-						paymentMethodCurrencies.join( ', ' )
+		<PaymentMethodUnavailablePill
+			title={ __( 'Requires currency', 'woocommerce-gateway-stripe' ) }
+		>
+			{ interpolateComponents( {
+				mixedString: sprintf(
+					/* translators: $1: a payment method name. %2: Currency(ies). */
+					__(
+						'%1$s requires store currency to be set to %2$s. {{currencySettingsLink}}Set currency{{/currencySettingsLink}}',
+						'woocommerce-gateway-stripe'
+					),
+					label,
+					paymentMethodCurrencies.join( ', ' )
+				),
+				components: {
+					currencySettingsLink: (
+						<PaymentMethodPopoverLink href="/wp-admin/admin.php?page=wc-settings&tab=general" />
 					),
-					components: {
-						currencySettingsLink: (
-							<StyledLink
-								href="/wp-admin/admin.php?page=wc-settings&tab=general"
-								target="_blank"
-								rel="noreferrer"
-								onClick={ ( ev ) => {
-									// Stop propagation is necessary so it doesn't trigger the tooltip click event.
-									ev.stopPropagation();
-								} }
-							/>
-						),
-					},
-				} ) }
-			/>
-		</StyledPill>
+				},
+			} ) }
+		</PaymentMethodUnavailablePill>
 	);
 };