woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 12:25:15 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Replace generatePriceText with custom component

Browse source
This commit is contained in:
Philipp Stracker 2024-12-12 16:55:19 +01:00
parent a3b68aae14
commit e59ae23c43
No known key found for this signature in database
8 changed files with 159 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

9
modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js
View file

@ -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 && (
<TitleBadge
type={ TITLE_BADGE_INFO }
text={ props.textBadge }
/>
) }
{ props.textBadge }
</span>
<div className="ppcp-r-badge-box__description">
{ props?.description && (

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

@ -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 { countryPriceInfo } from '../../../utils/countryPriceInfo';
import PricingTitleBadge from '../PricingTitleBadge';
const AcdcOptionalPaymentMethods = ( {
isFastlane,
@ -24,11 +24,13 @@ const AcdcOptionalPaymentMethods = ( {
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ generatePriceText(
'ccf',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="ccf"
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(
'dw',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="dw"
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(
'apm',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="apm"
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(
'fastlane',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge item="fast country currency=storeCurrency=storeCountrylane" />
}
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(
'ccf',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="ccf"
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(
'dw',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="dw"
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(
'apm',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="apm"
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(
'ccf',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="ccf"
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(
'dw',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="dw"
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(
'apm',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="apm"
currency={ storeCurrency }
country={ storeCountry }
/>
}
description={ sprintf(
// translators: %s: Link to PayPal business fees guide
__(

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

@ -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(
'standardCardFields',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="standardCardFields"
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(
'standardCardFields',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="standardCardFields"
currency={ storeCurrency }
country={ storeCountry }
/>
}
description={ sprintf(
// translators: %s: Link to PayPal REST application guide
__(

29
modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js Normal file
View file

@ -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;

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

@ -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(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="checkout"
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(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="checkout"
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(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="checkout"
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'

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

@ -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(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="checkout"
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(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
textBadge={
<PricingTitleBadge
item="checkout"
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'

3
modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js
View file

@ -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 = ( {

18
modules/ppcp-settings/resources/js/utils/badgeBoxUtils.js
View file

@ -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;