mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 09:08:09 +08:00
Merge pull request #2732 from woocommerce/PCP-3810-Create-products-placeholder-page-in-new-settings-module
Create products placeholder page in new settings module (3810)
This commit is contained in:
Emili Castells
GitHub
commit
80d58851af
24 changed files with 590 additions and 46 deletions
|
|
@ -1,14 +1,43 @@
|
|||
import Container from '../../ReusableComponents/Container.js';
|
||||
import StepWelcome from './StepWelcome.js';
|
||||
import StepBusiness from './StepBusiness.js';
|
||||
import StepProducts from './StepProducts.js';
|
||||
import { useState } from '@wordpress/element';
|
||||
import Dashboard from '../Dashboard/Dashboard';
|
||||
|
||||
const Onboarding = () => {
|
||||
const [ step, setStep ] = useState( 0 );
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div className="ppcp-r-card">
|
||||
<StepWelcome />
|
||||
<Stepper currentStep={ step } setStep={ setStep } />
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const Stepper = ( { currentStep, setStep } ) => {
|
||||
const stepperOrder = [ StepWelcome, StepBusiness, StepProducts ];
|
||||
|
||||
const renderSteps = () => {
|
||||
return stepperOrder.map( ( Step, index ) => {
|
||||
return (
|
||||
<div
|
||||
key={ index }
|
||||
style={ index !== currentStep ? { display: 'none' } : {} }
|
||||
>
|
||||
<Step
|
||||
setStep={ setStep }
|
||||
currentStep={ currentStep }
|
||||
stepperOrder={ stepperOrder }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} );
|
||||
};
|
||||
|
||||
return <>{ renderSteps() }</>;
|
||||
};
|
||||
|
||||
export default Onboarding;
|
||||
|
|
|
|||
|
|
@ -3,10 +3,17 @@ import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper.js';
|
|||
import SelectBox from '../../ReusableComponents/SelectBox.js';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PaymentMethodIcons from '../../ReusableComponents/PaymentMethodIcons';
|
||||
import { useState } from '@wordpress/element';
|
||||
import Navigation from '../../ReusableComponents/Navigation';
|
||||
|
||||
const StepBusiness = ( { setStep, currentStep, stepperOrder } ) => {
|
||||
const [ businessCategory, setBusinessCategory ] = useState( null );
|
||||
const BUSINESS_RADIO_GROUP_NAME = 'business';
|
||||
const CASUAL_SELLER_CHECKBOX_VALUE = 'casual_seller';
|
||||
const BUSINESS_CHECKBOX_VALUE = 'business';
|
||||
|
||||
const StepBusiness = () => {
|
||||
return (
|
||||
<div className="ppcp-r-page-welcome">
|
||||
<div className="ppcp-r-page-business">
|
||||
<OnboardingHeader
|
||||
title={ __(
|
||||
'Tell Us About Your Business',
|
||||
|
|
@ -25,6 +32,15 @@ const StepBusiness = () => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-business-casual-seller.svg"
|
||||
name={ BUSINESS_RADIO_GROUP_NAME }
|
||||
value={ CASUAL_SELLER_CHECKBOX_VALUE }
|
||||
changeCallback={ setBusinessCategory }
|
||||
currentValue={ businessCategory }
|
||||
checked={
|
||||
businessCategory ===
|
||||
{ CASUAL_SELLER_CHECKBOX_VALUE }
|
||||
}
|
||||
type="radio"
|
||||
>
|
||||
<PaymentMethodIcons
|
||||
icons={ [
|
||||
|
|
@ -47,6 +63,14 @@ const StepBusiness = () => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-business-business.svg"
|
||||
name={ BUSINESS_RADIO_GROUP_NAME }
|
||||
value={ BUSINESS_CHECKBOX_VALUE }
|
||||
currentValue={ businessCategory }
|
||||
changeCallback={ setBusinessCategory }
|
||||
checked={
|
||||
businessCategory === { BUSINESS_CHECKBOX_VALUE }
|
||||
}
|
||||
type="radio"
|
||||
>
|
||||
<PaymentMethodIcons
|
||||
icons={ [
|
||||
|
|
@ -63,6 +87,12 @@ const StepBusiness = () => {
|
|||
/>
|
||||
</SelectBox>
|
||||
</SelectBoxWrapper>
|
||||
<Navigation
|
||||
setStep={ setStep }
|
||||
currentStep={ currentStep }
|
||||
stepperOrder={ stepperOrder }
|
||||
canProceeedCallback={ () => businessCategory !== null }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
import OnboardingHeader from '../../ReusableComponents/OnboardingHeader';
|
||||
import Navigation from '../../ReusableComponents/Navigation';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import SelectBox from '../../ReusableComponents/SelectBox';
|
||||
import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
const StepProducts = ( { setStep, currentStep, stepperOrder } ) => {
|
||||
const [ products, setProducts ] = useState( [] );
|
||||
const PRODUCTS_CHECKBOX_GROUP_NAME = 'products';
|
||||
const VIRTUAL_CHECKBOX_VALUE = 'virtual';
|
||||
const PHYSICAL_CHECKBOX_VALUE = 'physical';
|
||||
const SUBSCRIPTIONS_CHECKBOX_VALUE = 'subscriptions';
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-page-products">
|
||||
<OnboardingHeader
|
||||
title={ __(
|
||||
'Tell Us About the Products You Sell',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
<div className="ppcp-r-inner-container">
|
||||
<SelectBoxWrapper>
|
||||
<SelectBox
|
||||
title={ __( 'Virtual', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Digital items or services that don’t require shipping.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-product-virtual.svg"
|
||||
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
|
||||
value={ VIRTUAL_CHECKBOX_VALUE }
|
||||
changeCallback={ setProducts }
|
||||
currentValue={ products }
|
||||
type="checkbox"
|
||||
>
|
||||
<ul className="ppcp-r-services">
|
||||
<li>
|
||||
{ __(
|
||||
'Services',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</li>
|
||||
<li>
|
||||
{ __(
|
||||
'Downloadable',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</li>
|
||||
<li>
|
||||
{ __(
|
||||
'Bookings',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</li>
|
||||
<li>
|
||||
{ __(
|
||||
'Deposits',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</li>
|
||||
</ul>
|
||||
</SelectBox>
|
||||
<SelectBox
|
||||
title={ __(
|
||||
'Physical Goods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Items that need to be shipped.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-product-physical.svg"
|
||||
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
|
||||
value={ PHYSICAL_CHECKBOX_VALUE }
|
||||
changeCallback={ setProducts }
|
||||
currentValue={ products }
|
||||
type="checkbox"
|
||||
>
|
||||
<ul className="ppcp-r-services">
|
||||
<li>
|
||||
{ __( 'Goods', 'woocommerce-paypal-payments' ) }
|
||||
</li>
|
||||
<li>
|
||||
{ __(
|
||||
'Deliveries',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</li>
|
||||
</ul>
|
||||
</SelectBox>
|
||||
<SelectBox
|
||||
title={ __(
|
||||
'Subscriptions',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Recurring payments for physical goods or services.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-product-subscription.svg"
|
||||
name={ PRODUCTS_CHECKBOX_GROUP_NAME }
|
||||
value={ SUBSCRIPTIONS_CHECKBOX_VALUE }
|
||||
changeCallback={ setProducts }
|
||||
currentValue={ products }
|
||||
type="checkbox"
|
||||
>
|
||||
<a href="#">
|
||||
{ __(
|
||||
'WooCommerce Subscriptions - TODO missing link',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</a>
|
||||
</SelectBox>
|
||||
</SelectBoxWrapper>
|
||||
<Navigation
|
||||
setStep={ setStep }
|
||||
currentStep={ currentStep }
|
||||
stepperOrder={ stepperOrder }
|
||||
canProceeedCallback={ () => products.length > 0 }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StepProducts;
|
||||
|
|
@ -7,7 +7,7 @@ import Separator from '../../ReusableComponents/Separator';
|
|||
import { useOnboardingDetails } from '../../../data';
|
||||
import DataStoreControl from '../../ReusableComponents/DataStoreControl';
|
||||
|
||||
const StepWelcome = () => {
|
||||
const StepWelcome = ( { setStep, currentStep } ) => {
|
||||
return (
|
||||
<div className="ppcp-r-page-welcome">
|
||||
<OnboardingHeader
|
||||
|
|
@ -26,6 +26,7 @@ const StepWelcome = () => {
|
|||
<Button
|
||||
className="ppcp-r-button-activate-paypal"
|
||||
variant="primary"
|
||||
onClick={ () => setStep( currentStep + 1 ) }
|
||||
>
|
||||
{ __(
|
||||
'Activate PayPal Payments',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
