From 3a0564e8a82fb876bcc02a4f3d677f2ac5df8d06 Mon Sep 17 00:00:00 2001
From: Adam Butterworth <abutterworth@edx.org>
Date: Tue, 26 Feb 2019 13:02:09 -0500
Subject: [PATCH] Add age message

---
 src/components/ProfilePage.jsx            |  9 +++++++++
 src/components/ProfilePage/AgeMessage.jsx | 22 ++++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/components/ProfilePage/AgeMessage.jsx

diff --git a/src/components/ProfilePage.jsx b/src/components/ProfilePage.jsx
index 94d38a5..75a7ae8 100644
--- a/src/components/ProfilePage.jsx
+++ b/src/components/ProfilePage.jsx
@@ -21,6 +21,7 @@ import Education from './ProfilePage/Education';
 import SocialLinks from './ProfilePage/SocialLinks';
 import Bio from './ProfilePage/Bio';
 import MyCertificates from './ProfilePage/MyCertificates';
+import AgeMessage from './ProfilePage/AgeMessage';
 
 export class ProfilePage extends React.Component {
   constructor(props) {
@@ -210,6 +211,8 @@ export class ProfilePage extends React.Component {
             </Col>
             <Col xs={{ order: 1 }} md={{ size: 8, order: 2 }} lg={{ size: 8, offset: 1 }} className="mt-4 mt-md-n5">
 
+              {this.props.requiresParentalConsent ? <AgeMessage accountURL="#account" /> : null}
+
               <Bio
                 bio={bio}
                 visibility={getVisibility('bio')}
@@ -266,6 +269,8 @@ ProfilePage.propTypes = {
   }).isRequired,
   accountPrivacy: PropTypes.string,
   visibility: PropTypes.object, // eslint-disable-line
+  yearOfBirth: PropTypes.number,
+  requiresParentalConsent: PropTypes.bool,
 };
 
 ProfilePage.defaultProps = {
@@ -284,6 +289,8 @@ ProfilePage.defaultProps = {
   certificates: null,
   accountPrivacy: null,
   visibility: {}, // eslint-disable-line
+  yearOfBirth: null,
+  requiresParentalConsent: null,
 };
 
 const mapStateToProps = (state) => {
@@ -307,6 +314,8 @@ const mapStateToProps = (state) => {
     certificates: state.profilePage.profile.certificates,
     accountPrivacy: state.profilePage.preferences.accountPrivacy,
     visibility: state.profilePage.preferences.visibility || {},
+    yearOfBirth: state.profilePage.profile.yearOfBirth,
+    requiresParentalConsent: state.profilePage.profile.requiresParentalConsent,
   };
 };
 
diff --git a/src/components/ProfilePage/AgeMessage.jsx b/src/components/ProfilePage/AgeMessage.jsx
new file mode 100644
index 0000000..c2112f8
--- /dev/null
+++ b/src/components/ProfilePage/AgeMessage.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { UncontrolledAlert } from 'reactstrap';
+
+function AgeMessage({ accountURL }) {
+  return (
+    <UncontrolledAlert color="info">
+      <h6>Your profile cannot be shared.</h6>
+      <p>
+        To share your profile with other edX learners,
+        you must confirm that you are over the age of 13.
+      </p>
+      <a href={accountURL}>Set your date of birth</a>
+    </UncontrolledAlert>
+  );
+}
+
+AgeMessage.propTypes = {
+  accountURL: PropTypes.string.isRequired,
+};
+
+export default AgeMessage;