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

Merge pull request #3016 from woocommerce/PCP-3932-implement-logic-for-the-features

Browse source 
Settings UI: Refactor Overview tab and update Feature button links
This commit is contained in:
Philipp Stracker 2025-01-23 17:28:58 +01:00 • committed by GitHub
commit 143e089f79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 66 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

20
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
View file

@ -24,7 +24,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
<Button
className={ button.class ? button.class : '' }
key={ button.text }
isBusy={ props.actionProps?.isBusy }
isBusy={ props.actionProps?.isBusy }
variant={ button.type }
onClick={ button.onClick }
>
@ -32,13 +32,17 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
</Button>
);
return button.urls ? (
<a href={ button.urls.live } key={ button.text }>
{ buttonElement }
</a>
) : (
buttonElement
);
// If there's a URL (either direct or in urls object), wrap in anchor tag
if ( button.url || button.urls ) {
const href = button.urls ? button.urls.live : button.url;
return (
<a href={ href } key={ button.text }>
{ buttonElement }
</a>
);
}
return buttonElement;
};
return (

35
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Features.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Features.js
View file

@ -39,10 +39,7 @@ const Features = {
{
type: 'tertiary',
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
urls: {
sandbox: '#',
live: '#',
},
url: 'https://developer.paypal.com/studio/checkout/standard',
class: 'small-button',
},
],
@ -88,10 +85,7 @@ const Features = {
{
type: 'tertiary',
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
urls: {
sandbox: '#',
live: '#',
},
url: 'https://developer.paypal.com/studio/checkout/advanced',
class: 'small-button',
},
],
@ -122,20 +116,14 @@ const Features = {
{
type: 'secondary',
text: __( 'Apply', 'woocommerce-paypal-payments' ),
urls: {
sandbox: '#',
live: '#',
},
url: 'https://developer.paypal.com/docs/checkout/apm/',
showWhen: 'disabled',
class: 'small-button',
},
{
type: 'tertiary',
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
urls: {
sandbox: '#',
live: '#',
},
url: 'https://developer.paypal.com/docs/checkout/apm/',
class: 'small-button',
},
],
@ -176,10 +164,7 @@ const Features = {
{
type: 'tertiary',
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
urls: {
sandbox: '#',
live: '#',
},
url: 'https://developer.paypal.com/docs/checkout/apm/google-pay/',
class: 'small-button',
},
],
@ -240,10 +225,7 @@ const Features = {
{
type: 'tertiary',
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
urls: {
sandbox: '#',
live: '#',
},
url: 'https://developer.paypal.com/docs/checkout/apm/apple-pay/',
class: 'small-button',
},
],
@ -283,10 +265,7 @@ const Features = {
{
type: 'tertiary',
text: __( 'Learn more', 'woocommerce-paypal-payments' ),
urls: {
sandbox: '#',
live: '#',
},
url: 'https://developer.paypal.com/studio/checkout/pay-later/us',
class: 'small-button',
},
],

78
modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js
View file

@ -1,27 +1,27 @@
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { useState, useMemo } from '@wordpress/element';
import { Button, Icon } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import { reusableBlock } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
import SettingsCard from '../../ReusableComponents/SettingsCard';
import TodoSettingsBlock from '../../ReusableComponents/SettingsBlocks/TodoSettingsBlock';
import FeatureSettingsBlock from '../../ReusableComponents/SettingsBlocks/FeatureSettingsBlock';
import { TITLE_BADGE_POSITIVE } from '../../ReusableComponents/TitleBadge';
import { useMerchantInfo } from '../../../data/common/hooks';
import { STORE_NAME } from '../../../data/common';
import Features from './TabSettingsElements/Blocks/Features';
import { todosData } from '../../../data/settings/tab-overview-todos-data';
import SettingsCard from '../../../ReusableComponents/SettingsCard';
import TodoSettingsBlock from '../../../ReusableComponents/SettingsBlocks/TodoSettingsBlock';
import FeatureSettingsBlock from '../../../ReusableComponents/SettingsBlocks/FeatureSettingsBlock';
import { TITLE_BADGE_POSITIVE } from '../../../ReusableComponents/TitleBadge';
import { useMerchantInfo } from '../../../../data/common/hooks';
import { STORE_NAME } from '../../../../data/common';
import Features from '../Components/Overview/Features';
import { todosData } from '../../../../data/settings/tab-overview-todos-data';
import {
NOTIFICATION_ERROR,
NOTIFICATION_SUCCESS,
} from '../../ReusableComponents/Icons';
} from '../../../ReusableComponents/Icons';
const TabOverview = () => {
const [ isRefreshing, setIsRefreshing ] = useState( false );
const { merchant, merchantFeatures } = useMerchantInfo();
const { merchant, features: merchantFeatures } = useMerchantInfo();
const { refreshFeatureStatuses, setActiveModal } =
useDispatch( STORE_NAME );
const { createSuccessNotice, createErrorNotice } =
@ -49,35 +49,35 @@ const TabOverview = () => {
try {
const result = await refreshFeatureStatuses();
if ( result && ! result.success ) {
const errorMessage = sprintf(
/* translators: %s: error message */
__(
'Operation failed: %s Check WooCommerce logs for more details.',
'woocommerce-paypal-payments'
),
result.message ||
__( 'Unknown error', 'woocommerce-paypal-payments' )
);
const errorMessage = sprintf(
/* translators: %s: error message */
__(
'Operation failed: %s Check WooCommerce logs for more details.',
'woocommerce-paypal-payments'
),
result.message ||
__( 'Unknown error', 'woocommerce-paypal-payments' )
);
createErrorNotice( errorMessage, {
icon: NOTIFICATION_ERROR,
} );
console.error(
'Failed to refresh features:',
result.message || 'Unknown error'
);
createErrorNotice( errorMessage, {
icon: NOTIFICATION_ERROR,
} );
console.error(
'Failed to refresh features:',
result.message || 'Unknown error'
);
} else {
createSuccessNotice(
__(
'Features refreshed successfully.',
'woocommerce-paypal-payments'
),
{
icon: NOTIFICATION_SUCCESS,
}
);
console.log( 'Features refreshed successfully.' );
}
createSuccessNotice(
__(
'Features refreshed successfully.',
'woocommerce-paypal-payments'
),
{
icon: NOTIFICATION_SUCCESS,
}
);
console.log( 'Features refreshed successfully.' );
}
} finally {
setIsRefreshing( false );
}
@ -161,7 +161,7 @@ const TabOverview = () => {
: button.urls.live
: button.url,
} ) ),
isBusy: isRefreshing,
isBusy: isRefreshing,
enabled: feature.enabled,
notes: feature.notes,
badge: feature.enabled

2
modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js
View file

@ -1,6 +1,6 @@
import { __ } from '@wordpress/i18n';
import TabOverview from '../../Overview/TabOverview';
import TabOverview from './TabOverview';
import TabPaymentMethods from '../../Overview/TabPaymentMethods';
import TabSettings from '../../Overview/TabSettings';
import TabStyling from './TabStyling';

1
modules/ppcp-settings/resources/js/data/common/hooks.js
View file

@ -133,6 +133,7 @@ export const useWebhooks = () => {
checkWebhookSimulationState,
};
};
export const useMerchantInfo = () => {
const { isReady, merchant, features } = useHooks();
const { refreshMerchantData } = useDispatch( STORE_NAME );

6
modules/ppcp-settings/resources/js/data/common/reducer.js
View file

@ -45,6 +45,12 @@ const defaultTransient = Object.freeze( {
google_pay: {
enabled: false,
},
alternative_payment_methods: {
enabled: false,
},
pay_later_messaging: {
enabled: false,
},
} ),
webhooks: Object.freeze( [] ),