From dc54d9aa1d09e9343b0dae2f8b08f384ce1563d3 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Wed, 8 Nov 2017 09:45:34 +0200
Subject: [PATCH 1/3] Add listing author UserCard to the ListingPage

---
 src/containers/ListingPage/ListingPage.css    | 26 ++++++++++
 src/containers/ListingPage/ListingPage.js     |  7 +++
 .../__snapshots__/ListingPage.test.js.snap    | 49 +++++++++++++++++++
 src/translations/en.json                      |  1 +
 4 files changed, 83 insertions(+)

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 3e27ea24..3e386880 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/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);
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 6f22eea9..1a2c9557 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/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
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 9d39b1a6..1bbfc547 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/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"
diff --git a/src/translations/en.json b/src/translations/en.json
index f32fe3a2..5b7daa8f 100644
--- a/src/translations/en.json
+++ b/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",

From 798df231da2734a66dbcc4832852621116e55841 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Wed, 8 Nov 2017 10:02:00 +0200
Subject: [PATCH 2/3] Add internal link to the host section in ListingPage

---
 src/containers/ListingPage/ListingPage.css    |   4 +
 src/containers/ListingPage/ListingPage.js     |  34 +++--
 .../__snapshots__/ListingPage.test.js.snap    | 119 ++++++++++++------
 3 files changed, 112 insertions(+), 45 deletions(-)

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 3e386880..7f05abdc 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -318,6 +318,10 @@
   }
 }
 
+.authorNameLink {
+  color: var(--matterColor);
+}
+
 .descriptionContainer {
   padding: 0 24px;
   margin-bottom: 35px;
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 1a2c9557..bf73435b 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -364,6 +364,17 @@ export class ListingPageComponent extends Component {
       { title, price: formattedPrice, siteTitle }
     );
 
+    const hostLink = (
+      <NamedLink
+        className={css.authorNameLink}
+        name="ListingPage"
+        params={params}
+        to={{ hash: '#host' }}
+      >
+        {currentAuthorDisplayName}
+      </NamedLink>
+    );
+
     return (
       <Page
         title={schemaTitle}
@@ -417,8 +428,20 @@ export class ListingPageComponent extends Component {
 
               <div className={css.contentContainer}>
                 <div className={css.avatarWrapper}>
-                  <AvatarLarge user={currentAuthor} className={css.avatarDesktop} />
-                  <AvatarMedium user={currentAuthor} className={css.avatarMobile} />
+                  <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>
 
                 <div className={css.mainContent}>
@@ -434,12 +457,7 @@ export class ListingPageComponent extends Component {
                     <div className={css.heading}>
                       <h1 className={css.title}>{title}</h1>
                       <div className={css.author}>
-                        <span className={css.authorName}>
-                          <FormattedMessage
-                            id="ListingPage.hostedBy"
-                            values={{ name: currentAuthorDisplayName }}
-                          />
-                        </span>
+                        <FormattedMessage id="ListingPage.hostedBy" values={{ name: hostLink }} />
                       </div>
                     </div>
                   </div>
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 1bbfc547..ec7a400b 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -97,40 +97,72 @@ exports[`ListingPage matches snapshot 1`] = `
         </InjectIntl(ModalComponent)>
         <div>
           <div>
-            <AvatarLarge
-              user={
+            <NamedLink
+              name="ListingPage"
+              params={
                 Object {
-                  "attributes": Object {
-                    "banned": false,
-                    "profile": Object {
-                      "abbreviatedName": "TT",
-                      "displayName": "user-1 display name",
-                    },
-                  },
-                  "id": UUID {
-                    "uuid": "user-1",
-                  },
-                  "type": "user",
+                  "id": "listing1",
+                  "slug": "listing1-title",
                 }
               }
-            />
-            <AvatarMedium
-              user={
+              to={
                 Object {
-                  "attributes": Object {
-                    "banned": false,
-                    "profile": Object {
-                      "abbreviatedName": "TT",
-                      "displayName": "user-1 display name",
-                    },
-                  },
-                  "id": UUID {
-                    "uuid": "user-1",
-                  },
-                  "type": "user",
+                  "hash": "#host",
                 }
               }
-            />
+            >
+              <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>
             <div>
@@ -152,16 +184,29 @@ exports[`ListingPage matches snapshot 1`] = `
                   listing1 title
                 </h1>
                 <div>
-                  <span>
-                    <FormattedMessage
-                      id="ListingPage.hostedBy"
-                      values={
-                        Object {
-                          "name": "user-1 display name",
-                        }
+                  <FormattedMessage
+                    id="ListingPage.hostedBy"
+                    values={
+                      Object {
+                        "name": <NamedLink
+                          name="ListingPage"
+                          params={
+                              Object {
+                                  "id": "listing1",
+                                  "slug": "listing1-title",
+                                }
+                          }
+                          to={
+                              Object {
+                                  "hash": "#host",
+                                }
+                          }
+                      >
+                          user-1 display name
+                      </NamedLink>,
                       }
-                    />
-                  </span>
+                    }
+                  />
                 </div>
               </div>
             </div>

From c790f1bf1448f0f807ada13a1aef27764e795942 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Wed, 8 Nov 2017 10:15:05 +0200
Subject: [PATCH 3/3] Change collapsed bio length

---
 src/components/UserCard/UserCard.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/UserCard/UserCard.js b/src/components/UserCard/UserCard.js
index 035a54a8..84a326b1 100644
--- a/src/components/UserCard/UserCard.js
+++ b/src/components/UserCard/UserCard.js
@@ -9,7 +9,9 @@ import * as propTypes from '../../util/propTypes';
 
 import css from './UserCard.css';
 
-const BIO_COLLAPSED_LENGTH = 100;
+// Approximated collapsed size so that there are ~three lines of text
+// in the desktop layout in the host section of the ListingPage.
+const BIO_COLLAPSED_LENGTH = 170;
 
 const truncated = s => {
   return truncate(s, {