Add listing author UserCard to the ListingPage

src/containers/ListingPage/ListingPage.css

@@ -377,6 +377,32 @@
   }
 }
 
+.yourHostContainer {
+  padding: 0 24px;
+  margin-bottom: 5px;
+
+  @media (--viewportMedium) {
+    padding: 0;
+  }
+  @media (--viewportLarge) {
+    margin-bottom: 3px;
+  }
+}
+
+.yourHostHeading {
+  @apply --marketplaceH3FontStyles;
+  color: var(--matterColorAnti);
+
+  margin: 54px 0 23px 0;
+
+  @media (--viewportMedium) {
+    margin: 53px 0 27px 0;
+  }
+  @media (--viewportLarge) {
+    margin: 51px 0 27px 0;
+  }
+}
+
 .map {
   /* Dimensions: Map takes all available space from viewport (excludes action button and section title) */
   height: calc(100vh - 193px);

src/containers/ListingPage/ListingPage.js

@@ -32,6 +32,7 @@ import {
   LayoutWrapperMain,
   LayoutWrapperFooter,
   Footer,
+  UserCard,
 } from '../../components';
 import { BookingDatesForm, TopbarContainer } from '../../containers';
 
@@ -451,6 +452,12 @@ export class ListingPageComponent extends Component {
                   </div>
 
                   {map}
+                  <div id="host" className={css.yourHostContainer}>
+                    <h2 className={css.yourHostHeading}>
+                      <FormattedMessage id="ListingPage.yourHostHeading" />
+                    </h2>
+                    <UserCard user={currentListing.author} currentUser={currentUser} />
+                  </div>
                 </div>
 
                 <ModalInMobile

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

@@ -198,6 +198,55 @@ exports[`ListingPage matches snapshot 1`] = `
                 />
               </div>
             </div>
+            <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,
+                    },
+                    "id": UUID {
+                      "uuid": "user-2",
+                    },
+                    "type": "current-user",
+                  }
+                }
+                rootClassName={null}
+                user={
+                  Object {
+                    "attributes": Object {
+                      "banned": false,
+                      "profile": Object {
+                        "abbreviatedName": "TT",
+                        "displayName": "user-1 display name",
+                      },
+                    },
+                    "id": UUID {
+                      "uuid": "user-1",
+                    },
+                    "type": "user",
+                  }
+                }
+              />
+            </div>
           </div>
           <withViewport(ModalInMobileComponent)
             id="BookingDatesFormInModal"

src/translations/en.json

@@ -219,6 +219,7 @@
   "ListingPage.perNight": "per night",
   "ListingPage.schemaTitle": "{title} - {price} | {siteTitle}",
   "ListingPage.viewImagesButton": "View photos ({count})",
+  "ListingPage.yourHostHeading": "Your host",
   "LocationSearchForm.placeholder": "Search saunas…",
   "LoginForm.emailInvalid": "A valid email address is required",
   "LoginForm.emailLabel": "Email",