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;
padding: 14px 17px;
height: auto;
}
&.is-primary {

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

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

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

@ -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 ) =>

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;

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

@ -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
@ -131,8 +149,13 @@ const WelcomeDocs = () => {
/>
<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
__(
@ -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
__(
@ -190,9 +230,18 @@ const WelcomeDocs = () => {
/>
<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
__(
@ -204,9 +253,20 @@ const WelcomeDocs = () => {
/>
<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
__(
@ -219,8 +279,13 @@ const WelcomeDocs = () => {
<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>
);

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

@ -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
View file