Node 20 upgrade lint fixes (#4606)

* Node 20 upgrade lint fixes

* Prettier RC

* Revert some of the lint fixes

* Changelog and readme entries

* Import resolver package update

* Revert unnecessary changes

Author: wjrosa

.prettierrc.js

@@ -1,3 +1,11 @@
 // Import the default config file and expose it in the project root.
 // Useful for editor integrations.
-module.exports = require( '@wordpress/prettier-config' );
+module.exports = {
+	...require( '@wordpress/prettier-config' ),
+	overrides: [
+		{
+			files: [ 'changelog.txt' ],
+			options: { parser: 'markdown' },
+		},
+	],
+};

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.9.0 - xxxx-xx-xx =
+* Dev - Multiple lint fixes in preparation for the Node 20 upgrade
 * Dev - Introduces a new helper method to identify Stripe orders
 * Add - Setting to allow merchants to control the layout of the Optimized Checkout payment element on the checkout page
 * Fix - Removes the credit card payment method requirement for the Optimized Checkout feature

client/api/blocks.js

@@ -9,7 +9,7 @@ import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
  * Construct WC AJAX endpoint URL.
  *
  * @param {string} endpoint Request endpoint URL.
- * @param {string} prefix Endpoint URI prefix (default: 'wc_stripe_').
+ * @param {string} prefix   Endpoint URI prefix (default: 'wc_stripe_').
  * @return {string} URL with interpolated endpoint.
  */
 const getAjaxUrl = ( endpoint, prefix = 'wc_stripe_' ) => {
@@ -33,7 +33,7 @@ export const getCartDetails = () => {
 /**
  * Update shipping options.
  *
- * @param {Object} address Customer address.
+ * @param {Object} address            Customer address.
  * @param {string} paymentRequestType Either 'apple_pay' or 'payment_request_api' depending on the type of request.
  */
 export const updateShippingOptions = ( address, paymentRequestType ) => {
@@ -65,18 +65,6 @@ export const updateShippingDetails = ( shippingOption ) => {
 	} );
 };
 
-export const createOrder = ( sourceEvent, paymentRequestType ) => {
-	let data = normalizeOrderData( sourceEvent, paymentRequestType );
-	data = getRequiredFieldDataFromCheckoutForm( data );
-
-	return $.ajax( {
-		type: 'POST',
-		data,
-		dataType: 'json',
-		url: getAjaxUrl( 'create_order' ),
-	} );
-};
-
 const getRequiredFieldDataFromCheckoutForm = ( data ) => {
 	const checkoutForm = document.querySelector( '.wc-block-checkout' );
 	// Return if cart page.
@@ -109,3 +97,15 @@ const getRequiredFieldDataFromCheckoutForm = ( data ) => {
 
 	return data;
 };
+
+export const createOrder = ( sourceEvent, paymentRequestType ) => {
+	let data = normalizeOrderData( sourceEvent, paymentRequestType );
+	data = getRequiredFieldDataFromCheckoutForm( data );
+
+	return $.ajax( {
+		type: 'POST',
+		data,
+		dataType: 'json',
+		url: getAjaxUrl( 'create_order' ),
+	} );
+};

client/api/index.js

@@ -33,7 +33,7 @@ export default class WCStripeAPI {
 	 * Construct WC AJAX endpoint URL.
 	 *
 	 * @param {string} endpoint Request endpoint URL.
-	 * @param {string} prefix Endpoint URI prefix (default: 'wc_stripe_').
+	 * @param {string} prefix   Endpoint URI prefix (default: 'wc_stripe_').
 	 * @return {string} URL with interpolated endpoint.
 	 */
 	getAjaxUrl( endpoint, prefix = 'wc_stripe_' ) {
@@ -140,7 +140,7 @@ export default class WCStripeAPI {
 	/**
 	 * Creates an intent based on a payment method.
 	 *
-	 * @param {number|null} orderId The id of the order if creating the intent on Order Pay page.
+	 * @param {number|null} orderId           The id of the order if creating the intent on Order Pay page.
 	 * @param {string|null} paymentMethodType The type of payment method.
 	 *
 	 * @return {Promise} The final promise for the request to the server.
@@ -172,7 +172,7 @@ export default class WCStripeAPI {
 	/**
 	 * Creates and confirms a setup intent.
 	 *
-	 * @param {Object} paymentMethod Payment method data.
+	 * @param {Object} paymentMethod  Payment method data.
 	 * @param {Object} additionalData Additional data to send with the request.
 	 *
 	 * @return {Promise} Promise containing the setup intent.
@@ -251,12 +251,12 @@ export default class WCStripeAPI {
 	/**
 	 * Updates a payment intent with data from order: customer, level3 data and and maybe sets the payment for future use.
 	 *
-	 * @param {string} intentId The id of the payment intent.
-	 * @param {number} orderId The id of the order.
-	 * @param {string} savePaymentMethod 'yes' if saving.
+	 * @param {string} intentId               The id of the payment intent.
+	 * @param {number} orderId                The id of the order.
+	 * @param {string} savePaymentMethod      'yes' if saving.
 	 * @param {string} selectedUPEPaymentType The name of the selected UPE payment type or empty string.
 	 *
-	 * @return {Promise} The final promise for the request to the server.
+	 * @return {Object|undefined} The response from the server or undefined if the intent is a setup intent.
 	 */
 	updateIntent(
 		intentId,
@@ -298,7 +298,7 @@ export default class WCStripeAPI {
 	 * Extracts the details about a payment intent from the redirect URL,
 	 * and displays the intent confirmation modal (if needed).
 	 *
-	 * @param {string} redirectUrl The redirect URL, returned from the server.
+	 * @param {string} redirectUrl         The redirect URL, returned from the server.
 	 * @param {string} paymentMethodToSave The ID of a Payment Method if it should be saved (optional).
 	 * @return {Object|true} An object containing the redirect URL on success and a flag indicating
 	 *   if the page is the Pay for order page, or `true` if no confirmation is needed.
@@ -385,7 +385,7 @@ export default class WCStripeAPI {
 	 * Process checkout and update payment intent via AJAX.
 	 *
 	 * @param {string} paymentIntentId ID of payment intent to be updated.
-	 * @param {Object} fields Checkout fields.
+	 * @param {Object} fields          Checkout fields.
 	 * @return {Promise} Promise containing redirect URL for UPE element.
 	 */
 	processCheckout( paymentIntentId, fields ) {
@@ -415,7 +415,7 @@ export default class WCStripeAPI {
 	 * Updates order status, if there is an error while confirming intent.
 	 *
 	 * @param {string} intentId The id of the Payment/Setup Intent.
-	 * @param {number} orderId The id of the WC_Order.
+	 * @param {number} orderId  The id of the WC_Order.
 	 */
 	updateFailedOrder( intentId, orderId ) {
 		this.request( this.getAjaxUrl( 'update_failed_order' ), {
@@ -496,7 +496,7 @@ export default class WCStripeAPI {
 	/**
 	 * Normalizes address fields in WooCommerce supported format.
 	 *
-	 * @param {Object} billingAddress Billing address.
+	 * @param {Object} billingAddress  Billing address.
 	 * @param {Object} shippingAddress Shipping address.
 	 * @return {Promise} Promise for the request to the server.
 	 */
@@ -604,7 +604,7 @@ export default class WCStripeAPI {
 	/**
 	 * Empty the cart (legacy version, non-StoreAPI).
 	 *
-	 * @param {Object} params Parameters.
+	 * @param {Object} params           Parameters.
 	 * @param {number} params.bookingId Booking ID.
 	 * @return {Promise} Promise for the request to the server.
 	 */
@@ -640,9 +640,9 @@ export default class WCStripeAPI {
 	/**
 	 * Pays for an order based on the Express Checkout payment method.
 	 *
-	 * @param {number} order The order ID.
+	 * @param {number} order        The order ID.
 	 * @param {Object} orderDetails Order details, including order key and billing email.
-	 * @param {Object} paymentData Order data.
+	 * @param {Object} paymentData  Order data.
 	 * @return {Promise} Promise for the request to the server.
 	 */
 	expressCheckoutECEPayForOrder( order, orderDetails, paymentData ) {
@@ -657,8 +657,8 @@ export default class WCStripeAPI {
 	/**
 	 * Posts data to the Blocks API.
 	 *
-	 * @param {string} path The path to post to.
-	 * @param {Object} data The data to post.
+	 * @param {string} path    The path to post to.
+	 * @param {Object} data    The data to post.
 	 * @param {Object} headers The headers for the request.
 	 * @return {Promise} The promise for the request to the server.
 	 */

client/blocks/credit-card/elements.js

@@ -15,9 +15,9 @@ const baseTextInputStyles = 'wc-block-gateway-input';
 /**
  * InlineCard component
  *
- * @param {Object} props Incoming props for the component.
+ * @param {Object}             props                     Incoming props for the component.
  * @param {React.ReactElement} props.inputErrorComponent
- * @param {function(any):any} props.onChange
+ * @param {function(any):any}  props.onChange
  */
 export const InlineCard = ( {
 	inputErrorComponent: ValidationInputError,
@@ -63,8 +63,8 @@ export const InlineCard = ( {
 /**
  * CardElements component.
  *
- * @param {Object} props
- * @param {function(any):any} props.onChange
+ * @param {Object}             props
+ * @param {function(any):any}  props.onChange
  * @param {React.ReactElement} props.inputErrorComponent
  */
 export const CardElements = ( {

client/blocks/credit-card/index.js

@@ -1,5 +1,5 @@
-import { __ } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { ThreeDSecurePaymentHandler } from '../three-d-secure';
 import { StripeCreditCard, getStripeCreditCardIcons } from './payment-method';
 import { PAYMENT_METHOD_NAME } from './constants';

client/blocks/express-checkout/express-button-previews/index.js

@@ -9,7 +9,7 @@ import './style.scss';
  * Base PaymentButtonPreview Component
  *
  * @param {Object} props
- * @param {string} props.icon - The icon to display.
+ * @param {string} props.icon        - The icon to display.
  * @param {string} [props.className] - Optional additional class names.
  * @return {JSX.Element} The rendered component.
  */

client/blocks/express-checkout/index.js

@@ -67,7 +67,7 @@ const getEditorElement = ( expressPaymentMethod ) => {
 /**
  *
  * @param {string} expressPaymentMethod
- * @param {Object} api The Stripe API object.
+ * @param {Object} api                  The Stripe API object.
  * @return {Object} The express payment method configuration.
  */
 const expressCheckoutElement = ( expressPaymentMethod, api ) => {

client/blocks/payment-request/event-handlers.js

@@ -76,8 +76,8 @@ const getRedirectUrlPartials = ( url ) => {
  * Helper function. Requests that the provided intent (identified by the secret) is be
  * handled by Stripe. Returns a promise from Stripe.
  *
- * @param {Object} stripe - The stripe object.
- * @param {string} intentType - The type of intent. Either `pi` or `si`.
+ * @param {Object} stripe       - The stripe object.
+ * @param {string} intentType   - The type of intent. Either `pi` or `si`.
  * @param {string} clientSecret - Client secret returned from Stripe.
  *
  * @return {Promise} A promise from Stripe with the confirmed intent or an error.
@@ -94,7 +94,7 @@ const requestIntentConfirmation = ( stripe, intentType, clientSecret ) => {
 /**
  * Helper function. Returns the payment or setup intent from a given confirmed intent.
  *
- * @param {Object} intent - The confirmed intent.
+ * @param {Object} intent     - The confirmed intent.
  * @param {string} intentType - The payment intent's type. Either `pi` or `si`.
  *
  * @return {Object} The Stripe payment or setup intent.
@@ -122,7 +122,7 @@ const didIntentSucceed = ( intent ) => {
  * payment method of the intent was confirmed successfully.
  *
  * @param {string} redirectUrl - The URL to redirect to after a successful payment.
- * @param {string} intentType - The type of the payment intent. Either `pi` or `si`.
+ * @param {string} intentType  - The type of the payment intent. Either `pi` or `si`.
  */
 const handleIntentConfirmation = ( redirectUrl, intentType ) => (
 	confirmation
@@ -144,8 +144,8 @@ const handleIntentConfirmation = ( redirectUrl, intentType ) => (
  * our AJAX API, proceeds with payment if possible, otherwise attempts to confirm the
  * payment (i.e. 3DS verification) through Stripe.
  *
- * @param {Object} stripe - The Stripe JS object.
- * @param {Object} evt - The `source` event from the Stripe payment request button.
+ * @param {Object}   stripe                 - The Stripe JS object.
+ * @param {Object}   evt                    - The `source` event from the Stripe payment request button.
  * @param {Function} setExpressPaymentError - Used to show error messages to the customer.
  */
 const performPayment = ( stripe, evt, setExpressPaymentError ) => (

client/blocks/payment-request/hooks.js

@@ -16,10 +16,10 @@ import { getCartDetails } from 'wcstripe/api/blocks';
  * This hook takes care of creating a payment request and making sure
  * you can pay through said payment request.
  *
- * @param {Object}  stripe The stripe object used to create the payment request.
+ * @param {Object}  stripe        The stripe object used to create the payment request.
  * @param {boolean} needsShipping A value from the Block checkout that indicates whether shipping
  *                                is required or not.
- * @param {Object}  billing - The billing data from the checkout or cart block.
+ * @param {Object}  billing       - The billing data from the checkout or cart block.
  *
  * @return {Array} An array; first element is the payment request; second element is the payment
  *                 requests type.
@@ -87,9 +87,9 @@ export const usePaymentRequest = ( stripe, needsShipping, billing ) => {
  * Returns an onClick handler for payment request buttons. Checks if login is required, resets
  * the error state, syncs the payment request with the block, and calls the provided click handler.
  *
- * @param {string} paymentRequestType - The payment request type.
+ * @param {string}   paymentRequestType     - The payment request type.
  * @param {Function} setExpressPaymentError - Used to set the error state.
- * @param {Function} onClick - The onClick function that should be called on click.
+ * @param {Function} onClick                - The onClick function that should be called on click.
  *
  * @return {Function} An onClick handler for the payment request buttons.
  */
@@ -126,7 +126,7 @@ export const useOnClickHandler = (
  * Adds a shipping address change event handler to the provided payment request. Updates the
  * order's shipping address when necessary.
  *
- * @param {Object} paymentRequest - The payment request object.
+ * @param {Object} paymentRequest     - The payment request object.
  * @param {string} paymentRequestType - The payment request type.
  */
 export const useShippingAddressUpdateHandler = (
@@ -149,7 +149,7 @@ export const useShippingAddressUpdateHandler = (
 /**
  * Adds a shipping option change event handler to the provided payment request.
  *
- * @param {Object} paymentRequest - The payment request object.
+ * @param {Object} paymentRequest     - The payment request object.
  * @param {string} paymentRequestType - The payment request type.
  */
 export const useShippingOptionChangeHandler = (
@@ -172,11 +172,11 @@ export const useShippingOptionChangeHandler = (
 /**
  * Adds a payment event handler to the provided payment request.
  *
- * @param {Object} stripe - The stripe object used to confirm and create a payment intent.
- * @param {Object} paymentRequest - The payment request object.
- * @param {string} paymentRequestType - The payment request type.
+ * @param {Object}   stripe                 - The stripe object used to confirm and create a payment intent.
+ * @param {Object}   paymentRequest         - The payment request object.
+ * @param {string}   paymentRequestType     - The payment request type.
  * @param {Function} setExpressPaymentError - A function used to expose an error message to show
- *                                            the customer.
+ *                                          the customer.
  */
 export const useProcessPaymentHandler = (
 	stripe,
@@ -204,8 +204,8 @@ export const useProcessPaymentHandler = (
 /**
  * Adds a cancellation handler to the provided payment request.
  *
- * @param {Object} paymentRequest - The payment request object.
- * @param {Function} onClose - A function from the Blocks API.
+ * @param {Object}   paymentRequest - The payment request object.
+ * @param {Function} onClose        - A function from the Blocks API.
  */
 export const useCancelHandler = ( paymentRequest, onClose ) => {
 	useEffect( () => {