Add pill to inform about card requirement when OC is enabled (#4541)

* Blocking disabling of cards when OC is enabled

* Changelog and readme entries

* Add new pill to inform about the card requirement when OC is enabled

* Block the checkbox as well

* Refactor logic to force enablement during init

* Unit tests

* Fix tests

* Fix payment method pills swapping

* Testing custom checked+disabled style

* Remove custom checkbox style

* Removing unnecessary import

* Removing the need for a page refresh

* Changelog and readme entries

* Update client/settings/general-settings-section/payment-method-checkbox.js

Co-authored-by: Diego Curbelo <[email protected]>

* Fix lint issue

---------

Co-authored-by: Diego Curbelo <[email protected]>

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.8.0 - xxxx-xx-xx =
+* Add - A new pill to the payment methods page to indicate the credit card requirement when the Optimized Checkout feature is enabled
 * Add - Tracks the toggle of the Optimized Checkout feature in the promotional banner
 * Fix - Force the card payment method to be enabled when the Optimized Checkout is enabled in the merchant's Payment Method Configuration
 * Update - Deactivates Affirm or Klarna when other official plugins are active in merchant's Payment Method Configuration

client/components/payment-method-required-for-oc-pill/__tests__/index.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import PaymentMethodRequiredForOCPill from '..';
+import { PAYMENT_METHOD_CARD } from 'wcstripe/stripe-utils/constants';
+import { useIsOCEnabled } from 'wcstripe/data';
+
+jest.mock( 'wcstripe/data', () => ( {
+	useIsOCEnabled: jest.fn(),
+} ) );
+
+describe( 'PaymentMethodRequiredForOCPill', () => {
+	beforeEach( () => {
+		useIsOCEnabled.mockReturnValue( [ false, jest.fn() ] );
+	} );
+
+	it( 'should render the "Required for the Optimized Checkout Suite" text', () => {
+		useIsOCEnabled.mockReturnValue( [ true, jest.fn() ] );
+		global.wc_stripe_settings_params = { is_oc_enabled: true };
+
+		render(
+			<PaymentMethodRequiredForOCPill
+				id={ PAYMENT_METHOD_CARD }
+				label="Card"
+			/>
+		);
+
+		expect( screen.queryByText( 'Required' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should not render when OC is not active', () => {
+		const { container } = render(
+			<PaymentMethodRequiredForOCPill
+				id={ PAYMENT_METHOD_CARD }
+				label="Card"
+			/>
+		);
+
+		expect( container.firstChild ).toBeNull();
+	} );
+} );

client/components/payment-method-required-for-oc-pill/index.js

@@ -0,0 +1,87 @@
+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 } ) => (
+	<IconWrapper { ...props }>
+		<AlertIcon icon={ info } size="16" />
+		{ children }
+	</IconWrapper>
+);
+
+const PaymentMethodRequiredForOCPill = ( { id, label } ) => {
+	const [ isOCEnabled ] = useIsOCEnabled();
+	if ( id === PAYMENT_METHOD_CARD && isOCEnabled ) {
+		return (
+			<StyledPill>
+				{ __( 'Required', 'woocommerce-gateway-stripe' ) }
+				<Popover
+					BaseComponent={ IconComponent }
+					content={ interpolateComponents( {
+						mixedString: sprintf(
+							/* translators: $1: a payment method name */
+							__(
+								'%1$s is required for the Optimized Checkout Suite.',
+								'woocommerce-gateway-stripe'
+							),
+							label
+						),
+						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>
+		);
+	}
+
+	return null;
+};
+
+export default PaymentMethodRequiredForOCPill;

client/settings/general-settings-section/payment-method-checkbox.js

@@ -33,6 +33,7 @@ const PaymentMethodCheckbox = ( {
 	label,
 	isAllowingManualCapture,
 	disabled,
+	disabledButChecked,
 } ) => {
 	const [ isManualCaptureEnabled ] = useManualCapture();
 	const [ isConfirmationModalOpen, setIsConfirmationModalOpen ] = useState(
@@ -44,9 +45,12 @@ const PaymentMethodCheckbox = ( {
 	] = useEnabledPaymentMethodIds();
 	const [ , setIsStripeEnabled ] = useIsStripeEnabled();
 	const { isUpeEnabled } = useContext( UpeToggleContext );
+	const checked =
+		! disabled &&
+		( disabledButChecked || enabledPaymentMethods.includes( id ) );
 
 	const handleCheckboxChange = ( hasBeenChecked ) => {
-		if ( disabled ) {
+		if ( disabled || disabledButChecked ) {
 			return;
 		}
 		if ( ! hasBeenChecked ) {
@@ -107,10 +111,8 @@ const PaymentMethodCheckbox = ( {
 				<StyledCheckbox
 					label={ <VisuallyHidden>{ label }</VisuallyHidden> }
 					onChange={ handleCheckboxChange }
-					checked={
-						disabled ? false : enabledPaymentMethods.includes( id )
-					}
-					disabled={ disabled }
+					checked={ checked }
+					disabled={ disabled || disabledButChecked }
 				/>
 			) }
 			{ isConfirmationModalOpen && (

client/settings/general-settings-section/payment-method-description.js

@@ -5,6 +5,7 @@ import RecurringPaymentIcon from '../../components/recurring-payment-icon';
 import PaymentMethodCapabilityStatusPill from 'wcstripe/components/payment-method-capability-status-pill';
 import PaymentMethodDeprecationPill from 'wcstripe/components/payment-method-deprecation-pill';
 import PaymentMethodUnavailableDueConflictPill from 'wcstripe/components/payment-method-unavailable-due-conflict-pill';
+import PaymentMethodRequiredForOCPill from 'wcstripe/components/payment-method-required-for-oc-pill';
 
 const Wrapper = styled.div`
 	display: flex;
@@ -74,6 +75,10 @@ const PaymentMethodDescription = ( {
 								id={ id }
 								label={ label }
 							/>
+							<PaymentMethodRequiredForOCPill
+								id={ id }
+								label={ label }
+							/>
 						</>
 					) }
 				</LabelWrapper>

client/settings/general-settings-section/payment-method.js

@@ -7,7 +7,7 @@ import interpolateComponents from 'interpolate-components';
 import PaymentMethodsMap from '../../payment-methods-map';
 import PaymentMethodDescription from './payment-method-description';
 import PaymentMethodCheckbox from './payment-method-checkbox';
-import { useManualCapture } from 'wcstripe/data';
+import { useIsOCEnabled, useManualCapture } from 'wcstripe/data';
 import {
 	PAYMENT_METHOD_AFFIRM,
 	PAYMENT_METHOD_AFTERPAY_CLEARPAY,
@@ -105,6 +105,7 @@ const StyledFees = styled( PaymentMethodFeesPill )`
 `;
 
 const PaymentMethod = ( { method, data } ) => {
+	const [ isOCEnabled ] = useIsOCEnabled();
 	const [ isManualCaptureEnabled ] = useManualCapture();
 	const paymentMethodCurrencies = usePaymentMethodCurrencies( method );
 
@@ -137,6 +138,8 @@ const PaymentMethod = ( { method, data } ) => {
 			// eslint-disable-next-line camelcase
 			wc_stripe_settings_params.has_klarna_gateway_plugin );
 
+	const isDisabledButChecked = PAYMENT_METHOD_CARD === method && isOCEnabled;
+
 	return (
 		<div key={ method }>
 			<ListElement
@@ -151,6 +154,7 @@ const PaymentMethod = ( { method, data } ) => {
 					label={ label }
 					isAllowingManualCapture={ isAllowingManualCapture }
 					disabled={ deprecated || isDisabled }
+					disabledButChecked={ isDisabledButChecked }
 				/>
 				<PaymentMethodWrapper>
 					<PaymentMethodDescription

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.8.0 - xxxx-xx-xx =
+* Add - A new pill to the payment methods page to indicate the credit card requirement when the Optimized Checkout feature is enabled
 * Add - Tracks the toggle of the Optimized Checkout feature in the promotional banner
 * Fix - Force the card payment method to be enabled when the Optimized Checkout is enabled in the merchant's Payment Method Configuration
 * Update - Deactivates Affirm or Klarna when other official plugins are active in merchant's Payment Method Configuration