From f6507657d4fbc0b218b8396fe7a99afa1c543d1b Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 13:54:56 +0300
Subject: [PATCH 01/11] Extract images section into a separate file

---
 src/containers/ListingPage/ActionBarMaybe.js  |  61 ++++++++
 src/containers/ListingPage/ListingPage.css    |   3 +
 src/containers/ListingPage/ListingPage.js     | 119 ++------------
 .../ListingPage/ListingPage.test.js           |   3 +-
 src/containers/ListingPage/SectionImages.js   |  75 +++++++++
 .../__snapshots__/ListingPage.test.js.snap    | 146 ++++++------------
 6 files changed, 203 insertions(+), 204 deletions(-)
 create mode 100644 src/containers/ListingPage/ActionBarMaybe.js
 create mode 100644 src/containers/ListingPage/SectionImages.js

diff --git a/src/containers/ListingPage/ActionBarMaybe.js b/src/containers/ListingPage/ActionBarMaybe.js
new file mode 100644
index 00000000..823bd665
--- /dev/null
+++ b/src/containers/ListingPage/ActionBarMaybe.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { bool, oneOfType, object } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import { LISTING_STATE_PENDING_APPROVAL, LISTING_STATE_CLOSED, propTypes } from '../../util/types';
+import { NamedLink } from '../../components';
+import EditIcon from './EditIcon';
+
+import css from './ListingPage.css';
+
+export const ActionBarMaybe = props => {
+  const { isOwnListing, listing, editParams } = props;
+  const state = listing.attributes.state;
+  const isPendingApproval = state === LISTING_STATE_PENDING_APPROVAL;
+  const isClosed = state === LISTING_STATE_CLOSED;
+
+  if (isOwnListing) {
+    let ownListingTextTranslationId = 'ListingPage.ownListing';
+
+    if (isPendingApproval) {
+      ownListingTextTranslationId = 'ListingPage.ownListingPendingApproval';
+    } else if (isClosed) {
+      ownListingTextTranslationId = 'ListingPage.ownClosedListing';
+    }
+
+    const ownListingTextClasses = classNames(css.ownListingText, {
+      [css.ownListingTextPendingApproval]: isPendingApproval,
+    });
+
+    return (
+      <div className={css.actionBar}>
+        <p className={ownListingTextClasses}>
+          <FormattedMessage id={ownListingTextTranslationId} />
+        </p>
+        <NamedLink className={css.editListingLink} name="EditListingPage" params={editParams}>
+          <EditIcon className={css.editIcon} />
+          <FormattedMessage id="ListingPage.editListing" />
+        </NamedLink>
+      </div>
+    );
+  } else if (isClosed) {
+    return (
+      <div className={css.actionBar}>
+        <p className={css.closedListingText}>
+          <FormattedMessage id="ListingPage.closedListing" />
+        </p>
+      </div>
+    );
+  }
+  return null;
+};
+
+ActionBarMaybe.propTypes = {
+  isOwnListing: bool.isRequired,
+  listing: oneOfType([propTypes.listing, propTypes.ownListing]).isRequired,
+  editParams: object.isRequired,
+};
+
+ActionBarMaybe.displayName = 'ActionBarMaybe';
+
+export default ActionBarMaybe;
diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 9e043d21..c54fd964 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -17,6 +17,9 @@
   margin: 24px;
 }
 
+.sectionImages {
+}
+
 .threeToTwoWrapper {
   /* Layout */
   display: block;
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 6caff5e2..f084ba99 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -1,11 +1,10 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { Component } from 'react';
-import { arrayOf, bool, func, object, shape, string, oneOf, oneOfType } from 'prop-types';
+import { arrayOf, bool, func, shape, string, oneOf } from 'prop-types';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import classNames from 'classnames';
 import config from '../../config';
 import routeConfiguration from '../../routeConfiguration';
 import { LISTING_STATE_PENDING_APPROVAL, LISTING_STATE_CLOSED, propTypes } from '../../util/types';
@@ -23,11 +22,9 @@ import {
   Button,
   ModalInMobile,
   Page,
-  ResponsiveImage,
   NamedLink,
   NamedRedirect,
   Modal,
-  ImageCarousel,
   InlineTextButton,
   LayoutSingleColumn,
   LayoutWrapperTopbar,
@@ -41,7 +38,7 @@ import {
 import { BookingDatesForm, TopbarContainer, EnquiryForm, NotFoundPage } from '../../containers';
 
 import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
-import EditIcon from './EditIcon';
+import SectionImages from './SectionImages';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
 import css from './ListingPage.css';
@@ -66,56 +63,6 @@ const priceData = (price, intl) => {
   return {};
 };
 
-export const ActionBarMaybe = props => {
-  const { isOwnListing, listing, editParams } = props;
-  const state = listing.attributes.state;
-  const isPendingApproval = state === LISTING_STATE_PENDING_APPROVAL;
-  const isClosed = state === LISTING_STATE_CLOSED;
-
-  if (isOwnListing) {
-    let ownListingTextTranslationId = 'ListingPage.ownListing';
-
-    if (isPendingApproval) {
-      ownListingTextTranslationId = 'ListingPage.ownListingPendingApproval';
-    } else if (isClosed) {
-      ownListingTextTranslationId = 'ListingPage.ownClosedListing';
-    }
-
-    const ownListingTextClasses = classNames(css.ownListingText, {
-      [css.ownListingTextPendingApproval]: isPendingApproval,
-    });
-
-    return (
-      <div className={css.actionBar}>
-        <p className={ownListingTextClasses}>
-          <FormattedMessage id={ownListingTextTranslationId} />
-        </p>
-        <NamedLink className={css.editListingLink} name="EditListingPage" params={editParams}>
-          <EditIcon className={css.editIcon} />
-          <FormattedMessage id="ListingPage.editListing" />
-        </NamedLink>
-      </div>
-    );
-  } else if (isClosed) {
-    return (
-      <div className={css.actionBar}>
-        <p className={css.closedListingText}>
-          <FormattedMessage id="ListingPage.closedListing" />
-        </p>
-      </div>
-    );
-  }
-  return null;
-};
-
-ActionBarMaybe.propTypes = {
-  isOwnListing: bool.isRequired,
-  listing: oneOfType([propTypes.listing, propTypes.ownListing]).isRequired,
-  editParams: object.isRequired,
-};
-
-ActionBarMaybe.displayName = 'ActionBarMaybe';
-
 const openBookModal = (history, listing) => {
   if (!listing.id) {
     // Listing not fully loaded yet
@@ -363,9 +310,6 @@ export class ListingPageComponent extends Component {
       );
     }
 
-    const hasImages = currentListing.images && currentListing.images.length > 0;
-    const firstImage = hasImages ? currentListing.images[0] : null;
-
     const handleViewPhotosClick = e => {
       // Stop event from bubbling up to prevent image click handler
       // trying to open the carousel as well.
@@ -374,15 +318,6 @@ export class ListingPageComponent extends Component {
         imageCarouselOpen: true,
       });
     };
-    const viewPhotosButton = hasImages ? (
-      <button className={css.viewPhotos} onClick={handleViewPhotosClick}>
-        <FormattedMessage
-          id="ListingPage.viewImagesButton"
-          values={{ count: currentListing.images.length }}
-        />
-      </button>
-    ) : null;
-
     const authorAvailable = currentListing && currentListing.author;
     const userAndListingAuthorAvailable = !!(currentUser && authorAvailable);
     const isOwnListing =
@@ -443,18 +378,6 @@ export class ListingPageComponent extends Component {
       }
     };
 
-    // Action bar is wrapped with a div that prevents the click events
-    // to the parent that would otherwise open the image carousel
-    const actionBar = currentListing.id ? (
-      <div onClick={e => e.stopPropagation()}>
-        <ActionBarMaybe
-          isOwnListing={isOwnListing}
-          listing={currentListing}
-          editParams={editParams}
-        />
-      </div>
-    ) : null;
-
     const listingImages = (listing, variantName) =>
       (listing.images || [])
         .map(image => {
@@ -517,36 +440,16 @@ export class ListingPageComponent extends Component {
           <LayoutWrapperTopbar>{topbar}</LayoutWrapperTopbar>
           <LayoutWrapperMain>
             <div>
-              <div className={css.threeToTwoWrapper}>
-                <div className={css.aspectWrapper} onClick={handleViewPhotosClick}>
-                  {actionBar}
-                  <ResponsiveImage
-                    rootClassName={css.rootForImage}
-                    alt={title}
-                    image={firstImage}
-                    nameSet={[
-                      { name: 'landscape-crop', size: '400w' },
-                      { name: 'landscape-crop2x', size: '800w' },
-                      { name: 'landscape-crop4x', size: '1600w' },
-                      { name: 'landscape-crop6x', size: '2400w' },
-                    ]}
-                    sizes="100vw"
-                  />
-                  {viewPhotosButton}
-                </div>
-              </div>
-              <Modal
-                id="ListingPage.imageCarousel"
-                scrollLayerClassName={css.carouselModalScrollLayer}
-                containerClassName={css.carouselModalContainer}
-                lightCloseButton
-                isOpen={this.state.imageCarouselOpen}
-                onClose={() => this.setState({ imageCarouselOpen: false })}
+              <SectionImages
+                title={title}
+                listing={currentListing}
+                isOwnListing={isOwnListing}
+                editParams={editParams}
+                imageCarouselOpen={this.state.imageCarouselOpen}
+                onImageCarouselClose={() => this.setState({ imageCarouselOpen: false })}
+                handleViewPhotosClick={handleViewPhotosClick}
                 onManageDisableScrolling={onManageDisableScrolling}
-              >
-                <ImageCarousel images={currentListing.images} />
-              </Modal>
-
+              />
               <div className={css.contentContainer}>
                 <div className={css.avatarWrapper}>
                   <NamedLink name="ListingPage" params={params} to={{ hash: '#host' }}>
diff --git a/src/containers/ListingPage/ListingPage.test.js b/src/containers/ListingPage/ListingPage.test.js
index 2820c972..5fa87e54 100644
--- a/src/containers/ListingPage/ListingPage.test.js
+++ b/src/containers/ListingPage/ListingPage.test.js
@@ -24,7 +24,8 @@ import { showListingRequest, showListingError, showListing } from './ListingPage
 // Otherwise, ListingPage itself is not initialized correctly when routeConfiguration is imported
 // (loadData call fails).
 import routeConfiguration from '../../routeConfiguration';
-import { ListingPageComponent, ActionBarMaybe } from './ListingPage';
+import { ListingPageComponent } from './ListingPage';
+import ActionBarMaybe from './ActionBarMaybe';
 
 const { UUID } = sdkTypes;
 const noop = () => null;
diff --git a/src/containers/ListingPage/SectionImages.js b/src/containers/ListingPage/SectionImages.js
new file mode 100644
index 00000000..2bfcc2f9
--- /dev/null
+++ b/src/containers/ListingPage/SectionImages.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { ResponsiveImage, Modal, ImageCarousel } from '../../components';
+import ActionBarMaybe from './ActionBarMaybe';
+
+import css from './ListingPage.css';
+
+const SectionImages = props => {
+  const {
+    title,
+    listing,
+    isOwnListing,
+    editParams,
+    handleViewPhotosClick,
+    imageCarouselOpen,
+    onImageCarouselClose,
+    onManageDisableScrolling,
+  } = props;
+
+  const hasImages = listing.images && listing.images.length > 0;
+  const firstImage = hasImages ? listing.images[0] : null;
+
+  // Action bar is wrapped with a div that prevents the click events
+  // to the parent that would otherwise open the image carousel
+  const actionBar = listing.id ? (
+    <div onClick={e => e.stopPropagation()}>
+      <ActionBarMaybe isOwnListing={isOwnListing} listing={listing} editParams={editParams} />
+    </div>
+  ) : null;
+
+  const viewPhotosButton = hasImages ? (
+    <button className={css.viewPhotos} onClick={handleViewPhotosClick}>
+      <FormattedMessage
+        id="ListingPage.viewImagesButton"
+        values={{ count: listing.images.length }}
+      />
+    </button>
+  ) : null;
+
+  return (
+    <div className={css.sectionImages}>
+      <div className={css.threeToTwoWrapper}>
+        <div className={css.aspectWrapper} onClick={handleViewPhotosClick}>
+          {actionBar}
+          <ResponsiveImage
+            rootClassName={css.rootForImage}
+            alt={title}
+            image={firstImage}
+            nameSet={[
+              { name: 'landscape-crop', size: '400w' },
+              { name: 'landscape-crop2x', size: '800w' },
+              { name: 'landscape-crop4x', size: '1600w' },
+              { name: 'landscape-crop6x', size: '2400w' },
+            ]}
+            sizes="100vw"
+          />
+          {viewPhotosButton}
+        </div>
+      </div>
+      <Modal
+        id="ListingPage.imageCarousel"
+        scrollLayerClassName={css.carouselModalScrollLayer}
+        containerClassName={css.carouselModalContainer}
+        lightCloseButton
+        isOpen={imageCarouselOpen}
+        onClose={onImageCarouselClose}
+        onManageDisableScrolling={onManageDisableScrolling}
+      >
+        <ImageCarousel images={listing.images} />
+      </Modal>
+    </div>
+  );
+};
+
+export default SectionImages;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 64fac301..9b170ea1 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -34,103 +34,59 @@ exports[`ListingPage matches snapshot 1`] = `
       rootClassName={null}
     >
       <div>
-        <div>
-          <div
-            onClick={[Function]}
-          >
-            <div
-              onClick={[Function]}
-            >
-              <ActionBarMaybe
-                editParams={
-                  Object {
-                    "id": "listing1",
-                    "slug": "listing1-title",
-                    "tab": "description",
-                    "type": "edit",
-                  }
-                }
-                isOwnListing={false}
-                listing={
-                  Object {
-                    "attributes": Object {
-                      "deleted": false,
-                      "description": "listing1 description",
-                      "geolocation": LatLng {
-                        "lat": 40,
-                        "lng": 60,
-                      },
-                      "price": Money {
-                        "amount": 5500,
-                        "currency": "USD",
-                      },
-                      "publicData": Object {},
-                      "state": "published",
-                      "title": "listing1 title",
-                    },
-                    "author": Object {
-                      "attributes": Object {
-                        "banned": false,
-                        "profile": Object {
-                          "abbreviatedName": "TT",
-                          "displayName": "user-1 display name",
-                        },
-                      },
-                      "id": UUID {
-                        "uuid": "user-1",
-                      },
-                      "type": "user",
-                    },
-                    "id": UUID {
-                      "uuid": "listing1",
-                    },
-                    "images": Array [],
-                    "type": "listing",
-                  }
-                }
-              />
-            </div>
-            <ResponsiveImage
-              alt="listing1 title"
-              className={null}
-              image={null}
-              nameSet={
-                Array [
-                  Object {
-                    "name": "landscape-crop",
-                    "size": "400w",
+        <SectionImages
+          editParams={
+            Object {
+              "id": "listing1",
+              "slug": "listing1-title",
+              "tab": "description",
+              "type": "edit",
+            }
+          }
+          handleViewPhotosClick={[Function]}
+          imageCarouselOpen={false}
+          isOwnListing={false}
+          listing={
+            Object {
+              "attributes": Object {
+                "deleted": false,
+                "description": "listing1 description",
+                "geolocation": LatLng {
+                  "lat": 40,
+                  "lng": 60,
+                },
+                "price": Money {
+                  "amount": 5500,
+                  "currency": "USD",
+                },
+                "publicData": Object {},
+                "state": "published",
+                "title": "listing1 title",
+              },
+              "author": Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "user-1 display name",
                   },
-                  Object {
-                    "name": "landscape-crop2x",
-                    "size": "800w",
-                  },
-                  Object {
-                    "name": "landscape-crop4x",
-                    "size": "1600w",
-                  },
-                  Object {
-                    "name": "landscape-crop6x",
-                    "size": "2400w",
-                  },
-                ]
-              }
-              noImageMessage={null}
-              rootClassName={null}
-              sizes="100vw"
-            />
-          </div>
-        </div>
-        <InjectIntl(ModalComponent)
-          id="ListingPage.imageCarousel"
-          isOpen={false}
-          lightCloseButton={true}
-          onClose={[Function]}
+                },
+                "id": UUID {
+                  "uuid": "user-1",
+                },
+                "type": "user",
+              },
+              "id": UUID {
+                "uuid": "listing1",
+              },
+              "images": Array [],
+              "type": "listing",
+            }
+          }
+          onImageCarouselClose={[Function]}
           onManageDisableScrolling={[Function]}
-        >
-          <InjectIntl(ImageCarousel)
-            images={Array []}
-          />
-        </InjectIntl(ModalComponent)>
+          title="listing1 title"
+        />
         <div>
           <div>
             <NamedLink

From 6f844e951703f919b3be3b4af505f64b48e90b95 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 14:32:43 +0300
Subject: [PATCH 02/11] Extract heading section into a separate file

---
 src/containers/ListingPage/ListingPage.css    |  2 +-
 src/containers/ListingPage/ListingPage.js     | 40 ++------
 src/containers/ListingPage/SectionHeading.js  | 46 +++++++++
 .../__snapshots__/ListingPage.test.js.snap    | 96 +++++++------------
 4 files changed, 91 insertions(+), 93 deletions(-)
 create mode 100644 src/containers/ListingPage/SectionHeading.js

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index c54fd964..301e0ac7 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -255,7 +255,7 @@
   }
 }
 
-.headingContainer {
+.sectionHeading {
   margin-top: 22px;
   margin-bottom: 34px;
 
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index f084ba99..49d133d2 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -25,7 +25,6 @@ import {
   NamedLink,
   NamedRedirect,
   Modal,
-  InlineTextButton,
   LayoutSingleColumn,
   LayoutWrapperTopbar,
   LayoutWrapperMain,
@@ -39,6 +38,7 @@ import { BookingDatesForm, TopbarContainer, EnquiryForm, NotFoundPage } from '..
 
 import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
 import SectionImages from './SectionImages';
+import SectionHeading from './SectionHeading';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
 import css from './ListingPage.css';
@@ -469,35 +469,15 @@ export class ListingPageComponent extends Component {
                 </div>
 
                 <div className={css.mainContent}>
-                  <div className={css.headingContainer}>
-                    <div className={css.desktopPriceContainer}>
-                      <div className={css.desktopPriceValue} title={priceTitle}>
-                        {formattedPrice}
-                      </div>
-                      <div className={css.desktopPerUnit}>
-                        <FormattedMessage id="ListingPage.perUnit" />
-                      </div>
-                    </div>
-                    <div className={css.heading}>
-                      <h1 className={css.title}>{richTitle}</h1>
-                      <div className={css.author}>
-                        {category}
-                        <FormattedMessage id="ListingPage.hostedBy" values={{ name: hostLink }} />
-                        {showContactUser ? (
-                          <span className={css.contactWrapper}>
-                            <span className={css.separator}>•</span>
-                            <InlineTextButton
-                              className={css.contactLink}
-                              onClick={this.onContactUser}
-                            >
-                              <FormattedMessage id="ListingPage.contactUser" />
-                            </InlineTextButton>
-                          </span>
-                        ) : null}
-                      </div>
-                    </div>
-                  </div>
-
+                  <SectionHeading
+                    priceTitle={priceTitle}
+                    formattedPrice={formattedPrice}
+                    richTitle={richTitle}
+                    category={category}
+                    hostLink={hostLink}
+                    showContactUser={showContactUser}
+                    onContactUser={this.onContactUser}
+                  />
                   <div className={css.descriptionContainer}>
                     <h2 className={css.descriptionTitle}>
                       <FormattedMessage id="ListingPage.descriptionTitle" />
diff --git a/src/containers/ListingPage/SectionHeading.js b/src/containers/ListingPage/SectionHeading.js
new file mode 100644
index 00000000..71761fc0
--- /dev/null
+++ b/src/containers/ListingPage/SectionHeading.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { InlineTextButton } from '../../components';
+
+import css from './ListingPage.css';
+
+const SectionHeading = props => {
+  const {
+    priceTitle,
+    formattedPrice,
+    richTitle,
+    category,
+    hostLink,
+    showContactUser,
+    onContactUser,
+  } = props;
+  return (
+    <div className={css.sectionHeading}>
+      <div className={css.desktopPriceContainer}>
+        <div className={css.desktopPriceValue} title={priceTitle}>
+          {formattedPrice}
+        </div>
+        <div className={css.desktopPerUnit}>
+          <FormattedMessage id="ListingPage.perUnit" />
+        </div>
+      </div>
+      <div className={css.heading}>
+        <h1 className={css.title}>{richTitle}</h1>
+        <div className={css.author}>
+          {category}
+          <FormattedMessage id="ListingPage.hostedBy" values={{ name: hostLink }} />
+          {showContactUser ? (
+            <span className={css.contactWrapper}>
+              <span className={css.separator}>•</span>
+              <InlineTextButton className={css.contactLink} onClick={onContactUser}>
+                <FormattedMessage id="ListingPage.contactUser" />
+              </InlineTextButton>
+            </span>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionHeading;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 9b170ea1..959a7c27 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -157,69 +157,41 @@ exports[`ListingPage matches snapshot 1`] = `
             </NamedLink>
           </div>
           <div>
-            <div>
-              <div>
-                <div
-                  title={55}
-                >
-                  55
-                </div>
-                <div>
-                  <FormattedMessage
-                    id="ListingPage.perUnit"
-                    values={Object {}}
-                  />
-                </div>
-              </div>
-              <div>
-                <h1>
-                  <span>
-                    listing1
-                     
-                    title
-                  </span>
-                </h1>
-                <div>
-                  <FormattedMessage
-                    id="ListingPage.hostedBy"
-                    values={
-                      Object {
-                        "name": <NamedLink
-                          className={undefined}
-                          name="ListingPage"
-                          params={
-                              Object {
-                                  "id": "listing1",
-                                  "slug": "listing1-title",
-                                }
-                          }
-                          to={
-                              Object {
-                                  "hash": "#host",
-                                }
-                          }
-                      >
-                          user-1 display name
-                      </NamedLink>,
-                      }
+            <SectionHeading
+              category={null}
+              formattedPrice={55}
+              hostLink={
+                <NamedLink
+                  className={undefined}
+                  name="ListingPage"
+                  params={
+                    Object {
+                      "id": "listing1",
+                      "slug": "listing1-title",
                     }
-                  />
-                  <span>
-                    <span>
-                      •
-                    </span>
-                    <InlineTextButton
-                      onClick={[Function]}
-                    >
-                      <FormattedMessage
-                        id="ListingPage.contactUser"
-                        values={Object {}}
-                      />
-                    </InlineTextButton>
-                  </span>
-                </div>
-              </div>
-            </div>
+                  }
+                  to={
+                    Object {
+                      "hash": "#host",
+                    }
+                  }
+                >
+                  user-1 display name
+                </NamedLink>
+              }
+              onContactUser={[Function]}
+              priceTitle={55}
+              richTitle={
+                <span>
+                  
+                  listing1
+                   
+                  title
+                  
+                </span>
+              }
+              showContactUser={true}
+            />
             <div>
               <h2>
                 <FormattedMessage

From c0137ed602c1bfb2f072dc5e7eebef46f633ce1d Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 14:39:21 +0300
Subject: [PATCH 03/11] Extract description section into a separate file

---
 src/containers/ListingPage/ListingPage.css    |  2 +-
 src/containers/ListingPage/ListingPage.js     | 14 ++--------
 .../ListingPage/SectionDescription.js         | 26 +++++++++++++++++++
 .../__snapshots__/ListingPage.test.js.snap    | 16 +++---------
 4 files changed, 32 insertions(+), 26 deletions(-)
 create mode 100644 src/containers/ListingPage/SectionDescription.js

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 301e0ac7..6a322850 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -359,7 +359,7 @@
   margin: 0;
 }
 
-.descriptionContainer {
+.sectionDescription {
   padding: 0 24px;
   margin-bottom: 35px;
 
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 49d133d2..336a5c6e 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -39,6 +39,7 @@ import { BookingDatesForm, TopbarContainer, EnquiryForm, NotFoundPage } from '..
 import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
 import SectionImages from './SectionImages';
 import SectionHeading from './SectionHeading';
+import SectionDescription from './SectionDescription';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
 import css from './ListingPage.css';
@@ -46,7 +47,6 @@ import css from './ListingPage.css';
 // This defines when ModalInMobile shows content as Modal
 const MODAL_BREAKPOINT = 1023;
 const MIN_LENGTH_FOR_LONG_WORDS_IN_TITLE = 16;
-const MIN_LENGTH_FOR_LONG_WORDS_IN_DESCRIPTION = 20;
 
 const { UUID } = sdkTypes;
 
@@ -478,17 +478,7 @@ export class ListingPageComponent extends Component {
                     showContactUser={showContactUser}
                     onContactUser={this.onContactUser}
                   />
-                  <div className={css.descriptionContainer}>
-                    <h2 className={css.descriptionTitle}>
-                      <FormattedMessage id="ListingPage.descriptionTitle" />
-                    </h2>
-                    <p className={css.description}>
-                      {richText(description, {
-                        longWordMinLength: MIN_LENGTH_FOR_LONG_WORDS_IN_DESCRIPTION,
-                        longWordClass: css.longWord,
-                      })}
-                    </p>
-                  </div>
+                  <SectionDescription description={description} />
 
                   <div className={css.featuresContainer}>
                     <h2 className={css.featuresTitle}>
diff --git a/src/containers/ListingPage/SectionDescription.js b/src/containers/ListingPage/SectionDescription.js
new file mode 100644
index 00000000..5e6213b6
--- /dev/null
+++ b/src/containers/ListingPage/SectionDescription.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { richText } from '../../util/richText';
+
+import css from './ListingPage.css';
+
+const MIN_LENGTH_FOR_LONG_WORDS_IN_DESCRIPTION = 20;
+
+const SectionDescription = props => {
+  const { description } = props;
+  return (
+    <div className={css.sectionDescription}>
+      <h2 className={css.descriptionTitle}>
+        <FormattedMessage id="ListingPage.descriptionTitle" />
+      </h2>
+      <p className={css.description}>
+        {richText(description, {
+          longWordMinLength: MIN_LENGTH_FOR_LONG_WORDS_IN_DESCRIPTION,
+          longWordClass: css.longWord,
+        })}
+      </p>
+    </div>
+  );
+};
+
+export default SectionDescription;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 959a7c27..2e3fe888 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -192,19 +192,9 @@ exports[`ListingPage matches snapshot 1`] = `
               }
               showContactUser={true}
             />
-            <div>
-              <h2>
-                <FormattedMessage
-                  id="ListingPage.descriptionTitle"
-                  values={Object {}}
-                />
-              </h2>
-              <p>
-                listing1
-                 
-                description
-              </p>
-            </div>
+            <SectionDescription
+              description="listing1 description"
+            />
             <div>
               <h2>
                 <FormattedMessage

From 78da3969d8886c31ea3781490a8fea0548c9caf9 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 14:48:59 +0300
Subject: [PATCH 04/11] Extract features section into separate file

---
 src/containers/ListingPage/ListingPage.css    |  2 +-
 src/containers/ListingPage/ListingPage.js     | 19 ++--
 src/containers/ListingPage/SectionFeatures.js | 24 +++++
 .../__snapshots__/ListingPage.test.js.snap    | 89 ++++++++-----------
 4 files changed, 68 insertions(+), 66 deletions(-)
 create mode 100644 src/containers/ListingPage/SectionFeatures.js

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 6a322850..8f723cdd 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -382,7 +382,7 @@
   }
 }
 
-.featuresContainer {
+.sectionFeatures {
   padding: 0 24px;
   margin-bottom: 32px;
 
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 336a5c6e..c4b7595a 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -32,7 +32,6 @@ import {
   Footer,
   UserCard,
   Reviews,
-  PropertyGroup,
 } from '../../components';
 import { BookingDatesForm, TopbarContainer, EnquiryForm, NotFoundPage } from '../../containers';
 
@@ -40,6 +39,7 @@ import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
 import SectionImages from './SectionImages';
 import SectionHeading from './SectionHeading';
 import SectionDescription from './SectionDescription';
+import SectionFeatures from './SectionFeatures';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
 import css from './ListingPage.css';
@@ -479,19 +479,10 @@ export class ListingPageComponent extends Component {
                     onContactUser={this.onContactUser}
                   />
                   <SectionDescription description={description} />
-
-                  <div className={css.featuresContainer}>
-                    <h2 className={css.featuresTitle}>
-                      <FormattedMessage id="ListingPage.featuresTitle" />
-                    </h2>
-                    <PropertyGroup
-                      id="ListingPage.amenities"
-                      options={config.custom.amenities}
-                      selectedOptions={publicData.amenities}
-                      twoColumns={true}
-                    />
-                  </div>
-
+                  <SectionFeatures
+                    options={config.custom.amenities}
+                    selectedOptions={publicData.amenities}
+                  />
                   <SectionRulesMaybe publicData={publicData} />
                   <SectionMapMaybe
                     geolocation={geolocation}
diff --git a/src/containers/ListingPage/SectionFeatures.js b/src/containers/ListingPage/SectionFeatures.js
new file mode 100644
index 00000000..ed70ab0f
--- /dev/null
+++ b/src/containers/ListingPage/SectionFeatures.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { PropertyGroup } from '../../components';
+
+import css from './ListingPage.css';
+
+const SectionFeatures = props => {
+  const { options, selectedOptions } = props;
+  return (
+    <div className={css.sectionFeatures}>
+      <h2 className={css.featuresTitle}>
+        <FormattedMessage id="ListingPage.featuresTitle" />
+      </h2>
+      <PropertyGroup
+        id="ListingPage.amenities"
+        options={options}
+        selectedOptions={selectedOptions}
+        twoColumns={true}
+      />
+    </div>
+  );
+};
+
+export default SectionFeatures;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 2e3fe888..58316698 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -195,57 +195,44 @@ exports[`ListingPage matches snapshot 1`] = `
             <SectionDescription
               description="listing1 description"
             />
-            <div>
-              <h2>
-                <FormattedMessage
-                  id="ListingPage.featuresTitle"
-                  values={Object {}}
-                />
-              </h2>
-              <PropertyGroup
-                className={null}
-                id="ListingPage.amenities"
-                options={
-                  Array [
-                    Object {
-                      "key": "towels",
-                      "label": "Towels",
-                    },
-                    Object {
-                      "key": "bathroom",
-                      "label": "Bathroom",
-                    },
-                    Object {
-                      "key": "swimming_pool",
-                      "label": "Swimming pool",
-                    },
-                    Object {
-                      "key": "own_drinks",
-                      "label": "Own drinks allowed",
-                    },
-                    Object {
-                      "key": "jacuzzi",
-                      "label": "Jacuzzi",
-                    },
-                    Object {
-                      "key": "audiovisual_entertainment",
-                      "label": "Audiovisual entertainment",
-                    },
-                    Object {
-                      "key": "barbeque",
-                      "label": "Barbeque",
-                    },
-                    Object {
-                      "key": "own_food_allowed",
-                      "label": "Own food allowed",
-                    },
-                  ]
-                }
-                rootClassName={null}
-                selectedOptions={Array []}
-                twoColumns={true}
-              />
-            </div>
+            <SectionFeatures
+              options={
+                Array [
+                  Object {
+                    "key": "towels",
+                    "label": "Towels",
+                  },
+                  Object {
+                    "key": "bathroom",
+                    "label": "Bathroom",
+                  },
+                  Object {
+                    "key": "swimming_pool",
+                    "label": "Swimming pool",
+                  },
+                  Object {
+                    "key": "own_drinks",
+                    "label": "Own drinks allowed",
+                  },
+                  Object {
+                    "key": "jacuzzi",
+                    "label": "Jacuzzi",
+                  },
+                  Object {
+                    "key": "audiovisual_entertainment",
+                    "label": "Audiovisual entertainment",
+                  },
+                  Object {
+                    "key": "barbeque",
+                    "label": "Barbeque",
+                  },
+                  Object {
+                    "key": "own_food_allowed",
+                    "label": "Own food allowed",
+                  },
+                ]
+              }
+            />
             <SectionRulesMaybe
               className={null}
               publicData={Object {}}

From 79f599e9a8c993f2dc42e438b972395e86970809 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 14:56:41 +0300
Subject: [PATCH 05/11] Extract reviews section into separate file

---
 src/containers/ListingPage/ListingPage.css    |  2 +-
 src/containers/ListingPage/ListingPage.js     | 20 ++------------
 src/containers/ListingPage/SectionReviews.js  | 27 +++++++++++++++++++
 .../__snapshots__/ListingPage.test.js.snap    | 19 +++----------
 4 files changed, 34 insertions(+), 34 deletions(-)
 create mode 100644 src/containers/ListingPage/SectionReviews.js

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 8f723cdd..a71d8e13 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -441,7 +441,7 @@
   }
 }
 
-.reviewsContainer {
+.sectionReviews {
   padding: 0 24px;
   margin-bottom: 5px;
 
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index c4b7595a..430d7b76 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -31,7 +31,6 @@ import {
   LayoutWrapperFooter,
   Footer,
   UserCard,
-  Reviews,
 } from '../../components';
 import { BookingDatesForm, TopbarContainer, EnquiryForm, NotFoundPage } from '../../containers';
 
@@ -40,6 +39,7 @@ import SectionImages from './SectionImages';
 import SectionHeading from './SectionHeading';
 import SectionDescription from './SectionDescription';
 import SectionFeatures from './SectionFeatures';
+import SectionReviews from './SectionReviews';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
 import css from './ListingPage.css';
@@ -413,12 +413,6 @@ export class ListingPageComponent extends Component {
       </NamedLink>
     );
 
-    const reviewsError = (
-      <h2 className={css.errorText}>
-        <FormattedMessage id="ListingPage.reviewsError" />
-      </h2>
-    );
-
     return (
       <Page
         title={schemaTitle}
@@ -489,17 +483,7 @@ export class ListingPageComponent extends Component {
                     publicData={publicData}
                     listingId={currentListing.id}
                   />
-
-                  <div className={css.reviewsContainer}>
-                    <h2 className={css.reviewsHeading}>
-                      <FormattedMessage
-                        id="ListingPage.reviewsHeading"
-                        values={{ count: reviews.length }}
-                      />
-                    </h2>
-                    {fetchReviewsError ? reviewsError : null}
-                    <Reviews reviews={reviews} />
-                  </div>
+                  <SectionReviews reviews={reviews} fetchReviewsError={fetchReviewsError} />
                   <div id="host" className={css.yourHostContainer}>
                     <h2 className={css.yourHostHeading}>
                       <FormattedMessage id="ListingPage.yourHostHeading" />
diff --git a/src/containers/ListingPage/SectionReviews.js b/src/containers/ListingPage/SectionReviews.js
new file mode 100644
index 00000000..29d6fc42
--- /dev/null
+++ b/src/containers/ListingPage/SectionReviews.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Reviews } from '../../components';
+
+import css from './ListingPage.css';
+
+const SectionReviews = props => {
+  const { reviews, fetchReviewsError } = props;
+
+  const reviewsError = (
+    <h2 className={css.errorText}>
+      <FormattedMessage id="ListingPage.reviewsError" />
+    </h2>
+  );
+
+  return (
+    <div className={css.sectionReviews}>
+      <h2 className={css.reviewsHeading}>
+        <FormattedMessage id="ListingPage.reviewsHeading" values={{ count: reviews.length }} />
+      </h2>
+      {fetchReviewsError ? reviewsError : null}
+      <Reviews reviews={reviews} />
+    </div>
+  );
+};
+
+export default SectionReviews;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 58316698..561732ba 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -254,21 +254,10 @@ exports[`ListingPage matches snapshot 1`] = `
               publicData={Object {}}
               rootClassName={null}
             />
-            <div>
-              <h2>
-                <FormattedMessage
-                  id="ListingPage.reviewsHeading"
-                  values={
-                    Object {
-                      "count": 0,
-                    }
-                  }
-                />
-              </h2>
-              <InjectIntl(ReviewsComponent)
-                reviews={Array []}
-              />
-            </div>
+            <SectionReviews
+              fetchReviewsError={null}
+              reviews={Array []}
+            />
             <div
               id="host"
             >

From ee8f25c1626afa24dc335c2eb7be406250a6ab94 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 15:19:11 +0300
Subject: [PATCH 06/11] Extract host section into separate file

---
 src/containers/ListingPage/ListingPage.css    |   2 +-
 src/containers/ListingPage/ListingPage.js     |  51 +++------
 src/containers/ListingPage/SectionHost.js     |  55 +++++++++
 .../__snapshots__/ListingPage.test.js.snap    | 105 +++++++++---------
 4 files changed, 127 insertions(+), 86 deletions(-)
 create mode 100644 src/containers/ListingPage/SectionHost.js

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index a71d8e13..8219bf00 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -467,7 +467,7 @@
   }
 }
 
-.yourHostContainer {
+.sectionHost {
   position: relative;
   padding: 0 24px;
   margin-bottom: 5px;
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 430d7b76..79713184 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -24,15 +24,13 @@ import {
   Page,
   NamedLink,
   NamedRedirect,
-  Modal,
   LayoutSingleColumn,
   LayoutWrapperTopbar,
   LayoutWrapperMain,
   LayoutWrapperFooter,
   Footer,
-  UserCard,
 } from '../../components';
-import { BookingDatesForm, TopbarContainer, EnquiryForm, NotFoundPage } from '../../containers';
+import { BookingDatesForm, TopbarContainer, NotFoundPage } from '../../containers';
 
 import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
 import SectionImages from './SectionImages';
@@ -40,6 +38,7 @@ import SectionHeading from './SectionHeading';
 import SectionDescription from './SectionDescription';
 import SectionFeatures from './SectionFeatures';
 import SectionReviews from './SectionReviews';
+import SectionHost from './SectionHost';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
 import css from './ListingPage.css';
@@ -484,38 +483,20 @@ export class ListingPageComponent extends Component {
                     listingId={currentListing.id}
                   />
                   <SectionReviews reviews={reviews} fetchReviewsError={fetchReviewsError} />
-                  <div id="host" className={css.yourHostContainer}>
-                    <h2 className={css.yourHostHeading}>
-                      <FormattedMessage id="ListingPage.yourHostHeading" />
-                    </h2>
-                    {isOwnListing ? (
-                      <NamedLink className={css.editProfileLink} name="ProfileSettingsPage">
-                        <FormattedMessage id="ListingPage.editProfileLink" />
-                      </NamedLink>
-                    ) : null}
-                    <UserCard
-                      user={currentListing.author}
-                      currentUser={currentUser}
-                      onContactUser={this.onContactUser}
-                    />
-                    <Modal
-                      id="ListingPage.enquiry"
-                      contentClassName={css.enquiryModalContent}
-                      isOpen={isAuthenticated && this.state.enquiryModalOpen}
-                      onClose={() => this.setState({ enquiryModalOpen: false })}
-                      onManageDisableScrolling={onManageDisableScrolling}
-                    >
-                      <EnquiryForm
-                        className={css.enquiryForm}
-                        submitButtonWrapperClassName={css.enquirySubmitButtonWrapper}
-                        listingTitle={title}
-                        authorDisplayName={authorDisplayName}
-                        sendEnquiryError={sendEnquiryError}
-                        onSubmit={this.onSubmitEnquiry}
-                        inProgress={sendEnquiryInProgress}
-                      />
-                    </Modal>
-                  </div>
+                  <SectionHost
+                    title={title}
+                    listing={currentListing}
+                    isOwnListing={isOwnListing}
+                    authorDisplayName={authorDisplayName}
+                    onContactUser={this.onContactUser}
+                    isEnquiryModalOpen={isAuthenticated && this.state.enquiryModalOpen}
+                    onCloseEnquiryModal={() => this.setState({ enquiryModalOpen: false })}
+                    sendEnquiryError={sendEnquiryError}
+                    sendEnquiryInProgress={sendEnquiryInProgress}
+                    onSubmitEnquiry={this.onSubmitEnquiry}
+                    currentUser={currentUser}
+                    onManageDisableScrolling={onManageDisableScrolling}
+                  />
                 </div>
 
                 <ModalInMobile
diff --git a/src/containers/ListingPage/SectionHost.js b/src/containers/ListingPage/SectionHost.js
new file mode 100644
index 00000000..a0c4b1ca
--- /dev/null
+++ b/src/containers/ListingPage/SectionHost.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { NamedLink, UserCard, Modal } from '../../components';
+import { EnquiryForm } from '../../containers';
+
+import css from './ListingPage.css';
+
+const SectionHost = props => {
+  const {
+    title,
+    listing,
+    isOwnListing,
+    authorDisplayName,
+    onContactUser,
+    isEnquiryModalOpen,
+    onCloseEnquiryModal,
+    sendEnquiryError,
+    sendEnquiryInProgress,
+    onSubmitEnquiry,
+    currentUser,
+    onManageDisableScrolling,
+  } = props;
+  return (
+    <div id="host" className={css.sectionHost}>
+      <h2 className={css.yourHostHeading}>
+        <FormattedMessage id="ListingPage.yourHostHeading" />
+      </h2>
+      {isOwnListing ? (
+        <NamedLink className={css.editProfileLink} name="ProfileSettingsPage">
+          <FormattedMessage id="ListingPage.editProfileLink" />
+        </NamedLink>
+      ) : null}
+      <UserCard user={listing.author} currentUser={currentUser} onContactUser={onContactUser} />
+      <Modal
+        id="ListingPage.enquiry"
+        contentClassName={css.enquiryModalContent}
+        isOpen={isEnquiryModalOpen}
+        onClose={onCloseEnquiryModal}
+        onManageDisableScrolling={onManageDisableScrolling}
+      >
+        <EnquiryForm
+          className={css.enquiryForm}
+          submitButtonWrapperClassName={css.enquirySubmitButtonWrapper}
+          listingTitle={title}
+          authorDisplayName={authorDisplayName}
+          sendEnquiryError={sendEnquiryError}
+          onSubmit={onSubmitEnquiry}
+          inProgress={sendEnquiryInProgress}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default SectionHost;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 561732ba..8e51d88c 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -258,41 +258,48 @@ exports[`ListingPage matches snapshot 1`] = `
               fetchReviewsError={null}
               reviews={Array []}
             />
-            <div
-              id="host"
-            >
-              <h2>
-                <FormattedMessage
-                  id="ListingPage.yourHostHeading"
-                  values={Object {}}
-                />
-              </h2>
-              <UserCard
-                className={null}
-                currentUser={
-                  Object {
-                    "attributes": Object {
-                      "banned": false,
-                      "email": "user-2@example.com",
-                      "emailVerified": true,
-                      "profile": Object {
-                        "abbreviatedName": "user-2 abbreviated name",
-                        "displayName": "user-2 display name",
-                        "firstName": "user-2 first name",
-                        "lastName": "user-2 last name",
-                      },
-                      "stripeConnected": true,
+            <SectionHost
+              authorDisplayName="user-1 display name"
+              currentUser={
+                Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "email": "user-2@example.com",
+                    "emailVerified": true,
+                    "profile": Object {
+                      "abbreviatedName": "user-2 abbreviated name",
+                      "displayName": "user-2 display name",
+                      "firstName": "user-2 first name",
+                      "lastName": "user-2 last name",
                     },
-                    "id": UUID {
-                      "uuid": "user-2",
-                    },
-                    "type": "currentUser",
-                  }
+                    "stripeConnected": true,
+                  },
+                  "id": UUID {
+                    "uuid": "user-2",
+                  },
+                  "type": "currentUser",
                 }
-                onContactUser={[Function]}
-                rootClassName={null}
-                user={
-                  Object {
+              }
+              isEnquiryModalOpen={false}
+              isOwnListing={false}
+              listing={
+                Object {
+                  "attributes": Object {
+                    "deleted": false,
+                    "description": "listing1 description",
+                    "geolocation": LatLng {
+                      "lat": 40,
+                      "lng": 60,
+                    },
+                    "price": Money {
+                      "amount": 5500,
+                      "currency": "USD",
+                    },
+                    "publicData": Object {},
+                    "state": "published",
+                    "title": "listing1 title",
+                  },
+                  "author": Object {
                     "attributes": Object {
                       "banned": false,
                       "profile": Object {
@@ -304,24 +311,22 @@ exports[`ListingPage matches snapshot 1`] = `
                       "uuid": "user-1",
                     },
                     "type": "user",
-                  }
+                  },
+                  "id": UUID {
+                    "uuid": "listing1",
+                  },
+                  "images": Array [],
+                  "type": "listing",
                 }
-              />
-              <InjectIntl(ModalComponent)
-                id="ListingPage.enquiry"
-                isOpen={false}
-                onClose={[Function]}
-                onManageDisableScrolling={[Function]}
-              >
-                <ReduxForm
-                  authorDisplayName="user-1 display name"
-                  inProgress={false}
-                  listingTitle="listing1 title"
-                  onSubmit={[Function]}
-                  sendEnquiryError={null}
-                />
-              </InjectIntl(ModalComponent)>
-            </div>
+              }
+              onCloseEnquiryModal={[Function]}
+              onContactUser={[Function]}
+              onManageDisableScrolling={[Function]}
+              onSubmitEnquiry={[Function]}
+              sendEnquiryError={null}
+              sendEnquiryInProgress={false}
+              title="listing1 title"
+            />
           </div>
           <withViewport(ModalInMobileComponent)
             id="BookingDatesFormInModal"

From 2c24b1a02a1eb2080f4f088bf5e2d3870320f12d Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 15:40:13 +0300
Subject: [PATCH 07/11] Extract booking section into separate file

---
 src/containers/ListingPage/ListingPage.js     |  94 ++---------
 src/containers/ListingPage/SectionBooking.js  |  98 +++++++++++
 .../__snapshots__/ListingPage.test.js.snap    | 152 ++++++++----------
 3 files changed, 179 insertions(+), 165 deletions(-)
 create mode 100644 src/containers/ListingPage/SectionBooking.js

diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 79713184..29ad247d 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -19,8 +19,6 @@ import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck
 import {
   AvatarLarge,
   AvatarMedium,
-  Button,
-  ModalInMobile,
   Page,
   NamedLink,
   NamedRedirect,
@@ -30,7 +28,7 @@ import {
   LayoutWrapperFooter,
   Footer,
 } from '../../components';
-import { BookingDatesForm, TopbarContainer, NotFoundPage } from '../../containers';
+import { TopbarContainer, NotFoundPage } from '../../containers';
 
 import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
 import SectionImages from './SectionImages';
@@ -41,10 +39,9 @@ import SectionReviews from './SectionReviews';
 import SectionHost from './SectionHost';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
+import SectionBooking from './SectionBooking';
 import css from './ListingPage.css';
 
-// This defines when ModalInMobile shows content as Modal
-const MODAL_BREAKPOINT = 1023;
 const MIN_LENGTH_FOR_LONG_WORDS_IN_TITLE = 16;
 
 const { UUID } = sdkTypes;
@@ -332,27 +329,8 @@ export class ListingPageComponent extends Component {
     });
     const authorDisplayName = userDisplayName(ensuredAuthor, bannedUserDisplayName);
 
-    const bookBtnMessage = intl.formatMessage({ id: 'ListingPage.ctaButtonMessage' });
     const { formattedPrice, priceTitle } = priceData(price, intl);
 
-    const showClosedListingHelpText = currentListing.id && isClosed;
-    const bookingHeading = (
-      <div className={css.bookingHeading}>
-        <h2 className={css.bookingTitle}>
-          <FormattedMessage id="ListingPage.bookingTitle" values={{ title: richTitle }} />
-        </h2>
-        <div className={css.bookingHelp}>
-          <FormattedMessage
-            id={
-              showClosedListingHelpText
-                ? 'ListingPage.bookingHelpClosedListing'
-                : 'ListingPage.bookingHelp'
-            }
-          />
-        </div>
-      </div>
-    );
-
     const handleMobileBookModalClose = () => {
       closeBookModal(history, currentListing);
     };
@@ -498,60 +476,22 @@ export class ListingPageComponent extends Component {
                     onManageDisableScrolling={onManageDisableScrolling}
                   />
                 </div>
-
-                <ModalInMobile
-                  className={css.modalInMobile}
-                  containerClassName={css.modalContainer}
-                  id="BookingDatesFormInModal"
-                  isModalOpenOnMobile={isBook}
-                  onClose={handleMobileBookModalClose}
-                  showAsModalMaxWidth={MODAL_BREAKPOINT}
+                <SectionBooking
+                  listing={currentListing}
+                  isOwnListing={isOwnListing}
+                  isClosed={isClosed}
+                  isBook={isBook}
+                  unitType={unitType}
+                  price={price}
+                  formattedPrice={formattedPrice}
+                  priceTitle={priceTitle}
+                  handleBookingSubmit={handleBookingSubmit}
+                  richTitle={richTitle}
+                  authorDisplayName={authorDisplayName}
+                  handleBookButtonClick={handleBookButtonClick}
+                  handleMobileBookModalClose={handleMobileBookModalClose}
                   onManageDisableScrolling={onManageDisableScrolling}
-                >
-                  <div className={css.modalHeading}>
-                    <h1 className={css.title}>{richTitle}</h1>
-                    <div className={css.author}>
-                      <span className={css.authorName}>
-                        <FormattedMessage
-                          id="ListingPage.hostedBy"
-                          values={{ name: authorDisplayName }}
-                        />
-                      </span>
-                    </div>
-                  </div>
-
-                  {bookingHeading}
-                  {!isClosed ? (
-                    <BookingDatesForm
-                      className={css.bookingForm}
-                      submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}
-                      unitType={unitType}
-                      onSubmit={handleBookingSubmit}
-                      price={price}
-                      isOwnListing={isOwnListing}
-                    />
-                  ) : null}
-                </ModalInMobile>
-                <div className={css.openBookingForm}>
-                  <div className={css.priceContainer}>
-                    <div className={css.priceValue} title={priceTitle}>
-                      {formattedPrice}
-                    </div>
-                    <div className={css.perUnit}>
-                      <FormattedMessage id="ListingPage.perUnit" />
-                    </div>
-                  </div>
-
-                  {!isClosed ? (
-                    <Button rootClassName={css.bookButton} onClick={handleBookButtonClick}>
-                      {bookBtnMessage}
-                    </Button>
-                  ) : (
-                    <div className={css.closedListingButton}>
-                      <FormattedMessage id="ListingPage.closedListingButtonText" />
-                    </div>
-                  )}
-                </div>
+                />
               </div>
             </div>
           </LayoutWrapperMain>
diff --git a/src/containers/ListingPage/SectionBooking.js b/src/containers/ListingPage/SectionBooking.js
new file mode 100644
index 00000000..c568689b
--- /dev/null
+++ b/src/containers/ListingPage/SectionBooking.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { ModalInMobile, Button } from '../../components';
+import { BookingDatesForm } from '../../containers';
+
+import css from './ListingPage.css';
+
+// This defines when ModalInMobile shows content as Modal
+const MODAL_BREAKPOINT = 1023;
+
+const SectionBooking = props => {
+  const {
+    listing,
+    isOwnListing,
+    isClosed,
+    isBook,
+    unitType,
+    price,
+    formattedPrice,
+    priceTitle,
+    handleBookingSubmit,
+    richTitle,
+    authorDisplayName,
+    handleBookButtonClick,
+    handleMobileBookModalClose,
+    onManageDisableScrolling,
+  } = props;
+  const showClosedListingHelpText = listing.id && isClosed;
+  return (
+    <div>
+      <ModalInMobile
+        className={css.modalInMobile}
+        containerClassName={css.modalContainer}
+        id="BookingDatesFormInModal"
+        isModalOpenOnMobile={isBook}
+        onClose={handleMobileBookModalClose}
+        showAsModalMaxWidth={MODAL_BREAKPOINT}
+        onManageDisableScrolling={onManageDisableScrolling}
+      >
+        <div className={css.modalHeading}>
+          <h1 className={css.title}>{richTitle}</h1>
+          <div className={css.author}>
+            <span className={css.authorName}>
+              <FormattedMessage id="ListingPage.hostedBy" values={{ name: authorDisplayName }} />
+            </span>
+          </div>
+        </div>
+
+        <div className={css.bookingHeading}>
+          <h2 className={css.bookingTitle}>
+            <FormattedMessage id="ListingPage.bookingTitle" values={{ title: richTitle }} />
+          </h2>
+          <div className={css.bookingHelp}>
+            <FormattedMessage
+              id={
+                showClosedListingHelpText
+                  ? 'ListingPage.bookingHelpClosedListing'
+                  : 'ListingPage.bookingHelp'
+              }
+            />
+          </div>
+        </div>
+        {!isClosed ? (
+          <BookingDatesForm
+            className={css.bookingForm}
+            submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}
+            unitType={unitType}
+            onSubmit={handleBookingSubmit}
+            price={price}
+            isOwnListing={isOwnListing}
+          />
+        ) : null}
+      </ModalInMobile>
+      <div className={css.openBookingForm}>
+        <div className={css.priceContainer}>
+          <div className={css.priceValue} title={priceTitle}>
+            {formattedPrice}
+          </div>
+          <div className={css.perUnit}>
+            <FormattedMessage id="ListingPage.perUnit" />
+          </div>
+        </div>
+
+        {!isClosed ? (
+          <Button rootClassName={css.bookButton} onClick={handleBookButtonClick}>
+            <FormattedMessage id="ListingPage.ctaButtonMessage" />
+          </Button>
+        ) : (
+          <div className={css.closedListingButton}>
+            <FormattedMessage id="ListingPage.closedListingButtonText" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SectionBooking;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 8e51d88c..8183998b 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -328,95 +328,71 @@ exports[`ListingPage matches snapshot 1`] = `
               title="listing1 title"
             />
           </div>
-          <withViewport(ModalInMobileComponent)
-            id="BookingDatesFormInModal"
-            isModalOpenOnMobile={false}
-            onClose={[Function]}
-            onManageDisableScrolling={[Function]}
-            showAsModalMaxWidth={1023}
-          >
-            <div>
-              <h1>
-                <span>
-                  listing1
-                   
-                  title
-                </span>
-              </h1>
-              <div>
-                <span>
-                  <FormattedMessage
-                    id="ListingPage.hostedBy"
-                    values={
-                      Object {
-                        "name": "user-1 display name",
-                      }
-                    }
-                  />
-                </span>
-              </div>
-            </div>
-            <div>
-              <h2>
-                <FormattedMessage
-                  id="ListingPage.bookingTitle"
-                  values={
-                    Object {
-                      "title": <span>
-                        
-                        listing1
-                         
-                        title
-                        
-                    </span>,
-                    }
-                  }
-                />
-              </h2>
-              <div>
-                <FormattedMessage
-                  id="ListingPage.bookingHelp"
-                  values={Object {}}
-                />
-              </div>
-            </div>
-            <BookingDatesForm
-              isOwnListing={false}
-              onSubmit={[Function]}
-              price={
-                Money {
-                  "amount": 5500,
-                  "currency": "USD",
-                }
+          <SectionBooking
+            authorDisplayName="user-1 display name"
+            formattedPrice={55}
+            handleBookButtonClick={[Function]}
+            handleBookingSubmit={[Function]}
+            handleMobileBookModalClose={[Function]}
+            isBook={false}
+            isClosed={false}
+            isOwnListing={false}
+            listing={
+              Object {
+                "attributes": Object {
+                  "deleted": false,
+                  "description": "listing1 description",
+                  "geolocation": LatLng {
+                    "lat": 40,
+                    "lng": 60,
+                  },
+                  "price": Money {
+                    "amount": 5500,
+                    "currency": "USD",
+                  },
+                  "publicData": Object {},
+                  "state": "published",
+                  "title": "listing1 title",
+                },
+                "author": Object {
+                  "attributes": Object {
+                    "banned": false,
+                    "profile": Object {
+                      "abbreviatedName": "TT",
+                      "displayName": "user-1 display name",
+                    },
+                  },
+                  "id": UUID {
+                    "uuid": "user-1",
+                  },
+                  "type": "user",
+                },
+                "id": UUID {
+                  "uuid": "listing1",
+                },
+                "images": Array [],
+                "type": "listing",
               }
-              unitType="line-item/night"
-            />
-          </withViewport(ModalInMobileComponent)>
-          <div>
-            <div>
-              <div
-                title={55}
-              >
-                55
-              </div>
-              <div>
-                <FormattedMessage
-                  id="ListingPage.perUnit"
-                  values={Object {}}
-                />
-              </div>
-            </div>
-            <Button
-              className={null}
-              disabled={false}
-              inProgress={false}
-              onClick={[Function]}
-              ready={false}
-              rootClassName={null}
-            >
-              ListingPage.ctaButtonMessage
-            </Button>
-          </div>
+            }
+            onManageDisableScrolling={[Function]}
+            price={
+              Money {
+                "amount": 5500,
+                "currency": "USD",
+              }
+            }
+            priceTitle={55}
+            richTitle={
+              <span>
+                
+                listing1
+                 
+                title
+                
+              </span>
+            }
+            unitType="line-item/night"
+          />
         </div>
       </div>
     </LayoutWrapperMain>

From 09adef66651cf6ee248f33ab07c011ad96f70f46 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 15:40:27 +0300
Subject: [PATCH 08/11] Unify class name usage

---
 src/containers/ListingPage/ListingPage.css    | 2 +-
 src/containers/ListingPage/SectionMapMaybe.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 8219bf00..39e3e1c7 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -418,7 +418,7 @@
   }
 }
 
-.locationContainer {
+.sectionMap {
   padding: 0 24px;
   margin-bottom: 35px;
 
diff --git a/src/containers/ListingPage/SectionMapMaybe.js b/src/containers/ListingPage/SectionMapMaybe.js
index f5499cd8..ac6e015c 100644
--- a/src/containers/ListingPage/SectionMapMaybe.js
+++ b/src/containers/ListingPage/SectionMapMaybe.js
@@ -17,7 +17,7 @@ const SectionMapMaybe = props => {
   }
 
   const address = publicData.location ? publicData.location.address : '';
-  const classes = classNames(rootClassName || css.locationContainer, className);
+  const classes = classNames(rootClassName || css.sectionMap, className);
 
   const mapProps = config.coordinates.fuzzy
     ? { obfuscatedCenter: obfuscatedCoordinates(geolocation, listingId ? listingId.uuid : null) }

From 80edfd843fe5ab82030091048045d381630c1e76 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 15:45:32 +0300
Subject: [PATCH 09/11] Extract avatar section into separate file

---
 src/containers/ListingPage/ListingPage.css    |  2 +-
 src/containers/ListingPage/ListingPage.js     | 21 +----
 src/containers/ListingPage/SectionAvatar.js   | 20 +++++
 .../__snapshots__/ListingPage.test.js.snap    | 87 +++++--------------
 4 files changed, 44 insertions(+), 86 deletions(-)
 create mode 100644 src/containers/ListingPage/SectionAvatar.js

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 39e3e1c7..8b8b76e4 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -219,7 +219,7 @@
   }
 }
 
-.avatarWrapper {
+.sectionAvatar {
   /* Position (over the listing image)*/
   margin-left: 24px;
   margin-top: -31px;
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 29ad247d..735758ee 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -17,8 +17,6 @@ import { richText } from '../../util/richText';
 import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
 import {
-  AvatarLarge,
-  AvatarMedium,
   Page,
   NamedLink,
   NamedRedirect,
@@ -32,6 +30,7 @@ import { TopbarContainer, NotFoundPage } from '../../containers';
 
 import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
 import SectionImages from './SectionImages';
+import SectionAvatar from './SectionAvatar';
 import SectionHeading from './SectionHeading';
 import SectionDescription from './SectionDescription';
 import SectionFeatures from './SectionFeatures';
@@ -422,23 +421,7 @@ export class ListingPageComponent extends Component {
                 onManageDisableScrolling={onManageDisableScrolling}
               />
               <div className={css.contentContainer}>
-                <div className={css.avatarWrapper}>
-                  <NamedLink name="ListingPage" params={params} to={{ hash: '#host' }}>
-                    <AvatarLarge
-                      user={currentAuthor}
-                      className={css.avatarDesktop}
-                      disableProfileLink
-                    />
-                  </NamedLink>
-                  <NamedLink name="ListingPage" params={params} to={{ hash: '#host' }}>
-                    <AvatarMedium
-                      user={currentAuthor}
-                      className={css.avatarMobile}
-                      disableProfileLink
-                    />
-                  </NamedLink>
-                </div>
-
+                <SectionAvatar user={currentAuthor} params={params} />
                 <div className={css.mainContent}>
                   <SectionHeading
                     priceTitle={priceTitle}
diff --git a/src/containers/ListingPage/SectionAvatar.js b/src/containers/ListingPage/SectionAvatar.js
new file mode 100644
index 00000000..52bdc978
--- /dev/null
+++ b/src/containers/ListingPage/SectionAvatar.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { NamedLink, AvatarLarge, AvatarMedium } from '../../components';
+
+import css from './ListingPage.css';
+
+const SectionAvatar = props => {
+  const { user, params } = props;
+  return (
+    <div className={css.sectionAvatar}>
+      <NamedLink name="ListingPage" params={params} to={{ hash: '#host' }}>
+        <AvatarLarge user={user} className={css.avatarDesktop} disableProfileLink />
+      </NamedLink>
+      <NamedLink name="ListingPage" params={params} to={{ hash: '#host' }}>
+        <AvatarMedium user={user} className={css.avatarMobile} disableProfileLink />
+      </NamedLink>
+    </div>
+  );
+};
+
+export default SectionAvatar;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 8183998b..7bb7e6f4 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -88,74 +88,29 @@ exports[`ListingPage matches snapshot 1`] = `
           title="listing1 title"
         />
         <div>
-          <div>
-            <NamedLink
-              name="ListingPage"
-              params={
-                Object {
-                  "id": "listing1",
-                  "slug": "listing1-title",
-                }
+          <SectionAvatar
+            params={
+              Object {
+                "id": "listing1",
+                "slug": "listing1-title",
               }
-              to={
-                Object {
-                  "hash": "#host",
-                }
+            }
+            user={
+              Object {
+                "attributes": Object {
+                  "banned": false,
+                  "profile": Object {
+                    "abbreviatedName": "TT",
+                    "displayName": "user-1 display name",
+                  },
+                },
+                "id": UUID {
+                  "uuid": "user-1",
+                },
+                "type": "user",
               }
-            >
-              <AvatarLarge
-                disableProfileLink={true}
-                user={
-                  Object {
-                    "attributes": Object {
-                      "banned": false,
-                      "profile": Object {
-                        "abbreviatedName": "TT",
-                        "displayName": "user-1 display name",
-                      },
-                    },
-                    "id": UUID {
-                      "uuid": "user-1",
-                    },
-                    "type": "user",
-                  }
-                }
-              />
-            </NamedLink>
-            <NamedLink
-              name="ListingPage"
-              params={
-                Object {
-                  "id": "listing1",
-                  "slug": "listing1-title",
-                }
-              }
-              to={
-                Object {
-                  "hash": "#host",
-                }
-              }
-            >
-              <AvatarMedium
-                disableProfileLink={true}
-                user={
-                  Object {
-                    "attributes": Object {
-                      "banned": false,
-                      "profile": Object {
-                        "abbreviatedName": "TT",
-                        "displayName": "user-1 display name",
-                      },
-                    },
-                    "id": UUID {
-                      "uuid": "user-1",
-                    },
-                    "type": "user",
-                  }
-                }
-              />
-            </NamedLink>
-          </div>
+            }
+          />
           <div>
             <SectionHeading
               category={null}

From 87244c866b34c834cf74ce6ba8830eaa238f61a0 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 15:52:30 +0300
Subject: [PATCH 10/11] Make custom config stable in tests

---
 src/containers/ListingPage/ListingPage.js     | 10 +++---
 .../ListingPage/ListingPage.test.js           | 10 ++++++
 .../__snapshots__/ListingPage.test.js.snap    | 32 ++++---------------
 3 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 735758ee..6428fbbf 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -95,8 +95,6 @@ const categoryLabel = (categories, key) => {
   return cat ? cat.label : key;
 };
 
-// TODO: price unit (per x), custom fields, contact, reviews
-// N.B. All the presentational content needs to be extracted to their own components
 export class ListingPageComponent extends Component {
   constructor(props) {
     super(props);
@@ -199,6 +197,8 @@ export class ListingPageComponent extends Component {
       fetchReviewsError,
       sendEnquiryInProgress,
       sendEnquiryError,
+      categoriesConfig,
+      amenitiesConfig,
     } = this.props;
 
     const isBook = !!parse(location.search).book;
@@ -249,7 +249,7 @@ export class ListingPageComponent extends Component {
     const category =
       publicData && publicData.category ? (
         <span>
-          {categoryLabel(config.custom.categories, publicData.category)}
+          {categoryLabel(categoriesConfig, publicData.category)}
           <span className={css.separator}>•</span>
         </span>
       ) : null;
@@ -434,7 +434,7 @@ export class ListingPageComponent extends Component {
                   />
                   <SectionDescription description={description} />
                   <SectionFeatures
-                    options={config.custom.amenities}
+                    options={amenitiesConfig}
                     selectedOptions={publicData.amenities}
                   />
                   <SectionRulesMaybe publicData={publicData} />
@@ -495,6 +495,8 @@ ListingPageComponent.defaultProps = {
   reviews: [],
   fetchReviewsError: null,
   sendEnquiryError: null,
+  categoriesConfig: config.custom.categories,
+  amenitiesConfig: config.custom.amenities,
 };
 
 ListingPageComponent.propTypes = {
diff --git a/src/containers/ListingPage/ListingPage.test.js b/src/containers/ListingPage/ListingPage.test.js
index 5fa87e54..7013c4d7 100644
--- a/src/containers/ListingPage/ListingPage.test.js
+++ b/src/containers/ListingPage/ListingPage.test.js
@@ -30,6 +30,14 @@ import ActionBarMaybe from './ActionBarMaybe';
 const { UUID } = sdkTypes;
 const noop = () => null;
 
+const categoriesConfig = [{ key: 'cat1', label: 'Cat 1' }, { key: 'cat2', label: 'Cat 2' }];
+
+const amenitiesConfig = [
+  { key: 'feat1', label: 'Feat 1' },
+  { key: 'feat2', label: 'Feat 2' },
+  { key: 'feat3', label: 'Feat 3' },
+];
+
 describe('ListingPage', () => {
   it('matches snapshot', () => {
     const currentUser = createCurrentUser('user-2');
@@ -67,6 +75,8 @@ describe('ListingPage', () => {
       onResendVerificationEmail: noop,
       sendEnquiryInProgress: false,
       onSendEnquiry: noop,
+      categoriesConfig,
+      amenitiesConfig,
     };
 
     const tree = renderShallow(<ListingPageComponent {...props} />);
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 7bb7e6f4..bfaabcfa 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -154,36 +154,16 @@ exports[`ListingPage matches snapshot 1`] = `
               options={
                 Array [
                   Object {
-                    "key": "towels",
-                    "label": "Towels",
+                    "key": "feat1",
+                    "label": "Feat 1",
                   },
                   Object {
-                    "key": "bathroom",
-                    "label": "Bathroom",
+                    "key": "feat2",
+                    "label": "Feat 2",
                   },
                   Object {
-                    "key": "swimming_pool",
-                    "label": "Swimming pool",
-                  },
-                  Object {
-                    "key": "own_drinks",
-                    "label": "Own drinks allowed",
-                  },
-                  Object {
-                    "key": "jacuzzi",
-                    "label": "Jacuzzi",
-                  },
-                  Object {
-                    "key": "audiovisual_entertainment",
-                    "label": "Audiovisual entertainment",
-                  },
-                  Object {
-                    "key": "barbeque",
-                    "label": "Barbeque",
-                  },
-                  Object {
-                    "key": "own_food_allowed",
-                    "label": "Own food allowed",
+                    "key": "feat3",
+                    "label": "Feat 3",
                   },
                 ]
               }

From 4d76e97c6a6a785e09ae224f8aceeca7fdcbbf40 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 10 Apr 2018 16:35:05 +0300
Subject: [PATCH 11/11] Cleanup listing page internals based on review comments

---
 src/containers/ListingPage/ListingPage.js | 45 +++++++++++++----------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 6428fbbf..84199c73 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { Component } from 'react';
-import { arrayOf, bool, func, shape, string, oneOf } from 'prop-types';
+import { array, arrayOf, bool, func, shape, string, oneOf } from 'prop-types';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
@@ -246,23 +246,8 @@ export class ListingPageComponent extends Component {
       </span>
     );
 
-    const category =
-      publicData && publicData.category ? (
-        <span>
-          {categoryLabel(categoriesConfig, publicData.category)}
-          <span className={css.separator}>•</span>
-        </span>
-      ) : null;
-
     const topbar = <TopbarContainer />;
 
-    const loadingTitle = intl.formatMessage({
-      id: 'ListingPage.loadingListingTitle',
-    });
-    const errorTitle = intl.formatMessage({
-      id: 'ListingPage.errorLoadingListingTitle',
-    });
-
     if (showListingError && showListingError.status === 404) {
       // 404 listing not found
 
@@ -270,6 +255,10 @@ export class ListingPageComponent extends Component {
     } else if (showListingError) {
       // Other error in fetching listing
 
+      const errorTitle = intl.formatMessage({
+        id: 'ListingPage.errorLoadingListingTitle',
+      });
+
       return (
         <Page title={errorTitle} scrollingDisabled={scrollingDisabled}>
           <LayoutSingleColumn className={css.pageRoot}>
@@ -288,6 +277,10 @@ export class ListingPageComponent extends Component {
     } else if (!currentListing.id) {
       // Still loading the listing
 
+      const loadingTitle = intl.formatMessage({
+        id: 'ListingPage.loadingListingTitle',
+      });
+
       return (
         <Page title={loadingTitle} scrollingDisabled={scrollingDisabled}>
           <LayoutSingleColumn className={css.pageRoot}>
@@ -343,8 +336,6 @@ export class ListingPageComponent extends Component {
       }
     };
 
-    const editParams = { id: listingId.uuid, slug: listingSlug, type: 'edit', tab: 'description' };
-
     const handleBookButtonClick = () => {
       const isCurrentlyClosed = currentListing.attributes.state === LISTING_STATE_CLOSED;
       if (isOwnListing || isCurrentlyClosed) {
@@ -389,6 +380,14 @@ export class ListingPageComponent extends Component {
       </NamedLink>
     );
 
+    const category =
+      publicData && publicData.category ? (
+        <span>
+          {categoryLabel(categoriesConfig, publicData.category)}
+          <span className={css.separator}>•</span>
+        </span>
+      ) : null;
+
     return (
       <Page
         title={schemaTitle}
@@ -414,7 +413,12 @@ export class ListingPageComponent extends Component {
                 title={title}
                 listing={currentListing}
                 isOwnListing={isOwnListing}
-                editParams={editParams}
+                editParams={{
+                  id: listingId.uuid,
+                  slug: listingSlug,
+                  type: 'edit',
+                  tab: 'description',
+                }}
                 imageCarouselOpen={this.state.imageCarouselOpen}
                 onImageCarouselClose={() => this.setState({ imageCarouselOpen: false })}
                 handleViewPhotosClick={handleViewPhotosClick}
@@ -532,6 +536,9 @@ ListingPageComponent.propTypes = {
   sendEnquiryInProgress: bool.isRequired,
   sendEnquiryError: propTypes.error,
   onSendEnquiry: func.isRequired,
+
+  categoriesConfig: array,
+  amenitiesConfig: array,
 };
 
 const mapStateToProps = state => {