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

373 lines
8.6 KiB
JavaScript

/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import classnames from 'classnames';
import { Component, Fragment } from '@wordpress/element';
import { Button } from '@wordpress/components';
import Gridicon from 'gridicons';
import interpolateComponents from 'interpolate-components';
import { get, isNull } from 'lodash';
import PropTypes from 'prop-types';
/**
* WooCommerce dependencies
*/
import {
EmptyContent,
Gravatar,
Link,
ProductImage,
ReviewRating,
Section,
} from '@woocommerce/components';
import { getAdminLink } from '@woocommerce/wc-admin-settings';
/**
* Internal dependencies
*/
import { ActivityCard, ActivityCardPlaceholder } from '../activity-card';
import ActivityHeader from '../activity-header';
import { QUERY_DEFAULTS } from 'wc-api/constants';
import sanitizeHTML from 'lib/sanitize-html';
import withSelect from 'wc-api/with-select';
import { recordEvent } from 'lib/tracks';
class ReviewsPanel extends Component {
constructor() {
super();
this.mountTime = new Date().getTime();
}
recordReviewEvent( eventName ) {
recordEvent( `activity_panel_reviews_${ eventName }`, {} );
}
renderReview( review, props ) {
const { lastRead } = props;
const product =
( review &&
review._embedded &&
review._embedded.up &&
review._embedded.up[ 0 ] ) ||
null;
if ( isNull( product ) ) {
return null;
}
const title = interpolateComponents( {
mixedString: sprintf(
__(
'{{productLink}}%s{{/productLink}} reviewed by {{authorLink}}%s{{/authorLink}}',
'woocommerce-admin'
),
product.name,
review.reviewer
),
components: {
productLink: (
<Link
href={ product.permalink }
onClick={ () => this.recordReviewEvent( 'product' ) }
type="external"
/>
),
authorLink: (
<Link
href={ 'mailto:' + review.reviewer_email }
onClick={ () => this.recordReviewEvent( 'customer' ) }
type="external"
/>
),
},
} );
const subtitle = (
<Fragment>
<ReviewRating review={ review } />
{ review.verified && (
<span className="woocommerce-review-activity-card__verified">
<Gridicon icon="checkmark" size={ 18 } />
{ __( 'Verified customer', 'woocommerce-admin' ) }
</span>
) }
</Fragment>
);
const productImage =
get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
const productImageClasses = classnames(
'woocommerce-review-activity-card__image-overlay__product',
{
'is-placeholder': ! productImage || ! productImage.src,
}
);
const icon = (
<div className="woocommerce-review-activity-card__image-overlay">
<Gravatar user={ review.reviewer_email } size={ 24 } />
<div className={ productImageClasses }>
<ProductImage product={ product } />
</div>
</div>
);
const manageReviewEvent = {
date: review.date_created_gmt,
status: review.status,
};
const cardActions = (
<Button
isSecondary
onClick={ () =>
recordEvent( 'review_manage_click', manageReviewEvent )
}
href={ getAdminLink(
'comment.php?action=editcomment&c=' + review.id
) }
>
{ __( 'Manage', 'woocommerce-admin' ) }
</Button>
);
return (
<ActivityCard
className="woocommerce-review-activity-card"
key={ review.id }
title={ title }
subtitle={ subtitle }
date={ review.date_created_gmt }
icon={ icon }
actions={ cardActions }
unread={
review.status === 'hold' ||
! lastRead ||
! review.date_created_gmt ||
new Date( review.date_created_gmt + 'Z' ).getTime() >
lastRead
}
>
<span
dangerouslySetInnerHTML={ sanitizeHTML( review.review ) }
/>
</ActivityCard>
);
}
renderEmptyMessage() {
const { lastApprovedReviewTime } = this.props;
const title = __(
'You have no reviews to moderate',
'woocommerce-admin'
);
let buttonUrl = '';
let buttonTarget = '';
let buttonText = '';
let content = '';
let eventName = 'learn_more';
if ( lastApprovedReviewTime ) {
const now = new Date();
const DAY = 24 * 60 * 60 * 1000;
if ( ( now.getTime() - lastApprovedReviewTime ) / DAY > 30 ) {
buttonUrl =
'https://woocommerce.com/posts/reviews-woocommerce-best-practices/';
buttonTarget = '_blank';
buttonText = __( 'Learn more', 'woocommerce-admin' );
content = (
<Fragment>
<p>
{ __(
"We noticed that it's been a while since your products had any reviews.",
'woocommerce-admin'
) }
</p>
<p>
{ __(
'Take some time to learn about best practices for collecting and using your reviews.',
'woocommerce-admin'
) }
</p>
</Fragment>
);
} else {
buttonUrl = getAdminLink(
'edit-comments.php?comment_type=review'
);
buttonText = __( 'View all Reviews', 'woocommerce-admin' );
content = (
<p>
{ __(
/* eslint-disable max-len */
"Awesome, you've moderated all of your product reviews. How about responding to some of those negative reviews?",
'woocommerce-admin'
/* eslint-enable */
) }
</p>
);
eventName = 'view_reviews';
}
} else {
buttonUrl =
'https://woocommerce.com/posts/reviews-woocommerce-best-practices/';
buttonTarget = '_blank';
buttonText = __( 'Learn more', 'woocommerce-admin' );
content = (
<Fragment>
<p>
{ __(
"Your customers haven't started reviewing your products.",
'woocommerce-admin'
) }
</p>
<p>
{ __(
'Take some time to learn about best practices for collecting and using your reviews.',
'woocommerce-admin'
) }
</p>
</Fragment>
);
}
return (
<ActivityCard
className="woocommerce-empty-activity-card"
title={ title }
icon={ <Gridicon icon="time" size={ 48 } /> }
actions={
<Button
href={ buttonUrl }
target={ buttonTarget }
isSecondary
onClick={ () => this.recordReviewEvent( eventName ) }
>
{ buttonText }
</Button>
}
>
{ content }
</ActivityCard>
);
}
render() {
const { isError, isRequesting, reviews } = this.props;
if ( isError ) {
const title = __(
'There was an error getting your reviews. Please try again.',
'woocommerce-admin'
);
const actionLabel = __( 'Reload', 'woocommerce-admin' );
const actionCallback = () => {
window.location.reload();
};
return (
<Fragment>
<EmptyContent
title={ title }
actionLabel={ actionLabel }
actionURL={ null }
actionCallback={ actionCallback }
/>
</Fragment>
);
}
const title =
isRequesting || reviews.length
? __( 'Reviews', 'woocommerce-admin' )
: __( 'No reviews to moderate', 'woocommerce-admin' );
return (
<Fragment>
<ActivityHeader title={ title } />
<Section>
{ isRequesting ? (
<ActivityCardPlaceholder
className="woocommerce-review-activity-card"
hasAction
hasDate
lines={ 2 }
/>
) : (
<Fragment>
{ reviews.length
? reviews.map( ( review ) =>
this.renderReview( review, this.props )
)
: this.renderEmptyMessage() }
</Fragment>
) }
</Section>
</Fragment>
);
}
}
ReviewsPanel.propTypes = {
reviews: PropTypes.array.isRequired,
isError: PropTypes.bool,
isRequesting: PropTypes.bool,
};
ReviewsPanel.defaultProps = {
reviews: [],
isError: false,
isRequesting: false,
};
export default withSelect( ( select, props ) => {
const { hasUnapprovedReviews } = props;
const { getReviews, getReviewsError, isGetReviewsRequesting } = select(
'wc-api'
);
let reviews = [];
let isError = false;
let isRequesting = false;
let lastApprovedReviewTime = null;
if ( hasUnapprovedReviews ) {
const reviewsQuery = {
page: 1,
per_page: QUERY_DEFAULTS.pageSize,
status: 'hold',
_embed: 1,
};
reviews = getReviews( reviewsQuery );
isError = Boolean( getReviewsError( reviewsQuery ) );
isRequesting = isGetReviewsRequesting( reviewsQuery );
} else {
const approvedReviewsQuery = {
page: 1,
per_page: 1,
status: 'approved',
_embed: 1,
};
const approvedReviews = getReviews( approvedReviewsQuery );
if ( approvedReviews.length ) {
const lastApprovedReview = approvedReviews[ 0 ];
if ( lastApprovedReview.date_created_gmt ) {
const creationDate = new Date(
lastApprovedReview.date_created_gmt
);
lastApprovedReviewTime = creationDate.getTime();
}
}
isError = Boolean( getReviewsError( approvedReviewsQuery ) );
isRequesting = isGetReviewsRequesting( approvedReviewsQuery );
}
return {
reviews,
isError,
isRequesting,
lastApprovedReviewTime,
};
} )( ReviewsPanel );