Move TextInput to checkout package and allow it to be used for inpu…

…t type=number (#4238)

* Move text-input to checkout package

* Pass validation props directly to ValidatedTextInput

* Import label relatively instead of from package

* Pass validation functions to ValidatedTextInput

This is so it doesn't need to get them from useValidationContext.

* Add InputProps to ValidatedTextInput

This will be used to control additional props on the input element of TextInput

* Spread inputProps onto <input> element of TextInput

* Export TextInput from @woocommerce/blocks-checkout

* Add @woocommerce/blocks-checkout package to tsconfig

* Allow styling to be applied to number inputs and when value is 0

* Make style order consistent

* Remove inputProps to rely on rest in TextInput

* Add specific prop for the inputErrorComponent

* Only disallow active state if value is 0 AND type is number

* Change all uses of ValidatedTextInput to also pass inputErrorComponent

* Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent"

This reverts commit ec734b9.

* Revert "Remove inputProps to rely on rest in TextInput"

This reverts commit 1fc64cc.

* Revert "Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent""

This reverts commit 110e360.

* Revert "Revert "Remove inputProps to rely on rest in TextInput""

This reverts commit aeb0352.

* Don't pass errorMessage to ValidatedTextInput

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
 import {
 	BillingCountryInput,
 	ShippingCountryInput,
@@ -11,7 +11,10 @@ import {
 	BillingStateInput,
 	ShippingStateInput,
 } from '@woocommerce/base-components/state-input';
-import { useValidationContext } from '@woocommerce/base-context';
+import {
+	useValidationContext,
+	ValidationInputError,
+} from '@woocommerce/base-context';
 import { useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
@@ -74,10 +77,20 @@ const AddressForm = ( {
 } ) => {
 	const {
 		getValidationError,
+		getValidationErrorId,
 		setValidationErrors,
 		clearValidationError,
+		hideValidationError,
 	} = useValidationContext();
 
+	const textInputValidationFunctions = {
+		getValidationError,
+		getValidationErrorId,
+		setValidationErrors,
+		clearValidationError,
+		hideValidationError,
+	};
+
 	const currentFields = useShallowEqual( fields );
 
 	const countryValidationError =
@@ -201,8 +214,9 @@ const AddressForm = ( {
 								[ field.key ]: newValue,
 							} )
 						}
-						errorMessage={ field.errorMessage }
 						required={ field.required }
+						inputErrorComponent={ ValidationInputError }
+						{ ...textInputValidationFunctions }
 					/>
 				);
 			} ) }

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

@@ -3,8 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { Button, Panel, Label } from '@woocommerce/blocks-checkout';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import {
+	Button,
+	Panel,
+	Label,
+	ValidatedTextInput,
+} from '@woocommerce/blocks-checkout';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
 import PropTypes from 'prop-types';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
@@ -26,7 +30,21 @@ const TotalsCoupon = ( {
 } ) => {
 	const [ couponValue, setCouponValue ] = useState( '' );
 	const currentIsLoading = useRef( false );
-	const { getValidationError, getValidationErrorId } = useValidationContext();
+	const {
+		getValidationError,
+		getValidationErrorId,
+		setValidationErrors,
+		clearValidationError,
+		hideValidationError,
+	} = useValidationContext();
+
+	const textInputValidationFunctions = {
+		getValidationError,
+		getValidationErrorId,
+		setValidationErrors,
+		clearValidationError,
+		hideValidationError,
+	};
 
 	const validationError = getValidationError( 'coupon' );
 
@@ -88,6 +106,8 @@ const TotalsCoupon = ( {
 							validateOnMount={ false }
 							focusOnMount={ true }
 							showError={ false }
+							inputErrorComponent={ ValidationInputError }
+							{ ...textInputValidationFunctions }
 						/>
 						<Button
 							className="wc-block-components-totals-coupon__button"

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

@@ -3,14 +3,18 @@
  */
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
+import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCallback, useMemo } from '@wordpress/element';
 import classnames from 'classnames';
+import {
+	useValidationContext,
+	ValidationInputError,
+} from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
  */
-import { ValidatedTextInput } from '../text-input';
 import { ValidatedSelect } from '../select';
 import './style.scss';
 
@@ -25,6 +29,22 @@ const StateInput = ( {
 	value = '',
 	required = false,
 } ) => {
+	const {
+		getValidationError,
+		getValidationErrorId,
+		setValidationErrors,
+		clearValidationError,
+		hideValidationError,
+	} = useValidationContext();
+
+	const textInputValidationFunctions = {
+		getValidationError,
+		getValidationErrorId,
+		setValidationErrors,
+		clearValidationError,
+		hideValidationError,
+	};
+
 	const countryStates = states[ country ];
 	const options = useMemo(
 		() =>
@@ -108,6 +128,8 @@ const StateInput = ( {
 			autoComplete={ autoComplete }
 			value={ value }
 			required={ required }
+			inputErrorComponent={ ValidationInputError }
+			{ ...textInputValidationFunctions }
 		/>
 	);
 };

assets/js/base/components/tsconfig.json

@@ -1,6 +1,6 @@
 {
 	"extends": "../../../../tsconfig.base.json",
 	"compilerOptions": {},
-	"include": [ ".", "../../../../packages/prices", "../context/hooks", "../../type-defs" ],
+	"include": [ ".", "../../../../packages/prices", "../../../../packages/checkout", "../context/hooks", "../../type-defs" ],
 	"exclude": [ "**/test/**" ]
 }

assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js

@@ -3,8 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
-import { useCheckoutContext } from '@woocommerce/base-context';
+import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import {
+	useCheckoutContext,
+	useValidationContext,
+	ValidationInputError,
+} from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
 import CheckboxControl from '@woocommerce/base-components/checkbox-control';
 
@@ -23,6 +27,21 @@ const ContactFieldsStep = ( {
 		shouldCreateAccount,
 		setShouldCreateAccount,
 	} = useCheckoutContext();
+	const {
+		getValidationError,
+		getValidationErrorId,
+		setValidationErrors,
+		clearValidationError,
+		hideValidationError,
+	} = useValidationContext();
+
+	const textInputValidationFunctions = {
+		getValidationError,
+		getValidationErrorId,
+		setValidationErrors,
+		clearValidationError,
+		hideValidationError,
+	};
 
 	const createAccountUI = ! customerId &&
 		allowCreateAccount &&
@@ -61,6 +80,8 @@ const ContactFieldsStep = ( {
 				autoComplete="email"
 				onChange={ onChangeEmail }
 				required={ true }
+				inputErrorComponent={ ValidationInputError }
+				{ ...textInputValidationFunctions }
 			/>
 			{ createAccountUI }
 		</FormStep>

assets/js/blocks/cart-checkout/checkout/form/phone-number/index.js

@@ -2,7 +2,11 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import {
+	useValidationContext,
+	ValidationInputError,
+} from '@woocommerce/base-context';
 
 /**
  * Renders a phone number input.
@@ -14,6 +18,21 @@ import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
  * @return {*} The component.
  */
 const PhoneNumber = ( { isRequired = false, value = '', onChange } ) => {
+	const {
+		getValidationError,
+		getValidationErrorId,
+		setValidationErrors,
+		clearValidationError,
+		hideValidationError,
+	} = useValidationContext();
+
+	const textInputValidationFunctions = {
+		getValidationError,
+		getValidationErrorId,
+		setValidationErrors,
+		clearValidationError,
+		hideValidationError,
+	};
 	return (
 		<ValidatedTextInput
 			id="phone"
@@ -27,6 +46,8 @@ const PhoneNumber = ( { isRequired = false, value = '', onChange } ) => {
 			}
 			value={ value }
 			onChange={ onChange }
+			inputErrorComponent={ ValidationInputError }
+			{ ...textInputValidationFunctions }
 		/>
 	);
 };

packages/checkout/index.js

@@ -1,6 +1,7 @@
 export * from './totals';
 export * from './utils';
 export * from './slot';
+export * from './text-input';
 export * from './registry';
 export { default as ExperimentalOrderMeta } from './order-meta';
 export { default as ExperimentalOrderShippingPackages } from './order-shipping-packages';

assets/js/base/components/text-input/style.scss → packages/checkout/text-input/style.scss

@@ -39,6 +39,7 @@
 
 	input[type="tel"],
 	input[type="url"],
+	input[type="number"],
 	input[type="text"],
 	input[type="email"] {
 		@include font-size(regular);
@@ -74,6 +75,7 @@
 
 	&.is-active input[type="tel"],
 	&.is-active input[type="url"],
+	&.is-active input[type="number"],
 	&.is-active input[type="text"],
 	&.is-active input[type="email"] {
 		padding: em($gap-large) 0 em($gap-smallest) $gap;

assets/js/base/components/text-input/text-input.tsx → packages/checkout/text-input/text-input.tsx

@@ -4,12 +4,12 @@
 import { forwardRef, InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { useState } from '@wordpress/element';
-import { Label } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import Label from '../label';
 
 interface TextInputProps
 	extends Omit<
@@ -49,18 +49,21 @@ const TextInput = forwardRef< HTMLInputElement, TextInputProps >(
 				/* Do nothing */
 			},
 			feedback,
+			...rest
 		},
 		ref
 	) => {
 		const [ isActive, setIsActive ] = useState( false );
-
 		return (
 			<div
 				className={ classnames(
 					'wc-block-components-text-input',
 					className,
 					{
-						'is-active': isActive || value,
+						'is-active':
+							isActive ||
+							value ||
+							( value === 0 && type === 'number' ),
 					}
 				) }
 			>
@@ -87,6 +90,7 @@ const TextInput = forwardRef< HTMLInputElement, TextInputProps >(
 							: ariaDescribedBy
 					}
 					required={ required }
+					{ ...rest }
 				/>
 				<Label
 					label={ label }

assets/js/base/components/text-input/validated-text-input.tsx → packages/checkout/text-input/validated-text-input.tsx

@@ -2,12 +2,8 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useRef, useEffect, useState } from 'react';
+import { useCallback, useRef, useEffect, useState, Component } from 'react';
 import classnames from 'classnames';
-import {
-	ValidationInputError,
-	useValidationContext,
-} from '@woocommerce/base-context';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
 
 /**
@@ -37,6 +33,18 @@ type ValidatedTextInputProps = (
 	focusOnMount?: boolean;
 	showError?: boolean;
 	onChange: ( newValue: string ) => void;
+	// @todo Type this properly when validation context is typed
+	getValidationError: (
+		errorId: string
+	) => {
+		message?: string;
+		hidden?: boolean;
+	};
+	hideValidationError: ( errorId: string ) => void;
+	setValidationErrors: ( errors: Record< string, unknown > ) => void;
+	clearValidationError: ( errorId: string ) => void;
+	getValidationErrorId: ( errorId: string ) => string;
+	inputErrorComponent: typeof Component;
 };
 
 const ValidatedTextInput = ( {
@@ -49,18 +57,16 @@ const ValidatedTextInput = ( {
 	focusOnMount = false,
 	onChange,
 	showError = true,
+	getValidationError,
+	hideValidationError,
+	setValidationErrors,
+	clearValidationError,
+	getValidationErrorId,
+	inputErrorComponent: ValidationInputError,
 	...rest
 }: ValidatedTextInputProps ) => {
 	const [ isPristine, setIsPristine ] = useState( true );
 	const inputRef = useRef< HTMLInputElement >( null );
-	const {
-		getValidationError,
-		hideValidationError,
-		setValidationErrors,
-		clearValidationError,
-		getValidationErrorId,
-	} = useValidationContext();
-
 	const textInputId =
 		typeof id !== 'undefined' ? id : 'textinput-' + instanceId;
 	const errorIdString = errorId !== undefined ? errorId : textInputId;