Add option to hide/show price in Mini Cart block

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

@@ -41,6 +41,7 @@ interface Props {
 	style?: Record< string, Record< string, string > >;
 	contents: string;
 	addToCartBehaviour: string;
+	hasHiddenPrice: boolean;
 }
 
 const MiniCartBlock = ( {
@@ -49,6 +50,7 @@ const MiniCartBlock = ( {
 	style,
 	contents = '',
 	addToCartBehaviour = 'none',
+	hasHiddenPrice = false,
 }: Props ): JSX.Element => {
 	const {
 		cartItemsCount: cartItemsCountFromApi,
@@ -212,13 +214,15 @@ const MiniCartBlock = ( {
 				} }
 				aria-label={ ariaLabel }
 			>
-				<span className="wc-block-mini-cart__amount">
-					{ formatPrice(
-						subTotal,
-						getCurrencyFromPriceResponse( cartTotals )
-					) }
-				</span>
-				{ taxLabel !== '' && subTotal !== 0 && (
+				{ ! hasHiddenPrice && (
+					<span className="wc-block-mini-cart__amount">
+						{ formatPrice(
+							subTotal,
+							getCurrencyFromPriceResponse( cartTotals )
+						) }
+					</span>
+				) }
+				{ taxLabel !== '' && subTotal !== 0 && ! hasHiddenPrice && (
 					<small className="wc-block-mini-cart__tax-label">
 						{ taxLabel }
 					</small>

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

@@ -42,6 +42,7 @@ const renderMiniCartFrontend = () => {
 				colorClassNames,
 				style: el.dataset.style ? JSON.parse( el.dataset.style ) : {},
 				addToCartBehaviour: el.dataset.addToCartBehaviour || 'none',
+				hasHiddenPrice: el.dataset.hasHiddenPrice,
 				contents:
 					el.querySelector( '.wc-block-mini-cart__template-part' )
 						?.innerHTML ?? '',

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

@@ -4,7 +4,12 @@
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import type { ReactElement } from 'react';
 import { formatPrice } from '@woocommerce/price-format';
-import { PanelBody, ExternalLink, SelectControl } from '@wordpress/components';
+import {
+	PanelBody,
+	ExternalLink,
+	SelectControl,
+	ToggleControl,
+} from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings';
 import { __ } from '@wordpress/i18n';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
@@ -16,6 +21,7 @@ import QuantityBadge from './quantity-badge';
 
 interface Attributes {
 	addToCartBehaviour: string;
+	hasHiddenPrice: boolean;
 }
 
 interface Props {
@@ -24,7 +30,7 @@ interface Props {
 }
 
 const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
-	const { addToCartBehaviour } = attributes;
+	const { addToCartBehaviour, hasHiddenPrice } = attributes;
 	const blockProps = useBlockProps( {
 		className: `wc-block-mini-cart`,
 	} );
@@ -76,6 +82,22 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 							},
 						] }
 					/>
+					<ToggleControl
+						label={ __(
+							'Hide Cart Price',
+							'woo-gutenberg-products-block'
+						) }
+						help={ __(
+							'Toggles the visibility of the Mini Cart price.',
+							'woo-gutenberg-products-block'
+						) }
+						checked={ hasHiddenPrice }
+						onChange={ () =>
+							setAttributes( {
+								hasHiddenPrice: ! hasHiddenPrice,
+							} )
+						}
+					/>
 				</PanelBody>
 				{ templatePartEditUri && (
 					<PanelBody
@@ -101,9 +123,11 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 			</InspectorControls>
 			<Noninteractive>
 				<button className="wc-block-mini-cart__button">
-					<span className="wc-block-mini-cart__amount">
-						{ formatPrice( productTotal ) }
-					</span>
+					{ ! hasHiddenPrice && (
+						<span className="wc-block-mini-cart__amount">
+							{ formatPrice( productTotal ) }
+						</span>
+					) }
 					<QuantityBadge count={ productCount } />
 				</button>
 			</Noninteractive>

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

@@ -56,6 +56,10 @@ const settings: BlockConfiguration = {
 			type: 'string',
 			default: 'none',
 		},
+		hasHiddenPrice: {
+			type: 'boolean',
+			default: false,
+		},
 	},
 
 	edit,

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

@@ -5,6 +5,7 @@ import {
 	act,
 	render,
 	screen,
+	queryByText,
 	waitFor,
 	waitForElementToBeRemoved,
 } from '@testing-library/react';
@@ -124,4 +125,26 @@ describe( 'Testing Mini Cart', () => {
 			).toBeInTheDocument()
 		);
 	} );
+
+	it( 'renders cart price if "Hide Cart Price" setting is not enabled', async () => {
+		mockEmptyCart();
+		render( <MiniCartBlock /> );
+		await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
+
+		await waitFor( () =>
+			expect( screen.getByText( '$0.00' ) ).toBeInTheDocument()
+		);
+	} );
+
+	it( 'does not render cart price if "Hide Cart Price" setting is enabled', async () => {
+		mockEmptyCart();
+		const { container } = render(
+			<MiniCartBlock hasHiddenPrice={ true } />
+		);
+		await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
+
+		await waitFor( () =>
+			expect( queryByText( container, '$0.00' ) ).not.toBeInTheDocument()
+		);
+	} );
 } );

src/BlockTypes/MiniCart.php

@@ -288,6 +288,26 @@ protected function append_script_and_deps_src( $script ) {
 		);
 	}
 
+	/**
+	 * Returns the markup for the cart price.
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return string
+	 */
+	protected function get_cart_price_markup( $attributes ) {
+		if ( isset( $attributes['hasHiddenPrice'] ) && false !== $attributes['hasHiddenPrice'] ) {
+			return;
+		}
+
+		$cart_controller     = $this->get_cart_controller();
+		$cart                = $cart_controller->get_cart_instance();
+		$cart_contents_total = $cart->get_subtotal();
+
+		return '<span class="wc-block-mini-cart__amount">' . esc_html( wp_strip_all_tags( wc_price( $cart_contents_total ) ) ) . '</span>
+		' . $this->get_include_tax_label_markup();
+	}
+
 	/**
 	 * Returns the markup for render the tax label.
 	 *
@@ -360,8 +380,7 @@ protected function get_markup( $attributes ) {
 			<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3231 18.2769C17.3741 18.2769 17.4154 18.2356 17.4154 18.1846C17.4154 18.1336 17.3741 18.0923 17.3231 18.0923C17.2721 18.0923 17.2308 18.1336 17.2308 18.1846C17.2308 18.2356 17.2721 18.2769 17.3231 18.2769ZM15.5077 18.1846C15.5077 17.182 16.3205 16.3692 17.3231 16.3692C18.3257 16.3692 19.1385 17.182 19.1385 18.1846C19.1385 19.1872 18.3257 20 17.3231 20C16.3205 20 15.5077 19.1872 15.5077 18.1846Z" fill="currentColor"/>
 			<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0631 9.53835L19.4662 12.6685L19.4648 12.6757L19.4648 12.6757C19.3424 13.2919 19.0072 13.8454 18.5178 14.2394C18.031 14.6312 17.4226 14.8404 16.798 14.8308H8.44017C7.81556 14.8404 7.20714 14.6312 6.72038 14.2394C6.2312 13.8456 5.89605 13.2924 5.77352 12.6765L5.77335 12.6757L4.33477 5.48814C4.3286 5.46282 4.32345 5.43711 4.31934 5.41104L3.61815 1.90768H0.953842C0.42705 1.90768 0 1.48063 0 0.953842C0 0.42705 0.42705 0 0.953842 0H4.4C4.85462 0 5.24607 0.320858 5.33529 0.766644L6.04403 4.30769H12.785C13.0114 4.99157 13.3319 5.63258 13.7312 6.21538H6.42585L7.64421 12.3026L7.64449 12.304C7.67966 12.4811 7.77599 12.6402 7.91662 12.7534C8.05725 12.8666 8.23322 12.9267 8.41372 12.9233L8.432 12.9231H16.8062L16.8244 12.9233C17.0049 12.9267 17.1809 12.8666 17.3215 12.7534C17.4614 12.6408 17.5575 12.4828 17.5931 12.3068L17.5937 12.304L18.1649 9.30867C18.762 9.45873 19.387 9.53842 20.0307 9.53842C20.0415 9.53842 20.0523 9.5384 20.0631 9.53835Z" fill="currentColor"/>
 		</svg>';
-		$button_html = '<span class="wc-block-mini-cart__amount">' . esc_html( wp_strip_all_tags( wc_price( $cart_contents_total ) ) ) . '</span>
-		' . $this->get_include_tax_label_markup() . '
+		$button_html = $this->get_cart_price_markup( $attributes ) . '
 		<span class="wc-block-mini-cart__quantity-badge">
 			' . $icon . '
 			<span class="wc-block-mini-cart__badge">' . $cart_contents_count . '</span>