diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js index cb7314425..da4fa5012 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js @@ -22,8 +22,34 @@ import { } from '../../../ReusableComponents/Icons'; const TabOverview = () => { - const [ isRefreshing, setIsRefreshing ] = useState( false ); + return ( +
+ { todosData.length > 0 && ( + + + + ) } + + +
+ ); +}; + +export default TabOverview; + +const OverviewFeatures = () => { + const [ isRefreshing, setIsRefreshing ] = useState( false ); const { merchant, features: merchantFeatures } = useMerchantInfo(); const { refreshFeatureStatuses, setActiveModal } = useDispatch( STORE_NAME ); @@ -49,6 +75,7 @@ const TabOverview = () => { const refreshHandler = async () => { setIsRefreshing( true ); + try { const result = await refreshFeatureStatuses(); if ( result && ! result.success ) { @@ -87,156 +114,133 @@ const TabOverview = () => { }; return ( -
- { todosData.length > 0 && ( - - - - ) } - - -

- { __( - 'Enable additional features and capabilities on your WooCommerce store.', - 'woocommerce-paypal-payments' - ) } -

-

- { __( - 'Click Refresh to update your current features after making changes.', - 'woocommerce-paypal-payments' - ) } -

- - - } - contentItems={ features.map( ( feature ) => { - return ( - - ! button.showWhen || // Learn more buttons - ( feature.enabled && - button.showWhen === - 'enabled' ) || - ( ! feature.enabled && - button.showWhen === 'disabled' ) - ) - .map( ( button ) => ( { - ...button, - url: button.urls - ? merchant?.isSandbox - ? button.urls.sandbox - : button.urls.live - : button.url, - } ) ), - isBusy: isRefreshing, - enabled: feature.enabled, - notes: feature.notes, - badge: feature.enabled - ? { - text: __( - 'Active', - 'woocommerce-paypal-payments' - ), - type: TITLE_BADGE_POSITIVE, - } - : undefined, - } } - /> - ); - } ) } - /> - - +

+ { __( + 'Enable additional features and capabilities on your WooCommerce store.', + 'woocommerce-paypal-payments' + ) } +

+

+ { __( + 'Click Refresh to update your current features after making changes.', + 'woocommerce-paypal-payments' + ) } +

+ + + } + contentItems={ features.map( ( feature ) => { + return ( + ! button.showWhen || // Learn more buttons + ( feature.enabled && + button.showWhen === 'enabled' ) || + ( ! feature.enabled && + button.showWhen === 'disabled' ) + ) + .map( ( button ) => ( { + ...button, + url: button.urls + ? merchant?.isSandbox + ? button.urls.sandbox + : button.urls.live + : button.url, + } ) ), + isBusy: isRefreshing, + enabled: feature.enabled, + notes: feature.notes, + badge: feature.enabled + ? { + text: __( + 'Active', + 'woocommerce-paypal-payments' + ), + type: TITLE_BADGE_POSITIVE, + } + : undefined, } } - />, - , - ] } - /> -
+ /> + ); + } ) } + /> ); }; -export default TabOverview; +const OverviewHelp = () => { + return ( + , + , + ] } + /> + ); +};