Convert product-elements/price to TypeScript

assets/js/atomic/blocks/product-elements/price/attributes.js → assets/js/atomic/blocks/product-elements/price/attributes.ts

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
+import { BlockAttributes } from '@wordpress/blocks';
 
-export const blockAttributes = {
+export const blockAttributes: BlockAttributes = {
 	productId: {
 		type: 'number',
 		default: 0,

assets/js/atomic/blocks/product-elements/price/block.js → assets/js/atomic/blocks/product-elements/price/block.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import ProductPrice from '@woocommerce/base-components/product-price';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
@@ -11,22 +10,32 @@ import {
 } from '@woocommerce/shared-context';
 import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
+import type { HTMLAttributes } from 'react';
+import { CurrencyCode } from '@woocommerce/type-defs/currency';
 
 /**
  * Internal dependencies
  */
+import type { BlockAttributes } from './types';
 import './style.scss';
 
-/**
- * Product Price Block Component.
- *
- * @param {Object} props             Incoming props.
- * @param {string} [props.className] CSS Class name for the component.
- * @param {string} [props.textAlign] Text alignment.
- *                                   context will be used if this is not provided.
- * @return {*} The component.
- */
-export const Block = ( props ) => {
+type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
+
+interface PriceProps {
+	currency_code: CurrencyCode;
+	currency_symbol: string;
+	currency_minor_unit: number;
+	currency_decimal_separator: string;
+	currency_thousand_separator: string;
+	currency_prefix: string;
+	currency_suffix: string;
+	price: string;
+	regular_price: string;
+	sale_price: string;
+	price_range: null | { min_amount: string; max_amount: string };
+}
+
+export const Block = ( props: Props ): JSX.Element | null => {
 	const { className, textAlign } = props;
 	const { parentClassName } = useInnerBlockLayoutContext();
 	const { product } = useProductDataContext();
@@ -54,7 +63,7 @@ export const Block = ( props ) => {
 		);
 	}
 
-	const prices = product.prices;
+	const prices: PriceProps = product.prices;
 	const currency = getCurrencyFromPriceResponse( prices );
 	const isOnSale = prices.price !== prices.regular_price;
 	const priceClassName = classnames( {
@@ -84,10 +93,4 @@ export const Block = ( props ) => {
 	);
 };
 
-Block.propTypes = {
-	className: PropTypes.string,
-	product: PropTypes.object,
-	textAlign: PropTypes.oneOf( [ 'left', 'right', 'center' ] ),
-};
-
 export default withProductDataContext( Block );

assets/js/atomic/blocks/product-elements/price/constants.js → assets/js/atomic/blocks/product-elements/price/constants.tsx

@@ -4,17 +4,17 @@
 import { __ } from '@wordpress/i18n';
 import { currencyDollar, Icon } from '@wordpress/icons';
 
-export const BLOCK_TITLE = __(
+export const BLOCK_TITLE: string = __(
 	'Product Price',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = (
+export const BLOCK_ICON: JSX.Element = (
 	<Icon
 		icon={ currencyDollar }
 		className="wc-block-editor-components-block-icon"
 	/>
 );
-export const BLOCK_DESCRIPTION = __(
+export const BLOCK_DESCRIPTION: string = __(
 	'Display the price of a product.',
 	'woo-gutenberg-products-block'
 );

assets/js/atomic/blocks/product-elements/price/edit.tsx

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { useEffect } from 'react';
+import type { BlockAlignment } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE as label, BLOCK_ICON as icon } from './constants';
+
+type UnsupportedAligments = 'wide' | 'full';
+type AllowedAlignments = Exclude< BlockAlignment, UnsupportedAligments >;
+
+interface BlockAttributes {
+	textAlign?: AllowedAlignments;
+}
+
+interface Attributes {
+	textAlign: 'left' | 'center' | 'right';
+}
+
+interface Context {
+	queryId: number;
+}
+
+interface Props {
+	attributes: Attributes;
+	setAttributes: (
+		attributes: Partial< BlockAttributes > & Record< string, unknown >
+	) => void;
+	context: Context;
+}
+
+const PriceEdit = ( {
+	attributes,
+	setAttributes,
+	context,
+}: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const blockAttrs = {
+		...attributes,
+		...context,
+	};
+	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
+
+	useEffect(
+		() => setAttributes( { isDescendentOfQueryLoop } ),
+		[ setAttributes, isDescendentOfQueryLoop ]
+	);
+
+	return (
+		<>
+			<BlockControls>
+				{ isDescendentOfQueryLoop && (
+					<AlignmentToolbar
+						value={ attributes.textAlign }
+						onChange={ ( textAlign: AllowedAlignments ) => {
+							setAttributes( { textAlign } );
+						} }
+					/>
+				) }
+			</BlockControls>
+			<div { ...blockProps }>
+				<Block { ...blockAttrs } />
+			</div>
+		</>
+	);
+};
+
+export default withProductSelector( { icon, label } )( PriceEdit );

assets/js/atomic/blocks/product-elements/price/index.js → assets/js/atomic/blocks/product-elements/price/index.ts

@@ -1,22 +1,27 @@
 /**
  * External dependencies
  */
-import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { registerBlockType } from '@wordpress/blocks';
+import type { BlockConfiguration } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import sharedConfig from '../shared/config';
 import edit from './edit';
 import attributes from './attributes';
+import { supports } from './supports';
 import {
 	BLOCK_TITLE as title,
 	BLOCK_ICON as icon,
 	BLOCK_DESCRIPTION as description,
 } from './constants';
 
-const blockConfig = {
+type CustomBlockConfiguration = BlockConfiguration & {
+	ancestor: string[];
+};
+
+const blockConfig: CustomBlockConfiguration = {
 	...sharedConfig,
 	apiVersion: 2,
 	title,
@@ -29,25 +34,8 @@ const blockConfig = {
 	usesContext: [ 'query', 'queryId', 'postId' ],
 	icon: { src: icon },
 	attributes,
+	supports,
 	edit,
-	supports: {
-		...sharedConfig.supports,
-		...( isFeaturePluginBuild() && {
-			color: {
-				text: true,
-				background: true,
-				link: false,
-				__experimentalSkipSerialization: true,
-			},
-			typography: {
-				fontSize: true,
-				__experimentalFontWeight: true,
-				__experimentalFontStyle: true,
-				__experimentalSkipSerialization: true,
-			},
-			__experimentalSelector: '.wc-block-components-product-price',
-		} ),
-	},
 };
 
 registerBlockType( 'woocommerce/product-price', blockConfig );

assets/js/atomic/blocks/product-elements/price/supports.ts

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+
+export const supports = {
+	...sharedConfig.supports,
+	...( isFeaturePluginBuild() && {
+		color: {
+			text: true,
+			background: false,
+			link: false,
+			__experimentalSkipSerialization: true,
+		},
+		typography: {
+			fontSize: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalSkipSerialization: true,
+		},
+		__experimentalSelector: '.wc-block-components-product-price',
+	} ),
+};

assets/js/atomic/blocks/product-elements/price/types.ts

@@ -0,0 +1,6 @@
+export interface BlockAttributes {
+	productId?: number;
+	className?: string;
+	textAlign?: 'left' | 'center' | 'right';
+	isDescendentOfQueryLoop?: boolean;
+}

assets/js/atomic/blocks/product-elements/sale-badge/index.ts

@@ -17,7 +17,11 @@ import {
 } from './constants';
 import { supports } from './support';
 
-const blockConfig: BlockConfiguration = {
+type CustomBlockConfiguration = BlockConfiguration & {
+	ancestor: string[];
+};
+
+const blockConfig: CustomBlockConfiguration = {
 	...sharedConfig,
 	title,
 	description,

assets/js/atomic/blocks/product-elements/sale-badge/types.ts

@@ -1,5 +1,5 @@
 export interface BlockAttributes {
-	productId: number;
-	align: 'left' | 'center' | 'right';
+	productId?: number;
+	align?: 'left' | 'center' | 'right';
 	isDescendentOfQueryLoop: boolean;
 }

assets/js/atomic/blocks/product-elements/sku/index.ts

@@ -16,7 +16,12 @@ import {
 	BLOCK_DESCRIPTION as description,
 } from './constants';
 
-const blockConfig: BlockConfiguration = {
+type CustomBlockConfiguration = BlockConfiguration & {
+	ancestor: string[];
+};
+
+const blockConfig: CustomBlockConfiguration = {
+	...sharedConfig,
 	apiVersion: 2,
 	title,
 	description,
@@ -31,7 +36,4 @@ const blockConfig: BlockConfiguration = {
 	edit,
 };
 
-registerBlockType( 'woocommerce/product-sku', {
-	...sharedConfig,
-	...blockConfig,
-} );
+registerBlockType( 'woocommerce/product-sku', { ...blockConfig } );

assets/js/atomic/blocks/product-elements/stock-indicator/index.ts

@@ -18,7 +18,11 @@ import {
 	BLOCK_DESCRIPTION as description,
 } from './constants';
 
-const blockConfig: BlockConfiguration = {
+type CustomBlockConfiguration = BlockConfiguration & {
+	ancestor: string[];
+};
+
+const blockConfig: CustomBlockConfiguration = {
 	...sharedConfig,
 	apiVersion: 2,
 	title,