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
This commit is contained in:
parent
24468ba212
commit
86e381b7fd
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
} );
|
||||
} );
|
||||
|
|
Loading…
Reference in New Issue