Feature: Data Store Migration

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js

@@ -6,10 +6,9 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { SelectControl } from 'wordpress-components';
 import { useEffect } from 'react';
 import classnames from 'classnames';
-import {
-	ValidationInputError,
-	useValidationContext,
-} from '@woocommerce/base-context';
+import { ValidationInputError } from '@woocommerce/base-components/validation-input-error';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 // Default option for select boxes.
 const selectAnOption = {
@@ -32,10 +31,17 @@ const AttributeSelectControl = ( {
 		'woo-gutenberg-products-block'
 	),
 } ) => {
-	const { getValidationError, setValidationErrors, clearValidationError } =
-		useValidationContext();
 	const errorId = attributeName;
-	const error = getValidationError( errorId ) || {};
+
+	const { setValidationErrors, clearValidationError } =
+		useDispatch( VALIDATION_STORE_KEY );
+
+	const { error } = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return {
+			error: store.getValidationError( errorId ) || {},
+		};
+	} );
 
 	useEffect( () => {
 		if ( value ) {
@@ -73,7 +79,7 @@ const AttributeSelectControl = ( {
 				className={ classnames(
 					'wc-block-components-product-add-to-cart-attribute-picker__select',
 					{
-						'has-error': error.message && ! error.hidden,
+						'has-error': error?.message && ! error?.hidden,
 					}
 				) }
 			/>

assets/js/base/components/cart-checkout/address-form/address-form.tsx

@@ -10,7 +10,6 @@ import {
 	BillingStateInput,
 	ShippingStateInput,
 } from '@woocommerce/base-components/state-input';
-import { useValidationContext } from '@woocommerce/base-context';
 import { useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@wordpress/compose';
@@ -22,6 +21,11 @@ import {
 	defaultAddressFields,
 	EnteredAddress,
 } from '@woocommerce/settings';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	VALIDATION_STORE_KEY,
+	FieldValidationStatus,
+} from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -32,17 +36,20 @@ import prepareAddressFields from './prepare-address-fields';
 // values without having set the country first, show an error.
 const validateShippingCountry = (
 	values: EnteredAddress,
-	setValidationErrors: ( errors: Record< string, unknown > ) => void,
+	setValidationErrors: (
+		errors: Record< string, FieldValidationStatus >
+	) => void,
 	clearValidationError: ( error: string ) => void,
 	hasValidationError: boolean
 ): void => {
+	const validationErrorId = 'shipping-missing-country';
 	if (
 		! hasValidationError &&
 		! values.country &&
 		( values.city || values.state || values.postcode )
 	) {
 		setValidationErrors( {
-			'shipping-missing-country': {
+			[ validationErrorId ]: {
 				message: __(
 					'Please select a country to calculate rates.',
 					'woo-gutenberg-products-block'
@@ -52,7 +59,7 @@ const validateShippingCountry = (
 		} );
 	}
 	if ( hasValidationError && values.country ) {
-		clearValidationError( 'shipping-missing-country' );
+		clearValidationError( validationErrorId );
 	}
 };
 
@@ -87,17 +94,16 @@ const AddressForm = ( {
 	type = 'shipping',
 	values,
 }: AddressFormProps ): JSX.Element => {
-	const { getValidationError, setValidationErrors, clearValidationError } =
-		useValidationContext();
+	const validationErrorId = 'shipping-missing-country';
+	const { setValidationErrors, clearValidationError } =
+		useDispatch( VALIDATION_STORE_KEY );
 
-	const currentFields = useShallowEqual( fields );
+	const countryValidationError = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return store.getValidationError( validationErrorId );
+	} );
 
-	const countryValidationError = ( getValidationError(
-		'shipping-missing-country'
-	) || {} ) as {
-		message: string;
-		hidden: boolean;
-	};
+	const currentFields = useShallowEqual( fields );
 
 	const addressFormFields = useMemo( () => {
 		return prepareAddressFields(
@@ -125,14 +131,14 @@ const AddressForm = ( {
 				values,
 				setValidationErrors,
 				clearValidationError,
-				!! countryValidationError.message &&
-					! countryValidationError.hidden
+				!! countryValidationError?.message &&
+					! countryValidationError?.hidden
 			);
 		}
 	}, [
 		values,
-		countryValidationError.message,
-		countryValidationError.hidden,
+		countryValidationError?.message,
+		countryValidationError?.hidden,
 		setValidationErrors,
 		clearValidationError,
 		type,

assets/js/base/components/cart-checkout/shipping-calculator/address.tsx

@@ -5,8 +5,9 @@ import { __ } from '@wordpress/i18n';
 import Button from '@woocommerce/base-components/button';
 import { useState } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
-import { useValidationContext } from '@woocommerce/base-context';
 import type { EnteredAddress, AddressFields } from '@woocommerce/settings';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -25,12 +26,18 @@ const ShippingCalculatorAddress = ( {
 	addressFields,
 }: ShippingCalculatorAddressProps ): JSX.Element => {
 	const [ address, setAddress ] = useState( initialAddress );
-	const { hasValidationErrors, showAllValidationErrors } =
-		useValidationContext();
+	const { showAllValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
+
+	const { hasValidationErrors } = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return {
+			hasValidationErrors: store.hasValidationErrors,
+		};
+	} );
 
 	const validateSubmit = () => {
 		showAllValidationErrors();
-		return ! hasValidationErrors;
+		return ! hasValidationErrors();
 	};
 
 	return (

assets/js/base/components/cart-checkout/totals/coupon/index.tsx

@@ -4,15 +4,14 @@
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import Button from '@woocommerce/base-components/button';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import { Panel } from '@woocommerce/blocks-checkout';
 import Label from '@woocommerce/base-components/label';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
 import { withInstanceId } from '@wordpress/compose';
-import {
-	ValidationInputError,
-	useValidationContext,
-} from '@woocommerce/base-context';
-import { Panel } from '@woocommerce/blocks-checkout';
+import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import ValidationInputError from '@woocommerce/base-components/validation-input-error';
+import { useSelect } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -46,8 +45,17 @@ export const TotalsCoupon = ( {
 }: TotalsCouponProps ): JSX.Element => {
 	const [ couponValue, setCouponValue ] = useState( '' );
 	const currentIsLoading = useRef( false );
-	const { getValidationError, getValidationErrorId } = useValidationContext();
-	const validationError = getValidationError( 'coupon' );
+
+	const validationErrorKey = 'coupon';
+	const textInputId = `wc-block-components-totals-coupon__input-${ instanceId }`;
+
+	const { validationError, validationErrorId } = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return {
+			validationError: store.getValidationError( validationErrorKey ),
+			validationErrorId: store.getValidationErrorId( textInputId ),
+		};
+	} );
 
 	useEffect( () => {
 		if ( currentIsLoading.current !== isLoading ) {
@@ -58,8 +66,6 @@ export const TotalsCoupon = ( {
 		}
 	}, [ isLoading, couponValue, validationError ] );
 
-	const textInputId = `wc-block-components-totals-coupon__input-${ instanceId }`;
-
 	return (
 		<Panel
 			className="wc-block-components-totals-coupon"
@@ -98,9 +104,7 @@ export const TotalsCoupon = ( {
 								'woo-gutenberg-products-block'
 							) }
 							value={ couponValue }
-							ariaDescribedBy={ getValidationErrorId(
-								textInputId
-							) }
+							ariaDescribedBy={ validationErrorId }
 							onChange={ ( newCouponValue ) => {
 								setCouponValue( newCouponValue );
 							} }
@@ -112,7 +116,10 @@ export const TotalsCoupon = ( {
 							disabled={ isLoading || ! couponValue }
 							showSpinner={ isLoading }
 							onClick={ (
-								e: React.MouseEvent< HTMLElement, 'click' >
+								e: React.MouseEvent<
+									HTMLButtonElement,
+									MouseEvent
+								>
 							) => {
 								e.preventDefault();
 								onSubmit( couponValue );

assets/js/base/components/cart-checkout/totals/coupon/stories/index.tsx

@@ -3,11 +3,9 @@
  */
 import { useArgs } from '@storybook/client-api';
 import { Story, Meta } from '@storybook/react';
-import {
-	useValidationContext,
-	ValidationContextProvider,
-} from '@woocommerce/base-context';
 import { INTERACTION_TIMEOUT } from '@woocommerce/storybook-controls';
+import { useDispatch } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -52,7 +50,7 @@ LoadingState.args = {
 };
 
 export const ErrorState: Story< TotalsCouponProps > = ( args ) => {
-	const { setValidationErrors } = useValidationContext();
+	const { setValidationErrors } = useDispatch( VALIDATION_STORE_KEY );
 
 	setValidationErrors( { coupon: INVALID_COUPON_ERROR } );
 
@@ -61,10 +59,6 @@ export const ErrorState: Story< TotalsCouponProps > = ( args ) => {
 
 ErrorState.decorators = [
 	( StoryComponent ) => {
-		return (
-			<ValidationContextProvider>
-				<StoryComponent />
-			</ValidationContextProvider>
-		);
+		return <StoryComponent />;
 	},
 ];

assets/js/base/components/combobox/index.tsx

@@ -6,11 +6,10 @@ import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
 import { withInstanceId } from '@wordpress/compose';
 import { ComboboxControl } from 'wordpress-components';
-import {
-	ValidationInputError,
-	useValidationContext,
-} from '@woocommerce/base-context';
+import { ValidationInputError } from '@woocommerce/base-components/validation-input-error';
 import { isObject } from '@woocommerce/types';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -55,19 +54,16 @@ const Combobox = ( {
 	instanceId = '0',
 	autoComplete = 'off',
 }: ComboboxProps ): JSX.Element => {
-	const { getValidationError, setValidationErrors, clearValidationError } =
-		useValidationContext();
-
 	const controlRef = useRef< HTMLDivElement >( null );
 	const controlId = id || 'control-' + instanceId;
 	const errorId = incomingErrorId || controlId;
-	const error = ( getValidationError( errorId ) || {
-		message: '',
-		hidden: false,
-	} ) as {
-		message: string;
-		hidden: boolean;
-	};
+
+	const { setValidationErrors, clearValidationError } =
+		useDispatch( VALIDATION_STORE_KEY );
+	const error = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return store.getValidationError( errorId );
+	} );
 
 	useEffect( () => {
 		if ( ! required || value ) {
@@ -99,7 +95,7 @@ const Combobox = ( {
 			id={ controlId }
 			className={ classnames( 'wc-block-components-combobox', className, {
 				'is-active': value,
-				'has-error': error.message && ! error.hidden,
+				'has-error': error?.message && ! error?.hidden,
 			} ) }
 			ref={ controlRef }
 		>
@@ -142,7 +138,7 @@ const Combobox = ( {
 				value={ value || '' }
 				allowReset={ false }
 				autoComplete={ autoComplete }
-				aria-invalid={ error.message && ! error.hidden }
+				aria-invalid={ error?.message && ! error?.hidden }
 			/>
 			<ValidationInputError propertyName={ errorId } />
 		</div>

assets/js/base/components/country-input/stories/index.tsx

@@ -2,11 +2,9 @@
  * External dependencies
  */
 import { Story, Meta } from '@storybook/react';
-import {
-	useValidationContext,
-	ValidationContextProvider,
-} from '@woocommerce/base-context';
+import { useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 
 /**
  * Internal dependencies
@@ -31,21 +29,15 @@ export default {
 		options: { table: { disable: true } },
 		value: { control: false },
 	},
-	decorators: [
-		( StoryComponent ) => (
-			<ValidationContextProvider>
-				<StoryComponent />
-			</ValidationContextProvider>
-		),
-	],
+	decorators: [ ( StoryComponent ) => <StoryComponent /> ],
 } as Meta< CountryInputWithCountriesProps >;
 
 const Template: Story< CountryInputWithCountriesProps > = ( args ) => {
 	const [ selectedCountry, selectCountry ] = useState< CountryCode | '' >(
 		''
 	);
 	const { clearValidationError, showValidationError } =
-		useValidationContext();
+		useDispatch( VALIDATION_STORE_KEY );
 
 	useEffect( () => {
 		showValidationError( 'country' );

assets/js/base/components/state-input/state-input.tsx

@@ -5,11 +5,11 @@ import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCallback, useMemo, useEffect, useRef } from '@wordpress/element';
 import classnames from 'classnames';
+import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
 
 /**
  * Internal dependencies
  */
-import { ValidatedTextInput } from '../text-input';
 import Combobox from '../combobox';
 import './style.scss';
 import type { StateInputWithStatesProps } from './StateInputProps';