Fix Link availability when OC is enabled (#4615)

* Fix Link availability when OC is enabled

* Readme and changelog entries

* Fix tests

* Unit test

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.9.0 - xxxx-xx-xx =
+* Fix - The availability of the Link payment method when the Optimized Checkout is enabled
 * Dev - Update Javascript unit tests for compatibility with Node 20
 * Dev - Replaces some payment method instantiation logic for the Optimized Checkout with calls to the `get_payment_method_instance` method
 * Dev - Multiple lint fixes in preparation for the Node 20 upgrade

client/settings/payment-request-section/__tests__/index.test.js

@@ -5,6 +5,7 @@ import {
 	useGetAvailablePaymentMethodIds,
 	usePaymentRequestEnabledSettings,
 	useAmazonPayEnabledSettings,
+	useIsOCEnabled,
 } from 'wcstripe/data';
 import {
 	PAYMENT_METHOD_CARD,
@@ -17,6 +18,7 @@ jest.mock( 'wcstripe/data', () => ( {
 	useGetAvailablePaymentMethodIds: jest.fn(),
 	useEnabledPaymentMethodIds: jest.fn(),
 	useAmazonPayEnabledSettings: jest.fn(),
+	useIsOCEnabled: jest.fn(),
 } ) );
 
 const getMockPaymentRequestEnabledSettings = (
@@ -41,6 +43,7 @@ describe( 'PaymentRequestSection', () => {
 			PAYMENT_METHOD_AMAZON_PAY,
 		] );
 		useAmazonPayEnabledSettings.mockReturnValue( [ false, jest.fn() ] );
+		useIsOCEnabled.mockReturnValue( [ false, jest.fn() ] );
 		global.wc_stripe_settings_params = {
 			...globalValues,
 			is_amazon_pay_available: true,
@@ -59,7 +62,7 @@ describe( 'PaymentRequestSection', () => {
 		expect( label ).toBeInTheDocument();
 	} );
 
-	it( 'hide link payment if card payment method is inactive', () => {
+	it( 'hide link payment if card payment method is inactive (OC disabled)', () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [
 			PAYMENT_METHOD_LINK,
 			PAYMENT_METHOD_CARD,
@@ -73,7 +76,7 @@ describe( 'PaymentRequestSection', () => {
 		expect( screen.queryByText( 'Link by Stripe' ) ).toBeNull();
 	} );
 
-	it( 'show link payment if card payment method is active', () => {
+	it( 'show link payment if card payment method is active (OC disabled)', () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [
 			PAYMENT_METHOD_LINK,
 			PAYMENT_METHOD_CARD,
@@ -87,6 +90,21 @@ describe( 'PaymentRequestSection', () => {
 		expect( screen.queryByText( 'Link by Stripe' ) ).toBeInTheDocument();
 	} );
 
+	it( 'show link payment if card payment method is inactive (OC enabled)', () => {
+		useGetAvailablePaymentMethodIds.mockReturnValue( [
+			PAYMENT_METHOD_LINK,
+			PAYMENT_METHOD_CARD,
+		] );
+		useEnabledPaymentMethodIds.mockReturnValue( [
+			[ PAYMENT_METHOD_LINK ],
+		] );
+		useIsOCEnabled.mockReturnValue( [ true, jest.fn() ] );
+
+		render( <PaymentRequestSection /> );
+
+		expect( screen.queryByText( 'Link by Stripe' ) ).toBeInTheDocument();
+	} );
+
 	it( 'test stripe link checkbox checked', () => {
 		useGetAvailablePaymentMethodIds.mockReturnValue( [
 			PAYMENT_METHOD_LINK,

client/settings/payment-request-section/index.js

@@ -13,6 +13,7 @@ import {
 	useAmazonPayEnabledSettings,
 	useEnabledPaymentMethodIds,
 	useGetAvailablePaymentMethodIds,
+	useIsOCEnabled,
 } from '../../data';
 import './styles.scss';
 import AmazonPayIcon from '../../payment-method-icons/amazon-pay';
@@ -41,6 +42,8 @@ const PaymentRequestSection = () => {
 		updateEnabledMethodIds,
 	] = useEnabledPaymentMethodIds();
 
+	const [ isOCEnabled ] = useIsOCEnabled();
+
 	const updateStripeLinkCheckout = ( isEnabled ) => {
 		// Add/remove Stripe Link from the list of enabled payment methods.
 		if ( isEnabled ) {
@@ -61,7 +64,7 @@ const PaymentRequestSection = () => {
 		PAYMENT_METHOD_CARD
 	);
 	const displayLinkPaymentMethod =
-		enabledMethodIds.includes( PAYMENT_METHOD_CARD ) &&
+		( enabledMethodIds.includes( PAYMENT_METHOD_CARD ) || isOCEnabled ) &&
 		availablePaymentMethodIds.includes( PAYMENT_METHOD_LINK );
 	const isStripeLinkEnabled = enabledMethodIds.includes(
 		PAYMENT_METHOD_LINK
@@ -96,6 +99,17 @@ const PaymentRequestSection = () => {
 								</div>
 							</li>
 						) }
+					{ ! displayExpressPaymentMethods &&
+						displayLinkPaymentMethod && (
+							<li className="express-checkout">
+								<div>
+									{ __(
+										'Credit card / debit card must be enabled as a payment method in order to use Google Pay and Apple Pay.',
+										'woocommerce-gateway-stripe'
+									) }
+								</div>
+							</li>
+						) }
 					{ displayExpressPaymentMethods && (
 						<li className="express-checkout has-icon-border">
 							<div className="express-checkout__checkbox">

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.9.0 - xxxx-xx-xx =
+* Fix - The availability of the Link payment method when the Optimized Checkout is enabled
 * Dev - Update Javascript unit tests for compatibility with Node 20
 * Dev - Replaces some payment method instantiation logic for the Optimized Checkout with calls to the `get_payment_method_instance` method
 * Dev - Multiple lint fixes in preparation for the Node 20 upgrade