From e14074a4f966880cfda64d5393b772409c122ed7 Mon Sep 17 00:00:00 2001 From: Dale du Preez Date: Mon, 18 Aug 2025 09:55:52 +0200 Subject: [PATCH 1/5] Create PaymentMethodUnavailablePill component for reuse --- .../index.js | 140 +++++------------- .../payment-method-deprecation-pill/index.js | 88 +++-------- .../index.js | 94 +++--------- .../index.js | 84 ++--------- .../index.js | 92 +++--------- .../payment-method-unavailable-pill/index.js | 83 +++++++++++ 6 files changed, 202 insertions(+), 379 deletions(-) create mode 100644 client/components/payment-method-unavailable-pill/index.js diff --git a/client/components/payment-method-capability-status-pill/index.js b/client/components/payment-method-capability-status-pill/index.js index 527c990921..ef3b5589cc 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 { __, sprintf } from '@wordpress/i18n'; import React from 'react'; -import styled from '@emotion/styled'; import interpolateComponents from 'interpolate-components'; -import { Icon, info } from '@wordpress/icons'; -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,51 @@ const PaymentMethodCapabilityStatusPill = ( { id, label } ) => { return ( <> { capabilityStatus === 'pending' && ( - - { __( 'Pending approval', 'woocommerce-gateway-stripe' ) } - - ), - components: { - stripeDashboardLink: ( - { - // Stop propagation is necessary so it doesn't trigger the tooltip click event. - ev.stopPropagation(); - } } - /> - ), - }, - } ) } - /> - + }, + } ) } + /> ) } { capabilityStatus === 'inactive' && ( - - { __( + ), - 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 14b17434f9..c0e3a02e16 100644 --- a/client/components/payment-method-deprecation-pill/index.js +++ b/client/components/payment-method-deprecation-pill/index.js @@ -1,78 +1,28 @@ import { __ } from '@wordpress/i18n'; import React from 'react'; -import styled from '@emotion/styled'; -import { Icon, info } from '@wordpress/icons'; import interpolateComponents from 'interpolate-components'; -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(); - } } - /> - ), - }, - } ) } - /> - + + ), + }, + } ) } + /> ); }; diff --git a/client/components/payment-method-missing-currency-pill/index.js b/client/components/payment-method-missing-currency-pill/index.js index 604f43afbb..189e027e59 100644 --- a/client/components/payment-method-missing-currency-pill/index.js +++ b/client/components/payment-method-missing-currency-pill/index.js @@ -1,49 +1,11 @@ import { __, sprintf } from '@wordpress/i18n'; import React from 'react'; -import styled from '@emotion/styled'; import interpolateComponents from 'interpolate-components'; -import { Icon, info } from '@wordpress/icons'; -import Popover from 'wcstripe/components/popover'; import { usePaymentMethodCurrencies } from 'utils/use-payment-method-currencies'; import { PAYMENT_METHOD_CARD } 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 } - -); +import PaymentMethodUnavailablePill, { + PaymentMethodPopoverLink, +} from 'wcstripe/components/payment-method-unavailable-pill'; const PaymentMethodMissingCurrencyPill = ( { id, label } ) => { const paymentMethodCurrencies = usePaymentMethodCurrencies( id ); @@ -54,36 +16,28 @@ const PaymentMethodMissingCurrencyPill = ( { id, label } ) => { ! paymentMethodCurrencies.includes( storeCurrency ) ) { return ( - - { __( 'Requires currency', 'woocommerce-gateway-stripe' ) } - ), - components: { - currencySettingsLink: ( - { - // Stop propagation is necessary so it doesn't trigger the tooltip click event. - ev.stopPropagation(); - } } - /> - ), - }, - } ) } - /> - + }, + } ) } + /> ); } diff --git a/client/components/payment-method-required-for-oc-pill/index.js b/client/components/payment-method-required-for-oc-pill/index.js index 1ba3c6fe66..60ee3d6b72 100644 --- a/client/components/payment-method-required-for-oc-pill/index.js +++ b/client/components/payment-method-required-for-oc-pill/index.js @@ -1,83 +1,25 @@ import { __, sprintf } from '@wordpress/i18n'; import React from 'react'; -import styled from '@emotion/styled'; -import interpolateComponents from 'interpolate-components'; -import { Icon, info } from '@wordpress/icons'; -import Popover from 'wcstripe/components/popover'; import { PAYMENT_METHOD_CARD } from 'wcstripe/stripe-utils/constants'; import { useIsOCEnabled } from 'wcstripe/data'; - -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 } - -); +import PaymentMethodUnavailablePill from 'wcstripe/components/payment-method-unavailable-pill'; const PaymentMethodRequiredForOCPill = ( { id, label } ) => { const [ isOCEnabled ] = useIsOCEnabled(); + if ( id === PAYMENT_METHOD_CARD && isOCEnabled ) { return ( - - { __( 'Required', 'woocommerce-gateway-stripe' ) } - { - // 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 7610b54346..8a42bf1bb2 100644 --- a/client/components/payment-method-unavailable-due-conflict-pill/index.js +++ b/client/components/payment-method-unavailable-due-conflict-pill/index.js @@ -1,52 +1,14 @@ /* global wc_stripe_settings_params */ import { __, sprintf } from '@wordpress/i18n'; import React from 'react'; -import styled from '@emotion/styled'; import interpolateComponents from 'interpolate-components'; -import { Icon, info } from '@wordpress/icons'; -import Popover from 'wcstripe/components/popover'; import { PAYMENT_METHOD_AFFIRM, PAYMENT_METHOD_KLARNA, } 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 } - -); +import PaymentMethodUnavailablePill, { + PaymentMethodPopoverLink, +} from 'wcstripe/components/payment-method-unavailable-pill'; const PaymentMethodUnavailableDueConflictPill = ( { id, label } ) => { if ( @@ -58,35 +20,27 @@ const PaymentMethodUnavailableDueConflictPill = ( { id, label } ) => { wc_stripe_settings_params.has_klarna_gateway_plugin ) ) { return ( - - { __( 'Has plugin conflict', 'woocommerce-gateway-stripe' ) } - ), - 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-pill/index.js b/client/components/payment-method-unavailable-pill/index.js new file mode 100644 index 0000000000..180edb59c4 --- /dev/null +++ b/client/components/payment-method-unavailable-pill/index.js @@ -0,0 +1,83 @@ +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, popoverContent } ) => { + 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; From 5cb57cec8dcf184a6b841e2673bb1a663c327386 Mon Sep 17 00:00:00 2001 From: Dale du Preez Date: Wed, 20 Aug 2025 10:55:43 +0200 Subject: [PATCH 2/5] Move popover content into children --- .../payment-method-capability-status-pill/index.js | 10 ++++++---- .../payment-method-deprecation-pill/index.js | 5 +++-- .../payment-method-missing-currency-pill/index.js | 5 +++-- .../index.js | 5 +++-- .../payment-method-unavailable-pill/index.js | 7 ++----- 5 files changed, 17 insertions(+), 15 deletions(-) diff --git a/client/components/payment-method-capability-status-pill/index.js b/client/components/payment-method-capability-status-pill/index.js index ef3b5589cc..e3419ff812 100644 --- a/client/components/payment-method-capability-status-pill/index.js +++ b/client/components/payment-method-capability-status-pill/index.js @@ -21,7 +21,8 @@ const PaymentMethodCapabilityStatusPill = ( { id, label } ) => { 'Pending approval', 'woocommerce-gateway-stripe' ) } - popoverContent={ interpolateComponents( { + > + { interpolateComponents( { mixedString: sprintf( /* translators: %s: a payment method name. */ __( @@ -36,7 +37,7 @@ const PaymentMethodCapabilityStatusPill = ( { id, label } ) => { ), }, } ) } - /> + ) } { capabilityStatus === 'inactive' && ( @@ -45,7 +46,8 @@ const PaymentMethodCapabilityStatusPill = ( { id, label } ) => { 'Requires activation', 'woocommerce-gateway-stripe' ) } - popoverContent={ interpolateComponents( { + > + { interpolateComponents( { mixedString: sprintf( /* translators: %s: a payment method name. */ __( @@ -60,7 +62,7 @@ const PaymentMethodCapabilityStatusPill = ( { id, label } ) => { ), }, } ) } - /> + ) } ); diff --git a/client/components/payment-method-deprecation-pill/index.js b/client/components/payment-method-deprecation-pill/index.js index c0e3a02e16..cb0202cba7 100644 --- a/client/components/payment-method-deprecation-pill/index.js +++ b/client/components/payment-method-deprecation-pill/index.js @@ -9,7 +9,8 @@ const PaymentMethodDeprecationPill = () => { return ( + { interpolateComponents( { mixedString: /* translators: $1: a payment method name. %2: Currency(ies). */ __( @@ -22,7 +23,7 @@ const PaymentMethodDeprecationPill = () => { ), }, } ) } - /> + ); }; diff --git a/client/components/payment-method-missing-currency-pill/index.js b/client/components/payment-method-missing-currency-pill/index.js index c48ae7b345..a8314ccfc7 100644 --- a/client/components/payment-method-missing-currency-pill/index.js +++ b/client/components/payment-method-missing-currency-pill/index.js @@ -22,7 +22,8 @@ const PaymentMethodMissingCurrencyPill = ( { id, label } ) => { return ( + { interpolateComponents( { mixedString: sprintf( /* translators: $1: a payment method name. %2: Currency(ies). */ __( @@ -38,7 +39,7 @@ const PaymentMethodMissingCurrencyPill = ( { id, label } ) => { ), }, } ) } - /> + ); }; 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 698ea7b2ba..6b60781612 100644 --- a/client/components/payment-method-unavailable-due-conflict-pill/index.js +++ b/client/components/payment-method-unavailable-due-conflict-pill/index.js @@ -20,7 +20,8 @@ const PaymentMethodUnavailableDueConflictPill = ( { id, label } ) => { return ( + { interpolateComponents( { mixedString: sprintf( /* translators: $1: a payment method name */ __( @@ -35,7 +36,7 @@ const PaymentMethodUnavailableDueConflictPill = ( { id, label } ) => { ), }, } ) } - /> + ); }; diff --git a/client/components/payment-method-unavailable-pill/index.js b/client/components/payment-method-unavailable-pill/index.js index 180edb59c4..0a0f1d686b 100644 --- a/client/components/payment-method-unavailable-pill/index.js +++ b/client/components/payment-method-unavailable-pill/index.js @@ -42,14 +42,11 @@ const IconComponent = ( { children, ...props } ) => ( ); -const PaymentMethodUnavailablePill = ( { title, popoverContent } ) => { +const PaymentMethodUnavailablePill = ( { title, children } ) => { return ( { title } - + ); }; From 6e728e794f61afee4dcd799191d87177fb2a8cba Mon Sep 17 00:00:00 2001 From: Dale du Preez Date: Wed, 27 Aug 2025 13:09:58 +0200 Subject: [PATCH 3/5] Changelog --- changelog.txt | 1 + readme.txt | 1 + 2 files changed, 2 insertions(+) diff --git a/changelog.txt b/changelog.txt index 134e30e738..16b727015f 100644 --- a/changelog.txt +++ b/changelog.txt @@ -23,6 +23,7 @@ * Update - Show all available payment methods before unavailable payment methods * Tweak - Use smaller image for Optimized Checkout banner * Dev - Update WooCommerce Subscriptions e2e tests after 7.8.0 release +* 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/readme.txt b/readme.txt index 98cf38ad64..9e0f17a2ab 100644 --- a/readme.txt +++ b/readme.txt @@ -133,5 +133,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o * Update - Show all available payment methods before unavailable payment methods * Tweak - Use smaller image for Optimized Checkout banner * Dev - Update WooCommerce Subscriptions e2e tests after 7.8.0 release +* 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). From f61aaf08c19db4196053abd7016e47406931d8c1 Mon Sep 17 00:00:00 2001 From: Dale du Preez Date: Thu, 28 Aug 2025 14:24:54 +0200 Subject: [PATCH 4/5] Update from newer linting rules --- .../components/payment-method-capability-status-pill/index.js | 2 +- client/components/payment-method-deprecation-pill/index.js | 2 +- client/components/payment-method-missing-currency-pill/index.js | 2 +- .../payment-method-unavailable-due-conflict-pill/index.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/components/payment-method-capability-status-pill/index.js b/client/components/payment-method-capability-status-pill/index.js index e3419ff812..09ba893627 100644 --- a/client/components/payment-method-capability-status-pill/index.js +++ b/client/components/payment-method-capability-status-pill/index.js @@ -1,6 +1,6 @@ -import { __, sprintf } from '@wordpress/i18n'; import React from 'react'; import interpolateComponents from 'interpolate-components'; +import { __, sprintf } from '@wordpress/i18n'; import { useGetCapabilities } from 'wcstripe/data/account'; import PaymentMethodUnavailablePill, { PaymentMethodPopoverLink, diff --git a/client/components/payment-method-deprecation-pill/index.js b/client/components/payment-method-deprecation-pill/index.js index cb0202cba7..1fbf59495f 100644 --- a/client/components/payment-method-deprecation-pill/index.js +++ b/client/components/payment-method-deprecation-pill/index.js @@ -1,6 +1,6 @@ -import { __ } from '@wordpress/i18n'; import React from 'react'; import interpolateComponents from 'interpolate-components'; +import { __ } from '@wordpress/i18n'; import PaymentMethodUnavailablePill, { PaymentMethodPopoverLink, } from 'wcstripe/components/payment-method-unavailable-pill'; diff --git a/client/components/payment-method-missing-currency-pill/index.js b/client/components/payment-method-missing-currency-pill/index.js index a8314ccfc7..8ebf3493a6 100644 --- a/client/components/payment-method-missing-currency-pill/index.js +++ b/client/components/payment-method-missing-currency-pill/index.js @@ -1,6 +1,6 @@ -import { __, sprintf } from '@wordpress/i18n'; import React from 'react'; import interpolateComponents from 'interpolate-components'; +import { __, sprintf } from '@wordpress/i18n'; import { usePaymentMethodCurrencies } from 'utils/use-payment-method-currencies'; import usePaymentMethodUnavailableReason from 'utils/use-payment-method-unavailable-reason'; import PaymentMethodUnavailablePill, { 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 6b60781612..0b2b2c298d 100644 --- a/client/components/payment-method-unavailable-due-conflict-pill/index.js +++ b/client/components/payment-method-unavailable-due-conflict-pill/index.js @@ -1,6 +1,6 @@ -import { __, sprintf } from '@wordpress/i18n'; import React from 'react'; import interpolateComponents from 'interpolate-components'; +import { __, sprintf } from '@wordpress/i18n'; import PaymentMethodUnavailablePill, { PaymentMethodPopoverLink, } from 'wcstripe/components/payment-method-unavailable-pill'; From 6436a7f6aacc58c06ebea175c5620634d1875e26 Mon Sep 17 00:00:00 2001 From: Dale du Preez Date: Thu, 28 Aug 2025 14:28:05 +0200 Subject: [PATCH 5/5] Remove unused link from PaymentMethodUnavailableDueConflictPill --- .../index.js | 26 ++++++------------- 1 file changed, 8 insertions(+), 18 deletions(-) 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 0b2b2c298d..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,9 +1,6 @@ import React from 'react'; -import interpolateComponents from 'interpolate-components'; import { __, sprintf } from '@wordpress/i18n'; -import PaymentMethodUnavailablePill, { - PaymentMethodPopoverLink, -} from 'wcstripe/components/payment-method-unavailable-pill'; +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'; @@ -21,21 +18,14 @@ const PaymentMethodUnavailableDueConflictPill = ( { id, label } ) => { - { interpolateComponents( { - mixedString: sprintf( - /* translators: $1: a payment method name */ - __( - '%1$s is unavailable due to another official plugin being active.', - 'woocommerce-gateway-stripe' - ), - label + { sprintf( + /* translators: $1: a payment method name */ + __( + '%1$s is unavailable due to another official plugin being active.', + 'woocommerce-gateway-stripe' ), - components: { - currencySettingsLink: ( - - ), - }, - } ) } + label + ) } ); };