From 6e46e045b4f55f28b98cc1d64d66ccdf610350d4 Mon Sep 17 00:00:00 2001
From: Kinga Koterska <kinga@sharetribe.com>
Date: Thu, 18 Jul 2019 15:02:47 +0300
Subject: [PATCH] buildingInfo and blogPage

---
 .../EditListingDescriptionPanel.js            |  9 +-
 src/containers/BlogPage/BlogPage.css          | 57 +++++++++++
 src/containers/BlogPage/BlogPage.js           | 98 +++++++++++++++++++
 src/containers/ListingPage/ListingPage.js     |  2 +
 .../ListingPage/SectionBuildingInfoMaybe.css  | 37 +++++++
 .../ListingPage/SectionBuildingInfoMaybe.js   | 31 ++++++
 src/containers/index.js                       |  1 +
 .../EditListingDescriptionForm.css            |  6 ++
 .../EditListingDescriptionForm.js             | 16 +++
 src/marketplace.css                           |  2 +-
 src/routeConfiguration.js                     |  6 ++
 src/translations/en.json                      |  5 +-
 12 files changed, 265 insertions(+), 5 deletions(-)
 create mode 100644 src/containers/BlogPage/BlogPage.css
 create mode 100644 src/containers/BlogPage/BlogPage.js
 create mode 100644 src/containers/ListingPage/SectionBuildingInfoMaybe.css
 create mode 100644 src/containers/ListingPage/SectionBuildingInfoMaybe.js

diff --git a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js
index 3b1dc8cf..d2f77ab1 100644
--- a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js
+++ b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js
@@ -42,14 +42,17 @@ const EditListingDescriptionPanel = props => {
       <h1 className={css.title}>{panelTitle}</h1>
       <EditListingDescriptionForm
         className={css.form}
-        initialValues={{ title, description, category: publicData.category }}
+        initialValues={{ title, description, category: publicData.category, buildingInfo: publicData.buildingInfo }}
         saveActionMsg={submitButtonText}
         onSubmit={values => {
-          const { title, description, category } = values;
+          const { title, description, category, buildingInfo } = values;
           const updateValues = {
             title: title.trim(),
             description,
-            publicData: { category },
+            publicData: { 
+              category,
+              buildingInfo,
+            },
           };
 
           onSubmit(updateValues);
diff --git a/src/containers/BlogPage/BlogPage.css b/src/containers/BlogPage/BlogPage.css
new file mode 100644
index 00000000..51f08605
--- /dev/null
+++ b/src/containers/BlogPage/BlogPage.css
@@ -0,0 +1,57 @@
+@import '../../marketplace.css';
+
+.pageTitle {
+  text-align: center;
+}
+
+.staticPageWrapper {
+  width: calc(100% - 48px);
+  max-width: 1056px;
+  margin: 24px auto;
+
+  @media (--viewportMedium) {
+    width: calc(100% - 72px);
+    margin: 72px auto;
+  }
+}
+
+.coverImage {
+  width: 100%;
+  height: 528px;
+  border-radius: 4px;
+  object-fit: cover;
+  margin: 32px 0 40px;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  @media (--viewportMedium) {
+    flex-wrap: nowrap;
+  }
+}
+
+.contentSide {
+  font-style: italic;
+
+  @media (--viewportMedium) {
+    width: 193px;
+    margin-right: 103px;
+    margin-top: 8px;
+  }
+}
+
+.contentMain {
+  width: 90%;
+
+  @media (--viewportMedium) {
+    max-width: 650px;
+  }
+}
+
+.subtitle {
+  @apply --marketplaceH3FontStyles;
+  margin-top: 48px;
+  margin-bottom: 24px;
+}
diff --git a/src/containers/BlogPage/BlogPage.js b/src/containers/BlogPage/BlogPage.js
new file mode 100644
index 00000000..763044a4
--- /dev/null
+++ b/src/containers/BlogPage/BlogPage.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import config from '../../config';
+import { twitterPageURL } from '../../util/urlHelpers';
+import { StaticPage, TopbarContainer } from '../../containers';
+import {
+  LayoutSingleColumn,
+  LayoutWrapperTopbar,
+  LayoutWrapperMain,
+  LayoutWrapperFooter,
+  Footer,
+  ExternalLink,
+} from '../../components';
+
+import css from './BlogPage.css';
+//import image from './about-us-1056.jpg';
+
+const BlogPage = () => {
+  const { siteTwitterHandle, siteFacebookPage } = config;
+  const siteTwitterPage = twitterPageURL(siteTwitterHandle);
+
+  // prettier-ignore
+  return (
+    <StaticPage
+      title="About Us"
+      schema={{
+        '@context': 'http://schema.org',
+        '@type': 'BlogPage',
+        description: 'About Saunatime',
+        name: 'About page',
+      }}
+    >
+      <LayoutSingleColumn>
+        <LayoutWrapperTopbar>
+          <TopbarContainer />
+        </LayoutWrapperTopbar>
+
+        <LayoutWrapperMain className={css.staticPageWrapper}>
+          <h1 className={css.pageTitle}>Experience the unique Finnish home sauna.</h1>
+          
+
+          <div className={css.contentWrapper}>
+            <div className={css.contentSide}>
+              <p>Did you know that Finland has 3.2 million saunas - almost one sauna per person!</p>
+            </div>
+
+            <div className={css.contentMain}>
+              <h2>
+                Most of the Finnish saunas are located at the homes of individuals - indeed, most
+                people in Finland live in an apartment with sauna in it. In addition, lots of people
+                have lakeside summer cottages, which also typically come with a separate sauna
+                building near the waterfront.
+              </h2>
+
+              <p>
+                To truly experience a Finnish sauna, you need to look beyond the public saunas, and
+                instead visit a real home or cottage sauna. Saunatime makes this possible for
+                everyone. All our saunas are owned by individuals willing to let tourists and other
+                curious visitors to enter their sacred spaces.
+              </p>
+
+              <h3 className={css.subtitle}>Are you a sauna owner?</h3>
+
+              <p>
+                Saunatime offers you a good way to earn some extra cash! If you're not using your
+                sauna every evening, why not rent it to other people while it's free. And even if
+                you are using your sauna every evening (we understand, it's so good), why not invite
+                other people to join you when the sauna is already warm! A shared sauna experience
+                is often a more fulfilling one.
+              </p>
+
+              <h3 id="contact" className={css.subtitle}>
+                Create your own marketplace like Saunatime
+              </h3>
+              <p>
+                Saunatime is brought to you by the good folks at{' '}
+                <ExternalLink href="http://sharetribe.com">Sharetribe</ExternalLink>. Would you like
+                to create your own marketplace platform a bit like Saunatime? Or perhaps a mobile
+                app? With Sharetribe it's really easy. If you have a marketplace idea in mind, do
+                get in touch!
+              </p>
+              <p>
+                You can also checkout our{' '}
+                <ExternalLink href={siteFacebookPage}>Facebook</ExternalLink> and{' '}
+                <ExternalLink href={siteTwitterPage}>Twitter</ExternalLink>.
+              </p>
+            </div>
+          </div>
+        </LayoutWrapperMain>
+
+        <LayoutWrapperFooter>
+          <Footer />
+        </LayoutWrapperFooter>
+      </LayoutSingleColumn>
+    </StaticPage>
+  );
+};
+
+export default BlogPage;
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index b956fe28..24494073 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -51,6 +51,7 @@ import SectionReviews from './SectionReviews';
 import SectionHostMaybe from './SectionHostMaybe';
 import SectionRulesMaybe from './SectionRulesMaybe';
 import SectionMapMaybe from './SectionMapMaybe';
+import SectionBuildingInfoMaybe from './SectionBuildingInfoMaybe';
 import css from './ListingPage.css';
 
 const MIN_LENGTH_FOR_LONG_WORDS_IN_TITLE = 16;
@@ -427,6 +428,7 @@ export class ListingPageComponent extends Component {
                     onContactUser={this.onContactUser}
                   />
                   <SectionDescriptionMaybe description={description} />
+                  <SectionBuildingInfoMaybe publicData={publicData} />
                   <SectionFeaturesMaybe options={amenitiesConfig} publicData={publicData} />
                   <SectionRulesMaybe publicData={publicData} />
                   <SectionMapMaybe
diff --git a/src/containers/ListingPage/SectionBuildingInfoMaybe.css b/src/containers/ListingPage/SectionBuildingInfoMaybe.css
new file mode 100644
index 00000000..09894e18
--- /dev/null
+++ b/src/containers/ListingPage/SectionBuildingInfoMaybe.css
@@ -0,0 +1,37 @@
+@import '../../marketplace.css';
+
+.root {
+  padding: 0 24px;
+  margin-bottom: 35px;
+
+  @media (--viewportMedium) {
+    padding: 0;
+    margin-bottom: 52px;
+  }
+}
+
+.title {
+  /* Font */
+  @apply --marketplaceH3FontStyles;
+  color: var(--matterColorAnti);
+
+  margin-top: 0;
+  margin-bottom: 13px;
+  @media (--viewportMedium) {
+    margin-top: 0;
+    margin-bottom: 20px;
+  }
+}
+
+.buildingInfo {
+  margin-top: 0;
+  margin-bottom: 0;
+
+  /* Preserve newlines, but collapse other whitespace */
+  white-space: pre-line;
+
+  @media (--viewportMedium) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
diff --git a/src/containers/ListingPage/SectionBuildingInfoMaybe.js b/src/containers/ListingPage/SectionBuildingInfoMaybe.js
new file mode 100644
index 00000000..61d0bb12
--- /dev/null
+++ b/src/containers/ListingPage/SectionBuildingInfoMaybe.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+
+import css from './SectionBuildingInfoMaybe.css';
+
+const SectionBuildingInfoMaybe = props => {
+  const { className, rootClassName, publicData } = props;
+  const classes = classNames(rootClassName || css.root, className);
+  return publicData && publicData.buildingInfo ? (
+    <div className={classes}>
+      <h2 className={css.title}>
+        <FormattedMessage id="ListingPage.buildingInfoTitle" />
+      </h2>
+      <p className={css.buildingInfo}>{publicData.buildingInfo}</p>
+    </div>
+  ) : null;
+};
+
+SectionBuildingInfoMaybe.defaultProps = { className: null, rootClassName: null, buildingInfo: null };
+
+SectionBuildingInfoMaybe.propTypes = {
+  className: string,
+  rootClassName: string,
+  publicData: shape({
+    buildingInfo: string,
+  }),
+};
+
+export default SectionBuildingInfoMaybe;
diff --git a/src/containers/index.js b/src/containers/index.js
index a8e1ff55..a59d026c 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -1,5 +1,6 @@
 export { default as AboutPage } from './AboutPage/AboutPage';
 export { default as AuthenticationPage } from './AuthenticationPage/AuthenticationPage';
+export { default as BlogPage } from './BlogPage/BlogPage';
 export { default as CheckoutPage } from './CheckoutPage/CheckoutPage';
 export { default as ContactDetailsPage } from './ContactDetailsPage/ContactDetailsPage';
 export { default as EditListingPage } from './EditListingPage/EditListingPage';
diff --git a/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.css b/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.css
index 9d826e3d..9628edd5 100644
--- a/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.css
+++ b/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.css
@@ -49,6 +49,12 @@
   flex-shrink: 0;
 }
 
+.buildingInfo {
+  @apply --EditListingDescriptionForm_formMargins;
+  flex-shrink: 0;
+  color: var(--marketplaceColor);
+}
+
 .category {
   @apply --EditListingDescriptionForm_formMargins;
 }
diff --git a/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.js
index 6d94f725..8ef4bb9c 100644
--- a/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.js
+++ b/src/forms/EditListingDescriptionForm/EditListingDescriptionForm.js
@@ -51,6 +51,13 @@ const EditListingDescriptionFormComponent = props => (
       const descriptionPlaceholderMessage = intl.formatMessage({
         id: 'EditListingDescriptionForm.descriptionPlaceholder',
       });
+      const buildingInfoTitle = intl.formatMessage({
+        id: 'EditListingDescriptionForm.buildingInfoTitle',
+      });
+      const buildingInfoPlaceholderMessage = intl.formatMessage({
+        id: 'EditListingDescriptionForm.buildingInfoPlaceholderMessage',
+      });
+    
       const maxLength60Message = maxLength(maxLengthMessage, TITLE_MAX_LENGTH);
       const descriptionRequiredMessage = intl.formatMessage({
         id: 'EditListingDescriptionForm.descriptionRequired',
@@ -108,6 +115,15 @@ const EditListingDescriptionFormComponent = props => (
             validate={composeValidators(required(descriptionRequiredMessage))}
           />
 
+          <FieldTextInput
+            id="buildingInfo"
+            name="buildingInfo"
+            className={css.buildingInfo}
+            type="textarea"
+            label={buildingInfoTitle}
+            placeholder={buildingInfoPlaceholderMessage}
+          />
+
           <CustomCategorySelectFieldMaybe
             id="category"
             name="category"
diff --git a/src/marketplace.css b/src/marketplace.css
index 853873da..01456f64 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -42,7 +42,7 @@
 
   /* ================ Colors ================ */
 
-  --marketplaceColor: #c0392b;
+  --marketplaceColor: #E49B2F;
   --marketplaceColorLight: #ff4c38;
   --marketplaceColorDark: #8c291e;
 
diff --git a/src/routeConfiguration.js b/src/routeConfiguration.js
index 7176f08d..62721131 100644
--- a/src/routeConfiguration.js
+++ b/src/routeConfiguration.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   AboutPage,
   AuthenticationPage,
+  BlogPage,
   CheckoutPage,
   ContactDetailsPage,
   EditListingPage,
@@ -55,6 +56,11 @@ const routeConfiguration = () => {
       name: 'AboutPage',
       component: AboutPage,
     },
+    {
+      path: '/blog',
+      name: 'BlogPage',
+      component: BlogPage,
+    },
     {
       path: '/s',
       name: 'SearchPage',
diff --git a/src/translations/en.json b/src/translations/en.json
index 26c0d8ec..eeb74de8 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -148,6 +148,8 @@
   "EditListingDescriptionForm.createListingDraftError": "Failed to create a draft listing. Please try again.",
   "EditListingDescriptionForm.description": "Describe your sauna",
   "EditListingDescriptionForm.descriptionPlaceholder": "How many people can fit at once? Does the sauna come with towels?",
+  "EditListingDescriptionForm.buildingInfoTitle": "When was your sauna built?",
+  "EditListingDescriptionForm.buildingInfoPlaceholderMessage": "Type in the year",
   "EditListingDescriptionForm.descriptionRequired": "A description is required.",
   "EditListingDescriptionForm.maxLength": "Must be {maxLength} characters or less",
   "EditListingDescriptionForm.showListingFailed": "Fetching listing data failed",
@@ -320,6 +322,7 @@
   "ListingCard.unsupportedPriceTitle": "Unsupported currency ({currency})",
   "ListingPage.bookingSubTitle": "Start by choosing your dates.",
   "ListingPage.bookingTitle": "Book {title}",
+  "ListingPage.buildingInfoTitle": "Building info",
   "ListingPage.closedListing": "This listing has been closed and can't be booked.",
   "ListingPage.contactUser": "Contact",
   "ListingPage.descriptionTitle": "About this sauna",
@@ -705,7 +708,7 @@
   "SearchResultsPanel.nextPage": "Next page",
   "SearchResultsPanel.previousPage": "Previous page",
   "SectionHero.browseButton": "Browse saunas",
-  "SectionHero.subTitle": "The largest online community to rent saunas in Finland.",
+  "SectionHero.subTitle": "haha this is fun",
   "SectionHero.title": "Book saunas everywhere.",
   "SectionHowItWorks.createListingLink": "PS. You can also become a Saunatime host in just a few clicks!",
   "SectionHowItWorks.part1Text": "Start by searching for a location. Once you find a sauna you like, simply check the availability, book it, and make a secure payment right away.",