Update the price info, create helper util

This commit is contained in:
Narek Zakarian 2024-11-25 19:00:21 +04:00
parent 06e74e74f4
commit e2092d23f0
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
5 changed files with 145 additions and 41 deletions

View file

@ -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 (
<div className="ppcp-r-welcome-docs__wrapper">
@ -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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
@ -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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
@ -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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
@ -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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
</div>
@ -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 USD<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
@ -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 USD<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']}
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
@ -124,12 +125,12 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
imageBadge={['icon-payment-method-fastlane-small.svg']}
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
</div>
@ -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 GBP<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
@ -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 GBP<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
@ -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 GBP<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
</div>
@ -237,7 +238,7 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
<BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', '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 } ) => {
<BadgeBox
title={__('Custom Card Fields', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']}
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Digital Wallets', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']}
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']}
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', '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. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
</div>

View file

@ -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 (
<div className="ppcp-r-welcome-docs__wrapper">
@ -80,7 +81,7 @@ const BcdcFlow = ( { isPayLater, storeCountry } ) => {
<BadgeBox
title={__('Credit and Debit Cards', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']}
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
textBadge={__('from 2.99% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(
@ -100,7 +101,7 @@ const BcdcFlow = ( { isPayLater, storeCountry } ) => {
<BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', '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 } ) => {
<BadgeBox
title={__('Credit and Debit Cards', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']}
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')}
textBadge={generatePriceText('standardCardFields', countryPriceInfo[storeCountry], storeCurrency)}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(

View file

@ -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 (
<div className="ppcp-r-welcome-docs">
<h2 className="ppcp-r-welcome-docs__title">{__(`Want to know more about PayPal Payments?`, 'woocommerce-paypal-payments')}</h2>
{useAcdc ? (
<AcdcFlow isFastlane={ isFastlane } isPayLater={ isPayLater } storeCountry={ storeCountry } />
<AcdcFlow
isFastlane={ isFastlane }
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
countryPriceInfo={ countryPriceInfo } />
) : (
<BcdcFlow isPayLater={ isPayLater } storeCountry={ storeCountry } />
<BcdcFlow
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
countryPriceInfo={ countryPriceInfo } />
)}
<p
className="ppcp-r-welcome-docs__description"

View file

@ -48,7 +48,7 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
isFastlane={ true }
isPayLater={ true }
storeCountry={ 'us' }
storeCurrency={ 'usd' }
storeCurrency={ 'USD' }
/>
<Separator text={ __( 'or', 'woocommerce-paypal-payments' ) } />
<AccordionSection

View file

@ -0,0 +1,18 @@
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;