mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
Add components
This commit is contained in:
Emili Castells Guasch
parent
87ca59cf34
commit
a5ae046021
8 changed files with 274 additions and 163 deletions
0
modules/ppcp-settings/node_modules/.gitkeep
generated
vendored
0
modules/ppcp-settings/node_modules/.gitkeep
generated
vendored
|
|
@ -12,8 +12,6 @@ button.components-button, a.components-button {
|
|||
border-radius: 2px;
|
||||
padding: 14px 17px;
|
||||
height: auto;
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
&__description {
|
||||
@include font(14, 22, 400);
|
||||
margin: 0;
|
||||
margin: 0 20%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import Container from '../../ReusableComponents/Container';
|
||||
import { useOnboardingStep } from '../../../data';
|
||||
import { getSteps } from './availableSteps';
|
||||
import {__} from "@wordpress/i18n";
|
||||
import Navigation from "../../ReusableComponents/Navigation";
|
||||
import Navigation from '../../ReusableComponents/Navigation';
|
||||
|
||||
const getCurrentStep = ( requestedStep, steps ) => {
|
||||
const isValidStep = ( step ) =>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, Icon } from '@wordpress/components';
|
||||
|
||||
const StepCompleteSetup = ( {
|
||||
setStep,
|
||||
currentStep,
|
||||
stepperOrder,
|
||||
setCompleted,
|
||||
} ) => {
|
||||
const ButtonIcon = () => <Icon icon="external" />;
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-page-products">
|
||||
<OnboardingHeader
|
||||
title={ __(
|
||||
'Complete Your Payment Setup',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'To finalize your payment setup, please log in to PayPal. If you don’t have an account yet, don’t worry - we’ll guide you through the easy process of creating one.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
<div className="ppcp-r-inner-container">
|
||||
<div className="ppcp-r-onboarding-header__description">
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={ ButtonIcon }
|
||||
onClick={ () => {} }
|
||||
>
|
||||
{ __(
|
||||
'Connect to PayPal',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepCompleteSetup;
|
||||
|
|
@ -19,7 +19,7 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'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.',
|
||||
'Your all-in-one integration for PayPal checkout solutions that enable buyers to pay via PayPal, Pay Later, all major credit/debit cards, Apple Pay, Google Pay, and more.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
|
|
@ -102,23 +102,41 @@ const WelcomeDocs = () => {
|
|||
|
||||
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>
|
||||
<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' ) }
|
||||
title={ __(
|
||||
'PayPal Checkout',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
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={ __(
|
||||
'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 }/>
|
||||
title={ __(
|
||||
'Included in PayPal Checkout',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
titleType={ BADGE_BOX_TITLE_BIG }
|
||||
/>
|
||||
<BadgeBox
|
||||
title={ __( 'Pay with PayPal', 'woocommerce-paypal-payments' ) }
|
||||
title={ __(
|
||||
'Pay with PayPal',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
imageBadge={ [ 'icon-button-paypal.svg' ] }
|
||||
description={ sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
|
|
@ -129,10 +147,15 @@ const WelcomeDocs = () => {
|
|||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
) }
|
||||
/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<BadgeBox
|
||||
title={ __( 'Pay Later', 'woocommerce-paypal-payments' ) }
|
||||
imageBadge={ [ 'icon-payment-method-paypal-small.svg' ] }
|
||||
title={ __(
|
||||
'Pay Later',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
imageBadge={ [
|
||||
'icon-payment-method-paypal-small.svg',
|
||||
] }
|
||||
description={ sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
|
|
@ -142,7 +165,7 @@ const WelcomeDocs = () => {
|
|||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
) }
|
||||
/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<BadgeBox
|
||||
title={ __( 'Venmo', 'woocommerce-paypal-payments' ) }
|
||||
imageBadge={ [ 'icon-button-venmo.svg' ] }
|
||||
|
|
@ -155,7 +178,7 @@ const WelcomeDocs = () => {
|
|||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
) }
|
||||
/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<BadgeBox
|
||||
title={ __( 'Crypto', 'woocommerce-paypal-payments' ) }
|
||||
imageBadge={ [ 'icon-payment-method-crypto.svg' ] }
|
||||
|
|
@ -171,14 +194,31 @@ const WelcomeDocs = () => {
|
|||
</div>
|
||||
<div className="ppcp-r-welcome-docs__col">
|
||||
<BadgeBox
|
||||
title={ __( 'Optional payment methods', 'woocommerce-paypal-payments' ) }
|
||||
title={ __(
|
||||
'Optional payment methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
titleType={ BADGE_BOX_TITLE_BIG }
|
||||
description={ __( 'with additional application', 'woocommerce-paypal-payments' ) }
|
||||
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' ) }
|
||||
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
|
||||
__(
|
||||
|
|
@ -188,11 +228,20 @@ const WelcomeDocs = () => {
|
|||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
) }
|
||||
/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<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' ) }
|
||||
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
|
||||
__(
|
||||
|
|
@ -202,11 +251,22 @@ const WelcomeDocs = () => {
|
|||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
) }
|
||||
/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<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' ) }
|
||||
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
|
||||
__(
|
||||
|
|
@ -216,11 +276,16 @@ const WelcomeDocs = () => {
|
|||
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
|
||||
) }
|
||||
/>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator"/>
|
||||
<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' ) }
|
||||
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
|
||||
__(
|
||||
|
|
@ -234,7 +299,7 @@ const WelcomeDocs = () => {
|
|||
</div>
|
||||
<p
|
||||
className="ppcp-r-welcome-docs__description"
|
||||
dangerouslySetInnerHTML={ { __html: pricesBasedDescription, } }
|
||||
dangerouslySetInnerHTML={ { __html: pricesBasedDescription } }
|
||||
></p>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
import StepWelcome from './StepWelcome';
|
||||
import StepBusiness from './StepBusiness';
|
||||
import StepProducts from './StepProducts';
|
||||
import StepCompleteSetup from './StepCompleteSetup';
|
||||
|
||||
export const getSteps = ( flags ) => {
|
||||
const allSteps = [ StepWelcome, StepBusiness, StepProducts ];
|
||||
const allSteps = [
|
||||
StepWelcome,
|
||||
StepBusiness,
|
||||
StepProducts,
|
||||
StepCompleteSetup,
|
||||
];
|
||||
|
||||
if ( ! flags.canUseCasualSelling ) {
|
||||
return allSteps.filter( ( step ) => step !== StepBusiness );
|
||||
|
|
|
|||
0
node_modules/.gitkeep
generated
vendored
0
node_modules/.gitkeep
generated
vendored
Loading…
Add table
Add a link
Reference in a new issue
