Add privacy policy

src/components/PrivacyPolicy/PrivacyPolicy.css

@@ -0,0 +1,26 @@
+@import '../../marketplace.css';
+
+.root {
+  & p {
+    @apply --marketplaceH4FontStyles;
+  }
+  & h2 {
+    /* Adjust heading margins to work with the reduced body font size */
+    margin: 23px 0 19px 0;
+
+    @media (--viewportMedium) {
+      margin: 24px 0 24px 0;
+    }
+  }
+
+  & .lastUpdated {
+    @apply --marketplaceBodyFontStyles;
+    margin-top: 0;
+    margin-bottom: 55px;
+
+    @media (--viewportMedium) {
+      margin-top: 0;
+      margin-bottom: 54px;
+    }
+  }
+}

src/components/PrivacyPolicy/PrivacyPolicy.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import css from './PrivacyPolicy.css';
+
+const PrivacyPolicy = props => {
+  const { rootClassName, className } = props;
+  const classes = classNames(rootClassName || css.root, className);
+  return (
+    <div className={classes}>
+      <p className={css.lastUpdated}>Last updated: October 30, 2017</p>
+
+      <p>
+        Thank you for using Saunatime! Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+
+      <h2>1 Lorem ipsum dolor sit amet</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+
+      <h2>2 Sed ut perspiciatis unde</h2>
+      <p>
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
+        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+        aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+        voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
+        dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
+        exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
+        consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+        molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+      </p>
+
+      <h2>3 At vero eos et accusamus</h2>
+      <p>
+        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
+        voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+        cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id
+        est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam
+        libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
+        Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut
+        et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
+        sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
+        doloribus asperiores repellat
+      </p>
+    </div>
+  );
+};
+
+PrivacyPolicy.defaultProps = {
+  rootClassName: null,
+  className: null,
+};
+
+const { string } = PropTypes;
+
+PrivacyPolicy.propTypes = {
+  rootClassName: string,
+  className: string,
+};
+
+export default PrivacyPolicy;

src/components/index.js

@@ -76,6 +76,7 @@ export { default as OrderDetailsPanel } from './OrderDetailsPanel/OrderDetailsPa
 export { default as OrderDiscussionPanel } from './OrderDiscussionPanel/OrderDiscussionPanel';
 export { default as Page } from './Page/Page';
 export { default as PaginationLinks } from './PaginationLinks/PaginationLinks';
+export { default as PrivacyPolicy } from './PrivacyPolicy/PrivacyPolicy';
 export { default as Promised } from './Promised/Promised';
 export { default as ResponsiveImage } from './ResponsiveImage/ResponsiveImage';
 export { default as SaleDetailsPanel } from './SaleDetailsPanel/SaleDetailsPanel';

src/containers/PrivacyPolicyPage/PrivacyPolicyPage.css

@@ -0,0 +1,15 @@
+@import '../../marketplace.css';
+
+.heading {
+  margin: 5px 0 18px 0;
+
+  @media (--viewportMedium) {
+    margin: 2px 0 23px 0;
+  }
+}
+
+.content {
+  @media (--viewportLarge) {
+    max-width: 563px;
+  }
+}

src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js

@@ -7,9 +7,12 @@ import {
   LayoutWrapperSideNav,
   LayoutWrapperTopbar,
   LayoutWrapperFooter,
+  PrivacyPolicy,
   Footer,
 } from '../../components';
 
+import css from './PrivacyPolicyPage.css';
+
 const PrivacyPolicyPage = () => {
   const tabs = [
     {
@@ -35,7 +38,12 @@ const PrivacyPolicyPage = () => {
         </LayoutWrapperTopbar>
         <LayoutWrapperSideNav tabs={tabs} />
         <LayoutWrapperMain>
-          <p>TODO: Privacy policy</p>
+          <div className={css.content}>
+            <h1 className={css.heading}>
+              <FormattedMessage id="PrivacyPolicyPage.heading" />
+            </h1>
+            <PrivacyPolicy />
+          </div>
         </LayoutWrapperMain>
         <LayoutWrapperFooter>
           <Footer />

src/containers/TermsOfServicePage/TermsOfServicePage.css

@@ -7,3 +7,9 @@
     margin: 2px 0 23px 0;
   }
 }
+
+.content {
+  @media (--viewportLarge) {
+    max-width: 563px;
+  }
+}

src/containers/TermsOfServicePage/TermsOfServicePage.js

@@ -47,10 +47,12 @@ const TermsOfServicePageComponent = props => {
         </LayoutWrapperTopbar>
         <LayoutWrapperSideNav tabs={tabs} />
         <LayoutWrapperMain>
-          <h1 className={css.heading}>
-            <FormattedMessage id="TermsOfServicePage.heading" />
-          </h1>
-          <TermsOfService />
+          <div className={css.content}>
+            <h1 className={css.heading}>
+              <FormattedMessage id="TermsOfServicePage.heading" />
+            </h1>
+            <TermsOfService />
+          </div>
         </LayoutWrapperMain>
         <LayoutWrapperFooter>
           <Footer />

src/translations/en.json

@@ -386,6 +386,7 @@
   "PayoutDetailsForm.streetAddressRequired": "This field is required",
   "PayoutDetailsForm.submitButtonText": "Save details & publish listing",
   "PayoutDetailsForm.title": "One more thing: payout preferences",
+  "PrivacyPolicyPage.heading": "Saunatime Privacy Policy",
   "ProfileSettingsForm.addYourProfilePicture": "+ Add your profile picture…",
   "ProfileSettingsForm.addYourProfilePictureMobile": "+ Add",
   "ProfileSettingsForm.changeAvatar": "Change",