✨ Introduce price-matrix and currency-formatting

modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js

@@ -1,8 +1,19 @@
 import { __, sprintf } from '@wordpress/i18n';
 
-import { countryPriceInfo } from '../../utils/countryPriceInfo';
-import TitleBadge, { TITLE_BADGE_INFO } from './TitleBadge';
 import { CommonHooks } from '../../data';
+import { countryPriceInfo } from '../../utils/countryPriceInfo';
+import { formatPrice } from '../../utils/formatPrice';
+import TitleBadge, { TITLE_BADGE_INFO } from './TitleBadge';
+
+const getFixedAmount = ( currency, priceList ) => {
+	if ( priceList[ currency ] ) {
+		return formatPrice( priceList[ currency ], currency );
+	}
+
+	const [ defaultCurrency, defaultPrice ] = Object.entries( priceList )[ 0 ];
+
+	return formatPrice( defaultPrice, defaultCurrency );
+};
 
 const PricingTitleBadge = ( { item } ) => {
 	const { storeCountry } = CommonHooks.useWooSettings();
@@ -13,13 +24,12 @@ const PricingTitleBadge = ( { item } ) => {
 	}
 
 	const percentage = infos[ item ].toFixed( 2 );
-	const fixedFee = `${ infos.currencySymbol }${ infos.fixedFee }`;
+	const fixedAmount = getFixedAmount( storeCountry, infos.fixedFee );
 
 	const label = sprintf(
-		__( 'from %1$s%% + %2$s %3$s', 'woocommerce-paypal-payments' ),
+		__( 'from %1$s%% + %2$s', 'woocommerce-paypal-payments' ),
 		percentage,
-		fixedFee,
-		infos.currencySymbol
+		fixedAmount
 	);
 
 	return (

modules/ppcp-settings/resources/js/utils/countryPriceInfo.js

@@ -1,7 +1,8 @@
 export const countryPriceInfo = {
 	US: {
-		currencySymbol: '$',
-		fixedFee: 0.49,
+		fixedFee: {
+			USD: 0.49,
+		},
 		checkout: 3.49,
 		ccf: 2.59,
 		dw: 2.59,
@@ -10,8 +11,9 @@ export const countryPriceInfo = {
 		standardCardFields: 2.99,
 	},
 	UK: {
-		currencySymbol: '£',
-		fixedFee: 0.3,
+		fixedFee: {
+			GPB: 0.3,
+		},
 		checkout: 2.9,
 		ccf: 1.2,
 		dw: 1.2,
@@ -19,8 +21,9 @@ export const countryPriceInfo = {
 		standardCardFields: 1.2,
 	},
 	CA: {
-		currencySymbol: '$',
-		fixedFee: 0.3,
+		fixedFee: {
+			CAD: 0.3,
+		},
 		checkout: 2.9,
 		ccf: 2.7,
 		dw: 2.7,
@@ -28,8 +31,9 @@ export const countryPriceInfo = {
 		standardCardFields: 2.9,
 	},
 	AU: {
-		currencySymbol: '$',
-		fixedFee: 0.3,
+		fixedFee: {
+			AUD: 0.3,
+		},
 		checkout: 2.6,
 		ccf: 1.75,
 		dw: 1.75,
@@ -37,8 +41,9 @@ export const countryPriceInfo = {
 		standardCardFields: 2.6,
 	},
 	FR: {
-		currencySymbol: '€',
-		fixedFee: 0.35,
+		fixedFee: {
+			EUR: 0.35,
+		},
 		checkout: 2.9,
 		ccf: 1.2,
 		dw: 1.2,
@@ -46,8 +51,9 @@ export const countryPriceInfo = {
 		standardCardFields: 1.2,
 	},
 	IT: {
-		currencySymbol: '€',
-		fixedFee: 0.35,
+		fixedFee: {
+			EUR: 0.35,
+		},
 		checkout: 3.4,
 		ccf: 1.2,
 		dw: 1.2,
@@ -55,8 +61,9 @@ export const countryPriceInfo = {
 		standardCardFields: 1.2,
 	},
 	DE: {
-		currencySymbol: '€',
-		fixedFee: 0.39,
+		fixedFee: {
+			EUR: 0.39,
+		},
 		checkout: 2.99,
 		ccf: 2.99,
 		dw: 2.99,
@@ -64,8 +71,9 @@ export const countryPriceInfo = {
 		standardCardFields: 2.99,
 	},
 	ES: {
-		currencySymbol: '€',
-		fixedFee: 0.35,
+		fixedFee: {
+			EUR: 0.35,
+		},
 		checkout: 2.9,
 		ccf: 1.2,
 		dw: 1.2,

modules/ppcp-settings/resources/js/utils/formatPrice.js

@@ -0,0 +1,34 @@
+const priceFormatInfo = {
+	USD: {
+		prefix: '$',
+		suffix: 'USD',
+	},
+	CAD: {
+		prefix: '$',
+		suffix: 'CAD',
+	},
+	AUD: {
+		prefix: '$',
+		suffix: 'AUD',
+	},
+	EUR: {
+		prefix: '€',
+		suffix: '',
+	},
+	GPB: {
+		prefix: '£',
+		suffix: '',
+	},
+};
+
+export const formatPrice = ( value, currency ) => {
+	const currencyInfo = priceFormatInfo[ currency ];
+	const amount = value.toFixed( 2 );
+
+	if ( ! currencyInfo ) {
+		console.error( `Unsupported currency: ${ currency }` );
+		return amount;
+	}
+
+	return `${ currencyInfo.prefix }${ amount } ${ currencyInfo.suffix }`;
+};