Using filters to collect cart endpoint data using StoreAPI (#3840)

* Using filters to collect cart endpoint data using StoreAPI

* Fix product page ID retrieval

* Adding specific unit tests

* Changelog and readme entries

* Reverting part of the hooks since it is required by the legacy endpoint

---------

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

Author: 2 people

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.2.0 - xxxx-xx-xx =
+* Dev - Replaces part of the StoreAPI call code for the cart endpoints to use the newly introduced filter.
 * Dev - Add new E2E tests for Link express checkout.
 * Add - Add Amazon Pay to block cart and block checkout.
 * Fix - Remove intentional delay when displaying tax-related notice for express checkout, causing click event to time out.

client/blocks/express-checkout/hooks.js

@@ -15,6 +15,7 @@ import {
 	normalizeLineItems,
 } from 'wcstripe/express-checkout/utils';
 import 'wcstripe/express-checkout/compatibility/wc-order-attribution';
+import 'wcstripe/express-checkout/compatibility/wc-product-page';
 
 export const useExpressCheckout = ( {
 	api,

client/entrypoints/express-checkout/index.js

@@ -11,8 +11,8 @@ import {
 	getExpressCheckoutButtonAppearance,
 	getExpressCheckoutButtonStyleSettings,
 	getExpressCheckoutData,
-	isManualPaymentMethodCreation,
 	getPaymentMethodTypesForExpressMethod,
+	isManualPaymentMethodCreation,
 	normalizeLineItems,
 } from 'wcstripe/express-checkout/utils';
 import {
@@ -28,6 +28,7 @@ import {
 import { getStripeServerData } from 'wcstripe/stripe-utils';
 import { getAddToCartVariationParams } from 'wcstripe/utils';
 import 'wcstripe/express-checkout/compatibility/wc-order-attribution';
+import 'wcstripe/express-checkout/compatibility/wc-product-page';
 import './styles.scss';
 import {
 	EXPRESS_PAYMENT_METHOD_SETTING_AMAZON_PAY,
@@ -527,27 +528,12 @@ jQuery( function ( $ ) {
 		addToCart: () => {
 			let productId = $( '.single_add_to_cart_button' ).val();
 
-			// Check if product is a variable product.
-			if ( $( '.single_variation_wrap' ).length ) {
-				productId = $( '.single_variation_wrap' )
-					.find( 'input[name="product_id"]' )
-					.val();
-			}
-
-			if ( $( '.wc-bookings-booking-form' ).length ) {
-				productId = $( '.wc-booking-product-id' ).val();
-			}
-
 			const data = {
 				qty: $( quantityInputSelector ).val(),
 			};
 
-			if ( useLegacyCartEndpoints ) {
-				data.product_id = productId;
-				data.attributes = wcStripeECE.getAttributes().data;
-			} else {
-				data.id = productId;
-				data.variation = [];
+			if ( $( '.wc-bookings-booking-form' ).length ) {
+				productId = $( '.wc-booking-product-id' ).val();
 			}
 
 			// Add extension data to the POST body
@@ -570,10 +556,18 @@ jQuery( function ( $ ) {
 				}
 			} );
 
+			// Legacy support for variations.
 			if ( useLegacyCartEndpoints ) {
+				data.product_id = productId;
+				data.attributes = wcStripeECE.getAttributes().data;
+
 				return api.expressCheckoutAddToCartLegacy( data );
 			}
 
+			// BlocksAPI partial support (lacking support for variations).
+			data.id = productId;
+			data.variation = [];
+
 			return api.expressCheckoutAddToCart( data );
 		},
 

client/express-checkout/compatibility/__tests__/wc-product-page.test.js

@@ -0,0 +1,25 @@
+import { applyFilters } from '@wordpress/hooks';
+import { render } from '@testing-library/react';
+import 'wcstripe/express-checkout/compatibility/wc-product-page';
+
+describe( 'ECE product page compatibility', () => {
+	describe( 'filters out data when adding item to the cart', () => {
+		it( 'single variation form is present', () => {
+			function App() {
+				return (
+					<div className="single_variation_wrap">
+						<input name="product_id" defaultValue="123" />
+					</div>
+				);
+			}
+			render( <App /> );
+
+			const cartAddItemData = applyFilters(
+				'wcstripe.express-checkout.cart-add-item',
+				{}
+			);
+
+			expect( cartAddItemData ).toStrictEqual( { id: 123 } );
+		} );
+	} );
+} );

client/express-checkout/compatibility/wc-order-attribution.js

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import { addFilter } from '@wordpress/hooks';
 import { extractOrderAttributionData } from 'wcstripe/blocks/utils';
 

client/express-checkout/compatibility/wc-product-page.js

@@ -0,0 +1,24 @@
+import jQuery from 'jquery';
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Sets the product ID when using the BlocksAPI and single variation form is present.
+ */
+addFilter(
+	'wcstripe.express-checkout.cart-add-item',
+	'automattic/wcstripe/express-checkout',
+	( productData ) => {
+		const $variationInformation = jQuery( '.single_variation_wrap' );
+		if ( ! $variationInformation.length ) {
+			return productData;
+		}
+
+		const productId = $variationInformation
+			.find( 'input[name="product_id"]' )
+			.val();
+		return {
+			...productData,
+			id: parseInt( productId, 10 ),
+		};
+	}
+);

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.2.0 - xxxx-xx-xx =
+* Dev - Replaces part of the StoreAPI call code for the cart endpoints to use the newly introduced filter.
 * Dev - Add new E2E tests for Link express checkout.
 * Add - Add Amazon Pay to block cart and block checkout.
 * Fix - Remove intentional delay when displaying tax-related notice for express checkout, causing click event to time out.