From e59ae23c43c67ec64aae93519e8b9962bcbb4d2c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Thu, 12 Dec 2024 16:55:19 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Replace=20generatePriceTex?= =?UTF-8?q?t=20with=20custom=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/ReusableComponents/BadgeBox.js | 9 +- .../AcdcOptionalPaymentMethods.js | 122 ++++++++++-------- .../BcdcOptionalPaymentMethods.js | 30 +++-- .../ReusableComponents/PricingTitleBadge.js | 29 +++++ .../WelcomeDocs/AcdcFlow.js | 43 +++--- .../WelcomeDocs/BcdcFlow.js | 30 +++-- .../WelcomeDocs/WelcomeDocs.js | 3 +- .../resources/js/utils/badgeBoxUtils.js | 18 --- 8 files changed, 159 insertions(+), 125 deletions(-) create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js delete mode 100644 modules/ppcp-settings/resources/js/utils/badgeBoxUtils.js diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js index 5a257b22e..24dc36134 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js +++ b/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 ) => { ) } - { props.textBadge && ( - - ) } + { props.textBadge }
{ props?.description && ( diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js index 2abcc37a9..48562d372 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/AcdcOptionalPaymentMethods.js +++ b/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 { 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={ + + } 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={ + + } 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={ + + } description={ sprintf( // translators: %s: Link to PayPal business fees guide __( @@ -91,11 +97,9 @@ const AcdcOptionalPaymentMethods = ( { + } 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={ + + } 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={ + + } 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={ + + } 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={ + + } 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={ + + } 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={ + + } description={ sprintf( // translators: %s: Link to PayPal business fees guide __( diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js index b5e4b7d2e..3fb321387 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/OptionalPaymentMethods/BcdcOptionalPaymentMethods.js +++ b/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( - 'standardCardFields', - countryPriceInfo[ storeCountry ], - storeCurrency - ) } + textBadge={ + + } 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={ + + } description={ sprintf( // translators: %s: Link to PayPal REST application guide __( diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PricingTitleBadge.js new file mode 100644 index 000000000..293ec361e --- /dev/null +++ b/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$s1', + 'woocommerce-paypal-payments' + ), + percentage, + fixedFee, + currency + ); + + return ; +}; + +export default PricingTitleBadge; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js index 9779e789e..0cb62de5e 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js +++ b/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( - 'checkout', - countryPriceInfo[ storeCountry ], - storeCurrency - ) } + textBadge={ + + } 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={ + + } 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={ + + } description={ __( 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', 'woocommerce-paypal-payments' diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js index 99abfc4f2..8feda46fa 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js +++ b/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( - 'checkout', - countryPriceInfo[ storeCountry ], - storeCurrency - ) } + textBadge={ + + } 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 } ) => { + } description={ __( 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', 'woocommerce-paypal-payments' diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js index eabb5b3db..0e89b72be 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js +++ b/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 = ( { diff --git a/modules/ppcp-settings/resources/js/utils/badgeBoxUtils.js b/modules/ppcp-settings/resources/js/utils/badgeBoxUtils.js deleted file mode 100644 index 60c4da274..000000000 --- a/modules/ppcp-settings/resources/js/utils/badgeBoxUtils.js +++ /dev/null @@ -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 }1`, - 'woocommerce-paypal-payments' - ); -}; - -export default generatePriceText;