Add a back button to the Header when the task list is displayed. (https://github.com/woocommerce/woocommerce-admin/pull/6397)
This commit is contained in:
Sam Seay
GitHub
parent
fbeb535b20
commit
bb821a76e9
|
|
@ -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:
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Tooltip text={ homeText }>
|
||||
<div
|
||||
tabIndex="0"
|
||||
role="button"
|
||||
data-testid="header-back-button"
|
||||
className="woocommerce-layout__header-back-button"
|
||||
onKeyDown={ ( { keyCode } ) => {
|
||||
if ( keyCode === ENTER || keyCode === SPACE ) {
|
||||
navigateHome();
|
||||
}
|
||||
} }
|
||||
>
|
||||
<Icon icon={ chevronLeft } onClick={ navigateHome } />
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className={ className } ref={ headerElement }>
|
||||
{ ! isModalDismissed && (
|
||||
|
|
@ -103,13 +164,13 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
|
|||
|
||||
<div className="woocommerce-layout__header-wrapper">
|
||||
{ window.wcAdminFeatures.navigation && <Navigation /> }
|
||||
|
||||
{ renderTaskListBackButton() }
|
||||
<Text
|
||||
className="woocommerce-layout__header-heading"
|
||||
className={ `woocommerce-layout__header-heading ${ backButtonClass }` }
|
||||
as="h1"
|
||||
variant="subtitle.small"
|
||||
>
|
||||
{ decodeEntities( pageTitle ) }
|
||||
{ getPageTitle( decodeEntities( pageTitle ) ) }
|
||||
</Text>
|
||||
|
||||
{ window.wcAdminFeatures[ 'activity-panels' ] && (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<Header sections={ encodedBreadcrumb } isEmbedded={ false } />
|
||||
);
|
||||
|
||||
expect(
|
||||
queryByTestId( 'header-back-button' )
|
||||
).not.toBeEmptyDOMElement();
|
||||
|
||||
expect(
|
||||
queryByText( 'Choose payment methods' )
|
||||
).not.toBeEmptyDOMElement();
|
||||
} );
|
||||
|
||||
it( 'should render decoded breadcrumb name', () => {
|
||||
const { queryByText } = render(
|
||||
<Header sections={ encodedBreadcrumb } isEmbedded={ true } />
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue