From e2092d23f086f58018efc8eab9684a19d25462a0 Mon Sep 17 00:00:00 2001 From: Narek Zakarian Date: Mon, 25 Nov 2024 19:00:21 +0400 Subject: [PATCH] Update the price info, create helper util --- .../WelcomeDocs/AcdcFlow.js | 69 ++++++++------- .../WelcomeDocs/BcdcFlow.js | 9 +- .../WelcomeDocs/WelcomeDocs.js | 88 ++++++++++++++++++- .../Screens/Onboarding/StepWelcome.js | 2 +- .../resources/js/utils/badgeBoxUtils.js | 18 ++++ 5 files changed, 145 insertions(+), 41 deletions(-) create mode 100644 modules/ppcp-settings/resources/js/utils/badgeBoxUtils.js 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 18fc248b2..612fd32d5 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/AcdcFlow.js @@ -1,8 +1,9 @@ import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; import { __, sprintf } from '@wordpress/i18n'; import Separator from '../Separator'; +import generatePriceText from '../../../utils/badgeBoxUtils'; -const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { +const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countryPriceInfo } ) => { if (isFastlane && isPayLater && storeCountry === 'us') { return (
@@ -23,12 +24,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { title={__('Pay with PayPal', 'woocommerce-paypal-payments')} imageBadge={['icon-button-paypal.svg']} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Our brand recognition helps give customers the confidence to buy. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> @@ -36,12 +37,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { title={__('Pay Later', 'woocommerce-paypal-payments')} imageBadge={['icon-payment-method-paypal-small.svg']} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Offer installment payment options and get paid upfront - at no extra cost to you. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> @@ -49,12 +50,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { title={__('Venmo', 'woocommerce-paypal-payments')} imageBadge={['icon-button-venmo.svg']} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Automatically offer Venmo checkout to millions of active users. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> @@ -62,12 +63,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { title={__('Crypto', 'woocommerce-paypal-payments')} imageBadge={['icon-payment-method-crypto.svg']} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Let customers checkout with Crypto while you get paid in cash. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} />
@@ -82,12 +83,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> @@ -96,26 +97,26 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Accept Apple Pay on eligible devices and Google Pay through mobile and web. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> 1', 'woocommerce-paypal-payments')} + textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Seamless payments for customers across the globe using their preferred payment methods. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> @@ -124,12 +125,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { imageBadge={['icon-payment-method-fastlane-small.svg']} textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Speed up guest checkout with Fatslane. Link a customer\'s email address to their payment details. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> @@ -190,12 +191,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} textBadge={__('from 1.20% + £0.30 GBP1', 'woocommerce-paypal-payments')} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> @@ -204,12 +205,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} textBadge={__('from 1.20% + £0.30 GBP1', 'woocommerce-paypal-payments')} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Accept Apple Pay on eligible devices and Google Pay through mobile and web. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> @@ -218,12 +219,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']} textBadge={__('from 1.20% + £0.30 GBP1', 'woocommerce-paypal-payments')} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Seamless payments for customers across the globe using their preferred payment methods. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> @@ -237,7 +238,7 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { 1', 'woocommerce-paypal-payments')} + textBadge={generatePriceText('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' @@ -281,42 +282,42 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => { 1', 'woocommerce-paypal-payments')} + textBadge={generatePriceText('ccf', countryPriceInfo[storeCountry], storeCurrency)} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> 1', 'woocommerce-paypal-payments')} + textBadge={generatePriceText('dw', countryPriceInfo[storeCountry], storeCurrency)} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Accept Apple Pay on eligible devices and Google Pay through mobile and web. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> 1', 'woocommerce-paypal-payments')} + textBadge={generatePriceText('apm', countryPriceInfo[storeCountry], storeCurrency)} description={sprintf( - // translators: %s: Link to PayPal REST application guide + // translators: %s: Link to PayPal business fees guide __( 'Seamless payments for customers across the globe using their preferred payment methods. Learn more', 'woocommerce-paypal-payments' ), - 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' + 'https://www.paypal.com/us/business/paypal-business-fees' )} /> 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 c2400ba62..c551ce881 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/BcdcFlow.js @@ -1,8 +1,9 @@ import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; import { __, sprintf } from '@wordpress/i18n'; import Separator from '../Separator'; +import generatePriceText from '../../../utils/badgeBoxUtils'; -const BcdcFlow = ( { isPayLater, storeCountry } ) => { +const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency, countryPriceInfo } ) => { if (isPayLater && storeCountry === 'us') { return (
@@ -80,7 +81,7 @@ const BcdcFlow = ( { isPayLater, storeCountry } ) => { 1', 'woocommerce-paypal-payments')} + textBadge={__('from 2.99% + $0.49 USD1', 'woocommerce-paypal-payments')} description={sprintf( // translators: %s: Link to PayPal REST application guide __( @@ -100,7 +101,7 @@ const BcdcFlow = ( { isPayLater, storeCountry } ) => { 1', 'woocommerce-paypal-payments')} + textBadge={generatePriceText('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' @@ -143,7 +144,7 @@ const BcdcFlow = ( { isPayLater, storeCountry } ) => { 1', 'woocommerce-paypal-payments')} + textBadge={generatePriceText('standardCardFields', countryPriceInfo[storeCountry], storeCurrency)} description={sprintf( // translators: %s: Link to PayPal REST application guide __( 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 b32c1f85e..a05dcb0d1 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/WelcomeDocs/WelcomeDocs.js @@ -13,13 +13,97 @@ const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry, storeCurr 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' ); + const countryPriceInfo = { + "us" : { + "currencySymbol" : "$", + "fixedFee" : 0.49, + "checkout" : 3.49, + "ccf" : 2.59, + "dw" : 2.59, + "apm" : 2.59, + "standardCardFields" : 2.99, + }, + "uk" : { + "currencySymbol" : "£", + "fixedFee" : 0.30, + "checkout" : 2.90, + "ccf" : 1.20, + "dw" : 1.20, + "apm" : 1.20, + "standardCardFields" : 1.20, + }, + "ca" : { + "currencySymbol" : "$", + "fixedFee" : 0.30, + "checkout" : 2.90, + "ccf" : 2.70, + "dw" : 2.70, + "apm" : 2.90, + "standardCardFields" : 2.90, + }, + "au" : { + "currencySymbol" : "$", + "fixedFee" : 0.30, + "checkout" : 2.60, + "ccf" : 1.75, + "dw" : 1.75, + "apm" : 2.60, + "standardCardFields" : 2.60, + }, + "fr" : { + "currencySymbol" : "€", + "fixedFee" : 0.35, + "checkout" : 2.90, + "ccf" : 1.20, + "dw" : 1.20, + "apm" : 1.20, + "standardCardFields" : 1.20, + }, + "it" : { + "currencySymbol" : "€", + "fixedFee" : 0.35, + "checkout" : 3.40, + "ccf" : 1.20, + "dw" : 1.20, + "apm" : 1.20, + "standardCardFields" : 1.20, + }, + "de" : { + "currencySymbol" : "€", + "fixedFee" : 0.39, + "checkout" : 2.99, + "ccf" : 2.99, + "dw" : 2.99, + "apm" : 2.99, + "standardCardFields" : 2.99, + }, + "es" : { + "currencySymbol" : "€", + "fixedFee" : 0.35, + "checkout" : 2.90, + "ccf" : 1.20, + "dw" : 1.20, + "apm" : 1.20, + "standardCardFields" : 1.20, + } + } + return (

{__(`Want to know more about PayPal Payments?`, 'woocommerce-paypal-payments')}

{useAcdc ? ( - + ) : ( - + )}

{ isFastlane={ true } isPayLater={ true } storeCountry={ 'us' } - storeCurrency={ 'usd' } + storeCurrency={ 'USD' } /> { + 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;