Merge remote-tracking branch 'origin/trunk' into PCP-3930-Make-the-webhook-resubscribe/simulate-logic-usable-in-React-application

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

@@ -1,6 +1,4 @@
 import data from '../../utils/data';
-import TitleBadge, { TITLE_BADGE_INFO } from './TitleBadge';
-import { __ } from '@wordpress/i18n';
 
 const BadgeBox = ( props ) => {
 	const titleSize =
@@ -29,12 +27,7 @@ const BadgeBox = ( props ) => {
 					</span>
 				) }
 
-				{ props.textBadge && (
+				{ props.textBadge }
-					<TitleBadge
-						type={ TITLE_BADGE_INFO }
-						text={ props.textBadge }
-					/>
-				) }
 			</span>
 			<div className="ppcp-r-badge-box__description">
 				{ props?.description && (

modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js

@@ -1,14 +1,13 @@
-import BadgeBox from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
+
+import BadgeBox from '../BadgeBox';
 import Separator from '../Separator';
-import generatePriceText from '../../../utils/badgeBoxUtils';
+import PricingTitleBadge from '../PricingTitleBadge';
-import { countryPriceInfo } from '../../../utils/countryPriceInfo';
 
 const AcdcOptionalPaymentMethods = ( {
 	isFastlane,
 	isPayLater,
 	storeCountry,
-	storeCurrency,
 } ) => {
 	if ( isFastlane && isPayLater && storeCountry === 'US' ) {
 		return (
@@ -24,11 +23,7 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-amex.svg',
 						'icon-button-discover.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={ <PricingTitleBadge item="ccf" /> }
-						'ccf',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -48,11 +43,7 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-apple-pay.svg',
 						'icon-button-google-pay.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={ <PricingTitleBadge item="dw" /> }
-						'dw',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -73,11 +64,7 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-blik.svg',
 						'icon-button-bancontact.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={ <PricingTitleBadge item="apm" /> }
-						'apm',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -91,11 +78,9 @@ const AcdcOptionalPaymentMethods = ( {
 				<BadgeBox
 					title={ __( '', 'woocommerce-paypal-payments' ) }
 					imageBadge={ [ 'icon-payment-method-fastlane-small.svg' ] }
-					textBadge={ generatePriceText(
+					textBadge={
-						'fastlane',
+						<PricingTitleBadge item="fast country currency=storeCurrency=storeCountrylane" />
-						countryPriceInfo[ storeCountry ],
+					}
-						storeCurrency
-					) }
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -123,11 +108,7 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-amex.svg',
 						'icon-button-discover.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={ <PricingTitleBadge item="ccf" /> }
-						'ccf',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -147,11 +128,7 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-apple-pay.svg',
 						'icon-button-google-pay.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={ <PricingTitleBadge item="dw" /> }
-						'dw',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -173,11 +150,7 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-blik.svg',
 						'icon-button-bancontact.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={ <PricingTitleBadge item="apm" /> }
-						'apm',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -204,11 +177,7 @@ const AcdcOptionalPaymentMethods = ( {
 					'icon-button-amex.svg',
 					'icon-button-discover.svg',
 				] }
-				textBadge={ generatePriceText(
+				textBadge={ <PricingTitleBadge item="ccf" /> }
-					'ccf',
-					countryPriceInfo[ storeCountry ],
-					storeCurrency
-				) }
 				description={ sprintf(
 					// translators: %s: Link to PayPal business fees guide
 					__(
@@ -225,11 +194,7 @@ const AcdcOptionalPaymentMethods = ( {
 					'icon-button-apple-pay.svg',
 					'icon-button-google-pay.svg',
 				] }
-				textBadge={ generatePriceText(
+				textBadge={ <PricingTitleBadge item="dw" /> }
-					'dw',
-					countryPriceInfo[ storeCountry ],
-					storeCurrency
-				) }
 				description={ sprintf(
 					// translators: %s: Link to PayPal business fees guide
 					__(
@@ -251,11 +216,7 @@ const AcdcOptionalPaymentMethods = ( {
 					'icon-button-blik.svg',
 					'icon-button-bancontact.svg',
 				] }
-				textBadge={ generatePriceText(
+				textBadge={ <PricingTitleBadge item="apm" /> }
-					'apm',
-					countryPriceInfo[ storeCountry ],
-					storeCurrency
-				) }
 				description={ sprintf(
 					// translators: %s: Link to PayPal business fees guide
 					__(

modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js

@@ -1,13 +1,9 @@
-import BadgeBox from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
-import generatePriceText from '../../../utils/badgeBoxUtils';
-import { countryPriceInfo } from '../../../utils/countryPriceInfo';
 
-const BcdcOptionalPaymentMethods = ( {
+import BadgeBox from '../BadgeBox';
-	isPayLater,
+import PricingTitleBadge from '../PricingTitleBadge';
-	storeCountry,
+
-	storeCurrency,
+const BcdcOptionalPaymentMethods = ( { isPayLater, storeCountry } ) => {
-} ) => {
 	if ( isPayLater && storeCountry === 'us' ) {
 		return (
 			<div className="ppcp-r-optional-payment-methods__wrapper">
@@ -22,11 +18,9 @@ const BcdcOptionalPaymentMethods = ( {
 						'icon-button-amex.svg',
 						'icon-button-discover.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={
-						'standardCardFields',
+						<PricingTitleBadge item="standardCardFields" />
-						countryPriceInfo[ storeCountry ],
+					}
-						storeCurrency
-					) }
 					description={ sprintf(
 						// translators: %s: Link to PayPal REST application guide
 						__(
@@ -53,11 +47,7 @@ const BcdcOptionalPaymentMethods = ( {
 					'icon-button-amex.svg',
 					'icon-button-discover.svg',
 				] }
-				textBadge={ generatePriceText(
+				textBadge={ <PricingTitleBadge item="standardCardFields" /> }
-					'standardCardFields',
-					countryPriceInfo[ storeCountry ],
-					storeCurrency
-				) }
 				description={ sprintf(
 					// translators: %s: Link to PayPal REST application guide
 					__(

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

@@ -6,7 +6,6 @@ const OptionalPaymentMethods = ( {
 	isFastlane,
 	isPayLater,
 	storeCountry,
-	storeCurrency,
 } ) => {
 	return (
 		<div className="ppcp-r-optional-payment-methods">
@@ -15,13 +14,11 @@ const OptionalPaymentMethods = ( {
 					isFastlane={ isFastlane }
 					isPayLater={ isPayLater }
 					storeCountry={ storeCountry }
-					storeCurrency={ storeCurrency }
 				/>
 			) : (
 				<BcdcOptionalPaymentMethods
 					isPayLater={ isPayLater }
 					storeCountry={ storeCountry }
-					storeCurrency={ storeCurrency }
 				/>
 			) }
 		</div>

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

@@ -0,0 +1,38 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+import { countryPriceInfo } from '../../utils/countryPriceInfo';
+import { CommonHooks } from '../../data';
+
+const PricingDescription = () => {
+	const { storeCountry } = CommonHooks.useWooSettings();
+
+	if ( ! countryPriceInfo[ storeCountry ] ) {
+		return null;
+	}
+
+	const lastDate = 'October 25th, 2024'; // TODO -- needs to be the last plugin update date.
+	const detailsUrl =
+		'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input';
+
+	const label = sprintf(
+		// translators: %1$s: Pricing date, %2$s Link to PayPal price-details page.
+		__(
+			'Prices based on domestic transactions as of %1$s. <a target="_blank" href="%2$s">Click here</a> for full pricing details.',
+			'woocommerce-paypal-payments'
+		),
+		lastDate,
+		detailsUrl
+	);
+
+	return (
+		<p
+			className="ppcp-r-optional-payment-methods__description"
+			data-country={ storeCountry }
+		>
+			<sup>1</sup>
+			<span dangerouslySetInnerHTML={ { __html: label } } />
+		</p>
+	);
+};
+
+export default PricingDescription;

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

@@ -0,0 +1,43 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+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();
+	const infos = countryPriceInfo[ storeCountry ];
+
+	if ( ! infos || ! infos[ item ] ) {
+		return null;
+	}
+
+	const percentage = infos[ item ].toFixed( 2 );
+	const fixedAmount = getFixedAmount( storeCountry, infos.fixedFee );
+
+	const label = sprintf(
+		__( 'from %1$s%% + %2$s', 'woocommerce-paypal-payments' ),
+		percentage,
+		fixedAmount
+	);
+
+	return (
+		<TitleBadge
+			type={ TITLE_BADGE_INFO }
+			text={ `${ label }<sup>1</sup>` }
+		/>
+	);
+};
+
+export default PricingTitleBadge;

modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js

@@ -1,17 +1,11 @@
-import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
+
+import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
 import Separator from '../Separator';
-import generatePriceText from '../../../utils/badgeBoxUtils';
-import { countryPriceInfo } from '../../../utils/countryPriceInfo';
-
 import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
+import PricingTitleBadge from '../PricingTitleBadge';
 
-const AcdcFlow = ( {
+const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
-	isFastlane,
-	isPayLater,
-	storeCountry,
-	storeCurrency,
-} ) => {
 	if ( isFastlane && isPayLater && storeCountry === 'US' ) {
 		return (
 			<div className="ppcp-r-welcome-docs__wrapper">
@@ -22,11 +16,7 @@ const AcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 						titleType={ BADGE_BOX_TITLE_BIG }
-						textBadge={ generatePriceText(
+						textBadge={ <PricingTitleBadge item="checkout" /> }
-							'checkout',
-							countryPriceInfo[ storeCountry ],
-							storeCurrency
-						) }
 						description={ __(
 							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 							'woocommerce-paypal-payments'
@@ -116,7 +106,6 @@ const AcdcFlow = ( {
 						isFastlane={ isFastlane }
 						isPayLater={ isPayLater }
 						storeCountry={ storeCountry }
-						storeCurrency={ storeCurrency }
 					/>
 				</div>
 			</div>
@@ -133,11 +122,7 @@ const AcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 						titleType={ BADGE_BOX_TITLE_BIG }
-						textBadge={ generatePriceText(
+						textBadge={ <PricingTitleBadge item="checkout" /> }
-							'checkout',
-							countryPriceInfo[ storeCountry ],
-							storeCurrency
-						) }
 						description={ __(
 							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 							'woocommerce-paypal-payments'
@@ -201,7 +186,6 @@ const AcdcFlow = ( {
 						isFastlane={ isFastlane }
 						isPayLater={ isPayLater }
 						storeCountry={ storeCountry }
-						storeCurrency={ storeCurrency }
 					/>
 				</div>
 			</div>
@@ -217,11 +201,7 @@ const AcdcFlow = ( {
 						'woocommerce-paypal-payments'
 					) }
 					titleType={ BADGE_BOX_TITLE_BIG }
-					textBadge={ generatePriceText(
+					textBadge={ <PricingTitleBadge item="checkout" /> }
-						'checkout',
-						countryPriceInfo[ storeCountry ],
-						storeCurrency
-					) }
 					description={ __(
 						'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 						'woocommerce-paypal-payments'
@@ -280,7 +260,6 @@ const AcdcFlow = ( {
 					isFastlane={ isFastlane }
 					isPayLater={ isPayLater }
 					storeCountry={ storeCountry }
-					storeCurrency={ storeCurrency }
 				/>
 			</div>
 		</div>

modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js

@@ -1,11 +1,11 @@
-import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
-import Separator from '../Separator';
-import generatePriceText from '../../../utils/badgeBoxUtils';
-import { countryPriceInfo } from '../../../utils/countryPriceInfo';
-import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
 
-const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
+import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
+import Separator from '../Separator';
+import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
+import PricingTitleBadge from '../PricingTitleBadge';
+
+const BcdcFlow = ( { isPayLater, storeCountry } ) => {
 	if ( isPayLater && storeCountry === 'US' ) {
 		return (
 			<div className="ppcp-r-welcome-docs__wrapper">
@@ -16,11 +16,7 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
 							'woocommerce-paypal-payments'
 						) }
 						titleType={ BADGE_BOX_TITLE_BIG }
-						textBadge={ generatePriceText(
+						textBadge={ <PricingTitleBadge item="checkout" /> }
-							'checkout',
-							countryPriceInfo[ storeCountry ],
-							storeCurrency
-						) }
 						description={ __(
 							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 							'woocommerce-paypal-payments'
@@ -110,7 +106,6 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
 						isFastlane={ false }
 						isPayLater={ isPayLater }
 						storeCountry={ storeCountry }
-						storeCurrency={ storeCurrency }
 					/>
 				</div>
 			</div>
@@ -122,11 +117,7 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
 			<BadgeBox
 				title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
 				titleType={ BADGE_BOX_TITLE_BIG }
-				textBadge={ generatePriceText(
+				textBadge={ <PricingTitleBadge item="checkout" /> }
-					'checkout',
-					countryPriceInfo[ storeCountry ],
-					storeCurrency
-				) }
 				description={ __(
 					'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 					'woocommerce-paypal-payments'
@@ -181,7 +172,6 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
 				isFastlane={ false }
 				isPayLater={ isPayLater }
 				storeCountry={ storeCountry }
-				storeCurrency={ storeCurrency }
 			/>
 		</div>
 	);

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

@@ -1,16 +1,10 @@
 import { __ } from '@wordpress/i18n';
+
+import PricingDescription from '../PricingDescription';
 import AcdcFlow from './AcdcFlow';
 import BcdcFlow from './BcdcFlow';
-import { countryPriceInfo } from '../../../utils/countryPriceInfo';
-import { pricesBasedDescription } from './pricesBasedDescription';
 
-const WelcomeDocs = ( {
+const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry } ) => {
-	useAcdc,
-	isFastlane,
-	isPayLater,
-	storeCountry,
-	storeCurrency,
-} ) => {
 	return (
 		<div className="ppcp-r-welcome-docs">
 			<h2 className="ppcp-r-welcome-docs__title">
@@ -24,23 +18,14 @@ const WelcomeDocs = ( {
 					isFastlane={ isFastlane }
 					isPayLater={ isPayLater }
 					storeCountry={ storeCountry }
-					storeCurrency={ storeCurrency }
 				/>
 			) : (
 				<BcdcFlow
 					isPayLater={ isPayLater }
 					storeCountry={ storeCountry }
-					storeCurrency={ storeCurrency }
 				/>
 			) }
-			{ storeCountry in countryPriceInfo && (
+			<PricingDescription />
-				<p
-					className="ppcp-r-optional-payment-methods__description"
-					dangerouslySetInnerHTML={ {
-						__html: pricesBasedDescription,
-					} }
-				></p>
-			) }
 		</div>
 	);
 };

modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/pricesBasedDescription.js

@@ -1,10 +0,0 @@
-import { __, sprintf } from '@wordpress/i18n';
-
-export const pricesBasedDescription = sprintf(
-	// translators: %s: Link to PayPal REST application guide
-	__(
-		'<sup>1</sup>Prices based on domestic transactions as of October 25th, 2024. <a target="_blank" href="%s">Click here</a> for full pricing details.',
-		'woocommerce-paypal-payments'
-	),
-	'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
-);

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepPaymentMethods.js

@@ -1,12 +1,11 @@
 import { __ } from '@wordpress/i18n';
 
+import { CommonHooks, OnboardingHooks } from '../../../data';
 import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
 import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
 import SelectBox from '../../ReusableComponents/SelectBox';
-import { CommonHooks, OnboardingHooks } from '../../../data';
 import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods';
-import { pricesBasedDescription } from '../../ReusableComponents/WelcomeDocs/pricesBasedDescription';
+import PricingDescription from '../../ReusableComponents/PricingDescription';
-import { countryPriceInfo } from '../../../utils/countryPriceInfo';
 
 const OPM_RADIO_GROUP_NAME = 'optional-payment-methods';
 
@@ -60,14 +59,7 @@ const StepPaymentMethods = ( {} ) => {
 						type="radio"
 					></SelectBox>
 				</SelectBoxWrapper>
-				{ storeCountry in countryPriceInfo && (
+				<PricingDescription />
-					<p
-						className="ppcp-r-optional-payment-methods__description"
-						dangerouslySetInnerHTML={ {
-							__html: pricesBasedDescription,
-						} }
-					></p>
-				) }
 			</div>
 		</div>
 	);

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js

@@ -12,7 +12,7 @@ import { CommonHooks } from '../../../data';
 import BusyStateWrapper from '../../ReusableComponents/BusyStateWrapper';
 
 const StepWelcome = ( { setStep, currentStep } ) => {
-	const { storeCountry, storeCurrency } = CommonHooks.useWooSettings();
+	const { storeCountry } = CommonHooks.useWooSettings();
 
 	return (
 		<div className="ppcp-r-page-welcome">
@@ -54,7 +54,6 @@ const StepWelcome = ( { setStep, currentStep } ) => {
 				isFastlane={ true }
 				isPayLater={ true }
 				storeCountry={ storeCountry }
-				storeCurrency={ storeCurrency }
 			/>
 			<Separator text={ __( 'or', 'woocommerce-paypal-payments' ) } />
 			<AccordionSection

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

@@ -1,18 +0,0 @@
-import { __ } from '@wordpress/i18n';
-
-const generatePriceText = ( type, selectedCountryPrice, storeCurrency ) => {
-	if ( ! selectedCountryPrice || ! selectedCountryPrice[ type ] ) {
-		console.warn( `Invalid type or price data for: ${ type }` );
-		return '';
-	}
-
-	const percentage = selectedCountryPrice[ type ].toFixed( 2 );
-	const fixedFee = `${ selectedCountryPrice.currencySymbol }${ selectedCountryPrice.fixedFee }`;
-
-	return __(
-		`from ${ percentage }% + ${ fixedFee } ${ storeCurrency }<sup>1</sup>`,
-		'woocommerce-paypal-payments'
-	);
-};
-
-export default generatePriceText;

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

@@ -1,7 +1,8 @@
 export const countryPriceInfo = {
 	US: {
-		currencySymbol: '$',
+		fixedFee: {
-		fixedFee: 0.49,
+			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: {
-		fixedFee: 0.3,
+			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: {
-		fixedFee: 0.3,
+			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: {
-		fixedFee: 0.3,
+			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: {
-		fixedFee: 0.35,
+			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: {
-		fixedFee: 0.35,
+			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: {
-		fixedFee: 0.39,
+			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: {
-		fixedFee: 0.35,
+			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 }`;
+};