mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
Implements dashboard layout
This commit is contained in:
inpsyde-maticluznar
parent
2afc530af5
commit
8b67aa4265
9 changed files with 368 additions and 55 deletions
3
modules/ppcp-settings/images/icon-arrow-down.svg
Normal file
3
modules/ppcp-settings/images/icon-arrow-down.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5 11.6005L12 16.0005L6.5 11.6005L7.4 10.4005L12 14.0005L16.5 10.4005L17.5 11.6005Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 215 B |
4
modules/ppcp-settings/images/icon-refresh.svg
Normal file
4
modules/ppcp-settings/images/icon-refresh.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.49994 15.3753L5.24993 12.7503M5.24993 12.7503L7.49994 10.5003M5.24993 12.7503C7.74993 12.7503 10.3516 12.7503 12.7516 12.7503C15.1521 12.7503 15.0014 9.37531 15.0016 8.25031" stroke="#3858E9" stroke-width="1.5"/>
|
||||
<path d="M10.5 2.25031L12.7535 4.87531M12.7535 4.87531L10.5 7.12531M12.7535 4.87531C10.2535 4.87531 7.65183 4.87531 5.25183 4.87531C2.85131 4.87531 3.00199 8.25031 3.00183 9.37531" stroke="#3858E9" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 547 B |
|
|
@ -1,4 +1,4 @@
|
|||
button.components-button {
|
||||
button.components-button, a.components-button {
|
||||
&.is-primary, &.is-secondary {
|
||||
&:not(:disabled) {
|
||||
background-color: $color-blueberry;
|
||||
|
|
@ -22,6 +22,7 @@ button.components-button {
|
|||
|
||||
&.is-primary {
|
||||
@include font(13, 16, 500);
|
||||
color:$color-white;
|
||||
}
|
||||
|
||||
&.is-secondary:not(:disabled) {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@
|
|||
padding: 48px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px 0 #0000001A;
|
||||
@media screen and (max-width: 480px) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
|
|
@ -40,13 +43,14 @@
|
|||
&__title {
|
||||
@include font(16, 24, 600);
|
||||
color: $color-blueberry;
|
||||
margin:0 0 4px 0;
|
||||
margin: 0 0 4px 0;
|
||||
display: block;
|
||||
}
|
||||
&__description{
|
||||
|
||||
&__description {
|
||||
@include font(14, 20, 400);
|
||||
color:$color-gray-800;
|
||||
margin:0;
|
||||
color: $color-gray-800;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
.ppcp-r-title-badge{
|
||||
@include font(12, 16, 400);
|
||||
margin-left:12px;
|
||||
padding:4px 8px;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
&--positive{
|
||||
color:#005C12;
|
||||
background-color: #EDFAEF;
|
||||
}
|
||||
&--negative{
|
||||
color:#5c0000;
|
||||
background-color: #faeded;
|
||||
}
|
||||
}
|
||||
|
|
@ -64,4 +64,119 @@
|
|||
display: flex;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
&__notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-connection-status {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
padding-bottom: 48px;
|
||||
margin-bottom: 48px;
|
||||
border-bottom: 2px solid $color-gray-500;
|
||||
|
||||
&__status-status {
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
strong {
|
||||
@include font(14, 20, 700);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
&__show-all-data {
|
||||
margin-left: 12px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&__status-label {
|
||||
span {
|
||||
@include font(12, 16, 400);
|
||||
color: $color-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
&__data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
strong {
|
||||
@include font(14, 20, 600);
|
||||
color: $color-gray-800;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span {
|
||||
@include font(14, 20, 400);
|
||||
color: $color-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
flex-wrap: wrap;
|
||||
&__status {
|
||||
width: 100%;
|
||||
}
|
||||
&__status-row {
|
||||
flex-wrap: wrap;
|
||||
strong{
|
||||
width: 100%;
|
||||
}
|
||||
span{
|
||||
word-break:break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-feature-refresh {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
|
||||
&-title {
|
||||
@include font(16, 20, 700);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font(12, 20, 400);
|
||||
color: $color-gray-700;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
@import './components/reusable-components/navigation';
|
||||
@import './components/reusable-components/tabs';
|
||||
@import './components/reusable-components/fields';
|
||||
@import './components/reusable-components/title-badge';
|
||||
@import './components/screens/onboarding/step-welcome';
|
||||
@import './components/screens/onboarding/step-business';
|
||||
@import './components/screens/onboarding/step-products';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
const TitleBadge = ( { text, type } ) => {
|
||||
const className = 'ppcp-r-title-badge ' + `ppcp-r-title-badge--${ type }`;
|
||||
return <span className={ className }>{ text }</span>;
|
||||
};
|
||||
|
||||
export const TITLE_BADGE_POSITIVE = 'positive';
|
||||
export const TITLE_BADGE_NEGATIVE = 'negative';
|
||||
export default TitleBadge;
|
||||
|
|
@ -6,41 +6,58 @@ import {
|
|||
} from '../../ReusableComponents/Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
import data from '../../../utils/data';
|
||||
import { Button, TextControl } from '@wordpress/components';
|
||||
import { Button } from '@wordpress/components';
|
||||
import TitleBadge, {
|
||||
TITLE_BADGE_NEGATIVE,
|
||||
TITLE_BADGE_POSITIVE,
|
||||
} from '../../ReusableComponents/TitleBadge';
|
||||
|
||||
const TabDashboard = () => {
|
||||
const [ todos, setTodos ] = useState( [] );
|
||||
const [ todosData, setTodosData ] = useState( todosDataDefault );
|
||||
const [ connectionData, setConnectionData ] = useState( {
|
||||
connectionStatus: true,
|
||||
showAllData: false,
|
||||
email: 'bt_us@woocommerce.com',
|
||||
merchantId: 'AT45V2DGMKLRY',
|
||||
clientId: 'BAARTJLxtUNN4d2GMB6Eut3suMDYad72xQA-FntdIFuJ6FmFJITxAY8',
|
||||
} );
|
||||
|
||||
const showAllData = () => {
|
||||
setConnectionData( { ...connectionData, showAllData: true } );
|
||||
};
|
||||
|
||||
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>
|
||||
{ todosData.length > 0 && (
|
||||
<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"
|
||||
|
|
@ -50,14 +67,14 @@ const TabDashboard = () => {
|
|||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<ConnectionStatus
|
||||
connectionData={ connectionData }
|
||||
showAllData={ showAllData }
|
||||
/>
|
||||
<FeaturesRefresh />
|
||||
{ featuresDefault.map( ( feature ) => {
|
||||
return (
|
||||
<FeatureItem
|
||||
key={ feature.id }
|
||||
title={ feature.title }
|
||||
description={ feature.description }
|
||||
buttons={ feature.buttons }
|
||||
/>
|
||||
<FeatureItem key={ feature.id } feature={ feature } />
|
||||
);
|
||||
} ) }
|
||||
</SettingsCard>
|
||||
|
|
@ -65,6 +82,110 @@ const TabDashboard = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const ConnectionStatus = ( { connectionData, showAllData } ) => {
|
||||
return (
|
||||
<div className="ppcp-r-connection-status">
|
||||
<div className="ppcp-r-connection-status__status">
|
||||
<div className="ppcp-r-connection-status__status-status">
|
||||
<strong>
|
||||
{ __( 'Connection', 'woocommerce-paypal-payments' ) }
|
||||
</strong>
|
||||
{ connectionData.connectionStatus ? (
|
||||
<TitleBadge
|
||||
type={ TITLE_BADGE_POSITIVE }
|
||||
text={ __(
|
||||
'Activated',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
) : (
|
||||
<TitleBadge
|
||||
type={ TITLE_BADGE_NEGATIVE }
|
||||
text={ __(
|
||||
'Not Activated',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
<div className="ppcp-r-connection-status__status-label">
|
||||
<span>
|
||||
{ __(
|
||||
'PayPal Account Details',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{ connectionData.connectionStatus && (
|
||||
<div className="ppcp-r-connection-status__data">
|
||||
<div className="ppcp-r-connection-status__status-row">
|
||||
<strong>
|
||||
{ __(
|
||||
'Email address:',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</strong>
|
||||
<span>{ connectionData.email }</span>
|
||||
{ ! connectionData.showAllData && (
|
||||
<span onClick={ () => showAllData() }>
|
||||
{ data().getImage(
|
||||
'icon-arrow-down.svg',
|
||||
'ppcp-r-connection-status__show-all-data'
|
||||
) }
|
||||
</span>
|
||||
) }
|
||||
</div>
|
||||
{ connectionData.showAllData && (
|
||||
<>
|
||||
<div className="ppcp-r-connection-status__status-row">
|
||||
<strong>
|
||||
{ __(
|
||||
'Merchant ID:',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</strong>
|
||||
<span>{ connectionData.merchantId }</span>
|
||||
</div>
|
||||
<div className="ppcp-r-connection-status__status-row">
|
||||
<strong>
|
||||
{ __(
|
||||
'Client ID:',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</strong>
|
||||
<span>{ connectionData.clientId }</span>
|
||||
</div>
|
||||
</>
|
||||
) }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FeaturesRefresh = () => {
|
||||
return (
|
||||
<div className="ppcp-r-feature-refresh">
|
||||
<div className="ppcp-r-feature-refresh__content">
|
||||
<span className="ppcp-r-feature-refresh__content-title">
|
||||
{ __( 'Features', 'woocommerce-paypal-payments' ) }
|
||||
</span>
|
||||
<p>
|
||||
{ __(
|
||||
'After making changes to your PayPal account, click Refresh to update your store features.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="tertiary">
|
||||
{ data().getImage( 'icon-refresh.svg' ) }
|
||||
{ __( 'Refresh', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TodoItem = ( props ) => {
|
||||
return (
|
||||
<div className="ppcp-r-todo-item">
|
||||
|
|
@ -93,25 +214,55 @@ const TodoItem = ( props ) => {
|
|||
);
|
||||
};
|
||||
|
||||
const FeatureItem = ( props ) => {
|
||||
const FeatureItem = ( { feature } ) => {
|
||||
const printNotes = () => {
|
||||
if ( ! feature?.notes ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if ( Array.isArray( feature.notes ) && feature.notes.length === 0 ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<br />
|
||||
<br />
|
||||
<span className="ppcp-r-feature-item__notes">
|
||||
{ feature.notes.map( ( note, index ) => {
|
||||
return <span key={ index }>{ note }</span>;
|
||||
} ) }
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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>
|
||||
{ feature.title }
|
||||
{ feature?.featureStatus && (
|
||||
<TitleBadge
|
||||
text={ __(
|
||||
'Activated',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
type={ TITLE_BADGE_POSITIVE }
|
||||
/>
|
||||
) }
|
||||
</span>
|
||||
<p className="ppcp-r-feature-item__description">
|
||||
{ props.description }
|
||||
{ feature.description }
|
||||
{ printNotes() }
|
||||
</p>
|
||||
<div className="ppcp-r-feature-item__buttons">
|
||||
{ props.buttons.map( ( button ) => {
|
||||
console.log( button );
|
||||
{ feature.buttons.map( ( button ) => {
|
||||
return (
|
||||
<Button key={ button.text } variant={ button.type }>
|
||||
<Button
|
||||
href={ button.url }
|
||||
key={ button.text }
|
||||
variant={ button.type }
|
||||
>
|
||||
{ button.text }
|
||||
</Button>
|
||||
);
|
||||
|
|
@ -172,13 +323,14 @@ const featuresDefault = [
|
|||
{
|
||||
type: 'primary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
{
|
||||
id: 'advanced_credit_and_debit_cards',
|
||||
|
|
@ -186,6 +338,7 @@ const featuresDefault = [
|
|||
'Advanced Credit and Debit Cards',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
featureStatus: true,
|
||||
description: __(
|
||||
'Process major credit and debit cards including Visa, Mastercard, American Express and Discover.',
|
||||
'woocommerce-paypal-payments'
|
||||
|
|
@ -194,13 +347,14 @@ const featuresDefault = [
|
|||
{
|
||||
type: 'primary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
{
|
||||
id: 'alternative_payment_methods',
|
||||
|
|
@ -216,13 +370,14 @@ const featuresDefault = [
|
|||
{
|
||||
type: 'primary',
|
||||
text: __( 'Apply', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
{
|
||||
id: 'google_pay',
|
||||
|
|
@ -231,17 +386,22 @@ const featuresDefault = [
|
|||
'Let customers pay using their Google Pay wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
featureStatus: true,
|
||||
buttons: [
|
||||
{
|
||||
type: 'primary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
notes: [
|
||||
__( '¹PayPal Q2 Earnings-2021.', 'woocommerce-paypal-payments' ),
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'apple_pay',
|
||||
|
|
@ -257,13 +417,14 @@ const featuresDefault = [
|
|||
'Domain registration',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
{
|
||||
id: 'pay_later_messaging',
|
||||
|
|
@ -276,13 +437,14 @@ const featuresDefault = [
|
|||
{
|
||||
type: 'primary',
|
||||
text: __( 'Configure', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
type: 'secondary',
|
||||
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
notes: [ __( '', 'woocommerce-paypal-payments' ) ],
|
||||
},
|
||||
];
|
||||
export default TabDashboard;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
