woocommerce/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox.js

105 lines
2.7 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
2018-10-12 19:20:48 +00:00
import { compose } from '@wordpress/compose';
import Gridicon from 'gridicons';
2018-10-12 19:20:48 +00:00
import { withSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { ActivityCard, ActivityCardPlaceholder } from '../activity-card';
import ActivityHeader from '../activity-header';
import { EmptyContent, Section } from '@woocommerce/components';
import sanitizeHTML from 'lib/sanitize-html';
import { QUERY_DEFAULTS } from 'store/constants';
class InboxPanel extends Component {
render() {
const { isError, isRequesting, notes } = this.props;
if ( isError ) {
const title = __( 'There was an error getting your inbox. Please try again.', 'wc-admin' );
const actionLabel = __( 'Reload', 'wc-admin' );
const actionCallback = () => {
// TODO Add tracking for how often an error is displayed, and the reload action is clicked.
window.location.reload();
};
return (
<Fragment>
<EmptyContent
title={ title }
actionLabel={ actionLabel }
actionURL={ null }
actionCallback={ actionCallback }
/>
</Fragment>
);
}
2018-10-12 19:20:48 +00:00
const getButtonsFromActions = actions => {
if ( ! actions ) {
return [];
}
return actions.map( action => (
<Button isDefault href={ action.url }>
{ action.label }
</Button>
) );
};
2018-10-12 20:56:45 +00:00
const notesArray = Object.keys( notes ).map( key => notes[ key ] );
return (
<Fragment>
<ActivityHeader title={ __( 'Inbox', 'wc-admin' ) } />
<Section>
2018-10-16 19:46:00 +00:00
{ isRequesting ? (
<ActivityCardPlaceholder
className="woocommerce-inbox-activity-card"
hasAction
hasDate
lines={ 2 }
/>
) : (
notesArray.map( note => (
<ActivityCard
2018-10-12 20:56:45 +00:00
key={ note.id }
className="woocommerce-inbox-activity-card"
2018-10-12 20:56:45 +00:00
title={ note.title }
date={ note.date_created }
icon={ <Gridicon icon={ note.icon } size={ 48 } /> }
unread={ 'unread' === note.status }
actions={ getButtonsFromActions( note.actions ) }
>
2018-10-12 20:56:45 +00:00
<span dangerouslySetInnerHTML={ sanitizeHTML( note.content ) } />
</ActivityCard>
) )
) }
</Section>
</Fragment>
);
}
}
2018-10-12 19:20:48 +00:00
export default compose(
withSelect( select => {
2018-10-16 19:46:00 +00:00
const { getNotes, isGetNotesError, isGetNotesRequesting } = select( 'wc-admin' );
const inboxQuery = {
page: 1,
per_page: QUERY_DEFAULTS.pageSize,
2018-10-16 19:46:00 +00:00
};
const notes = getNotes( inboxQuery );
const isError = isGetNotesError( inboxQuery );
const isRequesting = isGetNotesRequesting( inboxQuery );
return { notes, isError, isRequesting };
2018-10-12 19:20:48 +00:00
} )
)( InboxPanel );