ECE: support checkout order notes (#4279)

* Add support for order notes when using express checkout

* Add changelog and readme entries

Author: annemirasol

changelog.txt

@@ -23,6 +23,7 @@
 * Fix - Prevents fatal errors for cases where we fail to load product details
 * Fix - Address an edge case with webhook URL comparisons
 * Fix - Show correct gateway name in non payments settings pages.
+* Update - Add support for customer order notes and express checkout
 * Dev - Minor fix to e2e setup code
 * Dev - Make PHP error log from Docker container available in docker/logs/php/error.log
 

client/api/index.js

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { applyFilters } from '@wordpress/hooks';
 import {
+	getCustomerNote,
 	getExpressCheckoutData,
 	getExpressCheckoutAjaxURL,
 	getRequiredFieldDataFromCheckoutForm,
@@ -610,6 +611,7 @@ export default class WCStripeAPI {
 	expressCheckoutECECreateOrder( paymentData ) {
 		return this.postToBlocksAPI( '/wc/store/v1/checkout', {
 			...getRequiredFieldDataFromCheckoutForm( paymentData ),
+			customer_note: getCustomerNote(),
 		} );
 	}
 

client/express-checkout/utils/__tests__/normalize.test.js

@@ -178,7 +178,6 @@ describe( 'Express checkout normalization', () => {
 					postcode: '10001',
 					state: 'NY',
 				},
-				customer_note: undefined,
 				extensions: {},
 				payment_data: [
 					{
@@ -272,7 +271,6 @@ describe( 'Express checkout normalization', () => {
 					postcode: '',
 					state: '',
 				},
-				customer_note: undefined,
 				extensions: {},
 				payment_data: [
 					{
@@ -339,7 +337,6 @@ describe( 'Express checkout normalization', () => {
 					postcode: '',
 					state: '',
 				},
-				customer_note: undefined,
 				extensions: {},
 				payment_data: [
 					{

client/express-checkout/utils/index.js

@@ -171,6 +171,29 @@ export const getExpressCheckoutButtonStyleSettings = () => {
 	};
 };
 
+/**
+ * Get the customer note from the checkout form.
+ *
+ * @return {string} The customer note.
+ */
+export const getCustomerNote = () => {
+	const classicCheckoutOrderNotes = document.querySelector(
+		'form.checkout textarea[name="order_comments"]'
+	);
+	if ( classicCheckoutOrderNotes ) {
+		return classicCheckoutOrderNotes.value;
+	}
+
+	const blockCheckoutOrderNotes = document.querySelector(
+		'form.wc-block-checkout__form #order-notes textarea'
+	);
+	if ( blockCheckoutOrderNotes ) {
+		return blockCheckoutOrderNotes.value;
+	}
+
+	return '';
+};
+
 export const getRequiredFieldDataFromCheckoutForm = ( data ) => {
 	return getExpressCheckoutData( 'has_block' )
 		? getRequiredFieldDataFromBlockCheckoutForm( data )

client/express-checkout/utils/normalize.js

@@ -75,7 +75,6 @@ export const normalizeOrderData = ( {
 			postcode: shipping?.address?.postal_code ?? '',
 			method: [ event?.shippingRate?.id ?? null ],
 		},
-		customer_note: event?.order_comments,
 		payment_method: 'stripe',
 		payment_data: buildBlocksAPIPaymentData( {
 			expressPaymentType: event?.expressPaymentType,

readme.txt

@@ -133,6 +133,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 * Fix - Prevents fatal errors for cases where we fail to load product details
 * Fix - Address an edge case with webhook URL comparisons
 * Fix - Show correct gateway name in non payments settings pages.
+* Update - Add support for customer order notes and express checkout
 * Dev - Minor fix to e2e setup code
 * Dev - Make PHP error log from Docker container available in docker/logs/php/error.log