Convert checkout context to data store - part 1 (woocommerce#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]>
senadir · Nov 20, 2022 · cd3b424 · cd3b424
1 parent 8bee188
commit cd3b424
Show file tree

Hide file tree

Showing 9 changed files with 1,272 additions and 0 deletions.
diff --git a/assets/js/base/context/providers/cart-checkout/checkout-state/actions.ts b/assets/js/base/context/providers/cart-checkout/checkout-state/actions.ts
@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import { PaymentResult } from '@woocommerce/types';
+/**
+ * Internal dependencies
+ */
+import type { CheckoutStateContextState } from './types';
+
+export enum ACTION {
+	SET_IDLE = 'set_idle',
+	SET_PRISTINE = 'set_pristine',
+	SET_REDIRECT_URL = 'set_redirect_url',
+	SET_COMPLETE = 'set_checkout_complete',
+	SET_BEFORE_PROCESSING = 'set_before_processing',
+	SET_AFTER_PROCESSING = 'set_after_processing',
+	SET_PROCESSING_RESPONSE = 'set_processing_response',
+	SET_PROCESSING = 'set_checkout_is_processing',
+	SET_HAS_ERROR = 'set_checkout_has_error',
+	SET_NO_ERROR = 'set_checkout_no_error',
+	SET_CUSTOMER_ID = 'set_checkout_customer_id',
+	SET_ORDER_ID = 'set_checkout_order_id',
+	SET_ORDER_NOTES = 'set_checkout_order_notes',
+	INCREMENT_CALCULATING = 'increment_calculating',
+	DECREMENT_CALCULATING = 'decrement_calculating',
+	SET_SHIPPING_ADDRESS_AS_BILLING_ADDRESS = 'set_shipping_address_as_billing_address',
+	SET_SHOULD_CREATE_ACCOUNT = 'set_should_create_account',
+	SET_EXTENSION_DATA = 'set_extension_data',
+}
+
+export interface ActionType extends Partial< CheckoutStateContextState > {
+	type: ACTION;
+	data?: Record< string, unknown > | Record< string, never > | PaymentResult;
+}
+
+/**
+ * All the actions that can be dispatched for the checkout.
+ */
+export const actions = {
+	setPristine: () =>
+		( {
+			type: ACTION.SET_PRISTINE,
+		} as const ),
+	setIdle: () =>
+		( {
+			type: ACTION.SET_IDLE,
+		} as const ),
+	setProcessing: () =>
+		( {
+			type: ACTION.SET_PROCESSING,
+		} as const ),
+	setRedirectUrl: ( redirectUrl: string ) =>
+		( {
+			type: ACTION.SET_REDIRECT_URL,
+			redirectUrl,
+		} as const ),
+	setProcessingResponse: ( data: PaymentResult ) =>
+		( {
+			type: ACTION.SET_PROCESSING_RESPONSE,
+			data,
+		} as const ),
+	setComplete: ( data: Record< string, unknown > = {} ) =>
+		( {
+			type: ACTION.SET_COMPLETE,
+			data,
+		} as const ),
+	setBeforeProcessing: () =>
+		( {
+			type: ACTION.SET_BEFORE_PROCESSING,
+		} as const ),
+	setAfterProcessing: () =>
+		( {
+			type: ACTION.SET_AFTER_PROCESSING,
+		} as const ),
+	setHasError: ( hasError = true ) =>
+		( {
+			type: hasError ? ACTION.SET_HAS_ERROR : ACTION.SET_NO_ERROR,
+		} as const ),
+	incrementCalculating: () =>
+		( {
+			type: ACTION.INCREMENT_CALCULATING,
+		} as const ),
+	decrementCalculating: () =>
+		( {
+			type: ACTION.DECREMENT_CALCULATING,
+		} as const ),
+	setCustomerId: ( customerId: number ) =>
+		( {
+			type: ACTION.SET_CUSTOMER_ID,
+			customerId,
+		} as const ),
+	setOrderId: ( orderId: number ) =>
+		( {
+			type: ACTION.SET_ORDER_ID,
+			orderId,
+		} as const ),
+	setUseShippingAsBilling: ( useShippingAsBilling: boolean ) =>
+		( {
+			type: ACTION.SET_SHIPPING_ADDRESS_AS_BILLING_ADDRESS,
+			useShippingAsBilling,
+		} as const ),
+	setShouldCreateAccount: ( shouldCreateAccount: boolean ) =>
+		( {
+			type: ACTION.SET_SHOULD_CREATE_ACCOUNT,
+			shouldCreateAccount,
+		} as const ),
+	setOrderNotes: ( orderNotes: string ) =>
+		( {
+			type: ACTION.SET_ORDER_NOTES,
+			orderNotes,
+		} as const ),
+	setExtensionData: (
+		extensionData: Record< string, Record< string, unknown > >
+	) =>
+		( {
+			type: ACTION.SET_EXTENSION_DATA,
+			extensionData,
+		} as const ),
+};
diff --git a/assets/js/base/context/providers/cart-checkout/checkout-state/constants.ts b/assets/js/base/context/providers/cart-checkout/checkout-state/constants.ts
@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { getSetting, EnteredAddress } from '@woocommerce/settings';
+import { isSameAddress } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	CheckoutStateContextType,
+	CheckoutStateContextState,
+} from './types';
+
+export enum STATUS {
+	// Checkout is in it's initialized state.
+	PRISTINE = 'pristine',
+	// When checkout state has changed but there is no activity happening.
+	IDLE = 'idle',
+	// After BEFORE_PROCESSING status emitters have finished successfully. Payment processing is started on this checkout status.
+	PROCESSING = 'processing',
+	// After the AFTER_PROCESSING event emitters have completed. This status triggers the checkout redirect.
+	COMPLETE = 'complete',
+	// This is the state before checkout processing begins after the checkout button has been pressed/submitted.
+	BEFORE_PROCESSING = 'before_processing',
+	// After server side checkout processing is completed this status is set
+	AFTER_PROCESSING = 'after_processing',
+}
+
+const preloadedCheckoutData = getSetting( 'checkoutData', {} ) as Record<
+	string,
+	unknown
+>;
+
+const checkoutData = {
+	order_id: 0,
+	customer_id: 0,
+	billing_address: {} as EnteredAddress,
+	shipping_address: {} as EnteredAddress,
+	...( preloadedCheckoutData || {} ),
+};
+
+export const DEFAULT_CHECKOUT_STATE_DATA: CheckoutStateContextType = {
+	onSubmit: () => void null,
+	onCheckoutAfterProcessingWithSuccess: () => () => void null,
+	onCheckoutAfterProcessingWithError: () => () => void null,
+	onCheckoutBeforeProcessing: () => () => void null, // deprecated for onCheckoutValidationBeforeProcessing
+	onCheckoutValidationBeforeProcessing: () => () => void null,
+};
+
+export const DEFAULT_STATE: CheckoutStateContextState = {
+	redirectUrl: '',
+	status: STATUS.PRISTINE,
+	hasError: false,
+	calculatingCount: 0,
+	orderId: checkoutData.order_id,
+	orderNotes: '',
+	customerId: checkoutData.customer_id,
+	useShippingAsBilling: isSameAddress(
+		checkoutData.billing_address,
+		checkoutData.shipping_address
+	),
+	shouldCreateAccount: false,
+	processingResponse: null,
+	extensionData: {},
+};