Skip to content

Commit 03c0c3b

Browse files
daledupreezdaledupreez
authored
Consolidate implementation for payment method pills (#4605)
* Create PaymentMethodUnavailablePill component for reuse * Move popover content into children * Changelog * Update from newer linting rules * Remove unused link from PaymentMethodUnavailableDueConflictPill
1 parent 4b9d0a7 commit 03c0c3b

File tree

7 files changed

+180
-310
lines changed

7 files changed

+180
-310
lines changed

‎changelog.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
* Dev - Make 'Add to cart' more robust in e2e tests
3434
* Dev - Ensure e2e tests enable or disable Optimized Checkout during setup
3535
* Fix - Fix some PHP warnings
36+
* Dev - Consolidate component used for unavailable payment methods
3637

3738
= 9.8.1 - 2025-08-15 =
3839
* Fix - Remove connection type requirement from PMC sync migration attempt

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

Lines changed: 42 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,10 @@
11
import React from 'react';
2-
import styled from '@emotion/styled';
32
import interpolateComponents from 'interpolate-components';
4-
import { Icon, info } from '@wordpress/icons';
53
import { __, sprintf } from '@wordpress/i18n';
6-
import Pill from 'wcstripe/components/pill';
7-
import Popover from 'wcstripe/components/popover';
84
import { useGetCapabilities } from 'wcstripe/data/account';
9-
10-
const StyledPill = styled( Pill )`
11-
display: inline-flex;
12-
align-items: center;
13-
gap: 4px;
14-
padding: 4px 8px;
15-
border: 1px solid #fcf9e8;
16-
border-radius: 2px;
17-
background-color: #fcf9e8;
18-
color: #674600;
19-
font-size: 12px;
20-
font-weight: 400;
21-
line-height: 16px;
22-
width: fit-content;
23-
`;
24-
25-
const StyledLink = styled.a`
26-
&:focus,
27-
&:visited {
28-
box-shadow: none;
29-
}
30-
`;
31-
32-
const IconWrapper = styled.span`
33-
height: 16px;
34-
cursor: pointer;
35-
`;
36-
37-
const AlertIcon = styled( Icon )`
38-
fill: #674600;
39-
`;
40-
41-
const IconComponent = ( { children, ...props } ) => (
42-
<IconWrapper { ...props }>
43-
<AlertIcon icon={ info } size="16" />
44-
{ children }
45-
</IconWrapper>
46-
);
5+
import PaymentMethodUnavailablePill, {
6+
PaymentMethodPopoverLink,
7+
} from 'wcstripe/components/payment-method-unavailable-pill';
478

489
const PaymentMethodCapabilityStatusPill = ( { id, label } ) => {
4910
const capabilities = useGetCapabilities();
@@ -55,72 +16,53 @@ const PaymentMethodCapabilityStatusPill = ( { id, label } ) => {
5516
return (
5617
<>
5718
{ capabilityStatus === 'pending' && (
58-
<StyledPill>
59-
{ __( 'Pending approval', 'woocommerce-gateway-stripe' ) }
60-
61-
<Popover
62-
BaseComponent={ IconComponent }
63-
content={ interpolateComponents( {
64-
mixedString: sprintf(
65-
/* translators: %s: a payment method name. */
66-
__(
67-
'%s is {{stripeDashboardLink}}pending approval{{/stripeDashboardLink}}. Once approved, you will be able to use it.',
68-
'woocommerce-gateway-stripe'
69-
),
70-
label
19+
<PaymentMethodUnavailablePill
20+
title={ __(
21+
'Pending approval',
22+
'woocommerce-gateway-stripe'
23+
) }
24+
>
25+
{ interpolateComponents( {
26+
mixedString: sprintf(
27+
/* translators: %s: a payment method name. */
28+
__(
29+
'%s is {{stripeDashboardLink}}pending approval{{/stripeDashboardLink}}. Once approved, you will be able to use it.',
30+
'woocommerce-gateway-stripe'
31+
),
32+
label
33+
),
34+
components: {
35+
stripeDashboardLink: (
36+
<PaymentMethodPopoverLink href="https://dashboard.stripe.com/settings/payment_methods" />
7137
),
72-
components: {
73-
stripeDashboardLink: (
74-
<StyledLink
75-
href="https://dashboard.stripe.com/settings/payment_methods"
76-
target="_blank"
77-
rel="noreferrer"
78-
onClick={ ( ev ) => {
79-
// Stop propagation is necessary so it doesn't trigger the tooltip click event.
80-
ev.stopPropagation();
81-
} }
82-
/>
83-
),
84-
},
85-
} ) }
86-
/>
87-
</StyledPill>
38+
},
39+
} ) }
40+
</PaymentMethodUnavailablePill>
8841
) }
8942

9043
{ capabilityStatus === 'inactive' && (
91-
<StyledPill>
92-
{ __(
44+
<PaymentMethodUnavailablePill
45+
title={ __(
9346
'Requires activation',
9447
'woocommerce-gateway-stripe'
9548
) }
96-
97-
<Popover
98-
BaseComponent={ IconComponent }
99-
content={ interpolateComponents( {
100-
mixedString: sprintf(
101-
/* translators: %s: a payment method name. */
102-
__(
103-
'%s requires activation in your {{stripeDashboardLink}}Stripe dashboard{{/stripeDashboardLink}}. Follow the instructions there and check back soon.',
104-
'woocommerce-gateway-stripe'
105-
),
106-
label
49+
>
50+
{ interpolateComponents( {
51+
mixedString: sprintf(
52+
/* translators: %s: a payment method name. */
53+
__(
54+
'%s requires activation in your {{stripeDashboardLink}}Stripe dashboard{{/stripeDashboardLink}}. Follow the instructions there and check back soon.',
55+
'woocommerce-gateway-stripe'
56+
),
57+
label
58+
),
59+
components: {
60+
stripeDashboardLink: (
61+
<PaymentMethodPopoverLink href="https://dashboard.stripe.com/settings/payment_methods" />
10762
),
108-
components: {
109-
stripeDashboardLink: (
110-
<StyledLink
111-
href="https://dashboard.stripe.com/settings/payment_methods"
112-
target="_blank"
113-
rel="noreferrer"
114-
onClick={ ( ev ) => {
115-
// Stop propagation is necessary so it doesn't trigger the tooltip click event.
116-
ev.stopPropagation();
117-
} }
118-
/>
119-
),
120-
},
121-
} ) }
122-
/>
123-
</StyledPill>
63+
},
64+
} ) }
65+
</PaymentMethodUnavailablePill>
12466
) }
12567
</>
12668
);

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

Lines changed: 20 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,29 @@
11
import React from 'react';
2-
import styled from '@emotion/styled';
3-
import { Icon, info } from '@wordpress/icons';
42
import interpolateComponents from 'interpolate-components';
53
import { __ } from '@wordpress/i18n';
6-
import Pill from 'wcstripe/components/pill';
7-
import Popover from 'wcstripe/components/popover';
8-
9-
const StyledPill = styled( Pill )`
10-
display: inline-flex;
11-
align-items: center;
12-
gap: 4px;
13-
padding: 4px 8px;
14-
border: 1px solid #fcf9e8;
15-
border-radius: 2px;
16-
background-color: #fcf9e8;
17-
color: #674600;
18-
font-size: 12px;
19-
font-weight: 400;
20-
line-height: 16px;
21-
width: fit-content;
22-
`;
23-
24-
const StyledLink = styled.a`
25-
&:focus,
26-
&:visited {
27-
box-shadow: none;
28-
}
29-
`;
30-
31-
const IconWrapper = styled.span`
32-
height: 16px;
33-
cursor: pointer;
34-
`;
35-
36-
const AlertIcon = styled( Icon )`
37-
fill: #674600;
38-
`;
39-
40-
const IconComponent = ( { children, ...props } ) => (
41-
<IconWrapper { ...props }>
42-
<AlertIcon icon={ info } size="16" />
43-
{ children }
44-
</IconWrapper>
45-
);
4+
import PaymentMethodUnavailablePill, {
5+
PaymentMethodPopoverLink,
6+
} from 'wcstripe/components/payment-method-unavailable-pill';
467

478
const PaymentMethodDeprecationPill = () => {
489
return (
49-
<StyledPill>
50-
{ __( 'Deprecated', 'woocommerce-gateway-stripe' ) }
51-
<Popover
52-
BaseComponent={ IconComponent }
53-
content={ interpolateComponents( {
54-
mixedString:
55-
/* translators: $1: a payment method name. %2: Currency(ies). */
56-
__(
57-
'This payment method is deprecated on the {{currencySettingsLink}}legacy checkout as of Oct 29th, 2024{{/currencySettingsLink}}.',
58-
'woocommerce-gateway-stripe'
59-
),
60-
components: {
61-
currencySettingsLink: (
62-
<StyledLink
63-
href="https://woocommerce.com/document/stripe/admin-experience/legacy-checkout-experience/"
64-
target="_blank"
65-
rel="noreferrer"
66-
onClick={ ( ev ) => {
67-
// Stop propagation is necessary so it doesn't trigger the tooltip click event.
68-
ev.stopPropagation();
69-
} }
70-
/>
71-
),
72-
},
73-
} ) }
74-
/>
75-
</StyledPill>
10+
<PaymentMethodUnavailablePill
11+
title={ __( 'Deprecated', 'woocommerce-gateway-stripe' ) }
12+
>
13+
{ interpolateComponents( {
14+
mixedString:
15+
/* translators: $1: a payment method name. %2: Currency(ies). */
16+
__(
17+
'This payment method is deprecated on the {{currencySettingsLink}}legacy checkout as of Oct 29th, 2024{{/currencySettingsLink}}.',
18+
'woocommerce-gateway-stripe'
19+
),
20+
components: {
21+
currencySettingsLink: (
22+
<PaymentMethodPopoverLink href="https://woocommerce.com/document/stripe/admin-experience/legacy-checkout-experience/" />
23+
),
24+
},
25+
} ) }
26+
</PaymentMethodUnavailablePill>
7627
);
7728
};
7829

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

Lines changed: 22 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,13 @@
11
import React from 'react';
2-
import styled from '@emotion/styled';
32
import interpolateComponents from 'interpolate-components';
4-
import { Icon, info } from '@wordpress/icons';
53
import { __, sprintf } from '@wordpress/i18n';
6-
import Popover from 'wcstripe/components/popover';
74
import { usePaymentMethodCurrencies } from 'utils/use-payment-method-currencies';
85
import usePaymentMethodUnavailableReason from 'utils/use-payment-method-unavailable-reason';
6+
import PaymentMethodUnavailablePill, {
7+
PaymentMethodPopoverLink,
8+
} from 'wcstripe/components/payment-method-unavailable-pill';
99
import { PAYMENT_METHOD_UNAVAILABLE_REASONS } from 'wcstripe/stripe-utils/constants';
1010

11-
const StyledPill = styled.span`
12-
display: inline-flex;
13-
align-items: center;
14-
gap: 4px;
15-
padding: 4px 8px;
16-
border: 1px solid #fcf9e8;
17-
border-radius: 2px;
18-
background-color: #fcf9e8;
19-
color: #674600;
20-
font-size: 12px;
21-
font-weight: 400;
22-
line-height: 16px;
23-
width: fit-content;
24-
`;
25-
26-
const StyledLink = styled.a`
27-
&:focus,
28-
&:visited {
29-
box-shadow: none;
30-
}
31-
`;
32-
33-
const IconWrapper = styled.span`
34-
height: 16px;
35-
cursor: pointer;
36-
`;
37-
38-
const AlertIcon = styled( Icon )`
39-
fill: #674600;
40-
`;
41-
42-
const IconComponent = ( { children, ...props } ) => (
43-
<IconWrapper { ...props }>
44-
<AlertIcon icon={ info } size="16" />
45-
{ children }
46-
</IconWrapper>
47-
);
48-
4911
const PaymentMethodMissingCurrencyPill = ( { id, label } ) => {
5012
const paymentMethodCurrencies = usePaymentMethodCurrencies( id );
5113
const unavailableReason = usePaymentMethodUnavailableReason( id );
@@ -58,36 +20,26 @@ const PaymentMethodMissingCurrencyPill = ( { id, label } ) => {
5820
}
5921

6022
return (
61-
<StyledPill>
62-
{ __( 'Requires currency', 'woocommerce-gateway-stripe' ) }
63-
<Popover
64-
BaseComponent={ IconComponent }
65-
content={ interpolateComponents( {
66-
mixedString: sprintf(
67-
/* translators: $1: a payment method name. %2: Currency(ies). */
68-
__(
69-
'%1$s requires store currency to be set to %2$s. {{currencySettingsLink}}Set currency{{/currencySettingsLink}}',
70-
'woocommerce-gateway-stripe'
71-
),
72-
label,
73-
paymentMethodCurrencies.join( ', ' )
23+
<PaymentMethodUnavailablePill
24+
title={ __( 'Requires currency', 'woocommerce-gateway-stripe' ) }
25+
>
26+
{ interpolateComponents( {
27+
mixedString: sprintf(
28+
/* translators: $1: a payment method name. %2: Currency(ies). */
29+
__(
30+
'%1$s requires store currency to be set to %2$s. {{currencySettingsLink}}Set currency{{/currencySettingsLink}}',
31+
'woocommerce-gateway-stripe'
32+
),
33+
label,
34+
paymentMethodCurrencies.join( ', ' )
35+
),
36+
components: {
37+
currencySettingsLink: (
38+
<PaymentMethodPopoverLink href="/wp-admin/admin.php?page=wc-settings&tab=general" />
7439
),
75-
components: {
76-
currencySettingsLink: (
77-
<StyledLink
78-
href="/wp-admin/admin.php?page=wc-settings&tab=general"
79-
target="_blank"
80-
rel="noreferrer"
81-
onClick={ ( ev ) => {
82-
// Stop propagation is necessary so it doesn't trigger the tooltip click event.
83-
ev.stopPropagation();
84-
} }
85-
/>
86-
),
87-
},
88-
} ) }
89-
/>
90-
</StyledPill>
40+
},
41+
} ) }
42+
</PaymentMethodUnavailablePill>
9143
);
9244
};
9345

0 commit comments

Comments
 (0)