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

Create the welcome docs flows

Browse source
This commit is contained in:
Narek Zakarian 2024-11-12 19:23:30 +04:00
parent 70c524184c
commit 0993780243
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
5 changed files with 527 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,155 +0,0 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from "./BadgeBox";
import { __, sprintf } from '@wordpress/i18n';
import Separator from './Separator';
const WelcomeDocs = ( props ) => {
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 '
)
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>
<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={ __( '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 REST application guide
__(
'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
<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 REST application guide
__(
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={ __( 'Alternative Payment Methods', 'woocommerce-paypal-payments' ) }
imageBadge={ [ 'icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg' ] }
textBadge={ __( 'from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments' ) }
description={ sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
<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 REST application guide
__(
'Speed up guest checkout with Fatslane. Link a customer\'s email address to their payment details. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
) }
/>
</div>
</div>
<p
className="ppcp-r-welcome-docs__description"
dangerouslySetInnerHTML={ { __html: pricesBasedDescription, } }
></p>
</div>
);
};
export default WelcomeDocs;

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

@ -0,0 +1,327 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox";
import { __, sprintf } from '@wordpress/i18n';
import Separator from '../Separator';
const AcdcFlow = ( { isFastlane, isPayLater, storeCountry } ) => {
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 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={__('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 REST application guide
__(
'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<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 REST application guide
__(
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']}
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<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 REST application guide
__(
'Speed up guest checkout with Fatslane. Link a customer\'s email address to their payment details. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
</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 REST application guide
__(
'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<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 REST application guide
__(
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<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 REST application guide
__(
'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
</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={__('from 3.40% + €0.35 EUR<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 '
)}
/>
</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 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'Style the credit card fields to match your own style. Includes advanced processing with risk management, 3D Secure, fraud protection options, and chargeback protection. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Digital Wallets', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']}
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
<Separator className="ppcp-r-page-welcome-mode-separator"/>
<BadgeBox
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']}
textBadge={__('from 3.40% + €0.35 EUR<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)}
/>
</div>
</div>
);
};
export default AcdcFlow;

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

@ -0,0 +1,160 @@
import BadgeBox, { BADGE_BOX_TITLE_BIG } from "../BadgeBox";
import { __, sprintf } from '@wordpress/i18n';
import Separator from '../Separator';
const BcdcFlow = ( { isPayLater, storeCountry } ) => {
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.59% + $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={__('from 3.40% + €0.35 EUR<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={__('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 3.40% + €0.35 EUR<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>
);
};
export default BcdcFlow;

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

@ -0,0 +1,32 @@
import { __, sprintf } from '@wordpress/i18n';
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 '
);
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 } />
) : (
<BcdcFlow isPayLater={ isPayLater } storeCountry={ storeCountry } />
)}
<p
className="ppcp-r-welcome-docs__description"
dangerouslySetInnerHTML={{__html: pricesBasedDescription,}}
></p>
</div>
);
};
export default WelcomeDocs;

10
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
View file

@ -4,7 +4,7 @@ import { Button } from '@wordpress/components';
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
import Separator from '../../ReusableComponents/Separator';
import WelcomeDocs from '../../ReusableComponents/WelcomeDocs';
import WelcomeDocs from '../../ReusableComponents/WelcomeDocs/WelcomeDocs';
import AdvancedOptionsForm from './Components/AdvancedOptionsForm';
import AccordionSection from '../../ReusableComponents/AccordionSection';
@ -43,7 +43,13 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
</Button>
</div>
<Separator className="ppcp-r-page-welcome-mode-separator" />
<WelcomeDocs />
<WelcomeDocs
useAcdc = { false }
isFastlane = { false }
isPayLater = { false }
storeCountry = { 'us' }
storeCurrency = { 'usd' }
/>
<Separator text={ __( 'or', 'woocommerce-paypal-payments' ) } />
<AccordionSection
title={ __(