mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
🔀 Merge branch 'PCP-3834’
# Conflicts: # modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
This commit is contained in:
Philipp Stracker
commit
fd07038a76
25 changed files with 499 additions and 72 deletions
|
|
@ -0,0 +1,43 @@
|
|||
import data from '../../utils/data';
|
||||
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 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;
|
||||
return (
|
||||
<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.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';
|
||||
export const BADGE_BOX_TITLE_SMALL = 'small';
|
||||
export default BadgeBox;
|
||||
|
|
@ -3,7 +3,7 @@ import data from '../../utils/data';
|
|||
const OnboardingHeader = ( props ) => {
|
||||
return (
|
||||
<section className="ppcp-r-onboarding-header">
|
||||
<div className="ppcp-r-onboarding-header__gradient">
|
||||
<div className="ppcp-r-onboarding-header__logo">
|
||||
<div className="ppcp-r-onboarding-header__logo-wrapper">
|
||||
{ data().getImage( 'logo-paypal.svg' ) }
|
||||
</div>
|
||||
|
|
@ -13,9 +13,10 @@ const OnboardingHeader = ( props ) => {
|
|||
{ props.title }
|
||||
</h1>
|
||||
{ props.description && (
|
||||
<p className="ppcp-r-onboarding-header__description">
|
||||
{ props.description }
|
||||
</p>
|
||||
<p
|
||||
className="ppcp-r-onboarding-header__description"
|
||||
dangerouslySetInnerHTML={ { __html: props.description, } }
|
||||
></p>
|
||||
) }
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
const TitleBadge = ( { text, type } ) => {
|
||||
const className = 'ppcp-r-title-badge ' + `ppcp-r-title-badge--${ type }`;
|
||||
return <span className={ className }>{ text }</span>;
|
||||
return <span
|
||||
className={ className }
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: text,
|
||||
}}
|
||||
></span>;
|
||||
};
|
||||
|
||||
export const TITLE_BADGE_POSITIVE = 'positive';
|
||||
export const TITLE_BADGE_NEGATIVE = 'negative';
|
||||
export const TITLE_BADGE_INFO = 'info';
|
||||
export default TitleBadge;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
import { __ } from '@wordpress/i18n';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
|
||||
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
|
||||
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
|
||||
import Separator from '../../ReusableComponents/Separator';
|
||||
import BadgeBox, {
|
||||
BADGE_BOX_TITLE_BIG,
|
||||
} from '../../ReusableComponents/BadgeBox';
|
||||
import AdvancedOptionsForm from './Components/AdvancedOptionsForm';
|
||||
|
||||
const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
|
||||
|
|
@ -15,13 +18,19 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Your all-in-one checkout solution with PayPal, Venmo, Pay Later, all major credit/debit cards, Apple Pay, Google Pay, and more.',
|
||||
'Your all-in-one integration for PayPal checkout solutions that enable buyers<br/> to pay via PayPal, Pay Later, all major credit/debit cards, Apple Pay, Google Pay, and more.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
<div className="ppcp-r-inner-container">
|
||||
<PaymentMethodIcons icons="all" />
|
||||
<WelcomeFeatures />
|
||||
<PaymentMethodIcons icons="all" />
|
||||
<p className="ppcp-r-button__description">
|
||||
{ __(
|
||||
`Click the button below to be guided through connecting your existing PayPal account or creating a new one.You will be able to choose the payment options that are right for your store.`,
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
<Button
|
||||
className="ppcp-r-button-activate-paypal"
|
||||
variant="primary"
|
||||
|
|
@ -32,12 +41,10 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Button>
|
||||
<Separator
|
||||
className="ppcp-r-page-welcome-or-separator"
|
||||
text={ __( 'or', 'woocommerce-paypal-payments' ) }
|
||||
/>
|
||||
<AdvancedOptionsForm setCompleted={ setCompleted } />
|
||||
</div>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<WelcomeDocs />
|
||||
<AdvancedOptionsForm setCompleted={ setCompleted } />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -72,5 +79,219 @@ const WelcomeFeatures = () => {
|
|||
</div>
|
||||
);
|
||||
};
|
||||
const WelcomeDocs = () => {
|
||||
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 StepWelcome;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
