woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +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 TitleBadge, { TITLE_BADGE_INFO } from "./TitleBadge";
import { __ } from "@wordpress/i18n";
import TitleBadge, { TITLE_BADGE_INFO } from './TitleBadge';
import { __ } from '@wordpress/i18n';
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 titleClassName = props.imageBadge ? `${ titleBaseClassName } ppcp-r-badge-box__title--has-image-badge` : titleBaseClassName;
const titleBaseClassName = 'ppcp-r-badge-box__title';
const titleClassName = props.imageBadge
? `${ titleBaseClassName } ppcp-r-badge-box__title--has-image-badge`
: titleBaseClassName;
return (
<div className="ppcp-r-badge-box">
<span className={ titleClassName }>
<span className={ titleTextClassName }>{props.title}</span>
<div className="ppcp-r-badge-box">
<span className={ titleClassName }>
<span className={ titleTextClassName }>{ props.title }</span>
{ props.imageBadge && (
<span className="ppcp-r-badge-box__title-image-badge">
{ props.imageBadge.map( ( badge ) => data().getImage( badge ) ) }
</span>
) }
{ props.imageBadge && (
<span className="ppcp-r-badge-box__title-image-badge">
{ props.imageBadge.map( ( badge ) =>
data().getImage( badge )
) }
</span>
) }
{ props.textBadge && (
<TitleBadge type={ TITLE_BADGE_INFO } text={ props.textBadge }/>
) }
</span>
<div className="ppcp-r-badge-box__description">
{ props?.description && (
<p
className="ppcp-r-badge-box__description"
dangerouslySetInnerHTML={ { __html: props.description, } }
></p>
) }
</div>
</div>
);
{ props.textBadge && (
<TitleBadge
type={ TITLE_BADGE_INFO }
text={ props.textBadge }
/>
) }
</span>
<div className="ppcp-r-badge-box__description">
{ props?.description && (
<p
className="ppcp-r-badge-box__description"
dangerouslySetInnerHTML={ {
__html: props.description,
} }
></p>
) }
</div>
</div>
);
};
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 Separator from '../Separator';
import generatePriceText from '../../../utils/badgeBoxUtils';
const AcdcFlow = ( { isFastlane, isPayLater, storeCountry, storeCurrency, countryPriceInfo } ) => {
if (isFastlane && isPayLater && storeCountry === 'us') {
return (
<div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={__(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
)}
/>
<BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}/>
<BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-paypal.svg']}
description={sprintf(
// 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://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Pay Later', 'woocommerce-paypal-payments')}
imageBadge={['icon-payment-method-paypal-small.svg']}
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'
),
'https://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Venmo', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-venmo.svg']}
description={sprintf(
// 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://www.paypal.com/us/business/paypal-business-fees'
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Crypto', 'woocommerce-paypal-payments')}
imageBadge={['icon-payment-method-crypto.svg']}
description={sprintf(
// 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://www.paypal.com/us/business/paypal-business-fees'
)}
/>
</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={__('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 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// 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://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 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>
);
}
const AcdcFlow = ( {
isFastlane,
isPayLater,
storeCountry,
storeCurrency,
countryPriceInfo,
} ) => {
if ( isFastlane && isPayLater && storeCountry === 'us' ) {
return (
<div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={ __(
'PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
textBadge={ __(
'from 3.49% + $0.49 USD<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
) }
/>
<BadgeBox
title={ __(
'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox
title={ __(
'Pay with PayPal',
'woocommerce-paypal-payments'
) }
imageBadge={ [ 'icon-button-paypal.svg' ] }
description={ sprintf(
// 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://www.paypal.com/us/business/paypal-business-fees'
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __(
'Pay Later',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-payment-method-paypal-small.svg',
] }
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'
),
'https://www.paypal.com/us/business/paypal-business-fees'
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __( 'Venmo', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-button-venmo.svg' ] }
description={ sprintf(
// 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://www.paypal.com/us/business/paypal-business-fees'
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __( 'Crypto', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-payment-method-crypto.svg' ] }
description={ sprintf(
// 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://www.paypal.com/us/business/paypal-business-fees'
) }
/>
</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={ __(
'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 2.59% + $0.49 USD<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ sprintf(
// 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://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 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') {
return (
<div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}
textBadge={__('from 2.90% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')}
description={__(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
)}
/>
<BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}/>
<BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-paypal.svg']}
description={sprintf(
// 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>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Pay in 3', 'woocommerce-paypal-payments')}
imageBadge={['icon-payment-method-paypal-small.svg']}
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'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
</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={__('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 1.20% + £0.30 GBP<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// 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://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>
);
}
if ( isPayLater && storeCountry === 'uk' ) {
return (
<div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={ __(
'PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
textBadge={ __(
'from 2.90% + £0.30 GBP<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
) }
/>
<BadgeBox
title={ __(
'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox
title={ __(
'Pay with PayPal',
'woocommerce-paypal-payments'
) }
imageBadge={ [ 'icon-button-paypal.svg' ] }
description={ sprintf(
// 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>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __(
'Pay in 3',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-payment-method-paypal-small.svg',
] }
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'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
</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={ __(
'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 1.20% + £0.30 GBP<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ sprintf(
// 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://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 (
<div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}
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'
)}
/>
<BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}/>
<BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-paypal.svg']}
description={sprintf(
// 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>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Pay Later', 'woocommerce-paypal-payments')}
imageBadge={['icon-payment-method-paypal-small.svg']}
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'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
</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={__('Custom Card Fields', '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(
// 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://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>
);
return (
<div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={ __(
'PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
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'
) }
/>
<BadgeBox
title={ __(
'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox
title={ __(
'Pay with PayPal',
'woocommerce-paypal-payments'
) }
imageBadge={ [ 'icon-button-paypal.svg' ] }
description={ sprintf(
// 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>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __( 'Pay Later', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-payment-method-paypal-small.svg' ] }
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'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
</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={ __(
'Custom Card Fields',
'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(
// 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://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;

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 Separator from '../Separator';
import generatePriceText from '../../../utils/badgeBoxUtils';
const BcdcFlow = ( { isPayLater, storeCountry, storeCurrency, countryPriceInfo } ) => {
if (isPayLater && storeCountry === 'us') {
return (
<div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={__(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
)}
/>
<BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}/>
<BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-paypal.svg']}
description={sprintf(
// 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>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Pay Later', 'woocommerce-paypal-payments')}
imageBadge={['icon-payment-method-paypal-small.svg']}
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'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Venmo', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-venmo.svg']}
description={sprintf(
// translators: %s: Link to PayPal REST application 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 '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Crypto', 'woocommerce-paypal-payments')}
imageBadge={['icon-payment-method-crypto.svg']}
description={sprintf(
// translators: %s: Link to PayPal REST application 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 '
)}
/>
</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>
);
}
const BcdcFlow = ( {
isPayLater,
storeCountry,
storeCurrency,
countryPriceInfo,
} ) => {
if ( isPayLater && storeCountry === 'us' ) {
return (
<div className="ppcp-r-welcome-docs__wrapper">
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={ __(
'PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
textBadge={ __(
'from 3.49% + $0.49 USD<sup>1</sup>',
'woocommerce-paypal-payments'
) }
description={ __(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
) }
/>
<BadgeBox
title={ __(
'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox
title={ __(
'Pay with PayPal',
'woocommerce-paypal-payments'
) }
imageBadge={ [ 'icon-button-paypal.svg' ] }
description={ sprintf(
// 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>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __(
'Pay Later',
'woocommerce-paypal-payments'
) }
imageBadge={ [
'icon-payment-method-paypal-small.svg',
] }
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'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __( 'Venmo', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-button-venmo.svg' ] }
description={ sprintf(
// translators: %s: Link to PayPal REST application 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 '
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __( 'Crypto', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-payment-method-crypto.svg' ] }
description={ sprintf(
// translators: %s: Link to PayPal REST application 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 '
) }
/>
</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 (
<div className="ppcp-r-welcome-docs__wrapper ppcp-r-welcome-docs__wrapper--one-col">
<BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}
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'
)}
/>
<BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}/>
<BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-paypal.svg']}
description={sprintf(
// 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>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Pay Later', 'woocommerce-paypal-payments')}
imageBadge={['icon-payment-method-paypal-small.svg']}
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'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<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={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>
);
return (
<div className="ppcp-r-welcome-docs__wrapper ppcp-r-welcome-docs__wrapper--one-col">
<BadgeBox
title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
titleType={ BADGE_BOX_TITLE_BIG }
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'
) }
/>
<BadgeBox
title={ __(
'Included in PayPal Checkout',
'woocommerce-paypal-payments'
) }
titleType={ BADGE_BOX_TITLE_BIG }
/>
<BadgeBox
title={ __( 'Pay with PayPal', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-button-paypal.svg' ] }
description={ sprintf(
// 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>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<BadgeBox
title={ __( 'Pay Later', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-payment-method-paypal-small.svg' ] }
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'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<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={ 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;

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

@ -1,116 +1,129 @@
import { __, sprintf } from '@wordpress/i18n';
import AcdcFlow from "./AcdcFlow";
import BcdcFlow from "./BcdcFlow";
import {Button} from "@wordpress/components";
import AcdcFlow from './AcdcFlow';
import BcdcFlow from './BcdcFlow';
import { Button } from '@wordpress/components';
const WelcomeDocs = ( { useAcdc, isFastlane, isPayLater, storeCountry, storeCurrency } ) => {
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 WelcomeDocs = ( {
useAcdc,
isFastlane,
isPayLater,
storeCountry,
storeCurrency,
} ) => {
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 = {
"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,
}
}
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.3,
checkout: 2.9,
ccf: 1.2,
dw: 1.2,
apm: 1.2,
standardCardFields: 1.2,
},
ca: {
currencySymbol: '$',
fixedFee: 0.3,
checkout: 2.9,
ccf: 2.7,
dw: 2.7,
apm: 2.9,
standardCardFields: 2.9,
},
au: {
currencySymbol: '$',
fixedFee: 0.3,
checkout: 2.6,
ccf: 1.75,
dw: 1.75,
apm: 2.6,
standardCardFields: 2.6,
},
fr: {
currencySymbol: '€',
fixedFee: 0.35,
checkout: 2.9,
ccf: 1.2,
dw: 1.2,
apm: 1.2,
standardCardFields: 1.2,
},
it: {
currencySymbol: '€',
fixedFee: 0.35,
checkout: 3.4,
ccf: 1.2,
dw: 1.2,
apm: 1.2,
standardCardFields: 1.2,
},
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.9,
ccf: 1.2,
dw: 1.2,
apm: 1.2,
standardCardFields: 1.2,
},
};
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 }
storeCurrency={ storeCurrency }
countryPriceInfo={ countryPriceInfo } />
) : (
<BcdcFlow
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
countryPriceInfo={ countryPriceInfo } />
)}
<p
className="ppcp-r-welcome-docs__description"
dangerouslySetInnerHTML={{__html: pricesBasedDescription,}}
></p>
</div>
);
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 }
storeCurrency={ storeCurrency }
countryPriceInfo={ countryPriceInfo }
/>
) : (
<BcdcFlow
isPayLater={ isPayLater }
storeCountry={ storeCountry }
storeCurrency={ storeCurrency }
countryPriceInfo={ countryPriceInfo }
/>
) }
<p
className="ppcp-r-welcome-docs__description"
dangerouslySetInnerHTML={ { __html: pricesBasedDescription } }
></p>
</div>
);
};
export default WelcomeDocs;

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

@ -1,18 +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 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}`;
const percentage = selectedCountryPrice[ type ].toFixed( 2 );
const fixedFee = `${ selectedCountryPrice.currencySymbol }${ selectedCountryPrice.fixedFee }`;
return __(
`from ${percentage}% + ${fixedFee} ${storeCurrency}<sup>1</sup>`,
'woocommerce-paypal-payments'
);
return __(
`from ${ percentage }% + ${ fixedFee } ${ storeCurrency }<sup>1</sup>`,
'woocommerce-paypal-payments'
);
};
export default generatePriceText;