♻️ Replace generatePriceText with custom component

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,8 +1,8 @@
-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,
@@ -24,11 +24,13 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-amex.svg',
 						'icon-button-discover.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={
-						'ccf',
+						<PricingTitleBadge
-						countryPriceInfo[ storeCountry ],
+							item="ccf"
-						storeCurrency
+							currency={ storeCurrency }
-					) }
+							country={ storeCountry }
+						/>
+					}
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -48,11 +50,13 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-apple-pay.svg',
 						'icon-button-google-pay.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={
-						'dw',
+						<PricingTitleBadge
-						countryPriceInfo[ storeCountry ],
+							item="dw"
-						storeCurrency
+							currency={ storeCurrency }
-					) }
+							country={ storeCountry }
+						/>
+					}
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -73,11 +77,13 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-blik.svg',
 						'icon-button-bancontact.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={
-						'apm',
+						<PricingTitleBadge
-						countryPriceInfo[ storeCountry ],
+							item="apm"
-						storeCurrency
+							currency={ storeCurrency }
-					) }
+							country={ storeCountry }
+						/>
+					}
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -91,11 +97,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 +127,13 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-amex.svg',
 						'icon-button-discover.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={
-						'ccf',
+						<PricingTitleBadge
-						countryPriceInfo[ storeCountry ],
+							item="ccf"
-						storeCurrency
+							currency={ storeCurrency }
-					) }
+							country={ storeCountry }
+						/>
+					}
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -147,11 +153,13 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-apple-pay.svg',
 						'icon-button-google-pay.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={
-						'dw',
+						<PricingTitleBadge
-						countryPriceInfo[ storeCountry ],
+							item="dw"
-						storeCurrency
+							currency={ storeCurrency }
-					) }
+							country={ storeCountry }
+						/>
+					}
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -173,11 +181,13 @@ const AcdcOptionalPaymentMethods = ( {
 						'icon-button-blik.svg',
 						'icon-button-bancontact.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={
-						'apm',
+						<PricingTitleBadge
-						countryPriceInfo[ storeCountry ],
+							item="apm"
-						storeCurrency
+							currency={ storeCurrency }
-					) }
+							country={ storeCountry }
+						/>
+					}
 					description={ sprintf(
 						// translators: %s: Link to PayPal business fees guide
 						__(
@@ -204,11 +214,13 @@ const AcdcOptionalPaymentMethods = ( {
 					'icon-button-amex.svg',
 					'icon-button-discover.svg',
 				] }
-				textBadge={ generatePriceText(
+				textBadge={
-					'ccf',
+					<PricingTitleBadge
-					countryPriceInfo[ storeCountry ],
+						item="ccf"
-					storeCurrency
+						currency={ storeCurrency }
-				) }
+						country={ storeCountry }
+					/>
+				}
 				description={ sprintf(
 					// translators: %s: Link to PayPal business fees guide
 					__(
@@ -225,11 +237,13 @@ const AcdcOptionalPaymentMethods = ( {
 					'icon-button-apple-pay.svg',
 					'icon-button-google-pay.svg',
 				] }
-				textBadge={ generatePriceText(
+				textBadge={
-					'dw',
+					<PricingTitleBadge
-					countryPriceInfo[ storeCountry ],
+						item="dw"
-					storeCurrency
+						currency={ storeCurrency }
-				) }
+						country={ storeCountry }
+					/>
+				}
 				description={ sprintf(
 					// translators: %s: Link to PayPal business fees guide
 					__(
@@ -251,11 +265,13 @@ const AcdcOptionalPaymentMethods = ( {
 					'icon-button-blik.svg',
 					'icon-button-bancontact.svg',
 				] }
-				textBadge={ generatePriceText(
+				textBadge={
-					'apm',
+					<PricingTitleBadge
-					countryPriceInfo[ storeCountry ],
+						item="apm"
-					storeCurrency
+						currency={ storeCurrency }
-				) }
+						country={ storeCountry }
+					/>
+				}
 				description={ sprintf(
 					// translators: %s: Link to PayPal business fees guide
 					__(

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

@@ -1,7 +1,7 @@
-import BadgeBox from '../BadgeBox';
 import { __, sprintf } from '@wordpress/i18n';
-import generatePriceText from '../../../utils/badgeBoxUtils';
+
-import { countryPriceInfo } from '../../../utils/countryPriceInfo';
+import BadgeBox from '../BadgeBox';
+import PricingTitleBadge from '../PricingTitleBadge';
 
 const BcdcOptionalPaymentMethods = ( {
 	isPayLater,
@@ -22,11 +22,13 @@ const BcdcOptionalPaymentMethods = ( {
 						'icon-button-amex.svg',
 						'icon-button-discover.svg',
 					] }
-					textBadge={ generatePriceText(
+					textBadge={
-						'standardCardFields',
+						<PricingTitleBadge
-						countryPriceInfo[ storeCountry ],
+							item="standardCardFields"
-						storeCurrency
+							currency={ storeCurrency }
-					) }
+							country={ storeCountry }
+						/>
+					}
 					description={ sprintf(
 						// translators: %s: Link to PayPal REST application guide
 						__(
@@ -53,11 +55,13 @@ const BcdcOptionalPaymentMethods = ( {
 					'icon-button-amex.svg',
 					'icon-button-discover.svg',
 				] }
-				textBadge={ generatePriceText(
+				textBadge={
-					'standardCardFields',
+					<PricingTitleBadge
-					countryPriceInfo[ storeCountry ],
+						item="standardCardFields"
-					storeCurrency
+						currency={ storeCurrency }
-				) }
+						country={ storeCountry }
+					/>
+				}
 				description={ sprintf(
 					// translators: %s: Link to PayPal REST application guide
 					__(

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

@@ -0,0 +1,29 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { countryPriceInfo } from '../../utils/countryPriceInfo';
+import TitleBadge, { TITLE_BADGE_INFO } from './TitleBadge';
+import { CommonHooks } from '../../data';
+
+const PricingTitleBadge = ( { item, country, currency } ) => {
+	const infos = countryPriceInfo[ country ];
+
+	if ( ! infos || ! infos[ item ] ) {
+		return null;
+	}
+
+	const percentage = infos[ item ].toFixed( 2 );
+	const fixedFee = `${ infos.currencySymbol }${ infos.fixedFee }`;
+
+	const label = sprintf(
+		__(
+			'from %1$s%% + %2$s %2$s<sup>1</sup>',
+			'woocommerce-paypal-payments'
+		),
+		percentage,
+		fixedFee,
+		currency
+	);
+
+	return <TitleBadge type={ TITLE_BADGE_INFO } text={ label } />;
+};
+
+export default PricingTitleBadge;

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

@@ -1,10 +1,9 @@
-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 BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
+import Separator from '../Separator';
 import OptionalPaymentMethods from '../OptionalPaymentMethods/OptionalPaymentMethods';
+import PricingTitleBadge from '../PricingTitleBadge';
 
 const AcdcFlow = ( {
 	isFastlane,
@@ -22,11 +21,13 @@ const AcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 						titleType={ BADGE_BOX_TITLE_BIG }
-						textBadge={ generatePriceText(
+						textBadge={
-							'checkout',
+							<PricingTitleBadge
-							countryPriceInfo[ storeCountry ],
+								item="checkout"
-							storeCurrency
+								currency={ storeCurrency }
-						) }
+								country={ storeCountry }
+							/>
+						}
 						description={ __(
 							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 							'woocommerce-paypal-payments'
@@ -133,11 +134,13 @@ const AcdcFlow = ( {
 							'woocommerce-paypal-payments'
 						) }
 						titleType={ BADGE_BOX_TITLE_BIG }
-						textBadge={ generatePriceText(
+						textBadge={
-							'checkout',
+							<PricingTitleBadge
-							countryPriceInfo[ storeCountry ],
+								item="checkout"
-							storeCurrency
+								currency={ storeCurrency }
-						) }
+								country={ storeCountry }
+							/>
+						}
 						description={ __(
 							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 							'woocommerce-paypal-payments'
@@ -217,11 +220,13 @@ const AcdcFlow = ( {
 						'woocommerce-paypal-payments'
 					) }
 					titleType={ BADGE_BOX_TITLE_BIG }
-					textBadge={ generatePriceText(
+					textBadge={
-						'checkout',
+						<PricingTitleBadge
-						countryPriceInfo[ storeCountry ],
+							item="checkout"
-						storeCurrency
+							currency={ storeCurrency }
-					) }
+							country={ storeCountry }
+						/>
+					}
 					description={ __(
 						'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 						'woocommerce-paypal-payments'

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

@@ -1,9 +1,9 @@
-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 BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
 	if ( isPayLater && storeCountry === 'US' ) {
@@ -16,11 +16,13 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
 							'woocommerce-paypal-payments'
 						) }
 						titleType={ BADGE_BOX_TITLE_BIG }
-						textBadge={ generatePriceText(
+						textBadge={
-							'checkout',
+							<PricingTitleBadge
-							countryPriceInfo[ storeCountry ],
+								item="checkout"
-							storeCurrency
+								currency={ storeCurrency }
-						) }
+								country={ storeCountry }
+							/>
+						}
 						description={ __(
 							'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 							'woocommerce-paypal-payments'
@@ -122,11 +124,13 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency } ) => {
 			<BadgeBox
 				title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
 				titleType={ BADGE_BOX_TITLE_BIG }
-				textBadge={ generatePriceText(
+				textBadge={
-					'checkout',
+					<PricingTitleBadge
-					countryPriceInfo[ storeCountry ],
+						item="checkout"
-					storeCurrency
+						currency={ storeCurrency }
-				) }
+						country={ storeCountry }
+					/>
+				}
 				description={ __(
 					'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
 					'woocommerce-paypal-payments'

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

@@ -1,7 +1,8 @@
 import { __ } from '@wordpress/i18n';
+
+import { countryPriceInfo } from '../../../utils/countryPriceInfo';
 import AcdcFlow from './AcdcFlow';
 import BcdcFlow from './BcdcFlow';
-import { countryPriceInfo } from '../../../utils/countryPriceInfo';
 import { pricesBasedDescription } from './pricesBasedDescription';
 
 const WelcomeDocs = ( {

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;