add payment method hooks

assets/js/base/hooks/index.js

@@ -6,3 +6,4 @@ export * from './use-collection-header';
 export * from './use-collection-data';
 export * from './use-previous';
 export * from './checkout';
+export * from './payment-methods';

assets/js/base/hooks/payment-methods/constants.js

@@ -0,0 +1,8 @@
+export const STATUS = {
+	PRISTINE: 'pristine',
+	STARTED: 'started',
+	FINISHED: 'finished',
+	ERROR: 'has_error',
+	FAILED: 'failed',
+	SUCCESS: 'success',
+};

assets/js/base/hooks/payment-methods/index.js

@@ -0,0 +1,2 @@
+export { default as useActivePaymentMethod } from './use-active-payment-method';
+export { default as usePaymentEvents } from './use-payment-events';

assets/js/base/hooks/payment-methods/use-active-payment-method.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { useCheckoutContext } from '@woocommerce/base-context/checkout-context';
+import { useEffect } from '@wordpress/element';
+import { getPaymentMethods } from '@woocommerce/blocks-registry';
+
+const useActivePaymentMethod = () => {
+	const {
+		activePaymentMethod,
+		setActivePaymentMethod,
+	} = useCheckoutContext();
+	// if payment method has not been set yet, let's set it.
+	useEffect( () => {
+		if ( ! activePaymentMethod && activePaymentMethod !== null ) {
+			const paymentMethods = getPaymentMethods();
+			const paymentMethodNames = Object.keys( paymentMethods );
+			setActivePaymentMethod(
+				paymentMethodNames.length > 0
+					? paymentMethods[ paymentMethodNames[ 0 ] ].name
+					: null
+			);
+		}
+	}, [ activePaymentMethod, setActivePaymentMethod ] );
+	return { activePaymentMethod, setActivePaymentMethod };
+};
+
+export default useActivePaymentMethod;

assets/js/base/hooks/payment-methods/use-payment-events.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { STATUS } from './constants';
+
+const usePaymentEvents = () => {
+	const { paymentStatus, setPaymentStatus } = useState( STATUS.PRISTINE );
+	const dispatch = useMemo(
+		() => ( {
+			pristine: () => setPaymentStatus( STATUS.PRISTINE ),
+			started: () => setPaymentStatus( STATUS.STARTED ),
+			finished: () => setPaymentStatus( STATUS.FINISHED ),
+			error: () => setPaymentStatus( STATUS.ERROR ),
+			failed: () => setPaymentStatus( STATUS.FAILED ),
+			success: () => setPaymentStatus( STATUS.SUCCESS ),
+		} ),
+		[ setPaymentStatus ]
+	);
+	const select = useMemo(
+		() => ( {
+			isPristine: () => paymentStatus === STATUS.PRISTINE,
+			isStarted: () => paymentStatus === STATUS.STARTED,
+			isFinished: () => paymentStatus === STATUS.FINISHED,
+			hasError: () => paymentStatus === STATUS.ERROR,
+			hasFailed: () => paymentStatus === STATUS.FAILED,
+			isSuccessful: () => paymentStatus === STATUS.SUCCESS,
+		} ),
+		[ paymentStatus ]
+	);
+	return { dispatch, select };
+};
+
+export default usePaymentEvents;