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

Add components

Browse source
This commit is contained in:
Emili Castells Guasch 2024-11-12 15:01:29 +01:00
parent 87ca59cf34
commit a5ae046021
8 changed files with 274 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

0
modules/ppcp-settings/node_modules/.gitkeep generated vendored
View file

2
modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
View file

@ -12,8 +12,6 @@ button.components-button, a.components-button {
border-radius: 2px; border-radius: 2px;
padding: 14px 17px; padding: 14px 17px;
height: auto; height: auto;
} }
&.is-primary { &.is-primary {

2
modules/ppcp-settings/resources/css/components/reusable-components/_onboarding-header.scss
View file

@ -29,7 +29,7 @@
&__description { &__description {
@include font(14, 22, 400); @include font(14, 22, 400);
margin: 0; margin: 0 20%;
text-align: center; text-align: center;
} }
} }

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

@ -1,8 +1,7 @@
import Container from '../../ReusableComponents/Container'; import Container from '../../ReusableComponents/Container';
import { useOnboardingStep } from '../../../data'; import { useOnboardingStep } from '../../../data';
import { getSteps } from './availableSteps'; import { getSteps } from './availableSteps';
import {__} from "@wordpress/i18n"; import Navigation from '../../ReusableComponents/Navigation';
import Navigation from "../../ReusableComponents/Navigation";
const getCurrentStep = ( requestedStep, steps ) => { const getCurrentStep = ( requestedStep, steps ) => {
const isValidStep = ( step ) => const isValidStep = ( step ) =>
@ -22,24 +21,24 @@ const Onboarding = () => {
const CurrentStepComponent = getCurrentStep( step, steps ); const CurrentStepComponent = getCurrentStep( step, steps );
return ( return (
<> <>
<Navigation <Navigation
setStep={ setStep } setStep={ setStep }
currentStep={ step } currentStep={ step }
setCompleted={ setCompleted } setCompleted={ setCompleted }
stepperOrder={ steps } stepperOrder={ steps }
/> />
<Container page="onboarding"> <Container page="onboarding">
<div className="ppcp-r-card"> <div className="ppcp-r-card">
<CurrentStepComponent <CurrentStepComponent
setStep={ setStep } setStep={ setStep }
currentStep={ step } currentStep={ step }
setCompleted={ setCompleted } setCompleted={ setCompleted }
stepperOrder={ steps } stepperOrder={ steps }
/> />
</div> </div>
</Container> </Container>
</> </>
); );
}; };

43
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepCompleteSetup.js Normal file
View file

@ -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;

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

@ -19,7 +19,7 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
description={ __( 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' 'woocommerce-paypal-payments'
) } ) }
/> />
@ -100,144 +100,209 @@ const WelcomeDocs = () => {
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
); );
return ( return (
<div className="ppcp-r-welcome-docs"> <div className="ppcp-r-welcome-docs">
<h2 className="ppcp-r-welcome-docs__title">{ __( `Want to know more about PayPal Payments?`, 'woocommerce-paypal-payments' ) }</h2> <h2 className="ppcp-r-welcome-docs__title">
<div className="ppcp-r-welcome-docs__wrapper"> { __(
<div className="ppcp-r-welcome-docs__col"> `Want to know more about PayPal Payments?`,
<BadgeBox 'woocommerce-paypal-payments'
title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) } ) }
titleType={ BADGE_BOX_TITLE_BIG } </h2>
textBadge={ __( 'from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments' ) } <div className="ppcp-r-welcome-docs__wrapper">
description={ __( <div className="ppcp-r-welcome-docs__col">
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion', <BadgeBox
'woocommerce-paypal-payments' title={ __(
) } 'PayPal Checkout',
/> 'woocommerce-paypal-payments'
<BadgeBox ) }
title={ __( 'Included in PayPal Checkout', 'woocommerce-paypal-payments' ) } titleType={ BADGE_BOX_TITLE_BIG }
titleType={ BADGE_BOX_TITLE_BIG }/> textBadge={ __(
<BadgeBox 'from 3.49% + $0.49 USD<sup>1</sup>',
title={ __( 'Pay with PayPal', 'woocommerce-paypal-payments' ) } 'woocommerce-paypal-payments'
imageBadge={ [ 'icon-button-paypal.svg' ] } ) }
description={ sprintf( description={ __(
// translators: %s: Link to PayPal REST application guide 'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
__( 'woocommerce-paypal-payments'
'Our brand recognition helps give customers the confidence to buy. <a target="_blank" href="%s">Learn more</a>', ) }
'woocommerce-paypal-payments' />
), <BadgeBox
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' title={ __(
) } 'Included in PayPal Checkout',
/> 'woocommerce-paypal-payments'
<Separator className="ppcp-r-page-welcome-mode-separator"/> ) }
<BadgeBox titleType={ BADGE_BOX_TITLE_BIG }
title={ __( 'Pay Later', 'woocommerce-paypal-payments' ) } />
imageBadge={ [ 'icon-payment-method-paypal-small.svg' ] } <BadgeBox
description={ sprintf( title={ __(
// translators: %s: Link to PayPal REST application guide 'Pay with PayPal',
__( 'woocommerce-paypal-payments'
'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' imageBadge={ [ 'icon-button-paypal.svg' ] }
), description={ sprintf(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' // 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>',
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'woocommerce-paypal-payments'
<BadgeBox ),
title={ __( 'Venmo', 'woocommerce-paypal-payments' ) } 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
imageBadge={ [ 'icon-button-venmo.svg' ] } ) }
description={ sprintf( />
// translators: %s: Link to PayPal REST application guide <Separator className="ppcp-r-page-welcome-mode-separator" />
__( <BadgeBox
'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>', title={ __(
'woocommerce-paypal-payments' 'Pay Later',
), 'woocommerce-paypal-payments'
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' ) }
) } imageBadge={ [
/> 'icon-payment-method-paypal-small.svg',
<Separator className="ppcp-r-page-welcome-mode-separator"/> ] }
<BadgeBox description={ sprintf(
title={ __( 'Crypto', 'woocommerce-paypal-payments' ) } // translators: %s: Link to PayPal REST application guide
imageBadge={ [ 'icon-payment-method-crypto.svg' ] } __(
description={ sprintf( 'Offer installment payment options and get paid upfront - at no extra cost to you. <a target="_blank" href="%s">Learn more</a>',
// translators: %s: Link to PayPal REST application guide 'woocommerce-paypal-payments'
__( ),
'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>', 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
'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' ) }
</div> imageBadge={ [ 'icon-button-venmo.svg' ] }
<div className="ppcp-r-welcome-docs__col"> description={ sprintf(
<BadgeBox // translators: %s: Link to PayPal REST application guide
title={ __( 'Optional payment methods', 'woocommerce-paypal-payments' ) } __(
titleType={ BADGE_BOX_TITLE_BIG } 'Automatically offer Venmo checkout to millions of active users. <a target="_blank" href="%s">Learn more</a>',
description={ __( 'with additional application', 'woocommerce-paypal-payments' ) } 'woocommerce-paypal-payments'
/> ),
<BadgeBox 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
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' ) } <Separator className="ppcp-r-page-welcome-mode-separator" />
description={ sprintf( <BadgeBox
// translators: %s: Link to PayPal REST application guide title={ __( 'Crypto', 'woocommerce-paypal-payments' ) }
__( imageBadge={ [ 'icon-payment-method-crypto.svg' ] }
'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>', description={ sprintf(
'woocommerce-paypal-payments' // translators: %s: Link to PayPal REST application guide
), __(
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'Let customers checkout with Crypto while you get paid in cash. <a target="_blank" href="%s">Learn more</a>',
) } 'woocommerce-paypal-payments'
/> ),
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
<BadgeBox ) }
title={ __( 'Digital Wallets', 'woocommerce-paypal-payments' ) } />
imageBadge={ [ 'icon-button-apple-pay.svg', 'icon-button-google-pay.svg' ] } </div>
textBadge={ __( 'from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments' ) } <div className="ppcp-r-welcome-docs__col">
description={ sprintf( <BadgeBox
// translators: %s: Link to PayPal REST application guide title={ __(
__( 'Optional payment methods',
'Accept Apple Pay on eligible devices and Google Pay through mobile and web. <a target="_blank" href="%s">Learn more</a>', 'woocommerce-paypal-payments'
'woocommerce-paypal-payments' ) }
), titleType={ BADGE_BOX_TITLE_BIG }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' description={ __(
) } 'with additional application',
/> 'woocommerce-paypal-payments'
<Separator className="ppcp-r-page-welcome-mode-separator"/> ) }
<BadgeBox />
title={ __( 'Alternative Payment Methods', 'woocommerce-paypal-payments' ) } <BadgeBox
imageBadge={ [ 'icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg' ] } title={ __(
textBadge={ __( 'from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments' ) } 'Custom Card Fields',
description={ sprintf( 'woocommerce-paypal-payments'
// translators: %s: Link to PayPal REST application guide ) }
__( imageBadge={ [
'Seamless payments for customers across the globe using their preferred payment methods. <a target="_blank" href="%s">Learn more</a>', 'icon-button-visa.svg',
'woocommerce-paypal-payments' 'icon-button-mastercard.svg',
), 'icon-button-amex.svg',
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' 'icon-button-discover.svg',
) } ] }
/> textBadge={ __(
<Separator className="ppcp-r-page-welcome-mode-separator"/> 'from 2.59% + $0.49 USD<sup>1</sup>',
<BadgeBox 'woocommerce-paypal-payments'
title={ __( '', 'woocommerce-paypal-payments' ) } ) }
imageBadge={ [ 'icon-payment-method-fastlane-small.svg' ] } description={ sprintf(
textBadge={ __( 'from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments' ) } // translators: %s: Link to PayPal REST application guide
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'
'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 '
), ) }
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input ' />
) } <Separator className="ppcp-r-page-welcome-mode-separator" />
/> <BadgeBox
</div> title={ __(
</div> 'Digital Wallets',
<p 'woocommerce-paypal-payments'
className="ppcp-r-welcome-docs__description" ) }
dangerouslySetInnerHTML={ { __html: pricesBasedDescription, } } imageBadge={ [
></p> 'icon-button-apple-pay.svg',
</div> '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; export default StepWelcome;

8
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js
View file

@ -1,9 +1,15 @@
import StepWelcome from './StepWelcome'; import StepWelcome from './StepWelcome';
import StepBusiness from './StepBusiness'; import StepBusiness from './StepBusiness';
import StepProducts from './StepProducts'; import StepProducts from './StepProducts';
import StepCompleteSetup from './StepCompleteSetup';
export const getSteps = ( flags ) => { export const getSteps = ( flags ) => {
const allSteps = [ StepWelcome, StepBusiness, StepProducts ]; const allSteps = [
StepWelcome,
StepBusiness,
StepProducts,
StepCompleteSetup,
];
if ( ! flags.canUseCasualSelling ) { if ( ! flags.canUseCasualSelling ) {
return allSteps.filter( ( step ) => step !== StepBusiness ); return allSteps.filter( ( step ) => step !== StepBusiness );

0
node_modules/.gitkeep generated vendored
View file