mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 16:24:33 +08:00
TODO implementation and partial status implementation on the dashobard page
This commit is contained in:
inpsyde-maticluznar
parent
637a9c6dca
commit
2afc530af5
23 changed files with 636 additions and 58 deletions
|
|
@ -0,0 +1,50 @@
|
|||
import data from '../../utils/data';
|
||||
|
||||
export const PayPalCheckbox = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r__checkbox">
|
||||
<input
|
||||
className="ppcp-r__checkbox-value"
|
||||
type="checkbox"
|
||||
checked={ props.currentValue.includes( props.value ) }
|
||||
name={ props.name }
|
||||
value={ props.value }
|
||||
onChange={ ( e ) =>
|
||||
props.handleCheckboxState( e.target.checked, props )
|
||||
}
|
||||
/>
|
||||
<span className="ppcp-r__checkbox-presentation">
|
||||
{ data().getImage( 'icon-checkbox.svg' ) }
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PayPalRdb = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r__radio">
|
||||
<input
|
||||
className="ppcp-r__radio-value"
|
||||
type="radio"
|
||||
checked={ props.value === props.currentValue }
|
||||
name={ props.name }
|
||||
value={ props.value }
|
||||
onChange={ () => props.handleRdbState( props.value ) }
|
||||
/>
|
||||
<span className="ppcp-r__radio-presentation"></span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const handleCheckboxState = ( checked, props ) => {
|
||||
let newValue = null;
|
||||
if ( checked ) {
|
||||
newValue = [ ...props.currentValue, props.value ];
|
||||
props.changeCallback( newValue );
|
||||
} else {
|
||||
newValue = props.currentValue.filter(
|
||||
( value ) => value !== props.value
|
||||
);
|
||||
}
|
||||
props.changeCallback( newValue );
|
||||
};
|
||||
|
|
@ -1,19 +1,7 @@
|
|||
import data from '../../utils/data';
|
||||
import { PayPalCheckbox, PayPalRdb, handleCheckboxState } from './Fields';
|
||||
|
||||
const SelectBox = ( props ) => {
|
||||
const handleCheckboxState = ( checked ) => {
|
||||
let newValue = null;
|
||||
if ( checked ) {
|
||||
newValue = [ ...props.currentValue, props.value ];
|
||||
props.changeCallback( newValue );
|
||||
} else {
|
||||
newValue = props.currentValue.filter(
|
||||
( value ) => value !== props.value
|
||||
);
|
||||
}
|
||||
props.changeCallback( newValue );
|
||||
};
|
||||
|
||||
let boxClassName = 'ppcp-r-select-box';
|
||||
|
||||
if (
|
||||
|
|
@ -27,34 +15,20 @@ const SelectBox = ( props ) => {
|
|||
return (
|
||||
<div className={ boxClassName }>
|
||||
{ props.type === 'radio' && (
|
||||
<div className="ppcp-r-select-box__radio">
|
||||
<input
|
||||
className="ppcp-r-select-box__radio-value"
|
||||
type="radio"
|
||||
checked={ props.value === props.currentValue }
|
||||
name={ props.name }
|
||||
value={ props.value }
|
||||
onChange={ () => props.changeCallback( props.value ) }
|
||||
/>
|
||||
<span className="ppcp-r-select-box__radio-presentation"></span>
|
||||
</div>
|
||||
<PayPalRdb
|
||||
{ ...{
|
||||
...props,
|
||||
handleRdbState: props.changeCallback,
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
{ props.type === 'checkbox' && (
|
||||
<div className="ppcp-r-select-box__checkbox">
|
||||
<input
|
||||
className="ppcp-r-select-box__checkbox-value"
|
||||
type="checkbox"
|
||||
checked={ props.currentValue.includes( props.value ) }
|
||||
name={ props.name }
|
||||
value={ props.value }
|
||||
onChange={ ( e ) =>
|
||||
handleCheckboxState( e.target.checked )
|
||||
}
|
||||
/>
|
||||
<span className="ppcp-r-select-box__checkbox-presentation">
|
||||
{ data().getImage( 'icon-checkbox.svg' ) }
|
||||
</span>
|
||||
</div>
|
||||
<PayPalCheckbox
|
||||
{ ...{
|
||||
...props,
|
||||
handleCheckboxState,
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
<div className="ppcp-r-select-box__content">
|
||||
{ data().getImage( props.icon ) }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
import data from '../../utils/data';
|
||||
|
||||
const SettingsCard = ( props ) => {
|
||||
let className = 'ppcp-r-settings-card';
|
||||
|
||||
if ( props?.className ) {
|
||||
className += ' ' + props.className;
|
||||
}
|
||||
return (
|
||||
<div className={ className }>
|
||||
<div className="ppcp-r-settings-card__header">
|
||||
{ data().getImage( props.icon ) }
|
||||
<div className="ppcp-r-settings-card__content-inner">
|
||||
<span className="ppcp-r-settings-card__title">
|
||||
{ props.title }
|
||||
</span>
|
||||
<p className="ppcp-r-settings-card__description">
|
||||
{ props.description }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ppcp-r-settings-card__content">
|
||||
{ props.children }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsCard;
|
||||
|
|
@ -1,24 +1,35 @@
|
|||
import { TabPanel } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import TabDashboard from '../Screens/Dashboard/TabDashboard';
|
||||
import TabPaymentMethods from '../Screens/Dashboard/TabPaymentMethods';
|
||||
import TabSettings from '../Screens/Dashboard/TabSettings';
|
||||
import TabStyling from '../Screens/Dashboard/TabStyling';
|
||||
|
||||
const onSelect = ( tabName ) => {
|
||||
console.log( 'Selecting tab', tabName );
|
||||
};
|
||||
const TAB_DASHBOARD = 'TabDashboard';
|
||||
const TAB_PAYMENT_METHODS = 'TabPaymentMethods';
|
||||
const TAB_SETTINGS = 'TabSettings';
|
||||
const TAB_STYLING = 'TabStyling';
|
||||
|
||||
const TabNavigation = () => {
|
||||
const tabComponents = {
|
||||
[ TAB_DASHBOARD ]: TabDashboard,
|
||||
[ TAB_PAYMENT_METHODS ]: TabPaymentMethods,
|
||||
[ TAB_SETTINGS ]: TabSettings,
|
||||
[ TAB_STYLING ]: TabStyling,
|
||||
};
|
||||
|
||||
return (
|
||||
<TabPanel
|
||||
className="my-tab-panel"
|
||||
activeClass="active-tab"
|
||||
onSelect={ onSelect }
|
||||
tabs={ [
|
||||
{
|
||||
name: 'dashboard',
|
||||
name: TAB_DASHBOARD,
|
||||
title: __( 'Dashboard', 'woocommerce-paypal-payments' ),
|
||||
className: 'ppcp-r-tab-dashboard',
|
||||
},
|
||||
{
|
||||
name: 'payment-methods',
|
||||
name: TAB_PAYMENT_METHODS,
|
||||
title: __(
|
||||
'Payment Methods',
|
||||
'woocommerce-paypal-payments'
|
||||
|
|
@ -26,18 +37,21 @@ const TabNavigation = () => {
|
|||
className: 'ppcp-r-tab-payment-methods',
|
||||
},
|
||||
{
|
||||
name: 'settings',
|
||||
name: TAB_SETTINGS,
|
||||
title: __( 'Settings', 'woocommerce-paypal-payments' ),
|
||||
className: 'ppcp-r-tab-settings',
|
||||
},
|
||||
{
|
||||
name: 'styling',
|
||||
name: TAB_STYLING,
|
||||
title: __( 'Styling', 'woocommerce-paypal-payments' ),
|
||||
className: 'ppcp-r-tab-styling',
|
||||
},
|
||||
] }
|
||||
>
|
||||
{ ( tab ) => <p>{ tab.title }</p> }
|
||||
{ ( tab ) => {
|
||||
const Component = tabComponents[ tab.name ];
|
||||
return <Component />;
|
||||
} }
|
||||
</TabPanel>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,288 @@
|
|||
import SettingsCard from '../../ReusableComponents/SettingsCard';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
PayPalCheckbox,
|
||||
handleCheckboxState,
|
||||
} from '../../ReusableComponents/Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
import data from '../../../utils/data';
|
||||
import { Button, TextControl } from '@wordpress/components';
|
||||
|
||||
const TabDashboard = () => {
|
||||
const [ todos, setTodos ] = useState( [] );
|
||||
const [ todosData, setTodosData ] = useState( todosDataDefault );
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-tab-dashboard">
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-dashboard-todo"
|
||||
icon="icon-dashboard-list.svg"
|
||||
title={ __(
|
||||
'Things to do next',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Complete these tasks to keep your store updated with the latest products and services.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<div className="ppcp-r-todo-items">
|
||||
{ todosData.map( ( todo ) => (
|
||||
<TodoItem
|
||||
name="todo_items"
|
||||
key={ todo.value }
|
||||
value={ todo.value }
|
||||
currentValue={ todos }
|
||||
changeCallback={ setTodos }
|
||||
description={ todo.description }
|
||||
changeTodos={ setTodosData }
|
||||
todosData={ todosData }
|
||||
/>
|
||||
) ) }
|
||||
</div>
|
||||
</SettingsCard>
|
||||
<SettingsCard
|
||||
className="ppcp-r-tab-dashboard-support"
|
||||
icon="icon-dashboard-support.svg"
|
||||
title={ __( 'Status', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Your PayPal account connection details, along with available products and features.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
{ featuresDefault.map( ( feature ) => {
|
||||
return (
|
||||
<FeatureItem
|
||||
key={ feature.id }
|
||||
title={ feature.title }
|
||||
description={ feature.description }
|
||||
buttons={ feature.buttons }
|
||||
/>
|
||||
);
|
||||
} ) }
|
||||
</SettingsCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TodoItem = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r-todo-item">
|
||||
<div className="ppcp-r-todo-item__inner">
|
||||
<PayPalCheckbox
|
||||
{ ...{
|
||||
...props,
|
||||
handleCheckboxState,
|
||||
} }
|
||||
/>{ ' ' }
|
||||
<p>{ props.description }</p>
|
||||
</div>
|
||||
<div
|
||||
className="ppcp-r-todo-item__close"
|
||||
onClick={ () =>
|
||||
removeTodo(
|
||||
props.value,
|
||||
props.todosData,
|
||||
props.changeTodos
|
||||
)
|
||||
}
|
||||
>
|
||||
{ data().getImage( 'icon-close.svg' ) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FeatureItem = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r-feature-item">
|
||||
<span className="ppcp-r-feature-item__title">
|
||||
{ props.title }
|
||||
{ props.status && (
|
||||
<span className="ppcp-r_feature-item__status">
|
||||
{ props.status }
|
||||
</span>
|
||||
) }
|
||||
</span>
|
||||
<p className="ppcp-r-feature-item__description">
|
||||
{ props.description }
|
||||
</p>
|
||||
<div className="ppcp-r-feature-item__buttons">
|
||||
{ props.buttons.map( ( button ) => {
|
||||
console.log( button );
|
||||
return (
|
||||
<Button key={ button.text } variant={ button.type }>
|
||||
{ button.text }
|
||||
</Button>
|
||||
);
|
||||
} ) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const removeTodo = ( todoValue, todosData, changeTodos ) => {
|
||||
changeTodos( todosData.filter( ( todo ) => todo.value !== todoValue ) );
|
||||
};
|
||||
|
||||
const todosDataDefault = [
|
||||
{
|
||||
value: 'paypal_later_messaging',
|
||||
description: __(
|
||||
'Enable Pay Later messaging',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'capture_authorized_payments',
|
||||
description: __(
|
||||
'Capture authorized payments',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'enable_google_pay',
|
||||
description: __( 'Enable Google Pay', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
value: 'paypal_shortcut',
|
||||
description: __(
|
||||
'Add PayPal shortcut to the Cart page',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 'advanced_cards',
|
||||
description: __(
|
||||
'Add Advanced Cards to Blocks Checkout',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const featuresDefault = [
|
||||
{
|
||||
id: 'save_paypal_and_venmo',
|
||||
title: __( 'Save PayPal and Venmo', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Securely save PayPal and Venmo payment methods for subscriptions or return buyers.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'primary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
{
|
||||
id: 'advanced_credit_and_debit_cards',
|
||||
title: __(
|
||||
'Advanced Credit and Debit Cards',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
'Process major credit and debit cards including Visa, Mastercard, American Express and Discover.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'primary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
{
|
||||
id: 'alternative_payment_methods',
|
||||
title: __(
|
||||
'Alternative Payment Methods',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
'Offer global, country-specific payment options for your customers.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'primary',
|
||||
text: __( 'Apply', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
{
|
||||
id: 'google_pay',
|
||||
title: __( 'Google Pay', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Let customers pay using their Google Pay wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'primary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
{
|
||||
id: 'apple_pay',
|
||||
title: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Let customers pay using their Apple Pay wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'primary',
|
||||
text: __(
|
||||
'Domain registration',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
{
|
||||
id: 'pay_later_messaging',
|
||||
title: __( 'Pay Later Messaging', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Let customers know they can buy now and pay later with PayPal. Adding this messaging can boost conversion rates and increase cart sizes by 39%¹, with no extra cost to you—plus, you get paid up front.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
buttons: [
|
||||
{
|
||||
type: 'primary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
];
|
||||
export default TabDashboard;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
const TabPaymentMethods = () => {
|
||||
return <div>PaymentMethods tab</div>;
|
||||
};
|
||||
|
||||
export default TabPaymentMethods;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
const TabSettings = () => {
|
||||
return <div>Settings tab</div>;
|
||||
};
|
||||
|
||||
export default TabSettings;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
const TabStyling = () => {
|
||||
return <div>Styling tab</div>;
|
||||
};
|
||||
|
||||
export default TabStyling;
|
||||
|
|
@ -94,7 +94,7 @@ const WelcomeForm = () => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<Button variant="secondary">
|
||||
<Button variant="primary">
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
|
|
@ -120,7 +120,7 @@ const WelcomeForm = () => {
|
|||
) }
|
||||
type="password"
|
||||
></TextControl>
|
||||
<Button variant="secondary">
|
||||
<Button variant="primary">
|
||||
{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</SettingsToggleBlock>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import Dashboard from './Dashboard/Dashboard';
|
|||
|
||||
const Settings = () => {
|
||||
const [ onboarded, setOnboarded ] = useState( true );
|
||||
|
||||
return <>{ onboarded ? <Dashboard /> : <Onboarding /> }</>;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
