102 lines
2.4 KiB
JavaScript
102 lines
2.4 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Component } from '@wordpress/element';
|
|
import PropTypes from 'prop-types';
|
|
import Gridicon from 'gridicons';
|
|
import VisibilitySensor from 'react-visibility-sensor';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { ActivityCard } from '../../activity-card';
|
|
import NoteAction from './action';
|
|
import sanitizeHTML from 'lib/sanitize-html';
|
|
import classnames from 'classnames';
|
|
import { recordEvent } from 'lib/tracks';
|
|
|
|
class InboxNoteCard extends Component {
|
|
constructor( props ) {
|
|
super( props );
|
|
this.onVisible = this.onVisible.bind( this );
|
|
this.hasBeenSeen = false;
|
|
}
|
|
|
|
// Trigger a view Tracks event when the note is seen.
|
|
onVisible( isVisible ) {
|
|
if ( isVisible && ! this.hasBeenSeen ) {
|
|
const { note } = this.props;
|
|
|
|
recordEvent( 'inbox_note_view', {
|
|
note_content: note.content,
|
|
note_name: note.name,
|
|
note_title: note.title,
|
|
note_type: note.type,
|
|
note_icon: note.icon,
|
|
} );
|
|
|
|
this.hasBeenSeen = true;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { lastRead, note } = this.props;
|
|
|
|
const getButtonsFromActions = () => {
|
|
if ( ! note.actions ) {
|
|
return [];
|
|
}
|
|
return note.actions.map( ( action ) => (
|
|
<NoteAction key={ note.id } noteId={ note.id } action={ action } />
|
|
) );
|
|
};
|
|
|
|
return (
|
|
<VisibilitySensor onChange={ this.onVisible }>
|
|
<ActivityCard
|
|
className={ classnames( 'woocommerce-inbox-activity-card', {
|
|
actioned: note.status !== 'unactioned',
|
|
} ) }
|
|
title={ note.title }
|
|
date={ note.date_created }
|
|
icon={ <Gridicon icon={ note.icon } size={ 48 } /> }
|
|
unread={
|
|
! lastRead ||
|
|
! note.date_created_gmt ||
|
|
new Date( note.date_created_gmt + 'Z' ).getTime() >
|
|
lastRead
|
|
}
|
|
actions={ getButtonsFromActions( note ) }
|
|
>
|
|
<span
|
|
dangerouslySetInnerHTML={ sanitizeHTML( note.content ) }
|
|
/>
|
|
</ActivityCard>
|
|
</VisibilitySensor>
|
|
);
|
|
}
|
|
}
|
|
|
|
InboxNoteCard.propTypes = {
|
|
note: PropTypes.shape( {
|
|
id: PropTypes.number,
|
|
status: PropTypes.string,
|
|
title: PropTypes.string,
|
|
icon: PropTypes.string,
|
|
content: PropTypes.string,
|
|
date_created: PropTypes.string,
|
|
date_created_gmt: PropTypes.string,
|
|
actions: PropTypes.arrayOf(
|
|
PropTypes.shape( {
|
|
id: PropTypes.number.isRequired,
|
|
url: PropTypes.string,
|
|
label: PropTypes.string.isRequired,
|
|
primary: PropTypes.bool.isRequired,
|
|
} )
|
|
),
|
|
} ),
|
|
lastRead: PropTypes.number,
|
|
};
|
|
|
|
export default InboxNoteCard;
|