mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +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
3
modules/ppcp-settings/images/icon-close.svg
Normal file
3
modules/ppcp-settings/images/icon-close.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 fill-rule="evenodd" clip-rule="evenodd" d="M12 13.0608L15.7123 16.7731L16.773 15.7124L13.0607 12.0001L16.773 8.28778L15.7123 7.22712L12 10.9394L8.28771 7.22711L7.22705 8.28777L10.9394 12.0001L7.22706 15.7124L8.28772 16.7731L12 13.0608Z" fill="#1E1E1E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 363 B |
9
modules/ppcp-settings/images/icon-dashboard-list.svg
Normal file
9
modules/ppcp-settings/images/icon-dashboard-list.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.3333 15.6667C21.3333 14.1939 22.5272 13 24 13H53.3333C54.8061 13 56 14.1939 56 15.6667V53C56 54.4728 54.8061 55.6667 53.3333 55.6667H24C22.5272 55.6667 21.3333 54.4728 21.3333 53V15.6667Z" fill="#DD7F57"/>
|
||||
<path d="M8 23.6667C8 22.1939 9.19391 21 10.6667 21H37.3333C38.8061 21 40 22.1939 40 23.6667V47.6667C40 49.1394 38.8061 50.3333 37.3333 50.3333H10.6667C9.19391 50.3333 8 49.1394 8 47.6667V23.6667Z" fill="#5BBBFC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3333 50.3333V21H37.3333C38.8061 21 40 22.1939 40 23.6667V47.6667C40 49.1394 38.8061 50.3333 37.3333 50.3333H21.3333Z" fill="#FAF8F5"/>
|
||||
<path d="M45.3333 9C45.3333 5.3181 42.3486 2.33333 38.6667 2.33333C34.9848 2.33333 32 5.3181 32 8.99999V10.3333H29.3333C27.8606 10.3333 26.6667 11.5272 26.6667 13V15.6667C26.6667 17.1394 27.8606 18.3333 29.3333 18.3333H48C49.4728 18.3333 50.6667 17.1394 50.6667 15.6667V13C50.6667 11.5272 49.4728 10.3333 48 10.3333H45.3333V9Z" fill="#4F2825"/>
|
||||
<path d="M41.3333 7.66666C41.3333 9.13942 40.1394 10.3333 38.6667 10.3333C37.1939 10.3333 36 9.13942 36 7.66666C36 6.1939 37.1939 4.99999 38.6667 4.99999C40.1394 4.99999 41.3333 6.1939 41.3333 7.66666Z" fill="#FAF8F5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.3923 24.6433C36.6812 24.8716 36.7304 25.2908 36.5021 25.5797L30.2772 33.4581C30.0452 33.7517 29.617 33.7969 29.3288 33.5582L25.1025 30.0571C24.8189 29.8222 24.7795 29.4019 25.0144 29.1184L25.6523 28.3483C25.8872 28.0648 26.3075 28.0253 26.591 28.2602L28.9784 30.238C29.2666 30.4767 29.6948 30.4315 29.9268 30.1379L34.6713 24.1331C34.8996 23.8442 35.3188 23.7951 35.6077 24.0233L36.3923 24.6433Z" fill="#001C64"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.3923 37.31C36.6812 37.5382 36.7304 37.9575 36.5021 38.2464L30.2772 46.1248C30.0452 46.4184 29.617 46.4636 29.3288 46.2249L25.1025 42.7237C24.8189 42.4888 24.7795 42.0686 25.0144 41.785L25.6523 41.015C25.8872 40.7314 26.3075 40.692 26.591 40.9269L28.9784 42.9046C29.2666 43.1434 29.6948 43.0982 29.9268 42.8045L34.6713 36.7998C34.8996 36.5109 35.3188 36.4618 35.6077 36.69L36.3923 37.31Z" fill="#001C64"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
6
modules/ppcp-settings/images/icon-dashboard-status.svg
Normal file
6
modules/ppcp-settings/images/icon-dashboard-status.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40 37.3336C40 38.8064 38.8061 40.0003 37.3333 40.0003L10.6667 40.0003C9.19391 40.0003 8 38.8064 8 37.3336L8 10.667C8 9.19421 9.19391 8.00031 10.6667 8.00031L37.3333 8.00031C38.8061 8.00031 40 9.19421 40 10.667L40 37.3336Z" fill="#6FC400"/>
|
||||
<path d="M16 36.0003C16 24.9546 24.9543 16.0003 36 16.0003C47.0457 16.0003 56 24.9546 56 36.0003C56 47.046 47.0457 56.0003 36 56.0003C24.9543 56.0003 16 47.046 16 36.0003Z" fill="#5BBBFC"/>
|
||||
<path d="M36 16.0003C24.9543 16.0003 16 24.9546 16 36.0003C16 37.3702 16.1377 38.7079 16.4001 40.0003H37.3333C38.8061 40.0003 40 38.8064 40 37.3336L40 16.4004C38.7076 16.138 37.3699 16.0003 36 16.0003Z" fill="#FAF8F5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.8757 25.7339C35.1586 25.9697 35.1968 26.39 34.9611 26.6729L28.3707 34.5814C28.1197 34.8825 27.6644 34.9032 27.3872 34.626L23.8047 31.0436C23.5444 30.7832 23.5444 30.3611 23.8047 30.1007L24.5118 29.3936C24.7722 29.1333 25.1943 29.1333 25.4547 29.3936L27.2304 31.1693C27.5076 31.4465 27.9629 31.4259 28.2139 31.1247L33.1686 25.1791C33.4043 24.8963 33.8247 24.8581 34.1075 25.0938L34.8757 25.7339Z" fill="#001C64"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
9
modules/ppcp-settings/images/icon-dashboard-support.svg
Normal file
9
modules/ppcp-settings/images/icon-dashboard-support.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40.5 8.00098L11.1667 8.00098C9.69391 8.00098 8.5 9.19488 8.5 10.6676L8.5 43.7248C8.5 44.3188 9.21809 44.6162 9.63807 44.1962L15.7189 38.1154C16.219 37.6153 16.8973 37.3343 17.6046 37.3343H40.5C41.9728 37.3343 43.1667 36.1404 43.1667 34.6676V10.6676C43.1667 9.19489 41.9728 8.00098 40.5 8.00098Z" fill="#5BBBFC"/>
|
||||
<path d="M24.5 18.6676L53.8333 18.6676C55.3061 18.6676 56.5 19.8616 56.5 21.3343V54.7553C56.5 55.2878 55.9066 55.6054 55.4635 55.31L49.1718 51.1155C48.7337 50.8235 48.2191 50.6676 47.6926 50.6676H24.5C23.0272 50.6676 21.8333 49.4737 21.8333 48.001L21.8333 21.3343C21.8333 19.8616 23.0272 18.6676 24.5 18.6676Z" fill="#6FC400"/>
|
||||
<path d="M43.1667 18.6676H24.5C23.0272 18.6676 21.8333 19.8616 21.8333 21.3343L21.8333 37.3343L40.5 37.3343C41.9728 37.3343 43.1667 36.1404 43.1667 34.6676V18.6676Z" fill="#FAF8F5"/>
|
||||
<path d="M52.5 27.1676C52.5 27.5358 52.2015 27.8343 51.8333 27.8343H47.8333C47.4651 27.8343 47.1667 27.5358 47.1667 27.1676V26.1676C47.1667 25.7995 47.4651 25.501 47.8333 25.501H51.8333C52.2015 25.501 52.5 25.7995 52.5 26.1676V27.1676Z" fill="#005400"/>
|
||||
<path d="M52.5 35.1676C52.5 35.5358 52.2015 35.8343 51.8333 35.8343H47.8333C47.4651 35.8343 47.1667 35.5358 47.1667 35.1676V34.1676C47.1667 33.7995 47.4651 33.501 47.8333 33.501H51.8333C52.2015 33.501 52.5 33.7995 52.5 34.1676V35.1676Z" fill="#005400"/>
|
||||
<path d="M51.8333 43.8343C52.2015 43.8343 52.5 43.5358 52.5 43.1676V42.1676C52.5 41.7995 52.2015 41.501 51.8333 41.501H47.8333C47.4651 41.501 47.1667 41.7995 47.1667 42.1676V43.1676C47.1667 43.5358 47.4651 43.8343 47.8333 43.8343H51.8333Z" fill="#005400"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.2174 24.321C38.5003 24.5568 38.5385 24.9771 38.3028 25.26L31.7124 33.1684C31.4614 33.4696 31.0061 33.4903 30.7289 33.2131L27.1464 29.6306C26.8861 29.3703 26.8861 28.9482 27.1464 28.6878L27.8535 27.9807C28.1139 27.7204 28.536 27.7204 28.7964 27.9807L30.5721 29.7564C30.8493 30.0336 31.3046 30.013 31.5556 29.7118L36.5103 23.7662C36.746 23.4834 37.1664 23.4452 37.4492 23.6809L38.2174 24.321Z" fill="#001C64"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,4 +1,5 @@
|
|||
$color-white: #fff;
|
||||
$color-black: #000;
|
||||
$color-blue: #1D35B4;
|
||||
$color-blueberry: #3858E9;
|
||||
$color-gray-900: #1E1E1E;
|
||||
|
|
@ -6,6 +7,7 @@ $color-gray-800: #2F2F2F;
|
|||
$color-gray-700: #757575;
|
||||
$color-gray-600: #949494;
|
||||
$color-gray-500: #BBBBBB;
|
||||
$color-gray-400: #CCCCCC;
|
||||
$color-gray-200: #E0E0E0;
|
||||
$color-gray: #646970;
|
||||
|
||||
|
|
|
|||
|
|
@ -24,11 +24,14 @@ button.components-button {
|
|||
@include font(13, 16, 500);
|
||||
}
|
||||
|
||||
&.is-secondary {
|
||||
padding: 6px 12px;
|
||||
@include font(13, 20, 500);
|
||||
color: $color-white;
|
||||
border: none;
|
||||
&.is-secondary:not(:disabled) {
|
||||
border-color:$color-blueberry;
|
||||
background-color:$color-white;
|
||||
color:$color-blueberry;
|
||||
&:hover{
|
||||
background-color:$color-white;
|
||||
background:none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-tertiary {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
.ppcp-r {
|
||||
|
||||
&__radio-value {
|
||||
@include hide-input-field;
|
||||
|
||||
&:checked {
|
||||
+ .ppcp-r__radio-presentation {
|
||||
background: $color-white;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 6px solid $color-blueberry;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__checkbox-value {
|
||||
@include hide-input-field;
|
||||
|
||||
&:not(:checked) + .ppcp-r__checkbox-presentation img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .ppcp-r__checkbox-presentation {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
|
||||
img {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-presentation {
|
||||
@include fake-input-field(20px);
|
||||
}
|
||||
|
||||
&__checkbox-presentation {
|
||||
@include fake-input-field(2px);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,14 +4,15 @@
|
|||
width: 652px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding:0 16px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&-container {
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
&--settings{
|
||||
|
||||
&--settings {
|
||||
max-width: 938px;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,4 +21,32 @@
|
|||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
&-settings-card {
|
||||
background-color: $color-white;
|
||||
padding: 48px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px 0 #0000001A;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 2px solid $color-gray-700;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(16, 24, 600);
|
||||
color: $color-blueberry;
|
||||
margin:0 0 4px 0;
|
||||
display: block;
|
||||
}
|
||||
&__description{
|
||||
@include font(14, 20, 400);
|
||||
color:$color-gray-800;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
.components-tab-panel__tabs {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin:0 0 48px 0;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $color-gray-400;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 16px 20px;
|
||||
@include font(13, 16, 400);
|
||||
color: $color-gray-900;
|
||||
|
||||
&.active-tab {
|
||||
font-weight: 600;
|
||||
box-shadow: 0px -4px 0px 0px $color-blueberry inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
.ppcp-r-tab-dashboard-todo {
|
||||
margin: 0 0 48px 0;
|
||||
}
|
||||
|
||||
.ppcp-r-todo-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $color-gray-400;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font(14, 20, 400);
|
||||
}
|
||||
|
||||
&__inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
&__close {
|
||||
margin-left: auto;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $color-blueberry;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-feature-item {
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid $color-gray-400;
|
||||
|
||||
&__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(14, 20, 400);
|
||||
color: $color-gray-800;
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -34,6 +34,12 @@
|
|||
.components-base-control__field {
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
.ppcp-r-toggle-block__toggled-content > button{
|
||||
padding: 6px 12px;
|
||||
@include font(13, 20, 500);
|
||||
color: $color-white;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-welcome-features {
|
||||
|
|
@ -81,3 +87,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@
|
|||
@import './components/reusable-components/settings-wrapper';
|
||||
@import './components/reusable-components/select-box';
|
||||
@import './components/reusable-components/navigation';
|
||||
@import './components/reusable-components/tabs';
|
||||
@import './components/reusable-components/fields';
|
||||
@import './components/screens/onboarding/step-welcome';
|
||||
@import './components/screens/onboarding/step-business';
|
||||
@import './components/screens/onboarding/step-products';
|
||||
@import './components/screens/dashboard/tab-dashboard';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 /> }</>;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ const path = require( 'path' );
|
|||
|
||||
module.exports = {
|
||||
...defaultConfig,
|
||||
cache: false,
|
||||
...{
|
||||
entry: {
|
||||
index: path.resolve( process.cwd(), 'resources/js', 'index.js' ),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
