Add course certificates stub

package-lock.json

@@ -2437,7 +2437,7 @@
       }
     },
     "@edx/edx-bootstrap": {
-      "version": "git://github.com/edx/edx-bootstrap.git#71fd3272d235eb133cccefc1ce63f35a7696bf28",
+      "version": "git://github.com/edx/edx-bootstrap.git#e14bb7b678037a675e26c1b196f800e0f573f22e",
       "from": "git://github.com/edx/edx-bootstrap.git#update-with-documentation-site",
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^1.2.13",
@@ -5586,9 +5586,9 @@
       "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g=="
     },
     "chroma-js": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.0.2.tgz",
-      "integrity": "sha512-VtDXaYcaDr45wheOXasIs4S4IWEjpqh74UfQA0TwoLuBR7TG12ztmjj9JqTIe1sgzVTMDNwSPEJYcw/jYK2TSw=="
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.0.3.tgz",
+      "integrity": "sha512-2kTvZZOFSV1O81/rm99t9vmkh9jQxsHqsRRoZevDVz/VCC3yKMyPuMK8M5yHG+UMg2tV6cRoqtZtgcD92udcBw=="
     },
     "chrome-trace-event": {
       "version": "1.0.0",

src/App.scss

@@ -13,62 +13,6 @@ $fa-font-path: "~font-awesome/fonts";
   width: auto !important;
 }
 
-.bg-banner {
-  height: 12rem;
-  background-image: url('./assets/dot-pattern-light.png');
-  background-repeat: repeat-x;
-  background-size: auto 85%;
-  
-}
-
-
-.profile-avatar-wrap {
-  margin-right: 1rem;
-
-  @include media-breakpoint-up(md) {
-    max-width: 12rem;
-    margin-right: 0;
-    margin-top: -8rem;
-    margin-bottom: 2rem;
-  }
-}
-
-.profile-avatar {
-  max-width: 50%;
-  width: 5rem;
-  height: 5rem;
-  position: relative;
-
-  @include media-breakpoint-up(md) {
-    width: 12rem;
-    max-width: none;
-    height: 12rem;
-  }
-
-  .profile-avatar-edit-button {
-    position: absolute;
-    height: 100%;
-    left: 0;
-    width: 100%;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    padding-top: .1rem;
-    font-weight: 600;
-    background: rgba(0,0,0,.5);
-    border-radius:0;
-    transition: opacity 200ms ease;
-
-    @include media-breakpoint-up(md) {
-      height: 4rem;
-    }
-
-    &:focus, &:hover, &:active, &.active {
-      opacity: 1;
-    }
-  }
-}
-
 .btn-async-action {
   transition: background .2s linear;
   min-width: 6rem;
@@ -92,3 +36,68 @@ $fa-font-path: "~font-awesome/fonts";
     }
   }
 }
+
+.profile-page {
+  .bg-banner {
+    height: 12rem;
+    background-image: url('./assets/dot-pattern-light.png');
+    background-repeat: repeat-x;
+    background-size: auto 85%;
+  }
+
+
+  .profile-avatar-wrap {
+    margin-right: 1rem;
+
+    @include media-breakpoint-up(md) {
+      max-width: 12rem;
+      margin-right: 0;
+      margin-top: -8rem;
+      margin-bottom: 2rem;
+    }
+  }
+
+  .profile-avatar {
+    max-width: 50%;
+    width: 5rem;
+    height: 5rem;
+    position: relative;
+
+    @include media-breakpoint-up(md) {
+      width: 12rem;
+      max-width: none;
+      height: 12rem;
+    }
+
+    .profile-avatar-edit-button {
+      position: absolute;
+      height: 100%;
+      left: 0;
+      width: 100%;
+      bottom: 0;
+      display: flex;
+      justify-content: center;
+      padding-top: .1rem;
+      font-weight: 600;
+      background: rgba(0,0,0,.5);
+      border-radius:0;
+      transition: opacity 200ms ease;
+
+      @include media-breakpoint-up(md) {
+        height: 4rem;
+      }
+
+      &:focus, &:hover, &:active, &.active {
+        opacity: 1;
+      }
+    }
+  }
+
+  .certificate {
+    .certificate-title {
+      font-family: $font-family-serif;
+      font-weight: 400;
+    }
+  }
+}
+

src/components/UserProfile/MyCertificates.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { Row, Col, Card, CardBody, CardTitle } from 'reactstrap';
+import { Row, Col, Card, CardBody, CardTitle, CardText, Button } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
 
 import EditControls from './elements/EditControls';
 import EditableItemHeader from './elements/EditableItemHeader';
@@ -22,11 +24,34 @@ function MyCertificates({
 
     return (
       <Row>
-        {certificates.map(({ title }) => (
-          <Col key={title} sm={6}>
-            <Card className="mb-4">
+        {certificates.map(({
+          type: { key, name }, // eslint-disable-line no-unused-vars
+          title,
+          organization,
+          downloadUrl,
+        }) => (
+          <Col key={downloadUrl} sm={6}>
+            <Card className="mb-4 certificate">
               <CardBody>
-                <CardTitle>{title}</CardTitle>
+                <CardTitle>
+                  <p className="small mb-0">{name}</p>
+                  <h4 className="certificate-title">{title}</h4>
+                </CardTitle>
+                <CardText>
+                  <p className="small mb-0">From</p>
+                  <h6 className="mb-4">{organization}</h6>
+                  <div>
+                    <Button
+                      outline
+                      color="primary"
+                      href={downloadUrl}
+                      target="blank"
+                    >
+                      <FontAwesomeIcon className="ml-n1 mr-2" icon={faDownload} />
+                      Download
+                    </Button>
+                  </div>
+                </CardText>
               </CardBody>
             </Card>
           </Col>

src/components/UserProfile/index.jsx

@@ -156,7 +156,7 @@ class UserProfile extends React.Component {
     const getVisibility = name => this.props.visibility[name];
 
     return (
-      <div>
+      <div className="profile-page">
         <div className="bg-banner bg-program-micro-masters d-none d-md-block p-relative" />
         <Container fluid>
           <Row>

src/containers/UserProfile/index.jsx

@@ -29,7 +29,7 @@ const mapStateToProps = (state) => {
     education: state.profilePage.profile.levelOfEducation,
     socialLinks: state.profilePage.profile.socialLinks,
     bio: state.profilePage.profile.bio,
-    certificates: null,
+    certificates: state.profilePage.profile.certificates,
     accountPrivacy: state.profilePage.preferences.accountPrivacy,
     visibility: state.profilePage.preferences.visibility || {},
   };

src/sagas/RootSaga.js

@@ -71,6 +71,10 @@ export function* handleFetchProfile(action) {
       ProfileApiService.getProfile,
       username,
     );
+    profile.certificates = yield call(
+      ProfileApiService.getCourseCertificates,
+      username,
+    );
 
     yield put(fetchProfileSuccess(profile));
     yield put(fetchProfileReset());

src/services/ProfileApiService.js

@@ -129,3 +129,31 @@ export function postPreferences(username, preferences) {
       });
   });
 }
+
+export function getCourseCertificates(username) { // eslint-disable-line no-unused-vars
+  return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
+    const dummyData = [
+      {
+        type: {
+          key: 'micro_masters',
+          name: 'Micro Masters',
+        },
+        title: 'Microtonal Scales',
+        organization: 'New England Conservatory',
+        downloadUrl: 'https://pics.me.me/booplesnoot-36468371.png',
+      },
+      {
+        type: {
+          key: 'micro_masters',
+          name: 'Micro Masters',
+        },
+        title: 'Kazoo Pinch Harmonics',
+        organization: 'New England Conservatory',
+        downloadUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR88selLYRHDQemO8MnY3w3ajlSuKZcoRhVTp3eGvKq2HMRTn8q',
+      },
+    ];
+    setTimeout(() => {
+      resolve(dummyData);
+    }, 200);
+  });
+}