Respect tax label in cart and checkout (#7785)

* Respect Settings Tax Name in Cart & Checkout * Update storybook * Fix TS error * Fix TS errors
woocommerce · Dec 2, 2022 · be4de43 · be4de43
1 parent 1f27302
commit be4de43
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 21 deletions.
diff --git a/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import classNames from 'classnames';
 import { createInterpolateElement } from '@wordpress/element';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
@@ -13,6 +13,7 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import { CartResponseTotals, Currency } from '@woocommerce/types';
 import { LooselyMustHave } from '@woocommerce/type-defs/utils';
+import { formatPrice } from '@woocommerce/price-format';
 
 /**
  * Internal dependencies
@@ -50,7 +51,11 @@ const TotalsFooterItem = ( {
 		getSetting< boolean >( 'taxesEnabled', true ) &&
 		getSetting< boolean >( 'displayCartPricesIncludingTax', false );
 
-	const { total_price: totalPrice, total_tax: totalTax } = values;
+	const {
+		total_price: totalPrice,
+		total_tax: totalTax,
+		tax_lines: taxLines,
+	} = values;
 
 	// Prepare props to pass to the __experimentalApplyCheckoutFilter filter.
 	// We need to pluck out receiveCart.
@@ -64,6 +69,24 @@ const TotalsFooterItem = ( {
 	} );
 
 	const parsedTaxValue = parseInt( totalTax, 10 );
+	const description =
+		taxLines && taxLines.length > 0
+			? sprintf(
+					/* translators: %s is a list of tax rates */
+					__( 'Including %s', 'woo-gutenberg-products-block' ),
+					taxLines
+						.map( ( { name, price } ) => {
+							return `${ formatPrice(
+								price,
+								currency
+							) } ${ name }`;
+						} )
+						.join( ', ' )
+			  )
+			: __(
+					'Including <TaxAmount/> in taxes',
+					'woo-gutenberg-products-block'
+			  );
 
 	return (
 		<TotalsItem
@@ -78,21 +101,15 @@ const TotalsFooterItem = ( {
 				SHOW_TAXES &&
 				parsedTaxValue !== 0 && (
 					<p className="wc-block-components-totals-footer-item-tax">
-						{ createInterpolateElement(
-							__(
-								'Including <TaxAmount/> in taxes',
-								'woo-gutenberg-products-block'
+						{ createInterpolateElement( description, {
+							TaxAmount: (
+								<FormattedMonetaryAmount
+									className="wc-block-components-totals-footer-item-tax-value"
+									currency={ currency }
+									value={ parsedTaxValue }
+								/>
 							),
-							{
-								TaxAmount: (
-									<FormattedMonetaryAmount
-										className="wc-block-components-totals-footer-item-tax-value"
-										currency={ currency }
-										value={ parsedTaxValue }
-									/>
-								),
-							}
-						) }
+						} ) }
 					</p>
 				)
 			}

diff --git a/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx b/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx
@@ -42,8 +42,43 @@ Default.decorators = [
 	},
 ];
 
-export const IncludingTaxes = Template.bind( {} );
-IncludingTaxes.decorators = [
+export const NoTaxLabel = Template.bind( {} );
+NoTaxLabel.decorators = [
+	( StoryComponent ) => {
+		allSettings.displayCartPricesIncludingTax = true;
+
+		return <StoryComponent />;
+	},
+];
+
+export const SingleTaxLabel = Template.bind( {} );
+SingleTaxLabel.args = {
+	values: {
+		total_price: '2500',
+		total_tax: '550',
+		tax_lines: [ { name: '10% VAT', price: '550', rate: '10.00' } ],
+	},
+};
+SingleTaxLabel.decorators = [
+	( StoryComponent ) => {
+		allSettings.displayCartPricesIncludingTax = true;
+
+		return <StoryComponent />;
+	},
+];
+
+export const MultipleTaxLabels = Template.bind( {} );
+MultipleTaxLabels.args = {
+	values: {
+		total_price: '2500',
+		total_tax: '550',
+		tax_lines: [
+			{ name: '10% VAT', price: '300', rate: '10.00' },
+			{ name: '5% VAT', price: '250', rate: '5.00' },
+		],
+	},
+};
+MultipleTaxLabels.decorators = [
 	( StoryComponent ) => {
 		allSettings.displayCartPricesIncludingTax = true;
 

diff --git a/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snap b/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snap
@@ -44,6 +44,62 @@ exports[`TotalsFooterItem Does not show the "including %s of tax" line if tax is
 </div>
 `;
 
+exports[`TotalsFooterItem Shows the "including %s TAX LABEL" line with single tax label 1`] = `
+<div>
+  <div
+    class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+  >
+    <span
+      class="wc-block-components-totals-item__label"
+    >
+      Total
+    </span>
+    <span
+      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    >
+      £85.00
+    </span>
+    <div
+      class="wc-block-components-totals-item__description"
+    >
+      <p
+        class="wc-block-components-totals-footer-item-tax"
+      >
+        Including £1.00 10% VAT
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TotalsFooterItem Shows the "including %s TAX LABELS" line with multiple tax labels 1`] = `
+<div>
+  <div
+    class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+  >
+    <span
+      class="wc-block-components-totals-item__label"
+    >
+      Total
+    </span>
+    <span
+      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    >
+      £85.00
+    </span>
+    <div
+      class="wc-block-components-totals-item__description"
+    >
+      <p
+        class="wc-block-components-totals-footer-item-tax"
+      >
+        Including £0.50 10% VAT, £0.50 5% VAT
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`TotalsFooterItem Shows the "including %s of tax" line if tax is greater than 0 1`] = `
 <div>
   <div

diff --git a/assets/js/base/components/cart-checkout/totals/footer-item/test/index.tsx b/assets/js/base/components/cart-checkout/totals/footer-item/test/index.tsx
@@ -3,6 +3,8 @@
  */
 import { render } from '@testing-library/react';
 import { allSettings } from '@woocommerce/settings';
+import { Currency } from '@woocommerce/types';
+import { CartResponseTotals } from '@woocommerce/type-defs/cart-response';
 
 /**
  * Internal dependencies
@@ -14,7 +16,7 @@ describe( 'TotalsFooterItem', () => {
 		allSettings.taxesEnabled = true;
 		allSettings.displayCartPricesIncludingTax = true;
 	} );
-	const currency = {
+	const currency: Currency = {
 		code: 'GBP',
 		decimalSeparator: '.',
 		minorUnit: 2,
@@ -24,7 +26,7 @@ describe( 'TotalsFooterItem', () => {
 		thousandSeparator: ',',
 	};
 
-	const values = {
+	const values: CartResponseTotals = {
 		currency_code: 'GBP',
 		currency_decimal_separator: '.',
 		currency_minor_unit: 2,
@@ -33,7 +35,6 @@ describe( 'TotalsFooterItem', () => {
 		currency_symbol: '£',
 		currency_thousand_separator: ',',
 		tax_lines: [],
-		length: 2,
 		total_discount: '0',
 		total_discount_tax: '0',
 		total_fees: '0',
@@ -78,4 +79,33 @@ describe( 'TotalsFooterItem', () => {
 		);
 		expect( container ).toMatchSnapshot();
 	} );
+
+	it( 'Shows the "including %s TAX LABEL" line with single tax label', () => {
+		const valuesWithTax = {
+			...values,
+			total_tax: '100',
+			total_items_tax: '100',
+			tax_lines: [ { name: '10% VAT', price: '100', rate: '10.000' } ],
+		};
+		const { container } = render(
+			<TotalsFooterItem currency={ currency } values={ valuesWithTax } />
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'Shows the "including %s TAX LABELS" line with multiple tax labels', () => {
+		const valuesWithTax = {
+			...values,
+			total_tax: '100',
+			total_items_tax: '100',
+			tax_lines: [
+				{ name: '10% VAT', price: '50', rate: '10.000' },
+				{ name: '5% VAT', price: '50', rate: '5.000' },
+			],
+		};
+		const { container } = render(
+			<TotalsFooterItem currency={ currency } values={ valuesWithTax } />
+		);
+		expect( container ).toMatchSnapshot();
+	} );
 } );