Merge branch 'develop' into fix/ece-load-error

changelog.txt

@@ -2,6 +2,7 @@
 
 = 9.2.0 - xxxx-xx-xx =
 * Fix - Prevent an express checkout element's load errors from affecting other express checkout elements.
+* Tweak - Process ECE cart requests using the Blocks (Store) API. 
 * Add - Adds a new setting to toggle saving of Bancontact and iDEAL methods as SEPA Debit.
 * Add - Wrap Amazon Pay in feature flag.
 * Fix - Allow the saving of Bancontact tokens when SEPA is disabled.

client/api/index.js

@@ -1,6 +1,7 @@
 /* global Stripe */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
+import { applyFilters } from '@wordpress/hooks';
 import {
 	getExpressCheckoutData,
 	getExpressCheckoutAjaxURL,
@@ -496,11 +497,83 @@ export default class WCStripeAPI {
 	 * @return {Promise} Promise for the request to the server.
 	 */
 	expressCheckoutGetCartDetails() {
+		return apiFetch( {
+			method: 'GET',
+			path: '/wc/store/v1/cart',
+			security: getExpressCheckoutData( 'nonce' )?.wc_store_api,
+		} );
+	}
+
+	/**
+	 * Get cart items and total amount (legacy version, non-StoreAPI).
+	 *
+	 * @todo Remove this once WC 9.7.0 is the min. required version.
+	 *
+	 * @return {Promise} Promise for the request to the server.
+	 */
+	expressCheckoutGetCartDetailsLegacy() {
 		return this.request( getExpressCheckoutAjaxURL( 'get_cart_details' ), {
 			security: getExpressCheckoutData( 'nonce' )?.get_cart_details,
 		} );
 	}
 
+	/**
+	 * Add product to cart from product page.
+	 *
+	 * @param {Object} productData Product data.
+	 * @return {Promise} Promise for the request to the server.
+	 */
+	expressCheckoutAddToCart( productData ) {
+		const data = applyFilters(
+			'wcstripe.express-checkout.cart-add-item',
+			productData
+		);
+		return this.postToBlocksAPI( '/wc/store/v1/cart/add-item', data );
+	}
+
+	/**
+	 * Add product to cart from product page (legacy version, non-StoreAPI).
+	 *
+	 * @todo Remove this once WC 9.7.0 is the min. required version.
+	 *
+	 * @param {Object} productData Product data.
+	 * @return {Promise} Promise for the request to the server.
+	 */
+	expressCheckoutAddToCartLegacy( productData ) {
+		return this.request( getExpressCheckoutAjaxURL( 'add_to_cart' ), {
+			security: getExpressCheckoutData( 'nonce' )?.add_to_cart,
+			...productData,
+		} );
+	}
+
+	/**
+	 * Empty the cart.
+	 *
+	 * @param {number} bookingId Booking ID.
+	 * @return {Promise} Promise for the request to the server.
+	 */
+	async expressCheckoutEmptyCart( bookingId ) {
+		try {
+			const cartData = await apiFetch( {
+				method: 'GET',
+				path: '/wc/store/v1/cart',
+				headers: {
+					Nonce: getExpressCheckoutData( 'nonce' )?.wc_store_api,
+				},
+			} );
+			const removeItemsPromises = cartData.items.map( ( item ) => {
+				return this.postToBlocksAPI( '/wc/store/v1/cart/remove-item', {
+					key: item.key,
+					booking_id: bookingId,
+				} );
+			} );
+
+			await Promise.all( removeItemsPromises );
+		} catch ( e ) {
+			// let's ignore the error, it's likely not going to be relevant.
+		}
+	}
+
 	/**
 	 * Creates order based on Express Checkout ECE payment method.
 	 *
@@ -546,19 +619,6 @@ export default class WCStripeAPI {
 		} );
 	}
 
-	/**
-	 * Add product to cart from product page.
-	 *
-	 * @param {Object} productData Product data.
-	 * @return {Promise} Promise for the request to the server.
-	 */
-	expressCheckoutAddToCart( productData ) {
-		return this.request( getExpressCheckoutAjaxURL( 'add_to_cart' ), {
-			security: getExpressCheckoutData( 'nonce' )?.add_to_cart,
-			...productData,
-		} );
-	}
-
 	/**
 	 * Get selected product data from variable product page.
 	 *
@@ -575,17 +635,4 @@ export default class WCStripeAPI {
 			}
 		);
 	}
-
-	/**
-	 * Empty the cart.
-	 *
-	 * @param {number} bookingId Booking ID.
-	 * @return {Promise} Promise for the request to the server.
-	 */
-	expressCheckoutEmptyCart( bookingId ) {
-		return this.request( getExpressCheckoutAjaxURL( 'clear_cart' ), {
-			security: getExpressCheckoutData( 'nonce' )?.clear_cart,
-			booking_id: bookingId,
-		} );
-	}
 }

client/entrypoints/express-checkout/index.js

@@ -10,9 +10,9 @@ import {
 	getExpressCheckoutButtonAppearance,
 	getExpressCheckoutButtonStyleSettings,
 	getExpressCheckoutData,
-	normalizeLineItems,
 	isManualPaymentMethodCreation,
 	getPaymentMethodTypesForExpressMethod,
+	normalizeLineItems,
 } from 'wcstripe/express-checkout/utils';
 import {
 	onAbortPaymentHandler,
@@ -28,6 +28,11 @@ import { getStripeServerData } from 'wcstripe/stripe-utils';
 import { getAddToCartVariationParams } from 'wcstripe/utils';
 import 'wcstripe/express-checkout/compatibility/wc-order-attribution';
 import './styles.scss';
+import {
+	transformCartDataForDisplayItems,
+	transformLabeledDisplayItems,
+	transformPrice,
+} from 'wcstripe/express-checkout/transformers/wc-to-stripe';
 
 jQuery( function ( $ ) {
 	// Don't load if blocks checkout is being loaded.
@@ -61,6 +66,14 @@ jQuery( function ( $ ) {
 		'There was an error getting the product information.',
 		'woocommerce-gateway-stripe'
 	);
+
+	/**
+	 * @todo Using the legacy endpoint (non-StoreAPI) and data format when variations are present.
+	 * StoreAPI will support this form correctly only after WC 9.7.0.
+	 * See https://github.com/woocommerce/woocommerce-gateway-stripe/pull/3780#issuecomment-2632051359
+	 */
+	const useLegacyCartEndpoints = $( '.variations_form' ).length > 0;
+
 	const wcStripeECE = {
 		createButton: ( elements, options ) =>
 			elements.create( 'expressCheckout', options ),
@@ -124,9 +137,9 @@ jQuery( function ( $ ) {
 				return options.displayItems
 					.filter( ( i ) => i.key && i.key === 'total_shipping' )
 					.map( ( i ) => ( {
-						id: `rate-shipping`,
+						id: 'rate-shipping',
 						amount: i.amount,
-						displayName: i.label,
+						displayName: useLegacyCartEndpoints ? i.label : i.name,
 					} ) );
 			};
 
@@ -251,7 +264,9 @@ jQuery( function ( $ ) {
 				}
 
 				const clickOptions = {
-					lineItems: normalizeLineItems( options.displayItems ),
+					lineItems: useLegacyCartEndpoints
+						? normalizeLineItems( options.displayItems )
+						: options.displayItems,
 					emailRequired: true,
 					shippingAddressRequired: options.requestShipping,
 					phoneNumberRequired: options.requestPhone,
@@ -349,7 +364,9 @@ jQuery( function ( $ ) {
 						.currency_code,
 					appearance: getExpressCheckoutButtonAppearance(),
 					locale: getExpressCheckoutData( 'stripe' )?.locale ?? 'en',
-					displayItems,
+					displayItems: transformLabeledDisplayItems(
+						displayItems ?? []
+					),
 					order,
 					orderDetails,
 				} );
@@ -358,6 +375,8 @@ jQuery( function ( $ ) {
 					getExpressCheckoutData( 'product' )
 						?.validVariationSelected ?? true;
 				if ( isProductSupported ) {
+					const displayItems =
+						getExpressCheckoutData( 'product' ).displayItems ?? [];
 					wcStripeECE.startExpressCheckout( {
 						mode: 'payment',
 						total: getExpressCheckoutData( 'product' )?.total
@@ -369,22 +388,28 @@ jQuery( function ( $ ) {
 						requestPhone:
 							getExpressCheckoutData( 'checkout' )
 								?.needs_payer_phone ?? false,
-						displayItems: getExpressCheckoutData( 'product' )
-							.displayItems,
+						displayItems: useLegacyCartEndpoints
+							? displayItems
+							: transformLabeledDisplayItems( displayItems ),
 					} );
 				}
 			} else {
 				// Cart and Checkout page specific initialization.
 				api.expressCheckoutGetCartDetails().then( ( cart ) => {
+					const total = transformPrice(
+						parseInt( cart.totals.total_price, 10 ) -
+							parseInt( cart.totals.total_refund || 0, 10 ),
+						cart.totals
+					);
 					wcStripeECE.startExpressCheckout( {
 						mode: 'payment',
-						total: cart.order_data.total.amount,
+						total,
 						currency: getExpressCheckoutData( 'checkout' )
 							?.currency_code,
-						requestShipping: cart.shipping_required === true,
+						requestShipping: cart.needs_shipping === true,
 						requestPhone: getExpressCheckoutData( 'checkout' )
 							?.needs_payer_phone,
-						displayItems: cart.order_data.displayItems,
+						displayItems: transformCartDataForDisplayItems( cart ),
 					} );
 				} );
 			}
@@ -488,13 +513,17 @@ jQuery( function ( $ ) {
 			}
 
 			const data = {
-				product_id: productId,
 				qty: $( quantityInputSelector ).val(),
-				attributes: $( '.variations_form' ).length
-					? wcStripeECE.getAttributes().data
-					: [],
 			};
 
+			if ( useLegacyCartEndpoints ) {
+				data.product_id = productId;
+				data.attributes = wcStripeECE.getAttributes().data;
+			} else {
+				data.id = productId;
+				data.variation = [];
+			}
+
 			// Add extension data to the POST body
 			const formData = $( 'form.cart' ).serializeArray();
 			$.each( formData, ( i, field ) => {
@@ -515,6 +544,10 @@ jQuery( function ( $ ) {
 				}
 			} );
 
+			if ( useLegacyCartEndpoints ) {
+				return api.expressCheckoutAddToCartLegacy( data );
+			}
+
 			return api.expressCheckoutAddToCart( data );
 		},