Node 20 lint changes

.eslintrc.js

@@ -62,6 +62,13 @@ module.exports = {
 		'testing-library/no-unnecessary-act': 'off',
 		'@typescript-eslint/no-empty-function': 'off',
 		'@typescript-eslint/no-var-requires': 'off',
+		'@typescript-eslint/no-use-before-define': 'off',
+		'@wordpress/i18n-text-domain': [
+			'error',
+			{
+				allowedTextDomain: 'woocommerce-gateway-stripe',
+			},
+		],
 	},
 	settings: {
 		react: {
@@ -82,4 +89,5 @@ module.exports = {
 			'@wordpress/data',
 		],
 	},
+	ignorePatterns: [ 'phpunit-html/**' ],
 };

.npmrc

@@ -1,2 +1,5 @@
-legacy-peer-deps=true
-engine-strict=true
+save-exact = true
+engine-strict = true
+legacy-peer-deps = true
+prefer-dedupe = true
+lockfile-version = 3

.nvmrc

@@ -1 +1 @@
-16.18.0
+v20.19.1

.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' },
+		},
+	],
+};

babel.config.js

@@ -6,7 +6,7 @@ module.exports = {
 	plugins: [
 		'@emotion',
 		[ '@babel/transform-runtime', { corejs: 3 } ],
-		'@babel/plugin-proposal-optional-chaining',
-		'@babel/plugin-proposal-nullish-coalescing-operator',
+		'@babel/plugin-transform-optional-chaining',
+		'@babel/plugin-transform-nullish-coalescing-operator',
 	],
 };

bin/update-pot-file-references.php

@@ -89,7 +89,7 @@ function load_js_transpiling_source_maps(): array {
 		}
 
 		foreach ( $file_json[ 'sources' ] as $source ) {
-			$source = preg_replace( '%^webpack:///\./(client/.*)$%', '${1}', $source );
+			$source = preg_replace( '%^webpack://\./(client/.*)$%', '${1}', $source );
 			if ( 'webpack' !== substr( $source, 0, 7 ) ) {
 				$mappings[ $source ][] = $file_json[ 'file' ];
 			}

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 ) => {

client/api/index.js

@@ -33,7 +33,7 @@
 	 * 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 @@
 	/**
 	 * 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 @@
 	/**
 	 * 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.
@@ -248,12 +248,12 @@
 		} );
 	}
 
 	/**
 	 * 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.
@@ -298,7 +298,7 @@
 	 * 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 @@
 	 * 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 @@
 	 * 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 @@
 	/**
 	 * 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 @@
 	/**
 	 * 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.
 	 */
@@ -630,19 +630,19 @@
 			},
 			{
 				'X-WCSTRIPE-EXPRESS-CHECKOUT': true,
-				'X-WCSTRIPE-EXPRESS-CHECKOUT-NONCE': getExpressCheckoutData(
-					'nonce'
-				)?.wc_store_api_express_checkout,
+				'X-WCSTRIPE-EXPRESS-CHECKOUT-NONCE':
+					getExpressCheckoutData( 'nonce' )
+						?.wc_store_api_express_checkout,
 			}
 		);
 	}
 
 	/**
 	 * 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 @@
 	/**
 	 * 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.
 	 */
@@ -684,8 +684,9 @@
 		return this.request(
 			getExpressCheckoutAjaxURL( 'get_selected_product_data' ),
 			{
-				security: getExpressCheckoutData( 'nonce' )
-					?.get_selected_product_data,
+				security:
+					getExpressCheckoutData( 'nonce' )
+						?.get_selected_product_data,
 				...productData,
 			}
 		);

client/blocks/credit-card/elements.js

@@ -1,12 +1,12 @@
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import {
 	CardElement,
 	CardNumberElement,
 	CardExpiryElement,
 	CardCvcElement,
 } from '@stripe/react-stripe-js';
 import { useElementOptions } from './use-element-options';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /** @typedef {import('react')} React */
 
@@ -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,8 +1,8 @@
-import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
 import { ThreeDSecurePaymentHandler } from '../three-d-secure';
 import { StripeCreditCard, getStripeCreditCardIcons } from './payment-method';
 import { PAYMENT_METHOD_NAME } from './constants';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
 import { loadStripe } from 'wcstripe/blocks/load-stripe';
 

client/blocks/credit-card/payment-method.js

@@ -1,7 +1,7 @@
-import { useState } from '@wordpress/element';
 import { Elements, useStripe } from '@stripe/react-stripe-js';
 import { useCheckoutSubscriptions } from './use-checkout-subscriptions';
 import { InlineCard, CardElements } from './elements';
+import { useState } from '@wordpress/element';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
 
 /**

client/blocks/credit-card/use-checkout-subscriptions.js

@@ -1,7 +1,7 @@
-import { useEffect, useCallback, useState } from '@wordpress/element';
 import { getErrorMessageForTypeAndCode } from '../../stripe-utils';
 import { usePaymentIntents } from '../three-d-secure';
 import { usePaymentProcessing } from './use-payment-processing';
+import { useEffect, useCallback, useState } from '@wordpress/element';
 
 /**
  * @typedef {import('@woocommerce/type-defs/registered-payment-method-props').EventRegistrationProps} EventRegistrationProps
@@ -75,9 +75,8 @@ export const useCheckoutSubscriptions = (
 			// so we don't break the observers.
 			return true;
 		};
-		const unsubscribeAfterProcessing = onCheckoutAfterProcessingWithError(
-			onError
-		);
+		const unsubscribeAfterProcessing =
+			onCheckoutAfterProcessingWithError( onError );
 		return () => {
 			unsubscribeAfterProcessing();
 		};

client/blocks/credit-card/use-payment-processing.js

@@ -1,4 +1,3 @@
-import { useEffect } from '@wordpress/element';
 import {
 	CardElement,
 	CardNumberElement,
@@ -7,6 +6,7 @@ import {
 import { getErrorMessageForTypeAndCode } from '../../stripe-utils';
 import { errorTypes, PAYMENT_METHOD_CARD } from '../../stripe-utils/constants';
 import { PAYMENT_METHOD_NAME } from './constants';
+import { useEffect } from '@wordpress/element';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
 
 /**

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/express-checkout-component.js

@@ -70,20 +70,15 @@ const ExpressCheckoutComponent = ( {
 	onClose,
 	expressPaymentMethod = '',
 } ) => {
-	const {
-		buttonOptions,
-		onButtonClick,
-		onConfirm,
-		onCancel,
-		elements,
-	} = useExpressCheckout( {
-		api,
-		billing,
-		shippingData,
-		onClick,
-		onClose,
-		setExpressPaymentError,
-	} );
+	const { buttonOptions, onButtonClick, onConfirm, onCancel, elements } =
+		useExpressCheckout( {
+			api,
+			billing,
+			shippingData,
+			onClick,
+			onClose,
+			setExpressPaymentError,
+		} );
 
 	const onShippingAddressChange = ( event ) =>
 		shippingAddressChangeHandler( api, event, elements );

client/blocks/express-checkout/express-checkout-container.js

@@ -17,9 +17,8 @@ export const ExpressCheckoutContainer = ( props ) => {
 		} ),
 		amount: billing.cartTotal.value,
 		currency: billing.currency.code.toLowerCase(),
-		paymentMethodTypes: getPaymentMethodTypesForExpressMethod(
-			expressPaymentMethod
-		),
+		paymentMethodTypes:
+			getPaymentMethodTypesForExpressMethod( expressPaymentMethod ),
 		appearance: getExpressCheckoutButtonAppearance(),
 		locale: getExpressCheckoutData( 'stripe' )?.locale ?? 'en',
 	};

client/blocks/express-checkout/hooks.js

@@ -1,6 +1,6 @@
+import { useStripe, useElements } from '@stripe/react-stripe-js';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useStripe, useElements } from '@stripe/react-stripe-js';
 import {
 	onAbortPaymentHandler,
 	onCancelHandler,
@@ -74,9 +74,10 @@ export const useExpressCheckout = ( {
 
 				// Return a default shipping option, as a non-empty shippingRates array
 				// is required when shippingAddressRequired is true.
-				const defaultShippingOption = getExpressCheckoutData(
-					'checkout'
-				)?.default_shipping_option;
+				const defaultShippingOption =
+					getExpressCheckoutData(
+						'checkout'
+					)?.default_shipping_option;
 				return defaultShippingOption ? [ defaultShippingOption ] : [];
 			};
 

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 ) => {