mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 09:08:09 +08:00
Rename files, folders
This commit is contained in:
inpsyde-maticluznar
parent
e971ea33be
commit
222bd0848e
21 changed files with 197 additions and 46 deletions
|
|
@ -0,0 +1,5 @@
|
|||
const Container = ( props ) => {
|
||||
return <div className="ppcp-r-container">{ props.children }</div>;
|
||||
};
|
||||
|
||||
export default Container;
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
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-wrapper">
|
||||
{ data().getImage( 'logo-paypal.svg' ) }
|
||||
</div>
|
||||
</div>
|
||||
<div className="ppcp-r-onboarding-header__content">
|
||||
<h1 className="ppcp-r-onboarding-header__title">
|
||||
{ props.title }
|
||||
</h1>
|
||||
{ props.description && (
|
||||
<p className="ppcp-r-onboarding-header__description">
|
||||
{ props.description }
|
||||
</p>
|
||||
) }
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingHeader;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import data from '../../utils/data';
|
||||
|
||||
const PaymentMethodIcon = ( props ) => {
|
||||
if (
|
||||
( Array.isArray( props.icons ) &&
|
||||
props.icons.includes( props.type ) ) ||
|
||||
props.icons === 'all'
|
||||
) {
|
||||
return data().getImage( 'icon-button-' + props.type + '.svg' );
|
||||
}
|
||||
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export default PaymentMethodIcon;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import PaymentMethodIcon from './PaymentMethodIcon';
|
||||
|
||||
const PaymentMethodIcons = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r-payment-method-icons">
|
||||
<PaymentMethodIcon type="paypal" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="venmo" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="visa" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="mastercard" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="amex" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="discover" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="apple-pay" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="google-pay" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="sepa" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="ideal" icons={ props.icons } />
|
||||
<PaymentMethodIcon type="bancontact" icons={ props.icons } />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentMethodIcons;
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import data from '../../utils/data';
|
||||
|
||||
const SelectBox = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r-select-box">
|
||||
<div className="ppcp-r-select-box__radio">
|
||||
<input
|
||||
checked="checked"
|
||||
className="ppcp-r-select-box__radio-value"
|
||||
type="radio"
|
||||
/>
|
||||
<span className="ppcp-r-select-box__radio-presentation"></span>
|
||||
</div>
|
||||
<div className="ppcp-r-select-box__content">
|
||||
{ data().getImage( props.icon ) }
|
||||
<div className="ppcp-r-select-box__content-inner">
|
||||
<span className="ppcp-r-select-box__title">
|
||||
{ props.title }
|
||||
</span>
|
||||
<p className="ppcp-r-select-box__description">
|
||||
{ props.description }
|
||||
</p>
|
||||
{ props.children && (
|
||||
<div className="ppcp-r-select-box__additional-content">
|
||||
{ props.children }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectBox;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
const SelectBoxWrapper = ( props ) => {
|
||||
return <div className="ppcp-r-select-box-wrapper">{ props.children }</div>;
|
||||
};
|
||||
|
||||
export default SelectBoxWrapper;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
const Separator = ( props ) => {
|
||||
let separatorClass = 'ppcp-r-separator';
|
||||
|
||||
if ( props?.className ) {
|
||||
separatorClass += ' ' + props.className;
|
||||
}
|
||||
|
||||
if ( props.text ) {
|
||||
return (
|
||||
<div className={ separatorClass }>
|
||||
<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span>
|
||||
|
||||
<span className="ppcp-r-separator__text">{ props.text }</span>
|
||||
<span className="ppcp-r-separator__line ppcp-r-separator__line--after"></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ separatorClass }>
|
||||
<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Separator;
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import { useState } from '@wordpress/element';
|
||||
import { ToggleControl } from '@wordpress/components';
|
||||
|
||||
const SettingsToggleBlock = ( props ) => {
|
||||
const [ isToggled, setToggled ] = useState( false );
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-toggle-block">
|
||||
<div className="ppcp-r-toggle-block__wrapper">
|
||||
<div className="ppcp-r-toggle-block__content">
|
||||
{ props?.label && (
|
||||
<span className="ppcp-r-toggle-block__content-label">
|
||||
{ props.label }
|
||||
</span>
|
||||
) }
|
||||
{ props?.description && (
|
||||
<p
|
||||
className="ppcp-r-toggle-block__content-description"
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: props.description,
|
||||
} }
|
||||
></p>
|
||||
) }
|
||||
</div>
|
||||
<div className="ppcp-r-toggle-block__switch">
|
||||
<ToggleControl
|
||||
checked={ isToggled }
|
||||
onChange={ ( newValue ) => {
|
||||
setToggled( newValue );
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{ props.children && isToggled && (
|
||||
<div className="ppcp-r-toggle-block__toggled-content">
|
||||
{ props.children }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsToggleBlock;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import Container from '../../ReusableComponents/Container.js';
|
||||
import StepWelcome from './StepWelcome.js';
|
||||
|
||||
const Onboarding = () => {
|
||||
return (
|
||||
<Container>
|
||||
<div className="ppcp-r-card">
|
||||
<StepWelcome />
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Onboarding;
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader.js';
|
||||
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper.js';
|
||||
import SelectBox from '../../ReusableComponents/SelectBox.js';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
|
||||
|
||||
const StepBusiness = () => {
|
||||
return (
|
||||
<div className="ppcp-r-page-welcome">
|
||||
<OnboardingHeader
|
||||
title={ __(
|
||||
'Tell Us About Your Business',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
<div className="ppcp-r-inner-container">
|
||||
<SelectBoxWrapper>
|
||||
<SelectBox
|
||||
title={ __(
|
||||
'Casual Seller',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'I sell occasionally and mainly use PayPal for personal transactions.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-business-casual-seller.svg"
|
||||
>
|
||||
<PaymentMethodIcons
|
||||
icons={ [
|
||||
'paypal',
|
||||
'venmo',
|
||||
'visa',
|
||||
'mastercard',
|
||||
'amex',
|
||||
'discover',
|
||||
] }
|
||||
/>
|
||||
</SelectBox>
|
||||
<SelectBox
|
||||
title={ __(
|
||||
'Business',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'I run a registered business and sell full-time.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-business-business.svg"
|
||||
>
|
||||
<PaymentMethodIcons
|
||||
icons={ [
|
||||
'paypal',
|
||||
'venmo',
|
||||
'visa',
|
||||
'mastercard',
|
||||
'amex',
|
||||
'discover',
|
||||
'apple-pay',
|
||||
'google-pay',
|
||||
'ideal',
|
||||
] }
|
||||
/>
|
||||
</SelectBox>
|
||||
</SelectBoxWrapper>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepBusiness;
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader.js';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { Button, TextControl } from '@wordpress/components';
|
||||
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
|
||||
import SettingsToggleBlock from '../../ReusableComponents/SettingsToggleBlock';
|
||||
import Separator from '../../ReusableComponents/Separator';
|
||||
|
||||
const StepWelcome = () => {
|
||||
return (
|
||||
<div className="ppcp-r-page-welcome">
|
||||
<OnboardingHeader
|
||||
title={ __(
|
||||
'Welcome to PayPal Payments',
|
||||
'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.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
<div className="ppcp-r-inner-container">
|
||||
<PaymentMethodIcons icons="all" />
|
||||
<WelcomeFeatures />
|
||||
<Button
|
||||
className="ppcp-r-button-activate-paypal"
|
||||
variant="primary"
|
||||
>
|
||||
{ __(
|
||||
'Activate PayPal Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</Button>
|
||||
<Separator
|
||||
className="ppcp-r-page-welcome-or-separator"
|
||||
text={ __( 'or', 'woocommerce-paypal-payments' ) }
|
||||
/>
|
||||
<WelcomeForm />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WelcomeFeatures = () => {
|
||||
return (
|
||||
<div className="ppcp-r-welcome-features">
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>{ __( 'Deposits', 'woocommerce-paypal-payments' ) }</span>
|
||||
<p>{ __( 'Instant', 'woocommerce-paypal-payments' ) }</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>
|
||||
{ __( 'Payment Capture', 'woocommerce-paypal-payments' ) }
|
||||
</span>
|
||||
<p>
|
||||
{ __(
|
||||
'Authorize only or Capture',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
<div className="ppcp-r-welcome-features__col">
|
||||
<span>
|
||||
{ __(
|
||||
'Recurring payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</span>
|
||||
<p>{ __( 'Supported', 'woocommerce-paypal-payments' ) }</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WelcomeForm = () => {
|
||||
const advancedUsersDescription = sprintf(
|
||||
// translators: %s: Link to PayPal REST application guide
|
||||
__(
|
||||
'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, <a href="%s">click here</a>.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
'#'
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Enable Sandbox Mode',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Activate Sandbox mode to safely test PayPal with sample data. Once your store is ready to go live, you can easily switch to your production account.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<Button variant="secondary">
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
<Separator className="ppcp-r-page-welcome-mode-separator" />
|
||||
<SettingsToggleBlock
|
||||
label={ __(
|
||||
'Manually Connect - TODO missing link',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ advancedUsersDescription }
|
||||
>
|
||||
<TextControl
|
||||
label={ __(
|
||||
'Sandbox Client ID',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
></TextControl>
|
||||
|
||||
<TextControl
|
||||
label={ __(
|
||||
'Sandbox Secret Key',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
type="password"
|
||||
></TextControl>
|
||||
<Button variant="secondary">
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepWelcome;
|
||||
Loading…
Add table
Add a link
Reference in a new issue
