Merge pull request #672 from sharetribe/saunarules

ListingPage: rules and map as maybe components

src/containers/ListingPage/ListingPage.js

@@ -20,7 +20,6 @@ import {
   AvatarLarge,
   AvatarMedium,
   Button,
-  Map,
   ModalInMobile,
   Page,
   ResponsiveImage,
@@ -41,6 +40,8 @@ import { BookingDatesForm, TopbarContainer, EnquiryForm } from '../../containers
 
 import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
 import EditIcon from './EditIcon';
+import SectionRulesMaybe from './SectionRulesMaybe';
+import SectionMapMaybe from './SectionMapMaybe';
 import css from './ListingPage.css';
 
 // This defines when ModalInMobile shows content as Modal
@@ -358,20 +359,8 @@ export class ListingPageComponent extends Component {
     });
     const authorDisplayName = userDisplayName(ensuredAuthor, bannedUserDisplayName);
 
-    const address = publicData.location ? publicData.location.address : '';
-
     const bookBtnMessage = intl.formatMessage({ id: 'ListingPage.ctaButtonMessage' });
     const { formattedPrice, priceTitle } = priceData(price, intl);
-    const map = geolocation ? (
-      <div className={css.locationContainer}>
-        <h2 className={css.locationTitle}>
-          <FormattedMessage id="ListingPage.locationTitle" />
-        </h2>
-        <div className={css.map}>
-          <Map center={geolocation} address={address} />
-        </div>
-      </div>
-    ) : null;
 
     const showClosedListingHelpText = currentListing.id && isClosed;
     const bookingHeading = (
@@ -567,7 +556,8 @@ export class ListingPageComponent extends Component {
                     <p className={css.description}>{description}</p>
                   </div>
 
-                  {map}
+                  <SectionRulesMaybe publicData={publicData} />
+                  <SectionMapMaybe geolocation={geolocation} publicData={publicData} />
 
                   <div className={css.reviewsContainer}>
                     <h2 className={css.reviewsHeading}>

src/containers/ListingPage/SectionMapMaybe.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { object, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import { propTypes } from '../../util/types';
+import { Map } from '../../components';
+
+import css from './ListingPage.css';
+
+const SectionMapMaybe = props => {
+  const { className, rootClassName, geolocation, publicData } = props;
+  const address = publicData.location ? publicData.location.address : '';
+  const classes = classNames(rootClassName || css.locationContainer, className);
+
+  return geolocation ? (
+    <div className={classes}>
+      <h2 className={css.locationTitle}>
+        <FormattedMessage id="ListingPage.locationTitle" />
+      </h2>
+      <div className={css.map}>
+        <Map center={geolocation} address={address} />
+      </div>
+    </div>
+  ) : null;
+};
+
+SectionMapMaybe.defaultProps = { className: null, rootClassName: null };
+
+SectionMapMaybe.propTypes = {
+  className: string,
+  rootClassName: string,
+  geolocation: propTypes.latlng.isRequired,
+  publicData: object.isRequired,
+};
+
+export default SectionMapMaybe;

src/containers/ListingPage/SectionRulesMaybe.css

@@ -0,0 +1,37 @@
+@import '../../marketplace.css';
+
+.root {
+  padding: 0 24px;
+  margin-bottom: 35px;
+
+  @media (--viewportMedium) {
+    padding: 0;
+    margin-bottom: 52px;
+  }
+}
+
+.title {
+  /* Font */
+  @apply --marketplaceH3FontStyles;
+  color: var(--matterColorAnti);
+
+  margin-top: 0;
+  margin-bottom: 13px;
+  @media (--viewportMedium) {
+    margin-top: 0;
+    margin-bottom: 20px;
+  }
+}
+
+.rules {
+  margin-top: 0;
+  margin-bottom: 0;
+
+  /* Preserve newlines, but collapse other whitespace */
+  white-space: pre-line;
+
+  @media (--viewportMedium) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}

src/containers/ListingPage/SectionRulesMaybe.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+
+import css from './SectionRulesMaybe.css';
+
+const SectionRulesMaybe = props => {
+  const { className, rootClassName, publicData } = props;
+  const classes = classNames(rootClassName || css.root, className);
+  return publicData.rules ? (
+    <div className={classes}>
+      <h2 className={css.title}>
+        <FormattedMessage id="ListingPage.rulesTitle" />
+      </h2>
+      <p className={css.rules}>{publicData.rules}</p>
+    </div>
+  ) : null;
+};
+
+SectionRulesMaybe.defaultProps = { className: null, rootClassName: null };
+
+SectionRulesMaybe.propTypes = {
+  className: string,
+  rootClassName: string,
+  publicData: shape({
+    rules: string,
+  }).isRequired,
+};
+
+export default SectionRulesMaybe;

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

@@ -271,28 +271,22 @@ exports[`ListingPage matches snapshot 1`] = `
                 listing1 description
               </p>
             </div>
-            <div>
-              <h2>
-                <FormattedMessage
-                  id="ListingPage.locationTitle"
-                  values={Object {}}
-                />
-              </h2>
-              <div>
-                <Map
-                  address=""
-                  center={
-                    LatLng {
-                      "lat": 40,
-                      "lng": 60,
-                    }
-                  }
-                  className=""
-                  rootClassName={null}
-                  zoom={11}
-                />
-              </div>
-            </div>
+            <SectionRulesMaybe
+              className={null}
+              publicData={Object {}}
+              rootClassName={null}
+            />
+            <SectionMapMaybe
+              className={null}
+              geolocation={
+                LatLng {
+                  "lat": 40,
+                  "lng": 60,
+                }
+              }
+              publicData={Object {}}
+              rootClassName={null}
+            />
             <div>
               <h2>
                 <FormattedMessage

src/translations/en.json

@@ -278,6 +278,7 @@
   "ListingPage.perUnit": "per night",
   "ListingPage.reviewsError": "Loading reviews failed.",
   "ListingPage.reviewsHeading": "Reviews ({count})",
+  "ListingPage.rulesTitle": "Sauna rules",
   "ListingPage.schemaTitle": "{title} - {price} | {siteTitle}",
   "ListingPage.viewImagesButton": "View photos ({count})",
   "ListingPage.yourHostHeading": "Your host",