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

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

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

@ -1,14 +1,21 @@
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 }>
@ -16,19 +23,26 @@ const BadgeBox = ( props ) => {
{ 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 ) =>
data().getImage( badge )
) }
</span> </span>
) } ) }
{ props.textBadge && ( { props.textBadge && (
<TitleBadge type={ TITLE_BADGE_INFO } text={ props.textBadge }/> <TitleBadge
type={ TITLE_BADGE_INFO }
text={ props.textBadge }
/>
) } ) }
</span> </span>
<div className="ppcp-r-badge-box__description"> <div className="ppcp-r-badge-box__description">
{ props?.description && ( { props?.description && (
<p <p
className="ppcp-r-badge-box__description" className="ppcp-r-badge-box__description"
dangerouslySetInnerHTML={ { __html: props.description, } } dangerouslySetInnerHTML={ {
__html: props.description,
} }
></p> ></p>
) } ) }
</div> </div>

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

@ -1,27 +1,46 @@
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 = ( {
isFastlane,
isPayLater,
storeCountry,
storeCurrency,
countryPriceInfo,
} ) => {
if ( isFastlane && isPayLater && storeCountry === 'us' ) { if ( isFastlane && isPayLater && storeCountry === 'us' ) {
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={ __(
'PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG } titleType={ BADGE_BOX_TITLE_BIG }
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} textBadge={ __(
'from 3.49% + $0.49 USD<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ __( description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
/> />
<BadgeBox <BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox <BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} title={ __(
'Pay with PayPal',
'woocommerce-paypal-payments'
) }
imageBadge={ [ 'icon-button-paypal.svg' ] } imageBadge={ [ 'icon-button-paypal.svg' ] }
description={ sprintf( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
@ -34,8 +53,13 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Pay Later', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-payment-method-paypal-small.svg']} 'Pay Later',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-payment-method-paypal-small.svg',
] }
description={ sprintf( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(
@ -74,14 +98,31 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
</div> </div>
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('Optional payment methods', 'woocommerce-paypal-payments')} title={ __(
'Optional payment methods',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG } titleType={ BADGE_BOX_TITLE_BIG }
description={__('with additional application', 'woocommerce-paypal-payments')} description={ __(
'with additional application',
'woocommerce-paypal-payments'
) }
/> />
<BadgeBox <BadgeBox
title={__('Custom Card Fields', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} 'Custom Card Fields',
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} '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'
) }
description={ sprintf( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(
@ -93,9 +134,18 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Digital Wallets', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} 'Digital Wallets',
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} '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( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(
@ -107,9 +157,20 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']} 'Alternative Payment Methods',
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} '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( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(
@ -122,8 +183,13 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={ __( '', 'woocommerce-paypal-payments' ) } title={ __( '', 'woocommerce-paypal-payments' ) }
imageBadge={['icon-payment-method-fastlane-small.svg']} imageBadge={ [
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} '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
__( __(
@ -143,19 +209,32 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
<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={ __(
'PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG } titleType={ BADGE_BOX_TITLE_BIG }
textBadge={__('from 2.90% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} textBadge={ __(
'from 2.90% + £0.30 GBP<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ __( description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
/> />
<BadgeBox <BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox <BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} title={ __(
'Pay with PayPal',
'woocommerce-paypal-payments'
) }
imageBadge={ [ 'icon-button-paypal.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
@ -168,8 +247,13 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Pay in 3', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-payment-method-paypal-small.svg']} 'Pay in 3',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-payment-method-paypal-small.svg',
] }
description={ sprintf( description={ sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
@ -182,14 +266,31 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
</div> </div>
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('Optional payment methods', 'woocommerce-paypal-payments')} title={ __(
'Optional payment methods',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG } titleType={ BADGE_BOX_TITLE_BIG }
description={__('with additional application', 'woocommerce-paypal-payments')} description={ __(
'with additional application',
'woocommerce-paypal-payments'
) }
/> />
<BadgeBox <BadgeBox
title={__('Custom Card Fields', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} 'Custom Card Fields',
textBadge={__('from 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} 'woocommerce-paypal-payments'
) }
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( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(
@ -201,9 +302,18 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Digital Wallets', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} 'Digital Wallets',
textBadge={__('from 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} '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( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(
@ -215,9 +325,20 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']} 'Alternative Payment Methods',
textBadge={__('from 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')} '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( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(
@ -236,19 +357,33 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
<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={ __(
'PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG } titleType={ BADGE_BOX_TITLE_BIG }
textBadge={generatePriceText('checkout', countryPriceInfo[storeCountry], storeCurrency)} textBadge={ generatePriceText(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
description={ __( description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
/> />
<BadgeBox <BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox <BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} title={ __(
'Pay with PayPal',
'woocommerce-paypal-payments'
) }
imageBadge={ [ 'icon-button-paypal.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
@ -275,14 +410,32 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
</div> </div>
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('Optional payment methods', 'woocommerce-paypal-payments')} title={ __(
'Optional payment methods',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG } titleType={ BADGE_BOX_TITLE_BIG }
description={__('with additional application', 'woocommerce-paypal-payments')} description={ __(
'with additional application',
'woocommerce-paypal-payments'
) }
/> />
<BadgeBox <BadgeBox
title={__('Custom Card Fields', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} 'Custom Card Fields',
textBadge={generatePriceText('ccf', countryPriceInfo[storeCountry], storeCurrency)} 'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-visa.svg',
'icon-button-mastercard.svg',
'icon-button-amex.svg',
'icon-button-discover.svg',
] }
textBadge={ generatePriceText(
'ccf',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
description={ sprintf( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(
@ -294,9 +447,19 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Digital Wallets', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']} 'Digital Wallets',
textBadge={generatePriceText('dw', countryPriceInfo[storeCountry], storeCurrency)} 'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-button-apple-pay.svg',
'icon-button-google-pay.svg',
] }
textBadge={ generatePriceText(
'dw',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
description={ sprintf( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(
@ -308,9 +471,21 @@ const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countr
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']} 'Alternative Payment Methods',
textBadge={generatePriceText('apm', countryPriceInfo[storeCountry], storeCurrency)} '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( description={ sprintf(
// translators: %s: Link to PayPal business fees guide // translators: %s: Link to PayPal business fees guide
__( __(

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

@ -1,27 +1,45 @@
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 = ( {
isPayLater,
storeCountry,
storeCurrency,
countryPriceInfo,
} ) => {
if ( isPayLater && storeCountry === 'us' ) { if ( isPayLater && storeCountry === 'us' ) {
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={ __(
'PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG } titleType={ BADGE_BOX_TITLE_BIG }
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} textBadge={ __(
'from 3.49% + $0.49 USD<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ __( description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
/> />
<BadgeBox <BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox <BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')} title={ __(
'Pay with PayPal',
'woocommerce-paypal-payments'
) }
imageBadge={ [ 'icon-button-paypal.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
@ -34,8 +52,13 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency, countryPriceInfo }
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Pay Later', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-payment-method-paypal-small.svg']} 'Pay Later',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-payment-method-paypal-small.svg',
] }
description={ sprintf( description={ sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
@ -74,14 +97,31 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency, countryPriceInfo }
</div> </div>
<div className="ppcp-r-welcome-docs__col"> <div className="ppcp-r-welcome-docs__col">
<BadgeBox <BadgeBox
title={__('Optional payment methods', 'woocommerce-paypal-payments')} title={ __(
'Optional payment methods',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG } titleType={ BADGE_BOX_TITLE_BIG }
description={__('with additional application', 'woocommerce-paypal-payments')} description={ __(
'with additional application',
'woocommerce-paypal-payments'
) }
/> />
<BadgeBox <BadgeBox
title={__('Credit and Debit Cards', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} 'Credit and Debit Cards',
textBadge={__('from 2.99% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')} '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( description={ sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
@ -101,15 +141,23 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency, countryPriceInfo }
<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(
'checkout',
countryPriceInfo[ storeCountry ],
storeCurrency
) }
description={ __( description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
/> />
<BadgeBox <BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} title={ __(
titleType={BADGE_BOX_TITLE_BIG}/> 'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox <BadgeBox
title={ __( 'Pay with PayPal', 'woocommerce-paypal-payments' ) } title={ __( 'Pay with PayPal', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-button-paypal.svg' ] } imageBadge={ [ 'icon-button-paypal.svg' ] }
@ -137,14 +185,32 @@ const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency, countryPriceInfo }
/> />
<Separator className="ppcp-r-page-welcome-mode-separator" /> <Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox <BadgeBox
title={__('Optional payment methods', 'woocommerce-paypal-payments')} title={ __(
'Optional payment methods',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG } titleType={ BADGE_BOX_TITLE_BIG }
description={__('with additional application', 'woocommerce-paypal-payments')} description={ __(
'with additional application',
'woocommerce-paypal-payments'
) }
/> />
<BadgeBox <BadgeBox
title={__('Credit and Debit Cards', 'woocommerce-paypal-payments')} title={ __(
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']} 'Credit and Debit Cards',
textBadge={generatePriceText('standardCardFields', countryPriceInfo[storeCountry], storeCurrency)} '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( description={ sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(

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

@ -1,9 +1,15 @@
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 = ( {
useAcdc,
isFastlane,
isPayLater,
storeCountry,
storeCurrency,
} ) => {
const pricesBasedDescription = sprintf( const pricesBasedDescription = sprintf(
// translators: %s: Link to PayPal REST application guide // translators: %s: Link to PayPal REST application guide
__( __(
@ -14,100 +20,107 @@ const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry, storeCurr
); );
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">
{ __(
`Want to know more about PayPal Payments?`,
'woocommerce-paypal-payments'
) }
</h2>
{ useAcdc ? ( { useAcdc ? (
<AcdcFlow <AcdcFlow
isFastlane={ isFastlane } isFastlane={ isFastlane }
isPayLater={ isPayLater } isPayLater={ isPayLater }
storeCountry={ storeCountry } storeCountry={ storeCountry }
storeCurrency={ storeCurrency } storeCurrency={ storeCurrency }
countryPriceInfo={ countryPriceInfo } /> countryPriceInfo={ countryPriceInfo }
/>
) : ( ) : (
<BcdcFlow <BcdcFlow
isPayLater={ isPayLater } isPayLater={ isPayLater }
storeCountry={ storeCountry } storeCountry={ storeCountry }
storeCurrency={ storeCurrency } storeCurrency={ storeCurrency }
countryPriceInfo={ countryPriceInfo } /> countryPriceInfo={ countryPriceInfo }
/>
) } ) }
<p <p
className="ppcp-r-welcome-docs__description" className="ppcp-r-welcome-docs__description"
dangerouslySetInnerHTML={{__html: pricesBasedDescription,}} dangerouslySetInnerHTML={ { __html: pricesBasedDescription } }
></p> ></p>
</div> </div>
); );