From a6196821c812f1f043fe10ec815631c08055e75b Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Thu, 2 Nov 2017 15:33:50 +0200
Subject: [PATCH] Add or edit bio in profile settings

---
 .../ProfileSettingsForm.css                   |  4 +++
 .../ProfileSettingsForm.js                    | 25 ++++++++++++++++++-
 .../ProfileSettingsPage.js                    | 16 +++++++-----
 src/translations/en.json                      |  4 +++
 src/util/propTypes.js                         |  2 ++
 5 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
index 24e1eaba..30d89982 100644
--- a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
+++ b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
@@ -276,6 +276,10 @@
   width: calc(66% - 9px);
 }
 
+.bioInfo {
+  color: var(--matterColorAnti);
+}
+
 .submitButton {
   margin-top: 24px;
 }
diff --git a/src/containers/ProfileSettingsForm/ProfileSettingsForm.js b/src/containers/ProfileSettingsForm/ProfileSettingsForm.js
index 1d15e5ea..0e9596d7 100644
--- a/src/containers/ProfileSettingsForm/ProfileSettingsForm.js
+++ b/src/containers/ProfileSettingsForm/ProfileSettingsForm.js
@@ -146,6 +146,14 @@ class ProfileSettingsFormComponent extends Component {
     });
     const lastNameRequired = validators.required(lastNameRequiredMessage);
 
+    // Bio
+    const bioLabel = intl.formatMessage({
+      id: 'ProfileSettingsForm.bioLabel',
+    });
+    const bioPlaceholder = intl.formatMessage({
+      id: 'ProfileSettingsForm.bioPlaceholder',
+    });
+
     const uploadingOverlay =
       uploadInProgress || this.state.uploadDelay ? (
         <div className={css.uploadingImageOverlay}>
@@ -241,7 +249,7 @@ class ProfileSettingsFormComponent extends Component {
             <FormattedMessage id="ProfileSettingsForm.fileInfo" />
           </div>
         </div>
-        <div className={classNames(css.sectionContainer, css.lastSection)}>
+        <div className={css.sectionContainer}>
           <h3 className={css.sectionTitle}>
             <FormattedMessage id="ProfileSettingsForm.yourName" />
           </h3>
@@ -266,6 +274,21 @@ class ProfileSettingsFormComponent extends Component {
             />
           </div>
         </div>
+        <div className={classNames(css.sectionContainer, css.lastSection)}>
+          <h3 className={css.sectionTitle}>
+            <FormattedMessage id="ProfileSettingsForm.bioHeading" />
+          </h3>
+          <TextInputField
+            type="textarea"
+            name="bio"
+            id={`${form}.bio`}
+            label={bioLabel}
+            placeholder={bioPlaceholder}
+          />
+          <p className={css.bioInfo}>
+            <FormattedMessage id="ProfileSettingsForm.bioInfo" />
+          </p>
+        </div>
         {submitError}
         <Button
           className={css.submitButton}
diff --git a/src/containers/ProfileSettingsPage/ProfileSettingsPage.js b/src/containers/ProfileSettingsPage/ProfileSettingsPage.js
index 735475b5..db0069a0 100644
--- a/src/containers/ProfileSettingsPage/ProfileSettingsPage.js
+++ b/src/containers/ProfileSettingsPage/ProfileSettingsPage.js
@@ -49,15 +49,19 @@ export class ProfileSettingsPageComponent extends Component {
     } = this.props;
 
     const handleSubmit = values => {
-      const { firstName, lastName } = values;
-      const name = { firstName, lastName };
+      const { firstName, lastName, bio: rawBio } = values;
+
+      // Ensure that the optional bio is a string
+      const bio = rawBio || '';
+
+      const profile = { firstName, lastName, bio };
       const uploadedImage = this.props.image;
 
       // Update profileImage only if file system has been accessed
       const updatedValues =
         uploadedImage && uploadedImage.imageId && uploadedImage.file
-          ? { ...name, profileImageId: uploadedImage.imageId }
-          : name;
+          ? { ...profile, profileImageId: uploadedImage.imageId }
+          : profile;
 
       onUpdateProfile(updatedValues).then(() => {
         this.setState({ profileUpdated: true });
@@ -70,7 +74,7 @@ export class ProfileSettingsPageComponent extends Component {
     };
 
     const user = ensureCurrentUser(currentUser);
-    const { firstName, lastName } = user.attributes.profile;
+    const { firstName, lastName, bio } = user.attributes.profile;
     const profileImageId = user.profileImage ? user.profileImage.id : null;
     const profileImage = image || { imageId: profileImageId };
 
@@ -78,7 +82,7 @@ export class ProfileSettingsPageComponent extends Component {
       <ProfileSettingsForm
         className={css.form}
         currentUser={currentUser}
-        initialValues={{ firstName, lastName, profileImage }}
+        initialValues={{ firstName, lastName, bio, profileImage }}
         profileImage={profileImage}
         onImageUpload={e => onImageUploadHandler(e, onImageUpload)}
         uploadInProgress={uploadInProgress}
diff --git a/src/translations/en.json b/src/translations/en.json
index d2c09617..29b2cb36 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -397,6 +397,10 @@
   "ProfilePage.schemaTitle": "{name} | {siteTitle}",
   "ProfileSettingsForm.addYourProfilePicture": "+ Add your profile picture…",
   "ProfileSettingsForm.addYourProfilePictureMobile": "+ Add",
+  "ProfileSettingsForm.bioHeading": "Your profile bio",
+  "ProfileSettingsForm.bioInfo": "Saunatime is built on relationships. Help other people get to know you.",
+  "ProfileSettingsForm.bioLabel": "Bio",
+  "ProfileSettingsForm.bioPlaceholder": "Tell us a little bit about yourself…",
   "ProfileSettingsForm.changeAvatar": "Change",
   "ProfileSettingsForm.fileInfo": ".JPG, .GIF or .PNG max. 10 MB",
   "ProfileSettingsForm.firstNameLabel": "First name",
diff --git a/src/util/propTypes.js b/src/util/propTypes.js
index 8830a21c..b7a9810e 100644
--- a/src/util/propTypes.js
+++ b/src/util/propTypes.js
@@ -75,6 +75,7 @@ export const currentUser = shape({
       lastName: string.isRequired,
       displayName: string.isRequired,
       abbreviatedName: string.isRequired,
+      bio: string,
     }).isRequired,
     stripeConnected: bool.isRequired,
   }),
@@ -89,6 +90,7 @@ export const user = shape({
     profile: shape({
       displayName: string.isRequired,
       abbreviatedName: string.isRequired,
+      bio: string,
     }),
   }),
 });