Add Reviews component to ListingPage

src/containers/ListingPage/ListingPage.css

@@ -382,6 +382,32 @@
   }
 }
 
+.reviewsContainer {
+  padding: 0 24px;
+  margin-bottom: 5px;
+
+  @media (--viewportMedium) {
+    padding: 0;
+  }
+  @media (--viewportLarge) {
+    margin-bottom: 3px;
+  }
+}
+
+.reviewsHeading {
+  @apply --marketplaceH3FontStyles;
+  color: var(--matterColorAnti);
+
+  margin: 52px 0 20px 0;
+
+  @media (--viewportMedium) {
+    margin: 53px 0 27px 0;
+  }
+  @media (--viewportLarge) {
+    margin: 50px 0 26px 0;
+  }
+}
+
 .yourHostContainer {
   position: relative;
   padding: 0 24px;
@@ -405,7 +431,7 @@
     margin: 53px 0 27px 0;
   }
   @media (--viewportLarge) {
-    margin: 51px 0 27px 0;
+    margin: 53px 0 27px 0;
   }
 }
 

src/containers/ListingPage/ListingPage.js

@@ -33,6 +33,7 @@ import {
   LayoutWrapperFooter,
   Footer,
   UserCard,
+  Reviews,
 } from '../../components';
 import { BookingDatesForm, TopbarContainer } from '../../containers';
 
@@ -88,7 +89,7 @@ export const ActionBar = props => {
   }
 };
 
-const { bool, func, object, oneOf, shape, string } = PropTypes;
+const { arrayOf, bool, func, object, oneOf, shape, string } = PropTypes;
 
 ActionBar.propTypes = {
   isOwnListing: bool.isRequired,
@@ -185,6 +186,7 @@ export class ListingPageComponent extends Component {
       scrollingDisabled,
       showListingError,
       history,
+      reviews,
     } = this.props;
     const listingId = new UUID(params.id);
     const currentListing = ensureListing(getListing(listingId));
@@ -475,6 +477,15 @@ export class ListingPageComponent extends Component {
                   </div>
 
                   {map}
+                  <div className={css.reviewsContainer}>
+                    <h2 className={css.reviewsHeading}>
+                      <FormattedMessage
+                        id="ListingPage.reviewsHeading"
+                        values={{ count: reviews.length }}
+                      />
+                    </h2>
+                    <Reviews reviews={reviews} />
+                  </div>
                   <div id="host" className={css.yourHostContainer}>
                     <h2 className={css.yourHostHeading}>
                       <FormattedMessage id="ListingPage.yourHostHeading" />
@@ -559,6 +570,7 @@ ListingPageComponent.defaultProps = {
   currentUser: null,
   showListingError: null,
   tab: 'listing',
+  reviews: [],
 };
 
 ListingPageComponent.propTypes = {
@@ -581,10 +593,11 @@ ListingPageComponent.propTypes = {
   showListingError: propTypes.error,
   tab: oneOf(['book', 'listing']),
   useInitialValues: func.isRequired,
+  reviews: arrayOf(propTypes.review),
 };
 
 const mapStateToProps = state => {
-  const { showListingError } = state.ListingPage;
+  const { showListingError, reviews } = state.ListingPage;
   const { currentUser } = state.user;
 
   const getListing = id => {
@@ -597,6 +610,7 @@ const mapStateToProps = state => {
     getListing,
     scrollingDisabled: isScrollingDisabled(state),
     showListingError,
+    reviews,
   };
 };
 

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -243,6 +243,21 @@ exports[`ListingPage matches snapshot 1`] = `
                 />
               </div>
             </div>
+            <div>
+              <h2>
+                <FormattedMessage
+                  id="ListingPage.reviewsHeading"
+                  values={
+                    Object {
+                      "count": 0,
+                    }
+                  }
+                />
+              </h2>
+              <InjectIntl(ReviewsComponent)
+                reviews={Array []}
+              />
+            </div>
             <div
               id="host"
             >

src/translations/en.json

@@ -239,6 +239,7 @@
   "ListingPage.ownClosedListing": "Your listing has been closed and can't be booked.",
   "ListingPage.ownListing": "This is your own listing.",
   "ListingPage.perNight": "per night",
+  "ListingPage.reviewsHeading": "Reviews ({count})",
   "ListingPage.schemaTitle": "{title} - {price} | {siteTitle}",
   "ListingPage.viewImagesButton": "View photos ({count})",
   "ListingPage.yourHostHeading": "Your host",