Merge pull request #2928 from woocommerce/PCP-3931-resolve-merge-conf…

…licts Implement logic for Feature-Refresh button, fix (3931)
woocommerce · Dec 17, 2024 · 24fb109 · 24fb109
2 parents 4949a4f + a77b209
commit 24fb109
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 93 deletions.
diff --git a/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
@@ -11,56 +11,42 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 		}
 
 		return (
-			<>
-				<span className="ppcp-r-feature-item__notes">
-					{ notes.map( ( note, index ) => (
-						<span key={ index }>{ note }</span>
-					) ) }
-				</span>
-			</>
+			<span className="ppcp-r-feature-item__notes">
+				{ notes.map( ( note, index ) => (
+					<span key={ index }>{ note }</span>
+				) ) }
+			</span>
 		);
 	};
 
 	return (
-		<SettingsBlock
-			{ ...props }
-			className="ppcp-r-settings-block__feature"
-			components={ [
-				() => (
-					<>
-						<Header>
-							<Title>
-								{ title }
-								{ props.actionProps?.enabled && (
-									<TitleBadge
-										{ ...props.actionProps?.badge }
-									/>
-								) }
-							</Title>
-							<Description className="ppcp-r-settings-block__feature__description">
-								{ description }
-								{ printNotes() }
-							</Description>
-						</Header>
-						<Action>
-							<div className="ppcp-r-feature-item__buttons">
-								{ props.actionProps?.buttons.map(
-									( button ) => (
-										<Button
-											href={ button.url }
-											key={ button.text }
-											variant={ button.type }
-										>
-											{ button.text }
-										</Button>
-									)
-								) }
-							</div>
-						</Action>
-					</>
-				),
-			] }
-		/>
+		<SettingsBlock { ...props } className="ppcp-r-settings-block__feature">
+			<Header>
+				<Title>
+					{ title }
+					{ props.actionProps?.enabled && (
+						<TitleBadge { ...props.actionProps?.badge } />
+					) }
+				</Title>
+				<Description className="ppcp-r-settings-block__feature__description">
+					{ description }
+					{ printNotes() }
+				</Description>
+			</Header>
+			<Action>
+				<div className="ppcp-r-feature-item__buttons">
+					{ props.actionProps?.buttons.map( ( button ) => (
+						<Button
+							href={ button.url }
+							key={ button.text }
+							variant={ button.type }
+						>
+							{ button.text }
+						</Button>
+					) ) }
+				</div>
+			</Action>
+		</SettingsBlock>
 	);
 };
 

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js
@@ -1,13 +1,14 @@
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import { Button, Icon } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { reusableBlock } from '@wordpress/icons';
+
 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 data from '../../../utils/data';
 import { useMerchantInfo } from '../../../data/common/hooks';
-import { useDispatch } from '@wordpress/data';
 import { STORE_NAME } from '../../../data/common';
 
 const TabOverview = () => {
@@ -31,6 +32,7 @@ const TabOverview = () => {
 
 		const result = await refreshFeatureStatuses();
 
+		// TODO: Implement the refresh logic, remove this debug code -- PCP-4024
 		if ( result && ! result.success ) {
 			console.error(
 				'Failed to refresh features:',
@@ -88,7 +90,7 @@ const TabOverview = () => {
 							onClick={ refreshHandler }
 							disabled={ isRefreshing }
 						>
-							{ data().getImage( 'icon-refresh.svg' ) }
+							<Icon icon={ reusableBlock } size={ 18 } />
 							{ isRefreshing
 								? __(
 										'Refreshing…',
@@ -127,6 +129,7 @@ const TabOverview = () => {
 	);
 };
 
+// TODO: This list should be refactored into a separate module, maybe utils/thingsToDoNext.js
 const todosDataDefault = [
 	{
 		value: 'paypal_later_messaging',
@@ -162,6 +165,7 @@ const todosDataDefault = [
 	},
 ];
 
+// TODO: Hardcoding this list here is not the best idea. Can we move this to a REST API response?
 const featuresDefault = [
 	{
 		id: 'save_paypal_and_venmo',

diff --git a/modules/ppcp-settings/resources/js/data/common/actions.js b/modules/ppcp-settings/resources/js/data/common/actions.js
@@ -187,7 +187,13 @@ export const connectViaIdAndSecret = function* () {
  * @return {Action} The action.
  */
 export const refreshMerchantData = function* () {
-	return yield { type: ACTION_TYPES.DO_REFRESH_MERCHANT };
+	const result = yield { type: ACTION_TYPES.DO_REFRESH_MERCHANT };
+
+	if ( result.success && result.merchant ) {
+		yield hydrate( result );
+	}
+
+	return result;
 };
 
 /**
@@ -201,7 +207,9 @@ export const refreshFeatureStatuses = function* () {
 	const result = yield { type: ACTION_TYPES.DO_REFRESH_FEATURES };
 
 	if ( result && result.success ) {
-		return yield dispatch( STORE_NAME ).refreshMerchantData();
+		// TODO: Review if we can get the updated feature details in the result.data instead of
+		//       doing a second refreshMerchantData() request.
+		yield refreshMerchantData();
 	}
 
 	return result;

diff --git a/modules/ppcp-settings/resources/js/data/common/controls.js b/modules/ppcp-settings/resources/js/data/common/controls.js
@@ -7,11 +7,9 @@
  * @file
  */
 
-import { dispatch } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 
 import {
-	STORE_NAME,
 	REST_PERSIST_PATH,
 	REST_MANUAL_CONNECTION_PATH,
 	REST_CONNECTION_URL_PATH,
@@ -23,7 +21,7 @@ import ACTION_TYPES from './action-types';
 export const controls = {
 	async [ ACTION_TYPES.DO_PERSIST_DATA ]( { data } ) {
 		try {
-			return await apiFetch( {
+			await apiFetch( {
 				path: REST_PERSIST_PATH,
 				method: 'POST',
 				data,
@@ -34,10 +32,8 @@ export const controls = {
 	},
 
 	async [ ACTION_TYPES.DO_SANDBOX_LOGIN ]() {
-		let result = null;
-
 		try {
-			result = await apiFetch( {
+			return apiFetch( {
 				path: REST_CONNECTION_URL_PATH,
 				method: 'POST',
 				data: {
@@ -46,20 +42,16 @@ export const controls = {
 				},
 			} );
 		} catch ( e ) {
-			result = {
+			return {
 				success: false,
 				error: e,
 			};
 		}
-
-		return result;
 	},
 
 	async [ ACTION_TYPES.DO_PRODUCTION_LOGIN ]( { products } ) {
-		let result = null;
-
 		try {
-			result = await apiFetch( {
+			return apiFetch( {
 				path: REST_CONNECTION_URL_PATH,
 				method: 'POST',
 				data: {
@@ -68,24 +60,20 @@ export const controls = {
 				},
 			} );
 		} catch ( e ) {
-			result = {
+			return {
 				success: false,
 				error: e,
 			};
 		}
-
-		return result;
 	},
 
 	async [ ACTION_TYPES.DO_MANUAL_CONNECTION ]( {
 		clientId,
 		clientSecret,
 		useSandbox,
 	} ) {
-		let result = null;
-
 		try {
-			result = await apiFetch( {
+			return await apiFetch( {
 				path: REST_MANUAL_CONNECTION_PATH,
 				method: 'POST',
 				data: {
@@ -95,54 +83,36 @@ export const controls = {
 				},
 			} );
 		} catch ( e ) {
-			result = {
+			return {
 				success: false,
 				error: e,
 			};
 		}
-
-		return result;
 	},
 
 	async [ ACTION_TYPES.DO_REFRESH_MERCHANT ]() {
-		let result = null;
-
 		try {
-			result = await apiFetch( { path: REST_HYDRATE_MERCHANT_PATH } );
-
-			if ( result.success && result.merchant ) {
-				await dispatch( STORE_NAME ).hydrate( result );
-			}
+			return await apiFetch( { path: REST_HYDRATE_MERCHANT_PATH } );
 		} catch ( e ) {
-			result = {
+			return {
 				success: false,
 				error: e,
 			};
 		}
-
-		return result;
 	},
 
 	async [ ACTION_TYPES.DO_REFRESH_FEATURES ]() {
-		let result = null;
-
 		try {
-			result = await apiFetch( {
+			return await apiFetch( {
 				path: REST_REFRESH_FEATURES_PATH,
 				method: 'POST',
 			} );
-
-			if ( result.success ) {
-				result = await dispatch( STORE_NAME ).refreshMerchantData();
-			}
 		} catch ( e ) {
-			result = {
+			return {
 				success: false,
 				error: e,
 				message: e.message,
 			};
 		}
-
-		return result;
 	},
 };