Convert checkout context to data store - part 1 (#6232)

* Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <[email protected]> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <[email protected]> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <[email protected]> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <[email protected]> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Delete empty types.ts file * remove merge conflict from docs * Correct linting in docs Co-authored-by: Thomas Roberts <[email protected]>
woocommerce · Sep 15, 2022 · 5a44960 · 5a44960
1 parent f47c5f9
commit 5a44960
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 7 deletions.
diff --git a/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts b/assets/js/base/context/hooks/cart/use-store-cart-item-quantity.ts
@@ -53,15 +53,17 @@ export const useStoreCartItemQuantity = (
 	const { key: cartItemKey = '', quantity: cartItemQuantity = 1 } =
 		verifiedCartItem;
 	const { cartErrors } = useStoreCart();
-	const { incrementCalculating, decrementCalculating } =
-		useDispatch( CHECKOUT_STORE_KEY );
+	const { incrementCalculating, decrementCalculating } = useDispatch(
+		CHECKOUT_STORE_KEY
+	);
 
 	// Store quantity in hook state. This is used to keep the UI updated while server request is updated.
 	const [ quantity, setQuantity ] = useState< number >( cartItemQuantity );
 	const [ debouncedQuantity ] = useDebounce< number >( quantity, 400 );
 	const previousDebouncedQuantity = usePrevious( debouncedQuantity );
-	const { removeItemFromCart, changeCartItemQuantity } =
-		useDispatch( CART_STORE_KEY );
+	const { removeItemFromCart, changeCartItemQuantity } = useDispatch(
+		CART_STORE_KEY
+	);
 
 	// Update local state when server updates.
 	useEffect( () => setQuantity( cartItemQuantity ), [ cartItemQuantity ] );

diff --git a/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts b/assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts
@@ -10,6 +10,7 @@ import { getSetting } from '@woocommerce/settings';
 import deprecated from '@wordpress/deprecated';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
 import type { PaymentMethodInterface } from '@woocommerce/types';
+import { useSelect } from '@wordpress/data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	CHECKOUT_STORE_KEY,

diff --git a/assets/js/data/checkout/constants.ts b/assets/js/data/checkout/constants.ts
@@ -8,7 +8,7 @@ import { CheckoutResponseSuccess } from '@woocommerce/types';
 export const STORE_KEY = 'wc/store/checkout';
 
 export enum STATUS {
-	// Checkout is in it's initialized state.
+	// Checkout is in its initialized state.
 	PRISTINE = 'pristine',
 	// When checkout state has changed but there is no activity happening.
 	IDLE = 'idle',

diff --git a/assets/js/data/checkout/reducers.ts b/assets/js/data/checkout/reducers.ts
@@ -2,8 +2,8 @@
  * External dependencies
  */
 import type { Reducer } from 'redux';
-
 import { PaymentResult } from '@woocommerce/types';
+
 /**
  * Internal dependencies
  */

diff --git a/assets/js/data/tsconfig.json b/assets/js/data/tsconfig.json
@@ -10,7 +10,8 @@
 		"../base/context/providers/cart-checkout/payment-methods/**.ts",
 		"../utils/notices.ts",
 		"../base/context/providers/cart-checkout/checkout-events/**.ts",
-		"../base/context/event-emit"
+		"../base/context/event-emit",
+		"../base/context/providers/cart-checkout/checkout-state/utils.ts"
 	],
 	"exclude": [ "**/test/**" ]
 }
diff --git a/docs/internal-developers/block-client-apis/checkout/checkout-api.md b/docs/internal-developers/block-client-apis/checkout/checkout-api.md
@@ -1,9 +1,12 @@
 # Checkout API interface <!-- omit in toc -->
 
+<<<<<<< HEAD
 **Note on migration:** We are in the process of moving much of the data from contexts into data stores, so this portion of the docs may change often as we do this. We will endavour to keep it up to date while the work is carried out
 
 ## Table of Contents <!-- omit in toc -->
 
+**Note on migration:** We are in the process of moving much of the data from contexts into data stores, so this portion of the docs may change often as we do this. We will endavour to keep it up to date while the work is carried out
+
 -   [Checkout Block API overview](#checkout-block-api-overview)
     -   [Data Stores](#data-stores)
         -   [Checkout Data Store](#checkout-data-store)