diff --git a/changelog.txt b/changelog.txt
index c1e2d977d1..78184048d8 100644
--- a/changelog.txt
+++ b/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
diff --git a/client/components/payment-method-capability-status-pill/index.js b/client/components/payment-method-capability-status-pill/index.js
index 94b3ddd9e5..09ba893627 100644
--- a/client/components/payment-method-capability-status-pill/index.js
+++ b/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 } ) => (
-
-
- { children }
-
-);
+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' && (
-
- { __( '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: (
+
),
- components: {
- stripeDashboardLink: (
- {
- // Stop propagation is necessary so it doesn't trigger the tooltip click event.
- ev.stopPropagation();
- } }
- />
- ),
- },
- } ) }
- />
-
+ },
+ } ) }
+
) }
{ capabilityStatus === 'inactive' && (
-
- { __(
+
+ { 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: (
+
),
- components: {
- stripeDashboardLink: (
- {
- // Stop propagation is necessary so it doesn't trigger the tooltip click event.
- ev.stopPropagation();
- } }
- />
- ),
- },
- } ) }
- />
-
+ },
+ } ) }
+
) }
);
diff --git a/client/components/payment-method-deprecation-pill/index.js b/client/components/payment-method-deprecation-pill/index.js
index 3217c5e5c2..1fbf59495f 100644
--- a/client/components/payment-method-deprecation-pill/index.js
+++ b/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 } ) => (
-
-
- { children }
-
-);
+import PaymentMethodUnavailablePill, {
+ PaymentMethodPopoverLink,
+} from 'wcstripe/components/payment-method-unavailable-pill';
const PaymentMethodDeprecationPill = () => {
return (
-
- { __( 'Deprecated', 'woocommerce-gateway-stripe' ) }
- {
- // Stop propagation is necessary so it doesn't trigger the tooltip click event.
- ev.stopPropagation();
- } }
- />
- ),
- },
- } ) }
- />
-
+
+ { 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: (
+
+ ),
+ },
+ } ) }
+
);
};
diff --git a/client/components/payment-method-missing-currency-pill/index.js b/client/components/payment-method-missing-currency-pill/index.js
index d3f7598640..8ebf3493a6 100644
--- a/client/components/payment-method-missing-currency-pill/index.js
+++ b/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 } ) => (
-
-
- { children }
-
-);
-
const PaymentMethodMissingCurrencyPill = ( { id, label } ) => {
const paymentMethodCurrencies = usePaymentMethodCurrencies( id );
const unavailableReason = usePaymentMethodUnavailableReason( id );
@@ -58,36 +20,26 @@ const PaymentMethodMissingCurrencyPill = ( { id, label } ) => {
}
return (
-
- { __( '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: (
+
),
- components: {
- currencySettingsLink: (
- {
- // Stop propagation is necessary so it doesn't trigger the tooltip click event.
- ev.stopPropagation();
- } }
- />
- ),
- },
- } ) }
- />
-
+ },
+ } ) }
+
);
};
diff --git a/client/components/payment-method-unavailable-due-conflict-pill/index.js b/client/components/payment-method-unavailable-due-conflict-pill/index.js
index 783221d719..e3e9b377bc 100644
--- a/client/components/payment-method-unavailable-due-conflict-pill/index.js
+++ b/client/components/payment-method-unavailable-due-conflict-pill/index.js
@@ -1,50 +1,9 @@
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 PaymentMethodUnavailablePill from 'wcstripe/components/payment-method-unavailable-pill';
import usePaymentMethodUnavailableReason from 'utils/use-payment-method-unavailable-reason';
-import Popover from 'wcstripe/components/popover';
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 } ) => (
-
-
- { children }
-
-);
-
const PaymentMethodUnavailableDueConflictPill = ( { id, label } ) => {
const unavailableReason = usePaymentMethodUnavailableReason( id );
@@ -54,36 +13,20 @@ const PaymentMethodUnavailableDueConflictPill = ( { id, label } ) => {
) {
return null;
}
+
return (
-
- { __( 'Has plugin conflict', 'woocommerce-gateway-stripe' ) }
- {
- // Stop propagation is necessary so it doesn't trigger the tooltip click event.
- ev.stopPropagation();
- } }
- />
- ),
- },
- } ) }
- />
-
+
+ { sprintf(
+ /* translators: $1: a payment method name */
+ __(
+ '%1$s is unavailable due to another official plugin being active.',
+ 'woocommerce-gateway-stripe'
+ ),
+ label
+ ) }
+
);
};
diff --git a/client/components/payment-method-unavailable-pill/index.js b/client/components/payment-method-unavailable-pill/index.js
new file mode 100644
index 0000000000..0a0f1d686b
--- /dev/null
+++ b/client/components/payment-method-unavailable-pill/index.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Icon, info } from '@wordpress/icons';
+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 } ) => (
+
+
+ { children }
+
+);
+
+const PaymentMethodUnavailablePill = ( { title, children } ) => {
+ return (
+
+ { title }
+
+
+ );
+};
+
+const PaymentMethodPopoverLink = ( {
+ children,
+ target = '_blank',
+ rel = 'noreferrer',
+ onClick,
+ ...props
+} ) => {
+ const combinedOnClick = ( ev ) => {
+ ev.stopPropagation();
+ onClick?.( ev );
+ };
+
+ return (
+
+ { children }
+
+ );
+};
+
+export { PaymentMethodPopoverLink };
+
+export default PaymentMethodUnavailablePill;
diff --git a/readme.txt b/readme.txt
index 24e8cfbc4a..cc6a68a26e 100644
--- a/readme.txt
+++ b/readme.txt
@@ -143,5 +143,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
* 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
[See changelog for full details across versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).