Implement @woocommerce/price-format dependency

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,15 @@
-const ProgressBar = ( { currentTotal, freeShippingFrom } ) => {
+/**
+ * External dependencies
+ */
+import { formatPrice } from '@woocommerce/price-format';
+
+/**
+ * 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-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/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,44 @@
+/**
+ * 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 15;
+}
+
+/**
+ * Get the minor unit.
+ *
+ * @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 getMinorUnit( cart ) {
+	if ( undefined !== cart ) {
+		return cart.cartTotals.currency_minor_unit;
+	}
+	return '';
+}
+
+/**
+ * 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;
+}

src/util.test.js

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import { getCurrentTotal, getMinorUnit, getRemaining } from './util';
+
+describe( 'The function getRemaining()', () => {
+	test.each`
+		freeShippingFrom | currentTotal | minorUnit | expected
+		${ 50 }          | ${ 48 }      | ${ 2 }    | ${ 200 }
+		${ 50 }          | ${ 48 }      | ${ 3 }    | ${ 2000 }
+		${ 50 }          | ${ 48 }      | ${ 0 }    | ${ 2 }
+		${ 50 }          | ${ 23.5 }    | ${ 2 }    | ${ 2650 }
+		${ 50 }          | ${ 23.05 }   | ${ 2 }    | ${ 2695 }
+		${ 50 }          | ${ 23.5 }    | ${ 3 }    | ${ 26500 }
+		${ 50 }          | ${ 23.05 }   | ${ 3 }    | ${ 26950 }
+		${ 50 }          | ${ 23.5 }    | ${ 0 }    | ${ 27 }
+		${ 50 }          | ${ 23.05 }   | ${ 0 }    | ${ 27 }
+	`(
+		'correctly returns the remaining price given $minorUnit minorUnit, $freeShippingFrom freeShippingFrom and $currentTotal currentTotal as $expected',
+		( { minorUnit, freeShippingFrom, currentTotal, expected } ) => {
+			const remaining = getRemaining(
+				freeShippingFrom,
+				currentTotal,
+				minorUnit
+			);
+			expect( remaining ).toEqual( expected );
+		}
+	);
+} );

webpack.config.js

@@ -3,10 +3,12 @@ const WooCommerceDependencyExtractionWebpackPlugin = require( '@wordpress/depend
 
 const wcDepMap = {
 	'@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ],
+	'@woocommerce/price-format': [ 'wc', 'priceFormat' ],
 };
 
 const wcHandleMap = {
 	'@woocommerce/blocks-checkout': 'wc-blocks-checkout',
+	'@woocommerce/price-format': 'wc-price-format',
 };
 
 const requestToExternal = ( request ) => {