diff --git a/plugins/woocommerce-admin/client/dashboard/customizable.js b/plugins/woocommerce-admin/client/dashboard/customizable.js new file mode 100644 index 00000000000..1eeda7b1942 --- /dev/null +++ b/plugins/woocommerce-admin/client/dashboard/customizable.js @@ -0,0 +1,31 @@ +/** @format */ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Component, Fragment } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import './style.scss'; +import DashboardCharts from './dashboard-charts'; +import Leaderboards from './leaderboards'; +import { ReportFilters, H } from '@woocommerce/components'; +import StorePerformance from './store-performance'; + +// @todo Replace dashboard-charts, leaderboards, and store-performance sections as neccessary with customizable equivalents. +export default class CustomizableDashboard extends Component { + render() { + const { query, path } = this.props; + return ( + + { __( 'Customizable Dashboard', 'woocommerce-admin' ) } + + + + + + ); + } +} diff --git a/plugins/woocommerce-admin/client/dashboard/index.js b/plugins/woocommerce-admin/client/dashboard/index.js index 2eaa6322601..4b456fc4ade 100644 --- a/plugins/woocommerce-admin/client/dashboard/index.js +++ b/plugins/woocommerce-admin/client/dashboard/index.js @@ -9,6 +9,7 @@ import { Component, Fragment } from '@wordpress/element'; * Internal dependencies */ import './style.scss'; +import CustomizableDashboard from './customizable'; import DashboardCharts from './dashboard-charts'; import Header from 'header'; import Leaderboards from './leaderboards'; @@ -17,23 +18,36 @@ import StorePerformance from './store-performance'; import TaskList from './task-list'; export default class Dashboard extends Component { - render() { - const { query, path } = this.props; + renderDashboardOutput() { // @todo This should be replaced by a check of tasks from the REST API response from #1897. const requiredTasksComplete = true; + if ( window.wcAdminFeatures.onboarding && ! requiredTasksComplete ) { + return ; + } + + const { query, path } = this.props; + + // @todo When the customizable dashboard is ready to be launched, we can pull `CustomizableDashboard`'s render + // method into `index.js`, and replace both this feature check, and the existing dashboard below. + if ( window.wcAdminFeatures[ 'dashboard/customizable' ] ) { + return ; + } + + return ( + + + + + + + ); + } + + render() { return (
- { window.wcAdminFeatures.onboarding && ! requiredTasksComplete ? ( - - ) : ( - - - - - - - ) } + { this.renderDashboardOutput() } ); } diff --git a/plugins/woocommerce-admin/config/core.json b/plugins/woocommerce-admin/config/core.json index cd442ce2a62..c22718742d5 100644 --- a/plugins/woocommerce-admin/config/core.json +++ b/plugins/woocommerce-admin/config/core.json @@ -3,6 +3,7 @@ "activity-panels": false, "analytics": false, "dashboard": false, + "dashboard/customizable": false, "devdocs": false, "onboarding": false, "store-alerts": false diff --git a/plugins/woocommerce-admin/config/development.json b/plugins/woocommerce-admin/config/development.json index 3f47fbe668c..45b05766574 100644 --- a/plugins/woocommerce-admin/config/development.json +++ b/plugins/woocommerce-admin/config/development.json @@ -3,6 +3,7 @@ "activity-panels": true, "analytics": true, "dashboard": true, + "dashboard/customizable": true, "devdocs": true, "onboarding": true, "store-alerts": true diff --git a/plugins/woocommerce-admin/config/plugin.json b/plugins/woocommerce-admin/config/plugin.json index 2cd8c9558b6..d93bef7e214 100644 --- a/plugins/woocommerce-admin/config/plugin.json +++ b/plugins/woocommerce-admin/config/plugin.json @@ -3,6 +3,7 @@ "activity-panels": true, "analytics": true, "dashboard": true, + "dashboard/customizable": false, "devdocs": false, "onboarding": false, "store-alerts": true