/** @format */
/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import classnames from 'classnames';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import Gridicon from 'gridicons';
import interpolateComponents from 'interpolate-components';
import moment from 'moment';
import { get, noop, isNull } from 'lodash';
import PropTypes from 'prop-types';
import { withDispatch } from '@wordpress/data';
/**
* WooCommerce dependencies
*/
import {
EmptyContent,
Gravatar,
Link,
ProductImage,
ReviewRating,
Section,
SplitButton,
} from '@woocommerce/components';
/**
* 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';
class ReviewsPanel extends Component {
constructor() {
super();
this.mountTime = new Date().getTime();
}
componentWillUnmount() {
const userDataFields = {
[ 'activity_panel_reviews_last_read' ]: this.mountTime,
};
this.props.updateCurrentUserData( userDataFields );
}
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: ,
authorLink: ,
},
} );
const subtitle = (
{ review.verified && (
{ __( 'Verified customer', 'woocommerce-admin' ) }
) }
);
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 = (
);
const cardActions = () => {
const mainLabel =
'approved' === review.status
? __( 'Unapprove', 'woocommerce-admin' )
: __( 'Approve', 'woocommerce-admin' );
return (
);
};
return (
lastRead
}
>
);
}
renderPlaceholders() {
const { numberOfReviews } = this.props;
const placeholders = new Array( numberOfReviews );
return placeholders
.fill( 0 )
.map( ( p, i ) => (
) );
}
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 (
);
}
return (
{ isRequesting ? (
this.renderPlaceholders()
) : (
{ reviews.map( review => this.renderReview( review, this.props ) ) }
) }
);
}
}
ReviewsPanel.propTypes = {
reviews: PropTypes.array.isRequired,
isError: PropTypes.bool,
isRequesting: PropTypes.bool,
numberOfReviews: PropTypes.number,
};
ReviewsPanel.defaultProps = {
reviews: [],
isError: false,
isRequesting: false,
numberOfReviews: 0,
};
export default compose(
withSelect( ( select, props ) => {
const { numberOfReviews } = props;
const { getCurrentUserData, getReviews, getReviewsError, isGetReviewsRequesting } = select(
'wc-api'
);
if ( numberOfReviews === 0 ) {
return {};
}
const userData = getCurrentUserData();
const reviewsQuery = {
page: 1,
per_page: QUERY_DEFAULTS.pageSize,
_embed: 1,
};
const reviews = getReviews( reviewsQuery );
const isError = Boolean( getReviewsError( reviewsQuery ) );
const isRequesting = isGetReviewsRequesting( reviewsQuery );
return { reviews, isError, isRequesting, lastRead: userData.activity_panel_reviews_last_read };
} ),
withDispatch( dispatch => {
const { updateCurrentUserData } = dispatch( 'wc-api' );
return {
updateCurrentUserData,
};
} )
)( ReviewsPanel );