Merge remote-tracking branch 'core/trunk' into add/stock-filter

# Conflicts:
#	package-lock.json

.eslintrc.js

@@ -82,6 +82,10 @@ module.exports = {
 				'jsdoc/require-param': 'off',
 				'no-shadow': 'off',
 				'@typescript-eslint/no-shadow': [ 'error' ],
+				'@typescript-eslint/no-unused-vars': [
+					'error',
+					{ ignoreRestSiblings: true },
+				],
 			},
 		},
 		{

.gitattributes

@@ -28,4 +28,5 @@
 /globals.d.ts export-ignore
 /tsconfig.json export-ignore
 /tsconfig.base.json export-ignore
+/tsconfig.base export-ignore
 /webpack.config.js export-ignore

assets/css/abstracts/_colors.scss

@@ -5,6 +5,7 @@
 $no-stock-color: $alert-red;
 $low-stock-color: $alert-yellow;
 $in-stock-color: $alert-green;
+$discount-color: $alert-green;
 
 $placeholder-color: var(--global--color-primary, $gray-200);
 $input-border-gray: #50575e;

assets/css/editor.scss

@@ -48,9 +48,15 @@
 	}
 }
 
-// This border has been upstreamed to WooCommerce Admin, so it can be removed
-// from here once @woocommerce/components gets updated.
-// https://github.com/woocommerce/woocommerce-admin/pull/5901
-.woocommerce-search-list__list {
-	border: 1px solid $gray-200;
+// Selectors with extra specificity to override some editor styles.
+.woocommerce-search-list__list.woocommerce-search-list__list {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+.woocommerce-search-list__selected.woocommerce-search-list__selected > ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
 }

assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import Button from '@woocommerce/base-components/button';
+import { Button } from '@woocommerce/blocks-checkout';
 import { Icon, done as doneIcon } from '@woocommerce/icons';
 import { useState, useEffect } from '@wordpress/element';
 import { useAddToCartFormContext } from '@woocommerce/base-context';

assets/js/atomic/blocks/product-elements/sale-badge/block.js

@@ -4,7 +4,7 @@
 import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import Label from '@woocommerce/base-components/label';
+import { Label } from '@woocommerce/blocks-checkout';
 import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,

assets/js/base/components/cart-checkout/order-summary/order-summary-item.js

@@ -2,19 +2,19 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import Label from '@woocommerce/base-components/label';
 import ProductPrice from '@woocommerce/base-components/product-price';
 import ProductName from '@woocommerce/base-components/product-name';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	__experimentalApplyCheckoutFilter,
-	mustBeString,
 	mustContain,
+	Label,
 } from '@woocommerce/blocks-checkout';
 import PropTypes from 'prop-types';
 import Dinero from 'dinero.js';
 import { getSetting } from '@woocommerce/settings';
 import { useCallback, useMemo } from '@wordpress/element';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
@@ -41,17 +41,23 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		extensions = {},
 	} = cartItem;
 
+	// Prepare props to pass to the __experimentalApplyCheckoutFilter filter.
+	// We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { receiveCart, ...cart } = useStoreCart();
+
 	const productPriceValidation = useCallback(
-		( value ) => mustBeString( value ) && mustContain( value, '<price/>' ),
+		( value ) => mustContain( value, '<price/>' ),
 		[]
 	);
 
 	const arg = useMemo(
 		() => ( {
 			context: 'summary',
 			cartItem,
+			cart,
 		} ),
-		[ cartItem ]
+		[ cartItem, cart ]
 	);
 
 	const priceCurrency = getCurrencyFromPriceResponse( prices );
@@ -61,7 +67,6 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		defaultValue: initialName,
 		extensions,
 		arg,
-		validation: mustBeString,
 	} );
 
 	const regularPriceSingle = Dinero( {

assets/js/base/components/cart-checkout/place-order-button/index.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { Icon, done } from '@woocommerce/icons';
-import Button from '@woocommerce/base-components/button';
+import { Button } from '@woocommerce/blocks-checkout';
 
 const PlaceOrderButton = () => {
 	const {

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

@@ -37,7 +37,7 @@ const ProductDetails = ( {
 					: '';
 				return (
 					<li
-						key={ detail.name + ( detail.display || detail.name ) }
+						key={ detail.name + ( detail.display || detail.value ) }
 						className={ className }
 					>
 						{ detail.name && (

assets/js/base/components/cart-checkout/product-summary/index.js → assets/js/base/components/cart-checkout/product-summary/index.tsx

@@ -1,10 +1,14 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import Summary from '@woocommerce/base-components/summary';
 import { blocksConfig } from '@woocommerce/block-settings';
 
+interface ProductSummaryProps {
+	className?: string;
+	shortDescription?: string;
+	fullDescription?: string;
+}
 /**
  * Returns an element containing a summary of the product.
  *
@@ -17,7 +21,7 @@ const ProductSummary = ( {
 	className,
 	shortDescription = '',
 	fullDescription = '',
-} ) => {
+}: ProductSummaryProps ): JSX.Element | null => {
 	const source = shortDescription ? shortDescription : fullDescription;
 
 	if ( ! source ) {
@@ -34,10 +38,4 @@ const ProductSummary = ( {
 	);
 };
 
-ProductSummary.propTypes = {
-	className: PropTypes.string,
-	shortDescription: PropTypes.string,
-	fullDescription: PropTypes.string,
-};
-
 export default ProductSummary;

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

@@ -1,24 +1,29 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
-import Button from '@woocommerce/base-components/button';
+import { Button } from '@woocommerce/blocks-checkout';
 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';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import { AddressForm } from '../address-form';
 
+interface ShippingCalculatorAddressProps {
+	address: EnteredAddress;
+	onUpdate: ( address: EnteredAddress ) => void;
+	addressFields: Partial< keyof AddressFields >[];
+}
 const ShippingCalculatorAddress = ( {
 	address: initialAddress,
 	onUpdate,
 	addressFields,
-} ) => {
+}: ShippingCalculatorAddressProps ): JSX.Element => {
 	const [ address, setAddress ] = useState( initialAddress );
 	const {
 		hasValidationErrors,
@@ -55,10 +60,4 @@ const ShippingCalculatorAddress = ( {
 	);
 };
 
-ShippingCalculatorAddress.propTypes = {
-	address: PropTypes.object.isRequired,
-	onUpdate: PropTypes.func.isRequired,
-	addressFields: PropTypes.array.isRequired,
-};
-
 export default ShippingCalculatorAddress;

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

@@ -1,19 +1,26 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useShippingDataContext } from '@woocommerce/base-context';
+import type { EnteredAddress } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
  */
 import ShippingCalculatorAddress from './address';
 import './style.scss';
 
+interface ShippingCalculatorProps {
+	onUpdate?: ( newAddress: EnteredAddress ) => void;
+	addressFields?: Partial< keyof EnteredAddress >[];
+}
+
 const ShippingCalculator = ( {
-	onUpdate = () => {},
+	onUpdate = () => {
+		/* Do nothing */
+	},
 	addressFields = [ 'country', 'state', 'city', 'postcode' ],
-} ) => {
+}: ShippingCalculatorProps ): JSX.Element => {
 	const { shippingAddress, setShippingAddress } = useShippingDataContext();
 	return (
 		<div className="wc-block-components-shipping-calculator">
@@ -29,9 +36,4 @@ const ShippingCalculator = ( {
 	);
 };
 
-ShippingCalculator.propTypes = {
-	onUpdate: PropTypes.func,
-	addressFields: PropTypes.array,
-};
-
 export default ShippingCalculator;

assets/js/base/components/cart-checkout/shipping-location/index.js → assets/js/base/components/cart-checkout/shipping-location/index.tsx

@@ -1,24 +1,35 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { __, sprintf } from '@wordpress/i18n';
-import { getSetting } from '@woocommerce/settings';
+import { EnteredAddress, getSetting } from '@woocommerce/settings';
 import { decodeEntities } from '@wordpress/html-entities';
 
+interface ShippingLocationProps {
+	address: EnteredAddress;
+}
+
 /**
  * Shows a formatted shipping location.
  *
  * @param {Object} props Incoming props for the component.
  * @param {Object} props.address Incoming address information.
  */
-const ShippingLocation = ( { address } ) => {
+const ShippingLocation = ( {
+	address,
+}: ShippingLocationProps ): JSX.Element | null => {
 	// we bail early if we don't have an address.
 	if ( Object.values( address ).length === 0 ) {
 		return null;
 	}
-	const shippingCountries = getSetting( 'shippingCountries', {} );
-	const shippingStates = getSetting( 'shippingStates', {} );
+	const shippingCountries = getSetting( 'shippingCountries', {} ) as Record<
+		string,
+		string
+	>;
+	const shippingStates = getSetting( 'shippingStates', {} ) as Record<
+		string,
+		Record< string, string >
+	>;
 	const formattedCountry =
 		typeof shippingCountries[ address.country ] === 'string'
 			? decodeEntities( shippingCountries[ address.country ] )
@@ -56,13 +67,4 @@ const ShippingLocation = ( { address } ) => {
 	);
 };
 
-ShippingLocation.propTypes = {
-	address: PropTypes.shape( {
-		city: PropTypes.string,
-		state: PropTypes.string,
-		postcode: PropTypes.string,
-		country: PropTypes.string,
-	} ),
-};
-
 export default ShippingLocation;

assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx

@@ -4,12 +4,11 @@
 import classNames from 'classnames';
 import { _n, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
-import Label from '@woocommerce/base-components/label';
-import Title from '@woocommerce/base-components/title';
 import type { ReactElement } from 'react';
-import type { Rate, PackageRateOption } from '@woocommerce/type-defs/shipping';
-import { Panel } from '@woocommerce/blocks-checkout';
+import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
+import { Panel, Label } from '@woocommerce/blocks-checkout';
 import { useSelectShippingRate } from '@woocommerce/base-context/hooks';
+import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
 
 /**
  * Internal dependencies
@@ -34,21 +33,28 @@ interface Destination {
 	country: string;
 }
 
+export interface PackageData {
+	destination: Destination;
+	name: string;
+	// eslint-disable-next-line camelcase
+	shipping_rates: CartShippingPackageShippingRate[];
+	items: PackageItem[];
+}
+
+export type PackageRateRenderOption = (
+	option: CartShippingPackageShippingRate
+) => PackageRateOption;
+
 interface PackageProps {
-	packageId: string;
-	renderOption: ( option: Rate ) => PackageRateOption;
-	collapse: boolean;
-	packageData: {
-		destination: Destination;
-		name: string;
-		// eslint-disable-next-line camelcase
-		shipping_rates: Rate[];
-		items: PackageItem[];
-	};
+	/* PackageId can be a string, WooCommerce Subscriptions uses strings for example, but WooCommerce core uses numbers */
+	packageId: string | number;
+	renderOption: PackageRateRenderOption;
+	collapse?: boolean;
+	packageData: PackageData;
 	className?: string;
 	collapsible?: boolean;
 	noResultsMessage: ReactElement;
-	showItems: boolean;
+	showItems?: boolean;
 }
 
 export const ShippingRatesControlPackage = ( {
@@ -69,12 +75,9 @@ export const ShippingRatesControlPackage = ( {
 	const header = (
 		<>
 			{ ( showItems || collapsible ) && (
-				<Title
-					className="wc-block-components-shipping-rates-control__package-title"
-					headingLevel="3"
-				>
+				<div className="wc-block-components-shipping-rates-control__package-title">
 					{ packageData.name }
-				</Title>
+				</div>
 			) }
 			{ showItems && (
 				<ul className="wc-block-components-shipping-rates-control__package-items">