Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 29f89aa

Browse files
opropr
committed
Fix display of itemised taxes (#4279)
* Add price to itemised tax rates & hide Total when itemised taxes are on * Update snapshots for taxes in sidebar
1 parent f2529cd commit 29f89aa

File tree

4 files changed

+72
-86
lines changed

4 files changed

+72
-86
lines changed

‎assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap‎

Lines changed: 30 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1312,35 +1312,26 @@ exports[`Testing cart Shows individual tax lines if the store is set to do so 1`
13121312
</fieldset>
13131313
</div>
13141314
<div
1315-
class="wc-block-components-totals-item wc-block-components-totals-taxes"
1315+
class="wc-block-components-totals-taxes"
13161316
>
1317-
<span
1318-
class="wc-block-components-totals-item__label"
1319-
>
1320-
Taxes
1321-
</span>
1322-
<span
1323-
class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
1324-
>
1325-
$6.00
1326-
</span>
13271317
<div
1328-
class="wc-block-components-totals-item__description"
1318+
class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
13291319
>
1330-
<div
1331-
class="wc-block-components-totals-item wc-block-components-totals-taxes__tax-line"
1320+
<span
1321+
class="wc-block-components-totals-item__label"
13321322
>
1333-
<span
1334-
class="wc-block-components-totals-item__label"
1335-
>
1336-
Sales tax
1337-
</span>
1338-
<div
1339-
class="wc-block-components-totals-item__description"
1340-
/>
1341-
</div>
1342-
1323+
Sales tax
1324+
</span>
1325+
<span
1326+
class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
1327+
>
1328+
$6.00
1329+
</span>
1330+
<div
1331+
class="wc-block-components-totals-item__description"
1332+
/>
13431333
</div>
1334+
13441335
</div>
13451336
<div
13461337
class="wc-block-components-totals-item wc-block-components-totals-footer-item"
@@ -2017,35 +2008,26 @@ exports[`Testing cart Shows rate percentages after tax lines if the block is set
20172008
</fieldset>
20182009
</div>
20192010
<div
2020-
class="wc-block-components-totals-item wc-block-components-totals-taxes"
2011+
class="wc-block-components-totals-taxes"
20212012
>
2022-
<span
2023-
class="wc-block-components-totals-item__label"
2024-
>
2025-
Taxes
2026-
</span>
2027-
<span
2028-
class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
2029-
>
2030-
$6.00
2031-
</span>
20322013
<div
2033-
class="wc-block-components-totals-item__description"
2014+
class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
20342015
>
2035-
<div
2036-
class="wc-block-components-totals-item wc-block-components-totals-taxes__tax-line"
2016+
<span
2017+
class="wc-block-components-totals-item__label"
20372018
>
2038-
<span
2039-
class="wc-block-components-totals-item__label"
2040-
>
2041-
Sales tax 20%
2042-
</span>
2043-
<div
2044-
class="wc-block-components-totals-item__description"
2045-
/>
2046-
</div>
2047-
2019+
Sales tax 20%
2020+
</span>
2021+
<span
2022+
class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
2023+
>
2024+
$6.00
2025+
</span>
2026+
<div
2027+
class="wc-block-components-totals-item__description"
2028+
/>
20482029
</div>
2030+
20492031
</div>
20502032
<div
20512033
class="wc-block-components-totals-item wc-block-components-totals-footer-item"

‎assets/js/blocks/cart-checkout/checkout/sidebar/test/__snapshots__/index.js.snap‎

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -97,35 +97,26 @@ exports[`Testing checkout sidebar Shows rate percentages after tax lines if the
9797
</div>
9898
</div>
9999
<div
100-
class="wc-block-components-totals-item wc-block-components-totals-taxes"
100+
class="wc-block-components-totals-taxes"
101101
>
102-
<span
103-
class="wc-block-components-totals-item__label"
104-
>
105-
Taxes
106-
</span>
107-
<span
108-
class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
109-
>
110-
$6.00
111-
</span>
112102
<div
113-
class="wc-block-components-totals-item__description"
103+
class="wc-block-components-totals-item wc-block-components-totals-taxes__grouped-rate"
114104
>
115-
<div
116-
class="wc-block-components-totals-item wc-block-components-totals-taxes__tax-line"
105+
<span
106+
class="wc-block-components-totals-item__label"
117107
>
118-
<span
119-
class="wc-block-components-totals-item__label"
120-
>
121-
Sales tax 20%
122-
</span>
123-
<div
124-
class="wc-block-components-totals-item__description"
125-
/>
126-
</div>
127-
108+
Sales tax 20%
109+
</span>
110+
<span
111+
class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
112+
>
113+
$6.00
114+
</span>
115+
<div
116+
class="wc-block-components-totals-item__description"
117+
/>
128118
</div>
119+
129120
</div>
130121
<div
131122
class="wc-block-components-totals-item wc-block-components-totals-footer-item"

‎packages/checkout/totals/taxes/index.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,29 +40,38 @@ const TotalsTaxes = ( {
4040
return null;
4141
}
4242

43-
const itemisedTaxItems: ReactElement | null = getSetting(
43+
const showItemisedTaxes = getSetting(
4444
'displayItemizedTaxes',
4545
false
46-
) ? (
47-
<>
48-
{ taxLines.map( ( { name, rate }, i ) => {
46+
) as boolean;
47+
48+
const itemisedTaxItems: ReactElement | null = showItemisedTaxes ? (
49+
<div
50+
className={ classnames(
51+
'wc-block-components-totals-taxes',
52+
className
53+
) }
54+
>
55+
{ taxLines.map( ( { name, rate, price }, i ) => {
4956
const label = `${ name }${
5057
showRateAfterTaxName ? ` ${ rate }` : ''
5158
}`;
5259
return (
5360
<TotalsItem
5461
key={ `tax-line-${ i }` }
55-
className="wc-block-components-totals-taxes__tax-line"
62+
className="wc-block-components-totals-taxes__grouped-rate"
5663
currency={ currency }
5764
label={ label }
58-
value={ null }
65+
value={ parseInt( price, 10 ) }
5966
/>
6067
);
6168
} ) }{ ' ' }
62-
</>
69+
</div>
6370
) : null;
6471

65-
return (
72+
return showItemisedTaxes ? (
73+
itemisedTaxItems
74+
) : (
6675
<>
6776
<TotalsItem
6877
className={ classnames(
@@ -72,7 +81,7 @@ const TotalsTaxes = ( {
7281
currency={ currency }
7382
label={ __( 'Taxes', 'woo-gutenberg-products-block' ) }
7483
value={ parseInt( totalTax, 10 ) }
75-
description={ itemisedTaxItems }
84+
description={ null }
7685
/>
7786
</>
7887
);

‎packages/checkout/totals/taxes/style.scss‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
.wc-block-components-totals-item__description
2-
.wc-block-components-totals-item.wc-block-components-totals-taxes__tax-line {
3-
padding: 0;
4-
@include font-size(small);
5-
margin: $gap-smallest / 2;
1+
.wc-block-components-totals-item.wc-block-components-totals-taxes__grouped-rate {
2+
margin: $gap-smallest 0;
3+
&:first-child {
4+
margin-top: 0;
5+
}
6+
7+
&:last-child {
8+
margin-bottom: 0;
9+
}
610
}

0 commit comments

Comments
 (0)