Merge pull request #3016 from woocommerce/PCP-3932-implement-logic-fo…

…r-the-features Settings UI: Refactor Overview tab and update Feature button links
woocommerce · Jan 23, 2025 · 143e089 · 143e089
2 parents 3730695 + b2bb4ef
commit 143e089
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 76 deletions.
diff --git a/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
@@ -24,21 +24,25 @@ 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 }
 			>
 				{ button.text }
 			</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 (

diff --git a/...ew/TabSettingsElements/Blocks/Features.js → .../Settings/Components/Overview/Features.js b/...ew/TabSettingsElements/Blocks/Features.js → .../Settings/Components/Overview/Features.js
@@ -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',
 				},
 			],

diff --git a/...omponents/Screens/Overview/TabOverview.js → ...ents/Screens/Settings/Tabs/TabOverview.js b/...omponents/Screens/Overview/TabOverview.js → ...ents/Screens/Settings/Tabs/TabOverview.js
@@ -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

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/index.js
@@ -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';

diff --git a/modules/ppcp-settings/resources/js/data/common/hooks.js b/modules/ppcp-settings/resources/js/data/common/hooks.js
@@ -133,6 +133,7 @@ export const useWebhooks = () => {
 		checkWebhookSimulationState,
 	};
 };
+
 export const useMerchantInfo = () => {
 	const { isReady, merchant, features } = useHooks();
 	const { refreshMerchantData } = useDispatch( STORE_NAME );

diff --git a/modules/ppcp-settings/resources/js/data/common/reducer.js b/modules/ppcp-settings/resources/js/data/common/reducer.js
@@ -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( [] ),