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

Implement logic for Feature-Refresh button, fix (3931)

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

@@ -11,30 +11,21 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 		}
 
 		return (
-			<>
 			<span className="ppcp-r-feature-item__notes">
 				{ notes.map( ( note, index ) => (
 					<span key={ index }>{ note }</span>
 				) ) }
 			</span>
-			</>
 		);
 	};
 
 	return (
-		<SettingsBlock
+		<SettingsBlock { ...props } className="ppcp-r-settings-block__feature">
-			{ ...props }
-			className="ppcp-r-settings-block__feature"
-			components={ [
-				() => (
-					<>
 			<Header>
 				<Title>
 					{ title }
 					{ props.actionProps?.enabled && (
-									<TitleBadge
+						<TitleBadge { ...props.actionProps?.badge } />
-										{ ...props.actionProps?.badge }
-									/>
 					) }
 				</Title>
 				<Description className="ppcp-r-settings-block__feature__description">
@@ -44,8 +35,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 			</Header>
 			<Action>
 				<div className="ppcp-r-feature-item__buttons">
-								{ props.actionProps?.buttons.map(
+					{ props.actionProps?.buttons.map( ( button ) => (
-									( button ) => (
 						<Button
 							href={ button.url }
 							key={ button.text }
@@ -53,14 +43,10 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 						>
 							{ button.text }
 						</Button>
-									)
+					) ) }
-								) }
 				</div>
 			</Action>
-					</>
+		</SettingsBlock>
-				),
-			] }
-		/>
 	);
 };
 

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',

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;

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,13 +60,11 @@ export const controls = {
 				},
 			} );
 		} catch ( e ) {
-			result = {
+			return {
 				success: false,
 				error: e,
 			};
 		}
-
-		return result;
 	},
 
 	async [ ACTION_TYPES.DO_MANUAL_CONNECTION ]( {
@@ -82,10 +72,8 @@ export const controls = {
 		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 } );
+			return await apiFetch( { path: REST_HYDRATE_MERCHANT_PATH } );
-
-			if ( result.success && result.merchant ) {
-				await dispatch( STORE_NAME ).hydrate( result );
-			}
 		} 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;
 	},
 };