Add or edit bio in profile settings

src/containers/ProfileSettingsForm/ProfileSettingsForm.css

@@ -276,6 +276,10 @@
   width: calc(66% - 9px);
 }
 
+.bioInfo {
+  color: var(--matterColorAnti);
+}
+
 .submitButton {
   margin-top: 24px;
 }

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}

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}

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",

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,
     }),
   }),
 });