mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
Create payment methods list
This commit is contained in:
inpsyde-maticluznar
parent
3a9f2a4a1f
commit
5d38233923
21 changed files with 398 additions and 1 deletions
|
|
@ -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,36 @@
|
|||
.ppcp-r-modal {
|
||||
.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;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.ppcp-r-payment-methods{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:48px;
|
||||
}
|
||||
|
|
@ -15,8 +15,12 @@
|
|||
@import './components/reusable-components/tabs';
|
||||
@import './components/reusable-components/fields';
|
||||
@import './components/reusable-components/title-badge';
|
||||
@import './components/reusable-components/payment-method-item';
|
||||
@import './components/screens/onboarding/step-welcome';
|
||||
@import './components/screens/onboarding/step-business';
|
||||
@import './components/screens/onboarding/step-products';
|
||||
@import './components/screens/dashboard/tab-dashboard';
|
||||
@import './components/screens/dashboard/tab-payment-methods';
|
||||
}
|
||||
|
||||
@import './components/reusable-components/payment-method-modal';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
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 );
|
||||
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>
|
||||
{ props.modal && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={ () => {
|
||||
setModalIsVisible( true );
|
||||
} }
|
||||
>
|
||||
{ __( 'Modify', 'woocommerce-paypal-payments' ) }
|
||||
</Button>
|
||||
) }
|
||||
</div>
|
||||
{ modalIsVisible && props.modal( setModalIsVisible ) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentMethodItem;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { Modal } from '@wordpress/components';
|
||||
import PaymentMethodIcon from './PaymentMethodIcon';
|
||||
|
||||
const PaymentMethodModal = ( props ) => {
|
||||
let className = 'ppcp-r-modal';
|
||||
|
||||
if ( props?.className ) {
|
||||
className += ' ' + props.className;
|
||||
}
|
||||
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>
|
||||
<div className="ppcp-r-modal__content">{ props.children }</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaymentMethodModal;
|
||||
|
|
@ -1,5 +1,191 @@
|
|||
import SettingsCard from '../../ReusableComponents/SettingsCard';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PaymentMethodItem from '../../ReusableComponents/PaymentMethodItem';
|
||||
import PaymentMethodModal from '../../ReusableComponents/PaymentMethodModal';
|
||||
|
||||
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 PayPalModal = ( setModalIsVisible ) => {
|
||||
return (
|
||||
<PaymentMethodModal
|
||||
setModalIsVisible={ setModalIsVisible }
|
||||
icon="payment-method-paypal"
|
||||
title={ __( 'PayPal', 'woocommerce-paypal-payments' ) }
|
||||
></PaymentMethodModal>
|
||||
);
|
||||
};
|
||||
|
||||
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: PayPalModal,
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
{
|
||||
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',
|
||||
},
|
||||
{
|
||||
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
