Merge branch 'develop' into tweak/improve-error-messages

woocommerce · Nov 11, 2024 · 3eb99cc · 3eb99cc
2 parents c1285ea + 09caab4
commit 3eb99cc
Show file tree

Hide file tree

Showing 16 changed files with 216 additions and 91 deletions.
diff --git a/changelog.txt b/changelog.txt
@@ -2,6 +2,8 @@
 
 = 8.9.0 - xxxx-xx-xx =
 * Tweak - Improve error message displayed when payment method creation fails in classic checkout.
+* Dev - Replace two occurrences of payment method names with their constant equivalents.
+* Fix - Hide express checkout when credit card payments are not enabled.
 * Fix - Fix issues when detaching payment methods on staging sites (with the new checkout experience enabled).
 * Fix - Display a notice if taxes vary by customer's billing address when checking out using the Stripe Express Checkout Element.
 * Tweak - Makes the new Stripe Express Checkout Element enabled by default.
@@ -22,6 +24,8 @@
 * Tweak - Remove the subscription order notes added each time a source wasn't migrated.
 * Tweak - Update ECE default button type.
 * Fix - Fix position of ECE button on shortcode cart page.
+* Fix - Call ECE specific 'paymentFailed' function only when payment request fails.
+* Fix - Fix issue in purchasing subscriptions when the store has no shipping options.
 
 = 8.8.2 - 2024-11-07 =
 * Fix - Prevent marking renewal orders as processing/completed multiple times due to handling the Stripe webhook in parallel.

diff --git a/client/blocks/express-checkout/express-checkout-container.js b/client/blocks/express-checkout/express-checkout-container.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import { Elements } from '@stripe/react-stripe-js';
 import ExpressCheckoutComponent from './express-checkout-component';
-import { getPaymentMethodTypesForExpressMethod } from 'wcstripe/express-checkout/utils';
+import {
+	getExpressCheckoutButtonAppearance,
+	getExpressCheckoutData,
+	getPaymentMethodTypesForExpressMethod,
+} from 'wcstripe/express-checkout/utils';
 
 export const ExpressCheckoutContainer = ( props ) => {
 	const { stripe, billing, expressPaymentMethod } = props;
@@ -13,6 +17,8 @@ export const ExpressCheckoutContainer = ( props ) => {
 		paymentMethodTypes: getPaymentMethodTypesForExpressMethod(
 			expressPaymentMethod
 		),
+		appearance: getExpressCheckoutButtonAppearance(),
+		locale: getExpressCheckoutData( 'stripe' )?.locale ?? 'en',
 	};
 
 	return (

diff --git a/client/blocks/express-checkout/hooks.js b/client/blocks/express-checkout/hooks.js
@@ -39,8 +39,10 @@ export const useExpressCheckout = ( {
 		window.location = redirectUrl;
 	};
 
-	const abortPayment = ( onConfirmEvent, message ) => {
-		onConfirmEvent.paymentFailed( { reason: 'fail' } );
+	const abortPayment = ( onConfirmEvent, message, isOrderError = false ) => {
+		if ( ! isOrderError ) {
+			onConfirmEvent.paymentFailed( { reason: 'fail' } );
+		}
 		setExpressPaymentError( message );
 		onAbortPaymentHandler( onConfirmEvent, message );
 	};

diff --git a/client/blocks/express-checkout/index.js b/client/blocks/express-checkout/index.js
@@ -25,6 +25,10 @@ const expressCheckoutElementsGooglePay = ( api ) => ( {
 	),
 	edit: <GooglePayPreview />,
 	canMakePayment: ( { cart } ) => {
+		if ( ! getBlocksConfiguration()?.shouldShowExpressCheckoutButton ) {
+			return false;
+		}
+
 		// eslint-disable-next-line camelcase
 		if ( typeof wc_stripe_express_checkout_params === 'undefined' ) {
 			return false;
@@ -53,6 +57,10 @@ const expressCheckoutElementsApplePay = ( api ) => ( {
 	),
 	edit: <ApplePayPreview />,
 	canMakePayment: ( { cart } ) => {
+		if ( ! getBlocksConfiguration()?.shouldShowExpressCheckoutButton ) {
+			return false;
+		}
+
 		// eslint-disable-next-line camelcase
 		if ( typeof wc_stripe_express_checkout_params === 'undefined' ) {
 			return false;
@@ -80,6 +88,10 @@ const expressCheckoutElementsStripeLink = ( api ) => ( {
 	),
 	edit: <StripeLinkPreview />,
 	canMakePayment: ( { cart } ) => {
+		if ( ! getBlocksConfiguration()?.shouldShowExpressCheckoutButton ) {
+			return false;
+		}
+
 		// eslint-disable-next-line camelcase
 		if ( typeof wc_stripe_express_checkout_params === 'undefined' ) {
 			return false;

diff --git a/client/entrypoints/express-checkout/index.js b/client/entrypoints/express-checkout/index.js
@@ -132,6 +132,7 @@ jQuery( function ( $ ) {
 				currency: options.currency,
 				paymentMethodCreation: 'manual',
 				appearance: getExpressCheckoutButtonAppearance(),
+				locale: getExpressCheckoutData( 'stripe' )?.locale ?? 'en',
 				paymentMethodTypes: getExpressPaymentMethodTypes(),
 			} );
 
@@ -289,6 +290,7 @@ jQuery( function ( $ ) {
 					currency: getExpressCheckoutData( 'checkout' )
 						.currency_code,
 					appearance: getExpressCheckoutButtonAppearance(),
+					locale: getExpressCheckoutData( 'stripe' )?.locale ?? 'en',
 					displayItems,
 					order,
 				} );
@@ -466,9 +468,12 @@ jQuery( function ( $ ) {
 		 *
 		 * @param {PaymentResponse} payment Payment response instance.
 		 * @param {string} message Error message to display.
+		 * @param {boolean} isOrderError Whether the error is related to the order creation.
 		 */
-		abortPayment: ( payment, message ) => {
-			payment.paymentFailed( { reason: 'fail' } );
+		abortPayment: ( payment, message, isOrderError = false ) => {
+			if ( ! isOrderError ) {
+				payment.paymentFailed( { reason: 'fail' } );
+			}
 			onAbortPaymentHandler( payment, message );
 
 			displayExpressCheckoutNotice( message, 'error' );

diff --git a/client/express-checkout/__tests__/event-handler.test.js b/client/express-checkout/__tests__/event-handler.test.js
@@ -340,7 +340,8 @@ describe( 'Express checkout event handlers', () => {
 			);
 			expect( abortPayment ).toHaveBeenCalledWith(
 				event,
-				'Order creation error'
+				'Order creation error',
+				true
 			);
 			expect( completePayment ).not.toHaveBeenCalled();
 		} );
@@ -467,7 +468,8 @@ describe( 'Express checkout event handlers', () => {
 			);
 			expect( abortPayment ).toHaveBeenCalledWith(
 				event,
-				'Order creation error'
+				'Order creation error',
+				true
 			);
 			expect( completePayment ).not.toHaveBeenCalled();
 		} );

diff --git a/client/express-checkout/event-handler.js b/client/express-checkout/event-handler.js
@@ -92,7 +92,8 @@ export const onConfirmHandler = async (
 		if ( orderResponse.result !== 'success' ) {
 			return abortPayment(
 				event,
-				getErrorMessageFromNotice( orderResponse.messages )
+				getErrorMessageFromNotice( orderResponse.messages ),
+				true
 			);
 		}
 

diff --git a/client/settings/payment-request-section/index.js b/client/settings/payment-request-section/index.js
@@ -40,6 +40,7 @@ const PaymentRequestSection = () => {
 		}
 	};
 
+	const displayExpressPaymentMethods = enabledMethodIds.includes( 'card' );
 	const displayLinkPaymentMethod =
 		enabledMethodIds.includes( 'card' ) &&
 		availablePaymentMethodIds.includes( linkMethodID );
@@ -53,70 +54,83 @@ const PaymentRequestSection = () => {
 		<Card className="express-checkouts">
 			<CardBody size={ 0 }>
 				<ul className="express-checkouts-list">
-					<li className="express-checkout has-icon-border">
-						<div className="express-checkout__checkbox">
-							<CheckboxControl
-								checked={ isPaymentRequestEnabled }
-								onChange={ updateIsPaymentRequestEnabled }
-							/>
-						</div>
-						<div className="express-checkout__icon">
-							<PaymentRequestIcon size="medium" />
-						</div>
-						<div className="express-checkout__label-container">
-							<div className="express-checkout__label">
-								{ __(
-									'Apple Pay / Google Pay',
-									'woocommerce-gateway-stripe'
-								) }
+					{ ! displayExpressPaymentMethods &&
+						! displayLinkPaymentMethod && (
+							<li className="express-checkout">
+								<div>
+									{ __(
+										'Credit card / debit card must be enabled as a payment method in order to use Express Checkout.',
+										'woocommerce-gateway-stripe'
+									) }
+								</div>
+							</li>
+						) }
+					{ displayExpressPaymentMethods && (
+						<li className="express-checkout has-icon-border">
+							<div className="express-checkout__checkbox">
+								<CheckboxControl
+									checked={ isPaymentRequestEnabled }
+									onChange={ updateIsPaymentRequestEnabled }
+								/>
 							</div>
-							<div className="express-checkout__description">
-								{
-									/* eslint-disable jsx-a11y/anchor-has-content */
-									interpolateComponents( {
-										mixedString: __(
-											'Boost sales by offering a fast, simple, and secure checkout experience.' +
-												'By enabling this feature, you agree to {{stripeLink}}Stripe{{/stripeLink}}, ' +
-												"{{appleLink}}Apple{{/appleLink}}, and {{googleLink}}Google{{/googleLink}}'s terms of use.",
-											'woocommerce-gateway-stripe'
-										),
-										components: {
-											stripeLink: (
-												<a
-													target="_blank"
-													rel="noreferrer"
-													href="https://stripe.com/apple-pay/legal"
-												/>
-											),
-											appleLink: (
-												<a
-													target="_blank"
-													rel="noreferrer"
-													href="https://developer.apple.com/apple-pay/acceptable-use-guidelines-for-websites/"
-												/>
-											),
-											googleLink: (
-												<a
-													target="_blank"
-													rel="noreferrer"
-													href="https://androidpay.developers.google.com/terms/sellertos"
-												/>
+							<div className="express-checkout__icon">
+								<PaymentRequestIcon size="medium" />
+							</div>
+							<div className="express-checkout__label-container">
+								<div className="express-checkout__label">
+									{ __(
+										'Apple Pay / Google Pay',
+										'woocommerce-gateway-stripe'
+									) }
+								</div>
+								<div className="express-checkout__description">
+									{
+										/* eslint-disable jsx-a11y/anchor-has-content */
+										interpolateComponents( {
+											mixedString: __(
+												'Boost sales by offering a fast, simple, and secure checkout experience.' +
+													'By enabling this feature, you agree to {{stripeLink}}Stripe{{/stripeLink}}, ' +
+													"{{appleLink}}Apple{{/appleLink}}, and {{googleLink}}Google{{/googleLink}}'s terms of use.",
+												'woocommerce-gateway-stripe'
 											),
-										},
-									} )
-									/* eslint-enable jsx-a11y/anchor-has-content */
-								}
+											components: {
+												stripeLink: (
+													<a
+														target="_blank"
+														rel="noreferrer"
+														href="https://stripe.com/apple-pay/legal"
+													/>
+												),
+												appleLink: (
+													<a
+														target="_blank"
+														rel="noreferrer"
+														href="https://developer.apple.com/apple-pay/acceptable-use-guidelines-for-websites/"
+													/>
+												),
+												googleLink: (
+													<a
+														target="_blank"
+														rel="noreferrer"
+														href="https://androidpay.developers.google.com/terms/sellertos"
+													/>
+												),
+											},
+										} )
+										/* eslint-enable jsx-a11y/anchor-has-content */
+									}
+								</div>
 							</div>
-						</div>
-						<div className="express-checkout__link">
-							<a href={ customizeAppearanceURL }>
-								{ __(
-									'Customize',
-									'woocommerce-gateway-stripe'
-								) }
-							</a>
-						</div>
-					</li>
+							<div className="express-checkout__link">
+								<a href={ customizeAppearanceURL }>
+									{ __(
+										'Customize',
+										'woocommerce-gateway-stripe'
+									) }
+								</a>
+							</div>
+						</li>
+					) }
 					{ displayLinkPaymentMethod && (
 						<li className="express-checkout has-icon-border">
 							<div className="express-checkout__checkbox loadable-checkbox label-hidden">

diff --git a/includes/class-wc-stripe-blocks-support.php b/includes/class-wc-stripe-blocks-support.php
@@ -188,13 +188,14 @@ public function get_payment_method_data() {
 			$js_params,
 			// Blocks-specific options
 			[
-				'icons'                          => $this->get_icons(),
-				'supports'                       => $this->get_supported_features(),
-				'showSavedCards'                 => $this->get_show_saved_cards(),
-				'showSaveOption'                 => $this->get_show_save_option(),
-				'isAdmin'                        => is_admin(),
-				'shouldShowPaymentRequestButton' => $this->should_show_payment_request_button(),
-				'button'                         => [
+				'icons'                           => $this->get_icons(),
+				'supports'                        => $this->get_supported_features(),
+				'showSavedCards'                  => $this->get_show_saved_cards(),
+				'showSaveOption'                  => $this->get_show_save_option(),
+				'isAdmin'                         => is_admin(),
+				'shouldShowPaymentRequestButton'  => $this->should_show_payment_request_button(),
+				'shouldShowExpressCheckoutButton' => $this->should_show_express_checkout_button(),
+				'button'                          => [
 					'customLabel' => $this->payment_request_configuration->get_button_label(),
 				],
 			]
@@ -255,10 +256,15 @@ private function should_show_payment_request_button() {
 	 * @return boolean True if ECEs should be displayed, false otherwise.
 	 */
 	private function should_show_express_checkout_button() {
+		// Don't show if ECEs are turned off in settings.
+		if ( ! $this->express_checkout_configuration->express_checkout_helper->is_express_checkout_enabled() ) {
+			return false;
+		}
+
 		// Don't show if ECEs are supposed to be hidden on the cart page.
 		if (
 			has_block( 'woocommerce/cart' )
-			&& ! $this->express_checkout_configuration->express_checkout_helper->should_show_ece_on_cart_page()()
+			&& ! $this->express_checkout_configuration->express_checkout_helper->should_show_ece_on_cart_page()
 		) {
 			return false;
 		}