From 86e381b7fdc357546cc93da957c5e6cd249e13ba Mon Sep 17 00:00:00 2001 From: Niels Lange Date: Fri, 2 Dec 2022 18:40:56 +0700 Subject: [PATCH] Respect tax label in cart and checkout (https://github.com/woocommerce/woocommerce-blocks/pull/7785) * Respect Settings Tax Name in Cart & Checkout * Update storybook * Fix TS error * Fix TS errors --- .../totals/footer-item/index.tsx | 49 ++++++++++------ .../totals/footer-item/stories/index.tsx | 39 ++++++++++++- .../test/__snapshots__/index.tsx.snap | 56 +++++++++++++++++++ .../totals/footer-item/test/index.tsx | 36 +++++++++++- 4 files changed, 159 insertions(+), 21 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx index e9bee75ec0b..e74344ee4a8 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx +++ b/plugins/woocommerce-blocks/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 in taxes', + 'woo-gutenberg-products-block' + ); return ( - { createInterpolateElement( - __( - 'Including in taxes', - 'woo-gutenberg-products-block' + { createInterpolateElement( description, { + TaxAmount: ( + ), - { - TaxAmount: ( - - ), - } - ) } + } ) }

) } diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx index 2acfb7d6d76..80b05c092a4 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.tsx +++ b/plugins/woocommerce-blocks/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 ; + }, +]; + +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 ; + }, +]; + +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/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snap b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snap index f47692188ef..182f3e099c3 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.tsx.snap +++ b/plugins/woocommerce-blocks/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 `; +exports[`TotalsFooterItem Shows the "including %s TAX LABEL" line with single tax label 1`] = ` +
+
+ + Total + + + £85.00 + +
+

+ Including £1.00 10% VAT +

+
+
+
+`; + +exports[`TotalsFooterItem Shows the "including %s TAX LABELS" line with multiple tax labels 1`] = ` +
+
+ + Total + + + £85.00 + +
+

+ Including £0.50 10% VAT, £0.50 5% VAT +

+
+
+
+`; + exports[`TotalsFooterItem Shows the "including %s of tax" line if tax is greater than 0 1`] = `
{ 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( + + ); + 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( + + ); + expect( container ).toMatchSnapshot(); + } ); } );