diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js index f2d66e9a3..e2681a909 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js @@ -11,56 +11,42 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => { } return ( - <> - - { notes.map( ( note, index ) => ( - { note } - ) ) } - - + + { notes.map( ( note, index ) => ( + { note } + ) ) } + ); }; return ( - ( - <> -
- - { title } - { props.actionProps?.enabled && ( - <TitleBadge - { ...props.actionProps?.badge } - /> - ) } - - - { description } - { printNotes() } - -
- -
- { props.actionProps?.buttons.map( - ( button ) => ( - - ) - ) } -
-
- - ), - ] } - /> + +
+ + { title } + { props.actionProps?.enabled && ( + <TitleBadge { ...props.actionProps?.badge } /> + ) } + + + { description } + { printNotes() } + +
+ +
+ { props.actionProps?.buttons.map( ( button ) => ( + + ) ) } +
+
+
); }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js index fb7fe30c6..102426d0a 100644 --- 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' ) } + { 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 index 1982d7f42..ccbf34ce0 100644 --- 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 index e095d6acb..a088660b9 100644 --- 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,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 } ); - - 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; }, };