Removing the change display order feature for OC (#4453)

* Removing the change display order feature for OC

* Changelog and readme entries

* Unit tests

* Fix option not refreshing

* Fix tests

* Removing unnecessary parameter

---------

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

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.6.0 - xxxx-xx-xx =
+* Update - Removes the change display order feature from the settings page when the Optimized Checkout is enabled
 * Update - Removes the customization of individual payment method titles and descriptions
 * Fix - Fixes some inconsistencies related to the Optimized Checkout feature and improves its unit tests
 * Add - Introduces a new marketing note to promote BNPLs (Buy Now Pay Later) payment methods (Klarna and Affirm) on WooCommerce admin home page

client/settings/general-settings-section/__tests__/general-settings-section.test.js

@@ -8,6 +8,7 @@ import {
 	useEnabledPaymentMethodIds,
 	useGetAvailablePaymentMethodIds,
 	useManualCapture,
+	useIsOCEnabled,
 	useGetOrderedPaymentMethodIds,
 } from 'wcstripe/data';
 import { usePaymentMethodCurrencies } from 'utils/use-payment-method-currencies';
@@ -28,6 +29,7 @@ jest.mock( 'wcstripe/data', () => ( {
 	useManualCapture: jest.fn(),
 	useIndividualPaymentMethodSettings: jest.fn(),
 	useCustomizePaymentMethodSettings: jest.fn(),
+	useIsOCEnabled: jest.fn(),
 	useGetOrderedPaymentMethodIds: jest.fn(),
 } ) );
 jest.mock( 'utils/use-payment-method-currencies', () => ( {
@@ -75,6 +77,7 @@ describe( 'GeneralSettingsSection', () => {
 			data: { testmode: false },
 		} );
 		useIsStripeEnabled.mockReturnValue( [ false, jest.fn() ] );
+		useIsOCEnabled.mockReturnValue( [ false, jest.fn() ] );
 		useGetOrderedPaymentMethodIds.mockReturnValue( {
 			orderedPaymentMethodIds: [
 				PAYMENT_METHOD_CARD,

client/settings/general-settings-section/__tests__/section-heading.test.js

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { expect } from '@playwright/test';
+import SectionHeading from 'wcstripe/settings/general-settings-section/section-heading';
+import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
+import { useIsOCEnabled, useGetOrderedPaymentMethodIds } from 'wcstripe/data';
+import { PAYMENT_METHOD_CARD } from 'wcstripe/stripe-utils/constants';
+import { useAccount } from 'wcstripe/data/account';
+
+jest.mock( '@woocommerce/navigation', () => ( {
+	getQuery: jest.fn().mockReturnValue( {} ),
+} ) );
+
+jest.mock( 'wcstripe/data', () => ( {
+	useIsOCEnabled: jest.fn(),
+	useGetOrderedPaymentMethodIds: jest.fn(),
+} ) );
+
+jest.mock( 'wcstripe/data/account', () => ( {
+	useAccount: jest.fn(),
+} ) );
+
+describe( 'SectionHeading', () => {
+	beforeEach( () => {
+		useIsOCEnabled.mockReturnValue( [ false, jest.fn() ] );
+		useGetOrderedPaymentMethodIds.mockReturnValue( {
+			orderedPaymentMethodIds: [ PAYMENT_METHOD_CARD ],
+			isSaving: false,
+			saveOrderedPaymentMethodIds: jest.fn(),
+		} );
+		useAccount.mockReturnValue( {
+			refreshAccount: jest.fn(),
+		} );
+	} );
+
+	it( 'default display', () => {
+		const { getByText, getByLabelText } = render(
+			<UpeToggleContext.Provider value={ { isUpeEnabled: true } }>
+				<SectionHeading isChangingDisplayOrder={ false } />
+			</UpeToggleContext.Provider>
+		);
+
+		expect( getByText( 'Payment methods' ) ).toBeInTheDocument();
+		expect( getByText( 'Change display order' ) ).toBeInTheDocument();
+		expect( getByLabelText( 'Payment methods menu' ) ).toBeInTheDocument();
+	} );
+
+	it( 'is changing display order', () => {
+		const { getByText } = render(
+			<UpeToggleContext.Provider value={ { isUpeEnabled: true } }>
+				<SectionHeading isChangingDisplayOrder={ true } />
+			</UpeToggleContext.Provider>
+		);
+
+		expect( getByText( 'Payment methods' ) ).toBeInTheDocument();
+		expect( getByText( 'Cancel' ) ).toBeInTheDocument();
+		expect( getByText( 'Save display order' ) ).toBeInTheDocument();
+
+		expect(
+			screen.queryByText( 'Change display order' )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText( 'Payment methods menu' )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'OC is enabled', () => {
+		useIsOCEnabled.mockReturnValue( [ true, jest.fn() ] );
+
+		const { getByText, getByLabelText } = render(
+			<UpeToggleContext.Provider value={ { isUpeEnabled: true } }>
+				<SectionHeading isChangingDisplayOrder={ false } />
+			</UpeToggleContext.Provider>
+		);
+
+		expect( getByText( 'Payment methods' ) ).toBeInTheDocument();
+		expect( getByLabelText( 'Payment methods menu' ) ).toBeInTheDocument();
+
+		expect(
+			screen.queryByText( 'Change display order' )
+		).not.toBeInTheDocument();
+	} );
+} );

client/settings/general-settings-section/section-heading.js

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { Button, CardHeader, DropdownMenu } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { useAccount } from 'wcstripe/data/account';
-import { useGetOrderedPaymentMethodIds } from 'wcstripe/data';
+import { useGetOrderedPaymentMethodIds, useIsOCEnabled } from 'wcstripe/data';
 import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
 
 const StyledHeader = styled( CardHeader )`
@@ -48,6 +48,7 @@ const ActionItems = styled.div`
 `;
 
 const SectionHeading = ( { isChangingDisplayOrder, onChangeDisplayOrder } ) => {
+	const [ isOCEnabled ] = useIsOCEnabled();
 	const { isUpeEnabled } = useContext( UpeToggleContext );
 	const {
 		orderedPaymentMethodIds,
@@ -76,15 +77,22 @@ const SectionHeading = ( { isChangingDisplayOrder, onChangeDisplayOrder } ) => {
 			<ActionItems>
 				{ ! isChangingDisplayOrder ? (
 					<>
-						<Button
-							variant="tertiary"
-							onClick={ () => onChangeDisplayOrder( true ) }
-						>
-							{ __(
-								'Change display order',
-								'woocommerce-gateway-stripe'
-							) }
-						</Button>
+						{
+							// eslint-disable-next-line camelcase
+							! isOCEnabled && (
+								<Button
+									variant="tertiary"
+									onClick={ () =>
+										onChangeDisplayOrder( true )
+									}
+								>
+									{ __(
+										'Change display order',
+										'woocommerce-gateway-stripe'
+									) }
+								</Button>
+							)
+						}
 						{ isUpeEnabled && (
 							<DropdownMenu
 								data-testid="upe-expandable-menu"

readme.txt

@@ -112,6 +112,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 
 = 9.6.0 - xxxx-xx-xx =
 
+* Update - Removes the change display order feature from the settings page when the Optimized Checkout is enabled
 * Update - Removes the customization of individual payment method titles and descriptions
 * Fix - Fixes some inconsistencies related to the Optimized Checkout feature and improves its unit tests
 * Add - Introduces a new marketing note to promote BNPLs (Buy Now Pay Later) payment methods (Klarna and Affirm) on WooCommerce admin home page