Merge branch 'update/field-validation-messages-7729' of https://githu…

…b.com/woocommerce/woocommerce-blocks into update/field-validation-messages-7729

assets/js/atomic/blocks/product-elements/add-to-cart/block.js → assets/js/atomic/blocks/product-elements/add-to-cart/block.tsx

@@ -23,36 +23,16 @@ import {
 	GroupedProductForm,
 } from './product-types';
 
-/**
- * Product Add to Form Block Component.
- *
- * @param {Object}  props                    Incoming props.
- * @param {string}  [props.className]        CSS Class name for the component.
- * @param {boolean} [props.showFormElements] Should form elements be shown?
- * @return {*} The component.
- */
-const Block = ( { className, showFormElements } ) => {
-	const { product } = useProductDataContext();
-	const componentClass = classnames(
-		className,
-		'wc-block-components-product-add-to-cart',
-		{
-			'wc-block-components-product-add-to-cart--placeholder':
-				isEmpty( product ),
-		}
-	);
-
-	return (
-		<AddToCartFormContextProvider
-			product={ product }
-			showFormElements={ showFormElements }
-		>
-			<div className={ componentClass }>
-				<AddToCartForm />
-			</div>
-		</AddToCartFormContextProvider>
-	);
-};
+interface Props {
+	/**
+	 * CSS Class name for the component.
+	 */
+	className?: string;
+	/**
+	 * Whether or not to show form elements.
+	 */
+	showFormElements?: boolean;
+}
 
 /**
  * Renders the add to cart form using useAddToCartFormContext.
@@ -79,6 +59,32 @@ const AddToCartForm = () => {
 	return <AddToCartButton />;
 };
 
+/**
+ * Product Add to Form Block Component.
+ */
+const Block = ( { className, showFormElements }: Props ) => {
+	const { product } = useProductDataContext();
+	const componentClass = classnames(
+		className,
+		'wc-block-components-product-add-to-cart',
+		{
+			'wc-block-components-product-add-to-cart--placeholder':
+				isEmpty( product ),
+		}
+	);
+
+	return (
+		<AddToCartFormContextProvider
+			product={ product }
+			showFormElements={ showFormElements }
+		>
+			<div className={ componentClass }>
+				<AddToCartForm />
+			</div>
+		</AddToCartFormContextProvider>
+	);
+};
+
 Block.propTypes = {
 	className: PropTypes.string,
 };

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/simple.js → assets/js/atomic/blocks/product-elements/add-to-cart/product-types/simple.tsx

@@ -13,6 +13,7 @@ import { AddToCartButton, QuantityInput, ProductUnavailable } from '../shared';
  * Simple Product Add To Cart Form
  */
 const Simple = () => {
+	// @todo Add types for `useAddToCartFormContext`
 	const {
 		product,
 		quantity,

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/index.js → assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/index.tsx

@@ -18,6 +18,7 @@ import VariationAttributes from './variation-attributes';
  * Variable Product Add To Cart Form
  */
 const Variable = () => {
+	// @todo Add types for `useAddToCartFormContext`
 	const {
 		product,
 		quantity,

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/types.ts

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { Dictionary } from '@woocommerce/types';
+
+export type AttributesMap = Record<
+	string,
+	{ id: number; attributes: Dictionary }
+>;
+
+export interface VariationParam {
+	id: number;
+	variation: {
+		attribute: string;
+		value: string;
+	}[];
+}

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-picker.js → assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-picker.tsx

@@ -3,6 +3,8 @@
  */
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { useShallowEqual } from '@woocommerce/base-hooks';
+import type { SelectControl } from '@wordpress/components';
+import { Dictionary, ProductResponseAttributeItem } from '@woocommerce/types';
 
 /**
  * Internal dependencies
@@ -13,21 +15,27 @@ import {
 	getActiveSelectControlOptions,
 	getDefaultAttributes,
 } from './utils';
+import { AttributesMap, VariationParam } from '../types';
+
+interface Props {
+	attributes: Record< string, ProductResponseAttributeItem >;
+	setRequestParams: ( param: VariationParam ) => void;
+	variationAttributes: AttributesMap;
+}
 
 /**
  * AttributePicker component.
- *
- * @param {*} props Component props.
  */
 const AttributePicker = ( {
 	attributes,
 	variationAttributes,
 	setRequestParams,
-} ) => {
+}: Props ) => {
 	const currentAttributes = useShallowEqual( attributes );
 	const currentVariationAttributes = useShallowEqual( variationAttributes );
 	const [ variationId, setVariationId ] = useState( 0 );
-	const [ selectedAttributes, setSelectedAttributes ] = useState( {} );
+	const [ selectedAttributes, setSelectedAttributes ] =
+		useState< Dictionary >( {} );
 	const [ hasSetDefaults, setHasSetDefaults ] = useState( false );
 
 	// Get options for each attribute picker.
@@ -99,7 +107,11 @@ const AttributePicker = ( {
 				<AttributeSelectControl
 					key={ attributeName }
 					attributeName={ attributeName }
-					options={ filteredAttributeOptions[ attributeName ] }
+					options={
+						filteredAttributeOptions[ attributeName ].filter(
+							Boolean
+						) as SelectControl.Option[]
+					}
 					value={ selectedAttributes[ attributeName ] }
 					onChange={ ( selected ) => {
 						setSelectedAttributes( {

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

@@ -4,12 +4,18 @@
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { SelectControl } from 'wordpress-components';
+import type { SelectControl as SelectControlType } from '@wordpress/components';
 import { useEffect } from 'react';
 import classnames from 'classnames';
 import { ValidationInputError } from '@woocommerce/blocks-checkout';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 
+interface Props extends SelectControlType.Props< string > {
+	attributeName: string;
+	errorMessage?: string;
+}
+
 // Default option for select boxes.
 const selectAnOption = {
 	value: '',
@@ -18,19 +24,17 @@ const selectAnOption = {
 
 /**
  * VariationAttributeSelect component.
- *
- * @param {*} props Component props.
  */
 const AttributeSelectControl = ( {
 	attributeName,
 	options = [],
 	value = '',
-	onChange = () => {},
+	onChange = () => void 0,
 	errorMessage = __(
 		'Please select a value.',
 		'woo-gutenberg-products-block'
 	),
-} ) => {
+}: Props ) => {
 	const errorId = attributeName;
 
 	const { setValidationErrors, clearValidationError } =

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.js → assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.tsx

@@ -1,23 +1,29 @@
+/**
+ * External dependencies
+ */
+import { ProductResponseItem } from '@woocommerce/types';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 import AttributePicker from './attribute-picker';
 import { getAttributes, getVariationAttributes } from './utils';
 
+interface Props {
+	dispatchers: { setRequestParams: () => void };
+	product: ProductResponseItem;
+}
+
 /**
  * VariationAttributes component.
- *
- * @param {Object} props             Incoming props
- * @param {Object} props.product     Product
- * @param {Object} props.dispatchers An object where values are dispatching functions.
  */
-const VariationAttributes = ( { product, dispatchers } ) => {
+const VariationAttributes = ( { dispatchers, product }: Props ) => {
 	const attributes = getAttributes( product.attributes );
 	const variationAttributes = getVariationAttributes( product.variations );
 	if (
 		Object.keys( attributes ).length === 0 ||
-		variationAttributes.length === 0
+		Object.keys( variationAttributes ).length === 0
 	) {
 		return null;
 	}

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/test/index.js → assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/test/index.ts

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { ProductResponseAttributeItem } from '@woocommerce/types';
+
 /**
  * Internal dependencies
  */
@@ -10,7 +15,7 @@ import {
 	getDefaultAttributes,
 } from '../utils';
 
-const rawAttributeData = [
+const rawAttributeData: ProductResponseAttributeItem[] = [
 	{
 		id: 1,
 		name: 'Color',
@@ -40,7 +45,7 @@ const rawAttributeData = [
 	{
 		id: 0,
 		name: 'Logo',
-		taxonomy: null,
+		taxonomy: 'pa_logo',
 		has_variations: true,
 		terms: [
 			{
@@ -60,7 +65,7 @@ const rawAttributeData = [
 	{
 		id: 0,
 		name: 'Non-variable attribute',
-		taxonomy: null,
+		taxonomy: 'pa_non-variable-attribute',
 		has_variations: false,
 		terms: [
 			{
@@ -227,7 +232,7 @@ describe( 'Testing utils', () => {
 				Logo: {
 					id: 0,
 					name: 'Logo',
-					taxonomy: null,
+					taxonomy: 'pa_logo',
 					has_variations: true,
 					terms: [
 						{
@@ -471,8 +476,11 @@ describe( 'Testing utils', () => {
 		} );
 
 		it( 'should return an empty object if given unexpected values', () => {
+			// @ts-expect-error Expected TS Error as we are checking how the function does with *unexpected values*.
 			expect( getDefaultAttributes( [] ) ).toStrictEqual( {} );
+			// @ts-expect-error Ditto above.
 			expect( getDefaultAttributes( null ) ).toStrictEqual( {} );
+			// @ts-expect-error Ditto above.
 			expect( getDefaultAttributes( undefined ) ).toStrictEqual( {} );
 		} );
 	} );