woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 10:47:21 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

🔀 Merge branch 'trunk'

Browse source 
# Conflicts:
#	modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js
#	modules/ppcp-settings/resources/js/Components/Screens/Settings.js
#	modules/ppcp-settings/services.php
#	modules/ppcp-settings/src/SettingsModule.php
This commit is contained in:
Philipp Stracker 2024-11-21 19:23:42 +01:00
commit 3b3bb29428
No known key found for this signature in database
53 changed files with 669 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,9 @@ import { Button } from '@wordpress/components';
import PaymentMethodIcon from './PaymentMethodIcon';
import { PayPalCheckbox } from './Fields';
import { useState } from '@wordpress/element';
import { ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import data from '../../utils/data';
const PaymentMethodItem = ( props ) => {
const [ paymentMethodState, setPaymentMethodState ] = useState();
@ -21,36 +23,37 @@ const PaymentMethodItem = ( props ) => {
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">
<div className="ppcp-r-payment-method-item__wrap">
<div className="ppcp-r-payment-method-item__title-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>
</div>
<div className="ppcp-r-payment-method-item__content">
<p>{ props.description }</p>
</div>
<div className="ppcp-r-payment-method-item__footer">
<ToggleControl
__nextHasNoMarginBottom={ true }
checked={
props.payment_method_id === paymentMethodState
}
onChange={ ( newValue ) =>
handleCheckboxState( newValue )
}
/>
<div
className="ppcp-r-payment-method-item__settings-button"
onClick={ () => setModalIsVisible( true ) }
>
{ Modal && data().getImage( 'icon-settings.svg' ) }
</div>
</div>
</div>
{ Modal && (
<Button
variant="secondary"
onClick={ () => {
setModalIsVisible( true );
} }
>
{ __( 'Modify', 'woocommerce-paypal-payments' ) }
</Button>
) }
</div>
{ Modal && modalIsVisible && (
<Modal setModalIsVisible={ setModalIsVisible } />

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

@ -3,20 +3,17 @@ import PaymentMethodIcon from './PaymentMethodIcon';
const PaymentMethodModal = ( props ) => {
let className = 'ppcp-r-modal';
let classNameContainer = 'ppcp-r-modal__container';
const 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 ) }
size={ props?.size }
>
<div className={ classNameContainer }>
<div className="ppcp-r-modal__header">

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

@ -9,7 +9,6 @@ const SettingsCard = ( props ) => {
return (
<div className={ className }>
<div className="ppcp-r-settings-card__header">
{ data().getImage( props.icon ) }
<div className="ppcp-r-settings-card__content-inner">
<span className="ppcp-r-settings-card__title">
{ props.title }

5
modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalAcdc.js
View file

@ -14,7 +14,7 @@ const ModalAcdc = ( { setModalIsVisible } ) => {
return (
<PaymentMethodModal
setModalIsVisible={ setModalIsVisible }
icon="payment-method-cards"
icon="payment-method-cards-big"
title={ __(
'Advanced Credit and Debit Card Payments',
'woocommerce-paypal-payments'
@ -64,8 +64,7 @@ const ModalAcdc = ( { setModalIsVisible } ) => {
'woocommerce-paypal-payments'
) }
/>
</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' ) }

3
modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalFastlane.js
View file

@ -17,8 +17,9 @@ const ModalFastlane = ( { setModalIsVisible } ) => {
return (
<PaymentMethodModal
setModalIsVisible={ setModalIsVisible }
icon="payment-method-fastlane"
icon="payment-method-fastlane-big"
title={ __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ) }
size="small"
>
<div className="ppcp-r-modal__field-rows ppcp-r-modal__field-rows--fastlane">
<div className="ppcp-r-modal__field-row">

4
modules/ppcp-settings/resources/js/Components/Screens/Overview/Modals/ModalPayPal.js
View file

@ -17,8 +17,7 @@ const ModalPayPal = ( { setModalIsVisible } ) => {
return (
<PaymentMethodModal
setModalIsVisible={ setModalIsVisible }
icon="payment-method-paypal"
container="small"
icon="payment-method-paypal-big"
title={ __( 'PayPal', 'woocommerce-paypal-payments' ) }
>
<div className="ppcp-r-modal__field-rows">
@ -53,7 +52,6 @@ const ModalPayPal = ( { setModalIsVisible } ) => {
</div>
<div className="ppcp-r-modal__field-row">
<ToggleControl
className="ppcp-r-modal__inverted-toggle-control"
label={ __(
'Show logo',
'woocommerce-paypal-payments'

2
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
View file

@ -24,7 +24,6 @@ const TabOverview = () => {
{ todosData.length > 0 && (
<SettingsCard
className="ppcp-r-tab-overview-todo"
icon="icon-overview-list.svg"
title={ __(
'Things to do next',
'woocommerce-paypal-payments'
@ -52,7 +51,6 @@ const TabOverview = () => {
) }
<SettingsCard
className="ppcp-r-tab-overview-support"
icon="icon-overview-support.svg"
title={ __( 'Status', 'woocommerce-paypal-payments' ) }
description={ __(
'Your PayPal account connection details, along with available products and features.',

15
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabPaymentMethods.js
View file

@ -7,9 +7,16 @@ import ModalAcdc from './Modals/ModalAcdc';
const TabPaymentMethods = () => {
const renderPaymentMethods = ( data ) => {
return data.map( ( paymentMethod ) => (
<PaymentMethodItem key={ paymentMethod.id } { ...paymentMethod } />
) );
return (
<div className="ppcp-r-payment-method-item-list">
{ data.map( ( paymentMethod ) => (
<PaymentMethodItem
key={ paymentMethod.id }
{ ...paymentMethod }
/>
) ) }
</div>
);
};
return (
@ -110,7 +117,7 @@ const paymentMethodsOnlineCardPaymentsDefault = [
"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',
icon: 'payment-method-advanced-cards',
modal: ModalAcdc,
},
{

7
modules/ppcp-settings/resources/js/Components/Screens/Settings.js
View file

@ -1,7 +1,6 @@
import TabNavigation from '../ReusableComponents/TabNavigation';
import { getSettingsTabs } from './tabs';
import { OnboardingHooks } from '../../data';
import Onboarding from './Onboarding/Onboarding';
import SettingsScreen from './SettingsScreen';
const Settings = () => {
const onboardingProgress = OnboardingHooks.useSteps();
@ -15,9 +14,7 @@ const Settings = () => {
return <Onboarding />;
}
const tabs = getSettingsTabs( onboardingProgress );
return <TabNavigation tabs={ tabs }></TabNavigation>;
return <SettingsScreen />;
};
export default Settings;

37
modules/ppcp-settings/resources/js/Components/Screens/SettingsNavigation.js Normal file
View file

@ -0,0 +1,37 @@
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import data from '../../utils/data';
const SettingsNavigation = ( {} ) => {
return (
<div className="ppcp-r-navigation-container">
<div className="ppcp-r-navigation">
<div className="ppcp-r-navigation--left">
<span>{ data().getImage( 'icon-arrow-left.svg' ) }</span>
<a
className="ppcp-r-navigation--left__link"
href={ global.ppcpSettings.wcPaymentsTabUrl }
aria-label={ __(
'PayPal Payments',
'woocommerce-paypal-payments'
) }
>
{ __(
'PayPal Payments',
'woocommerce-paypal-payments'
) }
</a>
</div>
{
<div className="ppcp-r-navigation--right">
<Button variant="primary" disabled={ false }>
{ __( 'Save', 'woocommerce-paypal-payments' ) }
</Button>
</div>
}
</div>
</div>
);
};
export default SettingsNavigation;

19
modules/ppcp-settings/resources/js/Components/Screens/SettingsScreen.js Normal file
View file

@ -0,0 +1,19 @@
import { getSettingsTabs } from './tabs';
import SettingsNavigation from './SettingsNavigation';
import Container from '../ReusableComponents/Container';
import TabNavigation from '../ReusableComponents/TabNavigation';
const SettingsScreen = () => {
const tabs = getSettingsTabs();
return (
<>
<SettingsNavigation />
<Container page="settings">
<TabNavigation tabs={ tabs }></TabNavigation>
</Container>
</>
);
};
export default SettingsScreen;

32
modules/ppcp-settings/resources/js/switchSettingsUi.js Normal file
View file

@ -0,0 +1,32 @@
document.addEventListener('DOMContentLoaded', () => {
const config = ppcpSwitchSettingsUi;
const button = document.querySelector('.button.button-settings-switch-ui');
if ( ! typeof config || !button) {
return;
}
button.addEventListener('click', () => {
fetch(config.endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
nonce: config.nonce,
}),
})
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => {
window.location.reload();
})
.catch((error) => {
console.error('Error:', error);
});
});
});