Convert Product components to TS (https://github.com/woocommerce/woocommerce-blocks/pull/4098)

* Update package-lock.json

* Move Block Type Settings into Block Type Classes (https://github.com/woocommerce/woocommerce-blocks/pull/4059)

* BLOCK SETTINGS: Remove unused constants/settings

* AssetDataRegistry: Helpers to check for settings that exist, and registering page ID/permalinks

* Move checkout and cart block settings to checkout and cart blocktypes

* Move isShippingCalculatorEnabled to cart block

* Remove HAS_DARK_EDITOR_STYLE_SUPPORT and IS_SHIPPING_CALCULATOR_ENABLED in favour of getSetting

* Move displayCartPricesIncludingTax to blocktypes, and implement getSetting

* Move block settings to core settings and blocktypes

* Fix namespace usage

* Move review settings

* move tag settings

* Keep productCount in core data

* Move min and default height

* Improve storePages code

* Move attributes to attribute filter block type

* Move $word_count_type outside of settings array

* Remove unneeded setting in preview data (shippingCostRequiresAddress)

* Move min/max settings dependency from GridLayoutControl to Blocks themselves and use getSettings

* DEFAULT_COLUMNS and ROWS to settings

* Move product columns/rows to block types

* Add grid settings to AllProducts block

* Correct default rows

* correct min rows default

* Move hasDarkEditorStyleSupport

* Move hideOutOfStockItems to block type settings

* Move build settings to inline script dependency

* Pass data through asset api and move restApiRoutes

* Export all core settings as constants

* Remove WORD_COUNT_TYPE from core settings

* Move some other core settings to assets

* Update constants

* Make settings use TypeScript

* Update CURRENT_USER_IS_ADMIN usage

* WORD_COUNT_TYPE

* REST_API_ROUTES

* REVIEW_RATINGS_ENABLED and SHOW_AVATARS

* Remove REVIEW_RATINGS_ENABLED and SHOW_AVATARS constants

* Remove MIN_HEIGHT

* Remove DEFAULT_HEIGHT

* PLACEHOLDER_IMG_SRC

* LIMIT_TAGS

* HAS_PRODUCTS

* HOME_URL

* HAS_TAGS

* COUPONS_ENABLED

* SHIPPING_ENABLED

* TAXES_ENABLED

* DISPLAY_ITEMIZED_TAXES

* SHIPPING_COST_REQUIRES_ADDRESS

* SHIPPING_STATES and SHIPPING_COUNTRIES

* STORE_PAGES

* ALLOWED_COUNTRIES

* ALLOWED_STATES

* SHIPPING_METHODS_EXIST

* PAYMENT_GATEWAY_SORT_ORDER

* CHECKOUT_SHOW_LOGIN_REMINDER

* CHECKOUT_ALLOWS_GUEST and CHECKOUT_ALLOWS_SIGNUP

* ATTRIBUTES

* DISPLAY_CART_PRICES_INCLUDING_TAX

* DISPLAY_CART_PRICES_INCLUDING_TAX

* update build for TS files

* fix build dir

* Move blocks build config params

* Move placeholderImgSrc to core settings

* Move rest api hydration hoc to shared hocs and provide it restApiRoutes directly to avoid asset data registration

* Move wordCountType to abstract block

* Remove WORD_COUNT_TYPE in favour of getSetting

* Move IS_LARGE_CATALOG and PRODUCT_COUNT to abstract block type and use getSetting inline

* Add wcBlocksConfig

* fix tests

* Remove unused $asset_data_registry

* remove console.log

* Move build settings to abstract block

* Trigger build again

* Move hydration back to regular hocs for compatibility with trunk (merge conflict)

* Removed wcSharedHocsConfig

* esc home url

* Update search fixture

* Update search snap

* 40000 timeout

* hasProducts -> productCount

* Product Count is part of blocks config

* update mocks

* Use version comparison to determine if batching is enabled

* Change isWpVersion

* scrollTo button

* Rename product backorder badge to tsx

* Rename Policies component to tsx

* Convert Product badge to TS

* Convert Product Details to TypeScript

* Convert ProductImage to TypeScript

* Convert ProductLowStockBadge to TypeScript

* Move ItemData into ProductResponse type def file

* Add type defs directory to tsconfig

* Import types for ProductResponseItemData in ProductDetails

* Convert ProductMetaData to TypeScript

* Convert ProductSaleBadge to TypeScript

* Type component props to their interfaces

* Ensure components have an explicit return type of JSX.Element set

* Export PLACEHOLDER_IMG_SRC as string

* Add null to component return type

* Import PLACEHOLDER_IMG_SRC from correct location

Co-authored-by: Mike Jolley <mike.jolley@me.com>

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/index.tsx

@@ -15,7 +15,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import './style.scss';
 
-const Policies = () => {
+const Policies = (): JSX.Element => {
 	return (
 		<ul className="wc-block-components-checkout-policies">
 			{ PRIVACY_URL && (

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-backorder-badge/index.tsx

@@ -11,7 +11,7 @@ import ProductBadge from '../product-badge';
 /**
  * Returns a backorder badge.
  */
-const ProductBackorderBadge = () => {
+const ProductBackorderBadge = (): JSX.Element => {
 	return (
 		<ProductBadge className="wc-block-components-product-backorder-badge">
 			{ __( 'Available on backorder', 'woo-gutenberg-products-block' ) }

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-badge/index.tsx

@@ -2,14 +2,21 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import type { ReactNode } from 'react';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-const ProductBadge = ( { children, className } ) => {
+interface ProductBadgeProps {
+	children?: ReactNode;
+	className?: string;
+}
+const ProductBadge = ( {
+	children,
+	className,
+}: ProductBadgeProps ): JSX.Element => {
 	return (
 		<div
 			className={ classNames(
@@ -22,8 +29,4 @@ const ProductBadge = ( { children, className } ) => {
 	);
 };
 
-ProductBadge.propTypes = {
-	className: PropTypes.string,
-};
-
 export default ProductBadge;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-details/index.tsx

@@ -1,17 +1,22 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { kebabCase } from 'lodash';
 import { decodeEntities } from '@wordpress/html-entities';
+import type { ProductResponseItemData } from '@woocommerce/type-defs/product-response';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
+interface ProductDetailsProps {
+	details: ProductResponseItemData[];
+}
 // Component to display cart item data and variations.
-const ProductDetails = ( { details = [] } ) => {
+const ProductDetails = ( {
+	details = [],
+}: ProductDetailsProps ): JSX.Element | null => {
 	if ( ! Array.isArray( details ) ) {
 		return null;
 	}
@@ -52,14 +57,4 @@ const ProductDetails = ( { details = [] } ) => {
 	);
 };
 
-ProductDetails.propTypes = {
-	details: PropTypes.arrayOf(
-		PropTypes.shape( {
-			display: PropTypes.string,
-			name: PropTypes.string,
-			value: PropTypes.string.isRequired,
-		} )
-	),
-};
-
 export default ProductDetails;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-image/index.tsx

@@ -3,15 +3,17 @@
  */
 import { decodeEntities } from '@wordpress/html-entities';
 import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings';
-import PropTypes from 'prop-types';
 
+interface ProductImageProps {
+	image: { alt?: string; thumbnail?: string };
+}
 /**
  * Formats and returns an image element.
  *
  * @param {Object} props       Incoming props for the component.
  * @param {Object} props.image Image properties.
  */
-const ProductImage = ( { image = {} } ) => {
+const ProductImage = ( { image = {} }: ProductImageProps ): JSX.Element => {
 	const imageProps = {
 		src: image.thumbnail || PLACEHOLDER_IMG_SRC,
 		alt: decodeEntities( image.alt ) || '',
@@ -20,11 +22,4 @@ const ProductImage = ( { image = {} } ) => {
 	return <img { ...imageProps } alt={ imageProps.alt } />;
 };
 
-ProductImage.propTypes = {
-	image: PropTypes.shape( {
-		alt: PropTypes.string,
-		thumbnail: PropTypes.string,
-	} ),
-};
-
 export default ProductImage;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-low-stock-badge/index.tsx

@@ -8,6 +8,9 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import ProductBadge from '../product-badge';
 
+interface ProductLowStockBadgeProps {
+	lowStockRemaining: number | null;
+}
 /**
  * Returns a low stock badge.
  *
@@ -16,9 +19,7 @@ import ProductBadge from '../product-badge';
  */
 const ProductLowStockBadge = ( {
 	lowStockRemaining,
-}: {
-	lowStockRemaining: number;
-} ): JSX.Element | null => {
+}: ProductLowStockBadgeProps ): JSX.Element | null => {
 	if ( ! lowStockRemaining ) {
 		return null;
 	}

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-metadata/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
+import { ProductResponseItemData } from '@woocommerce/type-defs/product-response';
+import { CartVariationItem } from '@woocommerce/type-defs/cart';
 
 /**
  * Internal dependencies
@@ -10,12 +11,19 @@ import ProductDetails from '../product-details';
 import ProductSummary from '../product-summary';
 import './style.scss';
 
+interface ProductMetadataProps {
+	shortDescription?: string;
+	fullDescription?: string;
+	itemData: ProductResponseItemData[];
+	variation?: CartVariationItem[];
+}
+
 const ProductMetadata = ( {
 	shortDescription = '',
 	fullDescription = '',
 	itemData = [],
 	variation = [],
-} ) => {
+}: ProductMetadataProps ): JSX.Element => {
 	return (
 		<div className="wc-block-components-product-metadata">
 			<ProductSummary
@@ -34,16 +42,4 @@ const ProductMetadata = ( {
 	);
 };
 
-ProductMetadata.propTypes = {
-	shortDescription: PropTypes.string,
-	fullDescription: PropTypes.string,
-	itemData: PropTypes.array,
-	variation: PropTypes.arrayOf(
-		PropTypes.shape( {
-			attribute: PropTypes.string,
-			value: PropTypes.string.isRequired,
-		} )
-	),
-};
-
 export default ProductMetadata;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-sale-badge/index.tsx

@@ -4,13 +4,18 @@
 import { createInterpolateElement } from 'wordpress-element';
 import { __, sprintf } from '@wordpress/i18n';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
-import PropTypes from 'prop-types';
+import type { Currency } from '@woocommerce/price-format';
 
 /**
  * Internal dependencies
  */
 import ProductBadge from '../product-badge';
 
+interface ProductSaleBadgeProps {
+	currency: Currency;
+	saleAmount: number;
+	format: string;
+}
 /**
  * ProductSaleBadge
  *
@@ -20,7 +25,11 @@ import ProductBadge from '../product-badge';
  * @param {string} [props.format]   Format to change the price.
  * @return {*} The component.
  */
-const ProductSaleBadge = ( { currency, saleAmount, format = '<price/>' } ) => {
+const ProductSaleBadge = ( {
+	currency,
+	saleAmount,
+	format = '<price/>',
+}: ProductSaleBadgeProps ): JSX.Element | null => {
 	if ( ! saleAmount || saleAmount <= 0 ) {
 		return null;
 	}
@@ -50,9 +59,4 @@ const ProductSaleBadge = ( { currency, saleAmount, format = '<price/>' } ) => {
 	);
 };
 
-ProductSaleBadge.propTypes = {
-	currency: PropTypes.object,
-	saleAmount: PropTypes.number,
-};
-
 export default ProductSaleBadge;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-location/index.js

@@ -17,7 +17,6 @@ const ShippingLocation = ( { address } ) => {
 	if ( Object.values( address ).length === 0 ) {
 		return null;
 	}
-
 	const shippingCountries = getSetting( 'shippingCountries', {} );
 	const shippingStates = getSetting( 'shippingStates', {} );
 	const formattedCountry =

plugins/woocommerce-blocks/assets/js/base/components/tsconfig.json

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

plugins/woocommerce-blocks/assets/js/settings/shared/default-constants.ts

@@ -13,7 +13,7 @@ export const CURRENT_USER_IS_ADMIN = allSettings.currentUserIsAdmin;
 export const HOME_URL = allSettings.homeUrl;
 export const LOCALE = allSettings.locale;
 export const ORDER_STATUSES = allSettings.orderStatuses;
-export const PLACEHOLDER_IMG_SRC = allSettings.placeholderImgSrc;
+export const PLACEHOLDER_IMG_SRC = allSettings.placeholderImgSrc as string;
 export const SITE_TITLE = allSettings.siteTitle;
 export const STORE_PAGES = allSettings.storePages as Record<
 	string,

plugins/woocommerce-blocks/assets/js/type-defs/product-response.ts

@@ -22,6 +22,13 @@ export interface ProductResponseItemPrices extends CurrencyResponseInfo {
 	};
 }
 
+export interface ProductResponseItemData {
+	name: string;
+	value: string;
+	display?: string;
+	hidden?: boolean;
+}
+
 export interface ProductResponseImageItem {
 	id: number;
 	src: string;

plugins/woocommerce-blocks/package-lock.json

@@ -4437,6 +4437,25 @@
 			"integrity": "sha512-CUZv3WdPvWqnEwojbc4yEttwZlvsMGI8YurgB9CHVJXx6nQ4U2RU6PB0Mv7nxATufduFDMKq8TNpCHBenZqEjQ==",
 			"dev": true
 		},
+		"@types/wordpress__notices": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/@types/wordpress__notices/-/wordpress__notices-1.5.4.tgz",
+			"integrity": "sha512-JkWWwukEvv2o8xzyYXi5iveMgUnPZXIgQfw0u/IQkSZE8+1XTJgokLwo3Ks5PrWHEzlPCZXWQXQsGeShdoOkyQ==",
+			"requires": {
+				"@types/react": "*",
+				"@types/wordpress__data": "*"
+			}
+		},
+		"@types/wordpress__rich-text": {
+			"version": "3.4.5",
+			"resolved": "https://registry.npmjs.org/@types/wordpress__rich-text/-/wordpress__rich-text-3.4.5.tgz",
+			"integrity": "sha512-NMCq//2C9XBLmbYItJVdbWGkB8paoMjSNwiDu8phujQJ0pKhRFJPlvwdfVfuImgfSoK7hO9LnK2QyIUSV3OPzg==",
+			"requires": {
+				"@types/react": "*",
+				"@types/wordpress__data": "*",
+				"@types/wordpress__rich-text": "*"
+			}
+		},
 		"@types/yargs": {
 			"version": "15.0.13",
 			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",