Add new hooks related to payment methods and checkout and remove obso…

…lete. (#1929)

* add various hooks and improve hooks folder structure

- Also restructures hooks directory to make things a bit more organized
- Add useStoreOrder placeholder (followed up in future pull)
- Add useBillingData hook.

* implement usePaymentMethodInterface hook in payment method components

* remove obsolete hooks and implement new checkout context hooks

- add useCheckoutSubmit which exposes checkout submit button interface
- add useCheckoutRedirectUrl which exposes checkout redirect url interface

* add alias for `@woocommerce/base-utils` to jest config

* use consistent variable names for payment method id

assets/js/base/components/payment-methods/express-payment-methods.js

@@ -2,34 +2,30 @@
  * External dependencies
  */
 import {
-	useCheckoutData,
-	usePaymentEvents,
 	useExpressPaymentMethods,
+	usePaymentMethodInterface,
 } from '@woocommerce/base-hooks';
 import { cloneElement, isValidElement } from '@wordpress/element';
 import { useCheckoutContext } from '@woocommerce/base-context';
 
 const ExpressPaymentMethods = () => {
-	const [ checkoutData ] = useCheckoutData();
 	const { isEditor } = useCheckoutContext();
-	const { dispatch, select } = usePaymentEvents();
+	const paymentMethodInterface = usePaymentMethodInterface();
 	// not implementing isInitialized here because it's utilized further
 	// up in the tree for express payment methods. We won't even get here if
 	// there's no payment methods after initialization.
 	const { paymentMethods } = useExpressPaymentMethods();
-	const paymentMethodSlugs = Object.keys( paymentMethods );
+	const paymentMethodIds = Object.keys( paymentMethods );
 	const content =
-		paymentMethodSlugs.length > 0 ? (
-			paymentMethodSlugs.map( ( slug ) => {
+		paymentMethodIds.length > 0 ? (
+			paymentMethodIds.map( ( id ) => {
 				const expressPaymentMethod = isEditor
-					? paymentMethods[ slug ].edit
-					: paymentMethods[ slug ].activeContent;
-				const paymentEvents = { dispatch, select };
+					? paymentMethods[ id ].edit
+					: paymentMethods[ id ].activeContent;
 				return isValidElement( expressPaymentMethod ) ? (
-					<li key={ slug } id={ `express-payment-method-${ slug }` }>
+					<li key={ id } id={ `express-payment-method-${ id }` }>
 						{ cloneElement( expressPaymentMethod, {
-							checkoutData,
-							paymentEvents,
+							...paymentMethodInterface,
 						} ) }
 					</li>
 				) : null;

assets/js/base/components/payment-methods/payment-methods.js

@@ -2,10 +2,8 @@
  * External dependencies
  */
 import {
-	useCheckoutData,
-	usePaymentEvents,
-	useActivePaymentMethod,
 	usePaymentMethods,
+	usePaymentMethodInterface,
 } from '@woocommerce/base-hooks';
 import {
 	useCallback,
@@ -31,12 +29,12 @@ const noPaymentMethodTab = () => {
 };
 
 const createTabs = ( paymentMethods ) => {
-	const paymentMethodsKeys = Object.keys( paymentMethods );
-	return paymentMethodsKeys.length > 0
-		? paymentMethodsKeys.map( ( key ) => {
-				const { label, ariaLabel } = paymentMethods[ key ];
+	const paymentMethodIds = Object.keys( paymentMethods );
+	return paymentMethodIds.length > 0
+		? paymentMethodIds.map( ( id ) => {
+				const { label, ariaLabel } = paymentMethods[ id ];
 				return {
-					name: key,
+					name: id,
 					title: () => label,
 					ariaLabel,
 				};
@@ -64,38 +62,36 @@ const getPaymentMethod = ( id, paymentMethods, isEditor ) => {
 };
 
 const PaymentMethods = () => {
-	const [ checkoutData ] = useCheckoutData();
 	const { isEditor } = useCheckoutContext();
-	const { dispatch, select } = usePaymentEvents();
 	const { isInitialized, paymentMethods } = usePaymentMethods();
 	const currentPaymentMethods = useRef( paymentMethods );
+	const {
+		activePaymentMethod,
+		setActivePaymentMethod,
+		...paymentMethodInterface
+	} = usePaymentMethodInterface();
+	const currentPaymentMethodInterface = useRef( paymentMethodInterface );
 
 	// update ref on changes
 	useEffect( () => {
 		currentPaymentMethods.current = paymentMethods;
-	}, [ paymentMethods ] );
-
-	const {
-		activePaymentMethod,
-		setActivePaymentMethod,
-	} = useActivePaymentMethod();
+		currentPaymentMethodInterface.current = paymentMethodInterface;
+	}, [ paymentMethods, paymentMethodInterface, activePaymentMethod ] );
 	const getRenderedTab = useCallback(
 		() => ( selectedTab ) => {
 			const paymentMethod = getPaymentMethod(
 				selectedTab,
 				currentPaymentMethods.current,
 				isEditor
 			);
-			const paymentEvents = { dispatch, select };
 			return paymentMethod
 				? cloneElement( paymentMethod, {
-						isActive: true,
-						checkoutData,
-						paymentEvents,
+						activePaymentMethod: paymentMethod.id,
+						...currentPaymentMethodInterface.current,
 				  } )
 				: null;
 		},
-		[ checkoutData, dispatch, select, isEditor ]
+		[ isEditor, activePaymentMethod ]
 	);
 	if (
 		! isInitialized ||

assets/js/base/hooks/cart/index.js

@@ -0,0 +1,3 @@
+export * from './use-store-cart';
+export * from './use-store-cart-coupons';
+export * from './use-store-cart-item-quantity';

assets/js/base/hooks/use-store-cart.js → assets/js/base/hooks/cart/use-store-cart.js

@@ -19,6 +19,7 @@ const defaultCartData = {
 	cartTotals: {},
 	cartIsLoading: true,
 	cartErrors: [],
+	shippingRates: [],
 };
 
 /**

assets/js/base/hooks/checkout/index.js

@@ -1,4 +1,2 @@
-export { default as useCheckoutEvents } from './use-checkout-events';
-export { default as useCheckoutNotices } from './use-checkout-notices';
-export { default as useCheckoutRedirectUrls } from './use-checkout-redirect-urls';
-export { default as useCheckoutData } from './use-checkout-data';
+export * from './use-checkout-redirect-url';
+export * from './use-checkout-submit';

assets/js/base/hooks/checkout/use-checkout-redirect-url.js

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { useCheckoutContext } from '@woocommerce/base-context';
+
+/**
+ * Returns redirect url interface from checkout context.
+ */
+export const useCheckoutRedirectUrl = () => {
+	const { redirectUrl, dispatchActions } = useCheckoutContext();
+
+	return {
+		redirectUrl,
+		setRedirectUrl: dispatchActions.setRedirectUrl,
+	};
+};

assets/js/base/hooks/checkout/use-checkout-submit.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { useCheckoutContext } from '@woocommerce/base-context';
+
+/**
+ * Returns the submitLabel and onSubmit interface from the checkout context
+ */
+export const useCheckoutSubmit = () => {
+	const { submitLabel, onSubmit } = useCheckoutContext();
+	return { submitLabel, onSubmit };
+};

assets/js/base/hooks/index.js

@@ -1,15 +1,13 @@
-export * from './use-query-state';
-export * from './use-shallow-equal';
-export * from './use-store-cart';
-export * from './use-store-cart-coupons';
-export * from './use-store-cart-item-quantity';
-export * from './use-store-products';
-export * from './use-store-notices';
+export * from './cart';
+export * from './checkout';
+export * from './order';
+export * from './payment-methods';
+export * from './shipping';
 export * from './use-collection';
 export * from './use-collection-header';
 export * from './use-collection-data';
 export * from './use-previous';
-export * from './checkout';
-export * from './payment-methods';
-export * from './use-shipping-rates';
-export * from './use-select-shipping-rate';
+export * from './use-shallow-equal';
+export * from './use-store-products';
+export * from './use-store-notices';
+export * from './use-query-state';

assets/js/base/hooks/order/index.js

@@ -0,0 +1,2 @@
+export * from './use-store-order';
+export * from './use-billing-data';

assets/js/base/hooks/order/use-billing-data.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { usePaymentMethodDataContext } from '@woocommerce/base-context';
+
+/**
+ * Exposes billing data api interface from the payment method data context.
+ */
+export const useBillingData = () => {
+	const { billingData, setBillingData } = usePaymentMethodDataContext();
+	return {
+		billingData,
+		setBillingData,
+	};
+};

assets/js/base/hooks/order/use-store-order.js

@@ -0,0 +1,10 @@
+// @todo finish out this hook which will return a store draft order id and
+// order loading (likely from payment data context).
+
+export const useStoreOrder = () => {
+	const orderId = 0;
+	return {
+		orderId,
+		isLoading: false,
+	};
+};

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

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