woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Fix the lint

Browse source
This commit is contained in:
Narek Zakarian 2024-11-26 15:01:21 +04:00
parent e2092d23f0
commit f3d5c56663
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
5 changed files with 888 additions and 620 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,39 +1,53 @@
import data from '../../utils/data'; import data from '../../utils/data';
import TitleBadge, { TITLE_BADGE_INFO } from "./TitleBadge"; import TitleBadge, { TITLE_BADGE_INFO } from './TitleBadge';
import { __ } from "@wordpress/i18n"; import { __ } from '@wordpress/i18n';
const BadgeBox = ( props ) => { const BadgeBox = ( props ) => {
const titleSize = props.titleType && props.titleType === BADGE_BOX_TITLE_BIG ? BADGE_BOX_TITLE_BIG : BADGE_BOX_TITLE_SMALL const titleSize =
props.titleType && props.titleType === BADGE_BOX_TITLE_BIG
? BADGE_BOX_TITLE_BIG
: BADGE_BOX_TITLE_SMALL;
const titleTextClassName = 'ppcp-r-badge-box__title-text ' + `ppcp-r-badge-box__title-text--${ titleSize }`; const titleTextClassName =
'ppcp-r-badge-box__title-text ' +
`ppcp-r-badge-box__title-text--${ titleSize }`;
const titleBaseClassName = 'ppcp-r-badge-box__title'; const titleBaseClassName = 'ppcp-r-badge-box__title';
const titleClassName = props.imageBadge ? `${ titleBaseClassName } ppcp-r-badge-box__title--has-image-badge` : titleBaseClassName; const titleClassName = props.imageBadge
? `${ titleBaseClassName } ppcp-r-badge-box__title--has-image-badge`
: titleBaseClassName;
return ( return (
<div className="ppcp-r-badge-box"> <div className="ppcp-r-badge-box">
<span className={ titleClassName }> <span className={ titleClassName }>
<span className={ titleTextClassName }>{props.title}</span> <span className={ titleTextClassName }>{ props.title }</span>
{ props.imageBadge && ( { props.imageBadge && (
<span className="ppcp-r-badge-box__title-image-badge"> <span className="ppcp-r-badge-box__title-image-badge">
{ props.imageBadge.map( ( badge ) => data().getImage( badge ) ) } { props.imageBadge.map( ( badge ) =>
</span> data().getImage( badge )
) } ) }
</span>
) }
{ props.textBadge && ( { props.textBadge && (
<TitleBadge type={ TITLE_BADGE_INFO } text={ props.textBadge }/> <TitleBadge
) } type={ TITLE_BADGE_INFO }
</span> text={ props.textBadge }
<div className="ppcp-r-badge-box__description"> />
{ props?.description && ( ) }
<p </span>
className="ppcp-r-badge-box__description" <div className="ppcp-r-badge-box__description">
dangerouslySetInnerHTML={ { __html: props.description, } } { props?.description && (
></p> <p
) } className="ppcp-r-badge-box__description"
</div> dangerouslySetInnerHTML={ {
</div> __html: props.description,
); } }
></p>
) }
</div>
</div>
);
}; };
export const BADGE_BOX_TITLE_BIG = 'big'; export const BADGE_BOX_TITLE_BIG = 'big';

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

@ -1,328 +1,503 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import Separator from '../Separator'; import Separator from '../Separator';
import generatePriceText from '../../../utils/badgeBoxUtils'; import generatePriceText from '../../../utils/badgeBoxUtils';
const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countryPriceInfo } ) => { const AcdcFlow = ( {
if (isFastlane && isPayLater && storeCountry === 'us') { isFastlane,
return ( isPayLater,
<div className="ppcp-r-welcome-docs__wrapper"> storeCountry,
<div className="ppcp-r-welcome-docs__col"> storeCurrency,
<BadgeBox countryPriceInfo,
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} } ) => {
titleType={BADGE_BOX_TITLE_BIG} if ( isFastlane && isPayLater && storeCountry === 'us' ) {
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} return (
description={__( <div className="ppcp-r-welcome-docs__wrapper">
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', <div className="ppcp-r-welcome-docs__col">
'woocommerce-paypal-payments' <BadgeBox
)} title={ __(
/> 'PayPal Checkout',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} ) }
titleType={BADGE_BOX_TITLE_BIG}/> titleType={ BADGE_BOX_TITLE_BIG }
<BadgeBox textBadge={ __(
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} 'from 3.49% + $0.49 USD<sup>1</sup>',
imageBadge={['icon-button-paypal.svg']} 'woocommerce-paypal-payments'
description={sprintf( ) }
// translators: %s: Link to PayPal business fees guide description={ __(
__( 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), />
'https://www.paypal.com/us/business/paypal-business-fees' <BadgeBox
)} title={ __(
/> 'Included in PayPal Checkout',
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'woocommerce-paypal-payments'
<BadgeBox ) }
title={__('Pay Later', 'woocommerce-paypal-payments')} titleType={ BADGE_BOX_TITLE_BIG }
imageBadge={['icon-payment-method-paypal-small.svg']} />
description={sprintf( <BadgeBox
// translators: %s: Link to PayPal business fees guide title={ __(
__( 'Pay with PayPal',
'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'
'woocommerce-paypal-payments' ) }
), imageBadge={ [ 'icon-button-paypal.svg' ] }
'https://www.paypal.com/us/business/paypal-business-fees' description={ sprintf(
)} // translators: %s: Link to PayPal business fees guide
/> __(
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Venmo', 'woocommerce-paypal-payments')} ),
imageBadge={['icon-button-venmo.svg']} 'https://www.paypal.com/us/business/paypal-business-fees'
description={sprintf( ) }
// translators: %s: Link to PayPal business fees guide />
__( <Separator className="ppcp-r-page-welcome-mode-separator" />
'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>', <BadgeBox
'woocommerce-paypal-payments' title={ __(
), 'Pay Later',
'https://www.paypal.com/us/business/paypal-business-fees' 'woocommerce-paypal-payments'
)} ) }
/> imageBadge={ [
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'icon-payment-method-paypal-small.svg',
<BadgeBox ] }
title={__('Crypto', 'woocommerce-paypal-payments')} description={ sprintf(
imageBadge={['icon-payment-method-crypto.svg']} // translators: %s: Link to PayPal business fees guide
description={sprintf( __(
// 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'
'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>', ),
'woocommerce-paypal-payments' 'https://www.paypal.com/us/business/paypal-business-fees'
), ) }
'https://www.paypal.com/us/business/paypal-business-fees' />
)} <Separator className="ppcp-r-page-welcome-mode-separator" />
/> <BadgeBox
</div> title={ __( 'Venmo', 'woocommerce-paypal-payments' ) }
<div className="ppcp-r-welcome-docs__col"> imageBadge={ [ 'icon-button-venmo.svg' ] }
<BadgeBox description={ sprintf(
title={__('Optional payment methods', 'woocommerce-paypal-payments')} // translators: %s: Link to PayPal business fees guide
titleType={BADGE_BOX_TITLE_BIG} __(
description={__('with additional application', 'woocommerce-paypal-payments')} 'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>',
/> 'woocommerce-paypal-payments'
<BadgeBox ),
title={__('Custom Card Fields', 'woocommerce-paypal-payments')} 'https://www.paypal.com/us/business/paypal-business-fees'
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( <Separator className="ppcp-r-page-welcome-mode-separator" />
// translators: %s: Link to PayPal business fees guide <BadgeBox
__( title={ __( 'Crypto', 'woocommerce-paypal-payments' ) }
'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>', imageBadge={ [ 'icon-payment-method-crypto.svg' ] }
'woocommerce-paypal-payments' description={ sprintf(
), // translators: %s: Link to PayPal business fees guide
'https://www.paypal.com/us/business/paypal-business-fees' __(
)} 'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>',
/> 'woocommerce-paypal-payments'
<Separator className="ppcp-r-page-welcome-mode-separator"/> ),
<BadgeBox 'https://www.paypal.com/us/business/paypal-business-fees'
title={__('Digital Wallets', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} />
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} </div>
description={sprintf( <div className="ppcp-r-welcome-docs__col">
// translators: %s: Link to PayPal business fees guide <BadgeBox
__( title={ __(
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>', 'Optional payment methods',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ) }
'https://www.paypal.com/us/business/paypal-business-fees' titleType={ BADGE_BOX_TITLE_BIG }
)} description={ __(
/> 'with additional application',
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'woocommerce-paypal-payments'
<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']} <BadgeBox
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} title={ __(
description={sprintf( 'Custom Card Fields',
// translators: %s: Link to PayPal business fees guide 'woocommerce-paypal-payments'
__( ) }
'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>', imageBadge={ [
'woocommerce-paypal-payments' 'icon-button-visa.svg',
), 'icon-button-mastercard.svg',
'https://www.paypal.com/us/business/paypal-business-fees' 'icon-button-amex.svg',
)} 'icon-button-discover.svg',
/> ] }
<Separator className="ppcp-r-page-welcome-mode-separator"/> textBadge={ __(
<BadgeBox 'from 2.59% + $0.49 USD<sup>1</sup>',
title={__('', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
imageBadge={['icon-payment-method-fastlane-small.svg']} ) }
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} description={ sprintf(
description={sprintf( // translators: %s: Link to PayPal business fees 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>',
'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'
'woocommerce-paypal-payments' ),
), 'https://www.paypal.com/us/business/paypal-business-fees'
'https://www.paypal.com/us/business/paypal-business-fees' ) }
)} />
/> <Separator className="ppcp-r-page-welcome-mode-separator" />
</div> <BadgeBox
</div> title={ __(
); 'Digital Wallets',
} 'woocommerce-paypal-payments'
) }
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 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://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 2.59% + $0.49 USD<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ sprintf(
// 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://www.paypal.com/us/business/paypal-business-fees'
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __( '', 'woocommerce-paypal-payments' ) }
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 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://www.paypal.com/us/business/paypal-business-fees'
) }
/>
</div>
</div>
);
}
if (isPayLater && storeCountry === 'uk') { if ( isPayLater && storeCountry === 'uk' ) {
return ( return (
<div className="ppcp-r-welcome-docs__wrapper"> <div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG} 'PayPal Checkout',
textBadge={__('from 2.90% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
description={__( ) }
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', titleType={ BADGE_BOX_TITLE_BIG }
'woocommerce-paypal-payments' textBadge={ __(
)} 'from 2.90% + £0.30 GBP<sup>1</sup>',
/> 'woocommerce-paypal-payments'
<BadgeBox ) }
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} description={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-button-paypal.svg']} />
description={sprintf( <BadgeBox
// translators: %s: Link to PayPal REST application guide title={ __(
__( 'Included in PayPal Checkout',
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), titleType={ BADGE_BOX_TITLE_BIG }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
)} <BadgeBox
/> title={ __(
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'Pay with PayPal',
<BadgeBox 'woocommerce-paypal-payments'
title={__('Pay in 3', 'woocommerce-paypal-payments')} ) }
imageBadge={['icon-payment-method-paypal-small.svg']} imageBadge={ [ 'icon-button-paypal.svg' ] }
description={sprintf( description={ sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>', 'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)} ) }
/> />
</div> <Separator className="ppcp-r-page-welcome-mode-separator" />
<div className="ppcp-r-welcome-docs__col"> <BadgeBox
<BadgeBox title={ __(
title={__('Optional payment methods', 'woocommerce-paypal-payments')} 'Pay in 3',
titleType={BADGE_BOX_TITLE_BIG} 'woocommerce-paypal-payments'
description={__('with additional application', 'woocommerce-paypal-payments')} ) }
/> imageBadge={ [
<BadgeBox 'icon-payment-method-paypal-small.svg',
title={__('Custom Card Fields', 'woocommerce-paypal-payments')} ] }
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} description={ sprintf(
textBadge={__('from 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} // translators: %s: Link to PayPal REST application guide
description={sprintf( __(
// 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'
'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' />
)} </div>
/> <div className="ppcp-r-welcome-docs__col">
<Separator className="ppcp-r-page-welcome-mode-separator"/> <BadgeBox
<BadgeBox title={ __(
title={__('Digital Wallets', 'woocommerce-paypal-payments')} 'Optional payment methods',
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} 'woocommerce-paypal-payments'
textBadge={__('from 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} ) }
description={sprintf( titleType={ BADGE_BOX_TITLE_BIG }
// translators: %s: Link to PayPal business fees guide description={ __(
__( 'with additional application',
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), />
'https://www.paypal.com/us/business/paypal-business-fees' <BadgeBox
)} title={ __(
/> 'Custom Card Fields',
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'woocommerce-paypal-payments'
<BadgeBox ) }
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')} imageBadge={ [
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']} 'icon-button-visa.svg',
textBadge={__('from 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} 'icon-button-mastercard.svg',
description={sprintf( 'icon-button-amex.svg',
// translators: %s: Link to PayPal business fees guide 'icon-button-discover.svg',
__( ] }
'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>', textBadge={ __(
'woocommerce-paypal-payments' 'from 1.20% + £0.30 GBP<sup>1</sup>',
), 'woocommerce-paypal-payments'
'https://www.paypal.com/us/business/paypal-business-fees' ) }
)} description={ sprintf(
/> // translators: %s: Link to PayPal business fees guide
</div> __(
</div> '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://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 1.20% + £0.30 GBP<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ sprintf(
// 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://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 1.20% + £0.30 GBP<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ sprintf(
// 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://www.paypal.com/us/business/paypal-business-fees'
) }
/>
</div>
</div>
);
}
return ( return (
<div className="ppcp-r-welcome-docs__wrapper"> <div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG} 'PayPal Checkout',
textBadge={generatePriceText('checkout', countryPriceInfo[storeCountry], storeCurrency)} 'woocommerce-paypal-payments'
description={__( ) }
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', titleType={ BADGE_BOX_TITLE_BIG }
'woocommerce-paypal-payments' textBadge={ generatePriceText(
)} 'checkout',
/> countryPriceInfo[ storeCountry ],
<BadgeBox storeCurrency
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} ) }
titleType={BADGE_BOX_TITLE_BIG}/> description={ __(
<BadgeBox 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
imageBadge={['icon-button-paypal.svg']} ) }
description={sprintf( />
// translators: %s: Link to PayPal REST application guide <BadgeBox
__( title={ __(
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', 'Included in PayPal Checkout',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
), ) }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' titleType={ BADGE_BOX_TITLE_BIG }
)} />
/> <BadgeBox
<Separator className="ppcp-r-page-welcome-mode-separator"/> title={ __(
<BadgeBox 'Pay with PayPal',
title={__('Pay Later', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
imageBadge={['icon-payment-method-paypal-small.svg']} ) }
description={sprintf( imageBadge={ [ 'icon-button-paypal.svg' ] }
// translators: %s: Link to PayPal REST application guide description={ sprintf(
__( // translators: %s: Link to PayPal REST application 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' '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://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
/> ) }
</div> />
<div className="ppcp-r-welcome-docs__col"> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Optional payment methods', 'woocommerce-paypal-payments')} title={ __( 'Pay Later', 'woocommerce-paypal-payments' ) }
titleType={BADGE_BOX_TITLE_BIG} imageBadge={ [ 'icon-payment-method-paypal-small.svg' ] }
description={__('with additional application', 'woocommerce-paypal-payments')} description={ sprintf(
/> // translators: %s: Link to PayPal REST application guide
<BadgeBox __(
title={__('Custom Card Fields', 'woocommerce-paypal-payments')} 'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} 'woocommerce-paypal-payments'
textBadge={generatePriceText('ccf', countryPriceInfo[storeCountry], storeCurrency)} ),
description={sprintf( 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
// 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>', </div>
'woocommerce-paypal-payments' <div className="ppcp-r-welcome-docs__col">
), <BadgeBox
'https://www.paypal.com/us/business/paypal-business-fees' title={ __(
)} 'Optional payment methods',
/> 'woocommerce-paypal-payments'
<Separator className="ppcp-r-page-welcome-mode-separator"/> ) }
<BadgeBox titleType={ BADGE_BOX_TITLE_BIG }
title={__('Digital Wallets', 'woocommerce-paypal-payments')} description={ __(
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} 'with additional application',
textBadge={generatePriceText('dw', countryPriceInfo[storeCountry], storeCurrency)} 'woocommerce-paypal-payments'
description={sprintf( ) }
// translators: %s: Link to PayPal business fees guide />
__( <BadgeBox
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>', title={ __(
'woocommerce-paypal-payments' 'Custom Card Fields',
), 'woocommerce-paypal-payments'
'https://www.paypal.com/us/business/paypal-business-fees' ) }
)} imageBadge={ [
/> 'icon-button-visa.svg',
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'icon-button-mastercard.svg',
<BadgeBox 'icon-button-amex.svg',
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')} 'icon-button-discover.svg',
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']} ] }
textBadge={generatePriceText('apm', countryPriceInfo[storeCountry], storeCurrency)} textBadge={ generatePriceText(
description={sprintf( 'ccf',
// translators: %s: Link to PayPal business fees guide countryPriceInfo[ storeCountry ],
__( storeCurrency
'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>', ) }
'woocommerce-paypal-payments' description={ sprintf(
), // translators: %s: Link to PayPal business fees guide
'https://www.paypal.com/us/business/paypal-business-fees' __(
)} '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'
</div> ),
</div> '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={ generatePriceText(
'dw',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
description={ sprintf(
// 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://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={ generatePriceText(
'apm',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
description={ sprintf(
// 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://www.paypal.com/us/business/paypal-business-fees'
) }
/>
</div>
</div>
);
}; };
export default AcdcFlow; export default AcdcFlow;

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

@ -1,161 +1,227 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox"; import BadgeBox, { BADGE_BOX_TITLE_BIG } from '../BadgeBox';
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import Separator from '../Separator'; import Separator from '../Separator';
import generatePriceText from '../../../utils/badgeBoxUtils'; import generatePriceText from '../../../utils/badgeBoxUtils';
const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency, countryPriceInfo } ) => { const BcdcFlow = ( {
if (isPayLater && storeCountry === 'us') { isPayLater,
return ( storeCountry,
<div className="ppcp-r-welcome-docs__wrapper"> storeCurrency,
<div className="ppcp-r-welcome-docs__col"> countryPriceInfo,
<BadgeBox } ) => {
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} if ( isPayLater && storeCountry === 'us' ) {
titleType={BADGE_BOX_TITLE_BIG} return (
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} <div className="ppcp-r-welcome-docs__wrapper">
description={__( <div className="ppcp-r-welcome-docs__col">
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', <BadgeBox
'woocommerce-paypal-payments' title={ __(
)} 'PayPal Checkout',
/> 'woocommerce-paypal-payments'
<BadgeBox ) }
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} titleType={ BADGE_BOX_TITLE_BIG }
titleType={BADGE_BOX_TITLE_BIG}/> textBadge={ __(
<BadgeBox 'from 3.49% + $0.49 USD<sup>1</sup>',
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
imageBadge={['icon-button-paypal.svg']} ) }
description={sprintf( description={ __(
// translators: %s: Link to PayPal REST application guide 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
__( 'woocommerce-paypal-payments'
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', ) }
'woocommerce-paypal-payments' />
), <BadgeBox
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' title={ __(
)} 'Included in PayPal Checkout',
/> 'woocommerce-paypal-payments'
<Separator className="ppcp-r-page-welcome-mode-separator"/> ) }
<BadgeBox titleType={ BADGE_BOX_TITLE_BIG }
title={__('Pay Later', 'woocommerce-paypal-payments')} />
imageBadge={['icon-payment-method-paypal-small.svg']} <BadgeBox
description={sprintf( title={ __(
// translators: %s: Link to PayPal REST application guide 'Pay with PayPal',
__( 'woocommerce-paypal-payments'
'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' imageBadge={ [ 'icon-button-paypal.svg' ] }
), description={ sprintf(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' // translators: %s: Link to PayPal REST application guide
)} __(
/> 'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>',
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'woocommerce-paypal-payments'
<BadgeBox ),
title={__('Venmo', 'woocommerce-paypal-payments')} 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
imageBadge={['icon-button-venmo.svg']} ) }
description={sprintf( />
// translators: %s: Link to PayPal REST application guide <Separator className="ppcp-r-page-welcome-mode-separator" />
__( <BadgeBox
'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>', title={ __(
'woocommerce-paypal-payments' 'Pay Later',
), 'woocommerce-paypal-payments'
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' ) }
)} imageBadge={ [
/> 'icon-payment-method-paypal-small.svg',
<Separator className="ppcp-r-page-welcome-mode-separator"/> ] }
<BadgeBox description={ sprintf(
title={__('Crypto', 'woocommerce-paypal-payments')} // translators: %s: Link to PayPal REST application guide
imageBadge={['icon-payment-method-crypto.svg']} __(
description={sprintf( 'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
// translators: %s: Link to PayPal REST application guide 'woocommerce-paypal-payments'
__( ),
'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>', 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'woocommerce-paypal-payments' ) }
), />
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' <Separator className="ppcp-r-page-welcome-mode-separator" />
)} <BadgeBox
/> title={ __( 'Venmo', 'woocommerce-paypal-payments' ) }
</div> imageBadge={ [ 'icon-button-venmo.svg' ] }
<div className="ppcp-r-welcome-docs__col"> description={ sprintf(
<BadgeBox // translators: %s: Link to PayPal REST application guide
title={__('Optional payment methods', 'woocommerce-paypal-payments')} __(
titleType={BADGE_BOX_TITLE_BIG} 'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>',
description={__('with additional application', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
/> ),
<BadgeBox 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
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.99% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} <Separator className="ppcp-r-page-welcome-mode-separator" />
description={sprintf( <BadgeBox
// translators: %s: Link to PayPal REST application guide title={ __( 'Crypto', 'woocommerce-paypal-payments' ) }
__( imageBadge={ [ 'icon-payment-method-crypto.svg' ] }
'Process major credit and debit cards through PayPal’s card fields. <a target="_blank" href="%s">Learn more</a>', description={ sprintf(
'woocommerce-paypal-payments' // translators: %s: Link to PayPal REST application guide
), __(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>',
)} 'woocommerce-paypal-payments'
/> ),
</div> 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
</div> ) }
); />
} </div>
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={ __(
'Optional payment methods',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
description={ __(
'with additional application',
'woocommerce-paypal-payments'
) }
/>
<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.99% + $0.49 USD<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'Process major credit and debit cards through PayPal’s card fields. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
</div>
</div>
);
}
return ( return (
<div className="ppcp-r-welcome-docs__wrapper ppcp-r-welcome-docs__wrapper--one-col"> <div className="ppcp-r-welcome-docs__wrapper ppcp-r-welcome-docs__wrapper--one-col">
<BadgeBox <BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')} title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
titleType={BADGE_BOX_TITLE_BIG} titleType={ BADGE_BOX_TITLE_BIG }
textBadge={generatePriceText('checkout', countryPriceInfo[storeCountry], storeCurrency)} textBadge={ generatePriceText(
description={__( 'checkout',
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', countryPriceInfo[ storeCountry ],
'woocommerce-paypal-payments' storeCurrency
)} ) }
/> description={ __(
<BadgeBox 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
titleType={BADGE_BOX_TITLE_BIG}/> ) }
<BadgeBox />
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} <BadgeBox
imageBadge={['icon-button-paypal.svg']} title={ __(
description={sprintf( 'Included in PayPal Checkout',
// translators: %s: Link to PayPal REST application guide 'woocommerce-paypal-payments'
__( ) }
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', titleType={ BADGE_BOX_TITLE_BIG }
'woocommerce-paypal-payments' />
), <BadgeBox
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' title={ __( 'Pay with PayPal', 'woocommerce-paypal-payments' ) }
)} imageBadge={ [ 'icon-button-paypal.svg' ] }
/> description={ sprintf(
<Separator className="ppcp-r-page-welcome-mode-separator"/> // translators: %s: Link to PayPal REST application guide
<BadgeBox __(
title={__('Pay Later', 'woocommerce-paypal-payments')} 'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>',
imageBadge={['icon-payment-method-paypal-small.svg']} 'woocommerce-paypal-payments'
description={sprintf( ),
// translators: %s: Link to PayPal REST application guide 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
__( ) }
'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' <Separator className="ppcp-r-page-welcome-mode-separator" />
), <BadgeBox
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' title={ __( 'Pay Later', 'woocommerce-paypal-payments' ) }
)} imageBadge={ [ 'icon-payment-method-paypal-small.svg' ] }
/> description={ sprintf(
<Separator className="ppcp-r-page-welcome-mode-separator"/> // translators: %s: Link to PayPal REST application guide
<BadgeBox __(
title={__('Optional payment methods', 'woocommerce-paypal-payments')} 'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
titleType={BADGE_BOX_TITLE_BIG} 'woocommerce-paypal-payments'
description={__('with additional application', 'woocommerce-paypal-payments')} ),
/> 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
<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']} <Separator className="ppcp-r-page-welcome-mode-separator" />
textBadge={generatePriceText('standardCardFields', countryPriceInfo[storeCountry], storeCurrency)} <BadgeBox
description={sprintf( title={ __(
// translators: %s: Link to PayPal REST application guide 'Optional payment methods',
__( 'woocommerce-paypal-payments'
'Process major credit and debit cards through PayPal’s card fields. <a target="_blank" href="%s">Learn more</a>', ) }
'woocommerce-paypal-payments' titleType={ BADGE_BOX_TITLE_BIG }
), description={ __(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'with additional application',
)} 'woocommerce-paypal-payments'
/> ) }
</div> />
); <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={ generatePriceText(
'standardCardFields',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
description={ sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'Process major credit and debit cards through PayPal’s card fields. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
</div>
);
}; };
export default BcdcFlow; export default BcdcFlow;

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

@ -1,116 +1,129 @@
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import AcdcFlow from "./AcdcFlow"; import AcdcFlow from './AcdcFlow';
import BcdcFlow from "./BcdcFlow"; import BcdcFlow from './BcdcFlow';
import {Button} from "@wordpress/components"; import { Button } from '@wordpress/components';
const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry, storeCurrency } ) => { const WelcomeDocs = ( {
const pricesBasedDescription = sprintf( useAcdc,
// translators: %s: Link to PayPal REST application guide isFastlane,
__( isPayLater,
'<sup>1</sup>Prices based on domestic transactions as of October 25th, 2024. <a target="_blank" href="%s">Click here</a> for full pricing details.', storeCountry,
'woocommerce-paypal-payments' storeCurrency,
), } ) => {
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' const pricesBasedDescription = sprintf(
); // translators: %s: Link to PayPal REST application guide
__(
'<sup>1</sup>Prices based on domestic transactions as of October 25th, 2024. <a target="_blank" href="%s">Click here</a> for full pricing details.',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
);
const countryPriceInfo = { const countryPriceInfo = {
"us" : { us: {
"currencySymbol" : "$", currencySymbol: '$',
"fixedFee" : 0.49, fixedFee: 0.49,
"checkout" : 3.49, checkout: 3.49,
"ccf" : 2.59, ccf: 2.59,
"dw" : 2.59, dw: 2.59,
"apm" : 2.59, apm: 2.59,
"standardCardFields" : 2.99, standardCardFields: 2.99,
}, },
"uk" : { uk: {
"currencySymbol" : "£", currencySymbol: '£',
"fixedFee" : 0.30, fixedFee: 0.3,
"checkout" : 2.90, checkout: 2.9,
"ccf" : 1.20, ccf: 1.2,
"dw" : 1.20, dw: 1.2,
"apm" : 1.20, apm: 1.2,
"standardCardFields" : 1.20, standardCardFields: 1.2,
}, },
"ca" : { ca: {
"currencySymbol" : "$", currencySymbol: '$',
"fixedFee" : 0.30, fixedFee: 0.3,
"checkout" : 2.90, checkout: 2.9,
"ccf" : 2.70, ccf: 2.7,
"dw" : 2.70, dw: 2.7,
"apm" : 2.90, apm: 2.9,
"standardCardFields" : 2.90, standardCardFields: 2.9,
}, },
"au" : { au: {
"currencySymbol" : "$", currencySymbol: '$',
"fixedFee" : 0.30, fixedFee: 0.3,
"checkout" : 2.60, checkout: 2.6,
"ccf" : 1.75, ccf: 1.75,
"dw" : 1.75, dw: 1.75,
"apm" : 2.60, apm: 2.6,
"standardCardFields" : 2.60, standardCardFields: 2.6,
}, },
"fr" : { fr: {
"currencySymbol" : "€", currencySymbol: '€',
"fixedFee" : 0.35, fixedFee: 0.35,
"checkout" : 2.90, checkout: 2.9,
"ccf" : 1.20, ccf: 1.2,
"dw" : 1.20, dw: 1.2,
"apm" : 1.20, apm: 1.2,
"standardCardFields" : 1.20, standardCardFields: 1.2,
}, },
"it" : { it: {
"currencySymbol" : "€", currencySymbol: '€',
"fixedFee" : 0.35, fixedFee: 0.35,
"checkout" : 3.40, checkout: 3.4,
"ccf" : 1.20, ccf: 1.2,
"dw" : 1.20, dw: 1.2,
"apm" : 1.20, apm: 1.2,
"standardCardFields" : 1.20, standardCardFields: 1.2,
}, },
"de" : { de: {
"currencySymbol" : "€", currencySymbol: '€',
"fixedFee" : 0.39, fixedFee: 0.39,
"checkout" : 2.99, checkout: 2.99,
"ccf" : 2.99, ccf: 2.99,
"dw" : 2.99, dw: 2.99,
"apm" : 2.99, apm: 2.99,
"standardCardFields" : 2.99, standardCardFields: 2.99,
}, },
"es" : { es: {
"currencySymbol" : "€", currencySymbol: '€',
"fixedFee" : 0.35, fixedFee: 0.35,
"checkout" : 2.90, checkout: 2.9,
"ccf" : 1.20, ccf: 1.2,
"dw" : 1.20, dw: 1.2,
"apm" : 1.20, apm: 1.2,
"standardCardFields" : 1.20, standardCardFields: 1.2,
} },
} };
return ( return (
<div className="ppcp-r-welcome-docs"> <div className="ppcp-r-welcome-docs">
<h2 className="ppcp-r-welcome-docs__title">{__(`Want to know more about PayPal Payments?`, 'woocommerce-paypal-payments')}</h2> <h2 className="ppcp-r-welcome-docs__title">
{useAcdc ? ( { __(
<AcdcFlow `Want to know more about PayPal Payments?`,
isFastlane={ isFastlane } 'woocommerce-paypal-payments'
isPayLater={ isPayLater } ) }
storeCountry={ storeCountry } </h2>
storeCurrency={ storeCurrency } { useAcdc ? (
countryPriceInfo={ countryPriceInfo } /> <AcdcFlow
) : ( isFastlane={ isFastlane }
<BcdcFlow isPayLater={ isPayLater }
isPayLater={ isPayLater } storeCountry={ storeCountry }
storeCountry={ storeCountry } storeCurrency={ storeCurrency }
storeCurrency={ storeCurrency } countryPriceInfo={ countryPriceInfo }
countryPriceInfo={ countryPriceInfo } /> />
)} ) : (
<p <BcdcFlow
className="ppcp-r-welcome-docs__description" isPayLater={ isPayLater }
dangerouslySetInnerHTML={{__html: pricesBasedDescription,}} storeCountry={ storeCountry }
></p> storeCurrency={ storeCurrency }
</div> countryPriceInfo={ countryPriceInfo }
); />
) }
<p
className="ppcp-r-welcome-docs__description"
dangerouslySetInnerHTML={ { __html: pricesBasedDescription } }
></p>
</div>
);
}; };
export default WelcomeDocs; export default WelcomeDocs;

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

@ -1,18 +1,18 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
const generatePriceText = (type, selectedCountryPrice, storeCurrency) => { const generatePriceText = ( type, selectedCountryPrice, storeCurrency ) => {
if (!selectedCountryPrice || !selectedCountryPrice[type]) { if ( ! selectedCountryPrice || ! selectedCountryPrice[ type ] ) {
console.warn(`Invalid type or price data for: ${type}`); console.warn( `Invalid type or price data for: ${ type }` );
return ''; return '';
} }
const percentage = selectedCountryPrice[type].toFixed(2); const percentage = selectedCountryPrice[ type ].toFixed( 2 );
const fixedFee = `${selectedCountryPrice.currencySymbol}${selectedCountryPrice.fixedFee}`; const fixedFee = `${ selectedCountryPrice.currencySymbol }${ selectedCountryPrice.fixedFee }`;
return __( return __(
`from ${percentage}% + ${fixedFee} ${storeCurrency}<sup>1</sup>`, `from ${ percentage }% + ${ fixedFee } ${ storeCurrency }<sup>1</sup>`,
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
); );
}; };
export default generatePriceText; export default generatePriceText;