Merge branch 'upkeep/9524' of github.com:Sidsector9/woocommerce-block…

…s into upkeep/9524

.github/workflows/unit-tests.yml

@@ -80,28 +80,38 @@ jobs:
       ##
       - name: Set up PHP
         uses: shivammathur/setup-php@v2
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         with:
           php-version: '${{ matrix.php }}'
           ini-file: development
           coverage: none
 
       # Ensure that Composer installs the correct versions of packages.
       - name: Override PHP version in composer.json
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           composer config platform.php ${{ matrix.php }}
           composer update
 
       - name: Install npm dependencies
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           npm ci
           npm run build
           
       - name: Docker debug information
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           docker -v
           docker-compose -v
           
       - name: General debug information
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           npm --version
           node --version
@@ -111,12 +121,18 @@ jobs:
           locale -a
           
       - name: Start Docker environment
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: npm run wp-env start --update
 
       - name: Log running Docker containers
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: docker ps -a
 
       - name: Docker container debug information
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           npm run wp-env run tests-mysql mysql -- --version
           npm run wp-env run tests-wordpress "php --version"
@@ -125,4 +141,6 @@ jobs:
           npm run wp-env run tests-wordpress "locale -a"
           
       - name: Run PHPUnit tests
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: npm run test:php

README.md

@@ -4,7 +4,8 @@
 [![View](https://img.shields.io/badge/Project%20Components-brightgreen.svg?style=flat)](https://woocommerce.github.io/woocommerce-blocks/)
 ![JavaScript and CSS Linting](https://github.com/woocommerce/woocommerce-gutenberg-products-block/workflows/JavaScript%20and%20CSS%20Linting/badge.svg?branch=trunk)
 ![PHP Coding Standards](https://github.com/woocommerce/woocommerce-gutenberg-products-block/workflows/PHP%20Coding%20Standards/badge.svg?branch=trunk)
-![Automated tests](https://github.com/woocommerce/woocommerce-gutenberg-products-block/workflows/Automated%20tests/badge.svg?branch=trunk)
+![Unit Tests](https://github.com/woocommerce/woocommerce-blocks/workflows/E2E%20tests/badge.svg?branch=trunk)
+![E2E Tests](https://github.com/woocommerce/woocommerce-blocks/workflows/Unit%20Tests/badge.svg?branch=trunk)
 
 This is the feature plugin for WooCommerce + Gutenberg. This plugin serves as a space to iterate and explore new Blocks and updates to existing blocks for WooCommerce, and how WooCommerce might work with the block editor.
 

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

@@ -48,7 +48,7 @@ export const ShippingAddress = ( {
 			) : (
 				<ShippingLocation formattedLocation={ formattedLocation } />
 			) }
-			{ showCalculator && ! prefersCollection ? (
+			{ showCalculator && (
 				<CalculatorButton
 					label={ __(
 						'Change address',
@@ -57,7 +57,7 @@ export const ShippingAddress = ( {
 					isShippingCalculatorOpen={ isShippingCalculatorOpen }
 					setIsShippingCalculatorOpen={ setIsShippingCalculatorOpen }
 				/>
-			) : null }
+			) }
 		</>
 	);
 };

assets/js/blocks/active-filters/block.tsx

@@ -6,7 +6,6 @@ import { useQueryStateByKey } from '@woocommerce/base-context/hooks';
 import { getSetting, getSettingWithCoercion } from '@woocommerce/settings';
 import { useMemo, useEffect, useState } from '@wordpress/element';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import Label from '@woocommerce/base-components/label';
 import {
 	isAttributeQueryCollection,
@@ -18,6 +17,7 @@ import {
 import { getUrlParameter } from '@woocommerce/utils';
 import FilterTitlePlaceholder from '@woocommerce/base-components/filter-placeholder';
 import { useIsMounted } from '@woocommerce/base-hooks';
+import type { BlockAttributes } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -34,23 +34,26 @@ import {
 } from './utils';
 import ActiveAttributeFilters from './active-attribute-filters';
 import FilterPlaceholders from './filter-placeholders';
-import { Attributes } from './types';
 import { useSetWraperVisibility } from '../filter-wrapper/context';
 
+interface ActiveFiltersBlockProps {
+	/**
+	 * The attributes for this block.
+	 */
+	attributes: BlockAttributes;
+	/**
+	 * Whether it's in the editor or frontend display.
+	 */
+	isEditor: boolean;
+}
+
 /**
  * Component displaying active filters.
- *
- * @param {Object}  props            Incoming props for the component.
- * @param {Object}  props.attributes Incoming attributes for the block.
- * @param {boolean} props.isEditor   Whether or not in the editor context.
  */
 const ActiveFiltersBlock = ( {
 	attributes: blockAttributes,
 	isEditor = false,
-}: {
-	attributes: Attributes;
-	isEditor?: boolean;
-} ) => {
+}: ActiveFiltersBlockProps ) => {
 	const setWrapperVisibility = useSetWraperVisibility();
 	const isMounted = useIsMounted();
 	const componentHasMounted = isMounted();
@@ -413,15 +416,4 @@ const ActiveFiltersBlock = ( {
 	);
 };
 
-ActiveFiltersBlock.propTypes = {
-	/**
-	 * The attributes for this block.
-	 */
-	attributes: PropTypes.object.isRequired,
-	/**
-	 * Whether it's in the editor or frontend display.
-	 */
-	isEditor: PropTypes.bool,
-};
-
 export default ActiveFiltersBlock;

assets/js/blocks/mini-cart/block.tsx

@@ -34,6 +34,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
+import type { BlockAttributes } from './types';
 import QuantityBadge from './quantity-badge';
 import { MiniCartContentsBlock } from './mini-cart-contents/block';
 import './style.scss';
@@ -42,14 +43,7 @@ import {
 	attributes as miniCartContentsAttributes,
 } from './mini-cart-contents/attributes';
 
-interface Props {
-	isInitiallyOpen?: boolean;
-	colorClassNames?: string;
-	style?: Record< string, Record< string, string > >;
-	contents: string;
-	addToCartBehaviour: string;
-	hasHiddenPrice: boolean;
-}
+type Props = BlockAttributes;
 
 function getScrollbarWidth() {
 	return window.innerWidth - document.documentElement.clientWidth;
@@ -61,6 +55,7 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 		colorClassNames,
 		style,
 		contents = '',
+		miniCartIcon,
 		addToCartBehaviour = 'none',
 		hasHiddenPrice = false,
 	} = attributes;
@@ -269,7 +264,7 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 						{ taxLabel }
 					</small>
 				) }
-				<QuantityBadge count={ cartItemsCount } />
+				<QuantityBadge count={ cartItemsCount } icon={ miniCartIcon } />
 			</button>
 			<Drawer
 				className={ classnames(

assets/js/blocks/mini-cart/component-frontend.tsx

@@ -41,6 +41,7 @@ const renderMiniCartFrontend = () => {
 				isInitiallyOpen: el.dataset.isInitiallyOpen === 'true',
 				colorClassNames,
 				style: el.dataset.style ? JSON.parse( el.dataset.style ) : {},
+				miniCartIcon: el.dataset.miniCartIcon,
 				addToCartBehaviour: el.dataset.addToCartBehaviour || 'none',
 				hasHiddenPrice: el.dataset.hasHiddenPrice,
 				contents:

assets/js/blocks/mini-cart/edit.tsx

@@ -17,6 +17,8 @@ import Noninteractive from '@woocommerce/base-components/noninteractive';
 import { isSiteEditorPage } from '@woocommerce/utils';
 import type { ReactElement } from 'react';
 import { select } from '@wordpress/data';
+import { cartOutline, bag, bagAlt } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -25,6 +27,7 @@ import QuantityBadge from './quantity-badge';
 import './editor.scss';
 
 interface Attributes {
+	miniCartIcon: 'cart' | 'bag' | 'bag-alt';
 	addToCartBehaviour: string;
 	hasHiddenPrice: boolean;
 	cartAndCheckoutRenderStyle: boolean;
@@ -36,8 +39,12 @@ interface Props {
 }
 
 const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
-	const { addToCartBehaviour, hasHiddenPrice, cartAndCheckoutRenderStyle } =
-		attributes;
+	const {
+		miniCartIcon,
+		addToCartBehaviour,
+		hasHiddenPrice,
+		cartAndCheckoutRenderStyle,
+	} = attributes;
 	const blockProps = useBlockProps( {
 		className: `wc-block-mini-cart`,
 	} );
@@ -58,22 +65,57 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 				<PanelBody
 					title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
 				>
-					<ToggleControl
+					<ToggleGroupControl
+						className="wc-block-editor-mini-cart__cart-icon-toggle"
+						isBlock={ true }
 						label={ __(
-							'Display total price',
+							'Cart Icon',
 							'woo-gutenberg-products-block'
 						) }
-						help={ __(
-							'Toggle to display the total price of products in the shopping cart. If no products have been added, the price will not display.',
+						value={ miniCartIcon }
+						onChange={ ( value ) => {
+							setAttributes( {
+								miniCartIcon: value,
+							} );
+						} }
+					>
+						<ToggleGroupControlOption
+							value={ 'cart' }
+							label={ <Icon size={ 32 } icon={ cartOutline } /> }
+						/>
+						<ToggleGroupControlOption
+							value={ 'bag' }
+							label={ <Icon size={ 32 } icon={ bag } /> }
+						/>
+						<ToggleGroupControlOption
+							value={ 'bag-alt' }
+							label={ <Icon size={ 32 } icon={ bagAlt } /> }
+						/>
+					</ToggleGroupControl>
+					<BaseControl
+						id="wc-block-mini-cart__display-toggle"
+						label={ __(
+							'Display',
 							'woo-gutenberg-products-block'
 						) }
-						checked={ ! hasHiddenPrice }
-						onChange={ () =>
-							setAttributes( {
-								hasHiddenPrice: ! hasHiddenPrice,
-							} )
-						}
-					/>
+					>
+						<ToggleControl
+							label={ __(
+								'Display total price',
+								'woo-gutenberg-products-block'
+							) }
+							help={ __(
+								'Toggle to display the total price of products in the shopping cart. If no products have been added, the price will not display.',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ ! hasHiddenPrice }
+							onChange={ () =>
+								setAttributes( {
+									hasHiddenPrice: ! hasHiddenPrice,
+								} )
+							}
+						/>
+					</BaseControl>
 					{ isSiteEditor && (
 						<ToggleGroupControl
 							className="wc-block-editor-mini-cart__render-in-cart-and-checkout-toggle"
@@ -177,7 +219,10 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 							{ formatPrice( productTotal ) }
 						</span>
 					) }
-					<QuantityBadge count={ productCount } />
+					<QuantityBadge
+						count={ productCount }
+						icon={ miniCartIcon }
+					/>
 				</button>
 			</Noninteractive>
 		</div>

assets/js/blocks/mini-cart/index.tsx

@@ -53,6 +53,10 @@ const settings: BlockConfiguration = {
 			type: 'boolean',
 			default: false,
 		},
+		miniCartIcon: {
+			type: 'string',
+			default: 'cart',
+		},
 		addToCartBehaviour: {
 			type: 'string',
 			default: 'none',

assets/js/blocks/mini-cart/quantity-badge/index.tsx

@@ -1,26 +1,41 @@
 /**
  * External dependencies
  */
-import { miniCart } from '@woocommerce/icons';
+import { cartOutline, bag, bagAlt } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
+import { IconType } from '.././types';
 
 interface Props {
 	count: number;
 	colorClassNames?: string;
+	icon?: IconType;
 }
 
-const QuantityBadge = ( { count }: Props ): JSX.Element => {
+const QuantityBadge = ( { count, icon }: Props ): JSX.Element => {
+	function getIcon( iconName?: 'cart' | 'bag' | 'bag-alt' ) {
+		switch ( iconName ) {
+			case 'cart':
+				return cartOutline;
+			case 'bag':
+				return bag;
+			case 'bag-alt':
+				return bagAlt;
+			default:
+				return cartOutline;
+		}
+	}
+
 	return (
 		<span className="wc-block-mini-cart__quantity-badge">
 			<Icon
 				className="wc-block-mini-cart__icon"
-				size={ 20 }
-				icon={ miniCart }
+				size={ 32 }
+				icon={ getIcon( icon ) }
 			/>
 			<span className="wc-block-mini-cart__badge">
 				{ count > 0 ? count : '' }

assets/js/blocks/mini-cart/quantity-badge/style.scss

@@ -35,8 +35,9 @@
 
 .wc-block-mini-cart__icon {
 	display: block;
-	height: em(24px);
-	width: em(24px);
+	height: em(32px);
+	width: em(32px);
+	margin: -0.25em;
 
 	html[dir="rtl"] & {
 		transform: scaleX(-1);