diff --git a/client/dashboard/customizable.js b/client/dashboard/customizable.js index f11e79c598..1ebe620f28 100644 --- a/client/dashboard/customizable.js +++ b/client/dashboard/customizable.js @@ -302,7 +302,10 @@ class CustomizableDashboard extends Component { render() { const { query, taskListHidden, taskListComplete } = this.props; - const isTaskListEnabled = isOnboardingEnabled() && ! taskListHidden; + const isTaskListEnabled = + isOnboardingEnabled() && + ! taskListHidden && + ! window.wcAdminFeatures.homepage; const isDashboardShown = ! isTaskListEnabled || ( ! query.task && taskListComplete ); @@ -311,7 +314,7 @@ class CustomizableDashboard extends Component { { isTaskListEnabled && ( }> - + ) } { isDashboardShown && this.renderDashboardReports() } diff --git a/client/dashboard/style.scss b/client/dashboard/style.scss index e1371d77a5..c1553798dc 100644 --- a/client/dashboard/style.scss +++ b/client/dashboard/style.scss @@ -77,3 +77,17 @@ padding-bottom: 10px; } } + +.woocommerce-task-dashboard__body { + .woocommerce-task-dashboard__container { + .woocommerce-task-card { + .components-card__header.is-size-large { + padding-bottom: 12px; + + .woocommerce-card__menu { + margin-top: 8px; + } + } + } + } +} diff --git a/client/homepage/layout.js b/client/homepage/layout.js index bddcc0e0d9..25a25b2923 100644 --- a/client/homepage/layout.js +++ b/client/homepage/layout.js @@ -15,11 +15,6 @@ import classnames from 'classnames'; import { get } from 'lodash'; import PropTypes from 'prop-types'; -/** - * WooCommerce dependencies - */ -import { Spinner } from '@woocommerce/components'; - /** * Internal dependencies */ @@ -57,8 +52,8 @@ export const Layout = ( props ) => { }; }, [] ); - const { query, requestingTaskList, taskListHidden } = props; - const isTaskListEnabled = taskListHidden === false; + const { query, requestingTaskList, taskListComplete, taskListHidden } = props; + const isTaskListEnabled = taskListHidden === false && ! taskListComplete; const isDashboardShown = ! isTaskListEnabled || ! query.task; const renderColumns = () => { @@ -105,11 +100,8 @@ export const Layout = ( props ) => { } return ( - }> - + }> + ); }; @@ -133,6 +125,10 @@ Layout.propTypes = { * If the task list option is being fetched. */ requestingTaskList: PropTypes.bool.isRequired, + /** + * If the task list has been completed. + */ + taskListComplete: PropTypes.bool, /** * If the task list is hidden. */ @@ -152,13 +148,16 @@ export default compose( if ( isOnboardingEnabled() ) { const options = getOptions( [ + 'woocommerce_task_list_complete', 'woocommerce_task_list_hidden', ] ); return { requestingTaskList: isGetOptionsRequesting( [ + 'woocommerce_task_list_complete', 'woocommerce_task_list_hidden', ] ), + taskListComplete: get( options, [ 'woocommerce_task_list_complete' ] ), taskListHidden: get( options, [ 'woocommerce_task_list_hidden' ] ) === 'yes', }; } diff --git a/client/homepage/test/index.js b/client/homepage/test/index.js index 6323a6fbba..1cbe7e2e38 100644 --- a/client/homepage/test/index.js +++ b/client/homepage/test/index.js @@ -61,4 +61,32 @@ describe( 'Homepage Layout', () => { const taskList = await screen.findByText( '[TaskList]' ) expect( taskList ).toBeDefined(); } ); + + it( 'should not show TaskList when user has hidden', () => { + render( + + ); + + const taskList = screen.queryByText( '[TaskList]' ) + expect( taskList ).toBeNull(); + } ); + + it( 'should not show TaskList when it is complete', () => { + render( + + ); + + const taskList = screen.queryByText( '[TaskList]' ) + expect( taskList ).toBeNull(); + } ); } ); diff --git a/client/task-list/index.js b/client/task-list/index.js index 7366e67dd5..ba79ca7f14 100644 --- a/client/task-list/index.js +++ b/client/task-list/index.js @@ -6,13 +6,20 @@ import { Component, cloneElement, Fragment } from '@wordpress/element'; import { get, isEqual } from 'lodash'; import { compose } from '@wordpress/compose'; import classNames from 'classnames'; -import { Snackbar, Icon, Button, Modal } from '@wordpress/components'; +import { + Button, + Card, + CardBody, + CardHeader, + Modal, +} from '@wordpress/components'; import { withDispatch } from '@wordpress/data'; +import { Icon, check, chevronRight } from '@wordpress/icons'; /** * WooCommerce dependencies */ -import { Card, List, MenuItem, EllipsisMenu } from '@woocommerce/components'; +import { H, List, EllipsisMenu } from '@woocommerce/components'; import { updateQueryString } from '@woocommerce/navigation'; import { PLUGINS_STORE_NAME } from '@woocommerce/data'; @@ -187,56 +194,24 @@ class TaskDashboard extends Component { return currentTask; } - renderPrompt() { - if ( this.props.promptShown ) { - return null; - } - - return ( - -
-
- - { __( 'Is this card useful?', 'woocommerce-admin' ) } - -
- - - -
-
- - ); - } - renderMenu() { return ( - ( -
- - this.hideTaskCard( 'remove_card' ) - } - > - - { __( 'Remove this card', 'woocommerce-admin' ) } - -
- ) } - /> +
+ ( +
+ +
+ ) } + /> +
); } @@ -313,38 +288,8 @@ class TaskDashboard extends Component { ); } - onSkipStoreSetup = () => { - const completedTaskKeys = this.getTasks() - .filter( ( x ) => x.completed ) - .map( ( x ) => x.key ); - - recordEvent( 'tasklist_skip', { - completed_tasks_count: completedTaskKeys.length, - completed_tasks: completedTaskKeys, - reason: 'skip', - } ); - - this.props.updateOptions( { - woocommerce_task_list_hidden: 'yes', - } ); - }; - - renderSkipActions() { - return ( -
- -
- ); - } - render() { - const { inline, query } = this.props; + const { query } = this.props; const { isCartModalOpen, isWelcomeModalOpen } = this.state; const currentTask = this.getCurrentTask(); const listTasks = this.getTasks().map( ( task ) => { @@ -352,21 +297,36 @@ class TaskDashboard extends Component { task.completed ? 'is-complete' : null, task.className ); - task.before = task.completed ? ( - check_circle - ) : ( - { task.icon } - ); - task.after = ( - chevron_right + task.before = ( +
+ { task.completed && } +
); + if ( ! task.completed ) { + task.after = task.time ? ( + + { task.time } + + ) : ( + + ); + } + if ( ! task.onClick ) { task.onClick = () => updateQueryString( { task: task.key } ); } return task; } ); + const numCompleteTasks = listTasks.filter( ( task ) => task.completed ) + .length; + const progressBarClass = classNames( + 'woocommerce-task-card__progress-bar', + { + completed: listTasks.length === numCompleteTasks, + } + ); return ( @@ -378,22 +338,28 @@ class TaskDashboard extends Component { ) : ( - + + + + { __( + 'Store setup', + 'woocommerce-admin' + ) } + + { this.renderMenu() } + + + + - { inline && this.renderPrompt() } { isWelcomeModalOpen && this.renderWelcomeModal() } - { this.renderSkipActions() } ) }
@@ -419,16 +385,10 @@ export default compose( const profileItems = getProfileItems(); const options = getOptions( [ - 'woocommerce_task_list_prompt_shown', 'woocommerce_task_list_welcome_modal_dismissed', 'woocommerce_task_list_hidden', 'woocommerce_task_list_tracked_completed_tasks', ] ); - const promptShown = get( - options, - [ 'woocommerce_task_list_prompt_shown' ], - false - ); const modalDismissed = get( options, [ 'woocommerce_task_list_welcome_modal_dismissed' ], @@ -459,7 +419,6 @@ export default compose( return { modalDismissed, profileItems, - promptShown, taskListPayments, isJetpackConnected: isJetpackConnected(), incompleteTasks, diff --git a/client/task-list/placeholder.js b/client/task-list/placeholder.js index 47cbb6c6df..eada327353 100644 --- a/client/task-list/placeholder.js +++ b/client/task-list/placeholder.js @@ -18,9 +18,6 @@ const TaskListPlaceholder = ( props ) => {
-
- -
@@ -35,10 +32,6 @@ const TaskListPlaceholder = ( props ) => {
-
- -
-
diff --git a/client/task-list/style.scss b/client/task-list/style.scss index 473e6a3cc8..7ef41b5d88 100644 --- a/client/task-list/style.scss +++ b/client/task-list/style.scss @@ -1,13 +1,49 @@ - - .woocommerce-task-dashboard__body { .woocommerce-card__description { color: $studio-gray-50; } - .woocommerce-task-card .woocommerce-card__body { - border-top: 1px solid $studio-gray-5; - padding: 0; + .woocommerce-task-dashboard__container { + .woocommerce-task-card { + .components-card__header.is-size-large { + min-height: unset; + padding-top: 0; + display: grid; + grid-template-columns: auto 24px; + } + + .components-card__body.is-size-large { + padding: 0; + } + + .woocommerce-list__item.is-complete .woocommerce-task__icon { + background-color: theme(button); // $theme-color + } + + .woocommerce-list__item:not(.is-complete) { + .woocommerce-task__icon { + border: 1px solid $core-grey-light-500; + background: $white; + } + } + + .woocommerce-list__item-before .woocommerce-task__icon { + border-radius: 50%; + width: 32px; + height: 32px; + } + + .woocommerce-list__item-before svg { + fill: $white; + position: relative; + top: 4px; + left: 5px; + } + + .components-popover__content { + min-width: unset; + } + } } .woocommerce-card.is-narrow { @@ -20,63 +56,53 @@ .components-modal__frame .components-button.is-button { height: 40px; min-width: 106px; - margin: $gap $gap-smaller 0 0; + margin: 0; justify-content: center; font-size: 14px; font-weight: 500; + display: inline-block; &:not(.is-primary) { - color: $studio-pink-50; + color: theme(button); // $theme-color } } - .woocommerce-task-dashboard__container { - .woocommerce-task-card__prompt-actions { - .components-button:not(.components-icon-button) { - color: $studio-white; + .woocommerce-list { + margin: 0; + + .woocommerce-list__item { + &:not(:first-child) { + border-top: 1px solid $light-gray-500; } - } - .skip-actions { - text-align: center; + &:hover { + background: $light-gray-100; - button.components-button.is-secondary { - color: $studio-gray-50; - margin: 0; - min-width: 0; + .woocommerce-list__item-title { + color: color(theme(button) shade(25%)); + } } } - } - .woocommerce-list { - margin: 0; + .woocommerce-list__item-title { + color: theme(button); // $theme-color + } - .woocommerce-list__item.is-complete { - background: $studio-gray-0; + .woocommerce-task-estimated-time { + color: $dark-gray-500; + } - .woocommerce-list__item-before i { - color: $studio-gray-20; - } + .woocommerce-list__item.is-complete { + background: $light-gray-100; .woocommerce-list__item-title { - color: $studio-gray-50; + color: $dark-gray-500; } .woocommerce-list__item-content { display: none; } } - - .woocommerce-list__item-before i { - width: 36px; - height: 36px; - font-size: 36px; - color: $studio-woocommerce-purple-60; - } - - .woocommerce-list__item-after i { - color: $studio-gray-60; - } } .woocommerce-list__item-title { @@ -284,7 +310,7 @@ .components-button.is-primary { min-width: 328px; - @include breakpoint( '<782px' ) { + @include breakpoint('<782px') { min-width: auto; } } @@ -377,7 +403,7 @@ } } - @include breakpoint( '<600px' ) { + @include breakpoint('<600px') { .woocommerce-card__body { flex-direction: column; } @@ -443,8 +469,11 @@ } } -.woocommerce-task-dashboard__container .woocommerce-task-payments .woocommerce-task-payments__actions { - text-align: center; +.woocommerce-task-dashboard__container { + .woocommerce-task-payments + .woocommerce-task-payments__actions { + text-align: center; + } button.components-button.is-primary { margin: 0; @@ -541,18 +570,16 @@ } .woocommerce-task-card__section-controls { - .dashicon { - margin: 0 $gap-smaller 0 0; - vertical-align: bottom; - } - - .woocommerce-ellipsis-menu__item { - padding-bottom: 10px; - } + text-align: center; } .woocommerce-task-dashboard__container { .woocommerce-task-card.is-loading { + .woocommerce-card__body { + border-top: 1px solid $studio-gray-5; + padding: 0; + } + .is-placeholder { @include placeholder(); display: inline-block; @@ -566,13 +593,6 @@ } } - .woocommerce-card__description { - .is-placeholder { - width: 90%; - height: 24px; - } - } - .woocommerce-list__item-before { .is-placeholder { height: 36px; @@ -589,20 +609,54 @@ width: 60%; } } - - .woocommerce-list__item-content { - .is-placeholder { - height: 20px; - width: 80%; - } - } } .woocommerce-list__item-after { .is-placeholder { - height: 24px; - width: 24px; + height: 18px; + width: 60px; } } } } + +.woocommerce-task-dashboard__container .woocommerce-task-card__progress-bar { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 0; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + height: 4px; + width: 100%; + vertical-align: top; + + // Firefox + & { + background-color: $light-gray-300; + } + + &::-moz-progress-bar { + background-color: $dark-gray-500; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + + // Chrome + &::-webkit-progress-bar { + background-color: $light-gray-300; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + + &::-webkit-progress-value { + background-color: $dark-gray-500; + border-top-left-radius: 2px; + } +} + +.woocommerce-task-dashboard__container .woocommerce-task-card__progress-bar.completed { + &::-webkit-progress-value { + border-top-right-radius: 2px; + } +} diff --git a/client/task-list/tasks.js b/client/task-list/tasks.js index c116b137f2..4939156ebd 100644 --- a/client/task-list/tasks.js +++ b/client/task-list/tasks.js @@ -58,19 +58,28 @@ export function getAllTasks( { ); const tasks = [ + { + key: 'store_details', + title: __( 'Store details', 'woocommerce-admin' ), + container: null, + onClick: () => { + window.location = getAdminLink( + 'admin.php?page=wc-admin&reset_profiler=1' + ); + }, + completed: profileItems.completed, + visible: true, + time: __( '4 minutes', 'woocommerce-admin' ), + }, { key: 'purchase', title: __( 'Purchase & install extensions', 'woocommerce-admin' ), - content: __( - 'Purchase, install, and manage your extensions directly from your dashboard', - 'wooocommerce-admin' - ), - icon: 'extension', container: null, onClick: () => remainingProductIds.length ? toggleCartModal() : null, visible: productIds.length, completed: ! remainingProductIds.length, + time: __( '2 minutes', 'woocommerce-admin' ), }, { key: 'connect', @@ -78,75 +87,50 @@ export function getAllTasks( { 'Connect your store to WooCommerce.com', 'woocommerce-admin' ), - content: __( - 'Install and manage your extensions directly from your Dashboard', - 'wooocommerce-admin' - ), - icon: 'extension', container: , visible: profileItems.items_purchased && ! profileItems.wccom_connected, completed: profileItems.wccom_connected, + time: __( '1 minute', 'woocommerce-admin' ), }, { key: 'products', - title: __( 'Add your first product', 'woocommerce-admin' ), - content: __( - 'Add products manually, import from a sheet or migrate from another platform', - 'wooocommerce-admin' - ), - icon: 'add_box', + title: __( 'Add my products', 'woocommerce-admin' ), container: , completed: hasProducts, visible: true, + time: __( '1 minute per product', 'woocommerce-admin' ), }, { key: 'appearance', - title: __( 'Personalize your store', 'woocommerce-admin' ), - content: __( - 'Create a custom homepage and upload your logo', - 'wooocommerce-admin' - ), - icon: 'palette', + title: __( 'Personalize my store', 'woocommerce-admin' ), container: , completed: isAppearanceComplete, visible: true, + time: __( '2 minutes', 'woocommerce-admin' ), }, { key: 'shipping', title: __( 'Set up shipping', 'woocommerce-admin' ), - content: __( - 'Configure some basic shipping rates to get started', - 'wooocommerce-admin' - ), - icon: 'local_shipping', container: , completed: shippingZonesCount > 0, visible: ( profileItems.product_types && profileItems.product_types.includes( 'physical' ) ) || hasPhysicalProducts, + time: __( '1 minute', 'woocommerce-admin' ), }, { key: 'tax', title: __( 'Set up tax', 'woocommerce-admin' ), - content: __( - 'Choose how to configure tax rates - manually or automatically', - 'wooocommerce-admin' - ), - icon: 'account_balance', container: , completed: isTaxComplete, visible: true, + time: __( '1 minute', 'woocommerce-admin' ), }, { key: 'payments', title: __( 'Set up payments', 'woocommerce-admin' ), - content: __( - 'Select which payment providers you’d like to use and configure them', - 'wooocommerce-admin' - ), - icon: 'payment', container: , completed: paymentsCompleted || paymentsSkipped, onClick: () => { @@ -159,6 +143,7 @@ export function getAllTasks( { updateQueryString( { task: 'payments' } ); }, visible: true, + time: __( '2 minutes', 'woocommerce-admin' ), }, ]; diff --git a/src/Features/Onboarding.php b/src/Features/Onboarding.php index bf491a1def..a7205c8c7c 100644 --- a/src/Features/Onboarding.php +++ b/src/Features/Onboarding.php @@ -500,8 +500,9 @@ public function component_settings( $settings ) { * @return array */ public function preload_options( $options ) { - $options[] = 'woocommerce_task_list_hidden'; + $options[] = 'woocommerce_task_list_complete'; $options[] = 'woocommerce_task_list_do_this_later'; + $options[] = 'woocommerce_task_list_hidden'; if ( ! self::should_show_tasks() && ! self::should_show_profiler() ) { return $options;