Inbox panel on the home screen (https://github.com/woocommerce/woocommerce-admin/pull/4496)
* Homepage InboxPanel integration # Conflicts: # client/homepage/layout.js # client/homepage/test/index.js * InboxPanel refactor This commit removes "context" prop and adds "isPanelEmpty" method to InboxPanel. Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
This commit is contained in:
Fernando
GitHub
parent
d5b40ae01f
commit
621f568297
|
|
@ -87,6 +87,7 @@ class InboxPanel extends Component {
|
|||
render() {
|
||||
const {
|
||||
isError,
|
||||
isPanelEmpty,
|
||||
isRequesting,
|
||||
isUndoRequesting,
|
||||
isDismissAllUndoRequesting,
|
||||
|
|
@ -119,9 +120,16 @@ class InboxPanel extends Component {
|
|||
|
||||
const hasNotes = hasValidNotes( notes );
|
||||
|
||||
const isActivityHeaderVisible =
|
||||
hasNotes || isRequesting || isUndoRequesting;
|
||||
|
||||
if ( isPanelEmpty ) {
|
||||
isPanelEmpty( ! hasNotes && ! isActivityHeaderVisible );
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{ ( hasNotes || isRequesting || isUndoRequesting ) && (
|
||||
{ isActivityHeaderVisible && (
|
||||
<ActivityHeader
|
||||
title={ __( 'Inbox', 'woocommerce-admin' ) }
|
||||
subtitle={ __(
|
||||
|
|
@ -134,16 +142,18 @@ class InboxPanel extends Component {
|
|||
) }
|
||||
/>
|
||||
) }
|
||||
{ ( isRequesting || isDismissAllUndoRequesting ) && (
|
||||
<div className="woocommerce-homepage-notes-wrapper">
|
||||
{ ( isRequesting || isDismissAllUndoRequesting ) && (
|
||||
<Section>
|
||||
<InboxNotePlaceholder className="banner message-is-unread" />
|
||||
</Section>
|
||||
) }
|
||||
<Section>
|
||||
<InboxNotePlaceholder className="banner message-is-unread" />
|
||||
{ ! isRequesting &&
|
||||
! isDismissAllUndoRequesting &&
|
||||
this.renderNotes( hasNotes ) }
|
||||
</Section>
|
||||
) }
|
||||
<Section>
|
||||
{ ! isRequesting &&
|
||||
! isDismissAllUndoRequesting &&
|
||||
this.renderNotes( hasNotes ) }
|
||||
</Section>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,29 @@
|
|||
background: $core-grey-light-200;
|
||||
border-radius: 2px;
|
||||
@include font-size( 13 );
|
||||
margin: 20px;
|
||||
-ms-box-orient: horizontal;
|
||||
&.banner {
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
&.thumbnail {
|
||||
display: flex;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
img {
|
||||
width: 128px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-homepage-column & {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
&:not(.is-placeholder) {
|
||||
border: 1px solid $light-gray-secondary;
|
||||
|
|
@ -152,34 +175,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.woocommerce-inbox-message {
|
||||
margin: 20px;
|
||||
-ms-box-orient: horizontal;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
&.banner {
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
&.thumbnail {
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
img {
|
||||
width: 128px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-inbox-message__wrapper > div {
|
||||
padding: $gap $gap-large;
|
||||
.is-placeholder & {
|
||||
|
|
@ -197,3 +192,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-layout__inbox-panel-header {
|
||||
.woocommerce-homepage-column & {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-homepage-notes-wrapper {
|
||||
.is-inbox & {
|
||||
height: calc(100% - 30px);
|
||||
& > div {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import {
|
|||
useRef,
|
||||
useEffect,
|
||||
} from '@wordpress/element';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import classnames from 'classnames';
|
||||
import { get } from 'lodash';
|
||||
|
|
@ -24,6 +23,7 @@ import './style.scss';
|
|||
import { isOnboardingEnabled } from 'dashboard/utils';
|
||||
import withSelect from 'wc-api/with-select';
|
||||
import TaskListPlaceholder from '../task-list/placeholder';
|
||||
import InboxPanel from '../header/activity-panel/panels/inbox';
|
||||
|
||||
const TaskList = lazy( () =>
|
||||
import( /* webpackChunkName: "task-list" */ '../task-list' )
|
||||
|
|
@ -52,31 +52,30 @@ export const Layout = ( props ) => {
|
|||
};
|
||||
}, [] );
|
||||
|
||||
const { query, requestingTaskList, taskListComplete, taskListHidden } = props;
|
||||
const {
|
||||
isUndoRequesting,
|
||||
query,
|
||||
requestingTaskList,
|
||||
taskListComplete,
|
||||
taskListHidden,
|
||||
} = props;
|
||||
const isTaskListEnabled = taskListHidden === false && ! taskListComplete;
|
||||
const isDashboardShown = ! isTaskListEnabled || ! query.task;
|
||||
|
||||
const isInboxPanelEmpty = ( isEmpty ) => {
|
||||
setShowInbox( ! isEmpty );
|
||||
};
|
||||
|
||||
if ( isUndoRequesting && ! showInbox ) {
|
||||
setShowInbox( true );
|
||||
}
|
||||
|
||||
const renderColumns = () => {
|
||||
return (
|
||||
<Fragment>
|
||||
{ showInbox && (
|
||||
<div className="woocommerce-homepage-column is-inbox">
|
||||
<div className="temp-content">
|
||||
<Button
|
||||
isPrimary
|
||||
onClick={ () => {
|
||||
setShowInbox( false );
|
||||
} }
|
||||
>
|
||||
Dismiss All
|
||||
</Button>
|
||||
</div>
|
||||
<div className="temp-content" />
|
||||
<div className="temp-content" />
|
||||
<div className="temp-content" />
|
||||
<div className="temp-content" />
|
||||
<div className="temp-content" />
|
||||
<div className="temp-content" />
|
||||
<InboxPanel isPanelEmpty={ isInboxPanelEmpty } />
|
||||
</div>
|
||||
) }
|
||||
<div
|
||||
|
|
@ -114,8 +113,7 @@ export const Layout = ( props ) => {
|
|||
>
|
||||
{ isDashboardShown
|
||||
? renderColumns()
|
||||
: isTaskListEnabled && renderTaskList()
|
||||
}
|
||||
: isTaskListEnabled && renderTaskList() }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -143,6 +141,7 @@ export default compose(
|
|||
withSelect( ( select ) => {
|
||||
const {
|
||||
getOptions,
|
||||
getUndoDismissRequesting,
|
||||
isGetOptionsRequesting,
|
||||
} = select( 'wc-api' );
|
||||
|
||||
|
|
@ -151,14 +150,19 @@ export default compose(
|
|||
'woocommerce_task_list_complete',
|
||||
'woocommerce_task_list_hidden',
|
||||
] );
|
||||
|
||||
const { isUndoRequesting } = getUndoDismissRequesting();
|
||||
return {
|
||||
isUndoRequesting,
|
||||
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',
|
||||
taskListComplete: get( options, [
|
||||
'woocommerce_task_list_complete',
|
||||
] ),
|
||||
taskListHidden:
|
||||
get( options, [ 'woocommerce_task_list_hidden' ] ) ===
|
||||
'yes',
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@ jest.mock( 'homepage/stats-overview', () => jest.fn().mockReturnValue( null ) );
|
|||
// We aren't testing the <TaskList /> component here.
|
||||
jest.mock( 'task-list', () => jest.fn().mockReturnValue( '[TaskList]' ) );
|
||||
|
||||
// We aren't testing the <InboxPanel /> component here.
|
||||
jest.mock( 'header/activity-panel/panels/inbox', () => jest.fn().mockReturnValue( '[InboxPanel]' ) );
|
||||
|
||||
describe( 'Homepage Layout', () => {
|
||||
it( 'should show TaskList placeholder when loading', () => {
|
||||
const { container } = render(
|
||||
|
|
|
|||
Loading…
Reference in New Issue