Merge pull request #488 from edx/remove-age-banner

feat: add feature flag to toggle age banner
2021-10-25 17:13:18 +05:00
parent 299cbbea6c ac912e5ffc
commit 8fbedf008c
10 changed files with 143 additions and 17 deletions
--- a/.env
+++ b/.env
@@ -24,3 +24,4 @@ LOGO_WHITE_URL=''
 FAVICON_URL=''
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL=''
+COLLECT_YEAR_OF_BIRTH=true
--- a/.env.development
+++ b/.env.development
@@ -25,3 +25,4 @@ LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
+COLLECT_YEAR_OF_BIRTH=true
--- a/.env.test
+++ b/.env.test
@@ -19,3 +19,4 @@ LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
+COLLECT_YEAR_OF_BIRTH=true
--- a/package-lock.json
+++ b/package-lock.json
@@ -1978,6 +1978,7 @@
        "axios": "0.21.4",
        "axios-cache-adapter": "2.7.3",
        "form-urlencoded": "4.1.4",
+        "glob": "7.1.7",
        "history": "4.10.1",
        "i18n-iso-countries": "4.3.1",
        "jwt-decode": "3.1.2",
@@ -1992,6 +1993,19 @@
        "universal-cookie": "4.0.4"
      },
      "dependencies": {
+        "glob": {
+          "version": "7.1.7",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+          "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
        "universal-cookie": {
          "version": "4.0.4",
          "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
@@ -4931,8 +4945,7 @@
    "balanced-match": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
    },
    "base": {
      "version": "0.11.2",
@@ -5486,7 +5499,6 @@
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
      "requires": {
        "balanced-match": "^1.0.0",
        "concat-map": "0.0.1"
@@ -6380,8 +6392,7 @@
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
    },
    "config-chain": {
      "version": "1.1.13",
@@ -9396,8 +9407,7 @@
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
    },
    "fsevents": {
      "version": "1.2.13",
@@ -10872,7 +10882,6 @@
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
      "requires": {
        "once": "^1.3.0",
        "wrappy": "1"
@@ -10881,8 +10890,7 @@
    "inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "ini": {
      "version": "1.3.8",
@@ -14178,7 +14186,6 @@
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
      "requires": {
        "brace-expansion": "^1.1.7"
      }
@@ -15090,7 +15097,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
      "requires": {
        "wrappy": "1"
      }
@@ -15399,8 +15405,7 @@
    "path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
    },
    "path-is-inside": {
      "version": "1.0.2",
@@ -21043,8 +21048,7 @@
    "wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
    },
    "write": {
      "version": "1.0.3",
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -60,6 +60,7 @@ initialize({
      mergeConfig({
        ENABLE_LEARNER_RECORD_MFE: (process.env.ENABLE_LEARNER_RECORD_MFE || false),
        LEARNER_RECORD_MFE_BASE_URL: process.env.LEARNER_RECORD_MFE_BASE_URL,
+        COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
      }, 'App loadConfig override handler');
    },
  },
--- a/src/profile/ProfilePage.jsx
+++ b/src/profile/ProfilePage.jsx
@@ -30,6 +30,7 @@ import Bio from './forms/Bio';
 import Certificates from './forms/Certificates';
 import AgeMessage from './AgeMessage';
 import DateJoined from './DateJoined';
+import UsernameDescription from './UsernameDescription';
 import PageLoading from './PageLoading';
 import Banner from './Banner';

@@ -80,6 +81,14 @@ class ProfilePage extends React.Component {
    return recordsUrl;
  }

+  isYOBDisabled() {
+    const { yearOfBirth } = this.props;
+    const currentYear = new Date().getFullYear();
+    const isAgeOrNotCompliant = !yearOfBirth || ((currentYear - yearOfBirth) < 13);
+
+    return isAgeOrNotCompliant && getConfig().COLLECT_YEAR_OF_BIRTH !== 'true';
+  }
+
  isAuthenticatedUserProfile() {
    return this.props.match.params.username === this.context.authenticatedUser.username;
  }
@@ -130,6 +139,7 @@ class ProfilePage extends React.Component {
        <span data-hj-suppress>
          <h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
          <DateJoined date={dateJoined} />
+          {this.isYOBDisabled() && <UsernameDescription />}
          <hr className="d-none d-md-block" />
        </span>
      </>
@@ -261,7 +271,7 @@ class ProfilePage extends React.Component {
            />
          </div>
          <div className="pt-md-3 col-md-8 col-lg-7 offset-lg-1">
-            {this.renderAgeMessage()}
+            {!this.isYOBDisabled() && this.renderAgeMessage()}
            <Bio
              bio={bio}
              visibilityBio={visibilityBio}
@@ -298,6 +308,7 @@ ProfilePage.propTypes = {

  // Bio form data
  bio: PropTypes.string,
+  yearOfBirth: PropTypes.number,
  visibilityBio: PropTypes.string.isRequired,

  // Certificates form data
@@ -373,6 +384,7 @@ ProfilePage.defaultProps = {
  photoUploadError: {},
  profileImage: {},
  name: null,
+  yearOfBirth: null,
  levelOfEducation: null,
  country: null,
  socialLinks: [],
--- a/src/profile/UsernameDescription.jsx
+++ b/src/profile/UsernameDescription.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { VisibilityOff } from '@edx/paragon/icons';
+import { Icon } from '@edx/paragon';
+
+function UsernameDescription() {
+  return (
+    <div className="d-flex align-items-center mt-3 mb-2rem">
+      <Icon src={VisibilityOff} className="icon-visibility-off" />
+      <div className="username-description">
+        <FormattedMessage
+          id="profile.username.description"
+          defaultMessage="Your profile information is only visible to you. Only your username is visible to others on edX."
+          description="A description of the username field"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default UsernameDescription;
--- a/src/profile/snapshots/ProfilePage.test.jsx.snap
+++ b/src/profile/snapshots/ProfilePage.test.jsx.snap
@@ -104,6 +104,37 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                </span>
              </span>
            </p>
+            <div
+              className="d-flex align-items-center mt-3 mb-2rem"
+            >
+              <span
+                className="pgn__icon icon-visibility-off"
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-label=""
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <div
+                className="username-description"
+              >
+                <span>
+                  Your profile information is only visible to you. Only your username is visible to others on edX.
+                </span>
+              </div>
+            </div>
            <hr
              className="d-none d-md-block"
            />
@@ -141,6 +172,37 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                </span>
              </span>
            </p>
+            <div
+              className="d-flex align-items-center mt-3 mb-2rem"
+            >
+              <span
+                className="pgn__icon icon-visibility-off"
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-label=""
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <div
+                className="username-description"
+              >
+                <span>
+                  Your profile information is only visible to you. Only your username is visible to others on edX.
+                </span>
+              </div>
+            </div>
            <hr
              className="d-none d-md-block"
            />
--- a/src/profile/data/selectors.js
+++ b/src/profile/data/selectors.js
@@ -335,6 +335,7 @@ export const profilePageSelector = createSelector(
    profileImage,
    requiresParentalConsent: account.requiresParentalConsent,
    dateJoined: account.dateJoined,
+    yearOfBirth: account.yearOfBirth,

    // Bio form data
    bio: formValues.bio,
--- a/src/profile/index.scss
+++ b/src/profile/index.scss
@@ -23,6 +23,28 @@
  background-size: auto 85%;
 }

+.username-description {
+  width: auto;
+  position: absolute;
+  left: 1.5rem;
+  top: 5.25rem;
+  color: $gray-500;
+  line-height: 0.9rem;
+  font-size: 0.8rem;
+  font-style: normal;
+  font-weight: 400;
+  margin-left: 0.9rem;
+}
+
+.mb-2rem {
+  margin-bottom: 2rem;
+}
+
+.icon-visibility-off {
+  height: 1rem;
+  color: $gray-500;
+}
+
 .profile-page {
  .edit-section-header {
    @extend .h6;