woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-30 05:00:51 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

Add overlays

Browse source
This commit is contained in:
inpsyde-maticluznar 2024-11-05 13:30:27 +01:00
parent 6b9b024d64
commit 6a5fc51c02
No known key found for this signature in database
GPG key ID: D005973F231309F6
9 changed files with 348 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

84
modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss
View file

@ -1,4 +1,17 @@
.ppcp-r-modal {
@import "../../global";
@import './button';
@import './fields';
&__container {
max-width: 100%;
width: 400px;
&--small {
padding: 0 50px;
}
}
.components-modal {
&__header {
height: 52px;
@ -22,6 +35,7 @@
gap: 8px;
border-bottom: 1px solid $color-gray-500;
padding-bottom: 12px;
margin-bottom: 24px;
}
&__title {
@ -33,4 +47,74 @@
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;
}
}
}

1
modules/ppcp-settings/resources/css/style.scss
View file

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

1
modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js
View file

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

10
modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodItem.js
View file

@ -7,6 +7,10 @@ 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 );
@ -37,7 +41,7 @@ const PaymentMethodItem = ( props ) => {
<p>{ props.description }</p>
</div>
</div>
{ props.modal && (
{ Modal && (
<Button
variant="secondary"
onClick={ () => {
@ -48,7 +52,9 @@ const PaymentMethodItem = ( props ) => {
</Button>
) }
</div>
{ modalIsVisible && props.modal( setModalIsVisible ) }
{ Modal && modalIsVisible && (
<Modal setModalIsVisible={ setModalIsVisible } />
) }
</>
);
};

22
modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodModal.js
View file

@ -3,23 +3,31 @@ 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="ppcp-r-modal__header">
<PaymentMethodIcon
icons={ [ props.icon ] }
type={ props.icon }
/>
<span className="ppcp-r-modal__title">{ props.title }</span>
<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>
<div className="ppcp-r-modal__content">{ props.children }</div>
</Modal>
);
};

84
modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalAcdc.js Normal file
View file

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

62
modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalFastlane.js Normal file
View file

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

87
modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalPayPal.js Normal file
View file

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

18
modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabPaymentMethods.js
View file

@ -1,7 +1,9 @@
import SettingsCard from '../../ReusableComponents/SettingsCard';
import { __ } from '@wordpress/i18n';
import PaymentMethodItem from '../../ReusableComponents/PaymentMethodItem';
import PaymentMethodModal from '../../ReusableComponents/PaymentMethodModal';
import ModalPayPal from './Modals/ModalPayPal';
import ModalFastlane from './Modals/ModalFastlane';
import ModalAcdc from './Modals/ModalAcdc';
const TabPaymentMethods = () => {
const renderPaymentMethods = ( data ) => {
@ -54,16 +56,6 @@ const TabPaymentMethods = () => {
);
};
const PayPalModal = ( setModalIsVisible ) => {
return (
<PaymentMethodModal
setModalIsVisible={ setModalIsVisible }
icon="payment-method-paypal"
title={ __( 'PayPal', 'woocommerce-paypal-payments' ) }
></PaymentMethodModal>
);
};
const paymentMethodsPayPalCheckoutDefault = [
{
id: 'paypal',
@ -73,7 +65,7 @@ const paymentMethodsPayPalCheckoutDefault = [
'woocommerce-paypal-payments'
),
icon: 'payment-method-paypal',
modal: PayPalModal,
modal: ModalPayPal,
},
{
id: 'venmo',
@ -119,6 +111,7 @@ const paymentMethodsOnlineCardPaymentsDefault = [
'woocommerce-paypal-payments'
),
icon: 'payment-method-cards',
modal: ModalAcdc,
},
{
id: 'fastlane',
@ -128,6 +121,7 @@ const paymentMethodsOnlineCardPaymentsDefault = [
'woocommerce-paypal-payments'
),
icon: 'payment-method-fastlane',
modal: ModalFastlane,
},
{
id: 'apply_pay',