mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
Merge pull request #2763 from woocommerce/PCP-3816-Create-payment-placeholder-page-in-new-settings-module
Create payment placeholder page in new settings module (3816)
This commit is contained in:
Emili Castells
GitHub
commit
9afb9de92c
25 changed files with 727 additions and 1 deletions
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 568 B After Width: | Height: | Size: 568 B |
9
modules/ppcp-settings/images/icon-checkout-advanced.svg
Normal file
9
modules/ppcp-settings/images/icon-checkout-advanced.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M55.5833 43.4999C55.5833 44.8346 54.5013 45.9166 53.1666 45.9166L19.3333 45.9166C17.9986 45.9166 16.9166 44.8346 16.9166 43.4999L16.9166 26.5833C16.9166 25.2486 17.9986 24.1666 19.3333 24.1666L53.1666 24.1666C54.5013 24.1666 55.5833 25.2486 55.5833 26.5833V43.4999Z" fill="#5BBBFC"/>
|
||||
<path d="M2.41663 14.4999C2.41663 13.1652 3.4986 12.0833 4.83329 12.0833H33.8333C35.168 12.0833 36.25 13.1652 36.25 14.4999V33.8333C36.25 35.1679 35.168 36.2499 33.8333 36.2499H4.83329C3.49861 36.2499 2.41663 35.1679 2.41663 33.8333V14.4999Z" fill="#DD7F57"/>
|
||||
<path d="M36.25 24.1666V33.8333C36.25 35.1679 35.168 36.2499 33.8333 36.2499H16.9166L16.9166 26.5833C16.9166 25.2486 17.9986 24.1666 19.3333 24.1666L36.25 24.1666Z" fill="#FAF8F5"/>
|
||||
<path d="M27.7916 35.0416C27.7916 30.3702 31.5785 26.5833 36.25 26.5833C40.9214 26.5833 44.7083 30.3702 44.7083 35.0416C44.7083 39.713 40.9214 43.4999 36.25 43.4999C31.5785 43.4999 27.7916 39.713 27.7916 35.0416Z" fill="#001C64"/>
|
||||
<path d="M2.41663 16.9166H36.25V21.7499H2.41663V16.9166Z" fill="#4F2825"/>
|
||||
<path d="M14.5 31.7187C14.5 32.0523 14.2295 32.3228 13.8958 32.3228H5.43746C5.10379 32.3228 4.83329 32.0523 4.83329 31.7187V30.8124C4.83329 30.4787 5.10379 30.2083 5.43746 30.2083H13.8958C14.2295 30.2083 14.5 30.4787 14.5 30.8124V31.7187Z" fill="#4F2825"/>
|
||||
<path d="M27.7916 35.0416C27.7916 30.3702 31.5785 26.5833 36.25 26.5833V33.8333C36.25 35.1679 35.168 36.2499 33.8333 36.2499H27.8773C27.8208 35.8553 27.7916 35.4518 27.7916 35.0416Z" fill="#4F2825"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -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.3334 27.0004C21.3334 25.5277 22.5273 24.3338 24.0001 24.3338H58.6667C60.1395 24.3338 61.3334 25.5277 61.3334 27.0004V48.3338C61.3334 49.8065 60.1395 51.0004 58.6667 51.0004H24.0001C22.5273 51.0004 21.3334 49.8065 21.3334 48.3338V27.0004Z" fill="#6FC400"/>
|
||||
<path d="M2.66675 16.3338C2.66675 14.861 3.86066 13.6671 5.33341 13.6671H40.0001C41.4728 13.6671 42.6667 14.861 42.6667 16.3338V37.6671C42.6667 39.1399 41.4728 40.3338 40.0001 40.3338H5.33341C3.86066 40.3338 2.66675 39.1399 2.66675 37.6671V16.3338Z" fill="#5BBBFC"/>
|
||||
<path d="M42.6667 24.3338V37.6671C42.6667 39.1399 41.4728 40.3338 40.0001 40.3338H21.3334V27.0004C21.3334 25.5277 22.5273 24.3338 24.0001 24.3338H42.6667Z" fill="#FAF8F5"/>
|
||||
<path d="M61.3334 29.6671H42.6667V35.0004H61.3334V29.6671Z" fill="#005400"/>
|
||||
<path d="M36.6667 46.6671C37.0349 46.6671 37.3334 46.3686 37.3334 46.0004V45.0004C37.3334 44.6323 37.0349 44.3338 36.6667 44.3338H24.6667C24.2986 44.3338 24.0001 44.6323 24.0001 45.0004V46.0004C24.0001 46.3686 24.2986 46.6671 24.6667 46.6671H36.6667Z" fill="#005400"/>
|
||||
<path d="M8.66675 19.0004C8.29856 19.0004 8.00008 19.2989 8.00008 19.6671V26.3338C8.00008 26.702 8.29856 27.0004 8.66675 27.0004H15.3334C15.7016 27.0004 16.0001 26.702 16.0001 26.3338V19.6671C16.0001 19.2989 15.7016 19.0004 15.3334 19.0004H8.66675Z" fill="#001C64"/>
|
||||
<path d="M36.9312 29.6514C37.1625 29.3649 37.1177 28.9451 36.8312 28.7139L36.053 28.0858C35.7665 27.8546 35.3468 27.8994 35.1155 28.1859L30.8233 33.5038C30.5842 33.8001 30.1459 33.8363 29.8614 33.5833L28.0489 31.9712C27.7738 31.7265 27.3524 31.7511 27.1077 32.0263L26.4431 32.7735C26.1984 33.0486 26.2231 33.47 26.4982 33.7147L30.1398 36.9535C30.4242 37.2066 30.8625 37.1704 31.1016 36.8741L36.9312 29.6514Z" fill="#001C64"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -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="M61.3334 48.0003C61.3334 49.473 60.1395 50.667 58.6667 50.667L21.3334 50.6669C19.8607 50.6669 18.6667 49.473 18.6667 48.0003L18.6667 29.3336C18.6667 27.8609 19.8607 26.667 21.3334 26.667L58.6667 26.667C60.1395 26.667 61.3334 27.8609 61.3334 29.3336V48.0003Z" fill="#5BBBFC"/>
|
||||
<path d="M2.66675 16.0003C2.66675 14.5275 3.86066 13.3336 5.33341 13.3336H37.3334C38.8062 13.3336 40.0001 14.5275 40.0001 16.0003V37.3336C40.0001 38.8064 38.8062 40.0003 37.3334 40.0003H5.33342C3.86066 40.0003 2.66675 38.8064 2.66675 37.3336V16.0003Z" fill="#DD7F57"/>
|
||||
<path d="M40.0001 26.667V37.3336C40.0001 38.8064 38.8062 40.0003 37.3334 40.0003H18.6667L18.6667 29.3336C18.6667 27.8609 19.8607 26.667 21.3334 26.667L40.0001 26.667Z" fill="#FAF8F5"/>
|
||||
<path d="M30.6667 38.667C30.6667 33.5123 34.8454 29.3336 40.0001 29.3336C45.1547 29.3336 49.3334 33.5123 49.3334 38.667C49.3334 43.8216 45.1547 48.0003 40.0001 48.0003C34.8454 48.0003 30.6667 43.8216 30.6667 38.667Z" fill="#001C64"/>
|
||||
<path d="M2.66675 18.667H40.0001V24.0003H2.66675V18.667Z" fill="#4F2825"/>
|
||||
<path d="M16.0001 35.0003C16.0001 35.3685 15.7016 35.667 15.3334 35.667H6.00008C5.63189 35.667 5.33341 35.3685 5.33341 35.0003V34.0003C5.33341 33.6321 5.63189 33.3336 6.00008 33.3336H15.3334C15.7016 33.3336 16.0001 33.6321 16.0001 34.0003V35.0003Z" fill="#4F2825"/>
|
||||
<path d="M30.6667 38.667C30.6667 33.5123 34.8454 29.3336 40.0001 29.3336V37.3336C40.0001 38.8064 38.8062 40.0003 37.3334 40.0003H30.7613C30.699 39.5648 30.6667 39.1196 30.6667 38.667Z" fill="#4F2825"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
8
modules/ppcp-settings/images/icon-checkout-standard.svg
Normal file
8
modules/ppcp-settings/images/icon-checkout-standard.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M50.75 48.3333C50.75 49.668 49.668 50.75 48.3333 50.75L14.5 50.75C13.1653 50.75 12.0833 49.668 12.0833 48.3333L12.0833 14.5C12.0833 13.1653 13.1653 12.0833 14.5 12.0833L48.3333 12.0833C49.668 12.0833 50.75 13.1653 50.75 14.5L50.75 48.3333Z" fill="#5BBBFC"/>
|
||||
<path d="M45.9167 43.5C45.9167 44.8347 44.8347 45.9167 43.5 45.9167L9.66666 45.9167C8.33198 45.9167 7.25 44.8347 7.25 43.5L7.25 9.66667C7.25 8.33198 8.33198 7.25 9.66667 7.25L43.5 7.25C44.8347 7.25 45.9167 8.33198 45.9167 9.66667L45.9167 43.5Z" fill="#6FC400"/>
|
||||
<path d="M45.9167 12.0833V43.5C45.9167 44.8347 44.8347 45.9167 43.5 45.9167L12.0833 45.9167L12.0833 14.5C12.0833 13.1653 13.1653 12.0833 14.5 12.0833H45.9167Z" fill="#FAF8F5"/>
|
||||
<path d="M26.8638 21.6503C26.7443 21.7523 26.665 21.8937 26.6404 22.0491L24.3562 36.5038H20.3333C20.2478 36.504 20.1633 36.4852 20.086 36.4487C20.0087 36.4122 19.9405 36.3588 19.8864 36.2926C19.8322 36.2263 19.7935 36.1488 19.7731 36.0657C19.7526 35.9826 19.7509 35.896 19.7681 35.8122L22.6558 17.5222C22.6801 17.3594 22.76 17.2101 22.8819 17.0997C23.0039 16.9893 23.1603 16.9246 23.3245 16.9167H30.2633C33.2628 16.9015 35.8475 19.0533 35.8375 21.9633C35.0658 21.5647 34.0719 21.4928 33.0285 21.4928H27.2926C27.1355 21.4925 26.9834 21.5483 26.8638 21.6503Z" fill="#001C64"/>
|
||||
<path d="M26.8482 28.8223L27.7143 23.3339C27.7621 23.0432 27.9243 22.7524 28.3021 22.7524H33.1428C34.0632 22.7607 35.0331 22.8438 35.7514 23.2194C35.7473 23.4716 35.7288 23.7232 35.6962 23.9733C35.4865 25.3236 34.8016 26.5545 33.765 27.4437C32.7284 28.3329 31.4084 28.8218 30.0433 28.8223H26.8482Z" fill="#001C64"/>
|
||||
<path d="M36.9243 23.8817C36.9174 24.1202 36.8966 24.3581 36.8621 24.5942C36.3674 27.7527 33.6214 30.0834 30.4302 30.0834H27.2647C27.0937 30.0835 26.9284 30.1446 26.7984 30.2558C26.6684 30.3671 26.5823 30.521 26.5556 30.6901L25.0157 40.409C25.0026 40.4923 25.0077 40.5774 25.0307 40.6585C25.0536 40.7397 25.0938 40.8148 25.1486 40.8789C25.2033 40.943 25.2713 40.9944 25.3478 41.0297C25.4243 41.0649 25.5075 41.0832 25.5917 41.0832H28.9829C29.1516 41.0831 29.3148 41.0237 29.4441 40.9152C29.5733 40.8067 29.6603 40.6562 29.6898 40.49L30.5289 35.2197C30.5535 35.0642 30.6327 34.9227 30.7522 34.8206C30.8718 34.7184 31.0239 34.6624 31.1811 34.6625H33.1979C36.3891 34.6625 39.1351 32.3314 39.6299 29.1733C39.9803 26.9314 38.8529 24.8914 36.9243 23.8817Z" fill="#001C64"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,48 @@
|
|||
.ppcp-r-payment-method-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $color-gray-400;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
&__checkbox-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ppcp-r__checkbox {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon-wrap {
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-right: 24px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-black;
|
||||
margin: 0 0 8px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: auto;
|
||||
@include font(13, 20, 400);
|
||||
padding: 6px 12px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
.ppcp-r-modal {
|
||||
@import "../../global";
|
||||
@import './button';
|
||||
@import './fields';
|
||||
|
||||
&__container {
|
||||
max-width: 100%;
|
||||
width: 400px;
|
||||
|
||||
&--small {
|
||||
padding: 0 50px;
|
||||
@media screen and (max-width: 480px){
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.components-modal {
|
||||
&__header {
|
||||
height: 52px;
|
||||
padding: 20px 20px 0 20px;
|
||||
|
||||
button {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 48px;
|
||||
padding: 0 50px 48px 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid $color-gray-500;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__inverted-toggle-control {
|
||||
.components-form-toggle {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__field-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
&--save {
|
||||
margin-top: 24px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
|
||||
input[type='text'] {
|
||||
padding: 7px 11px;
|
||||
@include font(14, 20, 400);
|
||||
margin: 0;
|
||||
border-color: $color-gray-700;
|
||||
}
|
||||
|
||||
label {
|
||||
@include font(14, 16, 400);
|
||||
color: $color-gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
&__field-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
&--acdc {
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-modal__field-row--save button.is-primary {
|
||||
border-radius: 2px;
|
||||
padding: 6px 12px;
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
|
||||
&__content-title {
|
||||
@include font(14, 20, 600);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(14, 20, 400);
|
||||
margin: 0 0 24px 0;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
&__field-rdb {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
label {
|
||||
@include font(14, 20, 400);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.ppcp-r-payment-methods{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:48px;
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
@import './components/reusable-components/text-control';
|
||||
@import './components/reusable-components/separator';
|
||||
@import './components/reusable-components/payment-method-icons';
|
||||
@import "./components/reusable-components/payment-method-item";
|
||||
@import './components/reusable-components/settings-wrapper';
|
||||
@import './components/reusable-components/select-box';
|
||||
@import './components/reusable-components/tab-navigation';
|
||||
|
|
@ -17,4 +18,7 @@
|
|||
@import './components/reusable-components/title-badge';
|
||||
@import './components/screens/onboarding';
|
||||
@import './components/screens/dashboard/tab-dashboard';
|
||||
@import './components/screens/dashboard/tab-payment-methods';
|
||||
}
|
||||
|
||||
@import './components/reusable-components/payment-method-modal';
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ export const PayPalRdb = ( props ) => {
|
|||
return (
|
||||
<div className="ppcp-r__radio">
|
||||
<input
|
||||
id={ props?.id ? props.id : null }
|
||||
className="ppcp-r__radio-value"
|
||||
type="radio"
|
||||
checked={ props.value === props.currentValue }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import { Button } from '@wordpress/components';
|
||||
import PaymentMethodIcon from './PaymentMethodIcon';
|
||||
import { PayPalCheckbox } from './Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const PaymentMethodItem = ( props ) => {
|
||||
const [ paymentMethodState, setPaymentMethodState ] = useState();
|
||||
const [ modalIsVisible, setModalIsVisible ] = useState( false );
|
||||
let Modal = null;
|
||||
if ( props?.modal ) {
|
||||
Modal = props.modal;
|
||||
}
|
||||
const handleCheckboxState = ( checked ) => {
|
||||
if ( checked ) {
|
||||
setPaymentMethodState( props.payment_method_id );
|
||||
} else {
|
||||
setPaymentMethodState( null );
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="ppcp-r-payment-method-item">
|
||||
<div className="ppcp-r-payment-method-item__checkbox-wrap">
|
||||
<PayPalCheckbox
|
||||
currentValue={ [ paymentMethodState ] }
|
||||
name="payment_method_status"
|
||||
value={ props.payment_method_id }
|
||||
handleCheckboxState={ handleCheckboxState }
|
||||
/>
|
||||
<div className="ppcp-r-payment-method-item__icon-wrap">
|
||||
<PaymentMethodIcon
|
||||
icons={ [ props.icon ] }
|
||||
type={ props.icon }
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-payment-method-item__content">
|
||||
<span className="ppcp-r-payment-method-item__title">
|
||||
{ props.title }
|
||||
</span>
|
||||
<p>{ props.description }</p>
|
||||
</div>
|
||||
</div>
|
||||
{ Modal && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={ () => {
|
||||
setModalIsVisible( true );
|
||||
} }
|
||||
>
|
||||
{ __( 'Modify', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
) }
|
||||
</div>
|
||||
{ Modal && modalIsVisible && (
|
||||
<Modal setModalIsVisible={ setModalIsVisible } />
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentMethodItem;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { Modal } from '@wordpress/components';
|
||||
import PaymentMethodIcon from './PaymentMethodIcon';
|
||||
|
||||
const PaymentMethodModal = ( props ) => {
|
||||
let className = 'ppcp-r-modal';
|
||||
let classNameContainer = 'ppcp-r-modal__container';
|
||||
|
||||
if ( props?.className ) {
|
||||
className += ' ' + props.className;
|
||||
}
|
||||
|
||||
if ( props?.container && props.container === 'small' ) {
|
||||
classNameContainer += ' ppcp-r-modal__container--small';
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className={ className }
|
||||
onRequestClose={ () => props.setModalIsVisible( false ) }
|
||||
>
|
||||
<div className={ classNameContainer }>
|
||||
<div className="ppcp-r-modal__header">
|
||||
<PaymentMethodIcon
|
||||
icons={ [ props.icon ] }
|
||||
type={ props.icon }
|
||||
/>
|
||||
<span className="ppcp-r-modal__title">{ props.title }</span>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__content">{ props.children }</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentMethodModal;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { PayPalRdb } from '../../../ReusableComponents/Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
const THREED_SECURE_GROUP_NAME = 'threed-secure';
|
||||
const ModalAcdc = ( { setModalIsVisible } ) => {
|
||||
const [ threeDSecure, setThreeDSecure ] = useState( 'no-3d-secure' );
|
||||
|
||||
return (
|
||||
<PaymentMethodModal
|
||||
setModalIsVisible={ setModalIsVisible }
|
||||
icon="payment-method-cards"
|
||||
title={ __(
|
||||
'Advanced Credit and Debit Card Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
>
|
||||
<strong className="ppcp-r-modal__content-title">
|
||||
{ __( '3D Secure', 'woocommerce-paypal-payments' ) }
|
||||
</strong>
|
||||
<p className="ppcp-r-modal__description">
|
||||
{ __(
|
||||
'Authenticate cardholders through their card issuers to reduce fraud and improve transaction security. Successful 3D Secure authentication can shift liability for fraudulent chargebacks to the card issuer.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</p>
|
||||
<div className="ppcp-r-modal__field-rows ppcp-r-modal__field-rows--acdc">
|
||||
<div className="ppcp-r-modal__field-rdb">
|
||||
<PayPalRdb
|
||||
id="no-3d-secure"
|
||||
name={ THREED_SECURE_GROUP_NAME }
|
||||
value="no-3d-secure"
|
||||
currentValue={ threeDSecure }
|
||||
handleRdbState={ setThreeDSecure }
|
||||
/>
|
||||
<label htmlFor="no-3d-secure">
|
||||
{ __( 'No 3D Secure', 'woocommerce-paypal-payments' ) }
|
||||
</label>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-rdb">
|
||||
<PayPalRdb
|
||||
id="only-required-3d-secure"
|
||||
name={ THREED_SECURE_GROUP_NAME }
|
||||
value="only-required-3d-secure"
|
||||
currentValue={ threeDSecure }
|
||||
handleRdbState={ setThreeDSecure }
|
||||
/>
|
||||
<label htmlFor="only-required-3d-secure">
|
||||
{ __(
|
||||
'Only when required',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</label>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-rdb">
|
||||
<PayPalRdb
|
||||
id="always-3d-secure"
|
||||
name={ THREED_SECURE_GROUP_NAME }
|
||||
value="always-3d-secure"
|
||||
currentValue={ threeDSecure }
|
||||
handleRdbState={ setThreeDSecure }
|
||||
/>
|
||||
<label htmlFor="always-3d-secure">
|
||||
{ __(
|
||||
'Always require 3D Secure',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-rows">
|
||||
<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
|
||||
<Button variant="primary">
|
||||
{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PaymentMethodModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalAcdc;
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, ToggleControl } from '@wordpress/components';
|
||||
import { PayPalRdb } from '../../../ReusableComponents/Fields';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
const ModalFastlane = ( { setModalIsVisible } ) => {
|
||||
const [ fastlaneSettings, setFastlaneSettings ] = useState( {
|
||||
cardholderName: false,
|
||||
displayWatermark: false,
|
||||
} );
|
||||
|
||||
const updateFormValue = ( key, value ) => {
|
||||
setFastlaneSettings( { ...fastlaneSettings, [ key ]: value } );
|
||||
};
|
||||
|
||||
return (
|
||||
<PaymentMethodModal
|
||||
setModalIsVisible={ setModalIsVisible }
|
||||
icon="payment-method-fastlane"
|
||||
title={ __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ) }
|
||||
>
|
||||
<div className="ppcp-r-modal__field-rows ppcp-r-modal__field-rows--fastlane">
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<ToggleControl
|
||||
className="ppcp-r-modal__inverted-toggle-control"
|
||||
checked={ fastlaneSettings.cardholderName }
|
||||
onChange={ ( newValue ) =>
|
||||
updateFormValue( 'cardholderName', newValue )
|
||||
}
|
||||
label={ __(
|
||||
'Display cardholder name',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
id="ppcp-r-fastlane-settings-cardholder"
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<ToggleControl
|
||||
className="ppcp-r-modal__inverted-toggle-control"
|
||||
checked={ fastlaneSettings.displayWatermark }
|
||||
onChange={ ( newValue ) =>
|
||||
updateFormValue( 'displayWatermark', newValue )
|
||||
}
|
||||
label={ __(
|
||||
'Display Fastlane Watermark',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
id="ppcp-r-fastlane-settings-watermark"
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
|
||||
<Button variant="primary">
|
||||
{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PaymentMethodModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalFastlane;
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import PaymentMethodModal from '../../../ReusableComponents/PaymentMethodModal';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { ToggleControl, Button } from '@wordpress/components';
|
||||
import { useState } from '@wordpress/element';
|
||||
|
||||
const ModalPayPal = ( { setModalIsVisible } ) => {
|
||||
const [ paypalSettings, setPaypalSettings ] = useState( {
|
||||
checkoutPageTitle: 'PayPal',
|
||||
checkoutPageDescription: 'Pay via PayPal',
|
||||
showLogo: false,
|
||||
} );
|
||||
|
||||
const updateFormValue = ( key, value ) => {
|
||||
setPaypalSettings( { ...paypalSettings, [ key ]: value } );
|
||||
};
|
||||
|
||||
return (
|
||||
<PaymentMethodModal
|
||||
setModalIsVisible={ setModalIsVisible }
|
||||
icon="payment-method-paypal"
|
||||
container="small"
|
||||
title={ __( 'PayPal', 'woocommerce-paypal-payments' ) }
|
||||
>
|
||||
<div className="ppcp-r-modal__field-rows">
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<label htmlFor="ppcp-r-paypal-settings-checkout-title">
|
||||
{ __(
|
||||
'Checkout page title',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="ppcp-r-paypal-settings-checkout-title"
|
||||
value={ paypalSettings.checkoutPageTitle }
|
||||
onInput={ ( e ) =>
|
||||
updateFormValue(
|
||||
'checkoutPageTitle',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<label htmlFor="ppcp-r-paypal-settings-checkout-page-description">
|
||||
{ __(
|
||||
'Checkout page description',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="ppcp-r-paypal-settings-checkout-page-description"
|
||||
value={ paypalSettings.checkoutPageDescription }
|
||||
onInput={ ( e ) =>
|
||||
updateFormValue(
|
||||
'checkoutPageDescription',
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row">
|
||||
<ToggleControl
|
||||
className="ppcp-r-modal__inverted-toggle-control"
|
||||
label={ __(
|
||||
'Show logo',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
id="ppcp-r-paypal-settings-show-logo"
|
||||
checked={ paypalSettings.showLogo }
|
||||
onChange={ ( newValue ) => {
|
||||
updateFormValue( 'showLogo', newValue );
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
<div className="ppcp-r-modal__field-row ppcp-r-modal__field-row--save">
|
||||
<Button variant="primary">
|
||||
{ __( 'Save changes', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PaymentMethodModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalPayPal;
|
||||
|
|
@ -1,5 +1,185 @@
|
|||
import SettingsCard from '../../ReusableComponents/SettingsCard';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PaymentMethodItem from '../../ReusableComponents/PaymentMethodItem';
|
||||
import ModalPayPal from './Modals/ModalPayPal';
|
||||
import ModalFastlane from './Modals/ModalFastlane';
|
||||
import ModalAcdc from './Modals/ModalAcdc';
|
||||
|
||||
const TabPaymentMethods = () => {
|
||||
return <div>PaymentMethods tab</div>;
|
||||
const renderPaymentMethods = ( data ) => {
|
||||
return data.map( ( paymentMethod ) => (
|
||||
<PaymentMethodItem key={ paymentMethod.id } { ...paymentMethod } />
|
||||
) );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r-payment-methods">
|
||||
<SettingsCard
|
||||
title={ __( 'PayPal Checkout', 'woocommerce-paypal-payments' ) }
|
||||
description={ __(
|
||||
'Select your preferred checkout option with PayPal for easy payment processing.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-standard.svg"
|
||||
>
|
||||
{ renderPaymentMethods( paymentMethodsPayPalCheckoutDefault ) }
|
||||
</SettingsCard>
|
||||
<SettingsCard
|
||||
title={ __(
|
||||
'Online Card Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'Select your preferred card payment options for efficient payment processing.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-online-methods.svg"
|
||||
>
|
||||
{ renderPaymentMethods(
|
||||
paymentMethodsOnlineCardPaymentsDefault
|
||||
) }
|
||||
</SettingsCard>
|
||||
<SettingsCard
|
||||
title={ __(
|
||||
'Alternative Payment Methods',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
description={ __(
|
||||
'With alternative payment methods, customers across the globe can pay with their bank accounts and other local payment methods.',
|
||||
'woocommerce-paypal-payments'
|
||||
) }
|
||||
icon="icon-checkout-alternative-methods.svg"
|
||||
>
|
||||
{ renderPaymentMethods( paymentMethodsAlternativeDefault ) }
|
||||
</SettingsCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const paymentMethodsPayPalCheckoutDefault = [
|
||||
{
|
||||
id: 'paypal',
|
||||
title: __( 'PayPal', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximize conversion.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-paypal',
|
||||
modal: ModalPayPal,
|
||||
},
|
||||
{
|
||||
id: 'venmo',
|
||||
title: __( 'Venmo', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Offer Venmo at checkout to millions of active users.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-venmo',
|
||||
},
|
||||
{
|
||||
id: 'paypal_credit',
|
||||
title: __( 'PayPal Credit', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Get paid in full at checkout while giving your customers the option to pay interest free if paid within 6 months on orders over $99.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-paypal',
|
||||
},
|
||||
{
|
||||
id: 'credit_and_debit_card_payments',
|
||||
title: __(
|
||||
'Credit and debit card payments',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
"Accept all major credit and debit cards - even if your customer doesn't have a PayPal account.",
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-cards',
|
||||
},
|
||||
];
|
||||
|
||||
const paymentMethodsOnlineCardPaymentsDefault = [
|
||||
{
|
||||
id: 'advanced_credit_and_debit_card_payments',
|
||||
title: __(
|
||||
'Advanced Credit and Debit Card Payments',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
description: __(
|
||||
"Present custom credit and debit card fields to your payers so they can pay with credit and debit cards using your site's branding.",
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-cards',
|
||||
modal: ModalAcdc,
|
||||
},
|
||||
{
|
||||
id: 'fastlane',
|
||||
title: __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Tap into the scale and trust of PayPal’s customer network to recognize shoppers and make guest checkout more seamless than ever.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-fastlane',
|
||||
modal: ModalFastlane,
|
||||
},
|
||||
{
|
||||
id: 'apply_pay',
|
||||
title: __( 'Apple Pay', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Allow customers to pay via their Apple Pay digital wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-apple-pay',
|
||||
},
|
||||
{
|
||||
id: 'google_pay',
|
||||
title: __( 'Google Pay', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Allow customers to pay via their Google Pay digital wallet.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-google-pay',
|
||||
},
|
||||
];
|
||||
|
||||
const paymentMethodsAlternativeDefault = [
|
||||
{
|
||||
id: 'bancontact',
|
||||
title: __( 'Bancontact', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Bancontact is the most widely used, accepted and trusted electronic payment method in Belgium. Bancontact makes it possible to pay directly through the online payment systems of all major Belgian banks.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-bancontact',
|
||||
},
|
||||
{
|
||||
id: 'ideal',
|
||||
title: __( 'iDEAL', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'iDEAL is a payment method in the Netherlands that allows buyers to select their issuing bank from a list of options.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-ideal',
|
||||
},
|
||||
{
|
||||
id: 'eps',
|
||||
title: __( 'eps', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor massa ex, eget luctus lacus iaculis at.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-eps',
|
||||
},
|
||||
{
|
||||
id: 'blik',
|
||||
title: __( 'BLIK', 'woocommerce-paypal-payments' ),
|
||||
description: __(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor massa ex, eget luctus lacus iaculis at.',
|
||||
'woocommerce-paypal-payments'
|
||||
),
|
||||
icon: 'payment-method-blik',
|
||||
},
|
||||
];
|
||||
|
||||
export default TabPaymentMethods;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
