Consolidate implementation for payment method pills #4605

daledupreez · 2025-08-20T08:59:01Z

Changes proposed in this Pull Request:

While working on #4523, I noticed that we have duplicated all the styled elements and some implementation for the pill elements we show within the payment methods list. This PR consolidates those elements into a new PaymentMethodUnavailablePill component, as well as a secondary PaymentMethodPopoverLink element. This should mean we have consistent implementations and UX across pills, making it easier to improve the components in future, while also reducing our bundle size slightly.

The new PaymentMethodUnavailablePill component accepts a title prop and all children will be displayed via the content attribute of the deeper Popover child element. The PaymentMethodPopoverLink component can be used for links within the popover content, as we want to consolidate the behaviour for those links as well. This prop is a wrapper around an a element, but specifically defaults the onClick, target, and rel props to simplify life for callers so they only need to specify the href to get the default behaviour.

Testing instructions

Check out this branch locally: git checkout try/refactor-payment-method-pills
Rebuild the UI: npm run build
Verify that the build completes without any errors
Run the code you've just built, either on a site or via docker
Ensure your store is configured to use a currency where Affirm or Klarna is available
Connect your store to Stripe in test mode
Navigate to the payment methods list
Verify that you see the Requires currency pill for payment methods that don't support the currency
Confirm that clicking on the pill shows popover text with the following format:

[Payment method] requires store currency to be set to [currency/ies]. Set currency

Verify that clicking away from the popover hides the content.
Install and activate the official Klarna or Affirm plugin
Ensure that the respective payment gateway is enabled via WooCommerce > Settings > Payments
Reload the payment method list
Verify that you see the "Has plugin conflict" pill for your payment option
Click on the pill, and verify that you are shown popover text matching the following:

[Payment method] is unavailable due to another official plugin being active.

Verify that clicking away from the popover hides the content.

Covered with tests (or have a good reason not to test in description ☝️) -- covered with existing tests
Tested on mobile (or does not apply)

Changelog entry

This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Comment

Comment

Post merge

Added testing instructions to the Release Testing Instructions wiki page (or does not apply)
Added the needs docs label (or does not apply)
Included this PR in the Release Thread scope (or does not apply)

Copilot

Pull Request Overview

This PR consolidates duplicate styled elements and implementation logic for payment method pill components into a reusable PaymentMethodUnavailablePill component with an accompanying PaymentMethodPopoverLink helper component. This reduces code duplication and ensures consistent UX across different pill types while slightly reducing bundle size.

Creates a new PaymentMethodUnavailablePill component that accepts a title prop and displays children as popover content
Introduces PaymentMethodPopoverLink component with default behavior for links within popovers
Refactors five existing pill components to use the new consolidated implementation

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
client/components/payment-method-unavailable-pill/index.js	New consolidated pill component with shared styling and popover link helper
client/components/payment-method-unavailable-due-conflict-pill/index.js	Refactored to use new consolidated pill component, removing duplicate styles
client/components/payment-method-missing-currency-pill/index.js	Refactored to use new consolidated pill component, removing duplicate styles
client/components/payment-method-deprecation-pill/index.js	Refactored to use new consolidated pill component, removing duplicate styles
client/components/payment-method-capability-status-pill/index.js	Refactored to use new consolidated pill component, removing duplicate styles

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-20T08:59:39Z

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

+		</StyledPill>
+	);
+};
+


The PaymentMethodPopoverLink component lacks JSDoc documentation. Consider adding documentation that explains its purpose, props, and default behavior for onClick, target, and rel.

Suggested change

/**

* A styled anchor link for use within payment method popovers.

*

* Renders a link with default behavior to open in a new tab and prevent popover closure on click.

*

* @param {Object} props - Component props.

* @param {React.ReactNode} props.children - The link content.

* @param {string} [props.target='_blank'] - The target attribute for the link. Defaults to '_blank'.

* @param {string} [props.rel='noreferrer'] - The rel attribute for the link. Defaults to 'noreferrer'.

* @param {function} [props.onClick] - Optional click handler. The event's propagation is stopped before calling this handler.

* @returns {JSX.Element} The styled anchor link component.

*/

I think this is OK, but happy to get feedback on this one. We haven't been super-explicit about documenting our React components.

Copilot · 2025-08-20T08:59:39Z

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

+		{ children }
+	</IconWrapper>
+);
+


The PaymentMethodUnavailablePill component lacks JSDoc documentation. Consider adding documentation that explains the component's purpose, its props (title and children), and how children are used as popover content.

Suggested change

/**

* PaymentMethodUnavailablePill

*

* Displays a styled pill indicating that a payment method is unavailable.

* Shows an info icon that, when hovered or clicked, displays a popover with additional information.

*

* @param {Object} props - Component props.

* @param {React.ReactNode} props.title - The text to display inside the pill.

* @param {React.ReactNode} props.children - The content to display inside the popover when the info icon is activated.

* @returns {JSX.Element} The rendered pill component.

*/

I think this is OK, but happy to get feedback on this one. We haven't been super-explicit about documenting our React components.

Mayisha

Good idea consolidating the component 👍

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

client/components/payment-method-unavailable-due-conflict-pill/index.js

annemirasol

Verify that clicking away from the popover hides the content.

I don't get this for the "Has plugin conflict" pill.

Screen.Recording.2025-08-29.at.1.22.25.PM.mov

daledupreez · 2025-09-03T09:42:46Z

Verify that clicking away from the popover hides the content.

I don't get this for the "Has plugin conflict" pill.

@annemirasol, I tested this yesterday and it looks like this was a pre-existing issue, as I could reproduce the issue in develop. AFAICT, it looks like a feature/bug in the way the expected onFocusOutside callback is not being triggered by the Popover component from @wordpress/components for this specific content. We are specifying the prop here, but it is not being triggered by this case. Given that we're still using @wordpress/[email protected], there have likely been many changes to the implementation since then.

annemirasol

LGTM! We can revisit the focusout issue when we've upgraded our libraries.

daledupreez added 3 commits August 18, 2025 09:55

Create PaymentMethodUnavailablePill component for reuse

e14074a

Merge branch 'develop' into try/refactor-payment-method-pills

64a0cb5

Move popover content into children

5cb57ce

daledupreez requested a review from Copilot August 20, 2025 08:59

Copilot AI reviewed Aug 20, 2025

View reviewed changes

daledupreez and others added 4 commits August 25, 2025 15:15

Merge branch 'develop' into try/refactor-payment-method-pills

25477e1

Merge branch 'develop' into try/refactor-payment-method-pills

999ae31

Merge branch 'develop' into try/refactor-payment-method-pills

3d2181a

Changelog

6e728e7

daledupreez marked this pull request as ready for review August 27, 2025 11:10

daledupreez self-assigned this Aug 27, 2025

daledupreez requested review from a team, annemirasol and Mayisha and removed request for a team August 27, 2025 11:10

Merge branch 'develop' into try/refactor-payment-method-pills

7423490

Mayisha approved these changes Aug 28, 2025

View reviewed changes

client/components/payment-method-deprecation-pill/index.js Outdated Show resolved Hide resolved

client/components/payment-method-unavailable-due-conflict-pill/index.js Outdated Show resolved Hide resolved

daledupreez and others added 5 commits August 28, 2025 14:21

Merge branch 'develop' into try/refactor-payment-method-pills

2953821

Update from newer linting rules

f61aaf0

Remove unused link from PaymentMethodUnavailableDueConflictPill

6436a7f

Merge branch 'develop' into try/refactor-payment-method-pills

eaddd4f

Merge branch 'develop' into try/refactor-payment-method-pills

ae7120d

annemirasol reviewed Aug 29, 2025

View reviewed changes

Merge branch 'develop' into try/refactor-payment-method-pills

2004f7d

Merge branch 'develop' into try/refactor-payment-method-pills

de7489b

daledupreez requested a review from annemirasol September 3, 2025 09:43

annemirasol approved these changes Sep 3, 2025

View reviewed changes

Merge branch 'develop' into try/refactor-payment-method-pills

8b4aa9d

daledupreez merged commit 03c0c3b into develop Sep 3, 2025
40 checks passed

daledupreez deleted the try/refactor-payment-method-pills branch September 3, 2025 19:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Consolidate implementation for payment method pills #4605

Consolidate implementation for payment method pills #4605

Uh oh!

daledupreez commented Aug 20, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 20, 2025

Uh oh!

daledupreez Aug 27, 2025

Uh oh!

Copilot AI Aug 20, 2025

Uh oh!

daledupreez Aug 27, 2025

Uh oh!

Mayisha left a comment

Uh oh!

Uh oh!

Uh oh!

annemirasol left a comment

Uh oh!

daledupreez commented Sep 3, 2025

Uh oh!

annemirasol left a comment

Uh oh!

Uh oh!

Uh oh!

+/**
+ * A styled anchor link for use within payment method popovers.
+ *
+ * Renders a link with default behavior to open in a new tab and prevent popover closure on click.
+ *
+ * @param {Object} props - Component props.
+ * @param {React.ReactNode} props.children - The link content.
+ * @param {string} [props.target='_blank'] - The target attribute for the link. Defaults to '_blank'.
+ * @param {string} [props.rel='noreferrer'] - The rel attribute for the link. Defaults to 'noreferrer'.
+ * @param {function} [props.onClick] - Optional click handler. The event's propagation is stopped before calling this handler.
+ * @returns {JSX.Element} The styled anchor link component.
+ */

+/**
+ * PaymentMethodUnavailablePill
+ *
+ * Displays a styled pill indicating that a payment method is unavailable.
+ * Shows an info icon that, when hovered or clicked, displays a popover with additional information.
+ *
+ * @param {Object} props - Component props.
+ * @param {React.ReactNode} props.title - The text to display inside the pill.
+ * @param {React.ReactNode} props.children - The content to display inside the popover when the info icon is activated.
+ * @returns {JSX.Element} The rendered pill component.
+ */

Consolidate implementation for payment method pills #4605

Consolidate implementation for payment method pills #4605

Uh oh!

Conversation

daledupreez commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Testing instructions

Changelog entry

Comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

daledupreez Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

daledupreez Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

Mayisha left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

annemirasol left a comment

Choose a reason for hiding this comment

Uh oh!

daledupreez commented Sep 3, 2025

Uh oh!

annemirasol left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

daledupreez commented Aug 20, 2025 •

edited

Loading