Fix cart line subtotal display when currency has 0 decimals (https://github.com/woocommerce/woocommerce-blocks/pull/3876)

* Fix cart line subtotal display when currency has 0 decimals

* Fix wrong usages of getCurrency instead of getCurrencyFromPriceResponse

* Add tests

* Move comment in tests to relevant line

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.js

@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import Label from '@woocommerce/base-components/label';
 import ProductPrice from '@woocommerce/base-components/product-price';
 import ProductName from '@woocommerce/base-components/product-name';
-import { getCurrency } from '@woocommerce/price-format';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	__experimentalApplyCheckoutFilter,
 	mustBeString,
@@ -54,7 +54,7 @@ const OrderSummaryItem = ( { cartItem } ) => {
 		[ cartItem ]
 	);
 
-	const priceCurrency = getCurrency( prices );
+	const priceCurrency = getCurrencyFromPriceResponse( prices );
 
 	const name = __experimentalApplyCheckoutFilter( {
 		filterName: 'itemName',
@@ -76,7 +76,7 @@ const OrderSummaryItem = ( { cartItem } ) => {
 	} )
 		.convertPrecision( priceCurrency.minorUnit )
 		.getAmount();
-	const totalsCurrency = getCurrency( totals );
+	const totalsCurrency = getCurrencyFromPriceResponse( totals );
 
 	let lineTotal = parseInt( totals.line_total, 10 );
 	if ( DISPLAY_CART_PRICES_INCLUDING_TAX ) {
@@ -84,9 +84,8 @@ const OrderSummaryItem = ( { cartItem } ) => {
 	}
 	const totalsPrice = Dinero( {
 		amount: lineTotal,
-	} )
-		.convertPrecision( totals.currency_minor_unit )
-		.getAmount();
+		precision: totalsCurrency.minorUnit,
+	} ).getAmount();
 	const subtotalPriceFormat = __experimentalApplyCheckoutFilter( {
 		filterName: 'subtotalPriceFormat',
 		defaultValue: '<price/>',

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js

@@ -15,7 +15,7 @@ import {
 	ProductMetadata,
 	ProductSaleBadge,
 } from '@woocommerce/base-components/cart-checkout';
-import { getCurrency } from '@woocommerce/price-format';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	__experimentalApplyCheckoutFilter,
 	mustBeString,
@@ -110,7 +110,7 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 		} ),
 		[ lineItem ]
 	);
-	const priceCurrency = getCurrency( prices );
+	const priceCurrency = getCurrencyFromPriceResponse( prices );
 	const name = __experimentalApplyCheckoutFilter( {
 		filterName: 'itemName',
 		defaultValue: initialName,
@@ -131,13 +131,14 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 		purchaseAmountSingle
 	);
 	const saleAmount = saleAmountSingle.multiply( quantity );
-	const totalsCurrency = getCurrency( totals );
+	const totalsCurrency = getCurrencyFromPriceResponse( totals );
 	let lineTotal = parseInt( totals.line_total, 10 );
 	if ( DISPLAY_CART_PRICES_INCLUDING_TAX ) {
 		lineTotal += parseInt( totals.line_total_tax, 10 );
 	}
 	const totalsPrice = Dinero( {
 		amount: lineTotal,
+		precision: totalsCurrency.minorUnit,
 	} );
 
 	const firstImage = images.length ? images[ 0 ] : {};
@@ -258,10 +259,7 @@ const CartLineItemRow = ( { lineItem = {} } ) => {
 				<ProductPrice
 					currency={ totalsCurrency }
 					format={ productPriceFormat }
-					price={ getAmountFromRawPrice(
-						totalsPrice,
-						totalsCurrency
-					) }
+					price={ totalsPrice.getAmount() }
 				/>
 
 				{ quantity > 1 && (

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/test/block.js

@@ -22,9 +22,11 @@ describe( 'Testing cart', () => {
 		await dispatch( storeKey ).invalidateResolutionForStore();
 		await dispatch( storeKey ).receiveCart( defaultCartState.cartData );
 	} );
+
 	afterEach( () => {
 		fetchMock.resetMocks();
 	} );
+
 	it( 'renders cart if there are items in the cart', async () => {
 		render(
 			<CartBlock
@@ -41,6 +43,7 @@ describe( 'Testing cart', () => {
 
 		expect( fetchMock ).toHaveBeenCalledTimes( 1 );
 	} );
+
 	it( 'renders empty cart if there are no items in the cart', async () => {
 		fetchMock.mockResponse( ( req ) => {
 			if ( req.url.match( /wc\/store\/cart/ ) ) {
@@ -62,4 +65,35 @@ describe( 'Testing cart', () => {
 		expect( screen.getByText( /Empty Cart/i ) ).toBeInTheDocument();
 		expect( fetchMock ).toHaveBeenCalledTimes( 1 );
 	} );
+
+	it( 'renders correct cart line subtotal when currency has 0 decimals', async () => {
+		fetchMock.mockResponse( ( req ) => {
+			if ( req.url.match( /wc\/store\/cart/ ) ) {
+				const cart = {
+					...previewCart,
+					// Make it so there is only one item to simplify things.
+					items: [
+						{
+							...previewCart.items[ 0 ],
+							totals: {
+								...previewCart.items[ 0 ].totals,
+								// Change price format so there are no decimals.
+								currency_minor_unit: 0,
+								currency_prefix: '',
+								currency_suffix: '€',
+								line_subtotal: '16',
+								line_total: '16',
+							},
+						},
+					],
+				};
+
+				return Promise.resolve( JSON.stringify( cart ) );
+			}
+		} );
+		render( <CartBlock emptyCart={ null } attributes={ {} } /> );
+
+		await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
+		expect( screen.getAllByRole( 'cell' )[ 1 ] ).toHaveTextContent( '16€' );
+	} );
 } );