Default express checkout button label to "Only icon" (#9429)

Author: rafaelzaleski

changelog/fix-9332-default-express-buttons-only-icon

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Default express checkout button label to "Only icon".

client/settings/express-checkout-settings/general-payment-request-button-settings.js

@@ -199,7 +199,7 @@ const GeneralPaymentRequestButtonSettings = ( { type } ) => {
 				className="payment-method-settings__cta-selection"
 				label={ __( 'Call to action', 'woocommerce-payments' ) }
 				help={ __(
-					'Select a button label that fits best wit the flow of purchase or payment experience on your store.',
+					'Select a button label that fits best with the flow of purchase or payment experience on your store.',
 					'woocommerce-payments'
 				) }
 				hideLabelFromVision

client/settings/express-checkout-settings/test/index.js

@@ -23,7 +23,7 @@ jest.mock( '../../../data', () => ( {
 	useWooPayEnabledSettings: jest.fn().mockReturnValue( [ true, jest.fn() ] ),
 	useWooPayCustomMessage: jest.fn().mockReturnValue( [ 'test', jest.fn() ] ),
 	useWooPayStoreLogo: jest.fn().mockReturnValue( [ 'test', jest.fn() ] ),
-	usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
+	usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'default' ] ),
 	usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'small' ] ),
 	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
 	usePaymentRequestButtonBorderRadius: jest.fn().mockReturnValue( [ 4 ] ),

client/settings/express-checkout-settings/test/payment-request-settings.test.js

@@ -23,7 +23,7 @@ import {
 jest.mock( '../../../data', () => ( {
 	usePaymentRequestEnabledSettings: jest.fn(),
 	usePaymentRequestLocations: jest.fn(),
-	usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'buy' ] ),
+	usePaymentRequestButtonType: jest.fn().mockReturnValue( [ 'default' ] ),
 	usePaymentRequestButtonBorderRadius: jest.fn().mockReturnValue( [ 4 ] ),
 	usePaymentRequestButtonSize: jest.fn().mockReturnValue( [ 'small' ] ),
 	usePaymentRequestButtonTheme: jest.fn().mockReturnValue( [ 'dark' ] ),
@@ -148,7 +148,7 @@ describe( 'PaymentRequestSettings', () => {
 			screen.getByRole( 'combobox', {
 				name: 'Call to action',
 			} )
-		).toHaveValue( 'buy' );
+		).toHaveValue( 'default' );
 		expect( screen.getByLabelText( 'Small (40 px)' ) ).toBeChecked();
 		expect( screen.getByLabelText( /Dark/ ) ).toBeChecked();
 	} );
@@ -189,7 +189,7 @@ describe( 'PaymentRequestSettings', () => {
 		const setButtonThemeMock = jest.fn();
 
 		usePaymentRequestButtonType.mockReturnValue( [
-			'buy',
+			'default',
 			setButtonTypeMock,
 		] );
 		usePaymentRequestButtonSize.mockReturnValue( [

client/settings/express-checkout-settings/test/woopay-settings.test.js

@@ -93,7 +93,7 @@ describe( 'WooPaySettings', () => {
 		);
 
 		usePaymentRequestButtonType.mockReturnValue(
-			getMockPaymentRequestButtonType( [ 'buy' ], jest.fn() )
+			getMockPaymentRequestButtonType( [ 'default' ], jest.fn() )
 		);
 
 		usePaymentRequestButtonSize.mockReturnValue(

client/tokenized-payment-request/test/payment-request.test.js

@@ -71,7 +71,7 @@ describe( 'WooPaymentsPaymentRequest', () => {
 				currency_code: 'usd',
 			},
 			total_label: 'wcpay.test (via WooCommerce)',
-			button: { type: 'buy', theme: 'dark', height: '48' },
+			button: { type: 'default', theme: 'dark', height: '48' },
 		};
 		wcpayApi = {
 			getStripe: () => ( {

includes/class-wc-payment-gateway-wcpay.php

@@ -401,7 +401,7 @@ public function __construct(
 				'title'       => __( 'Button type', 'woocommerce-payments' ),
 				'type'        => 'select',
 				'description' => __( 'Select the button type you would like to show.', 'woocommerce-payments' ),
-				'default'     => 'buy',
+				'default'     => 'default',
 				'desc_tip'    => true,
 				'options'     => [
 					'default' => __( 'Only icon', 'woocommerce-payments' ),

tests/unit/admin/test-class-wc-rest-payments-settings-controller.php

@@ -550,7 +550,7 @@ public function test_update_settings_saves_payment_request_button_size() {
 	}
 
 	public function test_update_settings_saves_payment_request_button_type() {
-		$this->assertEquals( 'buy', $this->gateway->get_option( 'payment_request_button_type' ) );
+		$this->assertEquals( 'default', $this->gateway->get_option( 'payment_request_button_type' ) );
 
 		$request = new WP_REST_Request();
 		$request->set_param( 'payment_request_button_type', 'book' );

tests/unit/test-class-wc-payments-express-checkout-button-helper.php

@@ -190,7 +190,7 @@ private function make_wcpay_gateway() {
 	public function test_common_get_button_settings() {
 		$this->assertEquals(
 			[
-				'type'   => 'buy',
+				'type'   => 'default',
 				'theme'  => 'dark',
 				'height' => '48',
 				'radius' => '',

tests/unit/test-class-wc-payments-payment-request-button-handler.php

@@ -802,11 +802,11 @@ public function test_get_button_settings() {
 
 		$this->assertEquals(
 			[
-				'type'         => 'buy',
+				'type'         => 'default',
 				'theme'        => 'dark',
 				'height'       => '48',
 				'locale'       => 'en',
-				'branded_type' => 'long',
+				'branded_type' => 'short',
 				'radius'       => '',
 			],
 			$this->pr->get_button_settings()