diff --git a/modules/ppcp-settings/images/icon-payment-method-apple-pay.svg b/modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-apple-pay.svg rename to modules/ppcp-settings/images/icon-button-payment-method-apple-pay.svg diff --git a/modules/ppcp-settings/images/icon-payment-method-bancontact.svg b/modules/ppcp-settings/images/icon-button-payment-method-bancontact.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-bancontact.svg rename to modules/ppcp-settings/images/icon-button-payment-method-bancontact.svg diff --git a/modules/ppcp-settings/images/icon-payment-method-blik.svg b/modules/ppcp-settings/images/icon-button-payment-method-blik.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-blik.svg rename to modules/ppcp-settings/images/icon-button-payment-method-blik.svg diff --git a/modules/ppcp-settings/images/icon-payment-method-cards.svg b/modules/ppcp-settings/images/icon-button-payment-method-cards.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-cards.svg rename to modules/ppcp-settings/images/icon-button-payment-method-cards.svg diff --git a/modules/ppcp-settings/images/icon-payment-method-eps.svg b/modules/ppcp-settings/images/icon-button-payment-method-eps.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-eps.svg rename to modules/ppcp-settings/images/icon-button-payment-method-eps.svg diff --git a/modules/ppcp-settings/images/icon-payment-method-fastlane.svg b/modules/ppcp-settings/images/icon-button-payment-method-fastlane.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-fastlane.svg rename to modules/ppcp-settings/images/icon-button-payment-method-fastlane.svg diff --git a/modules/ppcp-settings/images/icon-payment-method-google-pay.svg b/modules/ppcp-settings/images/icon-button-payment-method-google-pay.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-google-pay.svg rename to modules/ppcp-settings/images/icon-button-payment-method-google-pay.svg diff --git a/modules/ppcp-settings/images/icon-payment-method-ideal.svg b/modules/ppcp-settings/images/icon-button-payment-method-ideal.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-ideal.svg rename to modules/ppcp-settings/images/icon-button-payment-method-ideal.svg diff --git a/modules/ppcp-settings/images/icon-payment-method-paypal.svg b/modules/ppcp-settings/images/icon-button-payment-method-paypal.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-paypal.svg rename to modules/ppcp-settings/images/icon-button-payment-method-paypal.svg diff --git a/modules/ppcp-settings/images/icon-payment-method-venmo.svg b/modules/ppcp-settings/images/icon-button-payment-method-venmo.svg similarity index 100% rename from modules/ppcp-settings/images/icon-payment-method-venmo.svg rename to modules/ppcp-settings/images/icon-button-payment-method-venmo.svg diff --git a/modules/ppcp-settings/images/icon-checkout-advanced.svg b/modules/ppcp-settings/images/icon-checkout-advanced.svg new file mode 100644 index 000000000..3091d3301 --- /dev/null +++ b/modules/ppcp-settings/images/icon-checkout-advanced.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-checkout-alternative-methods.svg b/modules/ppcp-settings/images/icon-checkout-alternative-methods.svg new file mode 100644 index 000000000..701bffb3f --- /dev/null +++ b/modules/ppcp-settings/images/icon-checkout-alternative-methods.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-checkout-online-methods.svg b/modules/ppcp-settings/images/icon-checkout-online-methods.svg new file mode 100644 index 000000000..7171c4dac --- /dev/null +++ b/modules/ppcp-settings/images/icon-checkout-online-methods.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/modules/ppcp-settings/images/icon-checkout-standard.svg b/modules/ppcp-settings/images/icon-checkout-standard.svg new file mode 100644 index 000000000..11d90ffaf --- /dev/null +++ b/modules/ppcp-settings/images/icon-checkout-standard.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss new file mode 100644 index 000000000..dfc351b02 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss @@ -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; + } +} diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss new file mode 100644 index 000000000..ceff910c4 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss @@ -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; + } + } +} diff --git a/modules/ppcp-settings/resources/css/components/screens/dashboard/_tab-payment-methods.scss b/modules/ppcp-settings/resources/css/components/screens/dashboard/_tab-payment-methods.scss new file mode 100644 index 000000000..556589d03 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/screens/dashboard/_tab-payment-methods.scss @@ -0,0 +1,5 @@ +.ppcp-r-payment-methods{ + display: flex; + flex-direction: column; + gap:48px; +} diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss index 822d24f48..bb1067606 100644 --- a/modules/ppcp-settings/resources/css/style.scss +++ b/modules/ppcp-settings/resources/css/style.scss @@ -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'; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js index 9872c07bf..5dc64f651 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields.js @@ -24,6 +24,7 @@ export const PayPalRdb = ( props ) => { return (
{ + 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 ( + <> +
+
+ +
+ +
+
+ + { props.title } + +

{ props.description }

+
+
+ { Modal && ( + + ) } +
+ { Modal && modalIsVisible && ( + + ) } + + ); +}; + +export default PaymentMethodItem; diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodModal.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodModal.js new file mode 100644 index 000000000..3fa1e3aae --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/PaymentMethodModal.js @@ -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 ( + props.setModalIsVisible( false ) } + > +
+
+ + { props.title } +
+
{ props.children }
+
+ + ); +}; + +export default PaymentMethodModal; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalAcdc.js b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalAcdc.js new file mode 100644 index 000000000..1918f4862 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalAcdc.js @@ -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 ( + + + { __( '3D Secure', 'woocommerce-paypal-payments' ) } + +

+ { __( + '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' + ) } +

+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+ + ); +}; + +export default ModalAcdc; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalFastlane.js b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalFastlane.js new file mode 100644 index 000000000..670e476a8 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalFastlane.js @@ -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 ( + +
+
+ + updateFormValue( 'cardholderName', newValue ) + } + label={ __( + 'Display cardholder name', + 'woocommerce-paypal-payments' + ) } + id="ppcp-r-fastlane-settings-cardholder" + /> +
+
+ + updateFormValue( 'displayWatermark', newValue ) + } + label={ __( + 'Display Fastlane Watermark', + 'woocommerce-paypal-payments' + ) } + id="ppcp-r-fastlane-settings-watermark" + /> +
+
+ +
+
+ + ); +}; + +export default ModalFastlane; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalPayPal.js b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalPayPal.js new file mode 100644 index 000000000..e72e0ffb3 --- /dev/null +++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/Modals/ModalPayPal.js @@ -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 ( + +
+
+ + + updateFormValue( + 'checkoutPageTitle', + e.target.value + ) + } + /> +
+
+ + + updateFormValue( + 'checkoutPageDescription', + e.target.value + ) + } + /> +
+
+
+
+ +
+
+ + ); +}; + +export default ModalPayPal; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabPaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabPaymentMethods.js index 56df4838c..89625ff85 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabPaymentMethods.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Dashboard/TabPaymentMethods.js @@ -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
PaymentMethods tab
; + const renderPaymentMethods = ( data ) => { + return data.map( ( paymentMethod ) => ( + + ) ); + }; + + return ( +
+ + { renderPaymentMethods( paymentMethodsPayPalCheckoutDefault ) } + + + { renderPaymentMethods( + paymentMethodsOnlineCardPaymentsDefault + ) } + + + { renderPaymentMethods( paymentMethodsAlternativeDefault ) } + +
+ ); }; +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;