Importing additional implementations from WCPay

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.paymentRequestUpdateShippingDetails(
+			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();
+};