Implement @woocommerce/price-format dependency

package.json

@@ -30,12 +30,12 @@
 		"prettier": "npm:[email protected]"
 	},
 	"devDependencies": {
+		"@wordpress/components": "19.2.0",
 		"@testing-library/jest-dom": "5.16.1",
 		"@testing-library/react": "12.1.2",
-		"@wordpress/components": "19.1.0",
 		"@wordpress/dependency-extraction-webpack-plugin": "3.2.1",
 		"@wordpress/i18n": "4.2.4",
 		"@wordpress/prettier-config": "1.1.1",
-		"@wordpress/scripts": "19.2.2"
+		"@wordpress/scripts": "19.2.3"
 	}
 }

src/block.js

@@ -3,6 +3,7 @@
  */
 import ProgressLabel from './components/progress-label';
 import ProgressBar from './components/progress-bar';
+import './style.scss';
 
 export default function Block( attributes ) {
 	return (

src/components/progress-bar/index.js

@@ -1,4 +1,10 @@
-const ProgressBar = ( { currentTotal, freeShippingFrom } ) => {
+/**
+ * Internal dependencies
+ */
+import { getCurrentTotal } from '../../util';
+
+const ProgressBar = ( { freeShippingFrom, cart } ) => {
+	const currentTotal = getCurrentTotal( cart );
 	const progress = ( currentTotal / freeShippingFrom ) * 100;
 	const divWidth = ( progress > 100 ? 100 : progress ) + '%';
 	const divStyle = { width: divWidth };

src/components/progress-bar/__test__/index.test.js → src/components/progress-bar/index.test.js

@@ -7,7 +7,7 @@ import '@testing-library/jest-dom';
 /**
  * Internal dependencies
  */
-import ProgressBar from './../index';
+import ProgressBar from './index';
 
 const outer = '.wc-free-shipping-progress-bar__outer';
 const inner = '.wc-free-shipping-progress-bar__inner';
@@ -24,22 +24,34 @@ describe( 'The ProgressBar component', () => {
 	} );
 
 	it( 'shows the style for a full bar correctly', () => {
-		render( <ProgressBar freeShippingFrom="4" currentTotal="4" /> );
+		const cart = {
+			cartTotals: { total_price: 100, currency_minor_unit: 0 },
+		};
+		render( <ProgressBar freeShippingFrom="100" cart={ cart } /> );
 		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 100%' );
 	} );
 
 	it( 'shows the style for a threequarter bar correctly', () => {
-		render( <ProgressBar freeShippingFrom="4" currentTotal="3" /> );
+		const cart = {
+			cartTotals: { total_price: 75, currency_minor_unit: 0 },
+		};
+		render( <ProgressBar freeShippingFrom="100" cart={ cart } /> );
 		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 75%' );
 	} );
 
 	it( 'shows the style for a half bar correctly', () => {
-		render( <ProgressBar freeShippingFrom="4" currentTotal="2" /> );
+		const cart = {
+			cartTotals: { total_price: 50, currency_minor_unit: 0 },
+		};
+		render( <ProgressBar freeShippingFrom="100" cart={ cart } /> );
 		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 50%' );
 	} );
 
 	it( 'shows the style for an empty bar correctly', () => {
-		render( <ProgressBar freeShippingFrom="4" currentTotal="0" /> );
+		const cart = {
+			cartTotals: { total_price: 0, currency_minor_unit: 0 },
+		};
+		render( <ProgressBar freeShippingFrom="1" cart={ cart } /> );
 		expect( document.querySelector( inner ) ).toHaveStyle( 'width: 0%' );
 	} );
 } );

src/components/progress-label/index.js

@@ -1,13 +1,30 @@
+/**
+ * External dependencies
+ */
+import {
+	formatPrice,
+	getCurrencyFromPriceResponse,
+} from '@woocommerce/price-format';
+
+/**
+ * Internal dependencies
+ */
+import { getCurrentTotal, getMinorUnit, getRemaining } from '../../util';
+
 const ProgressLabel = ( {
-	currentTotal,
 	freeShippingFrom,
 	labelInsufficientTotals,
 	labelSufficientTotals,
+	cart,
 } ) => {
-	const remaining = Number( freeShippingFrom - currentTotal ).toFixed( 2 );
+	const currentTotal = getCurrentTotal( cart );
+	const minorUnit = getMinorUnit( cart );
+	const remaining = getRemaining( freeShippingFrom, currentTotal, minorUnit );
+	const currency = getCurrencyFromPriceResponse( cart );
+	const price = formatPrice( remaining, currency );
 	const message =
 		remaining > 0
-			? labelInsufficientTotals.replace( '{amount}', remaining )
+			? labelInsufficientTotals.replace( '{amount}', price )
 			: labelSufficientTotals;
 
 	return (

src/components/progress-label/index.test.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+/**
+ * Internal dependencies
+ */
+import ProgressLabel from './index';
+
+jest.mock(
+	'@woocommerce/price-format',
+	() => ( {
+		formatPrice: jest.fn().mockImplementation( () => '$100.00' ),
+		getCurrencyFromPriceResponse: jest.fn().mockImplementation( () => ( {
+			code: 'USD',
+			prefix: '$',
+		} ) ),
+	} ),
+	{ virtual: true }
+);
+
+const label = '.wc-free-shipping-progress-bar__label';
+
+describe( 'The ProgressLabel component', () => {
+	/**
+	 * Test is the <ProgressLabel /> component renderes correctly without props.
+	 */
+	it( 'shows the classnames of the div correctly', () => {
+		render( <ProgressLabel /> );
+		expect( document.querySelector( label ) ).toBeInTheDocument();
+	} );
+
+	/**
+	 * Test is the <ProgressLabel /> component shows the correct message for the
+	 * insufficient totals when shipping is free from $200.00, but the total
+	 * cart value is $100.00.
+	 */
+	it( 'shows the message for insufficient totals correctly', () => {
+		const labelBefore = 'Spend only {amount} more to get free shipping!';
+		const labelAfter = 'Spend only $100.00 more to get free shipping!';
+		const args = {
+			freeShippingFrom: 200,
+			labelInsufficientTotals: labelBefore,
+			cart: {
+				cartTotals: { total_price: 100, currency_minor_unit: 0 },
+			},
+		};
+
+		render( <ProgressLabel { ...args } /> );
+		expect( screen.getByText( labelAfter ) ).toBeInTheDocument();
+	} );
+
+	/**
+	 * Test is the <ProgressLabel /> component shows the correct message for the
+	 * sufficient totals when shipping is free from $100.00, and the total cart
+	 * value equals $100.00.
+	 */
+	it( 'shows the message for sufficient totals correctly', () => {
+		const label = 'You have qualified for free shipping. Great job!';
+		const args = {
+			freeShippingFrom: 100,
+			labelSufficientTotals: label,
+			cart: { cartTotals: { total_price: 100, currency_minor_unit: 0 } },
+		};
+
+		const progressbar = render( <ProgressLabel { ...args } /> );
+		expect( screen.getByText( label ) ).toBeInTheDocument();
+	} );
+} );

src/edit.js

@@ -18,7 +18,6 @@ import ProgressBar from './components/progress-bar';
 import useViewSwitcher from './components/use-view-switcher';
 import { notice } from './constants';
 import { Icon, progressBarHalf, progressBarFull } from './icons';
-import './style.scss';
 
 const BlockSettings = ( { attributes, setAttributes } ) => {
 	const { freeShippingFrom } = attributes;

src/util.js

@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import metadata from '../block.json';
+
+/**
+ * Get the current totals.
+ *
+ * @param {Object} cart The cart object.
+ * @returns {Number} The totals of the cart object, if available, else the totals of the cart progress bar preview.
+ */
+export function getCurrentTotal( cart ) {
+	if ( undefined !== cart ) {
+		const total_price = cart.cartTotals.total_price;
+		const minor_unit = cart.cartTotals.currency_minor_unit;
+
+		return total_price / Math.pow( 10, minor_unit );
+	}
+
+	return metadata.attributes.currentTotal.default;
+}
+
+/**
+ * Get the minor unit.
+ *
+ * @param {Object} cart The cart object.
+ * @returns {Number} The totals of the cart object, if available, else 0.
+ */
+export function getMinorUnit( cart ) {
+	return cart?.cartTotals?.currency_minor_unit || 0;
+}
+
+/**
+ * Get the remaining value.
+ *
+ * @param {Number} freeShippingFrom The free shipping from value.
+ * @param {Number} currentTotal The current total value.
+ * @param {Number} minorUnit The minor unit value.
+ * @returns {Number} The difference between freeShippingFrom and currentTotal.
+ */
+export function getRemaining( freeShippingFrom, currentTotal, minorUnit ) {
+	const remaining = freeShippingFrom - currentTotal;
+	const power = Math.pow( 10, minorUnit );
+	const result = remaining.toFixed( minorUnit ) * power;
+
+	return result;
+}