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
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __, sprintf } from '@wordpress/i18n';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { createInterpolateElement } from '@wordpress/element';
|
import { createInterpolateElement } from '@wordpress/element';
|
||||||
import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
|
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 { getSetting } from '@woocommerce/settings';
|
||||||
import { CartResponseTotals, Currency } from '@woocommerce/types';
|
import { CartResponseTotals, Currency } from '@woocommerce/types';
|
||||||
import { LooselyMustHave } from '@woocommerce/type-defs/utils';
|
import { LooselyMustHave } from '@woocommerce/type-defs/utils';
|
||||||
|
import { formatPrice } from '@woocommerce/price-format';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
|
@ -50,7 +51,11 @@ const TotalsFooterItem = ( {
|
||||||
getSetting< boolean >( 'taxesEnabled', true ) &&
|
getSetting< boolean >( 'taxesEnabled', true ) &&
|
||||||
getSetting< boolean >( 'displayCartPricesIncludingTax', false );
|
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.
|
// Prepare props to pass to the __experimentalApplyCheckoutFilter filter.
|
||||||
// We need to pluck out receiveCart.
|
// We need to pluck out receiveCart.
|
||||||
|
@ -64,6 +69,24 @@ const TotalsFooterItem = ( {
|
||||||
} );
|
} );
|
||||||
|
|
||||||
const parsedTaxValue = parseInt( totalTax, 10 );
|
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 (
|
return (
|
||||||
<TotalsItem
|
<TotalsItem
|
||||||
|
@ -78,12 +101,7 @@ const TotalsFooterItem = ( {
|
||||||
SHOW_TAXES &&
|
SHOW_TAXES &&
|
||||||
parsedTaxValue !== 0 && (
|
parsedTaxValue !== 0 && (
|
||||||
<p className="wc-block-components-totals-footer-item-tax">
|
<p className="wc-block-components-totals-footer-item-tax">
|
||||||
{ createInterpolateElement(
|
{ createInterpolateElement( description, {
|
||||||
__(
|
|
||||||
'Including <TaxAmount/> in taxes',
|
|
||||||
'woo-gutenberg-products-block'
|
|
||||||
),
|
|
||||||
{
|
|
||||||
TaxAmount: (
|
TaxAmount: (
|
||||||
<FormattedMonetaryAmount
|
<FormattedMonetaryAmount
|
||||||
className="wc-block-components-totals-footer-item-tax-value"
|
className="wc-block-components-totals-footer-item-tax-value"
|
||||||
|
@ -91,8 +109,7 @@ const TotalsFooterItem = ( {
|
||||||
value={ parsedTaxValue }
|
value={ parsedTaxValue }
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
}
|
} ) }
|
||||||
) }
|
|
||||||
</p>
|
</p>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,8 +42,43 @@ Default.decorators = [
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export const IncludingTaxes = Template.bind( {} );
|
export const NoTaxLabel = Template.bind( {} );
|
||||||
IncludingTaxes.decorators = [
|
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 ) => {
|
( StoryComponent ) => {
|
||||||
allSettings.displayCartPricesIncludingTax = true;
|
allSettings.displayCartPricesIncludingTax = true;
|
||||||
|
|
||||||
|
|
|
@ -44,6 +44,62 @@ exports[`TotalsFooterItem Does not show the "including %s of tax" line if tax is
|
||||||
</div>
|
</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`] = `
|
exports[`TotalsFooterItem Shows the "including %s of tax" line if tax is greater than 0 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -3,6 +3,8 @@
|
||||||
*/
|
*/
|
||||||
import { render } from '@testing-library/react';
|
import { render } from '@testing-library/react';
|
||||||
import { allSettings } from '@woocommerce/settings';
|
import { allSettings } from '@woocommerce/settings';
|
||||||
|
import { Currency } from '@woocommerce/types';
|
||||||
|
import { CartResponseTotals } from '@woocommerce/type-defs/cart-response';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
|
@ -14,7 +16,7 @@ describe( 'TotalsFooterItem', () => {
|
||||||
allSettings.taxesEnabled = true;
|
allSettings.taxesEnabled = true;
|
||||||
allSettings.displayCartPricesIncludingTax = true;
|
allSettings.displayCartPricesIncludingTax = true;
|
||||||
} );
|
} );
|
||||||
const currency = {
|
const currency: Currency = {
|
||||||
code: 'GBP',
|
code: 'GBP',
|
||||||
decimalSeparator: '.',
|
decimalSeparator: '.',
|
||||||
minorUnit: 2,
|
minorUnit: 2,
|
||||||
|
@ -24,7 +26,7 @@ describe( 'TotalsFooterItem', () => {
|
||||||
thousandSeparator: ',',
|
thousandSeparator: ',',
|
||||||
};
|
};
|
||||||
|
|
||||||
const values = {
|
const values: CartResponseTotals = {
|
||||||
currency_code: 'GBP',
|
currency_code: 'GBP',
|
||||||
currency_decimal_separator: '.',
|
currency_decimal_separator: '.',
|
||||||
currency_minor_unit: 2,
|
currency_minor_unit: 2,
|
||||||
|
@ -33,7 +35,6 @@ describe( 'TotalsFooterItem', () => {
|
||||||
currency_symbol: '£',
|
currency_symbol: '£',
|
||||||
currency_thousand_separator: ',',
|
currency_thousand_separator: ',',
|
||||||
tax_lines: [],
|
tax_lines: [],
|
||||||
length: 2,
|
|
||||||
total_discount: '0',
|
total_discount: '0',
|
||||||
total_discount_tax: '0',
|
total_discount_tax: '0',
|
||||||
total_fees: '0',
|
total_fees: '0',
|
||||||
|
@ -78,4 +79,33 @@ describe( 'TotalsFooterItem', () => {
|
||||||
);
|
);
|
||||||
expect( container ).toMatchSnapshot();
|
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