/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { withDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import { ActivityCard } from '../../activity-card';
import InboxNotePlaceholder from './placeholder';
import ActivityHeader from '../../activity-header';
import InboxNoteCard from './card';
import { EmptyContent, Section } from '@woocommerce/components';
import { QUERY_DEFAULTS } from 'wc-api/constants';
import withSelect from 'wc-api/with-select';
import { getUnreadNotesCount, hasValidNotes } from './utils';
class InboxPanel extends Component {
constructor( props ) {
super( props );
this.mountTime = Date.now();
}
componentWillUnmount() {
const userDataFields = {
activity_panel_inbox_last_read: this.mountTime,
};
this.props.updateCurrentUserData( userDataFields );
}
renderEmptyCard() {
return (
{ __(
'As things begin to happen in your store your inbox will start to fill up. ' +
"You'll see things like achievements, new feature announcements, extension recommendations and more!",
'woocommerce-admin'
) }
);
}
renderNotes( hasNotes ) {
const {
isDismissUndoRequesting,
isDismissAllUndoRequesting,
lastRead,
notes,
} = this.props;
if ( isDismissAllUndoRequesting ) {
return;
}
if ( ! hasNotes ) {
return this.renderEmptyCard();
}
const notesArray = Object.keys( notes ).map( ( key ) => notes[ key ] );
return notesArray.map( ( note ) => {
if ( isDismissUndoRequesting === note.id ) {
return (
);
}
return (
);
} );
}
render() {
const {
isError,
isRequesting,
isUndoRequesting,
isDismissAllUndoRequesting,
lastRead,
notes,
} = this.props;
if ( isError ) {
const title = __(
'There was an error getting your inbox. Please try again.',
'woocommerce-admin'
);
const actionLabel = __( 'Reload', 'woocommerce-admin' );
const actionCallback = () => {
// @todo Add tracking for how often an error is displayed, and the reload action is clicked.
window.location.reload();
};
return (
);
}
const hasNotes = hasValidNotes( notes );
return (
{ ( hasNotes || isRequesting || isUndoRequesting ) && (
) }
{ ( isRequesting || isDismissAllUndoRequesting ) && (
) }
{ ! isRequesting &&
! isDismissAllUndoRequesting &&
this.renderNotes( hasNotes ) }
);
}
}
export default compose(
withSelect( ( select ) => {
const {
getCurrentUserData,
getNotes,
getNotesError,
isGetNotesRequesting,
getUndoDismissRequesting,
} = select( 'wc-api' );
const userData = getCurrentUserData();
const inboxQuery = {
page: 1,
per_page: QUERY_DEFAULTS.pageSize,
type: QUERY_DEFAULTS.noteTypes,
orderby: 'date',
order: 'desc',
status: 'unactioned',
_fields: [
'id',
'name',
'title',
'content',
'type',
'status',
'actions',
'date_created',
'date_created_gmt',
'layout',
'image',
'is_deleted',
],
};
const notes = getNotes( inboxQuery );
const isError = Boolean( getNotesError( inboxQuery ) );
const isRequesting = isGetNotesRequesting( inboxQuery );
const {
isUndoRequesting,
isDismissUndoRequesting,
isDismissAllUndoRequesting,
} = getUndoDismissRequesting();
return {
notes,
isError,
isRequesting,
isUndoRequesting,
isDismissUndoRequesting,
isDismissAllUndoRequesting,
lastRead: userData.activity_panel_inbox_last_read,
};
} ),
withDispatch( ( dispatch ) => {
const { updateCurrentUserData } = dispatch( 'wc-api' );
return {
updateCurrentUserData,
};
} )
)( InboxPanel );