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
|
|
@ -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
