Integrating ECE to shortcode checkout

.eslintrc.js

@@ -18,7 +18,6 @@ module.exports = {
 		node: true,
 	},
 	rules: {
-		'require-await': 'error',
 		'react-hooks/exhaustive-deps': 'error',
 		'react-hooks/rules-of-hooks': 'error',
 		'react/jsx-curly-brace-presence': [

client/api/index.js

@@ -467,4 +467,61 @@ export default class WCStripeAPI {
 				}
 			} );
 	}
+
+	/**
+	 * Submits shipping address to get available shipping options
+	 * from Express Checkout ECE payment method.
+	 *
+	 * @param {Object} shippingAddress Shipping details.
+	 * @return {Promise} Promise for the request to the server.
+	 */
+	expressCheckoutECECalculateShippingOptions( shippingAddress ) {
+		return this.request( this.getAjaxUrl( 'get_shipping_options' ), {
+			security: this.options?.nonce?.shipping,
+			is_product_page: this.options?.is_product_page,
+			...shippingAddress,
+		} );
+	}
+
+	/**
+	 * Updates cart with selected shipping option.
+	 *
+	 * @param {Object} shippingOption Shipping option.
+	 * @return {Promise} Promise for the request to the server.
+	 */
+	expressCheckoutUpdateShippingDetails( shippingOption ) {
+		return this.request( this.getAjaxUrl( 'update_shipping_method' ), {
+			security: this.options?.nonce?.update_shipping,
+			shipping_method: [ shippingOption.id ],
+			is_product_page: this.options?.is_product_page,
+		} );
+	}
+
+	/**
+	 * Creates order based on Express Checkout ECE payment method.
+	 *
+	 * @param {Object} paymentData Order data.
+	 * @return {Promise} Promise for the request to the server.
+	 */
+	expressCheckoutECECreateOrder( paymentData ) {
+		return this.request( this.getAjaxUrl( 'create_order' ), {
+			_wpnonce: this.options?.nonce?.checkout,
+			...paymentData,
+		} );
+	}
+
+	/**
+	 * Pays for an order based on the Express Checkout payment method.
+	 *
+	 * @param {number} order The order ID.
+	 * @param {Object} paymentData Order data.
+	 * @return {Promise} Promise for the request to the server.
+	 */
+	expressCheckoutECEPayForOrder( order, paymentData ) {
+		return this.request( this.getAjaxUrl( 'pay_for_order' ), {
+			_wpnonce: this.options?.nonce?.pay_for_order,
+			order,
+			...paymentData,
+		} );
+	}
 }

client/entrypoints/express-checkout/event-handlers.js

@@ -0,0 +1,175 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import {
+	getErrorMessageFromNotice,
+	normalizeOrderData,
+	normalizePayForOrderData,
+	normalizeShippingAddress,
+	normalizeLineItems,
+	getExpressCheckoutData,
+} from './utils';
+import {
+	trackExpressCheckoutButtonClick,
+	trackExpressCheckoutButtonLoad,
+} from './tracking';
+
+export const shippingAddressChangeHandler = async ( api, event, elements ) => {
+	try {
+		const response = await api.expressCheckoutECECalculateShippingOptions(
+			normalizeShippingAddress( event.address )
+		);
+
+		if ( response.result === 'success' ) {
+			elements.update( {
+				amount: response.total.amount,
+			} );
+			event.resolve( {
+				shippingRates: response.shipping_options,
+				lineItems: normalizeLineItems( response.displayItems ),
+			} );
+		} else {
+			event.reject();
+		}
+	} catch ( e ) {
+		event.reject();
+	}
+};
+
+export const shippingRateChangeHandler = async ( api, event, elements ) => {
+	try {
+		const response = await api.expressCheckoutUpdateShippingDetails(
+			event.shippingRate
+		);
+
+		if ( response.result === 'success' ) {
+			elements.update( { amount: response.total.amount } );
+			event.resolve( {
+				lineItems: normalizeLineItems( response.displayItems ),
+			} );
+		} else {
+			event.reject();
+		}
+	} catch ( e ) {
+		event.reject();
+	}
+};
+
+export const onConfirmHandler = async (
+	api,
+	stripe,
+	elements,
+	completePayment,
+	abortPayment,
+	event,
+	order = 0 // Order ID for the pay for order flow.
+) => {
+	const { error: submitError } = await elements.submit();
+	if ( submitError ) {
+		return abortPayment( event, submitError.message );
+	}
+
+	const { paymentMethod, error } = await stripe.createPaymentMethod( {
+		elements,
+	} );
+
+	if ( error ) {
+		return abortPayment( event, error.message );
+	}
+
+	try {
+		// Kick off checkout processing step.
+		let orderResponse;
+		if ( ! order ) {
+			orderResponse = await api.expressCheckoutECECreateOrder(
+				normalizeOrderData( event, paymentMethod.id )
+			);
+		} else {
+			orderResponse = await api.expressCheckoutECEPayForOrder(
+				order,
+				normalizePayForOrderData( event, paymentMethod.id )
+			);
+		}
+
+		if ( orderResponse.result !== 'success' ) {
+			return abortPayment(
+				event,
+				getErrorMessageFromNotice( orderResponse.messages )
+			);
+		}
+
+		const confirmationRequest = api.confirmIntent( orderResponse.redirect );
+
+		// `true` means there is no intent to confirm.
+		if ( confirmationRequest === true ) {
+			completePayment( orderResponse.redirect );
+		} else {
+			const redirectUrl = await confirmationRequest;
+
+			completePayment( redirectUrl );
+		}
+	} catch ( e ) {
+		return abortPayment(
+			event,
+			e.message
+				? e.message
+				: __(
+						'There was a problem processing the order.',
+						'woocommerce-payments'
+				  )
+		);
+	}
+};
+
+export const onReadyHandler = async function ( { availablePaymentMethods } ) {
+	if ( availablePaymentMethods ) {
+		const enabledMethods = Object.entries( availablePaymentMethods )
+			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+			.filter( ( [ _, isEnabled ] ) => isEnabled )
+			// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+			.map( ( [ methodName, _ ] ) => methodName );
+
+		trackExpressCheckoutButtonLoad( {
+			paymentMethods: enabledMethods,
+			source: getExpressCheckoutData( 'button_context' ),
+		} );
+	}
+};
+
+const blockUI = () => {
+	jQuery.blockUI( {
+		message: null,
+		overlayCSS: {
+			background: '#fff',
+			opacity: 0.6,
+		},
+	} );
+};
+
+const unblockUI = () => {
+	jQuery.unblockUI();
+};
+
+export const onClickHandler = async function ( { expressPaymentType } ) {
+	blockUI();
+	trackExpressCheckoutButtonClick(
+		expressPaymentType,
+		getExpressCheckoutData( 'button_context' )
+	);
+};
+
+export const onAbortPaymentHandler = () => {
+	unblockUI();
+};
+
+export const onCompletePaymentHandler = () => {
+	blockUI();
+};
+
+export const onCancelHandler = () => {
+	unblockUI();
+};