From bb821a76e948a4e92193a0c19420a8356de03b1c Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Wed, 3 Mar 2021 13:05:08 +1300 Subject: [PATCH] Add a back button to the Header when the task list is displayed. (https://github.com/woocommerce/woocommerce-admin/pull/6397) --- .../woocommerce-admin/TESTING-INSTRUCTIONS.md | 29 +++++--- .../woocommerce-admin/client/header/index.js | 67 ++++++++++++++++++- .../client/header/style.scss | 15 ++++- .../client/header/test/index.js | 23 +++++++ plugins/woocommerce-admin/readme.txt | 2 +- 5 files changed, 123 insertions(+), 13 deletions(-) diff --git a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md index 82c6f25402b..448f76a5854 100644 --- a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md +++ b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md @@ -39,11 +39,24 @@ ### Deprecate Onboarding::has_woocommerce_support #6401 -- Clear existing site transients. For example, by using the [Transients Manager](https://wordpress.org/plugins/transients-manager/) plugin, and pressing the "Delete all transients" button it provides. -- Add any new theme to WordPress but **DO NOT** activate it. -- Initialize the Onboarding Wizard. -- See that the Themes step loads fast 😎 -- See that the new theme is listed in the Themes step. +- Clear existing site transients. For example, by using the [Transients Manager](https://wordpress.org/plugins/transients-manager/) plugin, and pressing the "Delete all transients" button it provides. +- Add any new theme to WordPress but **DO NOT** activate it. +- Initialize the Onboarding Wizard. +- See that the Themes step loads fast 😎 +- See that the new theme is listed in the Themes step. + +### Set up tasks can now navigate back to the home screen #6397 + +1. With a fresh install of wc-admin and woocommerce, go to the home screen +2. Going to the homescreen redirects to the profile setup wizard, click "Skip setup store details" to return to the home screen +3. On the home screen you will see the setup task list. It has the heading "Get ready to start selling" + +For each task in that list apart from "Store details": + +1. Click the item +2. You should land on the setup task page +3. A title in the top left should reflect the original task name from the task list. e.g. "Add tax rates" +4. Clicking the chevron to the left of the title should take you back to the home screen ## 2.1.0 @@ -86,9 +99,9 @@ wp option delete 'woocommerce_merchant_email_notifications'; ``` - Run the cron job `wc_admin_daily` (this tool can help [WP Crontrol](https://wordpress.org/plugins/wp-crontrol/)). - - Go to **Tools > Cron Events** and scroll down to the `wc_admin_daily`. - - Hover over the item and click `Edit` change the **Next Run** to `Now` and click `Update Event`. - - It will redirect you to the cron event list, and `wc_admin_daily` should be near the top, if you wait 10 seconds and refresh the page the `wc_admin_daily` should be near the bottom again, this means it has been run, and scheduled again to run tomorrow. + - Go to **Tools > Cron Events** and scroll down to the `wc_admin_daily`. + - Hover over the item and click `Edit` change the **Next Run** to `Now` and click `Update Event`. + - It will redirect you to the cron event list, and `wc_admin_daily` should be near the top, if you wait 10 seconds and refresh the page the `wc_admin_daily` should be near the bottom again, this means it has been run, and scheduled again to run tomorrow. - You should have not received an email note. - Verify the note `wc-admin-add-first-product-note` was added in the DB and its `status` is `unactioned`. You can use a statement like this: diff --git a/plugins/woocommerce-admin/client/header/index.js b/plugins/woocommerce-admin/client/header/index.js index d2065772f6a..f5280eefd90 100644 --- a/plugins/woocommerce-admin/client/header/index.js +++ b/plugins/woocommerce-admin/client/header/index.js @@ -3,11 +3,16 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useEffect, useLayoutEffect, useRef } from '@wordpress/element'; +import { Tooltip } from '@wordpress/components'; import classnames from 'classnames'; import { decodeEntities } from '@wordpress/html-entities'; import { useUserPreferences } from '@woocommerce/data'; import { getSetting } from '@woocommerce/wc-admin-settings'; import { Text } from '@woocommerce/experimental'; +import { Icon, chevronLeft } from '@wordpress/icons'; +import { getHistory, updateQueryString } from '@woocommerce/navigation'; +import { ENTER, SPACE } from '@wordpress/keycodes'; +import { recordEvent } from '@woocommerce/tracks'; /** * Internal dependencies @@ -18,6 +23,59 @@ import { MobileAppBanner } from '../mobile-banner'; import useIsScrolled from '../hooks/useIsScrolled'; import Navigation from '../navigation'; +const renderTaskListBackButton = () => { + const currentUrl = new URL( window.location.href ); + const task = currentUrl.searchParams.get( 'task' ); + + if ( task ) { + const homeText = __( 'WooCommerce Home', 'woocommerce-admin' ); + + const navigateHome = () => { + recordEvent( 'topbar_back_button', { + page_name: getPageTitle( window.title ), + } ); + updateQueryString( {}, getHistory().location.pathname, {} ); + }; + + // if it's a task list page, render a back button to the homescreen + return ( + +
{ + if ( keyCode === ENTER || keyCode === SPACE ) { + navigateHome(); + } + } } + > + +
+ + ); + } + + return null; +}; + +const getPageTitle = ( defaultTitle ) => { + const currentUrl = new URL( window.location.href ); + const task = currentUrl.searchParams.get( 'task' ); + + // If it's the task list then render a title based on which task the user is on. + return ( + { + payments: __( 'Choose payment methods', 'woocommerce-admin' ), + tax: __( 'Add tax rates', 'woocommerce-admin' ), + appearance: __( 'Personalize your store', 'woocommerce-admin' ), + products: __( 'Add products', 'woocommerce-admin' ), + shipping: __( 'Set up shipping costs', 'woocommerce-admin' ), + }[ task ] || defaultTitle + ); +}; + export const Header = ( { sections, isEmbedded = false, query } ) => { const headerElement = useRef( null ); const siteTitle = getSetting( 'siteTitle', '' ); @@ -92,6 +150,9 @@ export const Header = ( { sections, isEmbedded = false, query } ) => { } ); }; + const backButton = renderTaskListBackButton(); + const backButtonClass = backButton ? 'with-back-button' : ''; + return (
{ ! isModalDismissed && ( @@ -103,13 +164,13 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
{ window.wcAdminFeatures.navigation && } - + { renderTaskListBackButton() } - { decodeEntities( pageTitle ) } + { getPageTitle( decodeEntities( pageTitle ) ) } { window.wcAdminFeatures[ 'activity-panels' ] && ( diff --git a/plugins/woocommerce-admin/client/header/style.scss b/plugins/woocommerce-admin/client/header/style.scss index c9ec1c8ebc3..e300c7b3bb4 100644 --- a/plugins/woocommerce-admin/client/header/style.scss +++ b/plugins/woocommerce-admin/client/header/style.scss @@ -17,6 +17,16 @@ min-height: $header-height; } + .woocommerce-layout__header-back-button { + cursor: pointer; + margin-left: $gutter-large; + display: flex; + + &:focus { + box-shadow: inset -1px -1px 0 #757575, inset 1px 1px 0 #757575; + } + } + @include breakpoint( '<782px' ) { flex-flow: row wrap; top: $adminbar-height-mobile; @@ -43,7 +53,10 @@ background: $studio-white; font-weight: 600; font-size: 14px; - text-transform: capitalize; + + &.with-back-button { + padding-left: $fallback-gutter; + } } } diff --git a/plugins/woocommerce-admin/client/header/test/index.js b/plugins/woocommerce-admin/client/header/test/index.js index 00464c769fd..21756e67a3f 100644 --- a/plugins/woocommerce-admin/client/header/test/index.js +++ b/plugins/woocommerce-admin/client/header/test/index.js @@ -47,6 +47,13 @@ const encodedBreadcrumb = [ 'Accounts & Privacy', ]; +const stubLocation = ( location ) => { + jest.spyOn( window, 'location', 'get' ).mockReturnValue( { + ...window.location, + ...location, + } ); +}; + describe( 'Header', () => { beforeEach( () => { // Mock RAF to be synchronous for testing @@ -66,6 +73,22 @@ describe( 'Header', () => { window.requestAnimationFrame.mockRestore(); } ); + it( 'should render a back button and a custom title on task list pages', () => { + stubLocation( { href: 'http://localhost?task=payments' } ); + + const { queryByTestId, queryByText } = render( +
+ ); + + expect( + queryByTestId( 'header-back-button' ) + ).not.toBeEmptyDOMElement(); + + expect( + queryByText( 'Choose payment methods' ) + ).not.toBeEmptyDOMElement(); + } ); + it( 'should render decoded breadcrumb name', () => { const { queryByText } = render(
diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index 43e856a2004..877a8027bda 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/plugins/woocommerce-admin/readme.txt @@ -86,12 +86,12 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt - Dev: Deprecate Onboarding::has_woocommerce_support. #6401 - Fix: Broken link anchors to online documentation. #6455 - Dev: Add Dependency Extraction Webpack Plugin #5762 +- Add: Back button to go to home screen from tasks in the task list. #6397 - Fix: Update payment card style on mobile #6413 - Fix: Missing i18n in Welcome modal. #6456 - Fix: Restore visual styles back to Analytics tabs. #5913 - Add: Add a "rather not say" option to revenue in the profile wizard. #6475 - == 2.1.0 == - Dev: Allow highlight tooltip to use body tag as parent. #6309