@shopgate/engage/product/components/Rating/index.js

Shopgate's ENGAGE library.

import React, { memo, useMemo } from 'react';
import PropTypes from 'prop-types';
import appConfig from '@shopgate/pwa-common/helpers/config';
import { RatingStars, SurroundPortals } from '@shopgate/engage/components';
import { PRODUCT_RATING } from '@shopgate/engage/product/constants';
import RatingCount from '@shopgate/engage/reviews/components/Reviews/components/RatingCount';
import { useWidgetSettings } from '@shopgate/engage/core/hooks';
import { container } from "./style";
import connect from "./connector";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
  hasReviews
} = appConfig;

/**
 * Scrolls page to reviews excerpt.
 */
const scrollToRating = () => {
  const reviewsExcerpt = document.getElementById('reviewsExcerpt');
  if (typeof reviewsExcerpt !== 'object' || !reviewsExcerpt || !reviewsExcerpt.offsetTop || !reviewsExcerpt.closest || !reviewsExcerpt.closest('article')) {
    return;
  }
  reviewsExcerpt.closest('article').scroll(0, reviewsExcerpt.offsetTop - 30);
};

/**
 * The Rating component.
 * @param {Object} props The component props.
 * @return {JSX.Element}
 */
const Rating = ({
  rating
}) => {
  const {
    showEmptyRatingStars = false
  } = useWidgetSettings('@shopgate/engage/rating');
  const showRatings = useMemo(() => {
    if (hasReviews && rating?.average > 0) {
      return true;
    }
    if (hasReviews && showEmptyRatingStars && rating) {
      return true;
    }
    return false;
  }, [rating, showEmptyRatingStars]);
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: PRODUCT_RATING,
    children: showRatings && /*#__PURE__*/_jsxs("div", {
      className: container,
      onClick: scrollToRating,
      role: "presentation",
      children: [/*#__PURE__*/_jsx(RatingStars, {
        value: rating.average,
        display: "big"
      }), /*#__PURE__*/_jsx(RatingCount, {
        count: rating.count,
        prominent: true
      })]
    })
  });
};
Rating.defaultProps = {
  rating: null
};
export default connect(/*#__PURE__*/memo(Rating));