fix: error when trying to save 'other education' (#666)

When user selects "Other Education" and clicks save - error occurs.

It's caused by the wrong API call payload value `'o'`
Fix: use the `'other'` payload value instead (the valid one).

.env

@@ -25,3 +25,5 @@ FAVICON_URL=''
 ENABLE_LEARNER_RECORD_MFE=''
 LEARNER_RECORD_MFE_BASE_URL=''
 COLLECT_YEAR_OF_BIRTH=true
+APP_ID=''
+MFE_CONFIG_API_URL=''

.env.development

@@ -26,3 +26,5 @@ 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
+APP_ID=''
+MFE_CONFIG_API_URL=''

.env.test

@@ -20,3 +20,5 @@ 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
+APP_ID=''
+MFE_CONFIG_API_URL=''

.github/workflows/ci.yml

@@ -11,7 +11,6 @@ jobs:
       matrix:
         npm-test:
         - i18n_extract
-        - is-es5
         - lint
         - test
         node: [16]

Makefile

@@ -11,7 +11,7 @@ tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transi
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
 
-NPM_TESTS=build i18n_extract lint test is-es5
+NPM_TESTS=build i18n_extract lint test
 
 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite

package.json

@@ -11,7 +11,6 @@
   "scripts": {
     "build": "fedx-scripts webpack",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "is-es5": "es-check es5 ./dist/*.js",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
@@ -25,15 +24,14 @@
     "access": "public"
   },
   "browserslist": [
-    "last 2 versions",
-    "ie 11"
+    "extends @edx/browserslist-config"
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.3.0",
-    "@edx/frontend-component-header": "2.6.1",
-    "@edx/frontend-platform": "1.15.6",
-    "@edx/paragon": "19.25.3",
+    "@edx/frontend-component-footer": "12.0.0",
+    "@edx/frontend-component-header": "4.0.0",
+    "@edx/frontend-platform": "4.2.0",
+    "@edx/paragon": "^20.20.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -51,24 +49,25 @@
     "react-redux": "7.2.9",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
+    "react-helmet": "6.1.0",
     "redux": "4.2.0",
     "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
     "redux-saga": "1.2.1",
-    "redux-thunk": "2.4.1",
-    "regenerator-runtime": "0.13.9",
-    "reselect": "4.1.6",
+    "redux-thunk": "2.4.2",
+    "regenerator-runtime": "0.13.11",
+    "reselect": "4.1.7",
     "universal-cookie": "3.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.1.2",
-    "@commitlint/config-angular": "17.1.0",
+    "@commitlint/cli": "17.2.0",
+    "@commitlint/config-angular": "17.2.0",
+    "@edx/browserslist-config": "^1.1.1",
     "@edx/reactifex": "2.1.1",
     "@edx/frontend-build": "12.0.6",
     "codecov": "3.8.3",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "es-check": "5.2.4",
+    "enzyme-adapter-react-16": "1.15.7",
     "glob": "7.2.3",
     "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",

src/head/Head.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+function Head({ intl }) {
+  return (
+    <Helmet>
+      <title>
+        {intl.formatMessage(messages['profile.page.title'], { siteName: getConfig().SITE_NAME })}
+      </title>
+      <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+    </Helmet>
+  );
+}
+
+Head.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Head);

src/head/Head.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Helmet } from 'react-helmet';
+import { mount } from 'enzyme';
+import { getConfig } from '@edx/frontend-platform';
+import Head from './Head';
+
+describe('Head', () => {
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', () => {
+    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Profile | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});

src/head/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'profile.page.title': {
+    id: 'profile.page.title',
+    defaultMessage: 'Profile | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;

src/i18n/messages/ar.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "الملف الشخصي | {siteName}",
   "profile.age.details": "لمشاركة ملفك الشخصي مع بقية متعلمي {siteName}، يجب أن تؤكد أنك عمرك يفوق 13 عامًا.",
   "profile.age.set.date": "ضيط تاريخ ميلادك",
   "profile.datejoined.member.since": "عضو منذ {year}",

src/i18n/messages/de.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profile | {siteName}",
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",

src/i18n/messages/es_419.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profile | {siteName}",
   "profile.age.details": "Para compartir el perfil con otros {siteName} estudiantes, debe confirmar que es mayor de 13 años.",
   "profile.age.set.date": "Establece tu fecha de nacimiento",
   "profile.datejoined.member.since": "Miembro desde {year}",

src/i18n/messages/fr.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profile | {siteName}",
   "profile.age.details": "Pour partager votre profil avec d'autres étudiants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
   "profile.age.set.date": "Définissez votre date de naissance",
   "profile.datejoined.member.since": "Membre depuis {year}",

src/i18n/messages/fr_CA.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profil | {siteName}",
   "profile.age.details": "Pour partager votre profil avec d'autres apprenants {siteName}, vous devez confirmer que vous avez plus de 13 ans.",
   "profile.age.set.date": "Entrez votre date de naissance",
   "profile.datejoined.member.since": "Membre depuis {year}",

src/i18n/messages/hi.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profile | {siteName}",
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",

src/i18n/messages/it.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profile | {siteName}",
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",

src/i18n/messages/pt.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profile | {siteName}",
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",

src/i18n/messages/ru.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profile | {siteName}",
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",

src/i18n/messages/uk.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profile | {siteName}",
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",

src/i18n/messages/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "profile.page.title": "Profile | {siteName}",
   "profile.age.details": "To share your profile with other {siteName} learners, you must confirm that you are over the age of 13.",
   "profile.age.set.date": "Set your date of birth",
   "profile.datejoined.member.since": "Member since {year}",

src/index.jsx

@@ -25,10 +25,12 @@ import { ProfilePage, NotFoundPage } from './profile';
 import configureStore from './data/configureStore';
 
 import './index.scss';
+import Head from './head/Head';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={configureStore()}>
+      <Head />
       <Header />
       <main>
         <Switch>

src/profile/__snapshots__/ProfilePage.test.jsx.snap

@@ -60,7 +60,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                 className="profile-avatar-menu-container"
               >
                 <div
-                  className="dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
@@ -120,12 +120,8 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -202,12 +198,8 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -2346,9 +2338,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                     <p
                       className="small mb-0"
                     >
-                      <span>
-                        From
-                      </span>
+                      From
                     </p>
                     <p
                       className="h6 mb-4"
@@ -2361,12 +2351,8 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
                     <p
                       className="small mb-2"
                     >
-                      <span>
-                        Completed on 
-                        <span>
-                          3/4/2019
-                        </span>
-                      </span>
+                      Completed on 
+                      3/4/2019
                     </p>
                     <div>
                       <a
@@ -2455,7 +2441,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                 className="profile-avatar-menu-container"
               >
                 <div
-                  className="dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
@@ -2515,12 +2501,8 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -2597,12 +2579,8 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -3017,7 +2995,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                       No formal education
                     </option>
                     <option
-                      value="o"
+                      value="other"
                     >
                       Other education
                     </option>
@@ -3535,9 +3513,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                     <p
                       className="small mb-0"
                     >
-                      <span>
-                        From
-                      </span>
+                      From
                     </p>
                     <p
                       className="h6 mb-4"
@@ -3550,12 +3526,8 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
                     <p
                       className="small mb-2"
                     >
-                      <span>
-                        Completed on 
-                        <span>
-                          3/4/2019
-                        </span>
-                      </span>
+                      Completed on 
+                      3/4/2019
                     </p>
                     <div>
                       <a
@@ -3644,7 +3616,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                 className="profile-avatar-menu-container"
               >
                 <div
-                  className="dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
@@ -3704,12 +3676,8 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -3786,12 +3754,8 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -5599,9 +5563,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                     <p
                       className="small mb-0"
                     >
-                      <span>
-                        From
-                      </span>
+                      From
                     </p>
                     <p
                       className="h6 mb-4"
@@ -5614,12 +5576,8 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
                     <p
                       className="small mb-2"
                     >
-                      <span>
-                        Completed on 
-                        <span>
-                          3/4/2019
-                        </span>
-                      </span>
+                      Completed on 
+                      3/4/2019
                     </p>
                     <div>
                       <a
@@ -5745,12 +5703,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <div
               className="d-flex align-items-center mt-3 mb-2rem"
@@ -5777,9 +5731,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               <div
                 className="username-description"
               >
-                <span>
-                  Your profile information is only visible to you. Only your username is visible to others on localhost.
-                </span>
+                Your profile information is only visible to you. Only your username is visible to others on localhost.
               </div>
             </div>
             <hr
@@ -5812,12 +5764,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <div
               className="d-flex align-items-center mt-3 mb-2rem"
@@ -5844,9 +5792,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               <div
                 className="username-description"
               >
-                <span>
-                  Your profile information is only visible to you. Only your username is visible to others on localhost.
-                </span>
+                Your profile information is only visible to you. Only your username is visible to others on localhost.
               </div>
             </div>
             <hr
@@ -5952,7 +5898,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                 className="profile-avatar-menu-container"
               >
                 <div
-                  className="dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
@@ -6012,12 +5958,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -6094,12 +6036,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -6907,9 +6845,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     <p
                       className="small mb-0"
                     >
-                      <span>
-                        From
-                      </span>
+                      From
                     </p>
                     <p
                       className="h6 mb-4"
@@ -6922,12 +6858,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     <p
                       className="small mb-2"
                     >
-                      <span>
-                        Completed on 
-                        <span>
-                          3/4/2019
-                        </span>
-                      </span>
+                      Completed on 
+                      3/4/2019
                     </p>
                     <div>
                       <a
@@ -7016,7 +6948,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                 className="profile-avatar-menu-container"
               >
                 <div
-                  className="dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
@@ -7076,12 +7008,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -7158,12 +7086,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -8038,9 +7962,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     <p
                       className="small mb-0"
                     >
-                      <span>
-                        From
-                      </span>
+                      From
                     </p>
                     <p
                       className="h6 mb-4"
@@ -8053,12 +7975,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     <p
                       className="small mb-2"
                     >
-                      <span>
-                        Completed on 
-                        <span>
-                          3/4/2019
-                        </span>
-                      </span>
+                      Completed on 
+                      3/4/2019
                     </p>
                     <div>
                       <a
@@ -8147,7 +8065,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                 className="profile-avatar-menu-container"
               >
                 <div
-                  className="dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
@@ -8207,12 +8125,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -8289,12 +8203,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -9175,9 +9085,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     <p
                       className="small mb-0"
                     >
-                      <span>
-                        From
-                      </span>
+                      From
                     </p>
                     <p
                       className="h6 mb-4"
@@ -9190,12 +9098,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     <p
                       className="small mb-2"
                     >
-                      <span>
-                        Completed on 
-                        <span>
-                          3/4/2019
-                        </span>
-                      </span>
+                      Completed on 
+                      3/4/2019
                     </p>
                     <div>
                       <a
@@ -9284,7 +9188,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                 className="profile-avatar-menu-container"
               >
                 <div
-                  className="dropdown"
+                  className="pgn__dropdown pgn__dropdown-light dropdown"
                   data-testid="dropdown"
                 >
                   <button
@@ -9344,12 +9248,8 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -9381,12 +9281,8 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
             <p
               className="mb-0"
             >
-              <span>
-                Member since 
-                <span>
-                  2017
-                </span>
-              </span>
+              Member since 
+              2017
             </p>
             <hr
               className="d-none d-md-block"
@@ -10149,9 +10045,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     <p
                       className="small mb-0"
                     >
-                      <span>
-                        From
-                      </span>
+                      From
                     </p>
                     <p
                       className="h6 mb-4"
@@ -10164,12 +10058,8 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
                     <p
                       className="small mb-2"
                     >
-                      <span>
-                        Completed on 
-                        <span>
-                          3/4/2019
-                        </span>
-                      </span>
+                      Completed on 
+                      3/4/2019
                     </p>
                     <div>
                       <a

src/profile/data/constants.js

@@ -7,7 +7,7 @@ const EDUCATION_LEVELS = [
   'jhs',
   'el',
   'none',
-  'o',
+  'other',
 ];
 
 const SOCIAL = {

src/profile/forms/__snapshots__/SocialLinks.test.jsx.snap

@@ -399,9 +399,7 @@ exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
                 style={Object {}}
               />
             </svg>
-            <span>
-              Add Facebook
-            </span>
+            Add Facebook
           </button>
         </div>
       </li>
@@ -433,9 +431,7 @@ exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
                 style={Object {}}
               />
             </svg>
-            <span>
-              Add Twitter
-            </span>
+            Add Twitter
           </button>
         </div>
       </li>